@raintonic/formaui 0.4.0 → 0.9.0

package/styles/index.scss

@@ -12,6 +12,8 @@
 
 // 4. Typography system
 @forward './partials/typography';
+@forward './partials/type';
+@forward './partials/brand';
 
 // 5. Motion system
 @forward './partials/motion';
@@ -32,8 +34,7 @@
 @use './partials/constants' as *;
 
 // Fonts are now opt-in. Import directly in your app's styles.scss:
-//   @use "@formaui/styles/fonts-entry";
-// @use "./partials/fonts";
+@use './partials/fonts.scss';
 
 // Base reset and normalization
 *,
@@ -49,7 +50,7 @@
 }
 
 html {
-  font-family: var(--fui-font-family-sans);
+  font-family: var(--fui-font-sans);
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;
   -moz-tab-size: 4;
@@ -61,7 +62,7 @@ body {
   font-family: inherit;
   line-height: inherit;
   color: var(--fui-text-primary);
-  background-color: var(--fui-surface-00);
+  background-color: var(--fui-bg-default);
 
   // Dialog overlay support
   &.fui-dialog-open {
@@ -69,11 +70,11 @@ body {
   }
 }
 
-// Focus management
+// Focus management. For inputs we delegate focus to fui-form-field
 button:focus-visible,
 [role='button']:focus-visible,
 a:focus-visible,
-input:focus-visible,
+input:focus-visible, // ONLY for inputs not wrapper by form-field, which overrides outline to none
 select:focus-visible,
 textarea:focus-visible {
   @include fui-focus-ring();
@@ -84,14 +85,14 @@ button {
   @include fui-button-reset();
 }
 
-// Link styles — exclude fui-button anchors, which have their own variant system
+// Link styles — exclude fui-button anchors, which have their own variant system
 a:not(.fui-button) {
-  color: var(--fui-primary);
+  color: var(--fui-text-link);
   text-decoration: none;
 
   &:hover {
-    color: var(--fui-primary-hover);
-    text-decoration: underline;
+    color: var(--fui-text-link-hover);
+    /* text-decoration: underline; */
   }
 
   &:focus-visible {

package/styles/partials/_brand.scss

@@ -0,0 +1,46 @@
+// FormaUI — build-time brand override. NO runtime generation.
+// Uso consumer: @use '@raintonic/formaui/styles' as fui; @include fui.brand($primary: #6657B8, $accent: #9D94F0);
+@use 'sass:color';
+@use 'sass:math';
+
+@function _fui-ramp-light($base, $s) {
+  @if $s == 60 {
+    @return $base;
+  } @else if $s < 60 {
+    @return color.mix(#fff, $base, math.div(60 - $s, 60) * 100%);
+  } @else {
+    @return color.mix(#000, $base, math.div($s - 60, 60) * 100%);
+  }
+}
+// dark = mirror: step s dark = light (120 - s)
+@function _fui-ramp-dark($base, $s) {
+  @return _fui-ramp-light($base, 120 - $s);
+}
+
+$_fui-steps: 10 20 30 40 50 60 70 80 90 100 110;
+
+@mixin brand($primary, $accent: null) {
+  :root,
+  :root[data-theme='light'],
+  [data-theme='light'] {
+    @each $s in $_fui-steps {
+      --fui-primary-#{$s}: #{_fui-ramp-light($primary, $s)};
+    }
+    @if $accent {
+      @each $s in $_fui-steps {
+        --fui-accent-#{$s}: #{_fui-ramp-light($accent, $s)};
+      }
+    }
+  }
+  :root[data-theme='dark'],
+  [data-theme='dark'] {
+    @each $s in $_fui-steps {
+      --fui-primary-#{$s}: #{_fui-ramp-dark($primary, $s)};
+    }
+    @if $accent {
+      @each $s in $_fui-steps {
+        --fui-accent-#{$s}: #{_fui-ramp-dark($accent, $s)};
+      }
+    }
+  }
+}

package/styles/partials/_constants.scss

@@ -1,29 +1,31 @@
 // Design tokens and constants
 // Based on Carbon Design System principles
 
-// Spacing scale (rem units)
-$fui-spacing-01: 0.125rem; // 2px
-$fui-spacing-02: 0.25rem; // 4px
-$fui-spacing-03: 0.5rem; // 8px
-$fui-spacing-04: 0.75rem; // 12px
-$fui-spacing-05: 1rem; // 16px
-$fui-spacing-06: 1.5rem; // 24px
-$fui-spacing-07: 2rem; // 32px
-$fui-spacing-08: 2.5rem; // 40px
-$fui-spacing-09: 3rem; // 48px
-$fui-spacing-10: 4rem; // 64px
-$fui-spacing-11: 5rem; // 80px
-$fui-spacing-12: 6rem; // 96px
+// Spacing scale (rem units) — PRD scale 0..13
+$fui-spacing-0: 0; // 0px
+$fui-spacing-1: 0.125rem; // 2px
+$fui-spacing-2: 0.25rem; // 4px
+$fui-spacing-3: 0.375rem; // 6px
+$fui-spacing-4: 0.5rem; // 8px
+$fui-spacing-5: 0.625rem; // 10px
+$fui-spacing-6: 0.75rem; // 12px
+$fui-spacing-7: 1rem; // 16px
+$fui-spacing-8: 1.25rem; // 20px
+$fui-spacing-9: 1.5rem; // 24px
+$fui-spacing-10: 1.75rem; // 28px
+$fui-spacing-11: 2rem; // 32px
+$fui-spacing-12: 2.5rem; // 40px
+$fui-spacing-13: 3rem; // 48px
 
 // Layout constants
 $fui-grid-columns: 12;
-$fui-grid-gutter: $fui-spacing-05;
+$fui-grid-gutter: $fui-spacing-7;
 $fui-container-max-width: 1200px;
 
 // Breakpoints
-$fui-breakpoint-xs: 0;
-$fui-breakpoint-sm: 576px;
-$fui-breakpoint-md: 768px;
-$fui-breakpoint-lg: 992px;
-$fui-breakpoint-xl: 1200px;
-$fui-breakpoint-xxl: 1400px;
+$fui-bp-xs: 480px;
+$fui-bp-sm: 640px;
+$fui-bp-md: 768px;
+$fui-bp-lg: 1024px;
+$fui-bp-xl: 1280px;
+$fui-bp-2xl: 1536px;

package/styles/partials/_fonts.scss

@@ -1,35 +1,79 @@
 // Self-hosted fonts — eliminates render-blocking Google Fonts dependency
 
-// Inter Tight — variable weight (100-900), latin subset
+// Geist — individual weights (Light, Regular, Medium, SemiBold, Bold)
 @font-face {
-  font-family: 'Inter Tight';
+  font-family: 'Geist';
   font-style: normal;
-  font-weight: 100 900;
+  font-weight: 300;
   font-display: swap;
-  src: url('../fonts/inter-tight-latin.woff2') format('woff2');
+  src: url('../fonts/Geist-Light.woff2') format('woff2');
   unicode-range:
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
-  font-family: 'Inter Tight';
+  font-family: 'Geist';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/Geist-Regular.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Geist';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/Geist-Medium.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Geist';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/Geist-SemiBold.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Geist';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/Geist-Bold.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Geist';
   font-style: italic;
-  font-weight: 100 900;
+  font-weight: 400;
   font-display: swap;
-  src: url('../fonts/inter-tight-latin-italic.woff2') format('woff2');
+  src: url('../fonts/Geist-Italic.woff2') format('woff2');
   unicode-range:
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
-// DM Mono — regular (400) only, latin subset
+// Geist Mono — regular (400) only, latin subset
 @font-face {
-  font-family: 'DM Mono';
+  font-family: 'Geist Mono';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url('../fonts/dm-mono-400-latin.woff2') format('woff2');
+  src: url('../fonts/GeistMono-Regular.woff2') format('woff2');
   unicode-range:
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

package/styles/partials/_grid.scss

@@ -10,28 +10,39 @@
   padding-left: calc(var(--fui-gutter-x, #{$fui-grid-gutter}) * 0.5);
   margin-right: auto;
   margin-left: auto;
+
+  @media (min-width: $fui-bp-sm) {
+    max-width: var(--fui-container-sm);
+  }
+  @media (min-width: $fui-bp-md) {
+    max-width: var(--fui-container-md);
+  }
+  @media (min-width: $fui-bp-lg) {
+    max-width: var(--fui-container-lg);
+  }
+  @media (min-width: $fui-bp-xl) {
+    max-width: var(--fui-container-xl);
+  }
+  @media (min-width: $fui-bp-2xl) {
+    max-width: var(--fui-container-2xl);
+  }
 }
 
 .fui-container-sm {
-  max-width: 540px;
+  max-width: var(--fui-container-sm);
 }
-
 .fui-container-md {
-  max-width: 720px;
+  max-width: var(--fui-container-md);
 }
-
 .fui-container-lg {
-  max-width: 960px;
+  max-width: var(--fui-container-lg);
 }
-
 .fui-container-xl {
-  max-width: 1140px;
+  max-width: var(--fui-container-xl);
 }
-
-.fui-container-xxl {
-  max-width: $fui-container-max-width;
+.fui-container-2xl {
+  max-width: var(--fui-container-2xl);
 }
-
 .fui-container-fluid {
   max-width: none;
 }
@@ -75,7 +86,7 @@
 }
 
 // Responsive columns
-@each $breakpoint in (sm, md, lg, xl, xxl) {
+@each $breakpoint in (sm, md, lg, xl, 2xl) {
   @include fui-breakpoint($breakpoint) {
     .fui-col-#{$breakpoint} {
       flex: 1 0 0%;
@@ -106,7 +117,7 @@
   }
 }
 
-@each $breakpoint in (sm, md, lg, xl, xxl) {
+@each $breakpoint in (sm, md, lg, xl, 2xl) {
   @include fui-breakpoint($breakpoint) {
     @for $i from 0 through ($fui-grid-columns - 1) {
       .fui-offset-#{$breakpoint}-#{$i} {
@@ -134,17 +145,17 @@
 @for $i from 1 through 5 {
   .fui-g-#{$i},
   .fui-gx-#{$i} {
-    --fui-gutter-x: #{$fui-spacing-03 * $i};
+    --fui-gutter-x: #{$fui-spacing-4 * $i};
   }
 
   .fui-g-#{$i},
   .fui-gy-#{$i} {
-    --fui-gutter-y: #{$fui-spacing-03 * $i};
+    --fui-gutter-y: #{$fui-spacing-4 * $i};
   }
 }
 
 // Responsive gutters
-@each $breakpoint in (sm, md, lg, xl, xxl) {
+@each $breakpoint in (sm, md, lg, xl, 2xl) {
   @include fui-breakpoint($breakpoint) {
     .fui-g-#{$breakpoint}-0,
     .fui-gx-#{$breakpoint}-0 {
@@ -159,12 +170,12 @@
     @for $i from 1 through 5 {
       .fui-g-#{$breakpoint}-#{$i},
       .fui-gx-#{$breakpoint}-#{$i} {
-        --fui-gutter-x: #{$fui-spacing-03 * $i};
+        --fui-gutter-x: #{$fui-spacing-4 * $i};
       }
 
       .fui-g-#{$breakpoint}-#{$i},
       .fui-gy-#{$breakpoint}-#{$i} {
-        --fui-gutter-y: #{$fui-spacing-03 * $i};
+        --fui-gutter-y: #{$fui-spacing-4 * $i};
       }
     }
   }

package/styles/partials/_mixins.scss

@@ -1,11 +1,53 @@
 // Mixins for common patterns
 @use 'sass:color';
+@use 'sass:map';
+@use 'sass:string';
 @use './constants' as *;
 
-// Focus ring mixin (Carbon Design System style)
-@mixin fui-focus-ring($offset: 2px) {
-  outline: 2px solid var(--fui-primary);
-  outline-offset: $offset;
+// CSS identifier escape per nomi che iniziano con cifra (es. 2xl → \32 xl).
+// In CSS un identificatore di classe non può iniziare con una cifra senza
+// escape. Lo standard CSS richiede `\3X ` (hex del codice ASCII + space
+// terminatore). Stesso pattern usato da Tailwind.
+//
+// Esempi:
+//   css-ident-escape('2xl') → '\32 xl'
+//   css-ident-escape('4k')  → '\34 k'
+//   css-ident-escape('md')  → 'md'  (no-op)
+@function css-ident-escape($name) {
+  $str: '#{$name}';
+  $first: string.slice($str, 1, 1);
+  $digits: ('0', '1', '2', '3', '4', '5', '6', '7', '8', '9');
+  $hex-map: (
+    '0': '\\30',
+    '1': '\\31',
+    '2': '\\32',
+    '3': '\\33',
+    '4': '\\34',
+    '5': '\\35',
+    '6': '\\36',
+    '7': '\\37',
+    '8': '\\38',
+    '9': '\\39',
+  );
+
+  $is-digit: false;
+  @each $d in $digits {
+    @if $first == $d {
+      $is-digit: true;
+    }
+  }
+
+  @if $is-digit {
+    $hex: map.get($hex-map, $first);
+    $rest: string.slice($str, 2);
+    @return string.unquote('#{$hex} #{$rest}');
+  }
+  @return $name;
+}
+
+// Focus ring mixin (Carbon Design System style). fui-primary-10 follows figma design
+@mixin fui-focus-ring($width: 2px, $color: var(--fui-primary-10)) {
+  outline: $width solid $color;
 }
 
 // Button reset mixin
@@ -54,32 +96,32 @@
 // Responsive breakpoint mixin
 @mixin fui-breakpoint($size) {
   @if $size == xs {
-    @media (min-width: #{$fui-breakpoint-xs}) {
+    @media (min-width: #{$fui-bp-xs}) {
       @content;
     }
   }
   @if $size == sm {
-    @media (min-width: #{$fui-breakpoint-sm}) {
+    @media (min-width: #{$fui-bp-sm}) {
       @content;
     }
   }
   @if $size == md {
-    @media (min-width: #{$fui-breakpoint-md}) {
+    @media (min-width: #{$fui-bp-md}) {
       @content;
     }
   }
   @if $size == lg {
-    @media (min-width: #{$fui-breakpoint-lg}) {
+    @media (min-width: #{$fui-bp-lg}) {
       @content;
     }
   }
   @if $size == xl {
-    @media (min-width: #{$fui-breakpoint-xl}) {
+    @media (min-width: #{$fui-bp-xl}) {
       @content;
     }
   }
-  @if $size == xxl {
-    @media (min-width: #{$fui-breakpoint-xxl}) {
+  @if $size == 2xl {
+    @media (min-width: #{$fui-bp-2xl}) {
       @content;
     }
   }
@@ -92,22 +134,22 @@
 @mixin fui-elevation($level: 1) {
   @if $level == 0 {
     box-shadow: none;
-    background-color: var(--fui-surface-00);
+    background-color: var(--fui-bg-default);
   } @else if $level == 1 {
-    box-shadow: var(--fui-shadow-01);
-    background-color: var(--fui-surface-01);
+    box-shadow: var(--fui-shadow-xs);
+    background-color: var(--fui-bg-default);
   } @else if $level == 2 {
-    box-shadow: var(--fui-shadow-02);
-    background-color: var(--fui-surface-02);
+    box-shadow: var(--fui-shadow-sm);
+    background-color: var(--fui-bg-subtle);
   } @else if $level == 3 {
-    box-shadow: var(--fui-shadow-03);
-    background-color: var(--fui-surface-03);
+    box-shadow: var(--fui-shadow-md);
+    background-color: var(--fui-bg-muted);
   } @else if $level == 4 {
-    box-shadow: var(--fui-shadow-04);
-    background-color: var(--fui-surface-04);
+    box-shadow: var(--fui-shadow-lg);
+    background-color: var(--fui-bg-muted);
   } @else if $level == 5 {
-    box-shadow: var(--fui-shadow-05);
-    background-color: var(--fui-surface-05);
+    box-shadow: var(--fui-shadow-xl);
+    background-color: var(--fui-bg-muted);
   }
 }
 
@@ -116,15 +158,15 @@
   @if $level == 0 {
     box-shadow: none;
   } @else if $level == 1 {
-    box-shadow: var(--fui-shadow-01);
+    box-shadow: var(--fui-shadow-xs);
   } @else if $level == 2 {
-    box-shadow: var(--fui-shadow-02);
+    box-shadow: var(--fui-shadow-sm);
   } @else if $level == 3 {
-    box-shadow: var(--fui-shadow-03);
+    box-shadow: var(--fui-shadow-md);
   } @else if $level == 4 {
-    box-shadow: var(--fui-shadow-04);
+    box-shadow: var(--fui-shadow-lg);
   } @else if $level == 5 {
-    box-shadow: var(--fui-shadow-05);
+    box-shadow: var(--fui-shadow-xl);
   }
 }
 

package/styles/partials/_motion.scss

@@ -4,48 +4,46 @@
 // Motion CSS variables are defined in _theme-variables.scss to avoid duplication.
 
 // Motion mixins
-@mixin fui-motion(
-  $property: all,
-  $duration: var(--fui-duration-moderate-01),
-  $easing: var(--fui-ease-standard),
-  $delay: 0ms
-) {
-  transition: $property $duration $easing $delay;
+@mixin fui-motion($property: all, $duration: var(--fui-duration-base), $easing: var(--fui-ease-in-out), $delay: 0ms) {
+  transition-property: $property;
+  transition-duration: $duration;
+  transition-timing-function: $easing;
+  transition-delay: $delay;
 }
 
 // Specific motion patterns
 @mixin fui-motion-fade-in {
-  @include fui-motion(opacity, var(--fui-duration-fast-02), var(--fui-ease-entrance));
+  @include fui-motion(opacity, var(--fui-duration-fast), var(--fui-ease-out));
 }
 
 @mixin fui-motion-fade-out {
-  @include fui-motion(opacity, var(--fui-duration-fast-01), var(--fui-ease-exit));
+  @include fui-motion(opacity, var(--fui-duration-fast), var(--fui-ease-in));
 }
 
 @mixin fui-motion-slide-in($direction: 'bottom') {
   @if $direction == 'bottom' {
-    @include fui-motion(transform, var(--fui-duration-moderate-01), var(--fui-ease-entrance));
+    @include fui-motion(transform, var(--fui-duration-base), var(--fui-ease-out));
     transform: translateY(0);
 
     &.fui-motion-entering {
       transform: translateY(1rem);
     }
   } @else if $direction == 'top' {
-    @include fui-motion(transform, var(--fui-duration-moderate-01), var(--fui-ease-entrance));
+    @include fui-motion(transform, var(--fui-duration-base), var(--fui-ease-out));
     transform: translateY(0);
 
     &.fui-motion-entering {
       transform: translateY(-1rem);
     }
   } @else if $direction == 'left' {
-    @include fui-motion(transform, var(--fui-duration-moderate-01), var(--fui-ease-entrance));
+    @include fui-motion(transform, var(--fui-duration-base), var(--fui-ease-out));
     transform: translateX(0);
 
     &.fui-motion-entering {
       transform: translateX(-1rem);
     }
   } @else if $direction == 'right' {
-    @include fui-motion(transform, var(--fui-duration-moderate-01), var(--fui-ease-entrance));
+    @include fui-motion(transform, var(--fui-duration-base), var(--fui-ease-out));
     transform: translateX(0);
 
     &.fui-motion-entering {
@@ -55,7 +53,7 @@
 }
 
 @mixin fui-motion-scale-in {
-  @include fui-motion((transform, opacity), var(--fui-duration-moderate-01), var(--fui-ease-entrance));
+  @include fui-motion((transform, opacity), var(--fui-duration-base), var(--fui-ease-out));
   transform: scale(1);
   opacity: 1;
 
@@ -67,10 +65,10 @@
 
 @mixin fui-motion-expand($direction: 'vertical') {
   @if $direction == 'vertical' {
-    @include fui-motion(max-height, var(--fui-duration-moderate-02), var(--fui-ease-standard));
+    @include fui-motion(max-height, var(--fui-duration-moderate), var(--fui-ease-in-out));
     overflow: hidden;
   } @else if $direction == 'horizontal' {
-    @include fui-motion(max-width, var(--fui-duration-moderate-02), var(--fui-ease-standard));
+    @include fui-motion(max-width, var(--fui-duration-moderate), var(--fui-ease-in-out));
     overflow: hidden;
   }
 }
@@ -92,9 +90,9 @@
     opacity: 0;
     transform: translate(-50%, -50%);
     transition:
-      width var(--fui-duration-slow-01) var(--fui-ease-expressive),
-      height var(--fui-duration-slow-01) var(--fui-ease-expressive),
-      opacity var(--fui-duration-slow-01) var(--fui-ease-standard);
+      width var(--fui-duration-slow) var(--fui-ease-emphasized),
+      height var(--fui-duration-slow) var(--fui-ease-emphasized),
+      opacity var(--fui-duration-slow) var(--fui-ease-in-out);
   }
 
   &:active::before {
@@ -119,22 +117,22 @@
 
 @mixin fui-skeleton-loading {
   animation: fui-skeleton-pulse 1.5s ease-in-out infinite;
-  background-color: var(--fui-surface-05);
-  border-radius: var(--fui-border-radius-md);
+  background-color: var(--fui-bg-muted);
+  border-radius: var(--fui-radius-md);
 }
 
 // Focus transition
 @mixin fui-focus-transition {
   transition:
-    box-shadow var(--fui-duration-fast-02) var(--fui-ease-standard),
-    outline var(--fui-duration-fast-02) var(--fui-ease-standard);
+    box-shadow var(--fui-duration-fast) var(--fui-ease-in-out),
+    outline var(--fui-duration-fast) var(--fui-ease-in-out);
 }
 
 // Hover lift effect
 @mixin fui-hover-lift {
   transition:
-    transform var(--fui-duration-fast-02) var(--fui-ease-standard),
-    box-shadow var(--fui-duration-fast-02) var(--fui-ease-standard);
+    transform var(--fui-duration-fast) var(--fui-ease-in-out),
+    box-shadow var(--fui-duration-fast) var(--fui-ease-in-out);
 
   &:hover {
     transform: translateY(-2px);
@@ -145,8 +143,8 @@
 // Disabled state transition
 @mixin fui-disabled-transition {
   transition:
-    opacity var(--fui-duration-fast-02) var(--fui-ease-standard),
-    cursor var(--fui-duration-fast-02) var(--fui-ease-standard);
+    opacity var(--fui-duration-fast) var(--fui-ease-in-out),
+    cursor var(--fui-duration-fast) var(--fui-ease-in-out);
 }
 
 // Loading spinner
@@ -182,7 +180,7 @@
 }
 
 @mixin fui-error-shake {
-  animation: fui-shake var(--fui-duration-slow-01) var(--fui-ease-standard);
+  animation: fui-shake var(--fui-duration-slow) var(--fui-ease-in-out);
 }
 
 // Utility classes for motion
@@ -248,7 +246,7 @@
 }
 
 .fui-slide-in {
-  animation: fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance);
+  animation: fui-slide-in var(--fui-duration-base) var(--fui-ease-out);
 }
 
 // Popover/dropdown entrance — for panels portaled into the overlay container
@@ -268,10 +266,7 @@
   }
 }
 
-@mixin fui-motion-popover-enter(
-  $duration: var(--fui-duration-moderate-01),
-  $easing: var(--fui-ease-entrance)
-) {
+@mixin fui-motion-popover-enter($duration: var(--fui-duration-base), $easing: var(--fui-ease-out)) {
   animation: fui-popover-enter $duration $easing both;
   will-change: transform, opacity;
 }