@moduix/react 2.4.0 → 2.5.1

package/dist/presets/soft.css

@@ -1,31 +1,31 @@
-[data-moduix-theme="soft"] {
-  --moduix-background: #fef8ff;
-  --moduix-foreground: #201824;
-  --moduix-card: #fffeff;
-  --moduix-card-foreground: #201824;
-  --moduix-popover: #fffeff;
-  --moduix-popover-foreground: #201824;
-  --moduix-primary: #884bc0;
-  --moduix-primary-foreground: #fdfbfd;
-  --moduix-secondary: #f7edf9;
-  --moduix-secondary-foreground: #34283d;
-  --moduix-muted: #f3ebf5;
-  --moduix-muted-foreground: #6b5d71;
-  --moduix-accent: #efddf7;
-  --moduix-accent-foreground: #31253f;
-  --moduix-border: #dfd2e2;
-  --moduix-input: #d4c5d7;
-  --moduix-ring: #9868ca;
-  --moduix-overlay: #20162738;
-  --moduix-overlay-foreground: #20162714;
-  --moduix-sidebar: #fbf4fd;
-  --moduix-sidebar-foreground: #201824;
-  --moduix-sidebar-primary: #884bc0;
-  --moduix-sidebar-primary-foreground: #fdfbfd;
-  --moduix-sidebar-accent: #efddf7;
-  --moduix-sidebar-accent-foreground: #31253f;
-  --moduix-sidebar-border: #dfd2e2;
-  --moduix-sidebar-ring: #9868ca;
+[data-moduix-theme='soft'] {
+  --moduix-background: oklch(0.985 0.012 320);
+  --moduix-foreground: oklch(0.225 0.024 315);
+  --moduix-card: oklch(0.998 0.004 320);
+  --moduix-card-foreground: oklch(0.225 0.024 315);
+  --moduix-popover: oklch(0.998 0.004 320);
+  --moduix-popover-foreground: oklch(0.225 0.024 315);
+  --moduix-primary: oklch(0.54 0.18 305);
+  --moduix-primary-foreground: oklch(0.99 0.004 320);
+  --moduix-secondary: oklch(0.958 0.018 320);
+  --moduix-secondary-foreground: oklch(0.3 0.04 310);
+  --moduix-muted: oklch(0.95 0.016 320);
+  --moduix-muted-foreground: oklch(0.5 0.035 315);
+  --moduix-accent: oklch(0.92 0.04 315);
+  --moduix-accent-foreground: oklch(0.29 0.05 305);
+  --moduix-border: oklch(0.88 0.025 320);
+  --moduix-input: oklch(0.84 0.03 320);
+  --moduix-ring: oklch(0.61 0.15 305);
+  --moduix-overlay: oklch(0.22 0.035 310 / 0.22);
+  --moduix-overlay-foreground: oklch(0.22 0.035 310 / 0.08);
+  --moduix-sidebar: oklch(0.975 0.014 320);
+  --moduix-sidebar-foreground: oklch(0.225 0.024 315);
+  --moduix-sidebar-primary: oklch(0.54 0.18 305);
+  --moduix-sidebar-primary-foreground: oklch(0.99 0.004 320);
+  --moduix-sidebar-accent: oklch(0.92 0.04 315);
+  --moduix-sidebar-accent-foreground: oklch(0.29 0.05 305);
+  --moduix-sidebar-border: oklch(0.88 0.025 320);
+  --moduix-sidebar-ring: oklch(0.61 0.15 305);
   --moduix-radius: 1rem;
   --moduix-spacing-2: 9px;
   --moduix-spacing-3: 14px;
@@ -39,105 +39,39 @@
   --moduix-size-md: 40px;
   --moduix-size-lg: 44px;
   --moduix-size-xl: 52px;
-  --moduix-shadow-sm: 0 2px 6px #61236b14;
-  --moduix-shadow-md: 0 8px 18px #61236b1f;
-  --moduix-shadow-lg: 0 18px 38px #61236b29;
-}
+  --moduix-shadow-sm: 0 2px 6px rgb(97 35 107 / 0.08);
+  --moduix-shadow-md: 0 8px 18px rgb(97 35 107 / 0.12);
+  --moduix-shadow-lg: 0 18px 38px rgb(97 35 107 / 0.16);
 
-@supports (color: lab(0% 0 0)) {
-  [data-moduix-theme="soft"] {
-    --moduix-background: lab(98.1026% 3.14552 -2.8966);
-    --moduix-foreground: lab(9.77332% 5.96304 -6.24471);
-    --moduix-card: lab(99.7158% 1.04758 -.967503);
-    --moduix-card-foreground: lab(9.77332% 5.96304 -6.24471);
-    --moduix-popover: lab(99.7158% 1.04758 -.967503);
-    --moduix-popover-foreground: lab(9.77332% 5.96304 -6.24471);
-    --moduix-primary: lab(43.7253% 43.1212 -52.6342);
-    --moduix-primary-foreground: lab(98.7878% 1.04755 -.967491);
-    --moduix-secondary: lab(94.891% 4.72173 -4.33797);
-    --moduix-secondary-foreground: lab(18.2563% 9.30683 -11.2088);
-    --moduix-muted: lab(93.9896% 4.1962 -3.85778);
-    --moduix-muted-foreground: lab(41.5358% 8.61768 -9.17475);
-    --moduix-accent: lab(90.1994% 9.78509 -10.5495);
-    --moduix-accent-foreground: lab(16.9528% 10.9317 -14.866);
-    --moduix-border: lab(85.7491% 6.56518 -6.01138);
-    --moduix-input: lab(81.0413% 7.88492 -7.2017);
-    --moduix-ring: lab(52.5385% 34.208 -44.1752);
-    --moduix-overlay: lab(9.03362% 8.22794 -9.76513 / .22);
-    --moduix-overlay-foreground: lab(9.03362% 8.22794 -9.76513 / .08);
-    --moduix-sidebar: lab(96.9162% 3.67063 -3.37759);
-    --moduix-sidebar-foreground: lab(9.77332% 5.96304 -6.24471);
-    --moduix-sidebar-primary: lab(43.7253% 43.1212 -52.6342);
-    --moduix-sidebar-primary-foreground: lab(98.7878% 1.04755 -.967491);
-    --moduix-sidebar-accent: lab(90.1994% 9.78509 -10.5495);
-    --moduix-sidebar-accent-foreground: lab(16.9528% 10.9317 -14.866);
-    --moduix-sidebar-border: lab(85.7491% 6.56518 -6.01138);
-    --moduix-sidebar-ring: lab(52.5385% 34.208 -44.1752);
+  &[data-moduix-color-scheme='dark'],
+  [data-moduix-color-scheme='dark'] {
+    color-scheme: dark;
+    --moduix-background: oklch(0.17 0.018 315);
+    --moduix-foreground: oklch(0.972 0.006 320);
+    --moduix-card: oklch(0.22 0.022 315);
+    --moduix-card-foreground: oklch(0.972 0.006 320);
+    --moduix-popover: oklch(0.22 0.022 315);
+    --moduix-popover-foreground: oklch(0.972 0.006 320);
+    --moduix-primary: oklch(0.78 0.13 305);
+    --moduix-primary-foreground: oklch(0.23 0.026 315);
+    --moduix-secondary: oklch(0.285 0.03 315);
+    --moduix-secondary-foreground: oklch(0.972 0.006 320);
+    --moduix-muted: oklch(0.275 0.026 315);
+    --moduix-muted-foreground: oklch(0.74 0.03 320);
+    --moduix-accent: oklch(0.34 0.06 310);
+    --moduix-accent-foreground: oklch(0.972 0.006 320);
+    --moduix-border: oklch(0.76 0.035 320 / 0.24);
+    --moduix-input: oklch(0.76 0.035 320 / 0.3);
+    --moduix-ring: oklch(0.74 0.11 305);
+    --moduix-overlay: oklch(0.1 0.02 315 / 0.8);
+    --moduix-overlay-foreground: oklch(0.972 0.006 320 / 0.1);
+    --moduix-sidebar: oklch(0.2 0.022 315);
+    --moduix-sidebar-foreground: oklch(0.972 0.006 320);
+    --moduix-sidebar-primary: oklch(0.78 0.13 305);
+    --moduix-sidebar-primary-foreground: oklch(0.23 0.026 315);
+    --moduix-sidebar-accent: oklch(0.34 0.06 310);
+    --moduix-sidebar-accent-foreground: oklch(0.972 0.006 320);
+    --moduix-sidebar-border: oklch(0.76 0.035 320 / 0.24);
+    --moduix-sidebar-ring: oklch(0.74 0.11 305);
   }
-}
-
-[data-moduix-theme="soft"][data-moduix-color-scheme="dark"], [data-moduix-theme="soft"] [data-moduix-color-scheme="dark"] {
-  --lightningcss-light: ;
-  --lightningcss-dark: initial;
-  color-scheme: dark;
-  --moduix-background: #120d15;
-  --moduix-foreground: #f8f4f8;
-  --moduix-card: #1e1822;
-  --moduix-card-foreground: #f8f4f8;
-  --moduix-popover: #1e1822;
-  --moduix-popover-foreground: #f8f4f8;
-  --moduix-primary: #cba1fa;
-  --moduix-primary-foreground: #221925;
-  --moduix-secondary: #302634;
-  --moduix-secondary-foreground: #f8f4f8;
-  --moduix-muted: #2d2431;
-  --moduix-muted-foreground: #b4a5b7;
-  --moduix-accent: #412f4f;
-  --moduix-accent-foreground: #f8f4f8;
-  --moduix-border: #bbaabf3d;
-  --moduix-input: #bbaabf4d;
-  --moduix-ring: #bb99e3;
-  --moduix-overlay: #050207cc;
-  --moduix-overlay-foreground: #f8f4f81a;
-  --moduix-sidebar: #1a131d;
-  --moduix-sidebar-foreground: #f8f4f8;
-  --moduix-sidebar-primary: #cba1fa;
-  --moduix-sidebar-primary-foreground: #221925;
-  --moduix-sidebar-accent: #412f4f;
-  --moduix-sidebar-accent-foreground: #f8f4f8;
-  --moduix-sidebar-border: #bbaabf3d;
-  --moduix-sidebar-ring: #bb99e3;
-}
-
-@supports (color: lab(0% 0 0)) {
-  [data-moduix-theme="soft"][data-moduix-color-scheme="dark"], [data-moduix-theme="soft"] [data-moduix-color-scheme="dark"] {
-    --moduix-background: lab(4.27462% 3.10393 -3.53473);
-    --moduix-foreground: lab(96.6736% 1.57163 -1.45046);
-    --moduix-card: lab(9.22196% 5.45708 -5.73159);
-    --moduix-card-foreground: lab(96.6736% 1.57163 -1.45046);
-    --moduix-popover: lab(9.22196% 5.45708 -5.73159);
-    --moduix-popover-foreground: lab(96.6736% 1.57163 -1.45046);
-    --moduix-primary: lab(72.7036% 28.3277 -38.6867);
-    --moduix-primary-foreground: lab(10.3245% 6.47023 -6.7571);
-    --moduix-secondary: lab(16.6521% 7.45122 -7.80795);
-    --moduix-secondary-foreground: lab(96.6736% 1.57163 -1.45046);
-    --moduix-muted: lab(15.5491% 6.44058 -6.78092);
-    --moduix-muted-foreground: lab(69.4402% 7.88933 -7.19396);
-    --moduix-accent: lab(22.5936% 14.2035 -16.6957);
-    --moduix-accent-foreground: lab(96.6736% 1.57163 -1.45046);
-    --moduix-border: lab(71.6921% 9.21014 -8.38288 / .24);
-    --moduix-input: lab(71.6921% 9.21014 -8.38288 / .3);
-    --moduix-ring: lab(68.3641% 23.7194 -32.8336);
-    --moduix-overlay: lab(.836973% 1.25162 -1.46449 / .8);
-    --moduix-overlay-foreground: lab(96.6736% 1.57163 -1.45046 / .1);
-    --moduix-sidebar: lab(6.9495% 5.25659 -5.63513);
-    --moduix-sidebar-foreground: lab(96.6736% 1.57163 -1.45046);
-    --moduix-sidebar-primary: lab(72.7036% 28.3277 -38.6867);
-    --moduix-sidebar-primary-foreground: lab(10.3245% 6.47023 -6.7571);
-    --moduix-sidebar-accent: lab(22.5936% 14.2035 -16.6957);
-    --moduix-sidebar-accent-foreground: lab(96.6736% 1.57163 -1.45046);
-    --moduix-sidebar-border: lab(71.6921% 9.21014 -8.38288 / .24);
-    --moduix-sidebar-ring: lab(68.3641% 23.7194 -32.8336);
-  }
-}
-
+}

package/dist/styles/animations.css

@@ -1,6 +1,6 @@
 @keyframes moduix-pulse {
   50% {
-    opacity: .3;
+    opacity: 0.3;
   }
 }
 
@@ -14,7 +14,6 @@
   from {
     opacity: 1;
   }
-
   to {
     opacity: 0;
   }
@@ -22,15 +21,15 @@
 
 @keyframes moduix-slide-up {
   from {
-    opacity: 0;
     transform: translateY(4px);
+    opacity: 0;
   }
 }
 
 @keyframes moduix-slide-down {
   from {
-    opacity: 0;
     transform: translateY(-4px);
+    opacity: 0;
   }
 }
 
@@ -47,7 +46,7 @@
   --moduix-animation-slide-up: moduix-slide-up var(--moduix-duration-normal) var(--moduix-ease-out);
   --moduix-animation-slide-down: moduix-slide-down var(--moduix-duration-normal)
     var(--moduix-ease-out);
-  --moduix-animation-spin: moduix-spin .75s linear infinite;
+  --moduix-animation-spin: moduix-spin 0.75s linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -59,5 +58,4 @@
     --moduix-animation-slide-down: none;
     --moduix-animation-spin: none;
   }
