@cryptlex/web-components 6.6.120 → 6.7.0

package/lib/index.css

@@ -15,79 +15,11 @@
 
     /* Colors */
     --color-*: initial;
-    --color-primary-50: var(--primary-50);
-    --color-primary-100: var(--primary-100);
-    --color-primary-200: var(--primary-200);
-    --color-primary-300: var(--primary-300);
-    --color-primary-400: var(--primary-400);
-    --color-primary-500: var(--primary-500);
-    --color-primary-600: var(--primary-600);
-    --color-primary-700: var(--primary-700);
-    --color-primary-800: var(--primary-800);
-    --color-primary-900: var(--primary-900);
-    --color-primary-950: var(--primary-950);
-
-    --color-neutral-50: var(--neutral-50);
-    --color-neutral-100: var(--neutral-100);
-    --color-neutral-200: var(--neutral-200);
-    --color-neutral-300: var(--neutral-300);
-    --color-neutral-400: var(--neutral-400);
-    --color-neutral-500: var(--neutral-500);
-    --color-neutral-600: var(--neutral-600);
-    --color-neutral-700: var(--neutral-700);
-    --color-neutral-800: var(--neutral-800);
-    --color-neutral-900: var(--neutral-900);
-    --color-neutral-950: var(--neutral-950);
-
-    --color-destructive-50: var(--destructive-50);
-    --color-destructive-100: var(--destructive-100);
-    --color-destructive-200: var(--destructive-200);
-    --color-destructive-300: var(--destructive-300);
-    --color-destructive-400: var(--destructive-400);
-    --color-destructive-500: var(--destructive-500);
-    --color-destructive-600: var(--destructive-600);
-    --color-destructive-700: var(--destructive-700);
-    --color-destructive-800: var(--destructive-800);
-    --color-destructive-900: var(--destructive-900);
-    --color-destructive-950: var(--destructive-950);
-
-    --color-success-50: var(--success-50);
-    --color-success-100: var(--success-100);
-    --color-success-200: var(--success-200);
-    --color-success-300: var(--success-300);
-    --color-success-400: var(--success-400);
-    --color-success-500: var(--success-500);
-    --color-success-600: var(--success-600);
-    --color-success-700: var(--success-700);
-    --color-success-800: var(--success-800);
-    --color-success-900: var(--success-900);
-    --color-success-950: var(--success-950);
-
-    --color-warning-50: var(--warning-50);
-    --color-warning-100: var(--warning-100);
-    --color-warning-200: var(--warning-200);
-    --color-warning-300: var(--warning-300);
-    --color-warning-400: var(--warning-400);
-    --color-warning-500: var(--warning-500);
-    --color-warning-600: var(--warning-600);
-    --color-warning-700: var(--warning-700);
-    --color-warning-800: var(--warning-800);
-    --color-warning-900: var(--warning-900);
-    --color-warning-950: var(--warning-950);
-
-    --color-discovery-50: var(--discovery-50);
-    --color-discovery-100: var(--discovery-100);
-    --color-discovery-200: var(--discovery-200);
-    --color-discovery-300: var(--discovery-300);
-    --color-discovery-400: var(--discovery-400);
-    --color-discovery-500: var(--discovery-500);
-    --color-discovery-600: var(--discovery-600);
-    --color-discovery-700: var(--discovery-700);
-    --color-discovery-800: var(--discovery-800);
-    --color-discovery-900: var(--discovery-900);
-    --color-discovery-950: var(--discovery-950);
 
     /* Semantic tokens from the design system (defined in tokens.css) */
+    --color-primary: var(--primary);
+    --color-secondary: var(--secondary);
+
     --color-stroke-primary: var(--stroke-primary);
     --color-stroke-secondary: var(--stroke-secondary);
     --color-stroke-active: var(--stroke-active);
@@ -103,38 +35,36 @@
 
     --color-icon-primary: var(--icon-primary);
     --color-icon-action: var(--icon-action);
+    --color-icon-white: var(--icon-white);
 
     --color-background-overlay: var(--background-overlay);
 
