@moduix/react 2.1.0 → 2.2.0

package/dist/lib/moduix/presets/contrast.css

@@ -1,65 +1,64 @@
 [data-moduix-theme="contrast"] {
-  color-scheme: light;
-  --background: oklch(99.5% .001 250);
-  --foreground: oklch(14.5% .018 250);
-  --card: oklch(100% 0 0);
-  --card-foreground: oklch(14.5% .018 250);
-  --popover: oklch(100% 0 0);
-  --popover-foreground: oklch(14.5% .018 250);
-  --primary: oklch(46% .2 255);
-  --primary-foreground: oklch(100% 0 0);
-  --secondary: oklch(94% .012 250);
-  --secondary-foreground: oklch(18% .025 250);
-  --muted: oklch(93% .01 250);
-  --muted-foreground: oklch(39% .026 250);
-  --accent: oklch(90% .04 245);
-  --accent-foreground: oklch(16% .04 250);
-  --border: oklch(72% .025 250);
-  --input: oklch(62% .035 250);
-  --ring: oklch(50% .19 255);
-  --overlay: oklch(9% .018 250 / .38);
-  --overlay-foreground: oklch(9% .018 250 / .12);
-  --sidebar: oklch(96.5% .005 250);
-  --sidebar-foreground: oklch(14.5% .018 250);
-  --sidebar-primary: oklch(46% .2 255);
-  --sidebar-primary-foreground: oklch(100% 0 0);
-  --sidebar-accent: oklch(90% .04 245);
-  --sidebar-accent-foreground: oklch(16% .04 250);
-  --sidebar-border: oklch(72% .025 250);
-  --sidebar-ring: oklch(50% .19 255);
-  --radius: .375rem;
-  --shadow-sm: 0 1px 2px #0f172a1a;
-  --shadow-md: 0 4px 10px #0f172a24;
-  --shadow-lg: 0 16px 30px #0f172a2e;
+  --moduix-background: oklch(99.5% .001 250);
+  --moduix-foreground: oklch(14.5% .018 250);
+  --moduix-card: oklch(100% 0 0);
+  --moduix-card-foreground: oklch(14.5% .018 250);
+  --moduix-popover: oklch(100% 0 0);
+  --moduix-popover-foreground: oklch(14.5% .018 250);
+  --moduix-primary: oklch(46% .2 255);
+  --moduix-primary-foreground: oklch(100% 0 0);
+  --moduix-secondary: oklch(94% .012 250);
+  --moduix-secondary-foreground: oklch(18% .025 250);
+  --moduix-muted: oklch(93% .01 250);
+  --moduix-muted-foreground: oklch(39% .026 250);
+  --moduix-accent: oklch(90% .04 245);
+  --moduix-accent-foreground: oklch(16% .04 250);
+  --moduix-border: oklch(72% .025 250);
+  --moduix-input: oklch(62% .035 250);
+  --moduix-ring: oklch(50% .19 255);
+  --moduix-overlay: oklch(9% .018 250 / .38);
+  --moduix-overlay-foreground: oklch(9% .018 250 / .12);
+  --moduix-sidebar: oklch(96.5% .005 250);
+  --moduix-sidebar-foreground: oklch(14.5% .018 250);
+  --moduix-sidebar-primary: oklch(46% .2 255);
+  --moduix-sidebar-primary-foreground: oklch(100% 0 0);
+  --moduix-sidebar-accent: oklch(90% .04 245);
+  --moduix-sidebar-accent-foreground: oklch(16% .04 250);
+  --moduix-sidebar-border: oklch(72% .025 250);
+  --moduix-sidebar-ring: oklch(50% .19 255);
+  --moduix-radius: .375rem;
+  --moduix-shadow-sm: 0 1px 2px #0f172a1a;
+  --moduix-shadow-md: 0 4px 10px #0f172a24;
+  --moduix-shadow-lg: 0 16px 30px #0f172a2e;
 
-  & .dark, &.dark {
+  &[data-moduix-color-scheme="dark"], & [data-moduix-color-scheme="dark"] {
     color-scheme: dark;
-    --background: oklch(11% .018 250);
-    --foreground: oklch(98.5% .004 250);
-    --card: oklch(15.5% .022 250);
-    --card-foreground: oklch(98.5% .004 250);
-    --popover: oklch(15.5% .022 250);
-    --popover-foreground: oklch(98.5% .004 250);
-    --primary: oklch(76% .13 255);
-    --primary-foreground: oklch(12% .02 250);
-    --secondary: oklch(24% .026 250);
-    --secondary-foreground: oklch(98.5% .004 250);
-    --muted: oklch(22.5% .024 250);
-    --muted-foreground: oklch(76% .018 250);
-    --accent: oklch(30% .06 250);
-    --accent-foreground: oklch(98.5% .004 250);
-    --border: oklch(80% .025 250 / .34);
-    --input: oklch(82% .025 250 / .42);
-    --ring: oklch(74% .13 255);
-    --overlay: oklch(4% .014 250 / .84);
-    --overlay-foreground: oklch(98.5% .004 250 / .12);
-    --sidebar: oklch(13% .02 250);
-    --sidebar-foreground: oklch(98.5% .004 250);
-    --sidebar-primary: oklch(76% .13 255);
-    --sidebar-primary-foreground: oklch(12% .02 250);
-    --sidebar-accent: oklch(30% .06 250);
-    --sidebar-accent-foreground: oklch(98.5% .004 250);
-    --sidebar-border: oklch(80% .025 250 / .34);
-    --sidebar-ring: oklch(74% .13 255);
+    --moduix-background: oklch(11% .018 250);
+    --moduix-foreground: oklch(98.5% .004 250);
+    --moduix-card: oklch(15.5% .022 250);
+    --moduix-card-foreground: oklch(98.5% .004 250);
+    --moduix-popover: oklch(15.5% .022 250);
+    --moduix-popover-foreground: oklch(98.5% .004 250);
+    --moduix-primary: oklch(76% .13 255);
+    --moduix-primary-foreground: oklch(12% .02 250);
+    --moduix-secondary: oklch(24% .026 250);
+    --moduix-secondary-foreground: oklch(98.5% .004 250);
+    --moduix-muted: oklch(22.5% .024 250);
+    --moduix-muted-foreground: oklch(76% .018 250);
+    --moduix-accent: oklch(30% .06 250);
+    --moduix-accent-foreground: oklch(98.5% .004 250);
+    --moduix-border: oklch(80% .025 250 / .34);
+    --moduix-input: oklch(82% .025 250 / .42);
+    --moduix-ring: oklch(74% .13 255);
+    --moduix-overlay: oklch(4% .014 250 / .84);
+    --moduix-overlay-foreground: oklch(98.5% .004 250 / .12);
+    --moduix-sidebar: oklch(13% .02 250);
+    --moduix-sidebar-foreground: oklch(98.5% .004 250);
+    --moduix-sidebar-primary: oklch(76% .13 255);
+    --moduix-sidebar-primary-foreground: oklch(12% .02 250);
+    --moduix-sidebar-accent: oklch(30% .06 250);
+    --moduix-sidebar-accent-foreground: oklch(98.5% .004 250);
+    --moduix-sidebar-border: oklch(80% .025 250 / .34);
+    --moduix-sidebar-ring: oklch(74% .13 255);
   }
 }

package/dist/lib/moduix/presets/dense.css

@@ -1,78 +1,77 @@
 [data-moduix-theme="dense"] {
-  color-scheme: light;
-  --background: oklch(98.5% .004 255);
-  --foreground: oklch(18.5% .014 255);
-  --card: oklch(99.8% .002 255);
-  --card-foreground: oklch(18.5% .014 255);
-  --popover: oklch(99.8% .002 255);
-  --popover-foreground: oklch(18.5% .014 255);
-  --primary: oklch(48% .16 255);
-  --primary-foreground: oklch(99% .002 255);
-  --secondary: oklch(95.8% .009 255);
-  --secondary-foreground: oklch(24% .02 255);
-  --muted: oklch(95.2% .008 255);
-  --muted-foreground: oklch(47% .02 255);
-  --accent: oklch(92.5% .02 255);
-  --accent-foreground: oklch(22% .025 255);
-  --border: oklch(88% .015 255);
-  --input: oklch(84% .018 255);
-  --ring: oklch(56% .14 255);
-  --overlay: oklch(16% .02 255 / .24);
-  --overlay-foreground: oklch(16% .02 255 / .08);
-  --sidebar: oklch(97.2% .007 255);
-  --sidebar-foreground: oklch(18.5% .014 255);
-  --sidebar-primary: oklch(48% .16 255);
-  --sidebar-primary-foreground: oklch(99% .002 255);
-  --sidebar-accent: oklch(92.5% .02 255);
-  --sidebar-accent-foreground: oklch(22% .025 255);
-  --sidebar-border: oklch(88% .015 255);
-  --sidebar-ring: oklch(56% .14 255);
-  --radius: .45rem;
-  --spacing-1: 3px;
-  --spacing-2: 6px;
-  --spacing-3: 10px;
-  --spacing-4: 14px;
-  --spacing-5: 18px;
-  --spacing-6: 22px;
-  --spacing-8: 28px;
-  --spacing-10: 36px;
-  --size-xs: 22px;
-  --size-sm: 30px;
-  --size-md: 34px;
-  --size-lg: 38px;
-  --size-xl: 44px;
-  --shadow-sm: 0 1px 2px #0f172a14;
-  --shadow-md: 0 3px 8px #0f172a1a;
-  --shadow-lg: 0 12px 24px #0f172a1f;
+  --moduix-background: oklch(98.5% .004 255);
+  --moduix-foreground: oklch(18.5% .014 255);
+  --moduix-card: oklch(99.8% .002 255);
+  --moduix-card-foreground: oklch(18.5% .014 255);
+  --moduix-popover: oklch(99.8% .002 255);
+  --moduix-popover-foreground: oklch(18.5% .014 255);
+  --moduix-primary: oklch(48% .16 255);
+  --moduix-primary-foreground: oklch(99% .002 255);
+  --moduix-secondary: oklch(95.8% .009 255);
+  --moduix-secondary-foreground: oklch(24% .02 255);
+  --moduix-muted: oklch(95.2% .008 255);
+  --moduix-muted-foreground: oklch(47% .02 255);
+  --moduix-accent: oklch(92.5% .02 255);
+  --moduix-accent-foreground: oklch(22% .025 255);
+  --moduix-border: oklch(88% .015 255);
+  --moduix-input: oklch(84% .018 255);
+  --moduix-ring: oklch(56% .14 255);
+  --moduix-overlay: oklch(16% .02 255 / .24);
+  --moduix-overlay-foreground: oklch(16% .02 255 / .08);
+  --moduix-sidebar: oklch(97.2% .007 255);
+  --moduix-sidebar-foreground: oklch(18.5% .014 255);
+  --moduix-sidebar-primary: oklch(48% .16 255);
+  --moduix-sidebar-primary-foreground: oklch(99% .002 255);
+  --moduix-sidebar-accent: oklch(92.5% .02 255);
+  --moduix-sidebar-accent-foreground: oklch(22% .025 255);
+  --moduix-sidebar-border: oklch(88% .015 255);
+  --moduix-sidebar-ring: oklch(56% .14 255);
+  --moduix-radius: .45rem;
+  --moduix-spacing-1: 3px;
+  --moduix-spacing-2: 6px;
+  --moduix-spacing-3: 10px;
+  --moduix-spacing-4: 14px;
+  --moduix-spacing-5: 18px;
+  --moduix-spacing-6: 22px;
+  --moduix-spacing-8: 28px;
+  --moduix-spacing-10: 36px;
+  --moduix-size-xs: 22px;
+  --moduix-size-sm: 30px;
+  --moduix-size-md: 34px;
+  --moduix-size-lg: 38px;
+  --moduix-size-xl: 44px;
+  --moduix-shadow-sm: 0 1px 2px #0f172a14;
+  --moduix-shadow-md: 0 3px 8px #0f172a1a;
+  --moduix-shadow-lg: 0 12px 24px #0f172a1f;
 
-  & .dark, &.dark {
+  &[data-moduix-color-scheme="dark"], & [data-moduix-color-scheme="dark"] {
     color-scheme: dark;
-    --background: oklch(16% .014 255);
-    --foreground: oklch(97% .003 255);
-    --card: oklch(20.5% .016 255);
-    --card-foreground: oklch(97% .003 255);
-    --popover: oklch(20.5% .016 255);
-    --popover-foreground: oklch(97% .003 255);
-    --primary: oklch(76% .13 255);
-    --primary-foreground: oklch(17% .018 255);
-    --secondary: oklch(25.5% .018 255);
-    --secondary-foreground: oklch(97% .003 255);
-    --muted: oklch(25% .016 255);
-    --muted-foreground: oklch(71% .018 255);
-    --accent: oklch(31% .03 255);
-    --accent-foreground: oklch(97% .003 255);
-    --border: oklch(72% .02 255 / .25);
-    --input: oklch(76% .02 255 / .32);
-    --ring: oklch(70% .12 255);
-    --overlay: oklch(10% .02 255 / .78);
-    --overlay-foreground: oklch(97% .003 255 / .09);
-    --sidebar: oklch(19% .016 255);
-    --sidebar-foreground: oklch(97% .003 255);
-    --sidebar-primary: oklch(76% .13 255);
-    --sidebar-primary-foreground: oklch(17% .018 255);
-    --sidebar-accent: oklch(31% .03 255);
-    --sidebar-accent-foreground: oklch(97% .003 255);
-    --sidebar-border: oklch(72% .02 255 / .25);
-    --sidebar-ring: oklch(70% .12 255);
+    --moduix-background: oklch(16% .014 255);
+    --moduix-foreground: oklch(97% .003 255);
+    --moduix-card: oklch(20.5% .016 255);
+    --moduix-card-foreground: oklch(97% .003 255);
+    --moduix-popover: oklch(20.5% .016 255);
+    --moduix-popover-foreground: oklch(97% .003 255);
+    --moduix-primary: oklch(76% .13 255);
+    --moduix-primary-foreground: oklch(17% .018 255);
+    --moduix-secondary: oklch(25.5% .018 255);
+    --moduix-secondary-foreground: oklch(97% .003 255);
+    --moduix-muted: oklch(25% .016 255);
+    --moduix-muted-foreground: oklch(71% .018 255);
+    --moduix-accent: oklch(31% .03 255);
+    --moduix-accent-foreground: oklch(97% .003 255);
+    --moduix-border: oklch(72% .02 255 / .25);
+    --moduix-input: oklch(76% .02 255 / .32);
+    --moduix-ring: oklch(70% .12 255);
+    --moduix-overlay: oklch(10% .02 255 / .78);
+    --moduix-overlay-foreground: oklch(97% .003 255 / .09);
+    --moduix-sidebar: oklch(19% .016 255);
+    --moduix-sidebar-foreground: oklch(97% .003 255);
+    --moduix-sidebar-primary: oklch(76% .13 255);
+    --moduix-sidebar-primary-foreground: oklch(17% .018 255);
+    --moduix-sidebar-accent: oklch(31% .03 255);
+    --moduix-sidebar-accent-foreground: oklch(97% .003 255);
+    --moduix-sidebar-border: oklch(72% .02 255 / .25);
+    --moduix-sidebar-ring: oklch(70% .12 255);
   }
 }

package/dist/lib/moduix/presets/soft.css

@@ -1,77 +1,76 @@
 [data-moduix-theme="soft"] {
-  color-scheme: light;
-  --background: oklch(98.5% .012 320);
-  --foreground: oklch(22.5% .024 315);
-  --card: oklch(99.8% .004 320);
-  --card-foreground: oklch(22.5% .024 315);
-  --popover: oklch(99.8% .004 320);
-  --popover-foreground: oklch(22.5% .024 315);
-  --primary: oklch(54% .18 305);
-  --primary-foreground: oklch(99% .004 320);
-  --secondary: oklch(95.8% .018 320);
-  --secondary-foreground: oklch(30% .04 310);
-  --muted: oklch(95% .016 320);
-  --muted-foreground: oklch(50% .035 315);
-  --accent: oklch(92% .04 315);
-  --accent-foreground: oklch(29% .05 305);
-  --border: oklch(88% .025 320);
-  --input: oklch(84% .03 320);
-  --ring: oklch(61% .15 305);
-  --overlay: oklch(22% .035 310 / .22);
-  --overlay-foreground: oklch(22% .035 310 / .08);
-  --sidebar: oklch(97.5% .014 320);
-  --sidebar-foreground: oklch(22.5% .024 315);
-  --sidebar-primary: oklch(54% .18 305);
-  --sidebar-primary-foreground: oklch(99% .004 320);
-  --sidebar-accent: oklch(92% .04 315);
-  --sidebar-accent-foreground: oklch(29% .05 305);
-  --sidebar-border: oklch(88% .025 320);
-  --sidebar-ring: oklch(61% .15 305);
-  --radius: 1rem;
-  --spacing-2: 9px;
-  --spacing-3: 14px;
-  --spacing-4: 18px;
-  --spacing-5: 22px;
-  --spacing-6: 28px;
-  --spacing-8: 36px;
-  --spacing-10: 44px;
-  --size-xs: 26px;
-  --size-sm: 34px;
-  --size-md: 40px;
-  --size-lg: 44px;
-  --size-xl: 52px;
-  --shadow-sm: 0 2px 6px #61236b14;
-  --shadow-md: 0 8px 18px #61236b1f;
-  --shadow-lg: 0 18px 38px #61236b29;
+  --moduix-background: oklch(98.5% .012 320);
+  --moduix-foreground: oklch(22.5% .024 315);
+  --moduix-card: oklch(99.8% .004 320);
+  --moduix-card-foreground: oklch(22.5% .024 315);
+  --moduix-popover: oklch(99.8% .004 320);
+  --moduix-popover-foreground: oklch(22.5% .024 315);
+  --moduix-primary: oklch(54% .18 305);
+  --moduix-primary-foreground: oklch(99% .004 320);
+  --moduix-secondary: oklch(95.8% .018 320);
+  --moduix-secondary-foreground: oklch(30% .04 310);
+  --moduix-muted: oklch(95% .016 320);
+  --moduix-muted-foreground: oklch(50% .035 315);
+  --moduix-accent: oklch(92% .04 315);
+  --moduix-accent-foreground: oklch(29% .05 305);
+  --moduix-border: oklch(88% .025 320);
+  --moduix-input: oklch(84% .03 320);
+  --moduix-ring: oklch(61% .15 305);
+  --moduix-overlay: oklch(22% .035 310 / .22);
+  --moduix-overlay-foreground: oklch(22% .035 310 / .08);
+  --moduix-sidebar: oklch(97.5% .014 320);
+  --moduix-sidebar-foreground: oklch(22.5% .024 315);
+  --moduix-sidebar-primary: oklch(54% .18 305);
+  --moduix-sidebar-primary-foreground: oklch(99% .004 320);
+  --moduix-sidebar-accent: oklch(92% .04 315);
+  --moduix-sidebar-accent-foreground: oklch(29% .05 305);
+  --moduix-sidebar-border: oklch(88% .025 320);
+  --moduix-sidebar-ring: oklch(61% .15 305);
+  --moduix-radius: 1rem;
+  --moduix-spacing-2: 9px;
+  --moduix-spacing-3: 14px;
+  --moduix-spacing-4: 18px;
+  --moduix-spacing-5: 22px;
+  --moduix-spacing-6: 28px;
+  --moduix-spacing-8: 36px;
+  --moduix-spacing-10: 44px;
+  --moduix-size-xs: 26px;
+  --moduix-size-sm: 34px;
+  --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;
 
-  & .dark, &.dark {
+  &[data-moduix-color-scheme="dark"], & [data-moduix-color-scheme="dark"] {
     color-scheme: dark;
-    --background: oklch(17% .018 315);
-    --foreground: oklch(97.2% .006 320);
-    --card: oklch(22% .022 315);
-    --card-foreground: oklch(97.2% .006 320);
-    --popover: oklch(22% .022 315);
-    --popover-foreground: oklch(97.2% .006 320);
-    --primary: oklch(78% .13 305);
-    --primary-foreground: oklch(23% .026 315);
-    --secondary: oklch(28.5% .03 315);
-    --secondary-foreground: oklch(97.2% .006 320);
-    --muted: oklch(27.5% .026 315);
-    --muted-foreground: oklch(74% .03 320);
-    --accent: oklch(34% .06 310);
-    --accent-foreground: oklch(97.2% .006 320);
-    --border: oklch(76% .035 320 / .24);
-    --input: oklch(76% .035 320 / .3);
-    --ring: oklch(74% .11 305);
-    --overlay: oklch(10% .02 315 / .8);
-    --overlay-foreground: oklch(97.2% .006 320 / .1);
-    --sidebar: oklch(20% .022 315);
-    --sidebar-foreground: oklch(97.2% .006 320);
-    --sidebar-primary: oklch(78% .13 305);
-    --sidebar-primary-foreground: oklch(23% .026 315);
-    --sidebar-accent: oklch(34% .06 310);
-    --sidebar-accent-foreground: oklch(97.2% .006 320);
-    --sidebar-border: oklch(76% .035 320 / .24);
-    --sidebar-ring: oklch(74% .11 305);
+    --moduix-background: oklch(17% .018 315);
+    --moduix-foreground: oklch(97.2% .006 320);
+    --moduix-card: oklch(22% .022 315);
+    --moduix-card-foreground: oklch(97.2% .006 320);
+    --moduix-popover: oklch(22% .022 315);
+    --moduix-popover-foreground: oklch(97.2% .006 320);
+    --moduix-primary: oklch(78% .13 305);
+    --moduix-primary-foreground: oklch(23% .026 315);
+    --moduix-secondary: oklch(28.5% .03 315);
+    --moduix-secondary-foreground: oklch(97.2% .006 320);
+    --moduix-muted: oklch(27.5% .026 315);
+    --moduix-muted-foreground: oklch(74% .03 320);
+    --moduix-accent: oklch(34% .06 310);
+    --moduix-accent-foreground: oklch(97.2% .006 320);
+    --moduix-border: oklch(76% .035 320 / .24);
+    --moduix-input: oklch(76% .035 320 / .3);
+    --moduix-ring: oklch(74% .11 305);
+    --moduix-overlay: oklch(10% .02 315 / .8);
+    --moduix-overlay-foreground: oklch(97.2% .006 320 / .1);
+    --moduix-sidebar: oklch(20% .022 315);
+    --moduix-sidebar-foreground: oklch(97.2% .006 320);
+    --moduix-sidebar-primary: oklch(78% .13 305);
+    --moduix-sidebar-primary-foreground: oklch(23% .026 315);
+    --moduix-sidebar-accent: oklch(34% .06 310);
+    --moduix-sidebar-accent-foreground: oklch(97.2% .006 320);
+    --moduix-sidebar-border: oklch(76% .035 320 / .24);
+    --moduix-sidebar-ring: oklch(74% .11 305);
   }
 }

package/dist/lib/moduix/styles/reset.css

@@ -31,7 +31,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-@layer ui.reset {
+@layer moduix.reset {
   *, :after, :before, ::backdrop, ::file-selector-button {
     box-sizing: border-box;
     border: 0 solid;