@vellira-ui/tokens 2.26.1 → 2.28.0

package/dist/dark/components/button.js

@@ -1,174 +1,159 @@
 import { colors } from '../../primitives/colors.js';
-import { action } from '../semantic/action.js';
+import { createButtonPalette } from '../../utils/createButtonPalette.js';
 import { border } from '../semantic/border.js';
-import { status } from '../semantic/status.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
-const transparent = {
-    bg: 'transparent',
-    border: 'transparent',
-};
-export const button = {
-    primary: {
-        solid: {
-            default: action.primary.default,
-            hover: action.primary.hover,
-            pressed: action.primary.active,
+const primary = createButtonPalette({
+    ring: colors.primary[400],
+    solid: {
+        default: {
+            bg: colors.primary[600],
+            fg: colors.primary[50],
+            border: colors.primary[600],
         },
-        outline: {
-            default: {
-                bg: 'transparent',
-                fg: colors.primary[300],
-                border: colors.primary[500],
-            },
-            hover: {
-                bg: surface.elevated,
-                fg: colors.primary[200],
-                border: colors.primary[400],
-            },
-            pressed: {
-                bg: surface.active,
-                fg: colors.primary[100],
-                border: colors.primary[500],
-            },
+        hover: {
+            bg: colors.primary[700],
+            fg: colors.primary[200],
+            border: colors.primary[700],
         },
-        ghost: {
-            default: {
-                ...transparent,
-                fg: colors.primary[300],
-            },
-            hover: {
-                ...transparent,
-                bg: surface.elevated,
-                fg: colors.primary[200],
-            },
-            pressed: {
-                ...transparent,
-                bg: surface.active,
-                fg: colors.primary[100],
-            },
+        pressed: {
+            bg: colors.primary[800],
+            fg: colors.primary[300],
+            border: colors.primary[800],
         },
     },
-    secondary: {
-        solid: {
-            default: action.secondary.default,
-            hover: action.secondary.hover,
-            pressed: action.secondary.active,
+    fg: colors.primary[400],
+    bg: colors.primary[950],
+    border: colors.primary[300],
+    hoverFg: colors.primary[400],
+    hoverBg: colors.primary[900],
+    hoverBorder: colors.primary[500],
+    pressedFg: colors.primary[500],
+    pressedBg: colors.primary[800],
+    pressedBorder: colors.primary[600],
+});
+const neutral = createButtonPalette({
+    ring: colors.vellira[400],
+    solid: {
+        default: {
+            bg: colors.vellira[200],
+            fg: colors.vellira[950],
+            border: colors.vellira[200],
         },
-        outline: {
-            default: {
-                bg: 'transparent',
-                fg: colors.secondary[300],
-                border: colors.secondary[500],
-            },
-            hover: {
-                bg: surface.elevated,
-                fg: colors.secondary[200],
-                border: colors.secondary[400],
-            },
-            pressed: {
-                bg: surface.active,
-                fg: colors.secondary[100],
-                border: colors.secondary[500],
-            },
+        hover: {
+            bg: colors.vellira[300],
+            fg: colors.vellira[900],
+            border: colors.vellira[300],
         },
-        ghost: {
-            default: {
-                ...transparent,
-                fg: colors.secondary[300],
-            },
-            hover: {
-                ...transparent,
-                bg: surface.elevated,
-                fg: colors.secondary[200],
-            },
-            pressed: {
-                ...transparent,
-                bg: surface.active,
-                fg: colors.secondary[100],
-            },
+        pressed: {
+            bg: colors.vellira[400],
+            fg: colors.vellira[800],
+            border: colors.vellira[400],
         },
     },
-    close: {
-        solid: {
-            default: action.close.default,
-            hover: action.close.hover,
-            pressed: action.close.active,
+    fg: colors.vellira[200],
+    bg: colors.vellira[800],
+    border: colors.vellira[300],
+    hoverFg: colors.vellira[300],
+    hoverBg: colors.vellira[700],
+    hoverBorder: colors.vellira[400],
+    pressedFg: colors.vellira[400],
+    pressedBg: colors.vellira[800],
+    pressedBorder: colors.vellira[500],
+});
+const success = createButtonPalette({
+    ring: colors.success[500],
+    solid: {
+        default: {
+            bg: colors.success[500],
+            fg: colors.success[950],
+            border: colors.success[500],
         },
-        outline: {
-            default: {
-                bg: 'transparent',
-                fg: colors.vellira[300],
-                border: colors.vellira[500],
-            },
-            hover: {
-                bg: surface.elevated,
-                fg: colors.vellira[200],
-                border: colors.vellira[400],
-            },
-            pressed: {
-                bg: surface.active,
-                fg: colors.vellira[100],
-                border: colors.vellira[500],
-            },
+        hover: {
+            bg: colors.success[600],
+            fg: colors.success[900],
+            border: colors.success[600],
         },
-        ghost: {
-            default: {
-                ...transparent,
-                fg: colors.vellira[300],
-            },
-            hover: {
-                ...transparent,
-                bg: surface.elevated,
-                fg: colors.vellira[200],
-            },
-            pressed: {
-                ...transparent,
-                bg: surface.active,
-                fg: colors.vellira[100],
-            },
+        pressed: {
+            bg: colors.success[700],
+            fg: colors.success[800],
+            border: colors.success[700],
         },
     },
-    danger: {
-        solid: {
-            default: action.danger.default,
-            hover: action.danger.hover,
-            pressed: action.danger.active,
+    fg: colors.success[400],
+    bg: colors.success[950],
+    border: colors.success[500],
+    hoverFg: colors.success[500],
+    hoverBg: colors.success[900],
+    hoverBorder: colors.success[600],
+    pressedFg: colors.success[600],
+    pressedBg: colors.success[800],
+    pressedBorder: colors.success[700],
+});
+const warning = createButtonPalette({
+    ring: colors.warning[500],
+    solid: {
+        default: {
+            bg: colors.warning[500],
+            fg: colors.warning[950],
+            border: colors.warning[500],
         },
-        outline: {
-            default: {
-                bg: 'transparent',
-                fg: status.error.fg,
-                border: status.error.border,
-            },
-            hover: {
-                bg: status.error.bg,
-                fg: colors.error[300],
-                border: colors.error[400],
-            },
-            pressed: {
-                bg: surface.danger,
-                fg: colors.error[200],
-                border: colors.error[500],
-            },
+        hover: {
+            bg: colors.warning[600],
+            fg: colors.warning[900],
+            border: colors.warning[600],
         },
-        ghost: {
-            default: {
-                ...transparent,
-                fg: status.error.fg,
-            },
-            hover: {
-                ...transparent,
-                bg: status.error.bg,
-                fg: colors.error[300],
-            },
-            pressed: {
-                ...transparent,
-                bg: surface.danger,
-                fg: colors.error[200],
-            },
+        pressed: {
+            bg: colors.warning[700],
+            fg: colors.warning[800],
+            border: colors.warning[700],
         },
     },
+    fg: colors.warning[400],
+    bg: colors.warning[950],
+    border: colors.warning[500],
+    hoverFg: colors.warning[500],
+    hoverBg: colors.warning[900],
+    hoverBorder: colors.warning[600],
+    pressedFg: colors.warning[600],
+    pressedBg: colors.warning[800],
+    pressedBorder: colors.warning[700],
+});
+const danger = createButtonPalette({
+    ring: colors.error[500],
+    solid: {
+        default: {
+            bg: colors.error[700],
+            fg: colors.error[50],
+            border: colors.error[700],
+        },
+        hover: {
+            bg: colors.error[800],
+            fg: colors.error[200],
+            border: colors.error[800],
+        },
+        pressed: {
+            bg: colors.error[900],
+            fg: colors.error[300],
+            border: colors.error[900],
+        },
+    },
+    fg: colors.error[400],
+    bg: colors.error[950],
+    border: colors.error[500],
+    hoverFg: colors.error[500],
+    hoverBg: colors.error[900],
+    hoverBorder: colors.error[600],
+    pressedFg: colors.error[600],
+    pressedBg: colors.error[800],
+    pressedBorder: colors.error[700],
+});
+export const button = {
+    primary,
+    neutral,
+    success,
+    warning,
+    danger,
     disabled: {
         bg: surface.disabled,
         fg: text.disabled,

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

@@ -10,25 +10,35 @@ export declare const checkbox: {
         readonly fg: "#B8A8FF";
         readonly border: "#B8A8FF";
     };
-    readonly checked: {
-        readonly default: {
-            readonly labelFg: "#B8A8FF";
-            readonly bg: "#7352F8";
-            readonly fg: "#FFFFFF";
-            readonly border: "#7352F8";
-        };
-        readonly hover: {
-            readonly labelFg: "#9B7CFF";
-            readonly bg: "#9B7CFF";
-            readonly fg: "#FFFFFF";
-            readonly border: "#9B7CFF";
-        };
-        readonly pressed: {
-            readonly labelFg: "#7352F8";
-            readonly bg: "#6346E8";
-            readonly fg: "#FFFFFF";
-            readonly border: "#6346E8";
-        };
+    readonly primary: {
+        readonly ring: string;
+        readonly default: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../utils/createCheckboxPalette.js").CheckboxState;
+    };
+    readonly neutral: {
+        readonly ring: string;
+        readonly default: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../utils/createCheckboxPalette.js").CheckboxState;
+    };
+    readonly success: {
+        readonly ring: string;
+        readonly default: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../utils/createCheckboxPalette.js").CheckboxState;
+    };
+    readonly warning: {
+        readonly ring: string;
+        readonly default: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../utils/createCheckboxPalette.js").CheckboxState;
+    };
+    readonly danger: {
+        readonly ring: string;
+        readonly default: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../utils/createCheckboxPalette.js").CheckboxState;
     };
     readonly focus: {
         readonly ring: "#B8A8FF";

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

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

package/dist/dark/components/checkbox.js

@@ -1,9 +1,116 @@
+import { colors } from '../../primitives/colors.js';
+import { createCheckboxPalette } from '../../utils/createCheckboxPalette.js';
 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';
+const primary = createCheckboxPalette({
+    ring: colors.primary[400],
+    default: {
+        bg: colors.primary[600],
+        fg: colors.primary[50],
+        border: colors.primary[600],
+        labelFg: colors.primary[400],
+    },
+    hover: {
+        bg: colors.primary[700],
+        fg: colors.primary[200],
+        border: colors.primary[700],
+        labelFg: colors.primary[400],
+    },
+    pressed: {
+        bg: colors.primary[800],
+        fg: colors.primary[300],
+        border: colors.primary[800],
+        labelFg: colors.primary[500],
+    },
+});
+const neutral = createCheckboxPalette({
+    ring: colors.vellira[400],
+    default: {
+        bg: colors.vellira[200],
+        fg: colors.vellira[950],
+        border: colors.vellira[200],
+        labelFg: colors.vellira[200],
+    },
+    hover: {
+        bg: colors.vellira[300],
+        fg: colors.vellira[900],
+        border: colors.vellira[300],
+        labelFg: colors.vellira[300],
+    },
+    pressed: {
+        bg: colors.vellira[400],
+        fg: colors.vellira[800],
+        border: colors.vellira[400],
+        labelFg: colors.vellira[400],
+    },
+});
+const success = createCheckboxPalette({
+    ring: colors.success[500],
+    default: {
+        bg: colors.success[500],
+        fg: colors.success[950],
+        border: colors.success[500],
+        labelFg: colors.success[400],
+    },
+    hover: {
+        bg: colors.success[600],
+        fg: colors.success[900],
+        border: colors.success[600],
+        labelFg: colors.success[500],
+    },
+    pressed: {
+        bg: colors.success[700],
+        fg: colors.success[800],
+        border: colors.success[700],
+        labelFg: colors.success[600],
+    },
+});
+const warning = createCheckboxPalette({
+    ring: colors.warning[500],
+    default: {
+        bg: colors.warning[500],
+        fg: colors.warning[950],
+        border: colors.warning[500],
+        labelFg: colors.warning[400],
+    },
+    hover: {
+        bg: colors.warning[600],
+        fg: colors.warning[900],
+        border: colors.warning[600],
+        labelFg: colors.warning[500],
+    },
+    pressed: {
+        bg: colors.warning[700],
+        fg: colors.warning[800],
+        border: colors.warning[700],
+        labelFg: colors.warning[600],
+    },
+});
+const danger = createCheckboxPalette({
+    ring: colors.error[500],
+    default: {
+        bg: colors.error[700],
+        fg: colors.error[50],
+        border: colors.error[700],
+        labelFg: colors.error[400],
+    },
+    hover: {
+        bg: colors.error[800],
+        fg: colors.error[200],
+        border: colors.error[800],
+        labelFg: colors.error[500],
+    },
+    pressed: {
+        bg: colors.error[900],
+        fg: colors.error[300],
+        border: colors.error[900],
+        labelFg: colors.error[600],
+    },
+});
 export const checkbox = {
     default: {
         bg: surface.elevated,
@@ -14,20 +121,11 @@ export const checkbox = {
         ...control.hover,
         labelFg: text.interactiveHover,
     },
-    checked: {
-        default: {
-            ...control.selected.default,
-            labelFg: text.brand,
-        },
-        hover: {
-            ...control.selected.hover,
-            labelFg: text.interactiveHover,
-        },
-        pressed: {
-            ...control.selected.active,
-            labelFg: text.interactiveActive,
-        },
-    },
+    primary,
+    neutral,
+    success,
+    warning,
+    danger,
     focus: {
         ring: focus.ring.color,
     },

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

@@ -13,7 +13,7 @@ export declare const formField: {
             readonly fg: "#FB7185";
         };
         readonly success: {
-            readonly fg: "#34D399";
+            readonly fg: "#2DD4BF";
         };
         readonly warning: {
             readonly fg: "#FBBF24";

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

@@ -33,8 +33,8 @@ export declare const input: {
         readonly ring: "#FB7185";
     };
     readonly success: {
-        readonly border: "#34D399";
-        readonly ring: "#34D399";
+        readonly border: "#2DD4BF";
+        readonly ring: "#2DD4BF";
     };
     readonly readOnly: {
         readonly bg: "#242034";
@@ -47,7 +47,7 @@ export declare const input: {
         readonly default: "#F4F1FB";
         readonly primary: "#B8A8FF";
         readonly secondary: "#E5E7EB";
-        readonly success: "#34D399";
+        readonly success: "#2DD4BF";
         readonly danger: "#FB7185";
         readonly muted: "#958CB0";
         readonly inverse: "#000000";

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

@@ -7,7 +7,7 @@ export declare const icons: {
     readonly primary: "#B8A8FF";
     readonly brand: "#B8A8FF";
     readonly hover: "#D4CCFF";
-    readonly success: "#34D399";
+    readonly success: "#2DD4BF";
     readonly danger: "#FB7185";
     readonly inverse: "#000000";
 };

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

@@ -1,10 +1,10 @@
 export declare const status: {
     readonly success: {
-        readonly fg: "#34D399";
+        readonly fg: "#2DD4BF";
         readonly bg: "rgba(52, 211, 153, 0.14)";
-        readonly border: "#34D399";
-        readonly ring: "#6EE7B7";
-        readonly strong: "#059669";
+        readonly border: "#2DD4BF";
+        readonly ring: "#5EEAD4";
+        readonly strong: "#0F9E94";
     };
     readonly error: {
         readonly fg: "#FB7185";

package/dist/dark/theme.d.ts

@@ -62,17 +62,17 @@ export declare const darkTheme: {
             readonly 950: "#071927";
         };
         readonly success: {
-            readonly 50: "#ECFDF5";
-            readonly 100: "#D1FAE5";
-            readonly 200: "#A7F3D0";
-            readonly 300: "#6EE7B7";
-            readonly 400: "#34D399";
-            readonly 500: "#10B981";
-            readonly 600: "#059669";
-            readonly 700: "#047857";
-            readonly 800: "#065F46";
-            readonly 900: "#064E3B";
-            readonly 950: "#022C22";
+            readonly 50: "#F0FDFA";
+            readonly 100: "#CCFBF1";
+            readonly 200: "#99F6E4";
+            readonly 300: "#5EEAD4";
+            readonly 400: "#2DD4BF";
+            readonly 500: "#14B8A6";
+            readonly 600: "#0F9E94";
+            readonly 700: "#0F766E";
+            readonly 800: "#115E59";
+            readonly 900: "#134E4A";
+            readonly 950: "#042F2E";
         };
         readonly error: {
             readonly 50: "#FFF1F2";