@vellira-ui/tokens 2.19.6 → 2.20.0

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

@@ -1,59 +1,220 @@
 export declare const button: {
     readonly primary: {
-        readonly default: {
-            readonly bg: "#7C6CF2";
-            readonly fg: "#FFFFFF";
-            readonly border: "#7C6CF2";
+        readonly solid: {
+            readonly default: {
+                readonly bg: "#6D5BD0";
+                readonly fg: "#FFFFFF";
+                readonly border: "#6D5BD0";
+            };
+            readonly hover: {
+                readonly bg: "#5B4BEA";
+                readonly fg: "#FFFFFF";
+                readonly border: "#5B4BEA";
+            };
+            readonly pressed: {
+                readonly bg: "#6D5BD0";
+                readonly fg: "#FFFFFF";
+                readonly border: "#6D5BD0";
+            };
         };
-        readonly hover: {
-            readonly bg: "#6D5BD0";
-            readonly fg: "#FFFFFF";
-            readonly border: "#6D5BD0";
+        readonly outline: {
+            readonly default: {
+                readonly fg: "#6D5BD0";
+                readonly border: "#6D5BD0";
+                readonly bg: string;
+            };
+            readonly hover: {
+                readonly bg: "#111827";
+                readonly fg: "#5B4BEA";
+                readonly border: "#5B4BEA";
+            };
+            readonly pressed: {
+                readonly bg: "#111827";
+                readonly fg: "#6D5BD0";
+                readonly border: "#6D5BD0";
+            };
         };
-        readonly pressed: {
-            readonly bg: "#6D5BD0";
-            readonly fg: "#FFFFFF";
-            readonly border: "#6D5BD0";
+        readonly ghost: {
+            readonly default: {
+                readonly fg: "#6D5BD0";
+                readonly border: "transparent";
+                readonly bg: string;
+            };
+            readonly hover: {
+                readonly bg: "#111827";
+                readonly fg: "#5B4BEA";
+                readonly border: "transparent";
+            };
+            readonly pressed: {
+                readonly bg: "#111827";
+                readonly fg: "#6D5BD0";
+                readonly border: "transparent";
+            };
         };
     };
     readonly secondary: {
-        readonly default: {
-            readonly bg: "#FFFFFF";
-            readonly fg: "#000000";
-            readonly border: "#FFFFFF";
+        readonly solid: {
+            readonly default: {
+                readonly bg: "#0265c7";
+                readonly fg: "#FFFFFF";
+                readonly border: "#0265c7";
+            };
+            readonly hover: {
+                readonly bg: "#023ac7";
+                readonly fg: "#FFFFFF";
+                readonly border: "#023ac7";
+            };
+            readonly pressed: {
+                readonly bg: "#0265c7";
+                readonly fg: "#FFFFFF";
+                readonly border: "#0265c7";
+            };
         };
-        readonly hover: {
-            readonly bg: "#E5E7EB";
-            readonly fg: "#000000";
-            readonly border: "#E5E7EB";
+        readonly outline: {
+            readonly default: {
+                readonly fg: "#0265c7";
+                readonly border: "#0265c7";
+                readonly bg: string;
+            };
+            readonly hover: {
+                readonly bg: "#1F2937";
+                readonly fg: "#023ac7";
+                readonly border: "#023ac7";
+            };
+            readonly pressed: {
+                readonly bg: "#111827";
+                readonly fg: "#0265c7";
+                readonly border: "#0265c7";
+            };
         };
-        readonly pressed: {
-            readonly bg: "#9CA3AF";
-            readonly fg: "#000000";
-            readonly border: "#9CA3AF";
+        readonly ghost: {
+            readonly default: {
+                readonly fg: "#0265c7";
+                readonly border: "transparent";
+                readonly bg: string;
+            };
+            readonly hover: {
+                readonly bg: "#1F2937";
+                readonly fg: "#023ac7";
+                readonly border: "transparent";
+            };
+            readonly pressed: {
+                readonly bg: "#111827";
+                readonly fg: "#0265c7";
+                readonly border: "transparent";
+            };
+        };
+    };
+    readonly close: {
+        readonly solid: {
+            readonly default: {
+                readonly bg: "#FFFFFF";
+                readonly fg: "#000000";
+                readonly border: "#FFFFFF";
+            };
+            readonly hover: {
+                readonly bg: "#D1D5DB";
+                readonly fg: "#000000";
+                readonly border: "#D1D5DB";
+            };
+            readonly pressed: {
+                readonly bg: "#9CA3AF";
+                readonly fg: "#000000";
+                readonly border: "#9CA3AF";
+            };
+        };
+        readonly outline: {
+            readonly default: {
+                readonly fg: "#FFFFFF";
+                readonly border: "#FFFFFF";
+                readonly bg: string;
+            };
+            readonly hover: {
+                readonly bg: "#1F2937";
+                readonly fg: "#D1D5DB";
+                readonly border: "#D1D5DB";
+            };
+            readonly pressed: {
+                readonly bg: "#111827";
+                readonly fg: "#9CA3AF";
+                readonly border: "#9CA3AF";
+            };
+        };
+        readonly ghost: {
+            readonly default: {
+                readonly fg: "#FFFFFF";
+                readonly border: "transparent";
+                readonly bg: string;
+            };
+            readonly hover: {
+                readonly bg: "#1F2937";
+                readonly fg: "#D1D5DB";
+                readonly border: "transparent";
+            };
+            readonly pressed: {
+                readonly bg: "#111827";
+                readonly fg: "#9CA3AF";
+                readonly border: "transparent";
+            };
         };
     };
     readonly danger: {
-        readonly default: {
-            readonly bg: "#FB7185";
-            readonly fg: "#000000";
-            readonly border: "#FB7185";
+        readonly solid: {
+            readonly default: {
+                readonly bg: "#E11D48";
+                readonly fg: "#FFFFFF";
+                readonly border: "#E11D48";
+            };
+            readonly hover: {
+                readonly bg: "#F43F5E";
+                readonly fg: "#FFFFFF";
+                readonly border: "#F43F5E";
+            };
+            readonly pressed: {
+                readonly bg: "#B91C1C";
+                readonly fg: "#FFFFFF";
+                readonly border: "#B91C1C";
+            };
         };
-        readonly hover: {
-            readonly bg: "#FF8A8A";
-            readonly fg: "#000000";
-            readonly border: "#FF8A8A";
+        readonly outline: {
+            readonly default: {
+                readonly fg: "#E11D48";
+                readonly border: "#E11D48";
+                readonly bg: string;
+            };
+            readonly hover: {
+                readonly bg: "#111827";
+                readonly fg: "#F43F5E";
+                readonly border: "#F43F5E";
+            };
+            readonly pressed: {
+                readonly bg: "#111827";
+                readonly fg: "#B91C1C";
+                readonly border: "#B91C1C";
+            };
         };
-        readonly pressed: {
-            readonly bg: "#B91C1C";
-            readonly fg: "#000000";
-            readonly border: "#B91C1C";
+        readonly ghost: {
+            readonly default: {
+                readonly fg: "#E11D48";
+                readonly border: "transparent";
+                readonly bg: string;
+            };
+            readonly hover: {
+                readonly bg: "#111827";
+                readonly fg: "#F43F5E";
+                readonly border: "transparent";
+            };
+            readonly pressed: {
+                readonly bg: "#111827";
+                readonly fg: "#B91C1C";
+                readonly border: "transparent";
+            };
         };
     };
     readonly disabled: {
         readonly bg: "#1F2937";
         readonly fg: "#6B7280";
-        readonly border: "#4B5563";
+        readonly border: "#FFFFFF";
     };
 };
 //# sourceMappingURL=button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/button.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBT,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/button.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8KT,CAAC"}

package/dist/highContrast/components/button.js

@@ -2,25 +2,177 @@ import { action } from '../semantic/action.js';
 import { border } from '../semantic/border.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
+const transparent = {
+    bg: 'transparent',
+};
 export const button = {
     primary: {
-        default: action.primary.default,
-        hover: action.primary.hover,
-        pressed: action.primary.active,
+        solid: {
+            default: action.primary.default,
+            hover: action.primary.hover,
+            pressed: action.primary.active,
+        },
+        outline: {
+            default: {
+                ...transparent,
+                fg: action.primary.default.bg,
+                border: action.primary.default.border,
+            },
+            hover: {
+                bg: action.primary.subtle.bg,
+                fg: action.primary.hover.bg,
+                border: action.primary.hover.border,
+            },
+            pressed: {
+                bg: action.primary.subtle.bg,
+                fg: action.primary.active.bg,
+                border: action.primary.active.border,
+            },
+        },
+        ghost: {
+            default: {
+                ...transparent,
+                fg: action.primary.default.bg,
+                border: 'transparent',
+            },
+            hover: {
+                bg: action.primary.subtle.bg,
+                fg: action.primary.hover.bg,
+                border: 'transparent',
+            },
+            pressed: {
+                bg: action.primary.subtle.bg,
+                fg: action.primary.active.bg,
+                border: 'transparent',
+            },
+        },
     },
     secondary: {
-        default: action.secondary.default,
-        hover: action.secondary.hover,
-        pressed: action.secondary.active,
+        solid: {
+            default: action.secondary.default,
+            hover: action.secondary.hover,
+            pressed: action.secondary.active,
+        },
+        outline: {
+            default: {
+                ...transparent,
+                fg: action.secondary.default.bg,
+                border: action.secondary.default.border,
+            },
+            hover: {
+                bg: surface.hover,
+                fg: action.secondary.hover.bg,
+                border: action.secondary.hover.border,
+            },
+            pressed: {
+                bg: surface.pressed,
+                fg: action.secondary.active.bg,
+                border: action.secondary.active.border,
+            },
+        },
+        ghost: {
+            default: {
+                ...transparent,
+                fg: action.secondary.default.bg,
+                border: 'transparent',
+            },
+            hover: {
+                bg: surface.hover,
+                fg: action.secondary.hover.bg,
+                border: 'transparent',
+            },
+            pressed: {
+                bg: surface.pressed,
+                fg: action.secondary.active.bg,
+                border: 'transparent',
+            },
+        },
+    },
+    close: {
+        solid: {
+            default: action.close.default,
+            hover: action.close.hover,
+            pressed: action.close.active,
+        },
+        outline: {
+            default: {
+                ...transparent,
+                fg: action.close.default.bg,
+                border: action.close.default.border,
+            },
+            hover: {
+                bg: surface.hover,
+                fg: action.close.hover.bg,
+                border: action.close.hover.border,
+            },
+            pressed: {
+                bg: surface.pressed,
+                fg: action.close.active.bg,
+                border: action.close.active.border,
+            },
+        },
+        ghost: {
+            default: {
+                ...transparent,
+                fg: action.close.default.bg,
+                border: 'transparent',
+            },
+            hover: {
+                bg: surface.hover,
+                fg: action.close.hover.bg,
+                border: 'transparent',
+            },
+            pressed: {
+                bg: surface.pressed,
+                fg: action.close.active.bg,
+                border: 'transparent',
+            },
+        },
     },
     danger: {
-        default: action.danger.default,
-        hover: action.danger.hover,
-        pressed: action.danger.active,
+        solid: {
+            default: action.danger.default,
+            hover: action.danger.hover,
+            pressed: action.danger.active,
+        },
+        outline: {
+            default: {
+                ...transparent,
+                fg: action.danger.default.bg,
+                border: action.danger.default.border,
+            },
+            hover: {
+                bg: action.danger.subtle.bg,
+                fg: action.danger.hover.bg,
+                border: action.danger.hover.border,
+            },
+            pressed: {
+                bg: action.danger.subtle.bg,
+                fg: action.danger.active.bg,
+                border: action.danger.active.border,
+            },
+        },
+        ghost: {
+            default: {
+                ...transparent,
+                fg: action.danger.default.bg,
+                border: 'transparent',
+            },
+            hover: {
+                bg: action.danger.subtle.bg,
+                fg: action.danger.hover.bg,
+                border: 'transparent',
+            },
+            pressed: {
+                bg: action.danger.subtle.bg,
+                fg: action.danger.active.bg,
+                border: 'transparent',
+            },
+        },
     },
     disabled: {
         bg: surface.subtle,
         fg: text.disabled,
-        border: border.muted,
+        border: border.default,
     },
 };

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

@@ -16,9 +16,9 @@ export declare const checkbox: {
             readonly border: "#7C6CF2";
         };
         readonly hover: {
-            readonly bg: "#7BBCFF";
+            readonly bg: "#0EA5E9";
             readonly fg: "#000000";
-            readonly border: "#7BBCFF";
+            readonly border: "#0EA5E9";
         };
         readonly pressed: {
             readonly bg: "#4936D9";

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

@@ -19,7 +19,7 @@ export declare const formField: {
             readonly fg: "#FFFF00";
         };
         readonly info: {
-            readonly fg: "#4DA3FF";
+            readonly fg: "#3399FF";
         };
     };
     readonly requiredMark: {

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

@@ -21,7 +21,7 @@ export declare const menu: {
         };
         readonly danger: {
             readonly default: {
-                readonly fg: "#FB7185";
+                readonly fg: "#E11D48";
             };
             readonly hover: {
                 readonly bg: "#111827";

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

@@ -17,8 +17,8 @@ export declare const radio: {
         };
         readonly hover: {
             readonly fg: "#FFFFFF";
-            readonly bg: "#7BBCFF";
-            readonly border: "#7BBCFF";
+            readonly bg: "#0EA5E9";
+            readonly border: "#0EA5E9";
         };
         readonly pressed: {
             readonly fg: "#FFFFFF";

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

@@ -16,7 +16,7 @@ export declare const tabs: {
         readonly active: {
             readonly bg: "transparent";
             readonly fg: "#A78BFA";
-            readonly border: "#7C6CF2";
+            readonly border: "#6D5BD0";
         };
         readonly focus: {
             readonly ring: "#FFFF00";

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

@@ -1,14 +1,14 @@
 export declare const action: {
     readonly primary: {
         readonly default: {
-            readonly bg: "#7C6CF2";
+            readonly bg: "#6D5BD0";
             readonly fg: "#FFFFFF";
-            readonly border: "#7C6CF2";
+            readonly border: "#6D5BD0";
         };
         readonly hover: {
-            readonly bg: "#6D5BD0";
+            readonly bg: "#5B4BEA";
             readonly fg: "#FFFFFF";
-            readonly border: "#6D5BD0";
+            readonly border: "#5B4BEA";
         };
         readonly active: {
             readonly bg: "#6D5BD0";
@@ -27,15 +27,32 @@ export declare const action: {
         };
     };
     readonly secondary: {
+        readonly default: {
+            readonly bg: "#0265c7";
+            readonly fg: "#FFFFFF";
+            readonly border: "#0265c7";
+        };
+        readonly hover: {
+            readonly bg: "#023ac7";
+            readonly fg: "#FFFFFF";
+            readonly border: "#023ac7";
+        };
+        readonly active: {
+            readonly bg: "#0265c7";
+            readonly fg: "#FFFFFF";
+            readonly border: "#0265c7";
+        };
+    };
+    readonly close: {
         readonly default: {
             readonly bg: "#FFFFFF";
             readonly fg: "#000000";
             readonly border: "#FFFFFF";
         };
         readonly hover: {
-            readonly bg: "#E5E7EB";
+            readonly bg: "#D1D5DB";
             readonly fg: "#000000";
-            readonly border: "#E5E7EB";
+            readonly border: "#D1D5DB";
         };
         readonly active: {
             readonly bg: "#9CA3AF";
@@ -45,18 +62,18 @@ export declare const action: {
     };
     readonly danger: {
         readonly default: {
-            readonly bg: "#FB7185";
-            readonly fg: "#000000";
-            readonly border: "#FB7185";
+            readonly bg: "#E11D48";
+            readonly fg: "#FFFFFF";
+            readonly border: "#E11D48";
         };
         readonly hover: {
-            readonly bg: "#FF8A8A";
-            readonly fg: "#000000";
-            readonly border: "#FF8A8A";
+            readonly bg: "#F43F5E";
+            readonly fg: "#FFFFFF";
+            readonly border: "#F43F5E";
         };
         readonly active: {
             readonly bg: "#B91C1C";
-            readonly fg: "#000000";
+            readonly fg: "#FFFFFF";
             readonly border: "#B91C1C";
         };
         readonly subtle: {

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

@@ -1 +1 @@
-{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/action.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwET,CAAC"}
+{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/action.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FT,CAAC"}

package/dist/highContrast/semantic/action.js

@@ -3,14 +3,14 @@ import { text } from './text.js';
 export const action = {
     primary: {
         default: {
-            bg: colors.primary[500],
+            bg: colors.primary[600],
             fg: text.primary,
-            border: colors.primary[500],
+            border: colors.primary[600],
         },
         hover: {
-            bg: colors.primary[600],
+            bg: colors.primary[700],
             fg: text.primary,
-            border: colors.primary[600],
+            border: colors.primary[700],
         },
         active: {
             bg: colors.primary[600],
@@ -29,15 +29,32 @@ export const action = {
         },
     },
     secondary: {
+        default: {
+            bg: colors.info[700],
+            fg: text.primary,
+            border: colors.info[700],
+        },
+        hover: {
+            bg: colors.info[800],
+            fg: text.primary,
+            border: colors.info[800],
+        },
+        active: {
+            bg: colors.info[700],
+            fg: text.primary,
+            border: colors.info[700],
+        },
+    },
+    close: {
         default: {
             bg: colors.mono[50],
             fg: text.inverse,
             border: colors.mono[50],
         },
         hover: {
-            bg: colors.gray[200],
+            bg: colors.gray[300],
             fg: text.inverse,
-            border: colors.gray[200],
+            border: colors.gray[300],
         },
         active: {
             bg: colors.gray[400],
@@ -47,18 +64,18 @@ export const action = {
     },
     danger: {
         default: {
-            bg: colors.error[400],
-            fg: text.inverse,
-            border: colors.error[400],
+            bg: colors.error[600],
+            fg: text.primary,
+            border: colors.error[600],
         },
         hover: {
-            bg: colors.error[300],
-            fg: text.inverse,
-            border: colors.error[300],
+            bg: colors.error[500],
+            fg: text.primary,
+            border: colors.error[500],
         },
         active: {
             bg: colors.error[800],
-            fg: text.inverse,
+            fg: text.primary,
             border: colors.error[800],
         },
         subtle: {

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

@@ -16,9 +16,9 @@ export declare const control: {
             readonly border: "#7C6CF2";
         };
         readonly hover: {
-            readonly bg: "#7BBCFF";
+            readonly bg: "#0EA5E9";
             readonly fg: "#000000";
-            readonly border: "#7BBCFF";
+            readonly border: "#0EA5E9";
         };
         readonly active: {
             readonly bg: "#4936D9";