@vellira-ui/tokens 2.20.0 → 2.22.0

package/dist/light/theme.d.ts

@@ -4,100 +4,100 @@ export declare const lightTheme: {
     readonly name: "light";
     readonly colors: {
         readonly primary: {
-            readonly 50: "#EEF0FF";
-            readonly 100: "#DDD6FE";
-            readonly 200: "#C4B5FD";
-            readonly 300: "#A78BFA";
-            readonly 400: "#8B7CF6";
-            readonly 500: "#7C6CF2";
-            readonly 600: "#6D5BD0";
-            readonly 700: "#5B4BEA";
-            readonly 800: "#4936D9";
-            readonly 900: "#4338CA";
-            readonly 950: "#3B2BBF";
+            readonly 50: "#F4F3FF";
+            readonly 100: "#E9E6FF";
+            readonly 200: "#D4CCFF";
+            readonly 300: "#B8A8FF";
+            readonly 400: "#9B7CFF";
+            readonly 500: "#7C5CFF";
+            readonly 600: "#6346E8";
+            readonly 700: "#5037C8";
+            readonly 800: "#402C9F";
+            readonly 900: "#342580";
+            readonly 950: "#21164F";
         };
         readonly secondary: {
-            readonly 50: "#F0F1FF";
-            readonly 100: "#D8DAFF";
-            readonly 200: "#B8BBF2";
-            readonly 300: "#9EA2EA";
-            readonly 400: "#7B80D8";
-            readonly 500: "#4C4F8F";
-            readonly 600: "#3c2d9e";
-            readonly 700: "#2e156e";
-            readonly 800: "#2f106c";
-            readonly 900: "#190947";
-            readonly 950: "#160537";
+            readonly 50: "#F2FDFF";
+            readonly 100: "#D9FBFF";
+            readonly 200: "#B4F4FD";
+            readonly 300: "#79E8F8";
+            readonly 400: "#3ED5EE";
+            readonly 500: "#1FBEDB";
+            readonly 600: "#0F9BB8";
+            readonly 700: "#0B7D95";
+            readonly 800: "#0A6175";
+            readonly 900: "#094C5E";
+            readonly 950: "#062F3B";
         };
         readonly vellira: {
             readonly 25: "#FDFCFF";
             readonly 50: "#FAF8FF";
             readonly 100: "#F4F1FB";
             readonly 150: "#EEE8FA";
-            readonly 200: "#E8E2F3";
-            readonly 250: "#D8D3E8";
-            readonly 300: "#A8A1BA";
-            readonly 400: "#746F86";
-            readonly 500: "#413957";
-            readonly 600: "#3A334D";
-            readonly 700: "#312C44";
-            readonly 800: "#29253A";
-            readonly 900: "#211E2E";
-            readonly 950: "#1B1726";
+            readonly 200: "#E4DDF4";
+            readonly 250: "#D4CEE8";
+            readonly 300: "#BBB2D2";
+            readonly 400: "#958CB0";
+            readonly 500: "#6B6386";
+            readonly 600: "#4F4867";
+            readonly 700: "#3D3754";
+            readonly 800: "#2F2A42";
+            readonly 900: "#231F31";
+            readonly 950: "#181521";
         };
         readonly info: {
             readonly 50: "#F0F9FF";
-            readonly 100: "#EFF6FF";
-            readonly 150: "#DBEAFE";
-            readonly 200: "#93C5FD";
-            readonly 250: "#4DA3FF";
-            readonly 300: "#7BBCFF";
-            readonly 400: "#3399FF";
-            readonly 500: "#0EA5E9";
-            readonly 600: "#0284C7";
-            readonly 700: "#0265c7";
-            readonly 800: "#023ac7";
-            readonly 900: "#002B55";
-            readonly 950: "#102A43";
+            readonly 100: "#E0F2FE";
+            readonly 150: "#BAE6FD";
+            readonly 200: "#7DD3FC";
+            readonly 250: "#38BDF8";
+            readonly 300: "#0EA5E9";
+            readonly 400: "#0284C7";
+            readonly 500: "#0369A1";
+            readonly 600: "#075985";
+            readonly 700: "#0C4A6E";
+            readonly 800: "#082F49";
+            readonly 900: "#0B2538";
+            readonly 950: "#071927";
         };
         readonly success: {
             readonly 50: "#ECFDF5";
             readonly 100: "#D1FAE5";
             readonly 200: "#A7F3D0";
-            readonly 300: "#9AFFB8";
-            readonly 400: "#4ADE80";
-            readonly 500: "#00B956";
-            readonly 600: "#22C55E";
-            readonly 700: "#008F6A";
-            readonly 800: "#00785A";
-            readonly 900: "#166534";
-            readonly 950: "#0F2F26";
+            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 error: {
-            readonly 50: "#FEF2F2";
-            readonly 100: "#FFF1F2";
-            readonly 200: "#FDA4AF";
-            readonly 300: "#FF8A8A";
+            readonly 50: "#FFF1F2";
+            readonly 100: "#FFE4E6";
+            readonly 200: "#FECDD3";
+            readonly 300: "#FDA4AF";
             readonly 400: "#FB7185";
             readonly 500: "#F43F5E";
             readonly 600: "#E11D48";
-            readonly 700: "#DC2626";
-            readonly 800: "#B91C1C";
-            readonly 900: "#9F1239";
+            readonly 700: "#BE123C";
+            readonly 800: "#9F1239";
+            readonly 900: "#881337";
             readonly 950: "#4C0519";
         };
         readonly warning: {
-            readonly 50: "#FFF7ED";
-            readonly 100: "#FFFBEB";
-            readonly 200: "#FEF3C7";
+            readonly 50: "#FFFBEB";
+            readonly 100: "#FEF3C7";
+            readonly 200: "#FDE68A";
             readonly 300: "#FCD34D";
-            readonly 400: "#FFFF99";
-            readonly 500: "#FFFF00";
-            readonly 600: "#FFEA00";
-            readonly 700: "#C05621";
-            readonly 800: "#A74308";
-            readonly 900: "#92400E";
-            readonly 950: "#3A2412";
+            readonly 400: "#FBBF24";
+            readonly 500: "#F59E0B";
+            readonly 600: "#D97706";
+            readonly 700: "#B45309";
+            readonly 800: "#92400E";
+            readonly 900: "#78350F";
+            readonly 950: "#451A03";
         };
         readonly gray: {
             readonly 50: "#F9FAFB";
@@ -143,10 +143,11 @@ export declare const lightTheme: {
     readonly components: typeof components;
     readonly tokens: {
         readonly radius: {
-            readonly sm: 4;
-            readonly md: 8;
-            readonly lg: 12;
-            readonly xl: 16;
+            readonly xs: 4;
+            readonly sm: 8;
+            readonly md: 12;
+            readonly lg: 16;
+            readonly xl: 20;
             readonly full: 999;
         };
         readonly shadows: {

package/dist/light/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/light/theme.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,UAAU,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYb,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/light/theme.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,UAAU,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYb,CAAC"}

package/dist/primitives/colors.d.ts

@@ -1,105 +1,107 @@
 /**
  * Brand palette used across both Light and Dark themes.
  *
- * 25–250   → Light surfaces
- * 300–950  → Dark surfaces & text
+ * 50–200   → light backgrounds / subtle surfaces
+ * 300–500  → accents / interactive states
+ * 600–700  → main actions
+ * 800–950  → dark surfaces / text / pressed states
  */
 export declare const colors: {
     readonly primary: {
-        readonly 50: "#EEF0FF";
-        readonly 100: "#DDD6FE";
-        readonly 200: "#C4B5FD";
-        readonly 300: "#A78BFA";
-        readonly 400: "#8B7CF6";
-        readonly 500: "#7C6CF2";
-        readonly 600: "#6D5BD0";
-        readonly 700: "#5B4BEA";
-        readonly 800: "#4936D9";
-        readonly 900: "#4338CA";
-        readonly 950: "#3B2BBF";
+        readonly 50: "#F4F3FF";
+        readonly 100: "#E9E6FF";
+        readonly 200: "#D4CCFF";
+        readonly 300: "#B8A8FF";
+        readonly 400: "#9B7CFF";
+        readonly 500: "#7C5CFF";
+        readonly 600: "#6346E8";
+        readonly 700: "#5037C8";
+        readonly 800: "#402C9F";
+        readonly 900: "#342580";
+        readonly 950: "#21164F";
     };
     readonly secondary: {
-        readonly 50: "#F0F1FF";
-        readonly 100: "#D8DAFF";
-        readonly 200: "#B8BBF2";
-        readonly 300: "#9EA2EA";
-        readonly 400: "#7B80D8";
-        readonly 500: "#4C4F8F";
-        readonly 600: "#3c2d9e";
-        readonly 700: "#2e156e";
-        readonly 800: "#2f106c";
-        readonly 900: "#190947";
-        readonly 950: "#160537";
+        readonly 50: "#F2FDFF";
+        readonly 100: "#D9FBFF";
+        readonly 200: "#B4F4FD";
+        readonly 300: "#79E8F8";
+        readonly 400: "#3ED5EE";
+        readonly 500: "#1FBEDB";
+        readonly 600: "#0F9BB8";
+        readonly 700: "#0B7D95";
+        readonly 800: "#0A6175";
+        readonly 900: "#094C5E";
+        readonly 950: "#062F3B";
     };
     readonly vellira: {
         readonly 25: "#FDFCFF";
         readonly 50: "#FAF8FF";
         readonly 100: "#F4F1FB";
         readonly 150: "#EEE8FA";
-        readonly 200: "#E8E2F3";
-        readonly 250: "#D8D3E8";
-        readonly 300: "#A8A1BA";
-        readonly 400: "#746F86";
-        readonly 500: "#413957";
-        readonly 600: "#3A334D";
-        readonly 700: "#312C44";
-        readonly 800: "#29253A";
-        readonly 900: "#211E2E";
-        readonly 950: "#1B1726";
+        readonly 200: "#E4DDF4";
+        readonly 250: "#D4CEE8";
+        readonly 300: "#BBB2D2";
+        readonly 400: "#958CB0";
+        readonly 500: "#6B6386";
+        readonly 600: "#4F4867";
+        readonly 700: "#3D3754";
+        readonly 800: "#2F2A42";
+        readonly 900: "#231F31";
+        readonly 950: "#181521";
     };
     readonly info: {
         readonly 50: "#F0F9FF";
-        readonly 100: "#EFF6FF";
-        readonly 150: "#DBEAFE";
-        readonly 200: "#93C5FD";
-        readonly 250: "#4DA3FF";
-        readonly 300: "#7BBCFF";
-        readonly 400: "#3399FF";
-        readonly 500: "#0EA5E9";
-        readonly 600: "#0284C7";
-        readonly 700: "#0265c7";
-        readonly 800: "#023ac7";
-        readonly 900: "#002B55";
-        readonly 950: "#102A43";
+        readonly 100: "#E0F2FE";
+        readonly 150: "#BAE6FD";
+        readonly 200: "#7DD3FC";
+        readonly 250: "#38BDF8";
+        readonly 300: "#0EA5E9";
+        readonly 400: "#0284C7";
+        readonly 500: "#0369A1";
+        readonly 600: "#075985";
+        readonly 700: "#0C4A6E";
+        readonly 800: "#082F49";
+        readonly 900: "#0B2538";
+        readonly 950: "#071927";
     };
     readonly success: {
         readonly 50: "#ECFDF5";
         readonly 100: "#D1FAE5";
         readonly 200: "#A7F3D0";
-        readonly 300: "#9AFFB8";
-        readonly 400: "#4ADE80";
-        readonly 500: "#00B956";
-        readonly 600: "#22C55E";
-        readonly 700: "#008F6A";
-        readonly 800: "#00785A";
-        readonly 900: "#166534";
-        readonly 950: "#0F2F26";
+        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 error: {
-        readonly 50: "#FEF2F2";
-        readonly 100: "#FFF1F2";
-        readonly 200: "#FDA4AF";
-        readonly 300: "#FF8A8A";
+        readonly 50: "#FFF1F2";
+        readonly 100: "#FFE4E6";
+        readonly 200: "#FECDD3";
+        readonly 300: "#FDA4AF";
         readonly 400: "#FB7185";
         readonly 500: "#F43F5E";
         readonly 600: "#E11D48";
-        readonly 700: "#DC2626";
-        readonly 800: "#B91C1C";
-        readonly 900: "#9F1239";
+        readonly 700: "#BE123C";
+        readonly 800: "#9F1239";
+        readonly 900: "#881337";
         readonly 950: "#4C0519";
     };
     readonly warning: {
-        readonly 50: "#FFF7ED";
-        readonly 100: "#FFFBEB";
-        readonly 200: "#FEF3C7";
+        readonly 50: "#FFFBEB";
+        readonly 100: "#FEF3C7";
+        readonly 200: "#FDE68A";
         readonly 300: "#FCD34D";
-        readonly 400: "#FFFF99";
-        readonly 500: "#FFFF00";
-        readonly 600: "#FFEA00";
-        readonly 700: "#C05621";
-        readonly 800: "#A74308";
-        readonly 900: "#92400E";
-        readonly 950: "#3A2412";
+        readonly 400: "#FBBF24";
+        readonly 500: "#F59E0B";
+        readonly 600: "#D97706";
+        readonly 700: "#B45309";
+        readonly 800: "#92400E";
+        readonly 900: "#78350F";
+        readonly 950: "#451A03";
     };
     readonly gray: {
         readonly 50: "#F9FAFB";

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

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

package/dist/primitives/colors.js

@@ -1,105 +1,107 @@
 /**
  * Brand palette used across both Light and Dark themes.
  *
- * 25–250   → Light surfaces
- * 300–950  → Dark surfaces & text
+ * 50–200   → light backgrounds / subtle surfaces
+ * 300–500  → accents / interactive states
+ * 600–700  → main actions
+ * 800–950  → dark surfaces / text / pressed states
  */
 export const colors = {
     primary: {
-        50: '#EEF0FF',
-        100: '#DDD6FE',
-        200: '#C4B5FD',
-        300: '#A78BFA',
-        400: '#8B7CF6',
-        500: '#7C6CF2',
-        600: '#6D5BD0',
-        700: '#5B4BEA',
-        800: '#4936D9',
-        900: '#4338CA',
-        950: '#3B2BBF',
+        50: '#F4F3FF',
+        100: '#E9E6FF',
+        200: '#D4CCFF',
+        300: '#B8A8FF',
+        400: '#9B7CFF',
+        500: '#7C5CFF',
+        600: '#6346E8',
+        700: '#5037C8',
+        800: '#402C9F',
+        900: '#342580',
+        950: '#21164F',
     },
     secondary: {
-        50: '#F0F1FF',
-        100: '#D8DAFF',
-        200: '#B8BBF2',
-        300: '#9EA2EA',
-        400: '#7B80D8',
-        500: '#4C4F8F',
-        600: '#3c2d9e',
-        700: '#2e156e',
-        800: '#2f106c',
-        900: '#190947',
-        950: '#160537',
+        50: '#F2FDFF',
+        100: '#D9FBFF',
+        200: '#B4F4FD',
+        300: '#79E8F8',
+        400: '#3ED5EE',
+        500: '#1FBEDB',
+        600: '#0F9BB8',
+        700: '#0B7D95',
+        800: '#0A6175',
+        900: '#094C5E',
+        950: '#062F3B',
     },
     vellira: {
         25: '#FDFCFF',
         50: '#FAF8FF',
         100: '#F4F1FB',
         150: '#EEE8FA',
-        200: '#E8E2F3',
-        250: '#D8D3E8',
-        300: '#A8A1BA',
-        400: '#746F86',
-        500: '#413957',
-        600: '#3A334D',
-        700: '#312C44',
-        800: '#29253A',
-        900: '#211E2E',
-        950: '#1B1726',
+        200: '#E4DDF4',
+        250: '#D4CEE8',
+        300: '#BBB2D2',
+        400: '#958CB0',
+        500: '#6B6386',
+        600: '#4F4867',
+        700: '#3D3754',
+        800: '#2F2A42',
+        900: '#231F31',
+        950: '#181521',
     },
     info: {
         50: '#F0F9FF',
-        100: '#EFF6FF',
-        150: '#DBEAFE',
-        200: '#93C5FD',
-        250: '#4DA3FF',
-        300: '#7BBCFF',
-        400: '#3399FF',
-        500: '#0EA5E9',
-        600: '#0284C7',
-        700: '#0265c7',
-        800: '#023ac7',
-        900: '#002B55',
-        950: '#102A43',
+        100: '#E0F2FE',
+        150: '#BAE6FD',
+        200: '#7DD3FC',
+        250: '#38BDF8',
+        300: '#0EA5E9',
+        400: '#0284C7',
+        500: '#0369A1',
+        600: '#075985',
+        700: '#0C4A6E',
+        800: '#082F49',
+        900: '#0B2538',
+        950: '#071927',
     },
     success: {
         50: '#ECFDF5',
         100: '#D1FAE5',
         200: '#A7F3D0',
-        300: '#9AFFB8',
-        400: '#4ADE80',
-        500: '#00B956',
-        600: '#22C55E',
-        700: '#008F6A',
-        800: '#00785A',
-        900: '#166534',
-        950: '#0F2F26',
+        300: '#6EE7B7',
+        400: '#34D399',
+        500: '#10B981',
+        600: '#059669',
+        700: '#047857',
+        800: '#065F46',
+        900: '#064E3B',
+        950: '#022C22',
     },
     error: {
-        50: '#FEF2F2',
-        100: '#FFF1F2',
-        200: '#FDA4AF',
-        300: '#FF8A8A',
+        50: '#FFF1F2',
+        100: '#FFE4E6',
+        200: '#FECDD3',
+        300: '#FDA4AF',
         400: '#FB7185',
         500: '#F43F5E',
         600: '#E11D48',
-        700: '#DC2626',
-        800: '#B91C1C',
-        900: '#9F1239',
+        700: '#BE123C',
+        800: '#9F1239',
+        900: '#881337',
         950: '#4C0519',
     },
     warning: {
-        50: '#FFF7ED',
-        100: '#FFFBEB',
-        200: '#FEF3C7',
+        50: '#FFFBEB',
+        100: '#FEF3C7',
+        200: '#FDE68A',
         300: '#FCD34D',
-        400: '#FFFF99',
-        500: '#FFFF00',
-        600: '#FFEA00',
-        700: '#C05621',
-        800: '#A74308',
-        900: '#92400E',
-        950: '#3A2412',
+        400: '#FBBF24',
+        500: '#F59E0B',
+        600: '#D97706',
+        700: '#B45309',
+        800: '#92400E',
+        900: '#78350F',
+        950: '#451A03',
     },
     gray: {
         50: '#F9FAFB',

package/dist/semantic/selection.d.ts

@@ -1,5 +1,5 @@
 export declare const selection: {
-    readonly background: "#5B4BEA";
+    readonly background: "#5037C8";
     readonly foreground: "#FFFFFF";
 };
 //# sourceMappingURL=selection.d.ts.map

package/dist/tokens/radius.d.ts

@@ -1,8 +1,9 @@
 export declare const radius: {
-    readonly sm: 4;
-    readonly md: 8;
-    readonly lg: 12;
-    readonly xl: 16;
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 20;
     readonly full: 999;
 };
 //# sourceMappingURL=radius.d.ts.map

package/dist/tokens/radius.d.ts.map

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

package/dist/tokens/radius.js

@@ -1,7 +1,8 @@
 export const radius = {
-    sm: 4,
-    md: 8,
-    lg: 12,
-    xl: 16,
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 20,
     full: 999,
 };

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.20.0",
+  "version": "2.22.0",
   "description": "Design tokens for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",