Genarrative/packages/shared/src/components/platformActionButtonModel.ts

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(' ');
}