@revikornmann/muka-ui 0.5.0 → 0.7.0

package/dist/styles/tokens-bouwplan-dark.css

@@ -142,6 +142,17 @@
   --container-gap-default: 2rem;
   --container-gap-compact: 1.5rem;
   --container-gap-spacious: 2.5rem;
+  --duration-none: 0ms;
+  --duration-instant: 100ms;
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 500ms;
+  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --easing-exit: cubic-bezier(0.4, 0, 1, 1);
+  --easing-spring: cubic-bezier(0.16, 1, 0.3, 1);
+  --easing-linear: linear;
   --color-white: #ffffff;
   --color-black: #000000;
   --color-gray-1: #fcfcfc;
@@ -540,6 +551,102 @@
   --color-white-alpha-10: rgba(255, 255, 255, 0.478);
   --color-white-alpha-11: rgba(255, 255, 255, 0.565);
   --color-white-alpha-12: rgba(255, 255, 255, 0.910);
+  --color-mauveA-1: rgba(85, 0, 85, 0.012);
+  --color-mauveA-2: rgba(43, 0, 85, 0.024);
+  --color-mauveA-3: rgba(48, 0, 64, 0.063);
+  --color-mauveA-4: rgba(32, 0, 54, 0.094);
+  --color-mauveA-5: rgba(32, 0, 56, 0.125);
+  --color-mauveA-6: rgba(20, 0, 53, 0.153);
+  --color-mauveA-7: rgba(16, 0, 51, 0.196);
+  --color-mauveA-8: rgba(8, 0, 49, 0.271);
+  --color-mauveA-9: rgba(5, 0, 29, 0.451);
+  --color-mauveA-10: rgba(5, 0, 25, 0.49);
+  --color-mauveA-11: rgba(4, 0, 17, 0.612);
+  --color-mauveA-12: rgba(2, 0, 8, 0.878);
+  --color-grayA-1: rgba(0, 0, 0, 0.012);
+  --color-grayA-2: rgba(0, 0, 0, 0.024);
+  --color-grayA-3: rgba(0, 0, 0, 0.059);
+  --color-grayA-4: rgba(0, 0, 0, 0.09);
+  --color-grayA-5: rgba(0, 0, 0, 0.122);
+  --color-grayA-6: rgba(0, 0, 0, 0.149);
+  --color-grayA-7: rgba(0, 0, 0, 0.192);
+  --color-grayA-8: rgba(0, 0, 0, 0.267);
+  --color-grayA-9: rgba(0, 0, 0, 0.447);
+  --color-grayA-10: rgba(0, 0, 0, 0.486);
+  --color-grayA-11: rgba(0, 0, 0, 0.608);
+  --color-grayA-12: rgba(0, 0, 0, 0.875);
+  --color-sandA-1: rgba(85, 85, 0, 0.012);
+  --color-sandA-2: rgba(37, 37, 0, 0.027);
+  --color-sandA-3: rgba(32, 16, 0, 0.063);
+  --color-sandA-4: rgba(31, 21, 0, 0.098);
+  --color-sandA-5: rgba(31, 24, 0, 0.129);
+  --color-sandA-6: rgba(25, 19, 0, 0.161);
+  --color-sandA-7: rgba(25, 20, 0, 0.208);
+  --color-sandA-8: rgba(25, 21, 1, 0.29);
+  --color-sandA-9: rgba(15, 15, 0, 0.475);
+  --color-sandA-10: rgba(12, 12, 0, 0.514);
+  --color-sandA-11: rgba(8, 8, 0, 0.631);
+  --color-sandA-12: rgba(6, 5, 0, 0.89);
+  --color-sageA-1: rgba(0, 128, 64, 0.016);
+  --color-sageA-2: rgba(0, 64, 32, 0.031);
+  --color-sageA-3: rgba(0, 45, 30, 0.067);
+  --color-sageA-4: rgba(0, 31, 21, 0.098);
+  --color-sageA-5: rgba(0, 24, 8, 0.125);
+  --color-sageA-6: rgba(0, 20, 13, 0.157);
+  --color-sageA-7: rgba(0, 20, 10, 0.204);
+  --color-sageA-8: rgba(0, 15, 8, 0.278);
+  --color-sageA-9: rgba(0, 17, 11, 0.475);
+  --color-sageA-10: rgba(0, 16, 10, 0.514);
+  --color-sageA-11: rgba(0, 10, 7, 0.627);
+  --color-sageA-12: rgba(0, 8, 5, 0.898);
+  --color-mauveDarkA-1: rgba(0, 0, 0, 0.0);
+  --color-mauveDarkA-2: rgba(245, 244, 246, 0.035);
+  --color-mauveDarkA-3: rgba(235, 234, 248, 0.078);
+  --color-mauveDarkA-4: rgba(238, 229, 248, 0.114);
+  --color-mauveDarkA-5: rgba(239, 230, 254, 0.145);
+  --color-mauveDarkA-6: rgba(241, 230, 253, 0.188);
+  --color-mauveDarkA-7: rgba(238, 233, 255, 0.251);
+  --color-mauveDarkA-8: rgba(238, 231, 255, 0.365);
+  --color-mauveDarkA-9: rgba(234, 230, 253, 0.431);
+  --color-mauveDarkA-10: rgba(236, 233, 253, 0.486);
+  --color-mauveDarkA-11: rgba(245, 241, 255, 0.718);
+  --color-mauveDarkA-12: rgba(253, 253, 255, 0.937);
+  --color-grayDarkA-1: rgba(0, 0, 0, 0.0);
+  --color-grayDarkA-2: rgba(255, 255, 255, 0.035);
+  --color-grayDarkA-3: rgba(255, 255, 255, 0.071);
+  --color-grayDarkA-4: rgba(255, 255, 255, 0.106);
+  --color-grayDarkA-5: rgba(255, 255, 255, 0.133);
+  --color-grayDarkA-6: rgba(255, 255, 255, 0.173);
+  --color-grayDarkA-7: rgba(255, 255, 255, 0.231);
+  --color-grayDarkA-8: rgba(255, 255, 255, 0.333);
+  --color-grayDarkA-9: rgba(255, 255, 255, 0.392);
+  --color-grayDarkA-10: rgba(255, 255, 255, 0.447);
+  --color-grayDarkA-11: rgba(255, 255, 255, 0.686);
+  --color-grayDarkA-12: rgba(255, 255, 255, 0.929);
+  --color-sandDarkA-1: rgba(0, 0, 0, 0.0);
+  --color-sandDarkA-2: rgba(244, 244, 243, 0.035);
+  --color-sandDarkA-3: rgba(246, 246, 245, 0.075);
+  --color-sandDarkA-4: rgba(254, 254, 243, 0.106);
+  --color-sandDarkA-5: rgba(251, 251, 235, 0.137);
+  --color-sandDarkA-6: rgba(255, 250, 237, 0.176);
+  --color-sandDarkA-7: rgba(255, 251, 237, 0.235);
+  --color-sandDarkA-8: rgba(255, 249, 235, 0.341);
+  --color-sandDarkA-9: rgba(255, 250, 233, 0.396);
+  --color-sandDarkA-10: rgba(255, 253, 238, 0.451);
+  --color-sandDarkA-11: rgba(255, 252, 244, 0.69);
+  --color-sandDarkA-12: rgba(255, 255, 253, 0.929);
+  --color-sageDarkA-1: rgba(0, 0, 0, 0.0);
+  --color-sageDarkA-2: rgba(240, 242, 241, 0.031);
+  --color-sageDarkA-3: rgba(243, 245, 244, 0.071);
+  --color-sageDarkA-4: rgba(242, 254, 253, 0.102);
+  --color-sageDarkA-5: rgba(241, 251, 250, 0.133);
+  --color-sageDarkA-6: rgba(237, 251, 244, 0.176);
+  --color-sageDarkA-7: rgba(237, 252, 247, 0.235);
+  --color-sageDarkA-8: rgba(235, 253, 246, 0.341);
+  --color-sageDarkA-9: rgba(223, 253, 242, 0.4);
+  --color-sageDarkA-10: rgba(229, 253, 246, 0.455);
+  --color-sageDarkA-11: rgba(244, 254, 251, 0.69);
+  --color-sageDarkA-12: rgba(253, 255, 254, 0.929);
   --color-grayDark-1: #111111;
   --color-grayDark-2: #191919;
   --color-grayDark-3: #222222;
