@vellira-ui/tokens 2.25.1 → 2.26.0

package/dist/dark/components/contextMenu.js

@@ -0,0 +1,52 @@
+import { focus } from '../semantic/focus.js';
+import { menu as semanticMenu } from '../semantic/menu.js';
+import { shadow } from '../semantic/shadow.js';
+import { text } from '../semantic/text.js';
+export const contextMenu = {
+    content: {
+        bg: semanticMenu.background,
+        border: semanticMenu.border,
+        shadow: shadow.lg,
+    },
+    item: {
+        default: semanticMenu.item.default,
+        hover: semanticMenu.item.hover,
+        active: {
+            ...semanticMenu.item.active,
+            ring: 'transparent',
+        },
+        pressed: semanticMenu.item.pressed,
+        focus: {
+            ring: focus.ring,
+        },
+        disabled: semanticMenu.item.disabled,
+        danger: semanticMenu.item.danger,
+    },
+    trigger: {
+        default: {
+            bg: 'transparent',
+            fg: text.interactive,
+            border: 'transparent',
+        },
+        hover: {
+            bg: semanticMenu.item.hover.bg,
+            fg: text.interactiveHover,
+            border: 'transparent',
+            ring: 'transparent',
+        },
+        focus: {
+            bg: 'transparent',
+            fg: text.interactive,
+            border: 'transparent',
+            ring: focus.ring,
+        },
+        disabled: {
+            bg: 'transparent',
+            fg: text.disabled,
+            border: 'transparent',
+        },
+    },
+    groupLabel: {
+        fg: text.secondary,
+    },
+};

package/dist/dark/components/dropdown.d.ts

@@ -6,8 +6,8 @@ export declare const dropdown: {
             readonly border: "transparent";
         };
         readonly hover: {
-            readonly bg: "#3D3754";
-            readonly fg: "#D4CCFF";
+            readonly bg: "#2F2A42";
+            readonly fg: "#9B7CFF";
             readonly border: "transparent";
             readonly ring: "transparent";
         };