-}
-
+}

package/dist/styles/borders.css

@@ -2,9 +2,9 @@
   --moduix-border-width-sm: 1px;
   --moduix-border-width-md: 2px;
   --moduix-border-width-lg: 4px;
+
   --moduix-focus-ring-width: var(--moduix-border-width-md);
   --moduix-focus-ring-inset-width: var(--moduix-border-width-sm);
   --moduix-focus-ring-offset: var(--moduix-spacing-0-5);
   --moduix-focus-ring-inset-offset: calc(var(--moduix-border-width-sm) * -1);
-}
-
+}

package/dist/styles/colors.css

@@ -1,171 +1,88 @@
 :root {
-  --moduix-background: #f9f9fb;
-  --moduix-foreground: #101015;
-  --moduix-card: #fdfdff;
-  --moduix-card-foreground: #101015;
-  --moduix-popover: #fdfdff;
-  --moduix-popover-foreground: #101015;
-  --moduix-primary: #1d1d25;
-  --moduix-primary-foreground: #f9f9fb;
-  --moduix-secondary: #f1f1f6;
-  --moduix-secondary-foreground: #1d1d25;
-  --moduix-muted: #eff0f4;
-  --moduix-muted-foreground: #5e5e67;
-  --moduix-accent: #edeef5;
-  --moduix-accent-foreground: #1d1d25;
-  --moduix-destructive: #dc0031;
+  --moduix-background: oklch(0.982 0.003 285);
+  --moduix-foreground: oklch(0.175 0.01 285);
+  --moduix-card: oklch(0.995 0.002 285);
+  --moduix-card-foreground: oklch(0.175 0.01 285);
+  --moduix-popover: oklch(0.995 0.002 285);
+  --moduix-popover-foreground: oklch(0.175 0.01 285);
+  --moduix-primary: oklch(0.235 0.016 285);
+  --moduix-primary-foreground: oklch(0.982 0.003 285);
+  --moduix-secondary: oklch(0.96 0.006 285);
+  --moduix-secondary-foreground: oklch(0.235 0.016 285);
+  --moduix-muted: oklch(0.955 0.006 285);
+  --moduix-muted-foreground: oklch(0.485 0.015 285);
+  --moduix-accent: oklch(0.95 0.01 285);
+  --moduix-accent-foreground: oklch(0.235 0.016 285);
+  --moduix-destructive: oklch(0.565 0.235 22);
   --moduix-destructive-foreground: var(--moduix-primary-foreground);
-  --moduix-success: #00a544;
-  --moduix-warning: #edb200;
-  --moduix-border: #dfdfe5;
-  --moduix-input: #dfdfe5;
-  --moduix-ring: #83849b;
-  --moduix-overlay: #10101633;
-  --moduix-overlay-foreground: #10101612;
-  --moduix-chart-1: #9973ef;
-  --moduix-chart-2: #00b99a;
-  --moduix-chart-3: #ef852e;
-  --moduix-chart-4: #d13d91;
-  --moduix-chart-5: #7da84c;
-  --moduix-sidebar: #f6f6fa;
-  --moduix-sidebar-foreground: #101015;
-  --moduix-sidebar-primary: #1d1d25;
-  --moduix-sidebar-primary-foreground: #f9f9fb;
-  --moduix-sidebar-accent: #edeef5;
-  --moduix-sidebar-accent-foreground: #1d1d25;
-  --moduix-sidebar-border: #dfdfe5;
-  --moduix-sidebar-ring: #83849b;
-}
+  --moduix-success: oklch(0.627 0.194 149.214);
+  --moduix-warning: oklch(0.795 0.184 86.047);
+  --moduix-border: oklch(0.905 0.008 285);
+  --moduix-input: oklch(0.905 0.008 285);
+  --moduix-ring: oklch(0.62 0.035 285);
+  --moduix-overlay: oklch(0.175 0.014 285 / 0.2);
+  --moduix-overlay-foreground: oklch(0.175 0.014 285 / 0.07);
+  --moduix-chart-1: oklch(0.65 0.18 295);
+  --moduix-chart-2: oklch(0.7 0.14 175);
+  --moduix-chart-3: oklch(0.72 0.16 55);
+  --moduix-chart-4: oklch(0.6 0.2 350);
+  --moduix-chart-5: oklch(0.68 0.13 130);
+  --moduix-sidebar: oklch(0.975 0.005 285);
+  --moduix-sidebar-foreground: oklch(0.175 0.01 285);
+  --moduix-sidebar-primary: oklch(0.235 0.016 285);
+  --moduix-sidebar-primary-foreground: oklch(0.982 0.003 285);
+  --moduix-sidebar-accent: oklch(0.95 0.01 285);
+  --moduix-sidebar-accent-foreground: oklch(0.235 0.016 285);
+  --moduix-sidebar-border: oklch(0.905 0.008 285);
+  --moduix-sidebar-ring: oklch(0.62 0.035 285);
 