@@ -917,8 +1024,8 @@
   --color-surface-level1: #2a2a24;
   --color-surface-level2: #23231e;
   --color-surface-level3: #161615;
-  --color-surface-hover: #1c1c19;
-  --color-surface-pressed: #161615;
+  --color-surface-hover: rgba(244, 244, 243, 0.035);
+  --color-surface-pressed: rgba(246, 246, 245, 0.075);
   --color-surface-backdrop: rgba(0, 0, 0, 0.565);
   --color-surface-inverse: #e9e9e8;
   --color-surface-white: #ffffff;
@@ -981,6 +1088,18 @@
   --alias-color-neutral-alpha-7: rgba(0, 0, 0, 0.565);
   --alias-color-neutral-alpha-8: rgba(0, 0, 0, 0.910);
   --alias-color-neutral-alpha-9: rgba(0, 0, 0, 0.910);
+  --alias-color-neutral-alphaHued-1: rgba(0, 0, 0, 0.0);
+  --alias-color-neutral-alphaHued-2: rgba(244, 244, 243, 0.035);
+  --alias-color-neutral-alphaHued-3: rgba(246, 246, 245, 0.075);
+  --alias-color-neutral-alphaHued-4: rgba(254, 254, 243, 0.106);
+  --alias-color-neutral-alphaHued-5: rgba(251, 251, 235, 0.137);
+  --alias-color-neutral-alphaHued-6: rgba(255, 250, 237, 0.176);
+  --alias-color-neutral-alphaHued-7: rgba(255, 251, 237, 0.235);
+  --alias-color-neutral-alphaHued-8: rgba(255, 249, 235, 0.341);
+  --alias-color-neutral-alphaHued-9: rgba(255, 250, 233, 0.396);
+  --alias-color-neutral-alphaHued-10: rgba(255, 253, 238, 0.451);
+  --alias-color-neutral-alphaHued-11: rgba(255, 252, 244, 0.69);
+  --alias-color-neutral-alphaHued-12: rgba(255, 255, 253, 0.929);
   --alias-color-brand-primary-regular: #f76b15;
   --alias-color-brand-primary-contrast: #ffe0c2;
   --alias-color-brand-primary-muted: #331e0b;
