@vellira-ui/tokens 2.25.1 → 2.26.1

package/dist/light/semantic/navigation.js

@@ -1,31 +1,37 @@
 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: colors.vellira[100],
+        bg: surface.hover,
         fg: text.primary,
     },
     active: {
-        bg: colors.vellira[150],
+        bg: surface.active,
         fg: text.primary,
     },
     brandHover: {
-        bg: colors.vellira[100],
-        fg: colors.primary[900],
+        bg: surface.hover,
+        fg: text.interactiveHover,
     },
     tabHover: {
-        fg: colors.primary[500],
+        fg: text.interactiveHover,
     },
     tabFocus: {
-        ring: colors.warning[500],
+        ring: colors.primary[700],
     },
     optionHover: {
-        bg: colors.gray[300],
+        bg: surface.hover,
         fg: text.primary,
     },
     optionActive: {
-        bg: colors.gray[200],
+        bg: surface.active,
         fg: text.primary,
     },
-    border: colors.vellira[200],
+    triggerHover: {
+        bg: surface.hover,
+        fg: text.interactiveHover,
+    },
+    border: border.muted,
 };

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

@@ -0,0 +1,17 @@
+export declare const overlay: {
+    readonly backdrop: "rgba(24, 21, 33, 0.52)";
+    readonly tooltip: {
+        readonly bg: "#181521";
+        readonly fg: "#FFFFFF";
+        readonly border: "#181521";
+    };
+    readonly popover: {
+        readonly bg: "#FFFFFF";
+        readonly border: "#E4DDF4";
+    };
+    readonly modal: {
+        readonly bg: "#FFFFFF";
+        readonly border: "#E4DDF4";
+    };
+};
+//# sourceMappingURL=overlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/overlay.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CAkBV,CAAC"}

package/dist/light/semantic/overlay.js

@@ -0,0 +1,19 @@
+import { colors } from '../../primitives/colors.js';
+import { border } from './border.js';
+import { surface } from './surface.js';
+export const overlay = {
+    backdrop: 'rgba(24, 21, 33, 0.52)',
+    tooltip: {
+        bg: surface.inverse,
+        fg: colors.mono[50],
+        border: surface.inverse,
+    },
+    popover: {
+        bg: surface.elevated,
+        border: border.muted,
+    },
+    modal: {
+        bg: surface.elevated,
+        border: border.muted,
+    },
+};

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

@@ -0,0 +1,8 @@
+export declare const shadow: {
+    readonly sm: "0 1px 2px rgba(24, 21, 33, 0.08)";
+    readonly md: "0 4px 12px rgba(24, 21, 33, 0.12)";
+    readonly lg: "0 12px 40px rgba(24, 21, 33, 0.16), 0 2px 8px rgba(24, 21, 33, 0.1)";
+    readonly xl: "0 20px 60px rgba(24, 21, 33, 0.2), 0 4px 16px rgba(24, 21, 33, 0.14)";
+    readonly inset: "inset 0 1px 0 rgba(255, 255, 255, 0.55)";
+};
+//# sourceMappingURL=shadow.d.ts.map

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

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

package/dist/light/semantic/shadow.js

@@ -0,0 +1,7 @@
+export const shadow = {
+    sm: '0 1px 2px rgba(24, 21, 33, 0.08)',
+    md: '0 4px 12px rgba(24, 21, 33, 0.12)',
+    lg: '0 12px 40px rgba(24, 21, 33, 0.16), 0 2px 8px rgba(24, 21, 33, 0.1)',
+    xl: '0 20px 60px rgba(24, 21, 33, 0.2), 0 4px 16px rgba(24, 21, 33, 0.14)',
+    inset: 'inset 0 1px 0 rgba(255, 255, 255, 0.55)',
+};

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

@@ -1,5 +1,5 @@
 export declare const skeleton: {
-    readonly base: "#F3F4F6";
-    readonly highlight: "#E5E7EB";
+    readonly base: "#F4F1FB";
+    readonly highlight: "#FAF8FF";
 };
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/light/semantic/skeleton.js

@@ -1,5 +1,5 @@
 import { colors } from '../../primitives/colors.js';
 export const skeleton = {
-    base: colors.gray[100],
-    highlight: colors.gray[200],
+    base: colors.vellira[100],
+    highlight: colors.vellira[50],
 };

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

