@revikornmann/muka-ui 0.6.0 → 0.8.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;
@@ -1163,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;
@@ -1370,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;
@@ -2064,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;
@@ -1163,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;
@@ -1370,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;
@@ -2064,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;
@@ -1163,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;
@@ -1370,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;
@@ -2064,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-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;
@@ -1163,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;
@@ -1370,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: #ab6400;
   --button-color-primary-background-hover: #ffba18;
   --button-color-primary-background-pressed: #4f3422;
@@ -2064,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-grip-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;
@@ -1163,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;
@@ -1370,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: #0bd8b6;
   --button-color-primary-background-hover: #adf0dd;
   --button-color-primary-background-pressed: #0eb39e;
@@ -2064,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-grip-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;
@@ -1163,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;
@@ -1370,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: #12a594;
   --button-color-primary-background-hover: #0e9888;
   --button-color-primary-background-pressed: #067c6f;
@@ -2064,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-muka-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;
@@ -1163,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;
@@ -1370,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: #9eb1ff;
   --button-color-primary-background-hover: #d6e1ff;
   --button-color-primary-background-pressed: #5472e4;
@@ -2064,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-muka-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;
@@ -1163,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;
@@ -1370,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: #3e63dd;
   --button-color-primary-background-hover: #3358d4;
   --button-color-primary-background-pressed: #3a5ccc;
@@ -2064,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-wireframe-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;
@@ -1163,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;
@@ -1370,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: #b4b4b4;
   --button-color-primary-background-hover: #eeeeee;
   --button-color-primary-background-pressed: #b4b4b4;
@@ -2064,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-wireframe-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;
@@ -1163,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;
@@ -1370,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: #113264;
   --button-color-primary-background-hover: #0d74ce;
   --button-color-primary-background-pressed: #0d74ce;
@@ -2064,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;
+  }
+}