create-mercato-app 0.5.1-develop.2860.07af3a6a9d → 0.5.1-develop.2874.77704bccbd

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mercato-app",
-  "version": "0.5.1-develop.2860.07af3a6a9d",
+  "version": "0.5.1-develop.2874.77704bccbd",
   "type": "module",
   "description": "Create a new Open Mercato application",
   "main": "./dist/index.js",

package/template/src/app/globals.css

@@ -47,9 +47,31 @@ TODO: Fix that latter to have reference by the package names
   --color-secondary-foreground: var(--secondary-foreground);
   --color-secondary: var(--secondary);
   --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
   --color-primary: var(--primary);
   --color-brand-violet: var(--brand-violet);
   --color-brand-violet-foreground: var(--brand-violet-foreground);
+
+  /* Accent indigo — used by selection controls (checkbox/radio/switch) */
+  --color-accent-indigo: var(--accent-indigo);
+  --color-accent-indigo-foreground: var(--accent-indigo-foreground);
+
+  /* Disabled control tokens */
+  --color-bg-disabled: var(--bg-disabled);
+  --color-text-disabled: var(--text-disabled);
+  --color-border-disabled: var(--border-disabled);
+
+  /* Figma focus ring shadow */
+  --shadow-focus: 0 0 0 2px var(--focus-ring-inner), 0 0 0 4px var(--focus-ring-outer);
+
+  /* Social brand colors (theme-invariant) */
+  --color-brand-apple: var(--brand-apple);
+  --color-brand-github: var(--brand-github);
+  --color-brand-x: var(--brand-x);
+  --color-brand-google-stroke: var(--brand-google-stroke);
+  --color-brand-facebook: var(--brand-facebook);
+  --color-brand-dropbox: var(--brand-dropbox);
+  --color-brand-linkedin: var(--brand-linkedin);
   --color-popover-foreground: var(--popover-foreground);
   --color-popover: var(--popover);
   --color-card-foreground: var(--card-foreground);
@@ -89,14 +111,16 @@ TODO: Fix that latter to have reference by the package names
   --font-size-overline: 0.6875rem;
   --font-size-overline--line-height: 1rem;
 
-  /* ═══ Design System: Z-Index Scale ═══ */
-  --z-base: 0;
-  --z-sticky: 10;
-  --z-dropdown: 20;
-  --z-overlay: 30;
-  --z-modal: 40;
-  --z-toast: 50;
-  --z-tooltip: 60;
+  /* ═══ Design System: Z-Index Scale (Tailwind v4 namespace: z-{name} → var(--z-index-{name})) ═══ */
+  --z-index-base: 0;
+  --z-index-sticky: 10;
+  --z-index-dropdown: 20;
+  --z-index-overlay: 30;
+  --z-index-modal: 40;
+  --z-index-toast: 50;
+  --z-index-tooltip: 60;
+  --z-index-banner: 70;
+  --z-index-top: 100;
 }
 
 :root {
@@ -104,6 +128,17 @@ TODO: Fix that latter to have reference by the package names
   --font-geist-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-geist-mono: ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
   --radius: 0.625rem;
+  /* Focus ring tokens (opt-in via .focus-ring-fancy) */
+  --focus-ring-inner: rgba(255, 255, 255, 1);
+  --focus-ring-outer: rgba(153, 160, 174, 0.16);
+  /* Social brand colors — theme-invariant */
+  --brand-apple: #000000;
+  --brand-github: #181717;
+  --brand-x: #000000;
+  --brand-google-stroke: #DADCE0;
+  --brand-facebook: #1877F2;
+  --brand-dropbox: #0061FF;
+  --brand-linkedin: #0A66C2;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -114,6 +149,12 @@ TODO: Fix that latter to have reference by the package names
   --primary-foreground: oklch(0.985 0 0);
   --brand-violet: oklch(0.55 0.2 293);
   --brand-violet-foreground: oklch(0.985 0 0);
+  --primary-hover: oklch(0.145 0 0);
+  --accent-indigo: #6366f1;
+  --accent-indigo-foreground: #ffffff;
+  --bg-disabled: #f7f7f7;
+  --text-disabled: #d1d1d1;
+  --border-disabled: #ebebeb;
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
@@ -181,8 +222,18 @@ TODO: Fix that latter to have reference by the package names
   --status-neutral-icon: oklch(0.556 0 0);  /* = --muted-foreground */
 }
 
