@kilivi/payloadcms-theme-management 1.1.2 → 2.1.0

package/dist/fields/AccessibilityAuditField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/AccessibilityAuditField.tsx"],"sourcesContent":["'use client'\n\nimport { useForm, useFormFields } from '@payloadcms/ui'\nimport { AlertTriangle, Check, ShieldCheck, Wand2 } from 'lucide-react'\nimport { useMemo } from 'react'\nimport { useThemeTranslations } from '../hooks/useThemeTranslations.js'\nimport { auditThemePalette, type AuditColors, type ContrastPairResult } from '../utils/contrast.js'\n\n/**\n * Live WCAG accessibility audit for the configured colour palette. Mounted as a\n * `ui` field inside the Appearance Settings tab; it checks the key\n * foreground/background pairs in both light and dark modes and offers a one-click\n * fix (nearest accessible colour) for any pair that fails AA (4.5:1).\n */\n\ntype Mode = 'lightMode' | 'darkMode'\n\n// Payload's semantic status tokens flip with the admin theme, unlike fixed hex pastels.\nconst STATUS = {\n  success: { bg: 'var(--theme-success-100)', fg: 'var(--theme-success-800)' },\n  warning: { bg: 'var(--theme-warning-100)', fg: 'var(--theme-warning-800)' },\n  error: { bg: 'var(--theme-error-100)', fg: 'var(--theme-error-800)' },\n}\n\nconst LEVEL_TONE: Record<string, { bg: string; fg: string }> = {\n  AAA: STATUS.success,\n  AA: STATUS.success,\n  'AA Large': STATUS.warning,\n  fail: STATUS.error,\n}\n\nexport default function AccessibilityAuditField() {\n  const formFields = useFormFields(([state]) => state) as Record<\n    string,\n    { value?: unknown } | undefined\n  >\n  const { dispatchFields, setModified } = useForm()\n  const tr = useThemeTranslations()\n  const t = tr.accessibility\n\n  const levelLabel = (level: string): string => {\n    if (level === 'AA Large') return tr.colorPicker.levelAALarge\n    if (level === 'fail') return tr.colorPicker.levelLow\n    return level\n  }\n\n  const readMode = (mode: Mode): AuditColors => {\n    const colors: AuditColors = {}\n    for (const key of [\n      'background',\n      'foreground',\n      'card',\n      'cardForeground',\n      'primary',\n      'primaryForeground',\n      'secondary',\n      'secondaryForeground',\n      'muted',\n      'mutedForeground',\n      'accent',\n      'accentForeground',\n      'destructive',\n      'destructiveForeground',\n    ]) {\n      const v = formFields?.[`themeConfiguration.${mode}.${key}`]?.value\n      if (typeof v === 'string') colors[key] = v\n    }\n    return colors\n  }\n\n  const lightColors = readMode('lightMode')\n  const darkColors = readMode('darkMode')\n\n  const lightAudit = useMemo(() => auditThemePalette(lightColors), [JSON.stringify(lightColors)])\n  const darkAudit = useMemo(() => auditThemePalette(darkColors), [JSON.stringify(darkColors)])\n\n  // Map each audited pair (by its foreground token) to a localized label.\n  const pairLabel = (result: ContrastPairResult): string => {\n    const map: Record<string, keyof typeof t.pairs> = {\n      foreground: 'bodyText',\n      mutedForeground: 'mutedText',\n      primaryForeground: 'primaryButton',\n      secondaryForeground: 'secondaryButton',\n      accentForeground: 'accent',\n      cardForeground: 'cardText',\n      destructiveForeground: 'destructive',\n    }\n    const key = map[result.foregroundKey]\n    return key ? t.pairs[key] : result.label\n  }\n\n  const applyFix = (mode: Mode, result: ContrastPairResult) => {\n    if (!result.suggestion) return\n    dispatchFields({\n      type: 'UPDATE',\n      path: `themeConfiguration.${mode}.${result.foregroundKey}`,\n      value: result.suggestion,\n    })\n    // Mark the form dirty so Save stays enabled after an auto-fix.\n    setModified(true)\n  }\n\n  const renderSection = (title: string, mode: Mode, audit: ContrastPairResult[]) => {\n    const failing = audit.filter((r) => !r.passes).length\n    return (\n      <section aria-label={title} style={{ flex: '1 1 260px', minWidth: 0 }}>\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: '6px',\n            fontSize: '13px',\n            fontWeight: 600,\n            color: 'var(--theme-elevation-800)',\n            marginBottom: '8px',\n          }}\n        >\n          {failing === 0 ? (\n            <ShieldCheck size={14} color={STATUS.success.fg} aria-hidden />\n          ) : (\n            <AlertTriangle size={14} color={STATUS.error.fg} aria-hidden />\n          )}\n          {title}\n          <span style={{ fontWeight: 500, color: 'var(--theme-elevation-600)' }}>\n            ({audit.length - failing}/{audit.length})\n          </span>\n        </div>\n\n        {audit.length === 0 ? (\n          <div style={{ fontSize: '12px', color: 'var(--theme-elevation-600)' }}>{t.noData}</div>\n        ) : failing === 0 ? (\n          <div style={{ fontSize: '12px', color: STATUS.success.fg }}>{t.allGood}</div>\n        ) : null}\n\n        <div style={{ display: 'grid', gap: '6px' }}>\n          {audit.map((r) => {\n            const tone = LEVEL_TONE[r.level] ?? LEVEL_TONE.fail\n            return (\n              <div\n                key={`${r.foregroundKey}-${r.backgroundKey}`}\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  gap: '8px',\n                  fontSize: '12px',\n                  padding: '4px 6px',\n                  borderRadius: '8px',\n                  border: '1px solid var(--theme-elevation-150)',\n                  background: 'var(--theme-elevation-50)',\n                }}\n              >\n                {/* Sample */}\n                <span\n                  aria-hidden\n                  style={{\n                    display: 'inline-flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    width: '34px',\n                    height: '22px',\n                    borderRadius: '5px',\n                    background: r.background,\n                    color: r.foreground,\n                    fontWeight: 700,\n                    border: '1px solid rgba(0,0,0,0.08)',\n                    flexShrink: 0,\n                  }}\n                >\n                  Aa\n                </span>\n                <span style={{ flex: 1, color: 'var(--theme-elevation-700)' }}>{pairLabel(r)}</span>\n                <span style={{ fontVariantNumeric: 'tabular-nums', color: 'var(--theme-elevation-600)' }}>\n                  {r.ratio}:1\n                </span>\n                <span\n                  style={{\n                    display: 'inline-flex',\n                    alignItems: 'center',\n                    gap: '3px',\n                    padding: '1px 6px',\n                    borderRadius: '999px',\n                    background: tone.bg,\n                    color: tone.fg,\n                    fontWeight: 600,\n                  }}\n                >\n                  {r.passes ? <Check size={12} aria-hidden /> : null}\n                  {levelLabel(r.level)}\n                </span>\n                {!r.passes && r.suggestion ? (\n                  <button\n                    type=\"button\"\n                    onClick={() => applyFix(mode, r)}\n                    title={`${t.fix} → ${r.suggestion}`}\n                    aria-label={`${t.fix}: ${pairLabel(r)} (${title}) → ${r.suggestion}`}\n                    className=\"theme-audit__fix\"\n                    style={{\n                      display: 'inline-flex',\n                      alignItems: 'center',\n                      gap: '4px',\n                      minHeight: '26px',\n                      padding: '2px 9px',\n                      borderRadius: '6px',\n                      border: 'none',\n                      cursor: 'pointer',\n                      background: 'var(--theme-elevation-800)',\n                      color: 'var(--theme-elevation-0)',\n                      fontWeight: 600,\n                    }}\n                  >\n                    <Wand2 size={12} aria-hidden />\n                    {t.fix}\n                  </button>\n                ) : null}\n              </div>\n            )\n          })}\n        </div>\n      </section>\n    )\n  }\n\n  return (\n    <div style={{ marginBottom: '20px' }}>\n      <div\n        style={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          gap: '6px',\n          fontSize: '13px',\n          fontWeight: 600,\n          color: 'var(--theme-elevation-800)',\n        }}\n      >\n        <ShieldCheck size={14} aria-hidden />\n        {t.title}\n      </div>\n      <div style={{ fontSize: '12px', color: 'var(--theme-elevation-600)', marginBottom: '12px' }}>\n        {t.subtitle}\n      </div>\n\n      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>\n        {renderSection(tr.ui.lightMode, 'lightMode', lightAudit)}\n        {renderSection(tr.ui.darkMode, 'darkMode', darkAudit)}\n      </div>\n    </div>\n  )\n}\n"],"names":["useForm","useFormFields","AlertTriangle","Check","ShieldCheck","Wand2","useMemo","useThemeTranslations","auditThemePalette","STATUS","success","bg","fg","warning","error","LEVEL_TONE","AAA","AA","fail","AccessibilityAuditField","formFields","state","dispatchFields","setModified","tr","t","accessibility","levelLabel","level","colorPicker","levelAALarge","levelLow","readMode","mode","colors","key","v","value","lightColors","darkColors","lightAudit","JSON","stringify","darkAudit","pairLabel","result","map","foreground","mutedForeground","primaryForeground","secondaryForeground","accentForeground","cardForeground","destructiveForeground","foregroundKey","pairs","label","applyFix","suggestion","type","path","renderSection","title","audit","failing","filter","r","passes","length","section","aria-label","style","flex","minWidth","div","display","alignItems","gap","fontSize","fontWeight","color","marginBottom","size","aria-hidden","span","noData","allGood","tone","padding","borderRadius","border","background","justifyContent","width","height","flexShrink","fontVariantNumeric","ratio","button","onClick","fix","className","minHeight","cursor","backgroundKey","subtitle","flexWrap","ui","lightMode","darkMode"],"mappings":"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"}

package/dist/fields/AppearancePreviewField.d.ts

@@ -0,0 +1,2 @@
+export default function AppearancePreviewField(): import("react").JSX.Element;
+//# sourceMappingURL=AppearancePreviewField.d.ts.map

package/dist/fields/AppearancePreviewField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppearancePreviewField.d.ts","sourceRoot":"","sources":["../../src/fields/AppearancePreviewField.tsx"],"names":[],"mappings":"AA6PA,MAAM,CAAC,OAAO,UAAU,sBAAsB,gCAqY7C"}