@moduix/react 2.1.0 → 2.2.0

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

@@ -1,6 +1,6 @@
-@layer ui.reset;
+@layer moduix.reset;
 
-@layer ui.tokens {
+@layer moduix.tokens {
   @keyframes moduix-pulse {
     50% {
       opacity: .3;
@@ -44,258 +44,262 @@
   }
 
   :root {
-    --animation-pulse: moduix-pulse 2.5s ease-in-out infinite;
-    --animation-fade-in: moduix-fade-in var(--duration-normal) var(--ease-out);
-    --animation-fade-out: moduix-fade-out var(--duration-normal) var(--ease-in);
-    --animation-slide-up: moduix-slide-up var(--duration-normal) var(--ease-out);
-    --animation-slide-down: moduix-slide-down var(--duration-normal) var(--ease-out);
-    --animation-spin: moduix-spin .75s linear infinite;
+    --moduix-animation-pulse: moduix-pulse 2.5s ease-in-out infinite;
+    --moduix-animation-fade-in: moduix-fade-in var(--moduix-duration-normal) var(--moduix-ease-out);
+    --moduix-animation-fade-out: moduix-fade-out var(--moduix-duration-normal) var(--moduix-ease-in);
+    --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;
   }
 
   @media (prefers-reduced-motion: reduce) {
     :root {
-      --animation-pulse: none;
-      --animation-fade-in: none;
-      --animation-fade-out: none;
-      --animation-slide-up: none;
-      --animation-slide-down: none;
-      --animation-spin: none;
+      --moduix-animation-pulse: none;
+      --moduix-animation-fade-in: none;
+      --moduix-animation-fade-out: none;
+      --moduix-animation-slide-up: none;
+      --moduix-animation-slide-down: none;
+      --moduix-animation-spin: none;
     }
   }
 
   :root {
-    --border-width-sm: 1px;
-    --border-width-md: 2px;
-    --border-width-lg: 4px;
-    --focus-ring-width: var(--border-width-md);
-    --focus-ring-inset-width: var(--border-width-sm);
-    --focus-ring-offset: var(--spacing-0-5);
-    --focus-ring-inset-offset: calc(var(--border-width-sm) * -1);
+    --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);
   }
 
   :root {
-    color-scheme: light;
-    --background: oklch(98.2% .003 285);
-    --foreground: oklch(17.5% .01 285);
-    --card: oklch(99.5% .002 285);
-    --card-foreground: oklch(17.5% .01 285);
-    --popover: oklch(99.5% .002 285);
-    --popover-foreground: oklch(17.5% .01 285);
-    --primary: oklch(23.5% .016 285);
-    --primary-foreground: oklch(98.2% .003 285);
-    --secondary: oklch(96% .006 285);
-    --secondary-foreground: oklch(23.5% .016 285);
-    --muted: oklch(95.5% .006 285);
-    --muted-foreground: oklch(48.5% .015 285);
-    --accent: oklch(95% .01 285);
-    --accent-foreground: oklch(23.5% .016 285);
-    --destructive: oklch(56.5% .235 22);
-    --destructive-foreground: var(--primary-foreground);
-    --success: oklch(62.7% .194 149.214);
-    --warning: oklch(79.5% .184 86.047);
-    --border: oklch(90.5% .008 285);
-    --input: oklch(90.5% .008 285);
-    --ring: oklch(62% .035 285);
-    --overlay: oklch(17.5% .014 285 / .2);
-    --overlay-foreground: oklch(17.5% .014 285 / .07);
-    --chart-1: oklch(65% .18 295);
-    --chart-2: oklch(70% .14 175);
-    --chart-3: oklch(72% .16 55);
-    --chart-4: oklch(60% .2 350);
-    --chart-5: oklch(68% .13 130);
-    --sidebar: oklch(97.5% .005 285);
-    --sidebar-foreground: oklch(17.5% .01 285);
-    --sidebar-primary: oklch(23.5% .016 285);
-    --sidebar-primary-foreground: oklch(98.2% .003 285);
-    --sidebar-accent: oklch(95% .01 285);
-    --sidebar-accent-foreground: oklch(23.5% .016 285);
-    --sidebar-border: oklch(90.5% .008 285);
-    --sidebar-ring: oklch(62% .035 285);
+    --moduix-background: oklch(98.2% .003 285);
+    --moduix-foreground: oklch(17.5% .01 285);
+    --moduix-card: oklch(99.5% .002 285);
+    --moduix-card-foreground: oklch(17.5% .01 285);
+    --moduix-popover: oklch(99.5% .002 285);
+    --moduix-popover-foreground: oklch(17.5% .01 285);
+    --moduix-primary: oklch(23.5% .016 285);
+    --moduix-primary-foreground: oklch(98.2% .003 285);
+    --moduix-secondary: oklch(96% .006 285);
+    --moduix-secondary-foreground: oklch(23.5% .016 285);
+    --moduix-muted: oklch(95.5% .006 285);
+    --moduix-muted-foreground: oklch(48.5% .015 285);
+    --moduix-accent: oklch(95% .01 285);
+    --moduix-accent-foreground: oklch(23.5% .016 285);
+    --moduix-destructive: oklch(56.5% .235 22);
+    --moduix-destructive-foreground: var(--moduix-primary-foreground);
+    --moduix-success: oklch(62.7% .194 149.214);
+    --moduix-warning: oklch(79.5% .184 86.047);
+    --moduix-border: oklch(90.5% .008 285);
+    --moduix-input: oklch(90.5% .008 285);
+    --moduix-ring: oklch(62% .035 285);
+    --moduix-overlay: oklch(17.5% .014 285 / .2);
+    --moduix-overlay-foreground: oklch(17.5% .014 285 / .07);
+    --moduix-chart-1: oklch(65% .18 295);
+    --moduix-chart-2: oklch(70% .14 175);
+    --moduix-chart-3: oklch(72% .16 55);
+    --moduix-chart-4: oklch(60% .2 350);
+    --moduix-chart-5: oklch(68% .13 130);
+    --moduix-sidebar: oklch(97.5% .005 285);
+    --moduix-sidebar-foreground: oklch(17.5% .01 285);
+    --moduix-sidebar-primary: oklch(23.5% .016 285);
+    --moduix-sidebar-primary-foreground: oklch(98.2% .003 285);
+    --moduix-sidebar-accent: oklch(95% .01 285);
+    --moduix-sidebar-accent-foreground: oklch(23.5% .016 285);
+    --moduix-sidebar-border: oklch(90.5% .008 285);
+    --moduix-sidebar-ring: oklch(62% .035 285);
 
-    & .dark, &.dark {
+    &[data-moduix-color-scheme="light"], & [data-moduix-color-scheme="light"] {
+      color-scheme: light;
+    }
+
+    &[data-moduix-color-scheme="dark"], & [data-moduix-color-scheme="dark"] {
       color-scheme: dark;
-      --background: oklch(15.5% .008 285);
-      --foreground: oklch(96.8% .003 285);
-      --card: oklch(20% .011 285);
-      --card-foreground: oklch(96.8% .003 285);
-      --popover: oklch(20% .011 285);
-      --popover-foreground: oklch(96.8% .003 285);
-      --primary: oklch(91.8% .007 285);
-      --primary-foreground: oklch(20% .011 285);
-      --secondary: oklch(25.5% .012 285);
-      --secondary-foreground: oklch(96.8% .003 285);
-      --muted: oklch(25.5% .012 285);
-      --muted-foreground: oklch(70.5% .016 285);
-      --accent: oklch(29% .015 285);
-      --accent-foreground: oklch(96.8% .003 285);
-      --destructive: oklch(69% .185 18);
-      --destructive-foreground: var(--primary-foreground);
-      --success: oklch(62.7% .194 149.214);
-      --warning: oklch(79.5% .184 86.047);
-      --border: oklch(100% .004 285 / .13);
-      --input: oklch(100% .004 285 / .17);
-      --ring: oklch(58.5% .038 285);
-      --overlay: oklch(10.5% .012 285 / .74);
-      --overlay-foreground: oklch(96.8% .003 285 / .09);
-      --chart-1: oklch(72% .17 295);
-      --chart-2: oklch(76% .13 175);
-      --chart-3: oklch(78% .15 55);
-      --chart-4: oklch(67% .19 350);
-      --chart-5: oklch(74% .12 130);
-      --sidebar: oklch(20% .011 285);
-      --sidebar-foreground: oklch(96.8% .003 285);
-      --sidebar-primary: oklch(72% .17 295);
-      --sidebar-primary-foreground: oklch(15.5% .008 285);
-      --sidebar-accent: oklch(29% .015 285);
-      --sidebar-accent-foreground: oklch(96.8% .003 285);
-      --sidebar-border: oklch(100% .004 285 / .13);
-      --sidebar-ring: oklch(58.5% .038 285);
+      --moduix-background: oklch(15.5% .008 285);
+      --moduix-foreground: oklch(96.8% .003 285);
+      --moduix-card: oklch(20% .011 285);
+      --moduix-card-foreground: oklch(96.8% .003 285);
+      --moduix-popover: oklch(20% .011 285);
+      --moduix-popover-foreground: oklch(96.8% .003 285);
+      --moduix-primary: oklch(91.8% .007 285);
+      --moduix-primary-foreground: oklch(20% .011 285);
+      --moduix-secondary: oklch(25.5% .012 285);
+      --moduix-secondary-foreground: oklch(96.8% .003 285);
+      --moduix-muted: oklch(25.5% .012 285);
+      --moduix-muted-foreground: oklch(70.5% .016 285);
+      --moduix-accent: oklch(29% .015 285);
+      --moduix-accent-foreground: oklch(96.8% .003 285);
+      --moduix-destructive: oklch(69% .185 18);
+      --moduix-destructive-foreground: var(--moduix-primary-foreground);
+      --moduix-success: oklch(62.7% .194 149.214);
+      --moduix-warning: oklch(79.5% .184 86.047);
+      --moduix-border: oklch(100% .004 285 / .13);
+      --moduix-input: oklch(100% .004 285 / .17);
+      --moduix-ring: oklch(58.5% .038 285);
+      --moduix-overlay: oklch(10.5% .012 285 / .74);
+      --moduix-overlay-foreground: oklch(96.8% .003 285 / .09);
+      --moduix-chart-1: oklch(72% .17 295);
+      --moduix-chart-2: oklch(76% .13 175);
+      --moduix-chart-3: oklch(78% .15 55);
+      --moduix-chart-4: oklch(67% .19 350);
+      --moduix-chart-5: oklch(74% .12 130);
+      --moduix-sidebar: oklch(20% .011 285);
+      --moduix-sidebar-foreground: oklch(96.8% .003 285);
+      --moduix-sidebar-primary: oklch(72% .17 295);
+      --moduix-sidebar-primary-foreground: oklch(15.5% .008 285);
+      --moduix-sidebar-accent: oklch(29% .015 285);
+      --moduix-sidebar-accent-foreground: oklch(96.8% .003 285);
+      --moduix-sidebar-border: oklch(100% .004 285 / .13);
+      --moduix-sidebar-ring: oklch(58.5% .038 285);
     }
 
-    --color-background: var(--background);
-    --color-foreground: var(--foreground);
-    --color-card: var(--card);
-    --color-card-foreground: var(--card-foreground);
-    --color-popover: var(--popover);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-primary: var(--primary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-secondary: var(--secondary);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-muted: var(--muted);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-accent: var(--accent);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-destructive: var(--destructive);
-    --color-destructive-foreground: var(--destructive-foreground);
-    --color-success: var(--success);
-    --color-warning: var(--warning);
-    --color-border: var(--border);
-    --color-input: var(--input);
-    --color-ring: var(--ring);
-    --color-overlay: var(--overlay);
-    --color-overlay-foreground: var(--overlay-foreground);
-    --color-chart-1: var(--chart-1);
-    --color-chart-2: var(--chart-2);
-    --color-chart-3: var(--chart-3);
-    --color-chart-4: var(--chart-4);
-    --color-chart-5: var(--chart-5);
-    --color-sidebar: var(--sidebar);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-ring: var(--sidebar-ring);
+    --moduix-color-background: var(--moduix-background);
+    --moduix-color-foreground: var(--moduix-foreground);
+    --moduix-color-card: var(--moduix-card);
+    --moduix-color-card-foreground: var(--moduix-card-foreground);
+    --moduix-color-popover: var(--moduix-popover);
+    --moduix-color-popover-foreground: var(--moduix-popover-foreground);
+    --moduix-color-primary: var(--moduix-primary);
+    --moduix-color-primary-foreground: var(--moduix-primary-foreground);
+    --moduix-color-secondary: var(--moduix-secondary);
+    --moduix-color-secondary-foreground: var(--moduix-secondary-foreground);
+    --moduix-color-muted: var(--moduix-muted);
+    --moduix-color-muted-foreground: var(--moduix-muted-foreground);
+    --moduix-color-accent: var(--moduix-accent);
+    --moduix-color-accent-foreground: var(--moduix-accent-foreground);
+    --moduix-color-destructive: var(--moduix-destructive);
+    --moduix-color-destructive-foreground: var(--moduix-destructive-foreground);
+    --moduix-color-success: var(--moduix-success);
+    --moduix-color-warning: var(--moduix-warning);
+    --moduix-color-border: var(--moduix-border);
+    --moduix-color-input: var(--moduix-input);
+    --moduix-color-ring: var(--moduix-ring);
+    --moduix-color-overlay: var(--moduix-overlay);
+    --moduix-color-overlay-foreground: var(--moduix-overlay-foreground);
+    --moduix-color-chart-1: var(--moduix-chart-1);
+    --moduix-color-chart-2: var(--moduix-chart-2);
+    --moduix-color-chart-3: var(--moduix-chart-3);
+    --moduix-color-chart-4: var(--moduix-chart-4);
+    --moduix-color-chart-5: var(--moduix-chart-5);
+    --moduix-color-sidebar: var(--moduix-sidebar);
+    --moduix-color-sidebar-foreground: var(--moduix-sidebar-foreground);
+    --moduix-color-sidebar-primary: var(--moduix-sidebar-primary);
+    --moduix-color-sidebar-primary-foreground: var(--moduix-sidebar-primary-foreground);
+    --moduix-color-sidebar-accent: var(--moduix-sidebar-accent);
+    --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);
   }
 
   :root {
-    --opacity-disabled: .5;
-    --opacity-loading: .85;
-    --opacity-hover: .9;
-    --radius: .625rem;
-    --radius-none: 0;
-    --radius-xs: calc(var(--radius) * .4);
-    --radius-sm: calc(var(--radius) * .6);
-    --radius-md: calc(var(--radius) * .8);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) * 1.2);
-    --radius-full: 9999px;
-    --shadow-sm: 0 2px 4px 0 #0000001a, 0 1px 2px -1px #0000001a;
-    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
-    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
-    --size-xs: 24px;
-    --size-sm: 32px;
-    --size-md: 36px;
-    --size-lg: 40px;
-    --size-xl: 48px;
-    --spacing-0: 0px;
-    --spacing-1: 4px;
-    --spacing-0-5: calc((var(--spacing-0) + var(--spacing-1)) / 2);
-    --spacing-2: 8px;
-    --spacing-1-5: calc((var(--spacing-1) + var(--spacing-2)) / 2);
-    --spacing-3: 12px;
-    --spacing-2-5: calc((var(--spacing-2) + var(--spacing-3)) / 2);
-    --spacing-4: 16px;
-    --spacing-3-5: calc((var(--spacing-3) + var(--spacing-4)) / 2);
-    --spacing-5: 20px;
-    --spacing-4-5: calc((var(--spacing-4) + var(--spacing-5)) / 2);
-    --spacing-6: 24px;
-    --spacing-7: calc((var(--spacing-6) + var(--spacing-8)) / 2);
-    --spacing-8: 32px;
-    --spacing-10: 40px;
-    --spacing-xs: var(--spacing-1);
-    --spacing-sm: var(--spacing-2);
-    --spacing-md: var(--spacing-3);
-    --spacing-lg: var(--spacing-4);
-    --spacing-xl: var(--spacing-5);
-    --spacing-2xl: var(--spacing-6);
-    --scale-popup: .9;
-    --scale-dropdown: .95;
-    --duration-fast: .15s;
-    --duration-normal: .2s;
-    --duration-slow: .35s;
-    --duration-slower: .45s;
-    --ease-in: cubic-bezier(.4, 0, 1, 1);
-    --ease-out: cubic-bezier(0, 0, .2, 1);
-    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
-    --ease-standard: ease;
-    --ease-spring: cubic-bezier(.32, .72, 0, 1);
-    --ease-emphasized: cubic-bezier(.22, 1, .36, 1);
-    --transition-default: var(--duration-normal) var(--ease-in-out);
-    --transition-fast: var(--duration-fast) var(--ease-in-out);
-    --transition-slow: var(--duration-slow) var(--ease-in-out);
-    --transition-slower: var(--duration-slower) var(--ease-in-out);
-    --transition-spring: var(--duration-slower) var(--ease-spring);
-    --transition-emphasized: var(--duration-slower) var(--ease-emphasized);
+    --moduix-opacity-disabled: .5;
+    --moduix-opacity-loading: .85;
+    --moduix-opacity-hover: .9;
+    --moduix-radius: .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-lg: var(--moduix-radius);
+    --moduix-radius-xl: calc(var(--moduix-radius) * 1.2);
+    --moduix-radius-full: 9999px;
+    --moduix-shadow-sm: 0 2px 4px 0 #0000001a, 0 1px 2px -1px #0000001a;
+    --moduix-shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+    --moduix-shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+    --moduix-size-xs: 24px;
+    --moduix-size-sm: 32px;
+    --moduix-size-md: 36px;
+    --moduix-size-lg: 40px;
+    --moduix-size-xl: 48px;
+    --moduix-spacing-0: 0px;
+    --moduix-spacing-1: 4px;
+    --moduix-spacing-0-5: calc((var(--moduix-spacing-0) + var(--moduix-spacing-1)) / 2);
+    --moduix-spacing-2: 8px;
+    --moduix-spacing-1-5: calc((var(--moduix-spacing-1) + var(--moduix-spacing-2)) / 2);
+    --moduix-spacing-3: 12px;
+    --moduix-spacing-2-5: calc((var(--moduix-spacing-2) + var(--moduix-spacing-3)) / 2);
+    --moduix-spacing-4: 16px;
+    --moduix-spacing-3-5: calc((var(--moduix-spacing-3) + var(--moduix-spacing-4)) / 2);
+    --moduix-spacing-5: 20px;
+    --moduix-spacing-4-5: calc((var(--moduix-spacing-4) + var(--moduix-spacing-5)) / 2);
+    --moduix-spacing-6: 24px;
+    --moduix-spacing-7: calc((var(--moduix-spacing-6) + var(--moduix-spacing-8)) / 2);
+    --moduix-spacing-8: 32px;
+    --moduix-spacing-10: 40px;
+    --moduix-spacing-xs: var(--moduix-spacing-1);
+    --moduix-spacing-sm: var(--moduix-spacing-2);
+    --moduix-spacing-md: var(--moduix-spacing-3);
+    --moduix-spacing-lg: var(--moduix-spacing-4);
+    --moduix-spacing-xl: var(--moduix-spacing-5);
+    --moduix-spacing-2xl: var(--moduix-spacing-6);
+    --moduix-scale-popup: .9;
+    --moduix-scale-dropdown: .95;
+    --moduix-duration-fast: .15s;
+    --moduix-duration-normal: .2s;
+    --moduix-duration-slow: .35s;
+    --moduix-duration-slower: .45s;
+    --moduix-ease-in: cubic-bezier(.4, 0, 1, 1);
+    --moduix-ease-out: cubic-bezier(0, 0, .2, 1);
+    --moduix-ease-in-out: cubic-bezier(.4, 0, .2, 1);
+    --moduix-ease-standard: ease;
+    --moduix-ease-spring: cubic-bezier(.32, .72, 0, 1);
+    --moduix-ease-emphasized: cubic-bezier(.22, 1, .36, 1);
+    --moduix-transition-default: var(--moduix-duration-normal) var(--moduix-ease-in-out);
+    --moduix-transition-fast: var(--moduix-duration-fast) var(--moduix-ease-in-out);
+    --moduix-transition-slow: var(--moduix-duration-slow) var(--moduix-ease-in-out);
+    --moduix-transition-slower: var(--moduix-duration-slower) var(--moduix-ease-in-out);
+    --moduix-transition-spring: var(--moduix-duration-slower) var(--moduix-ease-spring);
+    --moduix-transition-emphasized: var(--moduix-duration-slower) var(--moduix-ease-emphasized);
   }
 
   @media (prefers-reduced-motion: reduce) {
     :root {
-      --duration-fast: .01ms;
-      --duration-normal: .01ms;
-      --duration-slow: .01ms;
-      --duration-slower: .01ms;
+      --moduix-duration-fast: .01ms;
+      --moduix-duration-normal: .01ms;
+      --moduix-duration-slow: .01ms;
+      --moduix-duration-slower: .01ms;
     }
   }
 
   :root {
-    --font-sans: "Noto Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    --moduix-font-sans: "Noto Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol", "Noto Color Emoji";
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    --moduix-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
-    --weight-regular: 400;
-    --weight-medium: 500;
-    --weight-semibold: 600;
-    --weight-bold: 700;
-    --text-xs: 12px;
-    --text-sm: 14px;
-    --text-md: 16px;
-    --text-lg: 18px;
-    --text-xl: 20px;
-    --text-2xl: 24px;
-    --text-3xl: 30px;
-    --line-height-text-xs: 16px;
-    --line-height-text-sm: 20px;
-    --line-height-text-md: 24px;
-    --line-height-text-lg: 28px;
-    --line-height-text-xl: 28px;
-    --line-height-text-2xl: 32px;
-    --line-height-text-3xl: 36px;
-    --tracking-text-sm: -.01em;
-    --tracking-text-xs: -.016em;
-    --z-default: 1;
-    --z-xs: 5;
-    --z-sm: 10;
-    --z-md: 20;
-    --z-lg: 30;
-    --z-xl: 40;
-    --z-backdrop: 40;
-    --z-modal: 50;
-    --z-popup: 60;
-    --z-toast: 70;
+    --moduix-weight-regular: 400;
+    --moduix-weight-medium: 500;
+    --moduix-weight-semibold: 600;
+    --moduix-weight-bold: 700;
+    --moduix-text-xs: 12px;
+    --moduix-text-sm: 14px;
+    --moduix-text-md: 16px;
+    --moduix-text-lg: 18px;
+    --moduix-text-xl: 20px;
+    --moduix-text-2xl: 24px;
+    --moduix-text-3xl: 30px;
+    --moduix-line-height-text-xs: 16px;
+    --moduix-line-height-text-sm: 20px;
+    --moduix-line-height-text-md: 24px;
+    --moduix-line-height-text-lg: 28px;
+    --moduix-line-height-text-xl: 28px;
+    --moduix-line-height-text-2xl: 32px;
+    --moduix-line-height-text-3xl: 36px;
+    --moduix-tracking-text-sm: -.01em;
+    --moduix-tracking-text-xs: -.016em;
+    --moduix-z-default: 1;
+    --moduix-z-xs: 5;
+    --moduix-z-sm: 10;
+    --moduix-z-md: 20;
+    --moduix-z-lg: 30;
+    --moduix-z-xl: 40;
+    --moduix-z-backdrop: 40;
+    --moduix-z-modal: 50;
+    --moduix-z-popup: 60;
+    --moduix-z-toast: 70;
   }
 }
 
-@layer ui.base, ui.components;
+@layer moduix.base, moduix.components;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moduix/react",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "React implementation of the moduix component system, built on Ark UI primitives.",
   "keywords": [
     "accessible",