+/* Opt-in Figma-style focus ring: 2px inner ring + 4px outer ring */
+.focus-ring-fancy:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--focus-ring-inner),
+    0 0 0 6px var(--focus-ring-outer);
+}
+
 .dark {
   color-scheme: dark;
+  --focus-ring-inner: var(--background);
+  --focus-ring-outer: rgba(255, 255, 255, 0.18);
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
@@ -193,6 +244,12 @@ TODO: Fix that latter to have reference by the package names
   --primary-foreground: oklch(0.205 0 0);
   --brand-violet: oklch(0.65 0.2 293);
   --brand-violet-foreground: oklch(0.985 0 0);
+  --primary-hover: oklch(0.85 0 0);
+  --accent-indigo: #818cf8;
+  --accent-indigo-foreground: #ffffff;
+  --bg-disabled: oklch(0.25 0 0);
+  --text-disabled: oklch(0.45 0 0);
+  --border-disabled: oklch(0.30 0 0);
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
@@ -267,6 +324,11 @@ TODO: Fix that latter to have reference by the package names
   body {
     @apply bg-background text-foreground;
   }
+  /* Native form controls — use the DS indigo accent */
+  input[type="checkbox"],
+  input[type="radio"] {
+    accent-color: var(--accent-indigo);
+  }
   select,
   select option {
     background-color: var(--background);

package/template/src/components/DemoFeedbackWidget.tsx

@@ -176,7 +176,7 @@ export function DemoFeedbackWidget({ demoModeEnabled }: { demoModeEnabled: boole
     <button
       type="button"
       onClick={() => { setOpen(true); if (submitState === 'sent') resetForm() }}
-      className="fixed bottom-6 right-6 z-[60] flex items-center gap-2 rounded-full px-5 py-3 text-sm font-semibold text-white shadow-xl transition-all hover:scale-105 hover:shadow-2xl active:scale-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 animate-[subtle-bounce_2s_ease-in-out_infinite]"
+      className="fixed bottom-6 right-6 z-banner flex items-center gap-2 rounded-full px-5 py-3 text-sm font-semibold text-white shadow-xl transition-all hover:scale-105 hover:shadow-2xl active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 animate-[subtle-bounce_2s_ease-in-out_infinite]"
       style={{
         background: 'linear-gradient(135deg, #B4F372 0%, #EEFB63 50%, #BC9AFF 100%)',
         color: '#1B1B1B',
@@ -209,18 +209,18 @@ export function DemoFeedbackWidget({ demoModeEnabled }: { demoModeEnabled: boole
           </DialogHeader>
 
           {submitState === 'sent' ? (
-            <div className="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-6 text-center dark:border-emerald-900 dark:bg-emerald-950/40">
-              <p className="font-medium text-emerald-800 dark:text-emerald-200">
+            <div className="rounded-lg border border-status-success-border bg-status-success-bg px-4 py-6 text-center">
+              <p className="font-medium text-status-success-text">
                 {t('demoFeedback.dialog.successTitle', 'Thank you!')}
               </p>
-              <p className="mt-1 text-sm text-emerald-700 dark:text-emerald-300">
+              <p className="mt-1 text-sm text-status-success-text">
                 {t('demoFeedback.dialog.successBody', 'We\u2019ll get back to you shortly.')}
               </p>
             </div>
           ) : (
             <div className="grid gap-3">
               {submitError && (
-                <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900 dark:bg-red-950/40 dark:text-red-300">
+                <div className="rounded-md border border-status-error-border bg-status-error-bg px-3 py-2 text-sm text-status-error-text">
                   {submitError}
                 </div>
               )}
@@ -234,9 +234,9 @@ export function DemoFeedbackWidget({ demoModeEnabled }: { demoModeEnabled: boole
                   onChange={(e) => setEmail(e.target.value)}
                   disabled={submitState === 'sending'}
                   aria-invalid={Boolean(fieldErrors.email)}
-                  className={fieldErrors.email ? 'border-red-500 focus-visible:ring-red-500' : undefined}
+                  className={fieldErrors.email ? 'border-status-error-border aria-invalid:ring-destructive' : undefined}
                 />
-                {fieldErrors.email && <p className="text-xs text-red-600">{fieldErrors.email}</p>}
+                {fieldErrors.email && <p className="text-xs text-status-error-text">{fieldErrors.email}</p>}
               </div>
 
               <textarea
@@ -270,7 +270,7 @@ export function DemoFeedbackWidget({ demoModeEnabled }: { demoModeEnabled: boole
                     {t('demoFeedback.form.privacyLink', 'Privacy Policy')}
                   </a>
                   {fieldErrors.termsAccepted && (
-                    <span className="mt-0.5 block text-red-600">{fieldErrors.termsAccepted}</span>
+                    <span className="mt-0.5 block text-status-error-text">{fieldErrors.termsAccepted}</span>
                   )}
                 </span>
               </label>

package/template/src/components/GlobalNoticeBars.tsx

@@ -54,11 +54,11 @@ export function GlobalNoticeBars({ demoModeEnabled }: { demoModeEnabled: boolean
   }
 
   return (
-    <div className="pointer-events-none fixed inset-x-0 bottom-4 z-[70] flex flex-col items-center gap-3 px-4">
+    <div className="pointer-events-none fixed inset-x-0 bottom-4 z-banner flex flex-col items-center gap-3 px-4">
       {showDemoNotice ? (
-        <div className="pointer-events-auto w-full max-w-4xl rounded-lg border border-amber-200 bg-amber-50/90 p-4 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-amber-50/70 dark:border-amber-900/70 dark:bg-amber-950/40">
+        <div className="pointer-events-auto w-full max-w-4xl rounded-lg border border-status-warning-border bg-status-warning-bg p-4 shadow-lg backdrop-blur">
           <div className="flex items-start gap-3">
-            <div className="flex-1 text-sm text-amber-900 dark:text-amber-50 space-y-1">
+            <div className="flex-1 text-sm text-status-warning-text space-y-1">
               <p className="font-medium">{t('notices.demo.title', 'Demo Environment')}</p>
               <p>
                 {t('notices.demo.description', 'This instance is provided for demo purposes only. Data may be reset at any time and is not retained for any guaranteed period.')}
@@ -69,22 +69,22 @@ export function GlobalNoticeBars({ demoModeEnabled }: { demoModeEnabled: boolean
                   href="https://github.com/open-mercato"
                   target="_blank"
                   rel="noreferrer"
-                  className="underline font-medium hover:text-amber-800 dark:hover:text-amber-200"
+                  className="underline font-medium hover:text-status-warning-text"
                 >
                   {t('notices.demo.installLink', 'Install Open Mercato locally')}
                 </a>
                 . {t('notices.demo.reviewLinks', 'Review our')}{' '}
-                <Link className="underline font-medium hover:text-amber-800 dark:hover:text-amber-200" href="/terms">
+                <Link className="underline font-medium hover:text-status-warning-text" href="/terms">
                   {t('common.terms')}
                 </Link>{' '}
                 {t('notices.demo.and', 'and')}{' '}
-                <Link className="underline font-medium hover:text-amber-800 dark:hover:text-amber-200" href="/privacy">
+                <Link className="underline font-medium hover:text-status-warning-text" href="/privacy">
                   {t('common.privacy')}
                 </Link>
                 .
               </p>
             </div>
-            <Button variant="ghost" size="icon" onClick={handleDismissDemo} className="shrink-0 text-amber-900 dark:text-amber-100">
+            <Button variant="ghost" size="icon" onClick={handleDismissDemo} className="shrink-0 text-status-warning-text">
               <X className="size-4" />
             </Button>
           </div>

package/template/src/components/StartPageContent.tsx

@@ -125,7 +125,7 @@ export function StartPageContent({ showStartPage: initialShowStartPage, showOnbo
             </div>
           </div>
           <div className="md:ml-auto">
-            <Button asChild className="bg-emerald-600 hover:bg-emerald-700 focus-visible:ring-emerald-600 px-6 py-5 text-base font-semibold text-white shadow-md">
+            <Button asChild className="bg-emerald-600 hover:bg-emerald-700 focus-visible:ring-ring px-6 py-5 text-base font-semibold text-white shadow-md">
               <Link href="/onboarding">
                 {t('startPage.onboarding.cta', 'Start onboarding')}
                 <ArrowRight className="size-4" aria-hidden />
@@ -135,16 +135,16 @@ export function StartPageContent({ showStartPage: initialShowStartPage, showOnbo
         </section>
       ) : null}
 
-      <section className="rounded-lg border bg-blue-50 dark:bg-blue-950/20 border-blue-200 dark:border-blue-900 p-4">
+      <section className="rounded-lg border bg-status-info-bg border-status-info-border p-4">
         <div className="flex items-start gap-3">
-          <Info className="size-5 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
+          <Info className="size-5 text-status-info-icon shrink-0 mt-0.5" />
           <div className="flex-1">
-            <h3 className="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-1">{t('startPage.defaultPassword.title', 'Default Password')}</h3>
-            <p className="text-sm text-blue-800 dark:text-blue-200">
+            <h3 className="text-sm font-semibold text-status-info-text mb-1">{t('startPage.defaultPassword.title', 'Default Password')}</h3>
+            <p className="text-sm text-status-info-text">
               {t('startPage.defaultPassword.description1', 'The default password for all demo accounts is')}{' '}
-              <code className="px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900 font-mono text-xs">secret</code>.
+              <code className="px-1.5 py-0.5 rounded bg-status-info-bg font-mono text-xs">secret</code>.
               {' '}{t('startPage.defaultPassword.description2', 'To change passwords, use the CLI command:')}{' '}
-              <code className="px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900 font-mono text-xs">yarn mercato auth set-password --email &lt;email&gt; --password &lt;newPassword&gt;</code>
+              <code className="px-1.5 py-0.5 rounded bg-status-info-bg font-mono text-xs">yarn mercato auth set-password --email &lt;email&gt; --password &lt;newPassword&gt;</code>
               <span className="mt-2 block">{t('startPage.defaultPassword.description3', 'Demo account emails are printed in the terminal output during yarn initialize.')}</span>
             </p>
           </div>
@@ -248,7 +248,7 @@ export function StartPageContent({ showStartPage: initialShowStartPage, showOnbo
         </div>
         <p className="text-xs text-muted-foreground">
           {t('startPage.apiResources.baseUrl', 'Current API base URL:')}{' '}
-          <code className="rounded bg-muted px-2 py-0.5 text-[10px] text-foreground">{baseUrl}</code>
+          <code className="rounded bg-muted px-2 py-0.5 text-overline text-foreground">{baseUrl}</code>
         </p>
       </section>
 
@@ -260,7 +260,7 @@ export function StartPageContent({ showStartPage: initialShowStartPage, showOnbo
         />
         <label
           htmlFor="show-start-page"
-          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 cursor-pointer"
         >
           {t('startPage.showNextTime', 'Display this start page next time')}
         </label>

package/template/src/components/ui/button.tsx

@@ -5,14 +5,14 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@open-mercato/shared/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
         default:
           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 aria-invalid:ring-destructive dark:aria-invalid:ring-destructive dark:bg-destructive/10",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:

package/template/src/components/ui/checkbox.tsx

@@ -1,29 +1 @@
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
-
-import { cn } from "@open-mercato/shared/lib/utils"
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer size-4 shrink-0 rounded-sm border border-input bg-background shadow-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
-      <Check className="size-3.5" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
-
-export { Checkbox }
-
+export { Checkbox, checkboxVariants, type CheckboxProps } from '@open-mercato/ui/primitives/checkbox'

package/template/src/components/ui/input.tsx

@@ -9,7 +9,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       data-slot="input"
       className={cn(
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       )}

package/template/src/modules/example/backend/payments/page.tsx

@@ -180,7 +180,7 @@ function StripePaymentForm({
   }, [clientSecret, elements, onError, onSuccess, stripe, t])
 
   return (
-    <div className="space-y-4 rounded-lg border bg-muted/20 p-4">
+    <div className="space-y-4 rounded-lg border bg-muted/30 p-4">
       <div className="space-y-1">
         <p className="text-sm font-semibold">{t('example.payments.stripe.form.title', 'Complete Stripe payment')}</p>
         <p className="text-sm text-muted-foreground">

package/template/src/modules/example/components/TodosTable.tsx

@@ -72,7 +72,7 @@ function buildBaseColumns(t: (key: string, params?: Record<string, string | numb
         return (
           <span className="flex flex-wrap gap-1">
             {vals.map((v) => (
-              <span key={v} className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs border bg-accent/20">
+              <span key={v} className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs border bg-accent/50">
                 {v}
               </span>
             ))}

package/template/src/modules/example/widgets/components.ts

@@ -18,7 +18,7 @@ const alwaysEnabledComponentOverrides: ComponentOverride[] = [
         React.createElement(
           'div',
           {
-            className: 'rounded-md border border-dotted border-border/40 p-2',
+            className: 'rounded-md border border-dotted border-border/70 p-2',
             'data-testid': 'example-notes-wrapper',
           },
           React.createElement(Original, props as object)
@@ -39,7 +39,7 @@ const checkoutTestComponentOverrides: ComponentOverride[] = [
         React.createElement(
           'div',
           {
-            className: 'rounded-2xl border border-dashed border-blue-300 bg-blue-50/40 p-3',
+            className: 'rounded-xl border border-dashed border-blue-300 bg-blue-50/40 p-3',
             'data-testid': 'example-checkout-summary-wrapper',
           },
           React.createElement(Original, props as object)
@@ -57,7 +57,7 @@ const checkoutTestComponentOverrides: ComponentOverride[] = [
         React.createElement(
           'div',
           {
-            className: 'rounded-2xl border border-dashed border-amber-300 bg-amber-50/40 p-3',
+            className: 'rounded-xl border border-dashed border-amber-300 bg-amber-50/40 p-3',
             'data-testid': 'example-checkout-help-wrapper',
           },
           React.createElement(Original, props as object)

package/template/src/modules/example/widgets/dashboard/notes/widget.client.tsx

@@ -24,7 +24,7 @@ const NotesWidgetClient: React.FC<DashboardWidgetComponentProps<NotesSettings>>
         </label>
         <textarea
           id="dashboard-notes"
-          className="min-h-[160px] w-full resize-y rounded-md border px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+          className="min-h-[160px] w-full resize-y rounded-md border px-3 py-2 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           value={value.text}
           onChange={(event) => onSettingsChange({ text: event.target.value })}
           placeholder={t('example.widgets.notes.settings.placeholder', 'Write quick notes you want to keep handy.')}

package/template/src/modules/example/widgets/dashboard/todos/widget.client.tsx

@@ -143,7 +143,7 @@ const TodoWidgetClient: React.FC<DashboardWidgetComponentProps<TodoSettings>> =
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             value={value.pageSize}
             onChange={(event) => onSettingsChange({ ...value, pageSize: Number(event.target.value) })}
           />
@@ -168,7 +168,7 @@ const TodoWidgetClient: React.FC<DashboardWidgetComponentProps<TodoSettings>> =
       <div className="flex gap-2">
         <input
           type="text"
-          className="flex-1 rounded-md border px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+          className="flex-1 rounded-md border px-3 py-2 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           placeholder={t('example.widgets.todo.input.placeholder')}
           value={draft}
           onChange={(event) => setDraft(event.target.value)}
@@ -187,14 +187,14 @@ const TodoWidgetClient: React.FC<DashboardWidgetComponentProps<TodoSettings>> =
       ) : (
         <ul className="space-y-2">
           {items.length === 0 ? (
-            <li className="rounded-md border bg-muted/40 px-3 py-6 text-sm text-muted-foreground text-center">
+            <li className="rounded-md border bg-muted/50 px-3 py-6 text-sm text-muted-foreground text-center">
               {value.showCompleted ? t('example.widgets.todo.state.empty') : t('example.widgets.todo.state.allCaughtUp')}
             </li>
           ) : null}
           {items.map((item) => (
             <li
               key={item.id}
-              className="flex items-center justify-between gap-2 rounded-md border bg-muted/40 px-3 py-2 text-sm"
+              className="flex items-center justify-between gap-2 rounded-md border bg-muted/50 px-3 py-2 text-sm"
             >
               <label className="flex flex-1 items-center gap-2">
                 <input

package/template/src/modules/example/widgets/dashboard/welcome/widget.client.tsx

@@ -40,7 +40,7 @@ const WelcomeWidgetClient: React.FC<DashboardWidgetComponentProps<WelcomeSetting
           </label>
           <input
             id="welcome-headline"
-            className="w-full rounded-md border px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            className="w-full rounded-md border px-3 py-2 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             value={value.headline}
             onChange={(event) => handleChange('headline', event.target.value)}
             placeholder={t('example.widgets.welcome.settings.headlinePlaceholder', 'Welcome back, {{user}}!')}
@@ -55,7 +55,7 @@ const WelcomeWidgetClient: React.FC<DashboardWidgetComponentProps<WelcomeSetting
           </label>
           <textarea
             id="welcome-message"
-            className="min-h-[120px] w-full resize-y rounded-md border px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            className="min-h-[120px] w-full resize-y rounded-md border px-3 py-2 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             value={value.message ?? ''}
             onChange={(event) => handleChange('message', event.target.value)}
             placeholder={DEFAULT_SETTINGS.message}

package/template/src/modules/example/widgets/injection/catalog-seo-report/widget.client.tsx

@@ -96,15 +96,15 @@ export default function CatalogSeoReportWidget(_props: InjectionWidgetComponentP
       ) : loading ? (
         <p className="mt-2 text-xs text-muted-foreground">{t('common.loading', 'Loading…')}</p>
       ) : issues.length === 0 ? (
-        <p className="mt-2 text-xs text-emerald-700">{t('example.widgets.catalogSeoReport.healthy', 'All reviewed items look good!')}</p>
+        <p className="mt-2 text-xs text-status-success-text">{t('example.widgets.catalogSeoReport.healthy', 'All reviewed items look good!')}</p>
       ) : (
         <ul className="mt-3 space-y-2">
           {issues.map((issue) => (
-            <li key={issue.id} className="rounded border border-amber-200 dark:border-amber-900/70 bg-amber-50 dark:bg-amber-950/40 px-3 py-2">
+            <li key={issue.id} className="rounded border border-status-warning-border bg-status-warning-bg px-3 py-2">
               <div className="flex items-center justify-between gap-3">
                 <div>
-                  <div className="text-sm font-medium text-foreground dark:text-amber-50">{issue.title}</div>
-                  <div className="text-[11px] text-amber-800 dark:text-amber-300">{issue.issue}</div>
+                  <div className="text-sm font-medium text-foreground">{issue.title}</div>
+                  <div className="text-overline text-status-warning-text">{issue.issue}</div>
                 </div>
                 <Button asChild size="sm" variant="outline">
                   <a href={`/backend/catalog/products/${issue.id}`} className="text-xs">

package/template/src/modules/example/widgets/injection/crud-validation/widget.client.tsx

@@ -72,7 +72,7 @@ export default function ValidationWidget({ context, data, disabled }: InjectionW
       <div data-testid="widget-transform-display-data" className="text-xs text-muted-foreground">transformDisplayData={print(lastTransformDisplayData)}</div>
       <div data-testid="widget-transform-validation" className="text-xs text-muted-foreground">transformValidation={print(lastTransformValidation)}</div>
       <div data-testid="widget-recursive-before-save" className="text-xs text-muted-foreground">recursiveBeforeSave={print(lastRecursiveAddonBeforeSave)}</div>
-      <div data-testid="widget-recursive-addon-host" className="mt-2 rounded border border-dashed border-border/80 bg-background/60 p-2">
+      <div data-testid="widget-recursive-addon-host" className="mt-2 rounded border border-dashed border-border/70 bg-background/80 p-2">
         <InjectionSpot
           spotId="widget:example.injection.crud-validation:addon"
           context={context}

package/template/src/modules/example/widgets/injection/portal-quick-links/widget.client.tsx

@@ -16,12 +16,12 @@ export default function PortalQuickLinksWidget() {
           href={link.href}
           className="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:bg-muted"
         >
-          <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-foreground text-[12px] font-bold text-background">
+          <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-foreground text-xs font-bold text-background">
             {link.icon}
           </div>
           <div className="min-w-0">
-            <p className="text-[13px] font-medium">{link.label}</p>
-            <p className="text-[11px] text-muted-foreground">{link.description}</p>
+            <p className="text-sm font-medium">{link.label}</p>
+            <p className="text-overline text-muted-foreground">{link.description}</p>
           </div>
         </a>
       ))}

package/template/src/modules/example/widgets/injection/portal-recent-activity/widget.client.tsx

@@ -10,11 +10,11 @@ const MOCK_ACTIVITY = [
 
 function ActivityIcon({ type }: { type: string }) {
   const colors: Record<string, string> = {
-    login: 'bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400',
-    profile: 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400',
-    order: 'bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400',
+    login: 'bg-status-success-bg text-status-success-icon',
+    profile: 'bg-status-info-bg text-status-info-icon',
+    order: 'bg-status-warning-bg text-status-warning-icon',
     download: 'bg-violet-100 text-violet-600 dark:bg-violet-900/30 dark:text-violet-400',
-    security: 'bg-rose-100 text-rose-600 dark:bg-rose-900/30 dark:text-rose-400',
+    security: 'bg-status-error-bg text-status-error-icon',
   }
   return (
     <div className={`flex size-8 shrink-0 items-center justify-center rounded-lg text-xs font-bold ${colors[type] ?? 'bg-muted text-muted-foreground'}`}>
@@ -30,8 +30,8 @@ export default function PortalRecentActivityWidget() {
         <div key={item.id} className={`flex items-center gap-3 py-2.5 ${idx > 0 ? 'border-t' : ''}`}>
           <ActivityIcon type={item.icon} />
           <div className="min-w-0 flex-1">
-            <p className="text-[13px] font-medium">{item.action}</p>
-            <p className="text-[11px] text-muted-foreground">{item.time}</p>
+            <p className="text-sm font-medium">{item.action}</p>
+            <p className="text-overline text-muted-foreground">{item.time}</p>
           </div>
         </div>
       ))}

package/template/src/modules/example/widgets/injection/portal-stats/widget.client.tsx

@@ -12,13 +12,13 @@ export default function PortalStatsWidget() {
     <div className="grid grid-cols-2 gap-4">
       {STATS.map((stat) => (
         <div key={stat.label}>
-          <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
+          <p className="text-overline font-semibold uppercase tracking-wider text-muted-foreground/60">
             {stat.label}
           </p>
           <p className={`mt-0.5 text-2xl font-bold tracking-tight ${stat.color}`}>
             {stat.value}
           </p>
-          <p className="mt-0.5 text-[11px] text-muted-foreground">{stat.trend}</p>
+          <p className="mt-0.5 text-overline text-muted-foreground">{stat.trend}</p>
         </div>
       ))}
     </div>

package/template/src/modules/example/widgets/injection/sales-todos/widget.client.tsx

@@ -148,10 +148,10 @@ export default function SalesTodosWidget({ context }: InjectionWidgetComponentPr
         </Button>
       </form>
       {lastEvent ? (
-        <div className="flex items-center gap-2 rounded bg-blue-50 px-3 py-1.5 text-xs text-blue-700 dark:bg-blue-950 dark:text-blue-300">
-          <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500" />
+        <div className="flex items-center gap-2 rounded bg-status-info-bg px-3 py-1.5 text-xs text-status-info-text">
+          <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-status-info-icon" />
           SSE Event received: <code className="font-mono">{lastEvent.id}</code>
-          <span className="text-blue-500/70">
+          <span className="text-status-info-text">
             {new Date(lastEvent.timestamp).toLocaleTimeString()}
           </span>
         </div>