@@ -2,26 +2,30 @@ export declare const status: {
     readonly success: {
         readonly fg: "#047857";
         readonly bg: "#ECFDF5";
-        readonly border: "#6EE7B7";
-        readonly strong: "#047857";
+        readonly border: "#10B981";
+        readonly ring: "#10B981";
+        readonly strong: "#065F46";
     };
     readonly error: {
-        readonly fg: "#E11D48";
-        readonly bg: "#FFE4E6";
+        readonly fg: "#BE123C";
+        readonly bg: "#FFF1F2";
         readonly border: "#E11D48";
-        readonly strong: "#BE123C";
+        readonly ring: "#F43F5E";
+        readonly strong: "#9F1239";
     };
     readonly warning: {
-        readonly fg: "#B45309";
+        readonly fg: "#92400E";
         readonly bg: "#FFFBEB";
-        readonly border: "#FCD34D";
-        readonly strong: "#B45309";
+        readonly border: "#F59E0B";
+        readonly ring: "#F59E0B";
+        readonly strong: "#92400E";
     };
     readonly info: {
         readonly fg: "#0C4A6E";
         readonly bg: "#F0F9FF";
-        readonly border: "#0EA5E9";
-        readonly strong: "#0C4A6E";
+        readonly border: "#0369A1";
+        readonly ring: "#0369A1";
+        readonly strong: "#082F49";
     };
 };
 //# sourceMappingURL=status.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/status.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;CA4BT,CAAC"}
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/status.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCT,CAAC"}

package/dist/light/semantic/status.js

@@ -3,25 +3,29 @@ export const status = {
     success: {
         fg: colors.success[700],
         bg: colors.success[50],
-        border: colors.success[300],
-        strong: colors.success[700],
+        border: colors.success[500],
+        ring: colors.success[500],
+        strong: colors.success[800],
     },
     error: {
-        fg: colors.error[600],
-        bg: colors.error[100],
+        fg: colors.error[700],
+        bg: colors.error[50],
         border: colors.error[600],
-        strong: colors.error[700],
+        ring: colors.error[500],
+        strong: colors.error[800],
     },
     warning: {
-        fg: colors.warning[700],
+        fg: colors.warning[800],
         bg: colors.warning[50],
-        border: colors.warning[300],
-        strong: colors.warning[700],
+        border: colors.warning[500],
+        ring: colors.warning[500],
+        strong: colors.warning[800],
     },
     info: {
         fg: colors.info[700],
         bg: colors.info[50],
-        border: colors.info[300],
-        strong: colors.info[700],
+        border: colors.info[500],
+        ring: colors.info[500],
+        strong: colors.info[800],
     },
 };

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

@@ -1,13 +1,13 @@
 export declare const surface: {
-    readonly default: "#F4F1FB";
-    readonly muted: "#FAF8FF";
-    readonly subtle: "#FFFFFF";
-    readonly elevated: "#D9FBFF";
+    readonly default: "#FAF8FF";
+    readonly muted: "#F4F1FB";
+    readonly subtle: "#FDFCFF";
+    readonly elevated: "#FFFFFF";
+    readonly hover: "#F4F1FB";
+    readonly active: "#EEE8FA";
     readonly pressed: "#E4DDF4";
     readonly disabled: "#F4F1FB";
     readonly danger: string;
-    readonly hover: "#EEE8FA";
-    readonly active: "#BBB2D2";
     readonly inverse: "#181521";
 };
 //# sourceMappingURL=surface.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/surface.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;;;;;;;;;;;CAaV,CAAC"}
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/surface.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;;;;;;;;;;;CAcV,CAAC"}

package/dist/light/semantic/surface.js

@@ -1,14 +1,14 @@
 import { colors } from '../../primitives/colors.js';
 import { withAlpha } from '../../utils/color.js';
 export const surface = {
-    default: colors.vellira[100],
-    muted: colors.vellira[50],
-    subtle: colors.mono[50],
-    elevated: colors.secondary[100],
+    default: colors.vellira[50],
+    muted: colors.vellira[100],
+    subtle: colors.vellira[25],
+    elevated: colors.mono[50],
+    hover: colors.vellira[100],
+    active: colors.vellira[150],
     pressed: colors.vellira[200],
     disabled: colors.vellira[100],
-    danger: withAlpha(colors.error[100], 0.5),
-    hover: colors.vellira[150],
-    active: colors.vellira[300],
+    danger: withAlpha(colors.error[100], 0.7),
     inverse: colors.vellira[950],
 };

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