-    --color-foreground: var(--text-primary);
-    --color-background: var(--surface-secondary);
-    --color-elevation-1: var(--surface-primary);
-    --color-elevation-mid: var(--surface-tertiary);
+    --color-neutral: var(--neutral);
+    --color-success: var(--success);
+    --color-destructive: var(--destructive);
+    --color-warning: var(--warning);
+    --color-info: var(--info);
+    --color-discovery: var(--discovery);
 
-    --color-primary: var(--primary);
     --color-primary-foreground: oklch(1 0 0);
     --color-muted: var(--text-secondary);
     --color-muted-foreground: var(--text-tertiary);
     --color-accent: var(--text-secondary);
     --color-accent-foreground: var(--text-white);
-    --color-destructive: var(--color-destructive-700);
     --color-destructive-foreground: oklch(1 0 0);
-    --color-success: var(--color-success-700);
-    --color-success-foreground: var(--color-elevation-1);
-    --color-warning: var(--color-warning-700);
-    --color-warning-foreground: var(--color-elevation-1);
-    --color-discovery: var(--color-discovery-700);
-    --color-discovery-foreground: var(--color-elevation-1);
+    --color-success-foreground: var(--surface-primary);
+    --color-warning-foreground: var(--surface-primary);
+    --color-discovery-foreground: var(--surface-primary);
 
     --color-border: var(--stroke-primary);
     --color-input: var(--color-border);
     --color-ring: var(--stroke-active);
 
-    --color-chart-1: var(--color-primary-500);
-    --color-chart-2: var(--color-primary-600);
-    --color-chart-3: var(--color-warning-500);
-    --color-chart-4: var(--color-warning-600);
-    --color-chart-5: var(--color-neutral-600);
+    --color-chart-1: var(--primary);
+    --color-chart-2: var(--info);
+    --color-chart-3: var(--warning);
+    --color-chart-4: var(--destructive);
+    --color-chart-5: var(--neutral);
 
     --spacing-input: --spacing(9);
     --spacing-input-sm: --spacing(6);
