npm - @velora-cms/design-tokens - Versions diffs - 0.9.1 → 0.10.0 - Mend

@velora-cms/design-tokens 0.9.1 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/build-css.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+/**
+ * The complete tokens.css text: :root variables, one [data-theme] block
+ * per built-in theme that has overrides (the exact mechanism a
+ * third-party theme plugin uses at runtime), and the language-conditional
+ * sans-stack swap for Arabic. Pure — generate.ts writes it to disk.
+ */
+export declare function buildTokensCss(): string;
+export declare function countVariables(): number;

package/dist/build-css.js ADDED Viewed

@@ -0,0 +1,48 @@
+import { tokens, ARABIC_SANS_FONT_FAMILY } from './tokens.js';
+import { themes } from './themes/index.js';
+import { flatten, themeOverridesToCss } from './theme-css.js';
+/**
+ * The typography group flattens without its section prefix so variables
+ * read --font-size-base, not --typography-font-size-base. Everything
+ * else keeps its section name (--color-primary-500, --spacing-4, ...).
+ */
+function rootVariables() {
+    const { typography, ...rest } = tokens;
+    const variables = {};
+    flatten({ ...rest, ...typography }, [], variables);
+    return variables;
+}
+/**
+ * The complete tokens.css text: :root variables, one [data-theme] block
+ * per built-in theme that has overrides (the exact mechanism a
+ * third-party theme plugin uses at runtime), and the language-conditional
+ * sans-stack swap for Arabic. Pure — generate.ts writes it to disk.
+ */
+export function buildTokensCss() {
+    const variables = rootVariables();
+    const rootBlock = [
+        ':root {',
+        ...Object.entries(variables).map(([name, value]) => `  ${name}: ${value};`),
+        '}',
+    ].join('\n');
+    // Light has no overrides (it IS the :root default) so it emits no block —
+    // a property of Light's token set, not a special case in this loop.
+    const themeBlocks = themes
+        .map((theme) => themeOverridesToCss(theme.id, theme.contributions.themeTokens))
+        .filter(Boolean);
+    const arabicBlock = [
+        '/* Arabic locales lead with Plex Sans Arabic — same token, language-conditional value. */',
+        '[lang="ar"], [lang^="ar-"] {',
+        `  --font-family-sans: ${ARABIC_SANS_FONT_FAMILY};`,
+        '}',
+    ].join('\n');
+    return ([
+        '/* Generated by @velora-cms/design-tokens — do not edit by hand. */',
+        rootBlock,
+        ...themeBlocks,
+        arabicBlock,
+    ].join('\n\n') + '\n');
+}
+export function countVariables() {
+    return Object.keys(rootVariables()).length;
+}

package/dist/generate.js CHANGED Viewed

@@ -1,34 +1,15 @@
 /**
  * Build-time generator: emits tokens.css (CSS custom properties on
- * :root) and tokens.json (for theme plugin authors) next to the
- * compiled output. Run via `node dist/generate.js` after tsc.
+ * :root + theme blocks) and tokens.json (for theme plugin authors) next
+ * to the compiled output. Run via `node dist/generate.js` after tsc.
+ * The CSS text itself comes from build-css.ts so it can be unit-tested.
  */
 import { writeFile } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { buildTokensCss, countVariables } from './build-css.js';
 import { tokens } from './tokens.js';
-import { themes } from './themes/index.js';
-import { flatten, themeOverridesToCss } from './theme-css.js';
-// The typography group flattens without its section prefix so variables
-// read --font-size-base, not --typography-font-size-base. Everything
-// else keeps its section name (--color-primary-500, --spacing-4, ...).
-const { typography, ...rest } = tokens;
-const cssTree = { ...rest, ...typography };
-const variables = {};
-flatten(cssTree, [], variables);
-// Each theme with overrides gets its own [data-theme="id"] block —
-// the same mechanism a third-party theme plugin will use. Light has
-// no overrides (it IS the :root default) so it emits no block; that's
-// a property of Light's token set, not a special case in this loop.
-const themeBlocks = themes
-    .map((theme) => themeOverridesToCss(theme.id, theme.contributions.themeTokens))
-    .filter(Boolean);
-const css = [
-    '/* Generated by @velora-cms/design-tokens — do not edit by hand. */',
-    [':root {', ...Object.entries(variables).map(([name, value]) => `  ${name}: ${value};`), '}'].join('\n'),
-    ...themeBlocks,
-].join('\n\n') + '\n';
 const outDir = dirname(fileURLToPath(import.meta.url));
-await writeFile(join(outDir, 'tokens.css'), css, 'utf8');
+await writeFile(join(outDir, 'tokens.css'), buildTokensCss(), 'utf8');
 await writeFile(join(outDir, 'tokens.json'), JSON.stringify(tokens, null, 2) + '\n', 'utf8');
-console.log(`Generated tokens.css (${Object.keys(variables).length} variables) and tokens.json`);
+console.log(`Generated tokens.css (${countVariables()} variables) and tokens.json`);

package/dist/tailwind-theme.d.ts CHANGED Viewed

@@ -9,19 +9,20 @@ export declare const tailwindTheme: {
         warning: Record<import("./types.js").ColorScaleStep, string>;
         danger: Record<import("./types.js").ColorScaleStep, string>;
         neutral: Record<import("./types.js").ColorScaleStep, string>;
-        background: Record<"base" | "elevated" | "overlay" | "hover", string>;
-        text: Record<"primary" | "secondary" | "disabled" | "inverse", string>;
-        border: Record<"default" | "subtle" | "strong", string>;
+        background: Record<"base" | "elevated" | "subtle" | "overlay" | "hover", string>;
+        text: Record<"primary" | "secondary" | "tertiary" | "disabled" | "inverse", string>;
+        border: Record<"subtle" | "default" | "strong", string>;
     };
     fontFamily: {
         sans: string;
+        serif: string;
         mono: string;
     };