@@ -1055,6 +1174,17 @@
   --alias-radius-xl: 1.5rem;
   --alias-radius-2xl: 3rem;
   --alias-radius-full: 999rem;
+  --alias-motion-duration-none: 0ms;
+  --alias-motion-duration-instant: 100ms;
+  --alias-motion-duration-fast: 150ms;
+  --alias-motion-duration-normal: 200ms;
+  --alias-motion-duration-slow: 300ms;
+  --alias-motion-duration-slower: 500ms;
+  --alias-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --alias-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --alias-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+  --alias-motion-easing-spring: cubic-bezier(0.16, 1, 0.3, 1);
+  --alias-motion-easing-linear: linear;
   --section-padding-vertical-default: 2rem;
   --section-padding-vertical-compact: 1.5rem;
   --section-padding-vertical-spacious: 2.5rem;
@@ -1262,6 +1392,12 @@
   --shadow-level6: 0 48px 96px 0 rgba(0, 0, 0, 0.220), inset 0 0 1px 0 rgba(0, 0, 0, 0.220);
   --shadow-bevel: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
   --shadow-sunken: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.090), inset 0px 2px 4px 0px rgba(0, 0, 0, 0.090);
+  --motion-duration-micro: 150ms;
+  --motion-duration-component: 200ms;
+  --motion-duration-view: 300ms;
+  --motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-easing-enter: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
   --button-color-primary-background-default: #f76b15;
   --button-color-primary-background-hover: #ffe0c2;
   --button-color-primary-background-pressed: #ff801f;
@@ -1548,7 +1684,7 @@
   --menu-item-color-default-background: transparent;
   --menu-item-color-default-foreground: #e9e9e8;
   --menu-item-color-default-icon: #63635a;
-  --menu-item-color-hover-background: #1c1c19;
+  --menu-item-color-hover-background: rgba(244, 244, 243, 0.035);
   --menu-item-color-hover-foreground: #e9e9e8;
   --menu-item-color-hover-icon: #e9e9e8;
   --menu-item-color-focus-background: #7e451d;
@@ -1778,8 +1914,8 @@
   --datatable-row-background: #161615;
   --datatable-row-foreground: #e9e9e8;
   --datatable-row-border: #2a2a24;
-  --datatable-row-hover-background: #1c1c19;
-  --datatable-row-pressed-background: #161615;
+  --datatable-row-hover-background: rgba(244, 244, 243, 0.035);
+  --datatable-row-pressed-background: rgba(246, 246, 245, 0.075);
   --datatable-row-selected-background: #112840;
   --datatable-cell-padding-x-sm: 0.5rem;
   --datatable-cell-padding-x-md: 0.75rem;
@@ -1956,3 +2092,12 @@
   --container-gap-default: 2rem;
   --container-gap-spacious: 3rem;
 }
