@vellira-ui/tokens 2.21.0 → 2.22.1

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

@@ -2,14 +2,16 @@ export declare const input: {
     readonly default: {
         readonly bg: "transparent";
         readonly fg: "#4F4867";
-        readonly border: "#EEE8FA";
+        readonly border: "#BBB2D2";
         readonly placeholder: "#958CB0";
+        readonly icon: "#9B7CFF";
     };
     readonly hover: {
         readonly bg: "#F4F3FF";
         readonly fg: "#4F4867";
         readonly border: "#5037C8";
         readonly placeholder: "#958CB0";
+        readonly icon: "#9B7CFF";
     };
     readonly focus: {
         readonly bg: "transparent";
@@ -17,20 +19,45 @@ export declare const input: {
         readonly border: "#5037C8";
         readonly ring: "#5037C8";
         readonly placeholder: "#958CB0";
+        readonly icon: "#FFFFFF";
     };
     readonly disabled: {
-        readonly bg: "#FFFFFF";
+        readonly bg: "#F4F1FB";
         readonly fg: "#9CA3AF";
-        readonly border: "#EEE8FA";
+        readonly border: "#E4DDF4";
         readonly placeholder: "#9CA3AF";
+        readonly icon: "#958CB0";
     };
     readonly error: {
         readonly border: "#BE123C";
-        readonly ring: "#BE123C";
+        readonly ring: "#F43F5E";
     };
     readonly success: {
         readonly border: "#047857";
         readonly ring: "#047857";
     };
+    readonly readOnly: {
+        readonly bg: "#FFFFFF";
+        readonly fg: "#6B6386";
+        readonly border: "#BBB2D2";
+        readonly placeholder: "#958CB0";
+        readonly icon: "#6B6386";
+    };
+    readonly icon: {
+        readonly default: "#0F0F0F";
+        readonly primary: "#7C5CFF";
+        readonly secondary: "#1FBEDB";
+        readonly success: "#059669";
+        readonly danger: "#E11D48";
+        readonly muted: "#6B6386";
+        readonly inverse: "#1A1A1A";
+    };
+    readonly clearButton: {
+        readonly fg: "#F43F5E";
+        readonly hoverFg: "#F43F5E";
+        readonly hoverBg: string;
+        readonly focusBg: "#181521";
+        readonly pressedBg: "#BBB2D2";
+    };
 };
 //# sourceMappingURL=input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/light/components/input.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCR,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/light/components/input.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqER,CAAC"}

package/dist/light/components/input.js

@@ -1,6 +1,7 @@
 import { border } from '../semantic/border.js';
 import { control } from '../semantic/control.js';
 import { focus } from '../semantic/focus.js';
+import { icons } from '../semantic/icons.js';
 import { status } from '../semantic/status.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
@@ -10,12 +11,14 @@ export const input = {
         fg: text.primary,
         border: border.default,
         placeholder: text.muted,
+        icon: icons.brand,
     },
     hover: {
         bg: control.hover.bg,
         fg: text.primary,
         border: control.hover.border,
         placeholder: text.muted,
+        icon: icons.hover,
     },
     focus: {
         bg: 'transparent',
@@ -23,12 +26,14 @@ export const input = {
         border: border.focus,
         ring: focus.ring,
         placeholder: text.muted,
+        icon: icons.subtle,
     },
     disabled: {
-        bg: surface.subtle,
+        bg: surface.disabled,
         fg: text.disabled,
-        border: border.default,
+        border: border.disabled,
         placeholder: text.disabled,
+        icon: icons.disabled,
     },
     error: {
         border: status.error.strong,
@@ -38,4 +43,27 @@ export const input = {
         border: status.success.strong,
         ring: status.success.fg,
     },
+    readOnly: {
+        bg: surface.subtle,
+        fg: text.secondary,
+        border: border.default,
+        placeholder: text.muted,
+        icon: icons.muted,
+    },
+    icon: {
+        default: icons.default,
+        primary: icons.primary,
+        secondary: icons.secondary,
+        success: icons.success,
+        danger: icons.danger,
+        muted: icons.muted,
+        inverse: icons.inverse,
+    },
+    clearButton: {
+        fg: status.error.fg,
+        hoverFg: status.error.fg,
+        hoverBg: surface.danger,
+        focusBg: surface.inverse,
+        pressedBg: surface.active,
+    },
 };

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

@@ -21,7 +21,7 @@ export declare const menu: {
         };
         readonly danger: {
             readonly default: {
-                readonly fg: "#BE123C";
+                readonly fg: "#F43F5E";
             };
             readonly hover: {
                 readonly bg: "#FFF1F2";

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

@@ -5,7 +5,7 @@ export declare const modal: {
     readonly content: {
         readonly bg: "#FFFFFF";
         readonly fg: "#4F4867";
-        readonly border: "#EEE8FA";
+        readonly border: "#BBB2D2";
     };
     readonly title: {
         readonly fg: "#4F4867";

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

@@ -2,7 +2,7 @@ export declare const radio: {
     readonly default: {
         readonly bg: "#F4F1FB";
         readonly fg: "#4F4867";
-        readonly border: "#EEE8FA";
+        readonly border: "#BBB2D2";
     };
     readonly hover: {
         readonly bg: "#F4F3FF";
@@ -32,7 +32,7 @@ export declare const radio: {
     readonly disabled: {
         readonly bg: "#FFFFFF";
         readonly fg: "#9CA3AF";
-        readonly border: "#EEE8FA";
+        readonly border: "#BBB2D2";
     };
 };
 //# sourceMappingURL=radio.d.ts.map

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

@@ -3,7 +3,7 @@ export declare const select: {
         readonly default: {
             readonly bg: "#F4F1FB";
             readonly fg: "#1A1A1A";
-            readonly border: "#EEE8FA";
+            readonly border: "#BBB2D2";
         };
         readonly hover: {
             readonly bg: "#F4F3FF";
@@ -25,7 +25,7 @@ export declare const select: {
             readonly fg: "#6B6386";
         };
         readonly error: {
-            readonly border: "#BE123C";
+            readonly border: "#F43F5E";
             readonly ring: "#FFE4E6";
         };
     };

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

@@ -1,6 +1,6 @@
 export declare const tabs: {
     readonly list: {
-        readonly border: "#EEE8FA";
+        readonly border: "#BBB2D2";
     };
     readonly trigger: {
         readonly default: {

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

@@ -2,7 +2,7 @@ export declare const tooltip: {
     readonly content: {
         readonly bg: "#181521";
         readonly fg: "#FFFFFF";
-        readonly border: "#EEE8FA";
+        readonly border: "#BBB2D2";
     };
     readonly arrow: {
         readonly bg: "#181521";

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

@@ -1,9 +1,10 @@
 export declare const border: {
-    readonly default: "#EEE8FA";
+    readonly default: "#BBB2D2";
     readonly muted: "#EEE8FA";
     readonly subtle: "#D4CEE8";
     readonly elevated: "#958CB0";
     readonly strong: "#4F4867";
+    readonly disabled: "#E4DDF4";
     readonly focus: "#5037C8";
 };
 //# sourceMappingURL=border.d.ts.map

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

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

package/dist/light/semantic/border.js

@@ -1,9 +1,10 @@
 import { colors } from '../../primitives/colors.js';
 export const border = {
-    default: colors.vellira[150],
+    default: colors.vellira[300],
     muted: colors.vellira[150],
     subtle: colors.vellira[250],
     elevated: colors.vellira[400],
     strong: colors.vellira[600],
+    disabled: colors.vellira[200],
     focus: colors.primary[700],
 };

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

@@ -1,4 +1,9 @@
 export declare const control: {
+    readonly default: {
+        readonly bg: "#F4F1FB";
+        readonly fg: "#4F4867";
+        readonly border: "#D4CEE8";
+    };
     readonly hover: {
         readonly bg: "#F4F3FF";
         readonly fg: "#342580";

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

@@ -1 +1 @@
-{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/control.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BV,CAAC"}
+{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/control.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCV,CAAC"}

package/dist/light/semantic/control.js

@@ -1,6 +1,13 @@
 import { colors } from '../../primitives/colors.js';
+import { border } from './border.js';
+import { surface } from './surface.js';
 import { text } from './text.js';
 export const control = {
+    default: {
+        bg: surface.default,
+        fg: text.primary,
+        border: border.subtle,
+    },
     hover: {
         bg: colors.primary[50],
         fg: colors.primary[900],

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

@@ -0,0 +1,15 @@
+export declare const icons: {
+    readonly default: "#0F0F0F";
+    readonly primary: "#7C5CFF";
+    readonly secondary: "#1FBEDB";
+    readonly success: "#059669";
+    readonly muted: "#6B6386";
+    readonly disabled: "#958CB0";
+    readonly subtle: "#FFFFFF";
+    readonly danger: "#E11D48";
+    readonly hover: "#9B7CFF";
+    readonly inverse: "#1A1A1A";
+    readonly onInverse: "#000000";
+    readonly brand: "#9B7CFF";
+};
+//# sourceMappingURL=icons.d.ts.map

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

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

package/dist/light/semantic/icons.js

@@ -0,0 +1,15 @@
+import { colors } from '../../primitives/colors.js';
+export const icons = {
+    default: colors.mono[900],
+    primary: colors.primary[500],
+    secondary: colors.secondary[500],
+    success: colors.success[600],
+    muted: colors.vellira[500],
+    disabled: colors.vellira[400],
+    subtle: colors.mono[50],
+    danger: colors.error[600],
+    hover: colors.primary[400],
+    inverse: colors.mono[800],
+    onInverse: colors.mono[950],
+    brand: colors.primary[400],
+};

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

@@ -6,7 +6,7 @@ export declare const status: {
         readonly strong: "#047857";
     };
     readonly error: {
-        readonly fg: "#BE123C";
+        readonly fg: "#F43F5E";
         readonly bg: "#FFE4E6";
         readonly border: "#FDA4AF";
         readonly strong: "#BE123C";

package/dist/light/semantic/status.js

@@ -7,7 +7,7 @@ export const status = {
         strong: colors.success[700],
     },
     error: {
-        fg: colors.error[700],
+        fg: colors.error[500],
         bg: colors.error[100],
         border: colors.error[300],
         strong: colors.error[700],

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

@@ -5,6 +5,7 @@ export declare const surface: {
     readonly elevated: "#D9FBFF";
     readonly pressed: "#E4DDF4";
     readonly disabled: "#F4F1FB";
+    readonly danger: string;
     readonly hover: "#EEE8FA";
     readonly active: "#BBB2D2";
     readonly inverse: "#181521";

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":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;CAYV,CAAC"}
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/surface.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;;;;;;;;;;;CAaV,CAAC"}

package/dist/light/semantic/surface.js

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

package/dist/utils/color.d.ts

@@ -0,0 +1,2 @@
+export declare const withAlpha: (hex: string, alpha: number) => string;
+//# sourceMappingURL=color.d.ts.map

package/dist/utils/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/utils/color.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,GAAI,KAAK,MAAM,EAAE,OAAO,MAAM,KAAG,MAetD,CAAC"}

package/dist/utils/color.js

@@ -0,0 +1,12 @@
+// packages/tokens/src/utils/color.ts
+export const withAlpha = (hex, alpha) => {
+    const normalized = hex.replace('#', '');
+    if (normalized.length !== 6) {
+        throw new Error(`withAlpha() expects a 6-digit hex color. Received: ${hex}`);
+    }
+    const opacity = Math.round(Math.min(Math.max(alpha, 0), 1) * 255)
+        .toString(16)
+        .padStart(2, '0')
+        .toUpperCase();
+    return `#${normalized}${opacity}`;
+};

package/package.json

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