-    fontSize: Record<"xs" | "sm" | "base" | "lg" | "xl", string>;
+    fontSize: Record<"xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl", string>;
     fontWeight: Record<"normal" | "medium" | "semibold" | "bold", string>;
     lineHeight: Record<"normal" | "tight" | "relaxed", string>;
     spacing: Record<import("./types.js").SpacingStep, string>;
-    borderRadius: Record<"sm" | "lg" | "none" | "md" | "full", string>;
+    borderRadius: Record<"sm" | "lg" | "xl" | "none" | "md" | "full", string>;
     boxShadow: Record<"sm" | "lg" | "xl" | "md", string>;
     transitionDuration: Record<string, string>;
     transitionTimingFunction: Record<string, string>;

package/dist/tailwind-theme.js CHANGED Viewed

@@ -36,6 +36,7 @@ export const tailwindTheme = {
     },
     fontFamily: {
         sans: 'var(--font-family-sans)',
+        serif: 'var(--font-family-serif)',
         mono: 'var(--font-family-mono)',
     },
     fontSize: scaleRefs(tokens.typography.fontSize, 'font-size'),

package/dist/themes/dark.d.ts CHANGED Viewed

@@ -1,12 +1,13 @@
 import type { BuiltInTheme } from '../theme-types.js';
 /**
- * Dark theme overrides. Every value here is drawn from tokens the base
- * set already declares — no new colors invented outside the
- * VeloraDesignTokens shape. The background/text/border remaps make
- * #0F1117 (the brand dark bg reserved for this theme since Session 25)
- * and #F3F4F6 text actually apply; primary/secondary swap in the
- * lighter tint their own scale already defines (400/500) so accents
- * stay legible against the dark background, with the hover shade
- * shifting to what was the light theme's base shade.
+ * Dark theme overrides (S177/S178): warm charcoal, not GitHub-black. The
+ * light blue (#7CC0E8) becomes the ACTION colour itself — primary-600 is
+ * remapped to it, and text.inverse flips to near-black so `bg-primary-600
+ * text-text-inverse` (every primary button) stays legible without any
+ * component knowing which theme is active. Status scales remap the steps
+ * components use accordingly (100 fill, 600, and the AA text step — 700
+ * for success/danger, 800 for warning). Colour only — the
+ * Theme System contract keeps typography/spacing/shadow/motion in the
+ * base set.
  */
 export declare const darkTheme: BuiltInTheme;

package/dist/themes/dark.js CHANGED Viewed

