@vellira-ui/tokens 2.19.6 → 2.20.0

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

@@ -1,58 +1,219 @@
 export declare const button: {
     readonly primary: {
-        readonly default: {
-            readonly bg: "#6D5BD0";
-            readonly fg: "#FFFFFF";
-            readonly border: "#6D5BD0";
+        readonly solid: {
+            readonly default: {
+                readonly bg: "#6D5BD0";
+                readonly fg: "#FFFFFF";
+                readonly border: "#6D5BD0";
+            };
+            readonly hover: {
+                readonly bg: "#8B7CF6";
+                readonly fg: "#FFFFFF";
+                readonly border: "#8B7CF6";
+            };
+            readonly pressed: {
+                readonly bg: "#6D5BD0";
+                readonly fg: "#FFFFFF";
+                readonly border: "#6D5BD0";
+            };
         };
-        readonly hover: {
-            readonly bg: "#5B4BEA";
-            readonly fg: "#FFFFFF";
-            readonly border: "#5B4BEA";
+        readonly outline: {
+            readonly default: {
+                readonly fg: "#A78BFA";
+                readonly border: "#A78BFA";
+                readonly bg: string;
+            };
+            readonly hover: {
+                readonly fg: "#8B7CF6";
+                readonly border: "#8B7CF6";
+                readonly bg: string;
+            };
+            readonly pressed: {
+                readonly fg: "#6D5BD0";
+                readonly border: "#6D5BD0";
+                readonly bg: string;
+            };
         };
-        readonly pressed: {
-            readonly bg: "#4936D9";
-            readonly fg: "#FFFFFF";
-            readonly border: "#4936D9";
+        readonly ghost: {
+            readonly default: {
+                readonly fg: "#A78BFA";
+                readonly border: "transparent";
+                readonly bg: string;
+            };
+            readonly hover: {
+                readonly fg: "#8B7CF6";
+                readonly border: "transparent";
+                readonly bg: string;
+            };
+            readonly pressed: {
+                readonly fg: "#6D5BD0";
+                readonly border: "transparent";
+                readonly bg: string;
+            };
         };
     };
     readonly secondary: {
-        readonly default: {
-            readonly bg: "#5F64B8";
-            readonly fg: "#FFFFFF";
-            readonly border: "#5F64B8";
+        readonly solid: {
+            readonly default: {
+                readonly bg: "#9EA2EA";
+                readonly fg: "#000000";
+                readonly border: "#9EA2EA";
+            };
+            readonly hover: {
+                readonly bg: "#7B80D8";
+                readonly fg: "#000000";
+                readonly border: "#7B80D8";
+            };
+            readonly pressed: {
+                readonly bg: "#4C4F8F";
+                readonly fg: "#000000";
+                readonly border: "#4C4F8F";
+            };
         };
-        readonly hover: {
-            readonly bg: "#555AA8";
-            readonly fg: "#FFFFFF";
-            readonly border: "#555AA8";
+        readonly outline: {
+            readonly default: {
+                readonly fg: "#9EA2EA";
+                readonly border: "#9EA2EA";
+                readonly bg: string;
+            };
+            readonly hover: {
+                readonly fg: "#7B80D8";
+                readonly border: "#7B80D8";
+                readonly bg: string;
+            };
+            readonly pressed: {
+                readonly fg: "#4C4F8F";
+                readonly border: "#4C4F8F";
+                readonly bg: string;
+            };
         };
-        readonly pressed: {
-            readonly bg: "#494F95";
-            readonly fg: "#FFFFFF";
-            readonly border: "#494F95";
+        readonly ghost: {
+            readonly default: {
+                readonly fg: "#9EA2EA";
+                readonly border: "transparent";
+                readonly bg: string;
+            };
+            readonly hover: {
+                readonly fg: "#7B80D8";
+                readonly border: "transparent";
+                readonly bg: string;
+            };
+            readonly pressed: {
+                readonly fg: "#4C4F8F";
+                readonly border: "transparent";
+                readonly bg: string;
+            };
+        };
+    };
+    readonly close: {
+        readonly solid: {
+            readonly default: {
+                readonly bg: "#E8E2F3";
+                readonly fg: "#000000";
+                readonly border: "#E8E2F3";
+            };
+            readonly hover: {
+                readonly bg: "#C4D0DD";
+                readonly fg: "#000000";
+                readonly border: "#C4D0DD";
+            };
+            readonly pressed: {
+                readonly bg: "#D8E4F2";
+                readonly fg: "#000000";
+                readonly border: "#D8E4F2";
+            };
+        };
+        readonly outline: {
+            readonly default: {
+                readonly fg: "#E8E2F3";
+                readonly border: "#E8E2F3";
+                readonly bg: string;
+            };
+            readonly hover: {
+                readonly fg: "#C4D0DD";
+                readonly border: "#C4D0DD";
+                readonly bg: string;
+            };
+            readonly pressed: {
+                readonly fg: "#D8E4F2";
+                readonly border: "#D8E4F2";
+                readonly bg: string;
+            };
+        };
+        readonly ghost: {
+            readonly default: {
+                readonly fg: "#E8E2F3";
+                readonly border: "transparent";
+                readonly bg: string;
+            };
+            readonly hover: {
+                readonly fg: "#C4D0DD";
+                readonly border: "transparent";
+                readonly bg: string;
+            };
+            readonly pressed: {
+                readonly fg: "#D8E4F2";
+                readonly border: "transparent";
+                readonly bg: string;
+            };
         };
     };
     readonly danger: {
-        readonly default: {
-            readonly bg: "#E11D48";
-            readonly fg: "#FFFFFF";
-            readonly border: "#E11D48";
+        readonly solid: {
+            readonly default: {
+                readonly bg: "#E11D48";
+                readonly fg: "#FFFFFF";
+                readonly border: "#E11D48";
+            };
+            readonly hover: {
+                readonly bg: "#DC2626";
+                readonly fg: "#FFFFFF";
+                readonly border: "#DC2626";
+            };
+            readonly pressed: {
+                readonly bg: "#B91C1C";
+                readonly fg: "#FFFFFF";
+                readonly border: "#B91C1C";
+            };
         };
-        readonly hover: {
-            readonly bg: "#DC2626";
-            readonly fg: "#FFFFFF";
-            readonly border: "#DC2626";
+        readonly outline: {
+            readonly default: {
+                readonly fg: "#FB7185";
+                readonly border: "#FB7185";
+                readonly bg: string;
+            };
+            readonly hover: {
+                readonly fg: "#DC2626";
+                readonly border: "#DC2626";
+                readonly bg: string;
+            };
+            readonly pressed: {
+                readonly fg: "#B91C1C";
+                readonly border: "#B91C1C";
+                readonly bg: string;
+            };
         };
-        readonly pressed: {
-            readonly bg: "#B91C1C";
-            readonly fg: "#FFFFFF";
-            readonly border: "#B91C1C";
+        readonly ghost: {
+            readonly default: {
+                readonly fg: "#FB7185";
+                readonly border: "transparent";
+                readonly bg: string;
+            };
+            readonly hover: {
+                readonly fg: "#DC2626";
+                readonly border: "transparent";
+                readonly bg: string;
+            };
+            readonly pressed: {
+                readonly fg: "#B91C1C";
+                readonly border: "transparent";
+                readonly bg: string;
+            };
         };
     };
     readonly disabled: {
         readonly bg: "#29253A";
-        readonly fg: "#413957";
+        readonly fg: "#746F86";
         readonly border: "#3A334D";
     };
 };

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

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

package/dist/dark/components/button.js

@@ -2,21 +2,173 @@ 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.muted.bg,
+                border: action.primary.muted.border,
+            },
+            hover: {
+                ...transparent,
+                fg: action.primary.hover.bg,
+                border: action.primary.hover.border,
+            },
+            pressed: {
+                ...transparent,
+                fg: action.primary.active.bg,
+                border: action.primary.active.border,
+            },
+        },
+        ghost: {
+            default: {
+                ...transparent,
+                fg: action.primary.muted.bg,
+                border: 'transparent',
+            },
+            hover: {
+                ...transparent,
+                fg: action.primary.hover.bg,
+                border: 'transparent',
+            },
+            pressed: {
+                ...transparent,
+                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: {
+                ...transparent,
+                fg: action.secondary.hover.bg,
+                border: action.secondary.hover.border,
+            },
+            pressed: {
+                ...transparent,
+                fg: action.secondary.active.bg,
+                border: action.secondary.active.border,
+            },
+        },
+        ghost: {
+            default: {
+                ...transparent,
+                fg: action.secondary.default.bg,
+                border: 'transparent',
+            },
+            hover: {
+                ...transparent,
+                fg: action.secondary.hover.bg,
+                border: 'transparent',
+            },
+            pressed: {
+                ...transparent,
+                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: {
+                ...transparent,
+                fg: action.close.hover.bg,
+                border: action.close.hover.border,
+            },
+            pressed: {
+                ...transparent,
+                fg: action.close.active.bg,
+                border: action.close.active.border,
+            },
+        },
+        ghost: {
+            default: {
+                ...transparent,
+                fg: action.close.default.bg,
+                border: 'transparent',
+            },
+            hover: {
+                ...transparent,
+                fg: action.close.hover.bg,
+                border: 'transparent',
+            },
+            pressed: {
+                ...transparent,
+                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.subtle.bg,
+                border: action.danger.subtle.border,
+            },
+            hover: {
+                ...transparent,
+                fg: action.danger.hover.bg,
+                border: action.danger.hover.border,
+            },
+            pressed: {
+                ...transparent,
+                fg: action.danger.active.bg,
+                border: action.danger.active.border,
+            },
+        },
+        ghost: {
+            default: {
+                ...transparent,
+                fg: action.danger.subtle.bg,
+                border: 'transparent',
+            },
+            hover: {
+                ...transparent,
+                fg: action.danger.hover.bg,
+                border: 'transparent',
+            },
+            pressed: {
+                ...transparent,
+                fg: action.danger.active.bg,
+                border: 'transparent',
+            },
+        },
     },
     disabled: {
         bg: surface.subtle,

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

@@ -1,6 +1,6 @@
 export declare const checkbox: {
     readonly default: {
-        readonly bg: "#1B1726";
+        readonly bg: "#312C44";
         readonly fg: "#FFFFFF";
         readonly border: "#746F86";
     };
@@ -31,7 +31,7 @@ export declare const checkbox: {
     };
     readonly disabled: {
         readonly bg: "#29253A";
-        readonly fg: "#413957";
+        readonly fg: "#746F86";
         readonly border: "#3A334D";
     };
     readonly error: {

package/dist/dark/components/checkbox.js

@@ -6,7 +6,7 @@ import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 export const checkbox = {
     default: {
-        bg: surface.default,
+        bg: surface.elevated,
         fg: text.inverse,
         border: border.subtle,
     },

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

@@ -19,7 +19,7 @@ export declare const dropdown: {
         };
         readonly disabled: {
             readonly bg: "#29253A";
-            readonly fg: "#413957";
+            readonly fg: "#746F86";
             readonly border: "#3A334D";
         };
     };
@@ -47,7 +47,7 @@ export declare const dropdown: {
         };
         readonly disabled: {
             readonly bg: "transparent";
-            readonly fg: "#413957";
+            readonly fg: "#746F86";
         };
         readonly danger: {
             readonly default: {

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

@@ -19,16 +19,16 @@ export declare const formField: {
             readonly fg: "#FFFF99";
         };
         readonly info: {
-            readonly fg: "#4DA3FF";
+            readonly fg: "#3399FF";
         };
     };
     readonly requiredMark: {
         readonly fg: "#FB7185";
     };
     readonly disabled: {
-        readonly labelFg: "#413957";
-        readonly descriptionFg: "#413957";
-        readonly helperTextFg: "#413957";
+        readonly labelFg: "#746F86";
+        readonly descriptionFg: "#746F86";
+        readonly helperTextFg: "#746F86";
     };
 };
 //# sourceMappingURL=formField.d.ts.map

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

@@ -20,9 +20,9 @@ export declare const input: {
     };
     readonly disabled: {
         readonly bg: "#29253A";
-        readonly fg: "#413957";
+        readonly fg: "#746F86";
         readonly border: "#3A334D";
-        readonly placeholder: "#413957";
+        readonly placeholder: "#746F86";
     };
     readonly error: {
         readonly border: "#FF8A8A";

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

@@ -17,7 +17,7 @@ export declare const menu: {
         };
         readonly disabled: {
             readonly bg: "#29253A";
-            readonly fg: "#413957";
+            readonly fg: "#746F86";
         };
         readonly danger: {
             readonly default: {

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

@@ -24,7 +24,7 @@ export declare const modal: {
         };
         readonly disabled: {
             readonly bg: "transparent";
-            readonly fg: "#413957";
+            readonly fg: "#746F86";
         };
     };
 };

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

@@ -1,6 +1,6 @@
 export declare const radio: {
     readonly default: {
-        readonly bg: "#1B1726";
+        readonly bg: "#312C44";
         readonly fg: "#F4F1FB";
         readonly border: "#746F86";
     };
@@ -31,7 +31,7 @@ export declare const radio: {
     };
     readonly disabled: {
         readonly bg: "#29253A";
-        readonly fg: "#413957";
+        readonly fg: "#746F86";
         readonly border: "#3A334D";
     };
 };

package/dist/dark/components/radio.js

@@ -5,7 +5,7 @@ import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 export const radio = {
     default: {
-        bg: surface.default,
+        bg: surface.elevated,
         fg: text.primary,
         border: border.subtle,
     },

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

@@ -1,7 +1,7 @@
 export declare const select: {
     readonly trigger: {
         readonly default: {
-            readonly bg: "#1B1726";
+            readonly bg: "transparent";
             readonly fg: "#FFFFFF";
             readonly border: "#746F86";
         };
@@ -18,7 +18,7 @@ export declare const select: {
         };
         readonly disabled: {
             readonly bg: "#29253A";
-            readonly fg: "#413957";
+            readonly fg: "#746F86";
             readonly border: "#3A334D";
         };
         readonly placeholder: {
@@ -55,7 +55,7 @@ export declare const select: {
         };
         readonly disabled: {
             readonly bg: "transparent";
-            readonly fg: "#413957";
+            readonly fg: "#746F86";
             readonly border: "#3A334D";
         };
     };

package/dist/dark/components/select.js

@@ -7,7 +7,7 @@ import { text } from '../semantic/text.js';
 export const select = {
     trigger: {
         default: {
-            bg: surface.default,
+            bg: 'transparent',
             fg: text.subtle,
             border: border.subtle,
         },

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

@@ -23,7 +23,7 @@ export declare const tabs: {
         };
         readonly disabled: {
             readonly bg: "transparent";
-            readonly fg: "#413957";
+            readonly fg: "#746F86";
             readonly border: "transparent";
         };
     };
@@ -45,7 +45,7 @@ export declare const tabs: {
         };
         readonly disabled: {
             readonly bg: "transparent";
-            readonly fg: "#413957";
+            readonly fg: "#746F86";
             readonly border: "transparent";
         };
     };