@@ -1,11 +1,13 @@
 export declare const text: {
-    readonly primary: "#4F4867";
+    readonly primary: "#3D3754";
     readonly secondary: "#6B6386";
     readonly muted: "#958CB0";
-    readonly disabled: "#9CA3AF";
-    readonly subtle: "#1A1A1A";
-    readonly inverse: "#0F0F0F";
-    readonly onInverse: "#FFFFFF";
+    readonly subtle: "#958CB0";
+    readonly disabled: "#958CB0";
     readonly brand: "#5037C8";
+    readonly interactive: "#5037C8";
+    readonly interactiveHover: "#402C9F";
+    readonly interactiveActive: "#342580";
+    readonly inverse: "#FFFFFF";
 };
 //# sourceMappingURL=text.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/text.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI;;;;;;;;;CAWP,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/text.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI;;;;;;;;;;;CAcP,CAAC"}

package/dist/light/semantic/text.js

@@ -1,11 +1,13 @@
 import { colors } from '../../primitives/colors.js';
 export const text = {
-    primary: colors.vellira[600],
+    primary: colors.vellira[700],
     secondary: colors.vellira[500],
     muted: colors.vellira[400],
-    disabled: colors.gray[400],
-    subtle: colors.mono[800],
-    inverse: colors.mono[900],
-    onInverse: colors.mono[50],
+    subtle: colors.vellira[400],
+    disabled: colors.vellira[400],
     brand: colors.primary[700],
+    interactive: colors.primary[700],
+    interactiveHover: colors.primary[800],
+    interactiveActive: colors.primary[900],
+    inverse: colors.mono[50],
 };

package/dist/light/theme.d.ts

