@vellira-ui/tokens 2.20.0 → 2.22.0

package/dist/highContrast/theme.d.ts

@@ -4,100 +4,100 @@ export declare const highContrastTheme: {
     readonly name: "high-contrast";
     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 highContrastTheme: {
     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/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

@@ -10,10 +10,11 @@ export declare const theme: {
     readonly components: typeof import("./dark/components/index.js");
     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/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/button.d.ts

@@ -2,52 +2,52 @@ export declare const button: {
     readonly primary: {
         readonly solid: {
             readonly default: {
-                readonly bg: "#5B4BEA";
+                readonly bg: "#6346E8";
                 readonly fg: "#FFFFFF";
-                readonly border: "#5B4BEA";
+                readonly border: "#6346E8";
             };
             readonly hover: {
-                readonly bg: "#4936D9";
+                readonly bg: "#5037C8";
                 readonly fg: "#FFFFFF";
-                readonly border: "#4936D9";
+                readonly border: "#5037C8";
             };
             readonly pressed: {
-                readonly bg: "#3B2BBF";
+                readonly bg: "#402C9F";
                 readonly fg: "#FFFFFF";
-                readonly border: "#3B2BBF";
+                readonly border: "#402C9F";
             };
         };
         readonly outline: {
             readonly default: {
-                readonly fg: "#5B4BEA";
-                readonly border: "#5B4BEA";
+                readonly fg: "#6346E8";
+                readonly border: "#6346E8";
                 readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#EEF0FF";
-                readonly fg: "#4936D9";
-                readonly border: "#4936D9";
+                readonly bg: "#EEE8FA";
+                readonly fg: "#5037C8";
+                readonly border: "#5037C8";
             };
             readonly pressed: {
-                readonly bg: "#EEF0FF";
-                readonly fg: "#3B2BBF";
-                readonly border: "#3B2BBF";
+                readonly bg: "#E4DDF4";
+                readonly fg: "#402C9F";
+                readonly border: "#402C9F";
             };
         };
         readonly ghost: {
             readonly default: {
-                readonly fg: "#5B4BEA";
+                readonly fg: "#6346E8";
                 readonly border: "transparent";
                 readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#EEF0FF";
-                readonly fg: "#4936D9";
+                readonly bg: "#F4F3FF";
+                readonly fg: "#5037C8";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#EEF0FF";
-                readonly fg: "#3B2BBF";
+                readonly bg: "#F4F3FF";
+                readonly fg: "#402C9F";
                 readonly border: "transparent";
             };
         };
@@ -55,52 +55,52 @@ export declare const button: {
     readonly secondary: {
         readonly solid: {
             readonly default: {
-                readonly bg: "#4C4F8F";
+                readonly bg: "#0B7D95";
                 readonly fg: "#FFFFFF";
-                readonly border: "#4C4F8F";
+                readonly border: "#0B7D95";
             };
             readonly hover: {
-                readonly bg: "#190947";
+                readonly bg: "#0A6175";
                 readonly fg: "#FFFFFF";
-                readonly border: "#190947";
+                readonly border: "#0A6175";
             };
             readonly pressed: {
-                readonly bg: "#160537";
+                readonly bg: "#094C5E";
                 readonly fg: "#FFFFFF";
-                readonly border: "#160537";
+                readonly border: "#094C5E";
             };
         };
         readonly outline: {
             readonly default: {
-                readonly fg: "#4C4F8F";
-                readonly border: "#4C4F8F";
+                readonly fg: "#0B7D95";
+                readonly border: "#0B7D95";
                 readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#EEE8FA";
-                readonly fg: "#190947";
-                readonly border: "#190947";
+                readonly bg: "#D9FBFF";
+                readonly fg: "#0A6175";
+                readonly border: "#0A6175";
             };
             readonly pressed: {
-                readonly bg: "#EEE8FA";
-                readonly fg: "#160537";
-                readonly border: "#160537";
+                readonly bg: "#E4DDF4";
+                readonly fg: "#094C5E";
+                readonly border: "#094C5E";
             };
         };
         readonly ghost: {
             readonly default: {
-                readonly fg: "#4C4F8F";
+                readonly fg: "#0B7D95";
                 readonly border: "transparent";
                 readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#EEE8FA";
-                readonly fg: "#190947";
+                readonly bg: "#D9FBFF";
+                readonly fg: "#0A6175";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#EEE8FA";
-                readonly fg: "#160537";
+                readonly bg: "#E4DDF4";
+                readonly fg: "#094C5E";
                 readonly border: "transparent";
             };
         };
@@ -108,52 +108,52 @@ export declare const button: {
     readonly close: {
         readonly solid: {
             readonly default: {
-                readonly bg: "#E8E2F3";
+                readonly bg: "#D8E4F2";
                 readonly fg: "#0F0F0F";
-                readonly border: "#E8E2F3";
+                readonly border: "#D8E4F2";
             };
             readonly hover: {
-                readonly bg: "#D8D3E8";
+                readonly bg: "#C4D0DD";
                 readonly fg: "#0F0F0F";
-                readonly border: "#D8D3E8";
+                readonly border: "#C4D0DD";
             };
             readonly pressed: {
-                readonly bg: "#A8A1BA";
+                readonly bg: "#98A8BD";
                 readonly fg: "#0F0F0F";
-                readonly border: "#A8A1BA";
+                readonly border: "#98A8BD";
             };
         };
         readonly outline: {
             readonly default: {
-                readonly fg: "#E8E2F3";
-                readonly border: "#E8E2F3";
+                readonly fg: "#4B5F7A";
+                readonly border: "#4B5F7A";
                 readonly bg: string;
             };
             readonly hover: {
                 readonly bg: "#EEE8FA";
-                readonly fg: "#D8D3E8";
-                readonly border: "#D8D3E8";
+                readonly fg: "#6B7F99";
+                readonly border: "#6B7F99";
             };
             readonly pressed: {
-                readonly bg: "#EEE8FA";
-                readonly fg: "#A8A1BA";
-                readonly border: "#A8A1BA";
+                readonly bg: "#E4DDF4";
+                readonly fg: "#98A8BD";
+                readonly border: "#98A8BD";
             };
         };
         readonly ghost: {
             readonly default: {
-                readonly fg: "#E8E2F3";
+                readonly fg: "#4F4867";
                 readonly border: "transparent";
                 readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#EEE8FA";
-                readonly fg: "#D8D3E8";
+                readonly bg: "#F4F3FF";
+                readonly fg: "#4F4867";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#EEE8FA";
-                readonly fg: "#A8A1BA";
+                readonly bg: "#F4F3FF";
+                readonly fg: "#4F4867";
                 readonly border: "transparent";
             };
         };
@@ -161,52 +161,52 @@ export declare const button: {
     readonly danger: {
         readonly solid: {
             readonly default: {
-                readonly bg: "#DC2626";
+                readonly bg: "#BE123C";
                 readonly fg: "#FFFFFF";
-                readonly border: "#DC2626";
+                readonly border: "#BE123C";
             };
             readonly hover: {
-                readonly bg: "#B91C1C";
+                readonly bg: "#9F1239";
                 readonly fg: "#FFFFFF";
-                readonly border: "#B91C1C";
+                readonly border: "#9F1239";
             };
             readonly pressed: {
-                readonly bg: "#B91C1C";
+                readonly bg: "#881337";
                 readonly fg: "#FFFFFF";
-                readonly border: "#B91C1C";
+                readonly border: "#881337";
             };
         };
         readonly outline: {
             readonly default: {
-                readonly fg: "#DC2626";
-                readonly border: "#DC2626";
+                readonly fg: "#BE123C";
+                readonly border: "#BE123C";
                 readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#FEF2F2";
-                readonly fg: "#B91C1C";
-                readonly border: "#B91C1C";
+                readonly bg: "#FFE4E6";
+                readonly fg: "#9F1239";
+                readonly border: "#9F1239";
             };
             readonly pressed: {
-                readonly bg: "#FEF2F2";
-                readonly fg: "#B91C1C";
-                readonly border: "#B91C1C";
+                readonly bg: "#FFE4E6";
+                readonly fg: "#881337";
+                readonly border: "#881337";
             };
         };
         readonly ghost: {
             readonly default: {
-                readonly fg: "#DC2626";
+                readonly fg: "#BE123C";
                 readonly border: "transparent";
                 readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#FEF2F2";
-                readonly fg: "#B91C1C";
+                readonly bg: "#FFE4E6";
+                readonly fg: "#9F1239";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#FEF2F2";
-                readonly fg: "#B91C1C";
+                readonly bg: "#FFE4E6";
+                readonly fg: "#881337";
                 readonly border: "transparent";
             };
         };
@@ -214,7 +214,7 @@ export declare const button: {
     readonly disabled: {
         readonly bg: "#F4F1FB";
         readonly fg: "#9CA3AF";
-        readonly border: "#E8E2F3";
+        readonly border: "#BBB2D2";
     };
 };
 //# sourceMappingURL=button.d.ts.map

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

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

package/dist/light/components/button.js

@@ -1,5 +1,6 @@
 import { action } from '../semantic/action.js';
 import { border } from '../semantic/border.js';
+import { status } from '../semantic/status.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 const transparent = {
@@ -19,12 +20,12 @@ export const button = {
                 border: action.primary.default.border,
             },
             hover: {
-                bg: action.primary.subtle.bg,
+                bg: surface.hover,
                 fg: action.primary.hover.bg,
                 border: action.primary.hover.border,
             },
             pressed: {
-                bg: action.primary.subtle.bg,
+                bg: surface.pressed,
                 fg: action.primary.active.bg,
                 border: action.primary.active.border,
             },
@@ -60,7 +61,7 @@ export const button = {
                 border: action.secondary.default.border,
             },
             hover: {
-                bg: surface.hover,
+                bg: surface.elevated,
                 fg: action.secondary.hover.bg,
                 border: action.secondary.hover.border,
             },
@@ -77,7 +78,7 @@ export const button = {
                 border: 'transparent',
             },
             hover: {
-                bg: surface.hover,
+                bg: surface.elevated,
                 fg: action.secondary.hover.bg,
                 border: 'transparent',
             },
@@ -97,13 +98,13 @@ export const button = {
         outline: {
             default: {
                 ...transparent,
-                fg: action.close.default.bg,
-                border: action.close.default.border,
+                fg: action.close.muted.bg,
+                border: action.close.muted.border,
             },
             hover: {
                 bg: surface.hover,
-                fg: action.close.hover.bg,
-                border: action.close.hover.border,
+                fg: action.close.subtle.bg,
+                border: action.close.subtle.border,
             },
             pressed: {
                 bg: surface.pressed,
@@ -114,17 +115,17 @@ export const button = {
         ghost: {
             default: {
                 ...transparent,
-                fg: action.close.default.bg,
+                fg: text.primary,
                 border: 'transparent',
             },
             hover: {
-                bg: surface.hover,
-                fg: action.close.hover.bg,
+                bg: action.primary.subtle.bg,
+                fg: text.primary,
                 border: 'transparent',
             },
             pressed: {
-                bg: surface.pressed,
-                fg: action.close.active.bg,
+                bg: action.primary.subtle.bg,
+                fg: text.primary,
                 border: 'transparent',
             },
         },
@@ -142,12 +143,12 @@ export const button = {
                 border: action.danger.default.border,
             },
             hover: {
-                bg: action.danger.subtle.bg,
+                bg: status.error.bg,
                 fg: action.danger.hover.bg,
                 border: action.danger.hover.border,
             },
             pressed: {
-                bg: action.danger.subtle.bg,
+                bg: status.error.bg,
                 fg: action.danger.active.bg,
                 border: action.danger.active.border,
             },
@@ -159,19 +160,19 @@ export const button = {
                 border: 'transparent',
             },
             hover: {
-                bg: action.danger.subtle.bg,
+                bg: status.error.bg,
                 fg: action.danger.hover.bg,
                 border: 'transparent',
             },
             pressed: {
-                bg: action.danger.subtle.bg,
+                bg: status.error.bg,
                 fg: action.danger.active.bg,
                 border: 'transparent',
             },
         },
     },
     disabled: {
-        bg: surface.subtle,
+        bg: surface.disabled,
         fg: text.disabled,
         border: border.default,
     },