@usefragments/ui 1.6.0 → 2.0.0

package/src/tokens/_measurements.generated.scss

@@ -1,10 +1,9 @@
 // This file is generated by scripts/generate-measurements.mjs. Do not edit.
-// Source SHA-256: 1e8a256c12eaf2f8f4a2a5c4ed25477bf303b56dc2184ac3e29dec71207853bd
+// Source SHA-256: 2783cbbef495c746894385914699542d96008deb952c3f3ab6adf84bf3fac80d
 
 @use "sass:map";
 @use "sass:math";
 
-$density-profile-names: ("compact", "default", "relaxed");
 $radius-profile-names: ("sharp", "subtle", "default", "rounded", "pill");
 $typography-role-names: (
   "caption",
@@ -15,100 +14,33 @@ $typography-role-names: (
   "title-sm",
   "title-md",
   "title-lg",
+  "display",
   "code"
 );
 
-$density-profiles: (
-  "compact": (
-    "baseUnit": 6px,
-    "baseFontSize": 14px,
-    "spacingMultipliers": (
-      "1": 1,
-      "2": 2,
-      "3": 3,
-      "4": 4,
-      "5": 5,
-      "6": 6,
-      "8": 8,
-      "10": 10,
-      "12": 12,
-      "px": 1px,
-      "0-5": 0.3,
-      "0-75": 0.43,
-    ),
-    "controlHeight": (
-      "xs": 32px,
-      "sm": 32px,
-      "md": 32px,
-      "lg": 36px,
-    ),
-    "touch": (
-      "sm": 32px,
-      "md": 32px,
-      "lg": 40px,
-    ),
-    "sidebarItemHeight": 32px,
+$spacing: (
+  "baseUnit": 7px,
+  "baseFontSize": 14px,
+  "multipliers": (
+    "1": 1,
+    "2": 2,
+    "3": 3,
+    "4": 4,
+    "5": 5,
+    "6": 6,
+    "8": 8,
+    "10": 10,
+    "12": 12,
+    "px": 1px,
+    "0-5": 0.3,
+    "0-75": 0.43,
   ),
-  "default": (
-    "baseUnit": 7px,
-    "baseFontSize": 14px,
-    "spacingMultipliers": (
-      "1": 1,
-      "2": 2,
-      "3": 3,
-      "4": 4,
-      "5": 5,
-      "6": 6,
-      "8": 8,
-      "10": 10,
-      "12": 12,
-      "px": 1px,
-      "0-5": 0.3,
-      "0-75": 0.43,
-    ),
-    "controlHeight": (
-      "xs": 32px,
-      "sm": 32px,
-      "md": 40px,
-      "lg": 44px,
-    ),
-    "touch": (
-      "sm": 32px,
-      "md": 32px,
-      "lg": 44px,
-    ),
-    "sidebarItemHeight": 32px,
-  ),
-  "relaxed": (
-    "baseUnit": 8px,
-    "baseFontSize": 14px,
-    "spacingMultipliers": (
-      "1": 1,
-      "2": 2,
-      "3": 3,
-      "4": 4,
-      "5": 5,
-      "6": 6,
-      "8": 8,
-      "10": 10,
-      "12": 12,
-      "px": 1px,
-      "0-5": 0.3,
-      "0-75": 0.43,
-    ),
-    "controlHeight": (
-      "xs": 32px,
-      "sm": 32px,
-      "md": 44px,
-      "lg": 48px,
-    ),
-    "touch": (
-      "sm": 32px,
-      "md": 40px,
-      "lg": 48px,
-    ),
-    "sidebarItemHeight": 36px,
+  "touch": (
+    "sm": 32px,
+    "md": 32px,
+    "lg": 44px,
   ),
+  "sidebarItemHeight": 32px,
 );
 
 $radius-profiles: (
@@ -201,10 +133,26 @@ $targets: (
     "field-minimum": 140px,
     "inline-floor": 56px,
     "compact-content": 168px,
+    "menu-min": 192px,
     "grid-cell": 224px,
     "composer-item": 210px,
     "page-narrow": 800px,
   ),
+  "overlay": (
+    "popover-min": 192px,
+    "popover-sm": 256px,
+    "popover-md": 384px,
+    "popover-lg": 512px,
+    "tooltip-max": 320px,
+    "dialog-sm": 384px,
+    "dialog-md": 448px,
+    "dialog-lg": 576px,
+    "dialog-xl": 768px,
+    "drawer-sm": 320px,
+    "drawer-md": 384px,
+    "drawer-lg": 512px,
+    "drawer-xl": 768px,
+  ),
 );
 
 $typography: (
@@ -238,6 +186,12 @@ $typography: (
     "weight": 400,
     "tracking": 0,
   ),
+  "display": (
+    "size": 32px,
+    "line": 40px,
+    "weight": 600,
+    "tracking": -0.02em,
+  ),
   "title-sm": (
     "size": 16px,
     "line": 24px,
@@ -318,109 +272,38 @@ $legacy: (
     "sidebarLabelOffset": 1px,
     "sidebarCollapsedWidth": 56px,
   ),
-  "docsDensity": (
-    "compact": (
-      "baseUnit": 6,
-      "baseFontSize": 14,
-      "buttonHeights": (
-        24,
-        30,
-        36,
-      ),
-      "inputHeights": (
-        24,
-        32,
-        36,
-      ),
-      "touchTargets": (
-        24,
-        28,
-        38,
-      ),
-      "sidebarItemHeight": 30,
-    ),
-    "default": (
-      "baseUnit": 7,
-      "baseFontSize": 14,
-      "buttonHeights": (
-        28,
-        36,
-        44,
-      ),
-      "inputHeights": (
-        28,
-        40,
-        44,
-      ),
-      "touchTargets": (
-        24,
-        32,
-        44,
-      ),
-      "sidebarItemHeight": 35,
-    ),
-    "relaxed": (
-      "baseUnit": 8,
-      "baseFontSize": 14,
-      "buttonHeights": (
-        32,
-        40,
-        48,
-      ),
-      "inputHeights": (
-        32,
-        44,
-        48,
-      ),
-      "touchTargets": (
-        28,
-        36,
-        48,
-      ),
-      "sidebarItemHeight": 38,
-    ),
-  ),
 );
 
-@function density-profile($name) {
-  @if not map.has-key($density-profiles, $name) {
-    @error "Unknown measurement density '#{$name}'. Expected one of: #{$density-profile-names}.";
-  }
-  @return map.get($density-profiles, $name);
-}
-
-@function density-value($name, $key) {
-  $profile: density-profile($name);
-  @if not map.has-key($profile, $key) {
-    @error "Unknown density measurement '#{$key}' for '#{$name}'.";
+@function spacing-value($key) {
+  @if not map.has-key($spacing, $key) {
+    @error "Unknown spacing measurement '#{$key}'.";
   }
-  @return map.get($profile, $key);
+  @return map.get($spacing, $key);
 }
 
-@function density-nested-value($name, $group, $key) {
-  $values: density-value($name, $group);
+@function spacing-nested-value($group, $key) {
+  $values: spacing-value($group);
   @if not map.has-key($values, $key) {
-    @error "Unknown density measurement '#{$group}.#{$key}' for '#{$name}'.";
+    @error "Unknown spacing measurement '#{$group}.#{$key}'.";
   }
   @return map.get($values, $key);
 }
 
-@function density-px-to-rem($name, $value) {
-  @return math.div($value, density-value($name, "baseFontSize")) * 1rem;
+@function spacing-px-to-rem($value) {
+  @return math.div($value, spacing-value("baseFontSize")) * 1rem;
 }
 
-@function density-spacing($name, $step) {
-  $multipliers: density-value($name, "spacingMultipliers");
+@function spacing-step($step) {
+  $multipliers: spacing-value("multipliers");
   $key: "#{$step}";
   @if not map.has-key($multipliers, $key) {
-    @error "Unknown density spacing step '#{$step}'.";
+    @error "Unknown spacing step '#{$step}'.";
   }
   $multiplier: map.get($multipliers, $key);
   @if $key == "px" {
     @return $multiplier;
   }
-  @return math.div(density-value($name, "baseUnit"), density-value($name, "baseFontSize")) *
-    $multiplier * 1rem;
+  @return math.div(spacing-value("baseUnit"), spacing-value("baseFontSize")) * $multiplier * 1rem;
 }
 
 @function radius-profile($name) {
@@ -479,47 +362,61 @@ $legacy: (
 @mixin emit-fixed-custom-properties {
   --fui-raw-space-0: 0;
   --fui-raw-space-2: 2px;
-  --fui-raw-space-4: 4px;
-  --fui-raw-space-6: 6px;
-  --fui-raw-space-8: 8px;
-  --fui-raw-space-10: 10px;
-  --fui-raw-space-12: 12px;
-  --fui-raw-space-16: 16px;
-  --fui-raw-space-20: 20px;
-  --fui-raw-space-24: 24px;
-  --fui-raw-space-32: 32px;
-  --fui-raw-space-40: 40px;
-  --fui-raw-space-48: 48px;
-  --fui-raw-space-64: 64px;
-  --fui-control-track-micro: 24px;
-  --fui-control-track-sm: 28px;
-  --fui-control-track-md: 32px;
-  --fui-control-track-lg: 40px;
-  --fui-field-track-sm: 28px;
-  --fui-field-track-md: 32px;
-  --fui-field-track-lg: 40px;
-  --fui-field-inline-inset-sm: 10px;
-  --fui-field-inline-inset-md: 12px;
-  --fui-field-inline-inset-lg: 16px;
+  --fui-raw-space-4: calc(var(--fui-scale, 1) * 4px);
+  --fui-raw-space-6: calc(var(--fui-scale, 1) * 6px);
+  --fui-raw-space-8: calc(var(--fui-scale, 1) * 8px);
+  --fui-raw-space-10: calc(var(--fui-scale, 1) * 10px);
+  --fui-raw-space-12: calc(var(--fui-scale, 1) * 12px);
+  --fui-raw-space-16: calc(var(--fui-scale, 1) * 16px);
+  --fui-raw-space-20: calc(var(--fui-scale, 1) * 20px);
+  --fui-raw-space-24: calc(var(--fui-scale, 1) * 24px);
+  --fui-raw-space-32: calc(var(--fui-scale, 1) * 32px);
+  --fui-raw-space-40: calc(var(--fui-scale, 1) * 40px);
+  --fui-raw-space-48: calc(var(--fui-scale, 1) * 48px);
+  --fui-raw-space-64: calc(var(--fui-scale, 1) * 64px);
+  --fui-control-track-micro: calc(var(--fui-scale, 1) * 24px);
+  --fui-control-track-sm: calc(var(--fui-scale, 1) * 28px);
+  --fui-control-track-md: calc(var(--fui-scale, 1) * 32px);
+  --fui-control-track-lg: calc(var(--fui-scale, 1) * 40px);
+  --fui-field-track-sm: calc(var(--fui-scale, 1) * 28px);
+  --fui-field-track-md: calc(var(--fui-scale, 1) * 32px);
+  --fui-field-track-lg: calc(var(--fui-scale, 1) * 40px);
+  --fui-field-inline-inset-sm: calc(var(--fui-scale, 1) * 10px);
+  --fui-field-inline-inset-md: calc(var(--fui-scale, 1) * 12px);
+  --fui-field-inline-inset-lg: calc(var(--fui-scale, 1) * 16px);
   --fui-surface-inset-panel: 0;
-  --fui-surface-inset-compact: 12px;
-  --fui-surface-inset-default: 16px;
-  --fui-surface-inset-roomy: 24px;
-  --fui-icon-xs: 12px;
-  --fui-icon-sm: 14px;
-  --fui-icon-md: 16px;
-  --fui-icon-lg: 20px;
-  --fui-icon-xl: 24px;
-  --fui-icon-2xl: 32px;
+  --fui-surface-inset-compact: calc(var(--fui-scale, 1) * 12px);
+  --fui-surface-inset-default: calc(var(--fui-scale, 1) * 16px);
+  --fui-surface-inset-roomy: calc(var(--fui-scale, 1) * 24px);
+  --fui-icon-xs: calc(var(--fui-scale, 1) * 12px);
+  --fui-icon-sm: calc(var(--fui-scale, 1) * 14px);
+  --fui-icon-md: calc(var(--fui-scale, 1) * 16px);
+  --fui-icon-lg: calc(var(--fui-scale, 1) * 20px);
+  --fui-icon-xl: calc(var(--fui-scale, 1) * 24px);
+  --fui-icon-2xl: calc(var(--fui-scale, 1) * 32px);
   --fui-stroke-hairline: 1px;
   --fui-stroke-default: 2px;
-  --fui-stroke-strong: 3px;
-  --fui-layout-measure-field-minimum: 140px;
-  --fui-layout-measure-inline-floor: 56px;
-  --fui-layout-measure-compact-content: 168px;
-  --fui-layout-measure-grid-cell: 224px;
-  --fui-layout-measure-composer-item: 210px;
-  --fui-layout-measure-page-narrow: 800px;
+  --fui-stroke-strong: calc(var(--fui-scale, 1) * 3px);
+  --fui-layout-measure-field-minimum: calc(var(--fui-scale, 1) * 140px);
+  --fui-layout-measure-inline-floor: calc(var(--fui-scale, 1) * 56px);
+  --fui-layout-measure-compact-content: calc(var(--fui-scale, 1) * 168px);
+  --fui-layout-measure-menu-min: calc(var(--fui-scale, 1) * 192px);
+  --fui-layout-measure-grid-cell: calc(var(--fui-scale, 1) * 224px);
+  --fui-layout-measure-composer-item: calc(var(--fui-scale, 1) * 210px);
+  --fui-layout-measure-page-narrow: calc(var(--fui-scale, 1) * 800px);
+  --fui-overlay-popover-min: calc(var(--fui-scale, 1) * 192px);
+  --fui-overlay-popover-sm: calc(var(--fui-scale, 1) * 256px);
+  --fui-overlay-popover-md: calc(var(--fui-scale, 1) * 384px);
+  --fui-overlay-popover-lg: calc(var(--fui-scale, 1) * 512px);
+  --fui-overlay-tooltip-max: calc(var(--fui-scale, 1) * 320px);
+  --fui-overlay-dialog-sm: calc(var(--fui-scale, 1) * 384px);
+  --fui-overlay-dialog-md: calc(var(--fui-scale, 1) * 448px);
+  --fui-overlay-dialog-lg: calc(var(--fui-scale, 1) * 576px);
+  --fui-overlay-dialog-xl: calc(var(--fui-scale, 1) * 768px);
+  --fui-overlay-drawer-sm: calc(var(--fui-scale, 1) * 320px);
+  --fui-overlay-drawer-md: calc(var(--fui-scale, 1) * 384px);
+  --fui-overlay-drawer-lg: calc(var(--fui-scale, 1) * 512px);
+  --fui-overlay-drawer-xl: calc(var(--fui-scale, 1) * 768px);
   --fui-type-caption-size: 12px;
   --fui-type-caption-line: 16px;
   --fui-type-caption-weight: 400;
@@ -540,6 +437,10 @@ $legacy: (
   --fui-type-body-relaxed-line: 24px;
   --fui-type-body-relaxed-weight: 400;
   --fui-type-body-relaxed-tracking: 0;
+  --fui-type-display-size: 32px;
+  --fui-type-display-line: 40px;
+  --fui-type-display-weight: 600;
+  --fui-type-display-tracking: -0.02em;
   --fui-type-title-sm-size: 16px;
   --fui-type-title-sm-line: 24px;
   --fui-type-title-sm-weight: 600;
@@ -556,44 +457,13 @@ $legacy: (
   --fui-type-code-line: 20px;
   --fui-type-code-weight: 400;
   --fui-type-code-tracking: 0;
-  --fui-navigation-app-shell-header-height: 56px;
-  --fui-navigation-sidebar-gutter: 8px;
-  --fui-navigation-sidebar-leading-box: 16px;
-  --fui-navigation-sidebar-dot: 6px;
+  --fui-navigation-app-shell-header-height: calc(var(--fui-scale, 1) * 56px);
+  --fui-navigation-sidebar-gutter: calc(var(--fui-scale, 1) * 8px);
+  --fui-navigation-sidebar-leading-box: calc(var(--fui-scale, 1) * 16px);
+  --fui-navigation-sidebar-dot: calc(var(--fui-scale, 1) * 6px);
   --fui-navigation-sidebar-rail: 2px;
   --fui-navigation-sidebar-label-offset: 1px;
-  --fui-navigation-sidebar-collapsed-width: 56px;
-}
-
-@mixin emit-density-profile($name) {
-  --fui-base-unit: #{density-value($name, "baseUnit")};
-  --fui-space-0-5: #{density-spacing($name, "0-5")};
-  --fui-space-0-75: #{density-spacing($name, "0-75")};
-  --fui-space-1: #{density-spacing($name, "1")};
-  --fui-space-2: #{density-spacing($name, "2")};
-  --fui-space-3: #{density-spacing($name, "3")};
-  --fui-space-4: #{density-spacing($name, "4")};
-  --fui-space-5: #{density-spacing($name, "5")};
-  --fui-space-6: #{density-spacing($name, "6")};
-  --fui-space-8: #{density-spacing($name, "8")};
-  --fui-space-10: #{density-spacing($name, "10")};
-  --fui-space-12: #{density-spacing($name, "12")};
-  --fui-control-height-xs: var(--fui-control-track-micro, #{target-value("controlTrack", "micro")});
-  --fui-control-height-sm: var(--fui-control-track-sm, #{target-value("controlTrack", "sm")});
-  --fui-control-height-md: var(--fui-control-track-md, #{target-value("controlTrack", "md")});
-  --fui-control-height-lg: var(--fui-control-track-lg, #{target-value("controlTrack", "lg")});
-  --fui-button-height-xs: var(--fui-control-height-xs);
-  --fui-button-height-sm: var(--fui-control-height-sm);
-  --fui-button-height-md: var(--fui-control-height-md);
-  --fui-button-height-lg: var(--fui-control-height-lg);
-  --fui-input-height-sm: var(--fui-field-track-sm, #{target-value("fieldTrack", "sm")});
-  --fui-input-height: var(--fui-field-track-md, #{target-value("fieldTrack", "md")});
-  --fui-input-height-lg: var(--fui-field-track-lg, #{target-value("fieldTrack", "lg")});
-  --fui-touch-sm: #{density-px-to-rem($name, density-nested-value($name, "touch", "sm"))};
-  --fui-touch-md: #{density-px-to-rem($name, density-nested-value($name, "touch", "md"))};
-  --fui-touch-lg: #{density-px-to-rem($name, density-nested-value($name, "touch", "lg"))};
-  --fui-target-size-min: var(--fui-touch-sm);
-  --fui-sidebar-item-height: #{density-px-to-rem($name, density-value($name, "sidebarItemHeight"))};
+  --fui-navigation-sidebar-collapsed-width: calc(var(--fui-scale, 1) * 56px);
 }
 
 @mixin emit-radius-profile($name) {

package/src/tokens/_mixins.scss

@@ -3,17 +3,13 @@
 // ============================================
 
 @use "variables" as *;
+@use "measurements.generated" as measurements;
 
 // Focus ring for keyboard accessibility
 @mixin focus-ring {
-  outline: none;
-  box-shadow:
-    0 0 0 1px
-      color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 28%, transparent),
-    0 0 0 calc(var(--fui-focus-ring-width, #{$fui-focus-ring-width}) + 1px)
-      color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 12%, transparent),
-    0 10px 24px -16px
-      color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 32%, transparent);
+  outline: var(--fui-focus-ring-width, #{$fui-focus-ring-width}) solid
+    var(--fui-focus-ring-color, #{$fui-focus-ring-color});
+  outline-offset: var(--fui-focus-ring-offset, #{$fui-focus-ring-offset});
 }
 
 // Reset button styles
@@ -21,24 +17,36 @@
   appearance: none;
   background: transparent;
   border: none;
-  padding: 0;
-  margin: 0;
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   font: inherit;
   color: inherit;
   cursor: pointer;
+  // Pressables are controls, not prose: no text selection on repeated or
+  // shift-clicks, no mobile tap flash.
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
 
   &:disabled {
     cursor: not-allowed;
   }
 }
 
+// The one disabled treatment. Form controls keep `:disabled`; non-form
+// pressables carry `aria-disabled` and read this through `[aria-disabled]`.
+@mixin disabled-state {
+  opacity: var(--fui-opacity-disabled, #{$fui-opacity-disabled});
+  cursor: not-allowed;
+}
+
 // Base interactive element
 @mixin interactive-base {
   transition:
     background-color var(--fui-transition-fast, #{$fui-transition-fast}),
     border-color var(--fui-transition-fast, #{$fui-transition-fast}),
     box-shadow var(--fui-transition-fast, #{$fui-transition-fast}),
-    opacity var(--fui-transition-fast, #{$fui-transition-fast});
+    opacity var(--fui-transition-fast, #{$fui-transition-fast}),
+    scale var(--fui-transition-fast, #{$fui-transition-fast});
 
   &:focus-visible {
     @include focus-ring;
@@ -46,7 +54,8 @@
 
   &:disabled,
   &[data-disabled] {
-    opacity: 0.5;
+    @include disabled-state;
+
     pointer-events: none;
   }
 }
@@ -54,14 +63,25 @@
 // Card surface
 @mixin surface-elevated {
   background-color: var(--fui-bg-elevated, #{$fui-bg-elevated});
-  border: 1px solid var(--fui-border, #{$fui-border});
-  border-radius: var(--fui-radius-lg, #{$fui-radius-lg});
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+    var(--fui-border, #{$fui-border});
+  border-radius: var(--fui-radius-l1, #{$fui-radius-l1});
 }
 
 @mixin form-group-surface {
   background-color: var(--fui-form-group-bg, var(--fui-bg-secondary, #{$fui-bg-secondary}));
-  border: 1px solid var(--fui-form-group-border, var(--fui-border, #{$fui-border}));
-  border-radius: var(--fui-radius-lg, #{$fui-radius-lg});
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+    var(--fui-form-group-border, var(--fui-border, #{$fui-border}));
+  border-radius: var(--fui-radius-l1, #{$fui-radius-l1});
+}
+
+// The shared selected treatment for segmented controls: Tabs pills, ToggleGroup
+// items, Prompt mode buttons. One surface, one hairline, one ink.
+@mixin segmented-selection {
+  color: var(--fui-text-primary, #{$fui-text-primary});
+  background-color: var(--fui-control-selected-bg, #{$fui-bg-active});
+  box-shadow: inset 0 0 0 var(--fui-stroke-hairline, #{$fui-stroke-hairline})
+    var(--fui-control-selected-border, #{$fui-control-selected-border});
 }
 
 // Responsive breakpoint mixins (mobile-first, min-width)
@@ -154,13 +174,14 @@
   }
 }
 
-// Visually hidden (for screen readers)
+// Visually hidden (for screen readers). The clipping box is one CSS pixel by
+// spec, not by design: it borrows the hairline stroke so no bare px lives here.
 @mixin visually-hidden {
   position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
+  width: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
+  height: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  margin: calc(-1 * var(--fui-stroke-hairline, #{$fui-stroke-hairline}));
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
@@ -178,10 +199,14 @@
   }
 }
 
-// High contrast mode support - for users who need more visual contrast
-@mixin prefers-contrast {
+// The one high-contrast treatment: a default-weight outline in the ink colour,
+// drawn inside the box so geometry does not shift. Components include this on
+// the element that carries their border; no hand-written `prefers-contrast`
+// blocks elsewhere.
+@mixin high-contrast-outline($color: var(--fui-text-primary, #{$fui-text-primary})) {
   @media (prefers-contrast: more) {
-    @content;
+    outline: var(--fui-stroke-default, #{$fui-stroke-default}) solid $color;
+    outline-offset: calc(-1 * var(--fui-stroke-default, #{$fui-stroke-default}));
   }
 }
 
@@ -204,27 +229,3 @@
     animation: none;
   }
 }
-
-// Focus ring for success states (e.g., validated form fields)
-@mixin focus-ring-success {
-  outline: none;
-  box-shadow:
-    0 0 0 1px
-      color-mix(in srgb, var(--fui-color-success-text, #{$fui-color-success-text}) 42%, transparent),
-    0 0 0 calc(var(--fui-focus-ring-width, #{$fui-focus-ring-width}) + 1px)
-      color-mix(in srgb, var(--fui-color-success-text, #{$fui-color-success-text}) 14%, transparent),
-    0 10px 24px -16px
-      color-mix(in srgb, var(--fui-color-success-text, #{$fui-color-success-text}) 28%, transparent);
-}
-
-// Focus ring for error states (e.g., invalid form fields)
-@mixin focus-ring-error {
-  outline: none;
-  box-shadow:
-    0 0 0 1px
-      color-mix(in srgb, var(--fui-color-danger-text, #{$fui-color-danger-text}) 42%, transparent),
-    0 0 0 calc(var(--fui-focus-ring-width, #{$fui-focus-ring-width}) + 1px)
-      color-mix(in srgb, var(--fui-color-danger-text, #{$fui-color-danger-text}) 14%, transparent),
-    0 10px 24px -16px
-      color-mix(in srgb, var(--fui-color-danger-text, #{$fui-color-danger-text}) 28%, transparent);
-}