@vellira-ui/tokens 2.98.6 → 2.99.0

package/dist/token-architecture.js

@@ -279,14 +279,6 @@ export const legitimatePersistentActiveStateDomainsV1 = [
         pattern: 'semantic.menu.item.danger.active',
         meaning: 'Current/highlighted danger menu item.',
     },
-    {
-        pattern: 'semantic.navigation.active',
-        meaning: 'Current navigation destination.',
-    },
-    {
-        pattern: 'semantic.navigation.optionActive',
-        meaning: 'Current/highlighted navigation option.',
-    },
     {
         pattern: 'components.contextMenu.item.active',
         meaning: 'Current/highlighted context-menu item.',
@@ -304,10 +296,107 @@ export const legitimatePersistentActiveStateDomainsV1 = [
         meaning: 'Current active tab presentation; physical press is a separate interaction.',
     },
 ];
+export const semanticVocabularyV1 = {
+    surface: {
+        purpose: 'Layer and interaction backgrounds with explicit root, bounded-panel, and elevated ownership.',
+        roles: [
+            'canvas',
+            'default',
+            'panel',
+            'subtle',
+            'muted',
+            'elevated',
+            'hover',
+            'active',
+            'pressed',
+            'disabled',
+            'danger',
+            'inverse',
+        ],
+    },
+    text: {
+        purpose: 'Text foreground hierarchy and text interaction roles.',
+        roles: [
+            'primary',
+            'secondary',
+            'muted',
+            'subtle',
+            'disabled',
+            'brand',
+            'interactive',
+            'interactiveHover',
+            'interactivePressed',
+            'inverse',
+        ],
+    },
+    icons: {
+        purpose: 'Icon foreground hierarchy; interactive roles are distinct from brand identity.',
+        roles: [
+            'default',
+            'secondary',
+            'muted',
+            'subtle',
+            'disabled',
+            'interactive',
+            'brand',
+            'interactiveHover',
+            'success',
+            'danger',
+            'inverse',
+        ],
+    },
+    border: {
+        purpose: 'Structural border strength plus generic interactive border emphasis.',
+        roles: [
+            'subtle',
+            'muted',
+            'default',
+            'strong',
+            'elevated',
+            'disabled',
+            'interactive',
+        ],
+    },
+    divider: {
+        purpose: 'Non-interactive separators.',
+        roles: ['muted', 'default', 'strong'],
+    },
+    focus: {
+        purpose: 'Input-focus indication only; independent from hover and pressed states.',
+        roles: ['ring.color', 'ring.width', 'ring.shadow', 'ring.offsetColor'],
+    },
+    status: {
+        purpose: 'Status intent paint using explicit consumption roles.',
+        intents: ['success', 'error', 'warning', 'info'],
+        roles: ['fg', 'bg', 'border', 'ring', 'emphasisFg'],
+    },
+    action: {
+        purpose: 'Action intent palettes; accent is the cyan secondary-brand hue, neutral is non-brand action chrome.',
+        roles: ['primary', 'accent', 'neutral', 'danger'],
+        states: ['default', 'hover', 'pressed', 'muted', 'subtle'],
+    },
+    control: {
+        purpose: 'Generic form-control state paint; pressed is physical press and selected is persistent choice.',
+        roles: ['default', 'hover', 'pressed', 'selected', 'disabled', 'focus'],
+    },
+    menu: {
+        purpose: 'Menu-item roles where active/current is a legitimate domain state.',
+        roles: ['item', 'item.danger'],
+    },
+    overlay: {
+        purpose: 'Reusable overlay surfaces named by presentation purpose, not component history.',
+        roles: ['backdrop', 'tooltip', 'floating', 'dialog'],
+    },
+    shadow: {
+        purpose: 'Semantic elevation references; renderer ownership is normalized separately.',
+        roles: ['sm', 'md', 'lg', 'xl'],
+    },
+};
 export const canonicalTokenVocabulary = {
     surface: [
         'canvas',
         'default',
+        'panel',
         'subtle',
         'muted',
         'elevated',
@@ -339,13 +428,22 @@ export const canonicalTokenVocabulary = {
         'interactivePressed',
         'inverse',
     ],
-    border: ['subtle', 'muted', 'default', 'strong', 'elevated', 'disabled'],
-    intent: ['primary', 'neutral', 'success', 'warning', 'danger'],
+    border: [
+        'subtle',
+        'muted',
+        'default',
+        'strong',
+        'elevated',
+        'disabled',
+        'interactive',
+    ],
+    intent: ['primary', 'accent', 'neutral', 'success', 'warning', 'danger'],
     status: ['success', 'error', 'warning', 'info'],
 };
 export const canonicalSemanticRolePaths = [
     'surface.canvas',
     'surface.default',
+    'surface.panel',
     'surface.subtle',
     'surface.muted',
     'surface.elevated',
@@ -365,48 +463,59 @@ export const canonicalSemanticRolePaths = [
     'text.interactiveHover',
     'text.interactivePressed',
     'text.inverse',
+    'icons.default',
+    'icons.secondary',
+    'icons.muted',
+    'icons.subtle',
+    'icons.disabled',
+    'icons.interactive',
+    'icons.brand',
+    'icons.interactiveHover',
+    'icons.success',
+    'icons.danger',
+    'icons.inverse',
     'border.subtle',
     'border.muted',
     'border.default',
     'border.strong',
     'border.elevated',
     'border.disabled',
-    'border.focus',
+    'border.interactive',
     'divider.muted',
     'divider.default',
     'divider.strong',
     'focus.ring.color',
     'focus.ring.width',
     'focus.ring.shadow',
-    'focus.ring.offset',
+    'focus.ring.offsetColor',
     'status.success.fg',
     'status.success.bg',
     'status.success.border',
     'status.success.ring',
-    'status.success.strong',
+    'status.success.emphasisFg',
     'status.error.fg',
     'status.error.bg',
     'status.error.border',
     'status.error.ring',
-    'status.error.strong',
+    'status.error.emphasisFg',
     'status.warning.fg',
     'status.warning.bg',
     'status.warning.border',
     'status.warning.ring',
-    'status.warning.strong',
+    'status.warning.emphasisFg',
     'status.info.fg',
     'status.info.bg',
     'status.info.border',
     'status.info.ring',
-    'status.info.strong',
+    'status.info.emphasisFg',
     'overlay.backdrop',
     'overlay.tooltip.bg',
     'overlay.tooltip.fg',
     'overlay.tooltip.border',
-    'overlay.popover.bg',
-    'overlay.popover.border',
-    'overlay.modal.bg',
-    'overlay.modal.border',
+    'overlay.floating.bg',
+    'overlay.floating.border',
+    'overlay.dialog.bg',
+    'overlay.dialog.border',
 ];
 export const componentTokenFactoryModel = {
     canonicalName: 'create<Component>Tokens',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/tokens",
-  "version": "2.98.6",
+  "version": "2.99.0",
   "description": "Design tokens for Vellira Design System",
   "keywords": [
     "vellira",

package/dist/dark/semantic/navigation.d.ts

@@ -1,34 +0,0 @@
-export declare const navigation: {
-    readonly hover: {
-        readonly bg: "#2F2A42";
-        readonly fg: "#F4F1FB";
-    };
-    readonly active: {
-        readonly bg: "#3D3754";
-        readonly fg: "#F4F1FB";
-    };
-    readonly brandHover: {
-        readonly bg: "#2F2A42";
-        readonly fg: "#D4CCFF";
-    };
-    readonly tabHover: {
-        readonly fg: "#D4CCFF";
-    };
-    readonly tabFocus: {
-        readonly ring: "#F59E0B";
-    };
-    readonly optionHover: {
-        readonly bg: "#2F2A42";
-        readonly fg: "#F4F1FB";
-    };
-    readonly optionActive: {
-        readonly bg: "#3D3754";
-        readonly fg: "#F4F1FB";
-    };
-    readonly triggerHover: {
-        readonly bg: "#2F2A42";
-        readonly fg: "#F4F1FB";
-    };
-    readonly border: "#3D3754";
-};
-//# sourceMappingURL=navigation.d.ts.map

package/dist/dark/semantic/navigation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/dark/semantic/navigation.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCb,CAAC"}

package/dist/dark/semantic/navigation.js

@@ -1,37 +0,0 @@
-import { colors } from '../../primitives/colors.js';
-import { border } from './border.js';
-import { surface } from './surface.js';
-import { text } from './text.js';
-export const navigation = {
-    hover: {
-        bg: surface.hover,
-        fg: text.primary,
-    },
-    active: {
-        bg: surface.active,
-        fg: text.primary,
-    },
-    brandHover: {
-        bg: surface.hover,
-        fg: colors.primary[200],
-    },
-    tabHover: {
-        fg: colors.primary[200],
-    },
-    tabFocus: {
-        ring: colors.warning[500],
-    },
-    optionHover: {
-        bg: surface.hover,
-        fg: text.primary,
-    },
-    optionActive: {
-        bg: surface.active,
-        fg: text.primary,
-    },
-    triggerHover: {
-        bg: surface.hover,
-        fg: text.primary,
-    },
-    border: border.muted,
-};

package/dist/highContrast/semantic/navigation.d.ts

@@ -1,34 +0,0 @@
-export declare const navigation: {
-    readonly hover: {
-        readonly bg: "#374151";
-        readonly fg: "#FFFFFF";
-    };
-    readonly active: {
-        readonly bg: "#374151";
-        readonly fg: "#FFFFFF";
-    };
-    readonly brandHover: {
-        readonly bg: "#374151";
-        readonly fg: "#FCD34D";
-    };
-    readonly tabHover: {
-        readonly fg: "#FCD34D";
-    };
-    readonly tabFocus: {
-        readonly ring: "#FBBF24";
-    };
-    readonly optionHover: {
-        readonly bg: "#374151";
-        readonly fg: "#FFFFFF";
-    };
-    readonly optionActive: {
-        readonly bg: "#374151";
-        readonly fg: "#FFFFFF";
-    };
-    readonly triggerHover: {
-        readonly bg: "#374151";
-        readonly fg: "#FCD34D";
-    };
-    readonly border: "#9CA3AF";
-};
-//# sourceMappingURL=navigation.d.ts.map

package/dist/highContrast/semantic/navigation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/navigation.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCb,CAAC"}

package/dist/highContrast/semantic/navigation.js

@@ -1,36 +0,0 @@
-import { border } from './border.js';
-import { surface } from './surface.js';
-import { text } from './text.js';
-export const navigation = {
-    hover: {
-        bg: surface.hover,
-        fg: text.primary,
-    },
-    active: {
-        bg: surface.active,
-        fg: text.primary,
-    },
-    brandHover: {
-        bg: surface.hover,
-        fg: text.interactiveHover,
-    },
-    tabHover: {
-        fg: text.interactiveHover,
-    },
-    tabFocus: {
-        ring: text.interactive,
-    },
-    optionHover: {
-        bg: surface.hover,
-        fg: text.primary,
-    },
-    optionActive: {
-        bg: surface.active,
-        fg: text.primary,
-    },
-    triggerHover: {
-        bg: surface.hover,
-        fg: text.interactiveHover,
-    },
-    border: border.default,
-};

package/dist/light/semantic/navigation.d.ts

@@ -1,34 +0,0 @@
-export declare const navigation: {
-    readonly hover: {
-        readonly bg: "#F4F1FB";
-        readonly fg: "#3D3754";
-    };
-    readonly active: {
-        readonly bg: "#EEE8FA";
-        readonly fg: "#3D3754";
-    };
-    readonly brandHover: {
-        readonly bg: "#F4F1FB";
-        readonly fg: "#402C9F";
-    };
-    readonly tabHover: {
-        readonly fg: "#402C9F";
-    };
-    readonly tabFocus: {
-        readonly ring: "#5037C8";
-    };
-    readonly optionHover: {
-        readonly bg: "#F4F1FB";
-        readonly fg: "#3D3754";
-    };
-    readonly optionActive: {
-        readonly bg: "#EEE8FA";
-        readonly fg: "#3D3754";
-    };
-    readonly triggerHover: {
-        readonly bg: "#F4F1FB";
-        readonly fg: "#402C9F";
-    };
-    readonly border: "#E4DDF4";
-};
-//# sourceMappingURL=navigation.d.ts.map

package/dist/light/semantic/navigation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/navigation.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCb,CAAC"}

package/dist/light/semantic/navigation.js

@@ -1,37 +0,0 @@
-import { colors } from '../../primitives/colors.js';
-import { border } from './border.js';
-import { surface } from './surface.js';
-import { text } from './text.js';
-export const navigation = {
-    hover: {
-        bg: surface.hover,
-        fg: text.primary,
-    },
-    active: {
-        bg: surface.active,
-        fg: text.primary,
-    },
-    brandHover: {
-        bg: surface.hover,
-        fg: text.interactiveHover,
-    },
-    tabHover: {
-        fg: text.interactiveHover,
-    },
-    tabFocus: {
-        ring: colors.primary[700],
-    },
-    optionHover: {
-        bg: surface.hover,
-        fg: text.primary,
-    },
-    optionActive: {
-        bg: surface.active,
-        fg: text.primary,
-    },
-    triggerHover: {
-        bg: surface.hover,
-        fg: text.interactiveHover,
-    },
-    border: border.muted,
-};