-@supports (color: lab(0% 0 0)) {
-  :root {
-    --moduix-background: lab(97.8868% .276119 -1.09879);
-    --moduix-foreground: lab(4.77477% .753664 -2.8157);
-    --moduix-card: lab(99.4032% .183612 -.732851);
-    --moduix-card-foreground: lab(4.77477% .753664 -2.8157);
-    --moduix-popover: lab(99.4032% .183612 -.732851);
-    --moduix-popover-foreground: lab(4.77477% .753664 -2.8157);
-    --moduix-primary: lab(11.108% 1.72348 -5.72367);
-    --moduix-primary-foreground: lab(97.8868% .276119 -1.09879);
-    --moduix-secondary: lab(95.3092% .556827 -2.19457);
-    --moduix-secondary-foreground: lab(11.108% 1.72348 -5.72367);
-    --moduix-muted: lab(94.7292% .556916 -2.19454);
-    --moduix-muted-foreground: lab(40.1269% 1.4805 -5.43306);
-    --moduix-accent: lab(94.1146% .938207 -3.65106);
-    --moduix-accent-foreground: lab(11.108% 1.72348 -5.72367);
-    --moduix-destructive: lab(47.0493% 75.2533 42.9314);
-    --moduix-success: lab(59.0978% -58.6621 41.2579);
-    --moduix-warning: lab(76.3898% 14.5258 98.4589);
-    --moduix-border: lab(88.9119% .747383 -2.9229);
-    --moduix-input: lab(88.9119% .747383 -2.9229);
-    --moduix-ring: lab(55.5944% 3.67066 -12.566);
-    --moduix-overlay: lab(4.7445% 1.11303 -4.05285 / .2);
-    --moduix-overlay-foreground: lab(4.7445% 1.11303 -4.05285 / .07);
-    --moduix-chart-1: lab(56.7542% 35.894 -58.3247);
-    --moduix-chart-2: lab(67.0098% -49.4925 4.26728);
-    --moduix-chart-3: lab(66.6902% 37.2311 61.7785);
-    --moduix-chart-4: lab(50.895% 63.3361 -12.3314);
-    --moduix-chart-5: lab(64.2236% -26.5235 41.6585);
-    --moduix-sidebar: lab(97.0578% .462711 -1.82967);
-    --moduix-sidebar-foreground: lab(4.77477% .753664 -2.8157);
-    --moduix-sidebar-primary: lab(11.108% 1.72348 -5.72367);
-    --moduix-sidebar-primary-foreground: lab(97.8868% .276119 -1.09879);
-    --moduix-sidebar-accent: lab(94.1146% .938207 -3.65106);
-    --moduix-sidebar-accent-foreground: lab(11.108% 1.72348 -5.72367);
-    --moduix-sidebar-border: lab(88.9119% .747383 -2.9229);
-    --moduix-sidebar-ring: lab(55.5944% 3.67066 -12.566);
+  &[data-moduix-color-scheme='light'],
+  [data-moduix-color-scheme='light'] {
+    color-scheme: light;
   }
-}
 
-:root[data-moduix-color-scheme="light"], :root [data-moduix-color-scheme="light"] {
-  --lightningcss-light: initial;
-  --lightningcss-dark: ;
-  color-scheme: light;
-}
-
-:root[data-moduix-color-scheme="dark"], :root [data-moduix-color-scheme="dark"] {
-  --lightningcss-light: ;
-  --lightningcss-dark: initial;
-  color-scheme: dark;
-  --moduix-background: #0c0c10;
-  --moduix-foreground: #f4f4f6;
-  --moduix-card: #15151b;
-  --moduix-card-foreground: #f4f4f6;
-  --moduix-popover: #15151b;
-  --moduix-popover-foreground: #f4f4f6;
-  --moduix-primary: #e3e3e8;
-  --moduix-primary-foreground: #15151b;
-  --moduix-secondary: #222229;
-  --moduix-secondary-foreground: #f4f4f6;
-  --moduix-muted: #222229;
-  --moduix-muted-foreground: #9f9faa;
-  --moduix-accent: #2a2a33;
-  --moduix-accent-foreground: #f4f4f6;
-  --moduix-destructive: #f8616f;
-  --moduix-destructive-foreground: var(--moduix-primary-foreground);
-  --moduix-success: #00a544;
-  --moduix-warning: #edb200;
-  --moduix-border: #ffffff21;
-  --moduix-input: #ffffff2b;
-  --moduix-ring: #797992;
-  --moduix-overlay: #040307bd;
-  --moduix-overlay-foreground: #f4f4f617;
-  --moduix-chart-1: #ad8dff;
-  --moduix-chart-2: #37ccac;
-  --moduix-chart-3: #ff9b51;
-  --moduix-chart-4: #e65aa5;
-  --moduix-chart-5: #92ba66;
-  --moduix-sidebar: #15151b;
-  --moduix-sidebar-foreground: #f4f4f6;
-  --moduix-sidebar-primary: #ad8dff;
-  --moduix-sidebar-primary-foreground: #0c0c10;
-  --moduix-sidebar-accent: #2a2a33;
-  --moduix-sidebar-accent-foreground: #f4f4f6;
-  --moduix-sidebar-border: #ffffff21;
-  --moduix-sidebar-ring: #797992;
-}
-
-@supports (color: lab(0% 0 0)) {
-  :root[data-moduix-color-scheme="dark"], :root [data-moduix-color-scheme="dark"] {
-    --moduix-background: lab(3.32254% .466786 -1.75522);
-    --moduix-foreground: lab(96.2627% .276208 -1.09876);
-    --moduix-card: lab(7.13143% 1.07729 -3.89344);
-    --moduix-card-foreground: lab(96.2627% .276208 -1.09876);
-    --moduix-popover: lab(7.13143% 1.07729 -3.89344);
-    --moduix-popover-foreground: lab(96.2627% .276208 -1.09876);
-    --moduix-primary: lab(90.4286% .651926 -2.55885);
-    --moduix-primary-foreground: lab(7.13143% 1.07729 -3.89344);
-    --moduix-secondary: lab(13.4703% 1.23115 -4.32171);
-    --moduix-secondary-foreground: lab(96.2627% .276208 -1.09876);
-    --moduix-muted: lab(13.4703% 1.23115 -4.32171);
-    --moduix-muted-foreground: lab(65.6402% 1.54763 -5.81334);
-    --moduix-accent: lab(17.5017% 1.55589 -5.39374);
-    --moduix-accent-foreground: lab(96.2627% .276208 -1.09876);
-    --moduix-destructive: lab(62.0549% 59.5703 24.4648);
-    --moduix-success: lab(59.0978% -58.6621 41.2579);
-    --moduix-warning: lab(76.3898% 14.5258 98.4589);
-    --moduix-border: lab(99.9663% .369132 -1.46444 / .13);
-    --moduix-input: lab(99.9663% .369132 -1.46444 / .17);
-    --moduix-ring: lab(51.501% 4.0642 -13.6067);
-    --moduix-overlay: lab(1.0141% .370815 -1.30305 / .74);
-    --moduix-overlay-foreground: lab(96.2627% .276208 -1.09876 / .09);
-    --moduix-chart-1: lab(65.1519% 32.5305 -55.3073);
-    --moduix-chart-2: lab(73.8414% -45.6023 3.95186);
-    --moduix-chart-3: lab(73.7456% 34.2033 54.931);
-    --moduix-chart-4: lab(59.1573% 60.5605 -11.745);
-    --moduix-chart-5: lab(71.1105% -24.7757 37.5748);
-    --moduix-sidebar: lab(7.13143% 1.07729 -3.89344);
-    --moduix-sidebar-foreground: lab(96.2627% .276208 -1.09876);
-    --moduix-sidebar-primary: lab(65.1519% 32.5305 -55.3073);
-    --moduix-sidebar-primary-foreground: lab(3.32254% .466786 -1.75522);
-    --moduix-sidebar-accent: lab(17.5017% 1.55589 -5.39374);
-    --moduix-sidebar-accent-foreground: lab(96.2627% .276208 -1.09876);
-    --moduix-sidebar-border: lab(99.9663% .369132 -1.46444 / .13);
-    --moduix-sidebar-ring: lab(51.501% 4.0642 -13.6067);
+  &[data-moduix-color-scheme='dark'],
+  [data-moduix-color-scheme='dark'] {
+    color-scheme: dark;
+    --moduix-background: oklch(0.155 0.008 285);
+    --moduix-foreground: oklch(0.968 0.003 285);
+    --moduix-card: oklch(0.2 0.011 285);
+    --moduix-card-foreground: oklch(0.968 0.003 285);
+    --moduix-popover: oklch(0.2 0.011 285);
+    --moduix-popover-foreground: oklch(0.968 0.003 285);
+    --moduix-primary: oklch(0.918 0.007 285);
+    --moduix-primary-foreground: oklch(0.2 0.011 285);
+    --moduix-secondary: oklch(0.255 0.012 285);
+    --moduix-secondary-foreground: oklch(0.968 0.003 285);
+    --moduix-muted: oklch(0.255 0.012 285);
+    --moduix-muted-foreground: oklch(0.705 0.016 285);
+    --moduix-accent: oklch(0.29 0.015 285);
+    --moduix-accent-foreground: oklch(0.968 0.003 285);
+    --moduix-destructive: oklch(0.69 0.185 18);
+    --moduix-destructive-foreground: var(--moduix-primary-foreground);
+    --moduix-success: oklch(0.627 0.194 149.214);
+    --moduix-warning: oklch(0.795 0.184 86.047);
+    --moduix-border: oklch(1 0.004 285 / 13%);
+    --moduix-input: oklch(1 0.004 285 / 17%);
+    --moduix-ring: oklch(0.585 0.038 285);
+    --moduix-overlay: oklch(0.105 0.012 285 / 0.74);
+    --moduix-overlay-foreground: oklch(0.968 0.003 285 / 0.09);
+    --moduix-chart-1: oklch(0.72 0.17 295);
+    --moduix-chart-2: oklch(0.76 0.13 175);
+    --moduix-chart-3: oklch(0.78 0.15 55);
+    --moduix-chart-4: oklch(0.67 0.19 350);
+    --moduix-chart-5: oklch(0.74 0.12 130);
+    --moduix-sidebar: oklch(0.2 0.011 285);
+    --moduix-sidebar-foreground: oklch(0.968 0.003 285);
+    --moduix-sidebar-primary: oklch(0.72 0.17 295);
+    --moduix-sidebar-primary-foreground: oklch(0.155 0.008 285);
+    --moduix-sidebar-accent: oklch(0.29 0.015 285);
+    --moduix-sidebar-accent-foreground: oklch(0.968 0.003 285);
+    --moduix-sidebar-border: oklch(1 0.004 285 / 13%);
+    --moduix-sidebar-ring: oklch(0.585 0.038 285);
   }
-}
 
-:root {
+  /* Semantic */
   --moduix-color-background: var(--moduix-background);
   --moduix-color-foreground: var(--moduix-foreground);
   --moduix-color-card: var(--moduix-card);
@@ -202,5 +119,4 @@
   --moduix-color-sidebar-accent-foreground: var(--moduix-sidebar-accent-foreground);
   --moduix-color-sidebar-border: var(--moduix-sidebar-border);
   --moduix-color-sidebar-ring: var(--moduix-sidebar-ring);
-}
-
+}

package/dist/styles/opacity.css

@@ -1,6 +1,5 @@
 :root {
-  --moduix-opacity-disabled: .5;
-  --moduix-opacity-loading: .85;
-  --moduix-opacity-hover: .9;
-}
-
+  --moduix-opacity-disabled: 0.5;
+  --moduix-opacity-loading: 0.85;
+  --moduix-opacity-hover: 0.9;
+}

package/dist/styles/radius.css

@@ -1,11 +1,11 @@
 :root {
-  --moduix-radius: .625rem;
+  --moduix-radius: 0.625rem;
   --moduix-radius-none: 0;
-  --moduix-radius-xs: calc(var(--moduix-radius) * .4);
-  --moduix-radius-sm: calc(var(--moduix-radius) * .6);
-  --moduix-radius-md: calc(var(--moduix-radius) * .8);
+
+  --moduix-radius-xs: calc(var(--moduix-radius) * 0.4);
+  --moduix-radius-sm: calc(var(--moduix-radius) * 0.6);
+  --moduix-radius-md: calc(var(--moduix-radius) * 0.8);
   --moduix-radius-lg: var(--moduix-radius);
   --moduix-radius-xl: calc(var(--moduix-radius) * 1.2);
   --moduix-radius-full: 9999px;
-}
-
+}