@@ -15,18 +15,24 @@ export declare const dropdown: {
             readonly bg: "transparent";
             readonly fg: "#B8A8FF";
             readonly border: "#B8A8FF";
-            readonly ring: "#B8A8FF";
+            readonly ring: {
+                readonly color: "#B8A8FF";
+                readonly width: "2px";
+                readonly shadow: "0 0 8px rgba(184, 168, 255, 0.14)";
+                readonly offset: "#181521";
+            };
         };
         readonly disabled: {
-            readonly bg: "#242034";
+            readonly bg: "#2F2A42";
             readonly fg: "#6B6386";
-            readonly border: "#958CB0";
+            readonly border: "#3D3754";
         };
     };
     readonly content: {
-        readonly bg: "#3D3754";
+        readonly bg: "#2F2A42";
         readonly fg: "#F4F1FB";
-        readonly border: "#958CB0";
+        readonly border: "#4F4867";
+        readonly shadow: "0 12px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25)";
     };
     readonly item: {
         readonly default: {
@@ -34,16 +40,25 @@ export declare const dropdown: {
             readonly fg: "#F4F1FB";
         };
         readonly hover: {
-            readonly bg: "#6B6386";
+            readonly bg: "#3D3754";
             readonly fg: "#F4F1FB";
         };
         readonly active: {
-            readonly bg: "#6B6386";
+            readonly bg: "#3D3754";
             readonly fg: "#F4F1FB";
             readonly ring: "transparent";
         };
+        readonly pressed: {
+            readonly bg: "#4F4867";
+            readonly fg: "#F4F1FB";
+        };
         readonly focus: {
-            readonly ring: "#B8A8FF";
+            readonly ring: {
+                readonly color: "#B8A8FF";
+                readonly width: "2px";
+                readonly shadow: "0 0 8px rgba(184, 168, 255, 0.14)";
+                readonly offset: "#181521";
+            };
         };
         readonly disabled: {
             readonly bg: "transparent";
@@ -51,6 +66,7 @@ export declare const dropdown: {
         };
         readonly danger: {
             readonly default: {
+                readonly bg: "transparent";
                 readonly fg: "#FB7185";
             };
             readonly hover: {
@@ -58,9 +74,13 @@ export declare const dropdown: {
                 readonly fg: "#FB7185";
             };
             readonly active: {
-                readonly bg: "#F43F5E";
-                readonly fg: "#FB7185";
                 readonly ring: "transparent";
+                readonly bg: "rgba(251, 113, 133, 0.16)";
+                readonly fg: "#FB7185";
+            };
+            readonly disabled: {
+                readonly bg: "transparent";
+                readonly fg: "#6B6386";
             };
         };
     };
@@ -69,7 +89,7 @@ export declare const dropdown: {
     };
     readonly separator: {
         readonly bg: "#3D3754";
-        readonly fg: "#6B6386";
+        readonly fg: "#958CB0";
     };
 };
 //# sourceMappingURL=dropdown.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/dark/components/dropdown.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFX,CAAC"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/dark/components/dropdown.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwFX,CAAC"}

package/dist/dark/components/dropdown.js

@@ -1,70 +1,73 @@
 import { border } from '../semantic/border.js';
 import { focus } from '../semantic/focus.js';
-import { navigation } from '../semantic/navigation.js';
-import { status } from '../semantic/status.js';
+import { menu } from '../semantic/menu.js';
+import { shadow } from '../semantic/shadow.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 export const dropdown = {
     trigger: {
         default: {
             bg: 'transparent',
-            fg: text.brand,
+            fg: text.interactive,
             border: 'transparent',
         },
         hover: {
-            bg: navigation.brandHover.bg,
-            fg: navigation.brandHover.fg,
+            bg: surface.hover,
+            fg: text.interactiveHover,
             border: 'transparent',
             ring: 'transparent',
         },
         focus: {
             bg: 'transparent',
-            fg: text.brand,
+            fg: text.interactive,
             border: border.focus,
             ring: focus.ring,
         },
         disabled: {
-            bg: surface.subtle,
+            bg: surface.disabled,
             fg: text.disabled,
-            border: border.default,
+            border: border.disabled,
         },
     },
     content: {
-        bg: surface.elevated,
-        fg: text.primary,
-        border: border.default,
+        bg: menu.background,
+        fg: menu.item.default.fg,
+        border: menu.border,
+        shadow: shadow.lg,
     },
     item: {
         default: {
-            bg: 'transparent',
-            fg: text.primary,
+            bg: menu.item.default.bg,
+            fg: menu.item.default.fg,
+        },
+        hover: {
+            bg: menu.item.hover.bg,
+            fg: menu.item.hover.fg,
         },
-        hover: navigation.hover,
         active: {
-            bg: navigation.active.bg,
-            fg: navigation.active.fg,
+            bg: menu.item.active.bg,
+            fg: menu.item.active.fg,
             ring: 'transparent',
         },
+        pressed: {
+            bg: menu.item.pressed.bg,
+            fg: menu.item.pressed.fg,
+        },
         focus: {
             ring: focus.ring,
         },
         disabled: {
-            bg: 'transparent',
-            fg: text.disabled,
+            bg: menu.item.disabled.bg,
+            fg: menu.item.disabled.fg,
         },
         danger: {
-            default: {
-                fg: status.error.fg,
-            },
-            hover: {
-                bg: status.error.bg,
-                fg: status.error.fg,
-            },
+            default: menu.item.danger.default,
+            hover: menu.item.danger.hover,
             active: {
-                bg: status.error.border,
-                fg: status.error.fg,
+                ...menu.item.danger.active,
                 ring: 'transparent',
             },
+            disabled: menu.item.danger.disabled,
         },
     },
     groupLabel: {

package/dist/dark/components/formField.d.ts

@@ -7,7 +7,7 @@ export declare const formField: {
     };
     readonly helperText: {
         readonly default: {
-            readonly fg: "#BBB2D2";
+            readonly fg: "#958CB0";
         };
         readonly error: {
             readonly fg: "#FB7185";
@@ -19,7 +19,7 @@ export declare const formField: {
             readonly fg: "#FBBF24";
         };
         readonly info: {
-            readonly fg: "#0284C7";
+            readonly fg: "#7DD3FC";
         };
     };
     readonly requiredMark: {

package/dist/dark/components/formField.js

@@ -9,7 +9,7 @@ export const formField = {
     },
     helperText: {
         default: {
-            fg: text.secondary,
+            fg: text.muted,
         },
         error: {
             fg: status.error.fg,

package/dist/dark/components/index.d.ts

@@ -1,9 +1,9 @@
 export { button } from './button.js';
 export { checkbox } from './checkbox.js';
+export { contextMenu } from './contextMenu.js';
 export { dropdown } from './dropdown.js';
 export { formField } from './formField.js';
 export { input } from './input.js';
-export { menu } from './menu.js';
 export { modal } from './modal.js';
 export { radio } from './radio.js';
 export { select } from './select.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dark/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dark/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/dark/components/index.js

@@ -1,9 +1,9 @@
 export { button } from './button.js';
 export { checkbox } from './checkbox.js';
+export { contextMenu } from './contextMenu.js';
 export { dropdown } from './dropdown.js';
 export { formField } from './formField.js';
 export { input } from './input.js';
-export { menu } from './menu.js';
 export { modal } from './modal.js';
 export { radio } from './radio.js';
 export { select } from './select.js';

package/dist/dark/components/input.d.ts

@@ -2,63 +2,63 @@ export declare const input: {
     readonly default: {
         readonly bg: "transparent";
         readonly fg: "#F4F1FB";
-        readonly border: "#958CB0";
+        readonly border: "#4F4867";
         readonly placeholder: "#BBB2D2";
-        readonly icon: "#9B7CFF";
+        readonly icon: "#B8A8FF";
     };
     readonly hover: {
-        readonly bg: "#3D3754";
+        readonly bg: "#2F2A42";
         readonly fg: "#F4F1FB";
         readonly border: "#B8A8FF";
-        readonly placeholder: "#6B6386";
-        readonly icon: "#9B7CFF";
+        readonly placeholder: "#BBB2D2";
+        readonly icon: "#D4CCFF";
     };
     readonly focus: {
         readonly bg: "transparent";
         readonly fg: "#F4F1FB";
         readonly border: "#B8A8FF";
         readonly ring: "#B8A8FF";
-        readonly placeholder: "#6B6386";
-        readonly icon: "#FFFFFF";
+        readonly placeholder: "#BBB2D2";
+        readonly icon: "#B8A8FF";
     };
     readonly disabled: {
-        readonly bg: "#3D3754";
+        readonly bg: "#2F2A42";
         readonly fg: "#6B6386";
-        readonly border: "#958CB0";
+        readonly border: "#3D3754";
         readonly placeholder: "#6B6386";
-        readonly icon: "#D1D5DB";
+        readonly icon: "#6B6386";
     };
     readonly error: {
-        readonly border: "#F43F5E";
+        readonly border: "#FB7185";
         readonly ring: "#FB7185";
     };
     readonly success: {
-        readonly border: "#059669";
+        readonly border: "#34D399";
         readonly ring: "#34D399";
     };
     readonly readOnly: {
         readonly bg: "#242034";
         readonly fg: "#BBB2D2";
-        readonly border: "#958CB0";
-        readonly placeholder: "#6B6386";
-        readonly icon: "#9CA3AF";
+        readonly border: "#3D3754";
+        readonly placeholder: "#958CB0";
+        readonly icon: "#958CB0";
     };
     readonly icon: {
-        readonly default: "#0F0F0F";
+        readonly default: "#F4F1FB";
         readonly primary: "#B8A8FF";
-        readonly secondary: "#9CA3AF";
-        readonly success: "#10B981";
-        readonly danger: "#F43F5E";
-        readonly muted: "#9CA3AF";
-        readonly inverse: "#1A1A1A";
-        readonly brand: "#9B7CFF";
+        readonly secondary: "#E5E7EB";
+        readonly success: "#34D399";
+        readonly danger: "#FB7185";
+        readonly muted: "#958CB0";
+        readonly inverse: "#000000";
+        readonly brand: "#B8A8FF";
     };
     readonly clearButton: {
-        readonly fg: "#FB7185";
+        readonly fg: "#958CB0";
         readonly hoverFg: "#FB7185";
-        readonly hoverBg: string;
-        readonly focusBg: "#FFFFFF";
-        readonly pressedBg: "#6B6386";
+        readonly hoverBg: "rgba(251, 113, 133, 0.16)";
+        readonly focusBg: "#242034";
+        readonly pressedBg: "#3D3754";
     };
 };
 //# sourceMappingURL=input.d.ts.map

package/dist/dark/components/input.js

@@ -16,21 +16,21 @@ export const input = {
         bg: surface.hover,
         fg: text.primary,
         border: border.focus,
-        placeholder: text.muted,
+        placeholder: text.secondary,
         icon: icons.hover,
     },
     focus: {
         bg: 'transparent',
         fg: text.primary,
         border: border.focus,
-        ring: focus.ring,
-        placeholder: text.muted,
-        icon: icons.subtle,
+        ring: focus.ring.color,
+        placeholder: text.secondary,
+        icon: icons.brand,
     },
     disabled: {
-        bg: surface.elevated,
+        bg: surface.disabled,
         fg: text.disabled,
-        border: border.default,
+        border: border.disabled,
         placeholder: text.disabled,
         icon: icons.disabled,
     },
@@ -39,13 +39,13 @@ export const input = {
         ring: status.error.fg,
     },
     success: {
-        border: status.success.strong,
+        border: status.success.border,
         ring: status.success.fg,
     },
     readOnly: {
         bg: surface.subtle,
         fg: text.secondary,
-        border: border.default,
+        border: border.muted,
         placeholder: text.muted,
         icon: icons.muted,
     },
@@ -60,10 +60,10 @@ export const input = {
         brand: icons.brand,
     },
     clearButton: {
-        fg: status.error.fg,
+        fg: icons.muted,
         hoverFg: status.error.fg,
-        hoverBg: surface.danger,
-        focusBg: surface.inverse,
+        hoverBg: status.error.bg,
+        focusBg: surface.subtle,
         pressedBg: surface.active,
     },
 };

package/dist/dark/components/modal.d.ts

@@ -3,28 +3,45 @@ export declare const modal: {
         readonly bg: "rgba(0, 0, 0, 0.72)";
     };
     readonly content: {
-        readonly bg: "#3D3754";
+        readonly bg: "#242034";
         readonly fg: "#F4F1FB";
-        readonly border: "#958CB0";
+        readonly border: "#3D3754";
+        readonly shadow: "0 20px 60px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.3)";
     };
     readonly title: {
         readonly fg: "#F4F1FB";
     };
     readonly description: {
-        readonly fg: "#6B6386";
+        readonly fg: "#BBB2D2";
     };
     readonly closeButton: {
         readonly default: {
             readonly bg: "transparent";
             readonly fg: "#BBB2D2";
+            readonly border: "transparent";
         };
         readonly hover: {
-            readonly bg: "#242034";
+            readonly bg: "#2F2A42";
             readonly fg: "#F4F1FB";
+            readonly border: "transparent";
+        };
+        readonly pressed: {
+            readonly bg: "#3D3754";
+            readonly fg: "#F4F1FB";
+            readonly border: "transparent";
+        };
+        readonly focus: {
+            readonly ring: {
+                readonly color: "#B8A8FF";
+                readonly width: "2px";
+                readonly shadow: "0 0 8px rgba(184, 168, 255, 0.14)";
+                readonly offset: "#181521";
+            };
         };
         readonly disabled: {
             readonly bg: "transparent";
             readonly fg: "#6B6386";
+            readonly border: "transparent";
         };
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/dark/components/modal.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCR,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/dark/components/modal.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDR,CAAC"}

package/dist/dark/components/modal.js

@@ -1,5 +1,7 @@
 import { overlay } from '../../semantic/overlay.js';
 import { border } from '../semantic/border.js';
+import { focus } from '../semantic/focus.js';
+import { shadow } from '../semantic/shadow.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 export const modal = {
@@ -7,28 +9,40 @@ export const modal = {
         bg: overlay.backdrop,
     },
     content: {
-        bg: surface.elevated,
+        bg: surface.subtle,
         fg: text.primary,
-        border: border.default,
+        border: border.muted,
+        shadow: shadow.xl,
     },
     title: {
         fg: text.primary,
     },
     description: {
-        fg: text.muted,
+        fg: text.secondary,
     },
     closeButton: {
         default: {
             bg: 'transparent',
             fg: text.secondary,
+            border: 'transparent',
         },
         hover: {
-            bg: surface.subtle,
+            bg: surface.elevated,
             fg: text.primary,
+            border: 'transparent',
+        },
+        pressed: {
+            bg: surface.active,
+            fg: text.primary,
+            border: 'transparent',
+        },
+        focus: {
+            ring: focus.ring,
         },
         disabled: {
             bg: 'transparent',
             fg: text.disabled,
+            border: 'transparent',
         },
     },
 };

package/dist/dark/components/radio.d.ts

@@ -1,39 +1,43 @@
 export declare const radio: {
     readonly default: {
-        readonly bg: "#3D3754";
+        readonly bg: "#2F2A42";
         readonly fg: "#F4F1FB";
-        readonly border: "#958CB0";
+        readonly border: "#4F4867";
     };
     readonly hover: {
-        readonly bg: "#3D3754";
+        readonly bg: "#2F2A42";
         readonly fg: "#B8A8FF";
         readonly border: "#B8A8FF";
     };
     readonly pressed: {
-        readonly bg: "#E9E6FF";
-        readonly fg: "#342580";
-        readonly border: "#402C9F";
+        readonly bg: "#3D3754";
+        readonly fg: "#B8A8FF";
+        readonly border: "#B8A8FF";
     };
     readonly checked: {
         readonly default: {
+            readonly bg: "#181521";
             readonly fg: "#B8A8FF";
-            readonly bg: "#9B7CFF";
-            readonly border: "#9B7CFF";
+            readonly border: "#7C5CFF";
+            readonly labelFg: "#B8A8FF";
         };
         readonly hover: {
-            readonly fg: "#B8A8FF";
-            readonly bg: "#5037C8";
-            readonly border: "#5037C8";
+            readonly bg: "#2F2A42";
+            readonly fg: "#D4CCFF";
+            readonly border: "#9B7CFF";
+            readonly labelFg: "#9B7CFF";
         };
         readonly pressed: {
-            readonly fg: "#B8A8FF";
-            readonly bg: "#402C9F";
-            readonly border: "#402C9F";
+            readonly bg: "#3D3754";
+            readonly fg: "#9B7CFF";
+            readonly border: "#6346E8";
+            readonly labelFg: "#B8A8FF";
         };
         readonly disabled: {
             readonly bg: "#2F2A42";
             readonly fg: "#6B6386";
-            readonly border: "#4F4867";
+            readonly border: "#3D3754";
+            readonly labelFg: "#6B6386";
         };
     };
     readonly focus: {
@@ -41,14 +45,15 @@ export declare const radio: {
         readonly border: "#B8A8FF";
     };
     readonly invalid: {
-        readonly bg: "#181521";
-        readonly fg: "#FFFFFF";
-        readonly border: "#F43F5E";
+        readonly border: "#FB7185";
+        readonly ring: "#FB7185";
+        readonly bg: "#2F2A42";
+        readonly fg: "#F4F1FB";
     };
     readonly disabled: {
         readonly bg: "#2F2A42";
         readonly fg: "#6B6386";
-        readonly border: "#4F4867";
+        readonly border: "#3D3754";
     };
 };
 //# sourceMappingURL=radio.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/dark/components/radio.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDR,CAAC"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/dark/components/radio.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDR,CAAC"}