@vellira-ui/tokens 2.25.0 → 2.26.0

package/dist/light/components/button.d.ts

@@ -19,35 +19,35 @@ export declare const button: {
         };
         readonly outline: {
             readonly default: {
-                readonly fg: "#6346E8";
+                readonly bg: "transparent";
+                readonly fg: "#5037C8";
                 readonly border: "#6346E8";
-                readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#EEE8FA";
-                readonly fg: "#5037C8";
+                readonly bg: "#F4F3FF";
+                readonly fg: "#402C9F";
                 readonly border: "#5037C8";
             };
             readonly pressed: {
-                readonly bg: "#E4DDF4";
-                readonly fg: "#402C9F";
+                readonly bg: "#E9E6FF";
+                readonly fg: "#342580";
                 readonly border: "#402C9F";
             };
         };
         readonly ghost: {
             readonly default: {
-                readonly fg: "#6346E8";
+                readonly fg: "#5037C8";
+                readonly bg: "transparent";
                 readonly border: "transparent";
-                readonly bg: string;
             };
             readonly hover: {
                 readonly bg: "#F4F3FF";
-                readonly fg: "#5037C8";
+                readonly fg: "#402C9F";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#F4F3FF";
-                readonly fg: "#402C9F";
+                readonly bg: "#E9E6FF";
+                readonly fg: "#342580";
                 readonly border: "transparent";
             };
         };
