@vellira-ui/tokens 2.23.0 → 2.25.0

package/dist/highContrast/semantic/action.js

@@ -31,17 +31,17 @@ export const action = {
     secondary: {
         default: {
             bg: colors.secondary[400],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.secondary[400],
         },
         hover: {
             bg: colors.secondary[300],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.secondary[300],
         },
         active: {
             bg: colors.secondary[200],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.secondary[200],
         },
         muted: {
@@ -51,24 +51,24 @@ export const action = {
         },
         subtle: {
             bg: colors.secondary[200],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.secondary[200],
         },
     },
     close: {
         default: {
             bg: colors.mono[50],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.mono[50],
         },
         hover: {
             bg: colors.gray[300],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.gray[300],
         },
         active: {
             bg: colors.gray[400],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.gray[400],
         },
     },

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

@@ -1,14 +1,19 @@
 export declare const control: {
     readonly default: {
-        readonly bg: "#000000";
+        readonly bg: "#1F2937";
         readonly fg: "#FFFFFF";
         readonly border: "#4B5563";
     };
     readonly hover: {
         readonly bg: "#111827";
-        readonly fg: "#000000";
+        readonly fg: "#B8A8FF";
         readonly border: "#7C5CFF";
     };
+    readonly active: {
+        readonly bg: "#E9E6FF";
+        readonly fg: "#342580";
+        readonly border: "#402C9F";
+    };
     readonly radioHover: {
         readonly bg: "#111827";
         readonly fg: "#B8A8FF";
@@ -16,18 +21,18 @@ export declare const control: {
     };
     readonly selected: {
         readonly default: {
-            readonly bg: "#7C5CFF";
+            readonly bg: "#9B7CFF";
             readonly fg: "#FFFFFF";
-            readonly border: "#7C5CFF";
+            readonly border: "#9B7CFF";
         };
         readonly hover: {
             readonly bg: "#0369A1";
-            readonly fg: "#000000";
+            readonly fg: "#F9FAFB";
             readonly border: "#0369A1";
         };
         readonly active: {
             readonly bg: "#402C9F";
-            readonly fg: "#000000";
+            readonly fg: "#F9FAFB";
             readonly border: "#402C9F";
         };
         readonly muted: {

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

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

package/dist/highContrast/semantic/control.js

@@ -4,15 +4,20 @@ import { surface } from './surface.js';
 import { text } from './text.js';
 export const control = {
     default: {
-        bg: surface.default,
+        bg: surface.muted,
         fg: text.primary,
         border: border.muted,
     },
     hover: {
         bg: colors.gray[900],
-        fg: text.inverse,
+        fg: text.brand,
         border: colors.primary[500],
     },
+    active: {
+        bg: colors.primary[100],
+        fg: colors.primary[900],
+        border: colors.primary[800],
+    },
     radioHover: {
         bg: colors.gray[900],
         fg: colors.primary[300],
@@ -20,9 +25,9 @@ export const control = {
     },
     selected: {
         default: {
-            bg: colors.primary[500],
+            bg: colors.primary[400],
             fg: text.primary,
-            border: colors.primary[500],
+            border: colors.primary[400],
         },
         hover: {
             bg: colors.info[500],

package/dist/highContrast/semantic/navigation.d.ts

@@ -22,7 +22,7 @@ export declare const navigation: {
         readonly fg: "#FFFFFF";
     };
     readonly optionActive: {
-        readonly bg: "#111827";
+        readonly bg: "#6B7280";
         readonly fg: "#FFFFFF";
     };
     readonly disabled: {

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

@@ -7,8 +7,8 @@ export declare const status: {
     };
     readonly error: {
         readonly fg: "#FB7185";
-        readonly bg: "#111827";
-        readonly border: "#FB7185";
+        readonly bg: "#E11D48";
+        readonly border: "#F43F5E";
         readonly strong: "#FDA4AF";
     };
     readonly warning: {

package/dist/highContrast/semantic/status.js

@@ -8,8 +8,8 @@ export const status = {
     },
     error: {
         fg: colors.error[400],
-        bg: colors.gray[900],
-        border: colors.error[400],
+        bg: colors.error[600],
+        border: colors.error[500],
         strong: colors.error[300],
     },
     warning: {

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

@@ -5,8 +5,9 @@ export declare const surface: {
     readonly elevated: "#374151";
     readonly pressed: "#111827";
     readonly danger: string;
+    readonly disabled: "#1F2937";
     readonly hover: "#1F2937";
-    readonly active: "#111827";
+    readonly active: "#6B7280";
     readonly inverse: "#FFFFFF";
 };
 //# sourceMappingURL=surface.d.ts.map

package/dist/highContrast/semantic/surface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/surface.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;;;;;;;;;;CAYV,CAAC"}
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/surface.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;;;;;;;;;;;CAaV,CAAC"}

package/dist/highContrast/semantic/surface.js

@@ -7,7 +7,8 @@ export const surface = {
     elevated: colors.gray[700],
     pressed: colors.gray[900],
     danger: withAlpha(colors.error[800], 0.5),
+    disabled: colors.gray[800],
     hover: colors.gray[800],
-    active: colors.gray[900],
+    active: colors.gray[500],
     inverse: colors.mono[50],
 };

package/dist/highContrast/semantic/text.d.ts

@@ -4,7 +4,8 @@ export declare const text: {
     readonly muted: "#E5E7EB";
     readonly disabled: "#6B7280";
     readonly subtle: "#F3F4F6";
-    readonly inverse: "#000000";
+    readonly elevated: "#9CA3AF";
+    readonly inverse: "#F9FAFB";
     readonly onInverse: "#000000";
     readonly brand: "#B8A8FF";
 };

package/dist/highContrast/semantic/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/text.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI;;;;;;;;;CAWP,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/text.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI;;;;;;;;;;CAYP,CAAC"}

package/dist/highContrast/semantic/text.js

@@ -1,12 +1,12 @@
 import { colors } from '../../primitives/colors.js';
-const inverse = colors.mono[950];
 export const text = {
     primary: colors.mono[50],
     secondary: colors.vellira[150],
     muted: colors.gray[200],
     disabled: colors.gray[500],
     subtle: colors.gray[100],
-    inverse,
-    onInverse: inverse,
+    elevated: colors.gray[400],
+    inverse: colors.mono[100],
+    onInverse: colors.mono[950],
     brand: colors.primary[300],
 };

package/dist/highContrast/theme.d.ts

@@ -42,6 +42,7 @@ export declare const highContrastTheme: {
             readonly 600: "#4F4867";
             readonly 700: "#3D3754";
             readonly 800: "#2F2A42";
+            readonly 850: "#242034";
             readonly 900: "#231F31";
             readonly 950: "#181521";
         };
@@ -191,7 +192,7 @@ export declare const highContrastTheme: {
         };
         readonly typography: {
             readonly family: {
-                readonly base: "KantumruyPro";
+                readonly base: "KantumruyPro, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
                 readonly extraLight: "KantumruyPro-ExtraLight";
                 readonly regular: "KantumruyPro-Regular";
                 readonly medium: "KantumruyPro-Medium";
@@ -212,10 +213,12 @@ export declare const highContrastTheme: {
                 readonly semibold: "700";
             };
             readonly lineHeight: {
-                readonly sm: 16;
+                readonly xs: 16;
+                readonly sm: 20;
                 readonly md: 24;
-                readonly lg: 32;
-                readonly xl: 40;
+                readonly lg: 28;
+                readonly xl: 32;
+                readonly xxl: 40;
             };
         };
         readonly zIndex: {

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

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

package/dist/index.d.ts

@@ -58,7 +58,7 @@ export declare const theme: {
         };
         readonly typography: {
             readonly family: {
-                readonly base: "KantumruyPro";
+                readonly base: "KantumruyPro, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
                 readonly extraLight: "KantumruyPro-ExtraLight";
                 readonly regular: "KantumruyPro-Regular";
                 readonly medium: "KantumruyPro-Medium";
@@ -79,10 +79,12 @@ export declare const theme: {
                 readonly semibold: "700";
             };
             readonly lineHeight: {
-                readonly sm: 16;
+                readonly xs: 16;
+                readonly sm: 20;
                 readonly md: 24;
-                readonly lg: 32;
-                readonly xl: 40;
+                readonly lg: 28;
+                readonly xl: 32;
+                readonly xxl: 40;
             };
         };
         readonly zIndex: {

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC;AAEpD,YAAY,EACV,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,SAAS,EACT,iBAAiB,EACjB,UAAU,EACV,iBAAiB,EACjB,oBAAoB,EACpB,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,sBAAsB,EACtB,qBAAqB,EACrB,YAAY,EACZ,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,EACrB,UAAU,EACV,UAAU,GACX,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIR,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC;AAEpD,YAAY,EACV,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,SAAS,EACT,iBAAiB,EACjB,UAAU,EACV,iBAAiB,EACjB,oBAAoB,EACpB,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,sBAAsB,EACtB,qBAAqB,EACrB,YAAY,EACZ,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,EACrB,UAAU,EACV,UAAU,GACX,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIR,CAAC"}

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

@@ -6,23 +6,23 @@ export declare const checkbox: {
     };
     readonly hover: {
         readonly bg: "#F4F3FF";
-        readonly fg: "#342580";
+        readonly fg: "#5037C8";
         readonly border: "#5037C8";
     };
     readonly checked: {
         readonly default: {
-            readonly bg: "#5037C8";
+            readonly bg: "#6346E8";
             readonly fg: "#FFFFFF";
-            readonly border: "#5037C8";
+            readonly border: "#6346E8";
         };
         readonly hover: {
             readonly bg: "#402C9F";
-            readonly fg: "#FFFFFF";
+            readonly fg: "#5037C8";
             readonly border: "#402C9F";
         };
         readonly pressed: {
             readonly bg: "#21164F";
-            readonly fg: "#FFFFFF";
+            readonly fg: "#0F0F0F";
             readonly border: "#21164F";
         };
     };

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

@@ -3,7 +3,7 @@ export declare const input: {
         readonly bg: "transparent";
         readonly fg: "#4F4867";
         readonly border: "#BBB2D2";
-        readonly placeholder: "#958CB0";
+        readonly placeholder: "#6B6386";
         readonly icon: "#9B7CFF";
     };
     readonly hover: {
@@ -51,6 +51,7 @@ export declare const input: {
         readonly danger: "#E11D48";
         readonly muted: "#6B6386";
         readonly inverse: "#1A1A1A";
+        readonly brand: "#9B7CFF";
     };
     readonly clearButton: {
         readonly fg: "#E11D48";

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":"AAQA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqER,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/light/components/input.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsER,CAAC"}

package/dist/light/components/input.js

@@ -10,7 +10,7 @@ export const input = {
         bg: 'transparent',
         fg: text.primary,
         border: border.default,
-        placeholder: text.muted,
+        placeholder: text.secondary,
         icon: icons.brand,
     },
     hover: {
@@ -58,6 +58,7 @@ export const input = {
         danger: icons.danger,
         muted: icons.muted,
         inverse: icons.inverse,
+        brand: icons.brand,
     },
     clearButton: {
         fg: status.error.fg,

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

@@ -6,14 +6,19 @@ export declare const radio: {
     };
     readonly hover: {
         readonly bg: "#F4F3FF";
-        readonly fg: "#342580";
+        readonly fg: "#5037C8";
         readonly border: "#5037C8";
     };
+    readonly pressed: {
+        readonly bg: "#E9E6FF";
+        readonly fg: "#342580";
+        readonly border: "#402C9F";
+    };
     readonly checked: {
         readonly default: {
             readonly fg: "#5037C8";
-            readonly bg: "#5037C8";
-            readonly border: "#5037C8";
+            readonly bg: "#6346E8";
+            readonly border: "#6346E8";
         };
         readonly hover: {
             readonly fg: "#5037C8";
@@ -21,13 +26,24 @@ export declare const radio: {
             readonly border: "#402C9F";
         };
         readonly pressed: {
+            readonly fg: "#5037C8";
             readonly bg: "#21164F";
-            readonly fg: "#FFFFFF";
             readonly border: "#21164F";
         };
+        readonly disabled: {
+            readonly bg: "#FFFFFF";
+            readonly fg: "#9CA3AF";
+            readonly border: "#BBB2D2";
+        };
+    };
+    readonly invalid: {
+        readonly bg: "#F4F1FB";
+        readonly fg: "#0F0F0F";
+        readonly border: "#E11D48";
     };
     readonly focus: {
         readonly ring: "#5037C8";
+        readonly border: "#5037C8";
     };
     readonly disabled: {
         readonly bg: "#FFFFFF";

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

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

package/dist/light/components/radio.js

@@ -1,6 +1,7 @@
 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 radio = {
@@ -10,6 +11,7 @@ export const radio = {
         border: border.default,
     },
     hover: control.hover,
+    pressed: control.active,
     checked: {
         default: {
             ...control.selected.default,
@@ -19,10 +21,24 @@ export const radio = {
             ...control.selected.hover,
             fg: text.brand,
         },
-        pressed: control.selected.active,
+        pressed: {
+            ...control.selected.active,
+            fg: text.brand,
+        },
+        disabled: {
+            bg: surface.subtle,
+            fg: text.disabled,
+            border: border.default,
+        },
+    },
+    invalid: {
+        bg: surface.default,
+        fg: text.inverse,
+        border: status.error.border,
     },
     focus: {
         ring: focus.ring,
+        border: border.focus,
     },
     disabled: {
         bg: surface.subtle,

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

@@ -1,13 +1,13 @@
 export declare const select: {
     readonly trigger: {
         readonly default: {
-            readonly bg: "#F4F1FB";
+            readonly bg: "#FFFFFF";
             readonly fg: "#1A1A1A";
             readonly border: "#BBB2D2";
         };
         readonly hover: {
             readonly bg: "#F4F3FF";
-            readonly fg: "#342580";
+            readonly fg: "#5037C8";
             readonly border: "#5037C8";
         };
         readonly focus: {
@@ -17,9 +17,9 @@ export declare const select: {
             readonly ring: "#5037C8";
         };
         readonly disabled: {
-            readonly bg: "#FFFFFF";
+            readonly bg: "#F4F1FB";
             readonly fg: "#9CA3AF";
-            readonly border: "#EEE8FA";
+            readonly border: "#E4DDF4";
         };
         readonly placeholder: {
             readonly fg: "#6B6386";
@@ -50,7 +50,7 @@ export declare const select: {
             readonly fg: "#342580";
         };
         readonly selected: {
-            readonly bg: "#5037C8";
+            readonly bg: "#6346E8";
             readonly fg: "#FFFFFF";
         };
         readonly disabled: {

package/dist/light/components/select.js

@@ -8,7 +8,7 @@ import { text } from '../semantic/text.js';
 export const select = {
     trigger: {
         default: {
-            bg: surface.default,
+            bg: surface.subtle,
             fg: text.subtle,
             border: border.default,
         },
@@ -20,9 +20,9 @@ export const select = {
             ring: focus.ring,
         },
         disabled: {
-            bg: surface.subtle,
+            bg: surface.disabled,
             fg: text.disabled,
-            border: border.muted,
+            border: border.disabled,
         },
         placeholder: {
             fg: text.secondary,

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

@@ -40,7 +40,7 @@ export declare const tabs: {
         };
         readonly active: {
             readonly bg: "#5037C8";
-            readonly fg: "#FFFFFF";
+            readonly fg: "#0F0F0F";
             readonly border: "#7C5CFF";
         };
         readonly disabled: {

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

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

package/dist/light/semantic/action.js

@@ -4,22 +4,22 @@ export const action = {
     primary: {
         default: {
             bg: colors.primary[600],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.primary[600],
         },
         hover: {
             bg: colors.primary[700],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.primary[700],
         },
         active: {
             bg: colors.primary[800],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.primary[800],
         },
         muted: {
             bg: colors.primary[500],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.primary[500],
         },
         subtle: {
@@ -31,71 +31,71 @@ export const action = {
     secondary: {
         default: {
             bg: colors.secondary[700],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.secondary[700],
         },
         hover: {
             bg: colors.secondary[800],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.secondary[800],
         },
         active: {
             bg: colors.secondary[900],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.secondary[900],
         },
         muted: {
             bg: colors.secondary[500],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.secondary[500],
         },
         subtle: {
             bg: colors.secondary[50],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.secondary[700],
         },
     },
     close: {
         default: {
             bg: colors.grayBlue[200],
-            fg: text.onInverse,
+            fg: text.inverse,
             border: colors.grayBlue[200],
         },
         hover: {
             bg: colors.grayBlue[300],
-            fg: text.onInverse,
+            fg: text.inverse,
             border: colors.grayBlue[300],
         },
         active: {
             bg: colors.grayBlue[400],
-            fg: text.onInverse,
+            fg: text.inverse,
             border: colors.grayBlue[400],
         },
         muted: {
             bg: colors.grayBlue[600],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.grayBlue[600],
         },
         subtle: {
             bg: colors.grayBlue[500],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.grayBlue[500],
         },
     },
     danger: {
         default: {
             bg: colors.error[700],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.error[700],
         },
         hover: {
             bg: colors.error[800],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.error[800],
         },
         active: {
             bg: colors.error[900],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.error[900],
         },
         subtle: {