@@ -334,12 +264,12 @@
     @apply disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 disabled:pointer-events-none;
 }
 @utility input {
-    @apply border border-input bg-elevation-1 px-icon py-2 body-sm placeholder:text-muted-foreground disabled-muted focus-ring focus-visible:border-stroke-active;
+    @apply border border-input bg-surface-primary px-icon py-2 body-sm placeholder:text-muted-foreground disabled-muted focus-ring focus-visible:border-stroke-active;
 }
 
 /* A base set of classes for elements that can be clicked */
 @utility btn {
-    @apply inline-flex body-sm gap-1 px-2 disabled:pointer-events-none text-ellipsis overflow-hidden items-center justify-center font-medium transition-colors cursor-pointer ring-offset-background [&_svg:not([class*='size-'])]:size-icon shrink-0 [&_svg]:shrink-0 [&_svg]:opacity-70 leading-tight outline-none no-underline whitespace-nowrap select-none disabled-muted focus-ring hover:opacity-80 focus:opacity-80;
+    @apply inline-flex body-sm gap-1 px-2 disabled:pointer-events-none text-ellipsis overflow-hidden items-center justify-center font-medium transition-colors cursor-pointer ring-offset-surface-secondary [&_svg:not([class*='size-'])]:size-icon shrink-0 [&_svg]:shrink-0 [&_svg]:opacity-70 leading-tight outline-none no-underline whitespace-nowrap select-none disabled-muted focus-ring hover:opacity-80 focus:opacity-80;
 }
 
 @utility btn-link {
@@ -355,7 +285,7 @@
     @apply text-destructive bg-destructive/20 border border-destructive;
 }
 @utility btn-neutral {
-    @apply border border-input text-accent bg-elevation-1;
+    @apply border border-input text-accent bg-surface-primary;
 }
 @utility btn-primary-neutral {
     @apply border border-primary text-primary bg-primary/20;
@@ -445,7 +375,7 @@
     }
 
     body {
-        @apply bg-background text-foreground;
+        @apply bg-surface-secondary text-text-primary;
     }
 
     .tw-prose a {

package/lib/tokens.css

@@ -1,240 +1,65 @@
-/*!
-    This CSS is generated by tokens.scss, do not modify directly.
-    Instead, compile the SCSS file again to create modifications.
-*/
 :root {
     --primary-hue: 240;
+
     --primary: oklch(0.547 0.138 var(--primary-hue));
+    --secondary: oklch(1 0 0);
+
     --text-primary: oklch(0.211 0.041 var(--primary-hue));
     --text-secondary: oklch(0.512 0.031 var(--primary-hue));
     --text-tertiary: oklch(0.598 0.029 var(--primary-hue));
     --text-white: oklch(1 0 0);
+
     --stroke-primary: oklch(0.911 0.013 var(--primary-hue));
     --stroke-secondary: oklch(0.935 0.009 var(--primary-hue));
     --stroke-active: oklch(0.547 0.138 var(--primary-hue));
+
     --surface-primary: oklch(1 0 0);
     --surface-secondary: oklch(0.968 0.005 var(--primary-hue));
     --surface-tertiary: oklch(0.978 0.006 var(--primary-hue));
+
     --icon-primary: oklch(0.512 0.031 var(--primary-hue));
     --icon-action: oklch(0.547 0.138 var(--primary-hue));
+    --icon-white: oklch(1 0 0);
+
     --background-overlay: oklch(0.211 0.041 var(--primary-hue) / 0.5);
-    --xprimary-50: oklch(97% 0.014 var(--primary-hue));
-    --xprimary-100: oklch(93.2% 0.032 var(--primary-hue));
-    --xprimary-200: oklch(88.2% 0.059 var(--primary-hue));
-    --xprimary-300: oklch(80.9% 0.105 var(--primary-hue));
-    --xprimary-400: oklch(70.7% 0.165 var(--primary-hue));
-    --xprimary-500: oklch(62.3% 0.214 var(--primary-hue));
-    --xprimary-600: oklch(54.6% 0.245 var(--primary-hue));
-    --xprimary-700: oklch(48.8% 0.243 var(--primary-hue));
-    --xprimary-800: oklch(42.4% 0.199 var(--primary-hue));
-    --xprimary-900: oklch(37.9% 0.146 var(--primary-hue));
-    --xprimary-950: oklch(28.2% 0.091 var(--primary-hue));
-    --primary-50: var(--xprimary-50);
-    --primary-100: var(--xprimary-100);
-    --primary-200: var(--xprimary-200);
-    --primary-300: var(--xprimary-300);
-    --primary-400: var(--xprimary-400);
-    --primary-500: var(--xprimary-500);
-    --primary-600: var(--xprimary-600);
-    --primary-700: var(--xprimary-700);
-    --primary-800: var(--xprimary-800);
-    --primary-900: var(--xprimary-900);
-    --primary-950: var(--xprimary-950);
-    --xdestructive-50: oklch(97.1% 0.013 17.38);
-    --xdestructive-100: oklch(93.6% 0.032 17.717);
-    --xdestructive-200: oklch(88.5% 0.062 18.334);
-    --xdestructive-300: oklch(80.8% 0.114 19.571);
-    --xdestructive-400: oklch(70.4% 0.191 22.216);
-    --xdestructive-500: oklch(63.7% 0.237 25.331);
-    --xdestructive-600: oklch(57.7% 0.245 27.325);
-    --xdestructive-700: oklch(50.5% 0.213 27.518);
-    --xdestructive-800: oklch(44.4% 0.177 26.899);
-    --xdestructive-900: oklch(39.6% 0.141 25.723);
-    --xdestructive-950: oklch(25.8% 0.092 26.042);
-    --destructive-50: var(--xdestructive-50);
-    --destructive-100: var(--xdestructive-100);
-    --destructive-200: var(--xdestructive-200);
-    --destructive-300: var(--xdestructive-300);
-    --destructive-400: var(--xdestructive-400);
-    --destructive-500: var(--xdestructive-500);
-    --destructive-600: var(--xdestructive-600);
-    --destructive-700: var(--xdestructive-700);
-    --destructive-800: var(--xdestructive-800);
-    --destructive-900: var(--xdestructive-900);
-    --destructive-950: var(--xdestructive-950);
-    --xsuccess-50: oklch(98.2% 0.018 155.826);
-    --xsuccess-100: oklch(96.2% 0.044 156.743);
-    --xsuccess-200: oklch(92.5% 0.084 155.995);
-    --xsuccess-300: oklch(87.1% 0.15 154.449);
-    --xsuccess-400: oklch(79.2% 0.209 151.711);
-    --xsuccess-500: oklch(72.3% 0.219 149.579);
-    --xsuccess-600: oklch(62.7% 0.194 149.214);
-    --xsuccess-700: oklch(52.7% 0.154 150.069);
-    --xsuccess-800: oklch(44.8% 0.119 151.328);
-    --xsuccess-900: oklch(39.3% 0.095 152.535);
-    --xsuccess-950: oklch(26.6% 0.065 152.934);
-    --success-50: var(--xsuccess-50);
-    --success-100: var(--xsuccess-100);
-    --success-200: var(--xsuccess-200);
-    --success-300: var(--xsuccess-300);
-    --success-400: var(--xsuccess-400);
-    --success-500: var(--xsuccess-500);
-    --success-600: var(--xsuccess-600);
-    --success-700: var(--xsuccess-700);
-    --success-800: var(--xsuccess-800);
-    --success-900: var(--xsuccess-900);
-    --success-950: var(--xsuccess-950);
-    --xwarning-50: oklch(98.7% 0.026 102.212);
-    --xwarning-100: oklch(97.3% 0.071 103.193);
-    --xwarning-200: oklch(94.5% 0.129 101.54);
-    --xwarning-300: oklch(90.5% 0.182 98.111);
-    --xwarning-400: oklch(85.2% 0.199 91.936);
-    --xwarning-500: oklch(79.5% 0.184 86.047);
-    --xwarning-600: oklch(68.1% 0.162 75.834);
-    --xwarning-700: oklch(55.4% 0.135 66.442);
-    --xwarning-800: oklch(47.6% 0.114 61.907);
-    --xwarning-900: oklch(42.1% 0.095 57.708);
-    --xwarning-950: oklch(28.6% 0.066 53.813);
-    --warning-50: var(--xwarning-50);
-    --warning-100: var(--xwarning-100);
-    --warning-200: var(--xwarning-200);
-    --warning-300: var(--xwarning-300);
-    --warning-400: var(--xwarning-400);
-    --warning-500: var(--xwarning-500);
-    --warning-600: var(--xwarning-600);
-    --warning-700: var(--xwarning-700);
-    --warning-800: var(--xwarning-800);
-    --warning-900: var(--xwarning-900);
-    --warning-950: var(--xwarning-950);
-    --neutral-c: 0.0095;
-    --xneutral-50: oklch(98.5% var(--neutral-c) var(--primary-hue));
-    --xneutral-100: oklch(97% var(--neutral-c) var(--primary-hue));
-    --xneutral-200: oklch(92.2% var(--neutral-c) var(--primary-hue));
-    --xneutral-300: oklch(87% var(--neutral-c) var(--primary-hue));
-    --xneutral-400: oklch(70.8% var(--neutral-c) var(--primary-hue));
-    --xneutral-500: oklch(55.6% var(--neutral-c) var(--primary-hue));
-    --xneutral-600: oklch(43.9% var(--neutral-c) var(--primary-hue));
-    --xneutral-700: oklch(37.1% var(--neutral-c) var(--primary-hue));
-    --xneutral-800: oklch(26.9% var(--neutral-c) var(--primary-hue));
-    --xneutral-900: oklch(20.5% var(--neutral-c) var(--primary-hue));
-    --xneutral-950: oklch(14.5% var(--neutral-c) var(--primary-hue));
-    --neutral-50: var(--xneutral-50);
-    --neutral-100: var(--xneutral-100);
-    --neutral-200: var(--xneutral-200);
-    --neutral-300: var(--xneutral-300);
-    --neutral-400: var(--xneutral-400);
-    --neutral-500: var(--xneutral-500);
-    --neutral-600: var(--xneutral-600);
-    --neutral-700: var(--xneutral-700);
-    --neutral-800: var(--xneutral-800);
-    --neutral-900: var(--xneutral-900);
-    --neutral-950: var(--xneutral-950);
-    --discovery-hue: 292;
-    --xdiscovery-50: oklch(97% 0.014 var(--discovery-hue));
-    --xdiscovery-100: oklch(93.2% 0.032 var(--discovery-hue));
-    --xdiscovery-200: oklch(88.2% 0.059 var(--discovery-hue));
-    --xdiscovery-300: oklch(80.9% 0.105 var(--discovery-hue));
-    --xdiscovery-400: oklch(70.7% 0.165 var(--discovery-hue));
-    --xdiscovery-500: oklch(62.3% 0.214 var(--discovery-hue));
-    --xdiscovery-600: oklch(54.6% 0.245 var(--discovery-hue));
-    --xdiscovery-700: oklch(48.8% 0.243 var(--discovery-hue));
-    --xdiscovery-800: oklch(42.4% 0.199 var(--discovery-hue));
-    --xdiscovery-900: oklch(37.9% 0.146 var(--discovery-hue));
-    --xdiscovery-950: oklch(28.2% 0.091 var(--discovery-hue));
-    --discovery-50: var(--xdiscovery-50);
-    --discovery-100: var(--xdiscovery-100);
-    --discovery-200: var(--xdiscovery-200);
-    --discovery-300: var(--xdiscovery-300);
-    --discovery-400: var(--xdiscovery-400);
-    --discovery-500: var(--xdiscovery-500);
-    --discovery-600: var(--xdiscovery-600);
-    --discovery-700: var(--xdiscovery-700);
-    --discovery-800: var(--xdiscovery-800);
-    --discovery-900: var(--xdiscovery-900);
-    --discovery-950: var(--xdiscovery-950);
+
+    --neutral: oklch(0.512 0.031 var(--primary-hue));
+    --success: oklch(0.52 0.145 150);
+    --destructive: oklch(0.52 0.19 27);
+    --warning: oklch(0.47 0.13 52);
+    --info: oklch(0.485 0.185 264);
+    --discovery: oklch(0.478 0.221 300);
 }
+
 @media (prefers-color-scheme: dark) {
     :root {
         --primary: oklch(0.547 0.138 var(--primary-hue));
+        --secondary: oklch(1 0 0);
+
         --text-primary: oklch(1 0 0);
         --text-secondary: oklch(0.62 0.038 var(--primary-hue));
         --text-tertiary: oklch(0.62 0.038 var(--primary-hue));
         --text-white: oklch(0 0 0);
+
         --stroke-primary: oklch(0.26 0.021 var(--primary-hue));
         --stroke-secondary: oklch(0.22 0.023 var(--primary-hue));
         --stroke-active: oklch(0.547 0.138 var(--primary-hue));
+
         --surface-primary: oklch(0.175 0.014 var(--primary-hue));
         --surface-secondary: oklch(0.145 0.005 var(--primary-hue));
         --surface-tertiary: oklch(0.21 0.016 var(--primary-hue));
+
         --icon-primary: oklch(0.62 0.038 var(--primary-hue));
         --icon-action: oklch(0.547 0.138 var(--primary-hue));
+        --icon-white: oklch(0 0 0);
+
         --background-overlay: oklch(0 0 0 / 0.5);
-        --primary-50: var(--xprimary-950);
-        --primary-100: var(--xprimary-900);
-        --primary-200: var(--xprimary-800);
-        --primary-300: var(--xprimary-700);
-        --primary-400: var(--xprimary-600);
-        --primary-500: var(--xprimary-500);
-        --primary-600: var(--xprimary-400);
-        --primary-700: var(--xprimary-300);
-        --primary-800: var(--xprimary-200);
-        --primary-900: var(--xprimary-100);
-        --primary-950: var(--xprimary-50);
-        --destructive-50: var(--xdestructive-950);
-        --destructive-100: var(--xdestructive-900);
-        --destructive-200: var(--xdestructive-800);
-        --destructive-300: var(--xdestructive-700);
-        --destructive-400: var(--xdestructive-600);
-        --destructive-500: var(--xdestructive-500);
-        --destructive-600: var(--xdestructive-400);
-        --destructive-700: var(--xdestructive-300);
-        --destructive-800: var(--xdestructive-200);
-        --destructive-900: var(--xdestructive-100);
-        --destructive-950: var(--xdestructive-50);
-        --success-50: var(--xsuccess-950);
-        --success-100: var(--xsuccess-900);
-        --success-200: var(--xsuccess-800);
-        --success-300: var(--xsuccess-700);
-        --success-400: var(--xsuccess-600);
-        --success-500: var(--xsuccess-500);
-        --success-600: var(--xsuccess-400);
-        --success-700: var(--xsuccess-300);
-        --success-800: var(--xsuccess-200);
-        --success-900: var(--xsuccess-100);
-        --success-950: var(--xsuccess-50);
-        --warning-50: var(--xwarning-950);
-        --warning-100: var(--xwarning-900);
-        --warning-200: var(--xwarning-800);
-        --warning-300: var(--xwarning-700);
-        --warning-400: var(--xwarning-600);
-        --warning-500: var(--xwarning-500);
-        --warning-600: var(--xwarning-400);
-        --warning-700: var(--xwarning-300);
-        --warning-800: var(--xwarning-200);
-        --warning-900: var(--xwarning-100);
-        --warning-950: var(--xwarning-50);
-        --neutral-c: 0.04;
-        --neutral-50: var(--xneutral-950);
-        --neutral-100: var(--xneutral-900);
-        --neutral-200: var(--xneutral-800);
-        --neutral-300: var(--xneutral-700);
-        --neutral-400: var(--xneutral-600);
-        --neutral-500: var(--xneutral-500);
-        --neutral-600: var(--xneutral-400);
-        --neutral-700: var(--xneutral-300);
-        --neutral-800: var(--xneutral-200);
-        --neutral-900: var(--xneutral-100);
-        --neutral-950: var(--xneutral-50);
-        --discovery-50: var(--xdiscovery-950);
-        --discovery-100: var(--xdiscovery-900);
-        --discovery-200: var(--xdiscovery-800);
-        --discovery-300: var(--xdiscovery-700);
-        --discovery-400: var(--xdiscovery-600);
-        --discovery-500: var(--xdiscovery-500);
-        --discovery-600: var(--xdiscovery-400);
-        --discovery-700: var(--xdiscovery-300);
-        --discovery-800: var(--xdiscovery-200);
-        --discovery-900: var(--xdiscovery-100);
-        --discovery-950: var(--xdiscovery-50);
+
+        --neutral: oklch(0.512 0.031 var(--primary-hue));
+        --success: oklch(0.8 0.22 150);
+        --destructive: oklch(0.63 0.24 25);
+        --warning: oklch(0.76 0.18 62);
+        --info: oklch(0.485 0.185 264);
+        --discovery: oklch(0.478 0.221 300);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "6.6.120",
+  "version": "6.7.0",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",
@@ -45,7 +45,7 @@
     "access": "public"
   },
   "lint-staged": {
-    "*.{ts,tsx,css,scss,json}": "prettier --write"
+    "*.{ts,tsx,css,json}": "prettier --write"
   },
   "peerDependencies": {
     "@cryptlex/web-api-types": "2.165.0",
@@ -100,7 +100,6 @@
     "playwright": "^1.60.0",
     "prettier": "3.5.3",
     "rollup-preserve-directives": "1.1.3",
-    "sass": "1.99.0",
     "storybook": "10.3.6",
     "tailwindcss-react-aria-components": "2.1.0",
     "typescript": "5.9.2",
@@ -113,7 +112,6 @@
     "build": "tsc && vite build",
     "storybook": "storybook dev -p 6006 --no-open",
     "build:storybook": "storybook build",
-    "build:tokens": "sass --no-source-map ./lib/tokens.scss ./lib/tokens.css",
     "test": "vitest --project=storybook"
   }
 }