@@ -72,17 +72,17 @@ export declare const button: {
         };
         readonly outline: {
             readonly default: {
+                readonly bg: "transparent";
                 readonly fg: "#0B7D95";
                 readonly border: "#0B7D95";
-                readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#D9FBFF";
+                readonly bg: "#F2FDFF";
                 readonly fg: "#0A6175";
                 readonly border: "#0A6175";
             };
             readonly pressed: {
-                readonly bg: "#E4DDF4";
+                readonly bg: "#D9FBFF";
                 readonly fg: "#094C5E";
                 readonly border: "#094C5E";
             };
@@ -90,16 +90,16 @@ export declare const button: {
         readonly ghost: {
             readonly default: {
                 readonly fg: "#0B7D95";
+                readonly bg: "transparent";
                 readonly border: "transparent";
-                readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#D9FBFF";
+                readonly bg: "#F2FDFF";
                 readonly fg: "#0A6175";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#E4DDF4";
+                readonly bg: "#D9FBFF";
                 readonly fg: "#094C5E";
                 readonly border: "transparent";
             };
@@ -108,52 +108,52 @@ export declare const button: {
     readonly close: {
         readonly solid: {
             readonly default: {
-                readonly bg: "#D8E4F2";
-                readonly fg: "#0F0F0F";
-                readonly border: "#D8E4F2";
+                readonly bg: "#D4CEE8";
+                readonly fg: "#231F31";
+                readonly border: "#D4CEE8";
             };
             readonly hover: {
-                readonly bg: "#C4D0DD";
-                readonly fg: "#0F0F0F";
-                readonly border: "#C4D0DD";
+                readonly bg: "#BBB2D2";
+                readonly fg: "#181521";
+                readonly border: "#BBB2D2";
             };
             readonly pressed: {
-                readonly bg: "#98A8BD";
-                readonly fg: "#0F0F0F";
-                readonly border: "#98A8BD";
+                readonly bg: "#958CB0";
+                readonly fg: "#FFFFFF";
+                readonly border: "#958CB0";
             };
         };
         readonly outline: {
             readonly default: {
-                readonly fg: "#4B5F7A";
-                readonly border: "#4B5F7A";
-                readonly bg: string;
+                readonly bg: "transparent";
+                readonly fg: "#3D3754";
+                readonly border: "#958CB0";
             };
             readonly hover: {
-                readonly bg: "#EEE8FA";
-                readonly fg: "#6B7F99";
-                readonly border: "#6B7F99";
+                readonly bg: "#F4F1FB";
+                readonly fg: "#2F2A42";
+                readonly border: "#6B6386";
             };
             readonly pressed: {
-                readonly bg: "#E4DDF4";
-                readonly fg: "#98A8BD";
-                readonly border: "#98A8BD";
+                readonly bg: "#EEE8FA";
+                readonly fg: "#231F31";
+                readonly border: "#4F4867";
             };
         };
         readonly ghost: {
             readonly default: {
-                readonly fg: "#4F4867";
+                readonly fg: "#3D3754";
+                readonly bg: "transparent";
                 readonly border: "transparent";
-                readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#F4F3FF";
-                readonly fg: "#4F4867";
+                readonly bg: "#F4F1FB";
+                readonly fg: "#2F2A42";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#F4F3FF";
-                readonly fg: "#4F4867";
+                readonly bg: "#EEE8FA";
+                readonly fg: "#231F31";
                 readonly border: "transparent";
             };
         };
@@ -178,29 +178,29 @@ export declare const button: {
         };
         readonly outline: {
             readonly default: {
+                readonly bg: "transparent";
                 readonly fg: "#BE123C";
-                readonly border: "#BE123C";
-                readonly bg: string;
+                readonly border: "#E11D48";
             };
             readonly hover: {
-                readonly bg: "#FFE4E6";
+                readonly bg: "#FFF1F2";
                 readonly fg: "#9F1239";
-                readonly border: "#9F1239";
+                readonly border: "#BE123C";
             };
             readonly pressed: {
                 readonly bg: "#FFE4E6";
                 readonly fg: "#881337";
-                readonly border: "#881337";
+                readonly border: "#9F1239";
             };
         };
         readonly ghost: {
             readonly default: {
                 readonly fg: "#BE123C";
+                readonly bg: "transparent";
                 readonly border: "transparent";
-                readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#FFE4E6";
+                readonly bg: "#FFF1F2";
                 readonly fg: "#9F1239";
                 readonly border: "transparent";
             };
@@ -213,7 +213,7 @@ export declare const button: {
     };
     readonly disabled: {
         readonly bg: "#F4F1FB";
-        readonly fg: "#9CA3AF";
+        readonly fg: "#958CB0";
         readonly border: "#E4DDF4";
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/light/components/button.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8KT,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/light/components/button.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkMT,CAAC"}

package/dist/light/components/button.js

@@ -1,3 +1,4 @@
+import { colors } from '../../primitives/colors.js';
 import { action } from '../semantic/action.js';
 import { border } from '../semantic/border.js';
 import { status } from '../semantic/status.js';
@@ -5,6 +6,7 @@ import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 const transparent = {
     bg: 'transparent',
+    border: 'transparent',
 };
 export const button = {
     primary: {
@@ -15,36 +17,35 @@ export const button = {
         },
         outline: {
             default: {
-                ...transparent,
-                fg: action.primary.default.bg,
-                border: action.primary.default.border,
+                bg: 'transparent',
+                fg: colors.primary[700],
+                border: colors.primary[600],
             },
             hover: {
-                bg: surface.hover,
-                fg: action.primary.hover.bg,
-                border: action.primary.hover.border,
+                bg: action.primary.subtle.bg,
+                fg: colors.primary[800],
+                border: colors.primary[700],
             },
             pressed: {
-                bg: surface.pressed,
-                fg: action.primary.active.bg,
-                border: action.primary.active.border,
+                bg: action.primary.muted.bg,
+                fg: colors.primary[900],
+                border: colors.primary[800],
             },
         },
         ghost: {
             default: {
                 ...transparent,
-                fg: action.primary.default.bg,
-                border: 'transparent',
+                fg: colors.primary[700],
             },
             hover: {
+                ...transparent,
                 bg: action.primary.subtle.bg,
-                fg: action.primary.hover.bg,
-                border: 'transparent',
+                fg: colors.primary[800],
             },
             pressed: {
-                bg: action.primary.subtle.bg,
-                fg: action.primary.active.bg,
-                border: 'transparent',
+                ...transparent,
+                bg: action.primary.muted.bg,
+                fg: colors.primary[900],
             },
         },
     },
@@ -56,36 +57,35 @@ export const button = {
         },
         outline: {
             default: {
-                ...transparent,
-                fg: action.secondary.default.bg,
-                border: action.secondary.default.border,
+                bg: 'transparent',
+                fg: colors.secondary[700],
+                border: colors.secondary[700],
             },
             hover: {
-                bg: surface.elevated,
-                fg: action.secondary.hover.bg,
-                border: action.secondary.hover.border,
+                bg: action.secondary.subtle.bg,
+                fg: colors.secondary[800],
+                border: colors.secondary[800],
             },
             pressed: {
-                bg: surface.pressed,
-                fg: action.secondary.active.bg,
-                border: action.secondary.active.border,
+                bg: action.secondary.muted.bg,
+                fg: colors.secondary[900],
+                border: colors.secondary[900],
             },
         },
         ghost: {
             default: {
                 ...transparent,
-                fg: action.secondary.default.bg,
-                border: 'transparent',
+                fg: colors.secondary[700],
             },
             hover: {
-                bg: surface.elevated,
-                fg: action.secondary.hover.bg,
-                border: 'transparent',
+                ...transparent,
+                bg: action.secondary.subtle.bg,
+                fg: colors.secondary[800],
             },
             pressed: {
-                bg: surface.pressed,
-                fg: action.secondary.active.bg,
-                border: 'transparent',
+                ...transparent,
+                bg: action.secondary.muted.bg,
+                fg: colors.secondary[900],
             },
         },
     },
@@ -97,36 +97,35 @@ export const button = {
         },
         outline: {
             default: {
-                ...transparent,
-                fg: action.close.muted.bg,
-                border: action.close.muted.border,
+                bg: 'transparent',
+                fg: colors.vellira[700],
+                border: colors.vellira[400],
             },
             hover: {
-                bg: surface.hover,
-                fg: action.close.subtle.bg,
-                border: action.close.subtle.border,
+                bg: action.close.subtle.bg,
+                fg: colors.vellira[800],
+                border: colors.vellira[500],
             },
             pressed: {
-                bg: surface.pressed,
-                fg: action.close.active.bg,
-                border: action.close.active.border,
+                bg: action.close.muted.bg,
+                fg: colors.vellira[900],
+                border: colors.vellira[600],
             },
         },
         ghost: {
             default: {
                 ...transparent,
                 fg: text.primary,
-                border: 'transparent',
             },
             hover: {
-                bg: action.primary.subtle.bg,
-                fg: text.primary,
-                border: 'transparent',
+                ...transparent,
+                bg: action.close.subtle.bg,
+                fg: colors.vellira[800],
             },
             pressed: {
-                bg: action.primary.subtle.bg,
-                fg: text.primary,
-                border: 'transparent',
+                ...transparent,
+                bg: action.close.muted.bg,
+                fg: colors.vellira[900],
             },
         },
     },
@@ -138,36 +137,35 @@ export const button = {
         },
         outline: {
             default: {
-                ...transparent,
-                fg: action.danger.default.bg,
-                border: action.danger.default.border,
+                bg: 'transparent',
+                fg: status.error.fg,
+                border: status.error.border,
             },
             hover: {
                 bg: status.error.bg,
-                fg: action.danger.hover.bg,
-                border: action.danger.hover.border,
+                fg: colors.error[800],
+                border: colors.error[700],
             },
             pressed: {
-                bg: status.error.bg,
-                fg: action.danger.active.bg,
-                border: action.danger.active.border,
+                bg: action.danger.muted.bg,
+                fg: colors.error[900],
+                border: colors.error[800],
             },
         },
         ghost: {
             default: {
                 ...transparent,
-                fg: action.danger.default.bg,
-                border: 'transparent',
+                fg: status.error.fg,
             },
             hover: {
+                ...transparent,
                 bg: status.error.bg,
-                fg: action.danger.hover.bg,
-                border: 'transparent',
+                fg: colors.error[800],
             },
             pressed: {
-                bg: status.error.bg,
-                fg: action.danger.active.bg,
-                border: 'transparent',
+                ...transparent,
+                bg: action.danger.muted.bg,
+                fg: colors.error[900],
             },
         },
     },

package/dist/light/components/checkbox.d.ts

@@ -1,42 +1,46 @@
 export declare const checkbox: {
     readonly default: {
-        readonly bg: "#F4F1FB";
-        readonly fg: "#4F4867";
-        readonly border: "#D4CEE8";
+        readonly bg: "#FFFFFF";
+        readonly fg: "#3D3754";
+        readonly border: "#BBB2D2";
     };
     readonly hover: {
         readonly bg: "#F4F3FF";
-        readonly fg: "#5037C8";
+        readonly fg: "#402C9F";
         readonly border: "#5037C8";
     };
     readonly checked: {
         readonly default: {
+            readonly labelFg: "#5037C8";
             readonly bg: "#6346E8";
             readonly fg: "#FFFFFF";
             readonly border: "#6346E8";
         };
         readonly hover: {
-            readonly bg: "#402C9F";
-            readonly fg: "#5037C8";
-            readonly border: "#402C9F";
+            readonly labelFg: "#402C9F";
+            readonly bg: "#5037C8";
+            readonly fg: "#FFFFFF";
+            readonly border: "#5037C8";
         };
         readonly pressed: {
-            readonly bg: "#21164F";
-            readonly fg: "#0F0F0F";
-            readonly border: "#21164F";
+            readonly labelFg: "#342580";
+            readonly bg: "#402C9F";
+            readonly fg: "#FFFFFF";
+            readonly border: "#402C9F";
         };
     };
     readonly focus: {
         readonly ring: "#5037C8";
     };
     readonly disabled: {
-        readonly bg: "#FFFFFF";
-        readonly fg: "#9CA3AF";
-        readonly border: "#EEE8FA";
+        readonly bg: "#F4F1FB";
+        readonly fg: "#958CB0";
+        readonly border: "#E4DDF4";
     };
     readonly error: {
-        readonly fg: "#E11D48";
+        readonly fg: "#BE123C";
         readonly border: "#E11D48";
+        readonly ring: "#F43F5E";
     };
 };
 //# sourceMappingURL=checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/light/components/checkbox.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyBX,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/light/components/checkbox.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCX,CAAC"}

package/dist/light/components/checkbox.js

@@ -1,27 +1,31 @@
-import { border } from '../semantic/border.js';
 import { control } from '../semantic/control.js';
 import { focus } from '../semantic/focus.js';
 import { status } from '../semantic/status.js';
-import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 export const checkbox = {
     default: control.default,
     hover: control.hover,
     checked: {
-        default: control.selected.default,
-        hover: control.selected.hover,
-        pressed: control.selected.active,
+        default: {
+            ...control.selected.default,
+            labelFg: text.interactive,
+        },
+        hover: {
+            ...control.selected.hover,
+            labelFg: text.interactiveHover,
+        },
+        pressed: {
+            ...control.selected.active,
+            labelFg: text.interactiveActive,
+        },
     },
     focus: {
-        ring: focus.ring,
-    },
-    disabled: {
-        bg: surface.subtle,
-        fg: text.disabled,
-        border: border.muted,
+        ring: focus.ring.color,
     },
+    disabled: control.disabled,
     error: {
         fg: status.error.fg,
-        border: status.error.fg,
+        border: status.error.border,
+        ring: status.error.ring,
     },
 };

package/dist/light/components/contextMenu.d.ts

@@ -0,0 +1,89 @@
+export declare const contextMenu: {
+    readonly content: {
+        readonly bg: "#FFFFFF";
+        readonly border: "#E4DDF4";
+        readonly shadow: "0 12px 40px rgba(24, 21, 33, 0.16), 0 2px 8px rgba(24, 21, 33, 0.1)";
+    };
+    readonly item: {
+        readonly default: {
+            readonly bg: "transparent";
+            readonly fg: "#3D3754";
+        };
+        readonly hover: {
+            readonly bg: "#F4F1FB";
+            readonly fg: "#3D3754";
+        };
+        readonly active: {
+            readonly ring: "transparent";
+            readonly bg: "#EEE8FA";
+            readonly fg: "#3D3754";
+        };
+        readonly pressed: {
+            readonly bg: "#E4DDF4";
+            readonly fg: "#3D3754";
+        };
+        readonly focus: {
+            readonly ring: {
+                readonly color: "#5037C8";
+                readonly width: "2px";
+                readonly shadow: "0 0 8px rgba(99, 70, 232, 0.14)";
+                readonly offset: "#FFFFFF";
+            };
+        };
+        readonly disabled: {
+            readonly bg: "transparent";
+            readonly fg: "#958CB0";
+        };
+        readonly danger: {
+            readonly default: {
+                readonly bg: "transparent";
+                readonly fg: "#BE123C";
+            };
+            readonly hover: {
+                readonly bg: "#FFF1F2";
+                readonly fg: "#BE123C";
+            };
+            readonly active: {
+                readonly bg: "#FFE4E6";
+                readonly fg: "#9F1239";
+            };
+            readonly disabled: {
+                readonly bg: "transparent";
+                readonly fg: "#958CB0";
+            };
+        };
+    };
+    readonly trigger: {
+        readonly default: {
+            readonly bg: "transparent";
+            readonly fg: "#5037C8";
+            readonly border: "transparent";
+        };
+        readonly hover: {
+            readonly bg: "#F4F1FB";
+            readonly fg: "#402C9F";
+            readonly border: "transparent";
+            readonly ring: "transparent";
+        };
+        readonly focus: {
+            readonly bg: "transparent";
+            readonly fg: "#5037C8";
+            readonly border: "transparent";
+            readonly ring: {
+                readonly color: "#5037C8";
+                readonly width: "2px";
+                readonly shadow: "0 0 8px rgba(99, 70, 232, 0.14)";
+                readonly offset: "#FFFFFF";
+            };
+        };
+        readonly disabled: {
+            readonly bg: "transparent";
+            readonly fg: "#958CB0";
+            readonly border: "transparent";
+        };
+    };
+    readonly groupLabel: {
+        readonly fg: "#6B6386";
+    };
+};
+//# sourceMappingURL=contextMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"contextMenu.d.ts","sourceRoot":"","sources":["../../../src/light/components/contextMenu.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDd,CAAC"}