+
+/* Accessibility: disable motion for users who prefer reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-duration-micro: 0ms;
+    --motion-duration-component: 0ms;
+    --motion-duration-view: 0ms;
+  }
+}

package/dist/styles/tokens-bouwplan-light.css

@@ -142,6 +142,17 @@
   --container-gap-default: 2rem;
   --container-gap-compact: 1.5rem;
   --container-gap-spacious: 2.5rem;
+  --duration-none: 0ms;
+  --duration-instant: 100ms;
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 500ms;
+  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --easing-exit: cubic-bezier(0.4, 0, 1, 1);
+  --easing-spring: cubic-bezier(0.16, 1, 0.3, 1);
+  --easing-linear: linear;
   --color-white: #ffffff;
   --color-black: #000000;
   --color-gray-1: #fcfcfc;
@@ -540,6 +551,102 @@
   --color-white-alpha-10: rgba(255, 255, 255, 0.478);
   --color-white-alpha-11: rgba(255, 255, 255, 0.565);
   --color-white-alpha-12: rgba(255, 255, 255, 0.910);
+  --color-mauveA-1: rgba(85, 0, 85, 0.012);
+  --color-mauveA-2: rgba(43, 0, 85, 0.024);
+  --color-mauveA-3: rgba(48, 0, 64, 0.063);
+  --color-mauveA-4: rgba(32, 0, 54, 0.094);
+  --color-mauveA-5: rgba(32, 0, 56, 0.125);
+  --color-mauveA-6: rgba(20, 0, 53, 0.153);
+  --color-mauveA-7: rgba(16, 0, 51, 0.196);
+  --color-mauveA-8: rgba(8, 0, 49, 0.271);
+  --color-mauveA-9: rgba(5, 0, 29, 0.451);
+  --color-mauveA-10: rgba(5, 0, 25, 0.49);
+  --color-mauveA-11: rgba(4, 0, 17, 0.612);
+  --color-mauveA-12: rgba(2, 0, 8, 0.878);
+  --color-grayA-1: rgba(0, 0, 0, 0.012);
+  --color-grayA-2: rgba(0, 0, 0, 0.024);
+  --color-grayA-3: rgba(0, 0, 0, 0.059);
+  --color-grayA-4: rgba(0, 0, 0, 0.09);
+  --color-grayA-5: rgba(0, 0, 0, 0.122);
+  --color-grayA-6: rgba(0, 0, 0, 0.149);
+  --color-grayA-7: rgba(0, 0, 0, 0.192);
+  --color-grayA-8: rgba(0, 0, 0, 0.267);
+  --color-grayA-9: rgba(0, 0, 0, 0.447);
+  --color-grayA-10: rgba(0, 0, 0, 0.486);
+  --color-grayA-11: rgba(0, 0, 0, 0.608);
+  --color-grayA-12: rgba(0, 0, 0, 0.875);
+  --color-sandA-1: rgba(85, 85, 0, 0.012);
+  --color-sandA-2: rgba(37, 37, 0, 0.027);
+  --color-sandA-3: rgba(32, 16, 0, 0.063);
+  --color-sandA-4: rgba(31, 21, 0, 0.098);
+  --color-sandA-5: rgba(31, 24, 0, 0.129);
+  --color-sandA-6: rgba(25, 19, 0, 0.161);
+  --color-sandA-7: rgba(25, 20, 0, 0.208);
+  --color-sandA-8: rgba(25, 21, 1, 0.29);
+  --color-sandA-9: rgba(15, 15, 0, 0.475);
+  --color-sandA-10: rgba(12, 12, 0, 0.514);
+  --color-sandA-11: rgba(8, 8, 0, 0.631);
+  --color-sandA-12: rgba(6, 5, 0, 0.89);
+  --color-sageA-1: rgba(0, 128, 64, 0.016);
+  --color-sageA-2: rgba(0, 64, 32, 0.031);
+  --color-sageA-3: rgba(0, 45, 30, 0.067);
+  --color-sageA-4: rgba(0, 31, 21, 0.098);
+  --color-sageA-5: rgba(0, 24, 8, 0.125);
+  --color-sageA-6: rgba(0, 20, 13, 0.157);
+  --color-sageA-7: rgba(0, 20, 10, 0.204);
+  --color-sageA-8: rgba(0, 15, 8, 0.278);
+  --color-sageA-9: rgba(0, 17, 11, 0.475);
+  --color-sageA-10: rgba(0, 16, 10, 0.514);
+  --color-sageA-11: rgba(0, 10, 7, 0.627);
+  --color-sageA-12: rgba(0, 8, 5, 0.898);
+  --color-mauveDarkA-1: rgba(0, 0, 0, 0.0);
+  --color-mauveDarkA-2: rgba(245, 244, 246, 0.035);
+  --color-mauveDarkA-3: rgba(235, 234, 248, 0.078);
+  --color-mauveDarkA-4: rgba(238, 229, 248, 0.114);
+  --color-mauveDarkA-5: rgba(239, 230, 254, 0.145);
+  --color-mauveDarkA-6: rgba(241, 230, 253, 0.188);
+  --color-mauveDarkA-7: rgba(238, 233, 255, 0.251);
+  --color-mauveDarkA-8: rgba(238, 231, 255, 0.365);
+  --color-mauveDarkA-9: rgba(234, 230, 253, 0.431);
+  --color-mauveDarkA-10: rgba(236, 233, 253, 0.486);
+  --color-mauveDarkA-11: rgba(245, 241, 255, 0.718);
+  --color-mauveDarkA-12: rgba(253, 253, 255, 0.937);
+  --color-grayDarkA-1: rgba(0, 0, 0, 0.0);
+  --color-grayDarkA-2: rgba(255, 255, 255, 0.035);
+  --color-grayDarkA-3: rgba(255, 255, 255, 0.071);
+  --color-grayDarkA-4: rgba(255, 255, 255, 0.106);
+  --color-grayDarkA-5: rgba(255, 255, 255, 0.133);
+  --color-grayDarkA-6: rgba(255, 255, 255, 0.173);
+  --color-grayDarkA-7: rgba(255, 255, 255, 0.231);
+  --color-grayDarkA-8: rgba(255, 255, 255, 0.333);
+  --color-grayDarkA-9: rgba(255, 255, 255, 0.392);
+  --color-grayDarkA-10: rgba(255, 255, 255, 0.447);
+  --color-grayDarkA-11: rgba(255, 255, 255, 0.686);
+  --color-grayDarkA-12: rgba(255, 255, 255, 0.929);
+  --color-sandDarkA-1: rgba(0, 0, 0, 0.0);
+  --color-sandDarkA-2: rgba(244, 244, 243, 0.035);
+  --color-sandDarkA-3: rgba(246, 246, 245, 0.075);
+  --color-sandDarkA-4: rgba(254, 254, 243, 0.106);
+  --color-sandDarkA-5: rgba(251, 251, 235, 0.137);
+  --color-sandDarkA-6: rgba(255, 250, 237, 0.176);
+  --color-sandDarkA-7: rgba(255, 251, 237, 0.235);
+  --color-sandDarkA-8: rgba(255, 249, 235, 0.341);
+  --color-sandDarkA-9: rgba(255, 250, 233, 0.396);
+  --color-sandDarkA-10: rgba(255, 253, 238, 0.451);
+  --color-sandDarkA-11: rgba(255, 252, 244, 0.69);
+  --color-sandDarkA-12: rgba(255, 255, 253, 0.929);
+  --color-sageDarkA-1: rgba(0, 0, 0, 0.0);
+  --color-sageDarkA-2: rgba(240, 242, 241, 0.031);
+  --color-sageDarkA-3: rgba(243, 245, 244, 0.071);
+  --color-sageDarkA-4: rgba(242, 254, 253, 0.102);
+  --color-sageDarkA-5: rgba(241, 251, 250, 0.133);
+  --color-sageDarkA-6: rgba(237, 251, 244, 0.176);
+  --color-sageDarkA-7: rgba(237, 252, 247, 0.235);
+  --color-sageDarkA-8: rgba(235, 253, 246, 0.341);
+  --color-sageDarkA-9: rgba(223, 253, 242, 0.4);
+  --color-sageDarkA-10: rgba(229, 253, 246, 0.455);
+  --color-sageDarkA-11: rgba(244, 254, 251, 0.69);
+  --color-sageDarkA-12: rgba(253, 255, 254, 0.929);
   --color-grayDark-1: #111111;
   --color-grayDark-2: #191919;
   --color-grayDark-3: #222222;
@@ -917,8 +1024,8 @@
   --color-surface-level1: #e9e8e6;
   --color-surface-level2: #f1f0ef;
   --color-surface-level3: #fdfdfc;
-  --color-surface-hover: #f9f9f8;
-  --color-surface-pressed: #fdfdfc;
+  --color-surface-hover: rgba(37, 37, 0, 0.027);
+  --color-surface-pressed: rgba(32, 16, 0, 0.063);
   --color-surface-backdrop: rgba(0, 0, 0, 0.565);
   --color-surface-inverse: #21201c;
   --color-surface-white: #ffffff;
@@ -981,6 +1088,18 @@
   --alias-color-neutral-alpha-7: rgba(0, 0, 0, 0.565);
   --alias-color-neutral-alpha-8: rgba(0, 0, 0, 0.910);
   --alias-color-neutral-alpha-9: rgba(0, 0, 0, 0.910);
+  --alias-color-neutral-alphaHued-1: rgba(85, 85, 0, 0.012);
+  --alias-color-neutral-alphaHued-2: rgba(37, 37, 0, 0.027);
+  --alias-color-neutral-alphaHued-3: rgba(32, 16, 0, 0.063);
+  --alias-color-neutral-alphaHued-4: rgba(31, 21, 0, 0.098);
+  --alias-color-neutral-alphaHued-5: rgba(31, 24, 0, 0.129);
+  --alias-color-neutral-alphaHued-6: rgba(25, 19, 0, 0.161);
+  --alias-color-neutral-alphaHued-7: rgba(25, 20, 0, 0.208);
+  --alias-color-neutral-alphaHued-8: rgba(25, 21, 1, 0.29);
+  --alias-color-neutral-alphaHued-9: rgba(15, 15, 0, 0.475);
+  --alias-color-neutral-alphaHued-10: rgba(12, 12, 0, 0.514);
+  --alias-color-neutral-alphaHued-11: rgba(8, 8, 0, 0.631);
+  --alias-color-neutral-alphaHued-12: rgba(6, 5, 0, 0.89);
   --alias-color-brand-primary-regular: #bd4b00;
   --alias-color-brand-primary-contrast: #451e11;
   --alias-color-brand-primary-muted: #fdeee5;
@@ -1055,6 +1174,17 @@
   --alias-radius-xl: 1.5rem;
   --alias-radius-2xl: 3rem;
   --alias-radius-full: 999rem;
+  --alias-motion-duration-none: 0ms;
+  --alias-motion-duration-instant: 100ms;
+  --alias-motion-duration-fast: 150ms;
+  --alias-motion-duration-normal: 200ms;
+  --alias-motion-duration-slow: 300ms;
+  --alias-motion-duration-slower: 500ms;
+  --alias-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --alias-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --alias-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+  --alias-motion-easing-spring: cubic-bezier(0.16, 1, 0.3, 1);
+  --alias-motion-easing-linear: linear;
   --section-padding-vertical-default: 2rem;
   --section-padding-vertical-compact: 1.5rem;
   --section-padding-vertical-spacious: 2.5rem;
@@ -1262,6 +1392,12 @@
   --shadow-level6: 0 48px 96px 0 rgba(0, 0, 0, 0.220), inset 0 0 1px 0 rgba(0, 0, 0, 0.220);
   --shadow-bevel: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
   --shadow-sunken: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.090), inset 0px 2px 4px 0px rgba(0, 0, 0, 0.090);
+  --motion-duration-micro: 150ms;
+  --motion-duration-component: 200ms;
+  --motion-duration-view: 300ms;
+  --motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-easing-enter: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
   --button-color-primary-background-default: #f76808;
   --button-color-primary-background-hover: #ed5f00;
   --button-color-primary-background-pressed: #bd4b00;
@@ -1548,7 +1684,7 @@
   --menu-item-color-default-background: transparent;
   --menu-item-color-default-foreground: #21201c;
   --menu-item-color-default-icon: #8d8d86;
-  --menu-item-color-hover-background: #f9f9f8;
+  --menu-item-color-hover-background: rgba(37, 37, 0, 0.027);
   --menu-item-color-hover-foreground: #21201c;
   --menu-item-color-hover-icon: #21201c;
   --menu-item-color-focus-background: #ed7d5b;
@@ -1778,8 +1914,8 @@
   --datatable-row-background: #fdfdfc;
   --datatable-row-foreground: #21201c;
   --datatable-row-border: #e9e8e6;
-  --datatable-row-hover-background: #f9f9f8;
-  --datatable-row-pressed-background: #fdfdfc;
+  --datatable-row-hover-background: rgba(37, 37, 0, 0.027);
+  --datatable-row-pressed-background: rgba(32, 16, 0, 0.063);
   --datatable-row-selected-background: #e1f6fd;
   --datatable-cell-padding-x-sm: 0.5rem;
   --datatable-cell-padding-x-md: 0.75rem;
@@ -1956,3 +2092,12 @@
   --container-gap-default: 2rem;
   --container-gap-spacious: 3rem;
 }
+
+/* Accessibility: disable motion for users who prefer reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-duration-micro: 0ms;
+    --motion-duration-component: 0ms;
+    --motion-duration-view: 0ms;
+  }
+}

package/dist/styles/tokens-fscl-dark.css

@@ -142,6 +142,17 @@
   --container-gap-default: 2rem;
   --container-gap-compact: 1.5rem;
   --container-gap-spacious: 2.5rem;
+  --duration-none: 0ms;
+  --duration-instant: 100ms;
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 500ms;
+  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --easing-exit: cubic-bezier(0.4, 0, 1, 1);
+  --easing-spring: cubic-bezier(0.16, 1, 0.3, 1);
+  --easing-linear: linear;
   --color-white: #ffffff;
   --color-black: #000000;
   --color-gray-1: #fcfcfc;
@@ -540,6 +551,102 @@
   --color-white-alpha-10: rgba(255, 255, 255, 0.478);
   --color-white-alpha-11: rgba(255, 255, 255, 0.565);
   --color-white-alpha-12: rgba(255, 255, 255, 0.910);
+  --color-mauveA-1: rgba(85, 0, 85, 0.012);
+  --color-mauveA-2: rgba(43, 0, 85, 0.024);
+  --color-mauveA-3: rgba(48, 0, 64, 0.063);
+  --color-mauveA-4: rgba(32, 0, 54, 0.094);
+  --color-mauveA-5: rgba(32, 0, 56, 0.125);
+  --color-mauveA-6: rgba(20, 0, 53, 0.153);
+  --color-mauveA-7: rgba(16, 0, 51, 0.196);
+  --color-mauveA-8: rgba(8, 0, 49, 0.271);
+  --color-mauveA-9: rgba(5, 0, 29, 0.451);
+  --color-mauveA-10: rgba(5, 0, 25, 0.49);
+  --color-mauveA-11: rgba(4, 0, 17, 0.612);
+  --color-mauveA-12: rgba(2, 0, 8, 0.878);
+  --color-grayA-1: rgba(0, 0, 0, 0.012);
+  --color-grayA-2: rgba(0, 0, 0, 0.024);
+  --color-grayA-3: rgba(0, 0, 0, 0.059);
+  --color-grayA-4: rgba(0, 0, 0, 0.09);
+  --color-grayA-5: rgba(0, 0, 0, 0.122);
+  --color-grayA-6: rgba(0, 0, 0, 0.149);
+  --color-grayA-7: rgba(0, 0, 0, 0.192);
+  --color-grayA-8: rgba(0, 0, 0, 0.267);
+  --color-grayA-9: rgba(0, 0, 0, 0.447);
+  --color-grayA-10: rgba(0, 0, 0, 0.486);
+  --color-grayA-11: rgba(0, 0, 0, 0.608);
+  --color-grayA-12: rgba(0, 0, 0, 0.875);
+  --color-sandA-1: rgba(85, 85, 0, 0.012);
+  --color-sandA-2: rgba(37, 37, 0, 0.027);
+  --color-sandA-3: rgba(32, 16, 0, 0.063);
+  --color-sandA-4: rgba(31, 21, 0, 0.098);
+  --color-sandA-5: rgba(31, 24, 0, 0.129);
+  --color-sandA-6: rgba(25, 19, 0, 0.161);
+  --color-sandA-7: rgba(25, 20, 0, 0.208);
+  --color-sandA-8: rgba(25, 21, 1, 0.29);
+  --color-sandA-9: rgba(15, 15, 0, 0.475);
+  --color-sandA-10: rgba(12, 12, 0, 0.514);
+  --color-sandA-11: rgba(8, 8, 0, 0.631);
+  --color-sandA-12: rgba(6, 5, 0, 0.89);
+  --color-sageA-1: rgba(0, 128, 64, 0.016);
+  --color-sageA-2: rgba(0, 64, 32, 0.031);
+  --color-sageA-3: rgba(0, 45, 30, 0.067);
+  --color-sageA-4: rgba(0, 31, 21, 0.098);
+  --color-sageA-5: rgba(0, 24, 8, 0.125);
+  --color-sageA-6: rgba(0, 20, 13, 0.157);
+  --color-sageA-7: rgba(0, 20, 10, 0.204);
+  --color-sageA-8: rgba(0, 15, 8, 0.278);
+  --color-sageA-9: rgba(0, 17, 11, 0.475);
+  --color-sageA-10: rgba(0, 16, 10, 0.514);
+  --color-sageA-11: rgba(0, 10, 7, 0.627);
+  --color-sageA-12: rgba(0, 8, 5, 0.898);
+  --color-mauveDarkA-1: rgba(0, 0, 0, 0.0);
+  --color-mauveDarkA-2: rgba(245, 244, 246, 0.035);
+  --color-mauveDarkA-3: rgba(235, 234, 248, 0.078);
+  --color-mauveDarkA-4: rgba(238, 229, 248, 0.114);
+  --color-mauveDarkA-5: rgba(239, 230, 254, 0.145);
+  --color-mauveDarkA-6: rgba(241, 230, 253, 0.188);
+  --color-mauveDarkA-7: rgba(238, 233, 255, 0.251);
+  --color-mauveDarkA-8: rgba(238, 231, 255, 0.365);
+  --color-mauveDarkA-9: rgba(234, 230, 253, 0.431);
+  --color-mauveDarkA-10: rgba(236, 233, 253, 0.486);
+  --color-mauveDarkA-11: rgba(245, 241, 255, 0.718);
+  --color-mauveDarkA-12: rgba(253, 253, 255, 0.937);
+  --color-grayDarkA-1: rgba(0, 0, 0, 0.0);
+  --color-grayDarkA-2: rgba(255, 255, 255, 0.035);
+  --color-grayDarkA-3: rgba(255, 255, 255, 0.071);
+  --color-grayDarkA-4: rgba(255, 255, 255, 0.106);
+  --color-grayDarkA-5: rgba(255, 255, 255, 0.133);
+  --color-grayDarkA-6: rgba(255, 255, 255, 0.173);
+  --color-grayDarkA-7: rgba(255, 255, 255, 0.231);
+  --color-grayDarkA-8: rgba(255, 255, 255, 0.333);
+  --color-grayDarkA-9: rgba(255, 255, 255, 0.392);
+  --color-grayDarkA-10: rgba(255, 255, 255, 0.447);
+  --color-grayDarkA-11: rgba(255, 255, 255, 0.686);
+  --color-grayDarkA-12: rgba(255, 255, 255, 0.929);
+  --color-sandDarkA-1: rgba(0, 0, 0, 0.0);
+  --color-sandDarkA-2: rgba(244, 244, 243, 0.035);
+  --color-sandDarkA-3: rgba(246, 246, 245, 0.075);
+  --color-sandDarkA-4: rgba(254, 254, 243, 0.106);
+  --color-sandDarkA-5: rgba(251, 251, 235, 0.137);
+  --color-sandDarkA-6: rgba(255, 250, 237, 0.176);
+  --color-sandDarkA-7: rgba(255, 251, 237, 0.235);
+  --color-sandDarkA-8: rgba(255, 249, 235, 0.341);
+  --color-sandDarkA-9: rgba(255, 250, 233, 0.396);
+  --color-sandDarkA-10: rgba(255, 253, 238, 0.451);
+  --color-sandDarkA-11: rgba(255, 252, 244, 0.69);
+  --color-sandDarkA-12: rgba(255, 255, 253, 0.929);
+  --color-sageDarkA-1: rgba(0, 0, 0, 0.0);
+  --color-sageDarkA-2: rgba(240, 242, 241, 0.031);
+  --color-sageDarkA-3: rgba(243, 245, 244, 0.071);
+  --color-sageDarkA-4: rgba(242, 254, 253, 0.102);
+  --color-sageDarkA-5: rgba(241, 251, 250, 0.133);
+  --color-sageDarkA-6: rgba(237, 251, 244, 0.176);
+  --color-sageDarkA-7: rgba(237, 252, 247, 0.235);
+  --color-sageDarkA-8: rgba(235, 253, 246, 0.341);
+  --color-sageDarkA-9: rgba(223, 253, 242, 0.4);
+  --color-sageDarkA-10: rgba(229, 253, 246, 0.455);
+  --color-sageDarkA-11: rgba(244, 254, 251, 0.69);
+  --color-sageDarkA-12: rgba(253, 255, 254, 0.929);
   --color-grayDark-1: #111111;
   --color-grayDark-2: #191919;
   --color-grayDark-3: #222222;
@@ -917,8 +1024,8 @@
   --color-surface-level1: #252925;
   --color-surface-level2: #1f231f;
   --color-surface-level3: #151716;
-  --color-surface-hover: #1a1d1a;
-  --color-surface-pressed: #151716;
+  --color-surface-hover: rgba(240, 242, 241, 0.031);
+  --color-surface-pressed: rgba(243, 245, 244, 0.071);
   --color-surface-backdrop: rgba(0, 0, 0, 0.565);
   --color-surface-inverse: #e9ebe9;
   --color-surface-white: #ffffff;
@@ -981,6 +1088,18 @@
   --alias-color-neutral-alpha-7: rgba(0, 0, 0, 0.565);
   --alias-color-neutral-alpha-8: rgba(0, 0, 0, 0.910);
   --alias-color-neutral-alpha-9: rgba(0, 0, 0, 0.910);
+  --alias-color-neutral-alphaHued-1: rgba(0, 0, 0, 0.0);
+  --alias-color-neutral-alphaHued-2: rgba(240, 242, 241, 0.031);
+  --alias-color-neutral-alphaHued-3: rgba(243, 245, 244, 0.071);
+  --alias-color-neutral-alphaHued-4: rgba(242, 254, 253, 0.102);
+  --alias-color-neutral-alphaHued-5: rgba(241, 251, 250, 0.133);
+  --alias-color-neutral-alphaHued-6: rgba(237, 251, 244, 0.176);
+  --alias-color-neutral-alphaHued-7: rgba(237, 252, 247, 0.235);
+  --alias-color-neutral-alphaHued-8: rgba(235, 253, 246, 0.341);
+  --alias-color-neutral-alphaHued-9: rgba(223, 253, 242, 0.4);
+  --alias-color-neutral-alphaHued-10: rgba(229, 253, 246, 0.455);
+  --alias-color-neutral-alphaHued-11: rgba(244, 254, 251, 0.69);
+  --alias-color-neutral-alphaHued-12: rgba(253, 255, 254, 0.929);
   --alias-color-brand-primary-regular: #696256;
   --alias-color-brand-primary-contrast: #e8e2d9;
   --alias-color-brand-primary-muted: #24231f;
@@ -1055,6 +1174,17 @@
   --alias-radius-xl: 1.5rem;
   --alias-radius-2xl: 3rem;
   --alias-radius-full: 999rem;
+  --alias-motion-duration-none: 0ms;
+  --alias-motion-duration-instant: 100ms;
+  --alias-motion-duration-fast: 150ms;
+  --alias-motion-duration-normal: 200ms;
+  --alias-motion-duration-slow: 300ms;
+  --alias-motion-duration-slower: 500ms;
+  --alias-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --alias-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --alias-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+  --alias-motion-easing-spring: cubic-bezier(0.16, 1, 0.3, 1);
+  --alias-motion-easing-linear: linear;
   --section-padding-vertical-default: 2rem;
   --section-padding-vertical-compact: 1.5rem;
   --section-padding-vertical-spacious: 2.5rem;
@@ -1262,6 +1392,12 @@
   --shadow-level6: 0 48px 96px 0 rgba(0, 0, 0, 0.220), inset 0 0 1px 0 rgba(0, 0, 0, 0.220);
   --shadow-bevel: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
   --shadow-sunken: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.090), inset 0px 2px 4px 0px rgba(0, 0, 0, 0.090);
+  --motion-duration-micro: 150ms;
+  --motion-duration-component: 200ms;
+  --motion-duration-view: 300ms;
+  --motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-easing-enter: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
   --button-color-primary-background-default: #ffca16;
   --button-color-primary-background-hover: #ffd60a;
   --button-color-primary-background-pressed: #ffd60a;
@@ -1548,7 +1684,7 @@
   --menu-item-color-default-background: transparent;
   --menu-item-color-default-foreground: #e9ebe9;
   --menu-item-color-default-icon: #5a605a;
-  --menu-item-color-hover-background: #1a1d1a;
+  --menu-item-color-hover-background: rgba(240, 242, 241, 0.031);
   --menu-item-color-hover-foreground: #e9ebe9;
   --menu-item-color-hover-icon: #e9ebe9;
   --menu-item-color-focus-background: #5c3d05;
@@ -1778,8 +1914,8 @@
   --datatable-row-background: #151716;
   --datatable-row-foreground: #e9ebe9;
   --datatable-row-border: #252925;
-  --datatable-row-hover-background: #1a1d1a;
-  --datatable-row-pressed-background: #151716;
+  --datatable-row-hover-background: rgba(240, 242, 241, 0.031);
+  --datatable-row-pressed-background: rgba(243, 245, 244, 0.071);
   --datatable-row-selected-background: #0d2847;
   --datatable-cell-padding-x-sm: 0.5rem;
   --datatable-cell-padding-x-md: 0.75rem;
@@ -1956,3 +2092,12 @@
   --container-gap-default: 2rem;
   --container-gap-spacious: 3rem;
 }
+
+/* Accessibility: disable motion for users who prefer reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-duration-micro: 0ms;
+    --motion-duration-component: 0ms;
+    --motion-duration-view: 0ms;
+  }
+}