@@ -1,12 +1,13 @@
 /**
- * Dark theme overrides. Every value here is drawn from tokens the base
- * set already declares — no new colors invented outside the
- * VeloraDesignTokens shape. The background/text/border remaps make
- * #0F1117 (the brand dark bg reserved for this theme since Session 25)
- * and #F3F4F6 text actually apply; primary/secondary swap in the
- * lighter tint their own scale already defines (400/500) so accents
- * stay legible against the dark background, with the hover shade
- * shifting to what was the light theme's base shade.
+ * Dark theme overrides (S177/S178): warm charcoal, not GitHub-black. The
+ * light blue (#7CC0E8) becomes the ACTION colour itself — primary-600 is
+ * remapped to it, and text.inverse flips to near-black so `bg-primary-600
+ * text-text-inverse` (every primary button) stays legible without any
+ * component knowing which theme is active. Status scales remap the steps
+ * components use accordingly (100 fill, 600, and the AA text step — 700
+ * for success/danger, 800 for warning). Colour only — the
+ * Theme System contract keeps typography/spacing/shadow/motion in the
+ * base set.
  */
 export const darkTheme = {
     id: 'dark',
@@ -16,25 +17,50 @@ export const darkTheme = {
         themeTokens: {
             color: {
                 background: {
-                    base: '#0F1117',
-                    elevated: '#171923',
+                    base: '#1A1C1B',
+                    elevated: '#232625',
+                    subtle: '#1F2221',
                     overlay: 'rgba(0, 0, 0, 0.6)',
-                    // one step lighter than elevated (neutral.800) — the missing dark
-                    // remap behind the Session 41 outline-hover bug
-                    hover: '#1F2937',
+                    hover: '#2C302E',
                 },
                 text: {
-                    primary: '#F3F4F6',
-                    secondary: '#9CA3AF',
-                    disabled: '#4B5563',
+                    primary: '#ECEAE3',
+                    secondary: '#A3A8A6',
+                    tertiary: '#969C99',
+                    disabled: '#6F7573',
+                    inverse: '#14181B',
                 },
                 border: {
-                    default: '#1F2937',
-                    subtle: '#171923',
-                    strong: '#374151',
+                    default: '#33373A',
+                    subtle: '#2C302E',
+                    strong: '#444A4D',
+                },
+                primary: {
+                    '50': '#1D2A34',
+                    '100': '#22364A',
+                    '200': '#2A4A66',
+                    '300': '#7CC0E8',
+                    '600': '#7CC0E8',
+                    '700': '#9AD0EE',
+                    '800': '#BFE1F5',
+                },
+                secondary: { '100': '#2A2C46', '500': '#9A9DE3', '600': '#9A9DE3' },
+                success: { '100': '#223A1E', '600': '#7FC46E', '700': '#8FD07F' },
+                warning: { '100': '#3D3016', '600': '#E0AA4B', '800': '#EABB6A' },
+                danger: { '100': '#45201D', '600': '#E8776E', '700': '#F0918A' },
+                neutral: {
+                    '50': '#1F2221',
+                    '100': '#232625',
+                    '200': '#2C302E',
+                    '300': '#33373A',
+                    '400': '#444A4D',
+                    '500': '#6F7573',
+                    '600': '#A3A8A6',
+                    '700': '#C5C9C6',
+                    '800': '#DAD9D3',
+                    '900': '#ECEAE3',
+                    '950': '#F5F4F0',
                 },
-                primary: { '500': '#818CF8', '600': '#6366F1' },
-                secondary: { '500': '#A78BFA', '600': '#8B5CF6' },
             },
         },
     },

package/dist/tokens.css CHANGED Viewed

@@ -1,83 +1,85 @@
 /* Generated by @velora-cms/design-tokens — do not edit by hand. */
 :root {
-  --color-primary-50: #EEF2FF;
-  --color-primary-100: #E0E7FF;
-  --color-primary-200: #C7D2FE;
-  --color-primary-300: #A5B4FC;
-  --color-primary-400: #818CF8;
-  --color-primary-500: #6366F1;
-  --color-primary-600: #4F46E5;
-  --color-primary-700: #4338CA;
-  --color-primary-800: #3730A3;
-  --color-primary-900: #312E81;
-  --color-primary-950: #1E1B4B;
-  --color-secondary-50: #F5F3FF;
-  --color-secondary-100: #EDE9FE;
-  --color-secondary-200: #DDD6FE;
-  --color-secondary-300: #C4B5FD;
-  --color-secondary-400: #A78BFA;
-  --color-secondary-500: #8B5CF6;
-  --color-secondary-600: #7C3AED;
-  --color-secondary-700: #6D28D9;
-  --color-secondary-800: #5B21B6;
-  --color-secondary-900: #4C1D95;
-  --color-secondary-950: #2E1065;
-  --color-success-50: #ECFDF5;
-  --color-success-100: #D1FAE5;
-  --color-success-200: #A7F3D0;
-  --color-success-300: #6EE7B7;
-  --color-success-400: #34D399;
-  --color-success-500: #10B981;
-  --color-success-600: #059669;
-  --color-success-700: #047857;
-  --color-success-800: #065F46;
-  --color-success-900: #064E3B;
-  --color-success-950: #022C22;
-  --color-warning-50: #FFFBEB;
-  --color-warning-100: #FEF3C7;
-  --color-warning-200: #FDE68A;
-  --color-warning-300: #FCD34D;
-  --color-warning-400: #FBBF24;
-  --color-warning-500: #F59E0B;
-  --color-warning-600: #D97706;
-  --color-warning-700: #B45309;
-  --color-warning-800: #92400E;
-  --color-warning-900: #78350F;
-  --color-warning-950: #451A03;
-  --color-danger-50: #FEF2F2;
-  --color-danger-100: #FEE2E2;
-  --color-danger-200: #FECACA;
-  --color-danger-300: #FCA5A5;
-  --color-danger-400: #F87171;
-  --color-danger-500: #EF4444;
-  --color-danger-600: #DC2626;
-  --color-danger-700: #B91C1C;
-  --color-danger-800: #991B1B;
-  --color-danger-900: #7F1D1D;
-  --color-danger-950: #450A0A;
-  --color-neutral-50: #F9FAFB;
-  --color-neutral-100: #F3F4F6;
-  --color-neutral-200: #E5E7EB;
-  --color-neutral-300: #D1D5DB;
-  --color-neutral-400: #9CA3AF;
-  --color-neutral-500: #6B7280;
-  --color-neutral-600: #4B5563;
-  --color-neutral-700: #374151;
-  --color-neutral-800: #1F2937;
-  --color-neutral-900: #111827;
-  --color-neutral-950: #030712;
-  --color-background-base: #F9FAFB;
+  --color-primary-50: #EAF4FB;
+  --color-primary-100: #CFE6F6;
+  --color-primary-200: #A9D5F0;
+  --color-primary-300: #7CC0E8;
+  --color-primary-400: #4E9CCB;
+  --color-primary-500: #2A82BC;
+  --color-primary-600: #1F6FA8;
+  --color-primary-700: #1A5E8F;
+  --color-primary-800: #154D75;
+  --color-primary-900: #113D5C;
+  --color-primary-950: #0B2A40;
+  --color-secondary-50: #F0F0FA;
+  --color-secondary-100: #E9E9F8;
+  --color-secondary-200: #D3D4F1;
+  --color-secondary-300: #B4B6E6;
+  --color-secondary-400: #8F92D8;
+  --color-secondary-500: #5B5FC7;
+  --color-secondary-600: #4B4FB0;
+  --color-secondary-700: #3E4194;
+  --color-secondary-800: #333676;
+  --color-secondary-900: #282A5C;
+  --color-secondary-950: #181A3A;
+  --color-success-50: #EEF5EB;
+  --color-success-100: #E4F0DF;
+  --color-success-200: #C6E0BD;
+  --color-success-300: #9CC78E;
+  --color-success-400: #6CA85C;
+  --color-success-500: #4E9340;
+  --color-success-600: #3B7D2E;
+  --color-success-700: #306626;
+  --color-success-800: #27521F;
+  --color-success-900: #1F4119;
+  --color-success-950: #122A0E;
+  --color-warning-50: #FBF5E8;
+  --color-warning-100: #F7EBD2;
+  --color-warning-200: #EFD8A6;
+  --color-warning-300: #E4BF72;
+  --color-warning-400: #D6A245;
+  --color-warning-500: #C98E2D;
+  --color-warning-600: #B7791F;
+  --color-warning-700: #96631A;
+  --color-warning-800: #764E15;
+  --color-warning-900: #5B3C11;
+  --color-warning-950: #3B260A;
+  --color-danger-50: #FBEFEE;
+  --color-danger-100: #F6E0DE;
+  --color-danger-200: #EEC3BF;
+  --color-danger-300: #E39B95;
+  --color-danger-400: #D66E66;
+  --color-danger-500: #C94F46;
+  --color-danger-600: #B93A32;
+  --color-danger-700: #9A2F29;
+  --color-danger-800: #7B2621;
+  --color-danger-900: #611E1A;
+  --color-danger-950: #3F120F;
+  --color-neutral-50: #FAF9F5;
+  --color-neutral-100: #F3F1EB;
+  --color-neutral-200: #ECEAE3;
+  --color-neutral-300: #E1DED5;
+  --color-neutral-400: #CFCBC0;
+  --color-neutral-500: #8C9490;
+  --color-neutral-600: #5C6663;
+  --color-neutral-700: #3E4644;
+  --color-neutral-800: #2A3230;
+  --color-neutral-900: #1B2321;
+  --color-neutral-950: #111614;
+  --color-background-base: #F3F1EB;
   --color-background-elevated: #FFFFFF;
-  --color-background-overlay: rgba(17, 24, 39, 0.5);
-  --color-background-hover: #F3F4F6;
-  --color-text-primary: #111827;
-  --color-text-secondary: #6B7280;
-  --color-text-disabled: #9CA3AF;
+  --color-background-subtle: #FAF9F5;
+  --color-background-overlay: rgba(27, 35, 33, 0.5);
+  --color-background-hover: #F0EEE7;
+  --color-text-primary: #1B2321;
+  --color-text-secondary: #5C6663;
+  --color-text-tertiary: #616966;
+  --color-text-disabled: #8C9490;
   --color-text-inverse: #FFFFFF;
-  --color-border-default: #E5E7EB;
-  --color-border-subtle: #F3F4F6;
-  --color-border-strong: #D1D5DB;
+  --color-border-default: #E1DED5;
+  --color-border-subtle: #ECEAE3;
+  --color-border-strong: #CFCBC0;
   --spacing-0: 0;
   --spacing-1: 0.25rem;
   --spacing-2: 0.5rem;
@@ -95,16 +97,18 @@
   --spacing-16: 4rem;
   --spacing-20: 5rem;
   --spacing-24: 6rem;
+  --spacing-72: 18rem;
   --spacing-px: 1px;
   --radius-none: 0;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
   --radius-full: 9999px;
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --shadow-sm: 0 1px 2px 0 rgba(43, 38, 24, 0.06);
+  --shadow-md: 0 1px 2px 0 rgba(43, 38, 24, 0.05), 0 6px 18px 0 rgba(43, 38, 24, 0.07);
+  --shadow-lg: 0 2px 4px 0 rgba(43, 38, 24, 0.06), 0 16px 40px 0 rgba(43, 38, 24, 0.12);
+  --shadow-xl: 0 4px 8px 0 rgba(43, 38, 24, 0.08), 0 24px 56px 0 rgba(43, 38, 24, 0.16);
   --motion-duration-fast: 150ms;
   --motion-duration-normal: 250ms;
   --motion-duration-slow: 400ms;
@@ -112,13 +116,16 @@
   --motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
   --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
   --direction: ltr;
-  --font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  --font-family-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
+  --font-family-sans: 'IBM Plex Sans', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif;
+  --font-family-serif: 'Literata', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
+  --font-family-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
   --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-base: 1rem;
-  --font-size-lg: 1.125rem;
+  --font-size-sm: 0.8125rem;
+  --font-size-base: 0.875rem;
+  --font-size-lg: 1rem;
   --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
@@ -129,18 +136,52 @@
 }
 [data-theme="dark"] {
-  --color-background-base: #0F1117;
-  --color-background-elevated: #171923;
+  --color-background-base: #1A1C1B;
+  --color-background-elevated: #232625;
+  --color-background-subtle: #1F2221;
   --color-background-overlay: rgba(0, 0, 0, 0.6);
-  --color-background-hover: #1F2937;
-  --color-text-primary: #F3F4F6;
-  --color-text-secondary: #9CA3AF;
-  --color-text-disabled: #4B5563;
-  --color-border-default: #1F2937;
-  --color-border-subtle: #171923;
-  --color-border-strong: #374151;
-  --color-primary-500: #818CF8;
-  --color-primary-600: #6366F1;
-  --color-secondary-500: #A78BFA;
-  --color-secondary-600: #8B5CF6;
+  --color-background-hover: #2C302E;
+  --color-text-primary: #ECEAE3;
+  --color-text-secondary: #A3A8A6;
+  --color-text-tertiary: #969C99;
+  --color-text-disabled: #6F7573;
+  --color-text-inverse: #14181B;
+  --color-border-default: #33373A;
+  --color-border-subtle: #2C302E;
+  --color-border-strong: #444A4D;
+  --color-primary-50: #1D2A34;
+  --color-primary-100: #22364A;
+  --color-primary-200: #2A4A66;
+  --color-primary-300: #7CC0E8;
+  --color-primary-600: #7CC0E8;
+  --color-primary-700: #9AD0EE;
+  --color-primary-800: #BFE1F5;
+  --color-secondary-100: #2A2C46;
+  --color-secondary-500: #9A9DE3;
+  --color-secondary-600: #9A9DE3;
+  --color-success-100: #223A1E;
+  --color-success-600: #7FC46E;
+  --color-success-700: #8FD07F;
+  --color-warning-100: #3D3016;
+  --color-warning-600: #E0AA4B;
+  --color-warning-800: #EABB6A;
+  --color-danger-100: #45201D;
+  --color-danger-600: #E8776E;
+  --color-danger-700: #F0918A;
+  --color-neutral-50: #1F2221;
+  --color-neutral-100: #232625;
+  --color-neutral-200: #2C302E;
+  --color-neutral-300: #33373A;
+  --color-neutral-400: #444A4D;
+  --color-neutral-500: #6F7573;
+  --color-neutral-600: #A3A8A6;
+  --color-neutral-700: #C5C9C6;
+  --color-neutral-800: #DAD9D3;
+  --color-neutral-900: #ECEAE3;
+  --color-neutral-950: #F5F4F0;
+}
+/* Arabic locales lead with Plex Sans Arabic — same token, language-conditional value. */
+[lang="ar"], [lang^="ar-"] {
+  --font-family-sans: 'IBM Plex Sans Arabic', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
 }

package/dist/tokens.d.ts CHANGED Viewed

@@ -1,12 +1,25 @@
 import type { VeloraDesignTokens } from './types.js';
 /**
- * Velora brand tokens — the default (light) token set.
+ * Velora brand tokens — the default (light) token set, per the S177
+ * design (the Session-177 design decisions,
+ * user-approved 2026-08-30).
  *
- * Brand anchors, per the UI & Design System plan:
- * every brand color is the 500 step of its scale (indigo #6366F1,
- * violet #8B5CF6, emerald #10B981, amber #F59E0B, red #EF4444), and
- * the light background #F9FAFB is neutral.50. The dark background
- * #0F1117 belongs to the Dark theme's overrides (Session 27), not to
- * this base set — themes override tokens, never components.
+ * Colour roles: the primary scale runs sky (50–300, atmosphere:
+ * selection, focus, the version rail) into cerulean (600–800, action:
+ * buttons, links). THE ACTION COLOUR IS primary-600 — this supersedes the
+ * Session-27 "brand = 500 step" convention for primary; 500 is a
+ * mid-step used for nothing in particular. Status scales pair a 100-step
+ * soft fill with the lightest text step that clears 4.5:1 on that fill
+ * (success/danger 700, warning 800). Neutrals are warm stone, not grey. The
+ * dark set (themes/dark.ts) overrides colour only — themes never touch
+ * typography/spacing/shadow/motion.
  */
 export declare const tokens: VeloraDesignTokens;
+/**
+ * Under an Arabic document language the SAME sans token leads with Plex
+ * Sans Arabic (its Latin glyphs are Plex-compatible), so RTL locales get a
+ * native UI face without any component knowing. Emitted by build-css.ts
+ * as a `[lang="ar"]` block — a language-conditional value of an existing
+ * token, not a new one.
+ */
+export declare const ARABIC_SANS_FONT_FAMILY = "'IBM Plex Sans Arabic', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif";

package/dist/tokens.js CHANGED Viewed

@@ -1,124 +1,140 @@
 /**
- * Velora brand tokens — the default (light) token set.
+ * Velora brand tokens — the default (light) token set, per the S177
+ * design (the Session-177 design decisions,
+ * user-approved 2026-08-30).
  *
- * Brand anchors, per the UI & Design System plan:
- * every brand color is the 500 step of its scale (indigo #6366F1,
- * violet #8B5CF6, emerald #10B981, amber #F59E0B, red #EF4444), and
- * the light background #F9FAFB is neutral.50. The dark background
- * #0F1117 belongs to the Dark theme's overrides (Session 27), not to
- * this base set — themes override tokens, never components.
+ * Colour roles: the primary scale runs sky (50–300, atmosphere:
+ * selection, focus, the version rail) into cerulean (600–800, action:
+ * buttons, links). THE ACTION COLOUR IS primary-600 — this supersedes the
+ * Session-27 "brand = 500 step" convention for primary; 500 is a
+ * mid-step used for nothing in particular. Status scales pair a 100-step
+ * soft fill with the lightest text step that clears 4.5:1 on that fill
+ * (success/danger 700, warning 800). Neutrals are warm stone, not grey. The
+ * dark set (themes/dark.ts) overrides colour only — themes never touch
+ * typography/spacing/shadow/motion.
  */
 export const tokens = {
     color: {
         primary: {
-            '50': '#EEF2FF',
-            '100': '#E0E7FF',
-            '200': '#C7D2FE',
-            '300': '#A5B4FC',
-            '400': '#818CF8',
-            '500': '#6366F1',
-            '600': '#4F46E5',
-            '700': '#4338CA',
-            '800': '#3730A3',
-            '900': '#312E81',
-            '950': '#1E1B4B',
+            '50': '#EAF4FB',
+            '100': '#CFE6F6',
+            '200': '#A9D5F0',
+            '300': '#7CC0E8',
+            '400': '#4E9CCB',
+            '500': '#2A82BC',
+            '600': '#1F6FA8',
+            '700': '#1A5E8F',
+            '800': '#154D75',
+            '900': '#113D5C',
+            '950': '#0B2A40',
         },
+        // The former brand indigo, demoted to the info/secondary role.
         secondary: {
-            '50': '#F5F3FF',
-            '100': '#EDE9FE',
-            '200': '#DDD6FE',
-            '300': '#C4B5FD',
-            '400': '#A78BFA',
-            '500': '#8B5CF6',
-            '600': '#7C3AED',
-            '700': '#6D28D9',
-            '800': '#5B21B6',
-            '900': '#4C1D95',
-            '950': '#2E1065',
+            '50': '#F0F0FA',
+            '100': '#E9E9F8',
+            '200': '#D3D4F1',
+            '300': '#B4B6E6',
+            '400': '#8F92D8',
+            '500': '#5B5FC7',
+            '600': '#4B4FB0',
+            '700': '#3E4194',
+            '800': '#333676',
+            '900': '#282A5C',
+            '950': '#181A3A',
         },
         success: {
-            '50': '#ECFDF5',
-            '100': '#D1FAE5',
-            '200': '#A7F3D0',
-            '300': '#6EE7B7',
-            '400': '#34D399',
-            '500': '#10B981',
-            '600': '#059669',
-            '700': '#047857',
-            '800': '#065F46',
-            '900': '#064E3B',
-            '950': '#022C22',
+            '50': '#EEF5EB',
+            '100': '#E4F0DF',
+            '200': '#C6E0BD',
+            '300': '#9CC78E',
+            '400': '#6CA85C',
+            '500': '#4E9340',
+            '600': '#3B7D2E',
+            '700': '#306626',
+            '800': '#27521F',
+            '900': '#1F4119',
+            '950': '#122A0E',
         },
         warning: {
-            '50': '#FFFBEB',
-            '100': '#FEF3C7',
-            '200': '#FDE68A',
-            '300': '#FCD34D',
-            '400': '#FBBF24',
-            '500': '#F59E0B',
-            '600': '#D97706',
-            '700': '#B45309',
-            '800': '#92400E',
-            '900': '#78350F',
-            '950': '#451A03',
+            '50': '#FBF5E8',
+            '100': '#F7EBD2',
+            '200': '#EFD8A6',
+            '300': '#E4BF72',
+            '400': '#D6A245',
+            '500': '#C98E2D',
+            '600': '#B7791F',
+            '700': '#96631A',
+            '800': '#764E15',
+            '900': '#5B3C11',
+            '950': '#3B260A',
         },
         danger: {
-            '50': '#FEF2F2',
-            '100': '#FEE2E2',
-            '200': '#FECACA',
-            '300': '#FCA5A5',
-            '400': '#F87171',
-            '500': '#EF4444',
-            '600': '#DC2626',
-            '700': '#B91C1C',
-            '800': '#991B1B',
-            '900': '#7F1D1D',
-            '950': '#450A0A',
+            '50': '#FBEFEE',
+            '100': '#F6E0DE',
+            '200': '#EEC3BF',
+            '300': '#E39B95',
+            '400': '#D66E66',
+            '500': '#C94F46',
+            '600': '#B93A32',
+            '700': '#9A2F29',
+            '800': '#7B2621',
+            '900': '#611E1A',
+            '950': '#3F120F',
         },
         neutral: {
-            '50': '#F9FAFB',
-            '100': '#F3F4F6',
-            '200': '#E5E7EB',
-            '300': '#D1D5DB',
-            '400': '#9CA3AF',
-            '500': '#6B7280',
-            '600': '#4B5563',
-            '700': '#374151',
-            '800': '#1F2937',
-            '900': '#111827',
-            '950': '#030712',
+            '50': '#FAF9F5',
+            '100': '#F3F1EB',
+            '200': '#ECEAE3',
+            '300': '#E1DED5',
+            '400': '#CFCBC0',
+            '500': '#8C9490',
+            '600': '#5C6663',
+            '700': '#3E4644',
+            '800': '#2A3230',
+            '900': '#1B2321',
+            '950': '#111614',
         },
         background: {
-            base: '#F9FAFB',
+            base: '#F3F1EB',
             elevated: '#FFFFFF',
-            overlay: 'rgba(17, 24, 39, 0.5)',
-            // neutral.100 — the shade outline/ghost hovers rendered before this
-            // was a token, so light theme is visually unchanged
-            hover: '#F3F4F6',
+            subtle: '#FAF9F5',
+            overlay: 'rgba(27, 35, 33, 0.5)',
+            // Nudged from #ECEAE3 (S179): the original wash put primary-600 text
+            // at 4.48:1 against it, just under AA — #F0EEE7 clears 4.5:1 while
+            // staying the darkest of the four light surfaces (the hover-wash
+            // hierarchy is unchanged).
+            hover: '#F0EEE7',
         },
         text: {
-            primary: '#111827',
-            secondary: '#6B7280',
-            disabled: '#9CA3AF',
+            primary: '#1B2321',
+            secondary: '#5C6663',
+            tertiary: '#616966',
+            disabled: '#8C9490',
             inverse: '#FFFFFF',
         },
         border: {
-            default: '#E5E7EB',
-            subtle: '#F3F4F6',
-            strong: '#D1D5DB',
+            default: '#E1DED5',
+            subtle: '#ECEAE3',
+            strong: '#CFCBC0',
         },
     },
     typography: {
         fontFamily: {
-            sans: "'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
-            mono: "'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace",
+            sans: "'IBM Plex Sans', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif",
+            serif: "'Literata', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif",
+            mono: "'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace",
         },
+        // px targets at a 16px root: 12 · 13 · 14 · 16 · 20 · 24 · 30.
+        // base is 14px (the tool's body size); 2xl = tool titles, 3xl =
+        // content titles (serif).
         fontSize: {
             xs: '0.75rem',
-            sm: '0.875rem',
-            base: '1rem',
-            lg: '1.125rem',
+            sm: '0.8125rem',
+            base: '0.875rem',
+            lg: '1rem',
             xl: '1.25rem',
+            '2xl': '1.5rem',
+            '3xl': '1.875rem',
         },
         fontWeight: {
             normal: 400,
@@ -151,19 +167,25 @@ export const tokens = {
         '16': '4rem',
         '20': '5rem',
         '24': '6rem',
+        // 72 (18rem): the persistent tree panel's width (S49 structure, S177 spec
+        // 284px) — Tailwind's `w-72` resolves only through this scale.
+        '72': '18rem',
     },
+    // 6 small · 8 controls · 12 cards · 16 dialogs
     radius: {
         none: '0',
-        sm: '0.25rem',
-        md: '0.375rem',
-        lg: '0.5rem',
+        sm: '0.375rem',
+        md: '0.5rem',
+        lg: '0.75rem',
+        xl: '1rem',
         full: '9999px',
     },
+    // Warm-tinted (the shadow colour is the neutral-900 ink, not black).
     shadow: {
-        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-        md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
-        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
-        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
+        sm: '0 1px 2px 0 rgba(43, 38, 24, 0.06)',
+        md: '0 1px 2px 0 rgba(43, 38, 24, 0.05), 0 6px 18px 0 rgba(43, 38, 24, 0.07)',
+        lg: '0 2px 4px 0 rgba(43, 38, 24, 0.06), 0 16px 40px 0 rgba(43, 38, 24, 0.12)',
+        xl: '0 4px 8px 0 rgba(43, 38, 24, 0.08), 0 24px 56px 0 rgba(43, 38, 24, 0.16)',
     },
     motion: {
         duration: {
@@ -179,3 +201,11 @@ export const tokens = {
     },
     direction: 'ltr',
 };
+/**
+ * Under an Arabic document language the SAME sans token leads with Plex
+ * Sans Arabic (its Latin glyphs are Plex-compatible), so RTL locales get a
+ * native UI face without any component knowing. Emitted by build-css.ts
+ * as a `[lang="ar"]` block — a language-conditional value of an existing
+ * token, not a new one.
+ */
+export const ARABIC_SANS_FONT_FAMILY = "'IBM Plex Sans Arabic', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif";

package/dist/tokens.json CHANGED Viewed

@@ -1,112 +1,117 @@
 {
   "color": {
     "primary": {
-      "50": "#EEF2FF",
-      "100": "#E0E7FF",
-      "200": "#C7D2FE",
-      "300": "#A5B4FC",
-      "400": "#818CF8",
-      "500": "#6366F1",
-      "600": "#4F46E5",
-      "700": "#4338CA",
-      "800": "#3730A3",
-      "900": "#312E81",
-      "950": "#1E1B4B"
+      "50": "#EAF4FB",
+      "100": "#CFE6F6",
+      "200": "#A9D5F0",
+      "300": "#7CC0E8",
+      "400": "#4E9CCB",
+      "500": "#2A82BC",
+      "600": "#1F6FA8",
+      "700": "#1A5E8F",
+      "800": "#154D75",
+      "900": "#113D5C",
+      "950": "#0B2A40"
     },
     "secondary": {
-      "50": "#F5F3FF",
-      "100": "#EDE9FE",
-      "200": "#DDD6FE",
-      "300": "#C4B5FD",
-      "400": "#A78BFA",
-      "500": "#8B5CF6",
-      "600": "#7C3AED",
-      "700": "#6D28D9",
-      "800": "#5B21B6",
-      "900": "#4C1D95",
-      "950": "#2E1065"
+      "50": "#F0F0FA",
+      "100": "#E9E9F8",
+      "200": "#D3D4F1",
+      "300": "#B4B6E6",
+      "400": "#8F92D8",
+      "500": "#5B5FC7",
+      "600": "#4B4FB0",
+      "700": "#3E4194",
+      "800": "#333676",
+      "900": "#282A5C",
+      "950": "#181A3A"
     },
     "success": {
-      "50": "#ECFDF5",
-      "100": "#D1FAE5",
-      "200": "#A7F3D0",
-      "300": "#6EE7B7",
-      "400": "#34D399",
-      "500": "#10B981",
-      "600": "#059669",
-      "700": "#047857",
-      "800": "#065F46",
-      "900": "#064E3B",
-      "950": "#022C22"
+      "50": "#EEF5EB",
+      "100": "#E4F0DF",
+      "200": "#C6E0BD",
+      "300": "#9CC78E",
+      "400": "#6CA85C",
+      "500": "#4E9340",
+      "600": "#3B7D2E",
+      "700": "#306626",
+      "800": "#27521F",
+      "900": "#1F4119",
+      "950": "#122A0E"
     },
     "warning": {
-      "50": "#FFFBEB",
-      "100": "#FEF3C7",
-      "200": "#FDE68A",
-      "300": "#FCD34D",
-      "400": "#FBBF24",
-      "500": "#F59E0B",
-      "600": "#D97706",
-      "700": "#B45309",
-      "800": "#92400E",
-      "900": "#78350F",
-      "950": "#451A03"
+      "50": "#FBF5E8",
+      "100": "#F7EBD2",
+      "200": "#EFD8A6",
+      "300": "#E4BF72",
+      "400": "#D6A245",
+      "500": "#C98E2D",
+      "600": "#B7791F",
+      "700": "#96631A",
+      "800": "#764E15",
+      "900": "#5B3C11",
+      "950": "#3B260A"
     },
     "danger": {
-      "50": "#FEF2F2",
-      "100": "#FEE2E2",
-      "200": "#FECACA",
-      "300": "#FCA5A5",
-      "400": "#F87171",
-      "500": "#EF4444",
-      "600": "#DC2626",
-      "700": "#B91C1C",
-      "800": "#991B1B",
-      "900": "#7F1D1D",
-      "950": "#450A0A"
+      "50": "#FBEFEE",
+      "100": "#F6E0DE",
+      "200": "#EEC3BF",
+      "300": "#E39B95",
+      "400": "#D66E66",
+      "500": "#C94F46",
+      "600": "#B93A32",
+      "700": "#9A2F29",
+      "800": "#7B2621",
+      "900": "#611E1A",
+      "950": "#3F120F"
     },
     "neutral": {
-      "50": "#F9FAFB",
-      "100": "#F3F4F6",
-      "200": "#E5E7EB",
-      "300": "#D1D5DB",
-      "400": "#9CA3AF",
-      "500": "#6B7280",
-      "600": "#4B5563",
-      "700": "#374151",
-      "800": "#1F2937",
-      "900": "#111827",
-      "950": "#030712"
+      "50": "#FAF9F5",
+      "100": "#F3F1EB",
+      "200": "#ECEAE3",
+      "300": "#E1DED5",
+      "400": "#CFCBC0",
+      "500": "#8C9490",
+      "600": "#5C6663",
+      "700": "#3E4644",
+      "800": "#2A3230",
+      "900": "#1B2321",
+      "950": "#111614"
     },
     "background": {
-      "base": "#F9FAFB",
+      "base": "#F3F1EB",
       "elevated": "#FFFFFF",
-      "overlay": "rgba(17, 24, 39, 0.5)",
-      "hover": "#F3F4F6"
+      "subtle": "#FAF9F5",
+      "overlay": "rgba(27, 35, 33, 0.5)",
+      "hover": "#F0EEE7"
     },
     "text": {
-      "primary": "#111827",
-      "secondary": "#6B7280",
-      "disabled": "#9CA3AF",
+      "primary": "#1B2321",
+      "secondary": "#5C6663",
+      "tertiary": "#616966",
+      "disabled": "#8C9490",
       "inverse": "#FFFFFF"
     },
     "border": {
-      "default": "#E5E7EB",
-      "subtle": "#F3F4F6",
-      "strong": "#D1D5DB"
+      "default": "#E1DED5",
+      "subtle": "#ECEAE3",
+      "strong": "#CFCBC0"
     }
   },
   "typography": {
     "fontFamily": {
-      "sans": "'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
-      "mono": "'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace"
+      "sans": "'IBM Plex Sans', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif",
+      "serif": "'Literata', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif",
+      "mono": "'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace"
     },
     "fontSize": {
       "xs": "0.75rem",
-      "sm": "0.875rem",
-      "base": "1rem",
-      "lg": "1.125rem",
-      "xl": "1.25rem"
+      "sm": "0.8125rem",
+      "base": "0.875rem",
+      "lg": "1rem",
+      "xl": "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem"
     },
     "fontWeight": {
       "normal": 400,
@@ -138,20 +143,22 @@
     "16": "4rem",
     "20": "5rem",
     "24": "6rem",
+    "72": "18rem",
     "px": "1px"
   },
   "radius": {
     "none": "0",
-    "sm": "0.25rem",
-    "md": "0.375rem",
-    "lg": "0.5rem",
+    "sm": "0.375rem",
+    "md": "0.5rem",
+    "lg": "0.75rem",
+    "xl": "1rem",
     "full": "9999px"
   },
   "shadow": {
-    "sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-    "md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
-    "lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
-    "xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
+    "sm": "0 1px 2px 0 rgba(43, 38, 24, 0.06)",
+    "md": "0 1px 2px 0 rgba(43, 38, 24, 0.05), 0 6px 18px 0 rgba(43, 38, 24, 0.07)",
+    "lg": "0 2px 4px 0 rgba(43, 38, 24, 0.06), 0 16px 40px 0 rgba(43, 38, 24, 0.12)",
+    "xl": "0 4px 8px 0 rgba(43, 38, 24, 0.08), 0 24px 56px 0 rgba(43, 38, 24, 0.16)"
   },
   "motion": {
     "duration": {

package/dist/types.d.ts CHANGED Viewed

@@ -10,7 +10,7 @@ export type ColorScale = Record<ColorScaleStep, string>;
  * Dots are avoided in keys so CSS custom property names stay valid
  * without escaping.
  */
-export type SpacingStep = '0' | 'px' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '14' | '16' | '20' | '24';
+export type SpacingStep = '0' | 'px' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '14' | '16' | '20' | '24' | '72';
 export type ScaleTokens = Record<SpacingStep, string>;
 export interface VeloraDesignTokens {
     color: {
@@ -23,12 +23,14 @@ export interface VeloraDesignTokens {
         background: {
             base: string;
             elevated: string;
+            subtle: string;
             overlay: string;
             hover: string;
         };
         text: {
             primary: string;
             secondary: string;
+            tertiary: string;
             disabled: string;
             inverse: string;
         };
@@ -41,14 +43,15 @@ export interface VeloraDesignTokens {
     typography: {
         fontFamily: {
             sans: string;
+            serif: string;
             mono: string;
         };
-        fontSize: Record<'xs' | 'sm' | 'base' | 'lg' | 'xl', string>;
+        fontSize: Record<'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl', string>;
         fontWeight: Record<'normal' | 'medium' | 'semibold' | 'bold', number>;
         lineHeight: Record<'tight' | 'normal' | 'relaxed', number>;
     };
     spacing: ScaleTokens;
-    radius: Record<'none' | 'sm' | 'md' | 'lg' | 'full', string>;
+    radius: Record<'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full', string>;
     shadow: Record<'sm' | 'md' | 'lg' | 'xl', string>;
     motion: {
         duration: Record<string, string>;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@velora-cms/design-tokens",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "license": "Apache-2.0",
   "description": "Velora's design token source, generating the Tailwind config and CSS variables consumed by the UI library, admin UI, and plugin UIs.",
   "engines": {