@@ -9,7 +9,7 @@ export declare const lightTheme: {
             readonly 200: "#D4CCFF";
             readonly 300: "#B8A8FF";
             readonly 400: "#9B7CFF";
-            readonly 500: "#7C5CFF";
+            readonly 500: "#7352F8";
             readonly 600: "#6346E8";
             readonly 700: "#5037C8";
             readonly 800: "#402C9F";

package/dist/primitives/colors.d.ts

@@ -1,10 +1,8 @@
 /**
- * Brand palette used across both Light and Dark themes.
+ * Shared color scales used by Light, Dark, and High Contrast themes.
  *
- * 50–200   → light backgrounds / subtle surfaces
- * 300–500  → accents / interactive states
- * 600–700  → main actions
- * 800–950  → dark surfaces / text / pressed states
+ * Lower steps are lighter, higher steps are darker.
+ * Semantic and component tokens define the actual usage of each step.
  */
 export declare const colors: {
     readonly primary: {
@@ -13,7 +11,7 @@ export declare const colors: {
         readonly 200: "#D4CCFF";
         readonly 300: "#B8A8FF";
         readonly 400: "#9B7CFF";
-        readonly 500: "#7C5CFF";
+        readonly 500: "#7352F8";
         readonly 600: "#6346E8";
         readonly 700: "#5037C8";
         readonly 800: "#402C9F";

package/dist/primitives/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/primitives/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJT,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/primitives/colors.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJT,CAAC"}

package/dist/primitives/colors.js

@@ -1,10 +1,8 @@
 /**
- * Brand palette used across both Light and Dark themes.
+ * Shared color scales used by Light, Dark, and High Contrast themes.
  *
- * 50–200   → light backgrounds / subtle surfaces
- * 300–500  → accents / interactive states
- * 600–700  → main actions
- * 800–950  → dark surfaces / text / pressed states
+ * Lower steps are lighter, higher steps are darker.
+ * Semantic and component tokens define the actual usage of each step.
  */
 export const colors = {
     primary: {
@@ -13,7 +11,7 @@ export const colors = {
         200: '#D4CCFF',
         300: '#B8A8FF',
         400: '#9B7CFF',
-        500: '#7C5CFF',
+        500: '#7352F8',
         600: '#6346E8',
         700: '#5037C8',
         800: '#402C9F',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/tokens",
-  "version": "2.25.1",
+  "version": "2.26.1",
   "description": "Design tokens for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",

package/dist/dark/components/menu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/dark/components/menu.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDP,CAAC"}

package/dist/dark/components/menu.js

@@ -1,47 +0,0 @@
-import { navigation } from '../semantic/navigation.js';
-import { status } from '../semantic/status.js';
-import { surface } from '../semantic/surface.js';
-import { text } from '../semantic/text.js';
-export const menu = {
-    item: {
-        default: {
-            bg: 'transparent',
-            fg: text.primary,
-        },
-        hover: navigation.hover,
-        active: navigation.active,
-        focus: {
-            ring: 'transparent',
-        },
-        disabled: {
-            bg: surface.subtle,
-            fg: text.disabled,
-        },
-        danger: {
-            default: {
-                fg: status.error.fg,
-            },
-            hover: {
-                bg: status.error.bg,
-                fg: status.error.fg,
-            },
-            active: {
-                bg: status.error.border,
-                fg: status.error.fg,
-            },
-        },
-    },
-    trigger: {
-        default: {
-            fg: text.brand,
-        },
-        hover: {
-            bg: navigation.triggerHover.bg,
-            fg: navigation.triggerHover.fg,
-            ring: 'transparent',
-        },
-    },
-    groupLabel: {
-        fg: text.muted,
-    },
-};

package/dist/highContrast/components/menu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/menu.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDP,CAAC"}

package/dist/highContrast/components/menu.js

@@ -1,48 +0,0 @@
-import { action } from '../semantic/action.js';
-import { focus } from '../semantic/focus.js';
-import { navigation } from '../semantic/navigation.js';
-import { surface } from '../semantic/surface.js';
-import { text } from '../semantic/text.js';
-export const menu = {
-    item: {
-        default: {
-            bg: 'transparent',
-            fg: text.primary,
-        },
-        hover: navigation.itemHover,
-        active: navigation.itemActive,
-        focus: {
-            ring: focus.ring,
-        },
-        disabled: {
-            bg: surface.muted,
-            fg: text.disabled,
-        },
-        danger: {
-            default: {
-                fg: action.danger.default.bg,
-            },
-            hover: {
-                bg: action.danger.subtle.bg,
-                fg: action.danger.subtle.fg,
-            },
-            active: {
-                bg: action.danger.muted.bg,
-                fg: action.danger.muted.fg,
-            },
-        },
-    },
-    trigger: {
-        default: {
-            fg: text.primary,
-        },
-        hover: {
-            bg: navigation.brandHover.bg,
-            fg: navigation.brandHover.fg,
-            ring: 'transparent',
-        },
-    },
-    groupLabel: {
-        fg: text.muted,
-    },
-};

package/dist/light/components/menu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/light/components/menu.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDP,CAAC"}

package/dist/light/components/menu.js

@@ -1,48 +0,0 @@
-import { action } from '../semantic/action.js';
-import { navigation } from '../semantic/navigation.js';
-import { status } from '../semantic/status.js';
-import { surface } from '../semantic/surface.js';
-import { text } from '../semantic/text.js';
-export const menu = {
-    item: {
-        default: {
-            bg: 'transparent',
-            fg: text.primary,
-        },
-        hover: navigation.hover,
-        active: navigation.active,
-        focus: {
-            ring: 'transparent',
-        },
-        disabled: {
-            bg: surface.subtle,
-            fg: text.disabled,
-        },
-        danger: {
-            default: {
-                fg: status.error.fg,
-            },
-            hover: {
-                bg: action.danger.subtle.bg,
-                fg: action.danger.subtle.fg,
-            },
-            active: {
-                bg: action.danger.muted.bg,
-                fg: action.danger.muted.fg,
-            },
-        },
-    },
-    trigger: {
-        default: {
-            fg: text.brand,
-        },
-        hover: {
-            bg: navigation.brandHover.bg,
-            fg: navigation.brandHover.fg,
-            ring: 'transparent',
-        },
-    },
-    groupLabel: {
-        fg: text.muted,
-    },
-};