export type PlatformActionButtonTone = | 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'warning' | 'accent' | 'accentSoft'; export type PlatformActionButtonSurface = 'platform' | 'profile' | 'editorDark'; export type PlatformActionButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'; export type PlatformActionButtonShape = 'default' | 'pill'; export type PlatformActionButtonAlign = 'center' | 'start'; const PLATFORM_ACTION_BUTTON_PLATFORM_TONE_CLASS: Record< PlatformActionButtonTone, string > = { primary: 'platform-button platform-button--primary', secondary: 'platform-button platform-button--secondary', ghost: 'platform-button platform-button--ghost', danger: 'platform-button platform-button--danger', success: 'platform-button platform-button--primary', warning: 'platform-button platform-button--secondary', accent: 'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100', accentSoft: 'platform-action-button platform-action-button--accent-soft [border-color:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_24%,transparent)] [background:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,var(--platform-panel-fill)_90%)] [color:var(--platform-action-accent,#c7653d)] [box-shadow:0_0.55rem_1.2rem_color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,transparent)]', }; const PLATFORM_ACTION_BUTTON_PROFILE_TONE_CLASS: Record< PlatformActionButtonTone, string > = { primary: 'platform-primary-button', secondary: 'platform-button platform-button--secondary', ghost: 'platform-button platform-button--ghost', danger: 'platform-button platform-button--danger', success: 'platform-primary-button', warning: 'platform-button platform-button--secondary', accent: 'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100', accentSoft: 'platform-action-button platform-action-button--accent-soft [border-color:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_24%,transparent)] [background:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,var(--platform-panel-fill)_90%)] [color:var(--platform-action-accent,#c7653d)] [box-shadow:0_0.55rem_1.2rem_color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,transparent)]', }; const PLATFORM_ACTION_BUTTON_EDITOR_DARK_TONE_CLASS: Record< PlatformActionButtonTone, string > = { primary: 'platform-action-button platform-action-button--editor-dark border border-sky-300/35 bg-sky-400 text-slate-950 hover:bg-sky-300', secondary: 'platform-action-button platform-action-button--editor-dark border border-white/10 bg-white/5 text-zinc-200 hover:bg-white/10 hover:text-white', ghost: 'platform-action-button platform-action-button--editor-dark border border-white/10 bg-black/20 text-zinc-200 hover:text-white', danger: 'platform-action-button platform-action-button--editor-dark border border-rose-300/25 bg-rose-500/10 text-rose-100 hover:bg-rose-500/15', success: 'platform-action-button platform-action-button--editor-dark border border-emerald-300/35 bg-emerald-400 text-slate-950 hover:bg-emerald-300', warning: 'platform-action-button platform-action-button--editor-dark border border-amber-300/30 bg-amber-500/20 text-amber-50 hover:bg-amber-500/25', accent: 'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100', accentSoft: 'platform-action-button platform-action-button--accent-soft [border-color:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_24%,transparent)] [background:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,rgba(0,0,0,0.72)_90%)] [color:var(--platform-action-accent,#f5c36a)] [box-shadow:0_0.55rem_1.2rem_color-mix(in_srgb,var(--platform-action-accent,#f5c36a)_10%,transparent)]', }; const PLATFORM_ACTION_BUTTON_SIZE_CLASS: Record< PlatformActionButtonSize, string > = { xxs: 'px-3 py-1 text-[10px]', xs: 'px-4 py-2 text-xs', sm: 'px-4 py-2.5 text-sm', md: 'px-4 py-3 text-sm', lg: 'h-12 px-4 text-base', }; const PLATFORM_ACTION_BUTTON_SHAPE_CLASS: Record< PlatformActionButtonShape, string > = { default: 'rounded-2xl', pill: 'rounded-full', }; const PLATFORM_ACTION_BUTTON_ALIGN_CLASS: Record< PlatformActionButtonAlign, string > = { center: 'justify-center', start: 'justify-start text-left', }; function getPlatformActionButtonToneClass( surface: PlatformActionButtonSurface, tone: PlatformActionButtonTone, ) { if (surface === 'editorDark') { return PLATFORM_ACTION_BUTTON_EDITOR_DARK_TONE_CLASS[tone]; } return surface === 'profile' ? PLATFORM_ACTION_BUTTON_PROFILE_TONE_CLASS[tone] : PLATFORM_ACTION_BUTTON_PLATFORM_TONE_CLASS[tone]; } export function getPlatformActionButtonClassName({ surface = 'platform', tone = 'primary', size = 'sm', shape = 'default', align = 'center', fullWidth = false, }: { surface?: PlatformActionButtonSurface; tone?: PlatformActionButtonTone; size?: PlatformActionButtonSize; shape?: PlatformActionButtonShape; align?: PlatformActionButtonAlign; fullWidth?: boolean; }) { return [ getPlatformActionButtonToneClass(surface, tone), PLATFORM_ACTION_BUTTON_SIZE_CLASS[size], PLATFORM_ACTION_BUTTON_SHAPE_CLASS[shape], PLATFORM_ACTION_BUTTON_ALIGN_CLASS[align], fullWidth ? 'w-full' : null, 'inline-flex items-center gap-2 transition-colors font-black disabled:cursor-not-allowed disabled:opacity-60', ] .filter(Boolean) .join(' '); }