@eagami/ui 4.4.0 → 4.5.1

package/package.json

@@ -1,15 +1,25 @@
 {
   "name": "@eagami/ui",
-  "version": "4.4.0",
-  "description": "Lightweight, accessible Angular UI component library built on CSS custom properties",
+  "version": "4.5.1",
+  "description": "Lightweight, accessible, themeable Angular UI component library and icon set built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",
   "keywords": [
     "angular",
+    "angular-components",
     "ui",
+    "components",
     "component-library",
     "design-system",
-    "accessible"
+    "accessible",
+    "a11y",
+    "dark-mode",
+    "theming",
+    "icons",
+    "signals",
+    "standalone",
+    "typescript",
+    "css-variables"
   ],
   "homepage": "https://eagami.com/ui",
   "repository": {
@@ -41,5 +51,10 @@
       "default": "./fesm2022/eagami-ui.mjs"
     }
   },
-  "type": "module"
+  "type": "module",
+  "files": [
+    "fesm2022",
+    "types",
+    "README.md"
+  ]
 }

package/types/eagami-ui.d.ts

@@ -7,7 +7,7 @@ import * as _eagami_ui from '@eagami/ui';
  * BCP 47 locale tags supported out of the box. Consumers select one of these
  * via `provideEagamiUi({ locale })` or `EagamiI18nService.setLocale()`.
  */
-type EagamiLocale = 'en' | 'fr-FR' | 'el' | 'pl' | 'es-ES' | 'de' | 'pt-BR' | 'zh-CN' | 'is' | 'nl';
+type EagamiLocale = 'en' | 'de' | 'es-ES' | 'fr-FR' | 'is' | 'nl' | 'pl' | 'pt-BR' | 'el' | 'ru' | 'uk' | 'zh-CN';
 /**
  * Display metadata for a built-in locale: the language's name in its own
  * language and a representative flag emoji.

package/src/styles/_mixins.scss

@@ -1,68 +0,0 @@
-// Shared SCSS mixins for the library. Consume from a component stylesheet with:
-//   @use '../../styles/mixins' as ea;
-//   .ea-foo__close { @include ea.icon-button; }
-
-// Standard focus indicator. The ring is a soft box-shadow halo, but box-shadow
-// is dropped in forced-colors (Windows High Contrast) mode, which would leave
-// keyboard users with no visible focus. Pair the halo with a real outline that
-// only renders in forced-colors so the ring survives there. Pass the full
-// box-shadow value to compose the ring with an existing shadow.
-@mixin focus-ring($ring: var(--shadow-focus-ring)) {
-  box-shadow: $ring;
-
-  @media (forced-colors: active) {
-    outline: 2px solid Highlight;
-    outline-offset: 2px;
-  }
-}
-
-// Floating surfaces (menus, dialogs, popovers, toasts) lean on elevation shadow
-// for their boundary, but shadows are dropped in forced-colors mode. Add a
-// hairline border there so the surface stays separated from the content behind.
-@mixin elevated-surface-border {
-  @media (forced-colors: active) {
-    border: 1px solid CanvasText;
-  }
-}
-
-// Standard icon button: clear, close/dismiss, password-toggle, nav, etc. The box
-// is `--ea-icon-button-size` (em) so it scales with the host component's size and
-// is consistent across components at a given size tier. The glyph is enlarged so
-// it reads clearly inside the box regardless of how much padding the icon's own
-// viewBox carries (the feather `x`, for instance, only fills its middle half).
-@mixin icon-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--ea-icon-button-size, 1.75em);
-  height: var(--ea-icon-button-size, 1.75em);
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-sm);
-  background: none;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: var(--transition-colors);
-
-  // Glyph sized via font-size (not width) so it overrides the icon's inline 1em
-  // host size and still scales with the box.
-  > * {
-    font-size: 1.25em;
-  }
-
-  &:hover {
-    background-color: var(--color-state-hover);
-    color: var(--color-text-primary);
-  }
-
-  &:focus-visible {
-    outline: none;
-    @include focus-ring;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}

package/src/styles/_reset.scss

@@ -1,62 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 16px;
-  -webkit-text-size-adjust: 100%;
-  tab-size: 4;
-}
-
-body {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-md);
-  line-height: var(--line-height-normal);
-  color: var(--color-text-primary);
-  background-color: var(--color-bg-canvas);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-img,
-svg,
-video {
-  display: block;
-  max-width: 100%;
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  font-weight: inherit;
-  line-height: inherit;
-  color: inherit;
-}
-
-button {
-  cursor: pointer;
-  background: transparent;
-  border: none;
-}
-
-a {
-  color: var(--color-text-link);
-  text-decoration: underline;
-
-  &:hover {
-    color: var(--color-text-link-hover);
-  }
-}
-
-:focus-visible {
-  outline: var(--border-width-medium) solid var(--color-border-focus);
-  outline-offset: 2px;
-}

package/src/styles/_tooltip.scss

@@ -1,39 +0,0 @@
-@use 'mixins' as ea;
-
-// Guard against "sticky hover" on touch devices, which fire `mouseenter` on tap
-// but never the matching `mouseleave`. The directive gates pointer listeners on
-// `(hover: hover)`, but if a tooltip ever slips through keep it invisible on touch.
-.ea-tooltip {
-  z-index: var(--z-index-tooltip);
-  position: absolute;
-  padding: var(--space-1-5) var(--space-2-5);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-normal);
-  white-space: nowrap;
-  // When a max-width switches the bubble to multi-line, break long unbreakable
-  // strings (URLs, tokens) instead of letting them overflow the bubble.
-  overflow-wrap: anywhere;
-  border: var(--border-width-thin) solid var(--color-tooltip-border);
-  border-radius: var(--radius-md);
-  background-color: var(--color-tooltip-surface);
-  color: var(--color-neutral-0);
-  pointer-events: none;
-  animation: ea-tooltip-fade-in var(--duration-fast) var(--ease-out);
-  @include ea.elevated-surface-border;
-
-  @media (hover: none) {
-    display: none;
-  }
-}
-
-@keyframes ea-tooltip-fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}

package/src/styles/eagami-ui.scss

@@ -1,6 +0,0 @@
-// Global stylesheet: loads all design token custom properties and the base reset.
-// Consumers must also load the DM Sans and Syne fonts via <link> tags in the HTML head.
-
-@use 'tokens/index';
-@use 'reset';
-@use 'tooltip';

package/src/styles/tokens/_colors.scss

@@ -1,265 +0,0 @@
-// Every token-declaring selector is wrapped in :where() so it contributes zero
-// specificity. A consumer's own root-level token override (specificity 0,1,0)
-// then wins in light mode, OS-dark, and forced dark alike, independent of
-// stylesheet load order. The library's own light-to-dark switching still
-// resolves correctly by source order, since the dark blocks come after the
-// light ones at equal (zero) specificity.
-:where(:root) {
-  --color-primary-50: #ecf3f9;
-  --color-primary-100: #d1e3f0;
-  --color-primary-200: #abcbe3;
-  --color-primary-300: #7dafd4;
-  --color-primary-400: #4b91c3;
-  --color-primary-500: #3674a1;
-  --color-primary-600: #2a5b7e;
-  --color-primary-700: #204560;
-  --color-primary-800: #162f41;
-  --color-primary-900: #0d1c26;
-
-  --color-secondary-50: #f2eff5;
-  --color-secondary-100: #dfd9e8;
-  --color-secondary-200: #c4b9d5;
-  --color-secondary-300: #a493be;
-  --color-secondary-400: #8169a5;
-  --color-secondary-500: #665086;
-  --color-secondary-600: #503f69;
-  --color-secondary-700: #3d3050;
-  --color-secondary-800: #292136;
-  --color-secondary-900: #181320;
-
-  --color-neutral-0: #ffffff;
-  --color-neutral-50: #f9fafb;
-  --color-neutral-100: #f3f4f6;
-  --color-neutral-200: #e5e7eb;
-  --color-neutral-300: #d1d5db;
-  --color-neutral-400: #9ca3af;
-  --color-neutral-500: #6b7280;
-  --color-neutral-600: #4b5563;
-  --color-neutral-700: #374151;
-  --color-neutral-800: #1f2937;
-  --color-neutral-900: #111827;
-  --color-neutral-950: #030712;
-
-  --color-success-50: #f0fdf4;
-  --color-success-100: #dcfce7;
-  --color-success-200: #bbf7d0;
-  --color-success-500: #22c55e;
-  --color-success-600: #16a34a;
-  --color-success-700: #15803d;
-
-  --color-warning-50: #fffbeb;
-  --color-warning-100: #fef3c7;
-  --color-warning-200: #fde68a;
-  --color-warning-500: #f59e0b;
-  --color-warning-600: #d97706;
-  --color-warning-700: #b45309;
-
-  --color-error-50: #fef2f2;
-  --color-error-100: #fee2e2;
-  --color-error-200: #fecaca;
-  --color-error-500: #ef4444;
-  --color-error-600: #dc2626;
-  --color-error-700: #b91c1c;
-
-  --color-info-50: #ecfeff;
-  --color-info-100: #cffafe;
-  --color-info-200: #a5f3fc;
-  --color-info-500: #06b6d4;
-  --color-info-600: #0891b2;
-  --color-info-700: #0e7490;
-
-  --color-text-primary: var(--color-neutral-900);
-  --color-text-secondary: var(--color-neutral-600);
-  --color-text-tertiary: var(--color-neutral-400);
-  --color-text-disabled: var(--color-neutral-400);
-  --color-text-inverse: var(--color-neutral-0);
-  --color-text-link: var(--color-primary-600);
-  --color-text-link-hover: var(--color-primary-800);
-
-  // Two-tier surfaces: bg-canvas is the page, bg-base is component surfaces on
-  // it (inputs, cards, accordion, popovers). In dark mode bg-base lifts above
-  // bg-canvas so surfaces don't vanish into the page.
-  --color-bg-canvas: var(--color-neutral-0);
-  --color-bg-base: var(--color-neutral-0);
-  --color-bg-subtle: var(--color-neutral-50);
-  --color-bg-stripe: var(--color-neutral-50);
-  // Zebra-stripe fill for table rows: a mid-tone between the base row and the
-  // header tint so striped rows read as lighter than the header, not identical to
-  // it. Dark mode overrides the ratio to stay equally subtle.
-  --color-bg-stripe-subtle: color-mix(
-    in srgb,
-    var(--color-bg-base) 30%,
-    var(--color-bg-stripe)
-  );
-  --color-bg-muted: var(--color-neutral-100);
-  // Soft neutral fill for placeholder surfaces (e.g. avatar initials) when no
-  // image is set; light enough to sit gently on a white page
-  --color-bg-emphasis: var(--color-neutral-100);
-  --color-bg-elevated: var(--color-neutral-0);
-  --color-bg-overlay: rgba(0, 0, 0, 0.5);
-
-  // Tooltips float over arbitrary content, so their surface is a unique tone that
-  // never matches a page or palette colour in either theme; the translucent
-  // hairline border separates it from same-tone backgrounds.
-  --color-tooltip-surface: #1a1b21;
-  --color-tooltip-border: rgba(255, 255, 255, 0.15);
-
-  // Interactive lift layers for hover and active/selected fills. Light surfaces
-  // are all near-white and never collapse onto these shades, so solid muted
-  // tones read cleanly. Dark mode swaps them for translucent washes (see the
-  // dark overrides) because its surfaces all collapse onto the same neutrals,
-  // where a solid fill would vanish into whatever it sits on.
-  --color-state-hover: var(--color-neutral-100);
-  --color-state-active: var(--color-neutral-200);
-
-  --color-border-subtle: var(--color-neutral-200);
-  --color-border-default: var(--color-neutral-200);
-  --color-border-strong: var(--color-neutral-400);
-  --color-divider: var(--color-border-subtle);
-  --color-border-focus: var(--color-primary-500);
-
-  // brand-default/-hover/-active are the brand colour as a surface (solid bg
-  // under white text); needs 4.5:1 vs white. brand-text is the brand colour as
-  // a foreground on a non-brand surface; needs 4.5:1 vs bg-base and flips
-  // lighter in dark mode.
-  --color-brand-default: var(--color-primary-600);
-  --color-brand-hover: var(--color-primary-700);
-  --color-brand-active: var(--color-primary-800);
-  --color-brand-text: var(--color-primary-700);
-  --color-brand-subtle: var(--color-primary-50);
-  --color-brand-muted: var(--color-primary-100);
-
-  --color-brand-secondary-default: var(--color-secondary-500);
-  --color-brand-secondary-hover: var(--color-secondary-600);
-  --color-brand-secondary-active: var(--color-secondary-700);
-  --color-brand-secondary-subtle: var(--color-secondary-50);
-  --color-brand-secondary-muted: var(--color-secondary-100);
-
-  // *-text is the status hue as a foreground on its own *-subtle/-muted wash
-  // (badge, tag, toast). It needs 4.5:1 vs that wash and flips lighter in dark
-  // mode, mirroring --color-brand-text.
-  --color-success-default: var(--color-success-600);
-  --color-success-subtle: var(--color-success-50);
-  --color-success-muted: var(--color-success-100);
-  --color-success-text: var(--color-success-700);
-
-  --color-warning-default: var(--color-warning-600);
-  --color-warning-subtle: var(--color-warning-50);
-  --color-warning-muted: var(--color-warning-100);
-  --color-warning-text: var(--color-warning-700);
-
-  --color-error-default: var(--color-error-600);
-  --color-error-subtle: var(--color-error-50);
-  --color-error-muted: var(--color-error-100);
-  --color-error-text: var(--color-error-700);
-
-  --color-info-default: var(--color-info-600);
-  --color-info-subtle: var(--color-info-50);
-  --color-info-muted: var(--color-info-100);
-  --color-info-text: var(--color-info-700);
-
-  // Pure RGB primaries for the picker's hue wheel and saturation/value
-  // gradient. Intrinsic to the picker, not themeable; kept here so component
-  // SCSS stays literal-free.
-  --color-picker-hue-red: #ff0000;
-  --color-picker-hue-yellow: #ffff00;
-  --color-picker-hue-green: #00ff00;
-  --color-picker-hue-cyan: #00ffff;
-  --color-picker-hue-blue: #0000ff;
-  --color-picker-hue-magenta: #ff00ff;
-  --color-picker-sv-white: #ffffff;
-  --color-picker-sv-black: #000000;
-  --color-picker-thumb-halo: rgba(0, 0, 0, 0.25);
-}
-
-// Dark mode: applied when the OS prefers dark, unless forced light via
-// `<html data-theme="light">`. `<html data-theme="dark">` forces dark.
-@mixin dark-color-tokens {
-  --color-text-primary: var(--color-neutral-50);
-  --color-text-secondary: var(--color-neutral-300);
-  --color-text-tertiary: var(--color-neutral-500);
-  --color-text-disabled: var(--color-neutral-500);
-  --color-text-inverse: var(--color-neutral-900);
-  --color-text-link: var(--color-primary-300);
-  --color-text-link-hover: var(--color-primary-100);
-
-  // Canvas is the deepest page tone; bg-base and up lift component surfaces,
-  // striped rows, floating surfaces, and hover states above it.
-  --color-bg-canvas: var(--color-neutral-950);
-  --color-bg-base: var(--color-neutral-800);
-  --color-bg-subtle: var(--color-neutral-700);
-  --color-bg-stripe: var(--color-neutral-900);
-  // The dark base-to-stripe gap reads stronger than the light one, so weight the
-  // stripe mix toward the base row to keep zebra striping subtle.
-  --color-bg-stripe-subtle: color-mix(
-    in srgb,
-    var(--color-bg-base) 62.5%,
-    var(--color-bg-stripe)
-  );
-  --color-bg-elevated: var(--color-neutral-700);
-  // Opaque muted surface for static fills (disabled fields, slider/progress
-  // tracks, skeletons). Hover/active fills route through the translucent
-  // --color-state-* tokens instead, so they never collide with this shade.
-  --color-bg-muted: var(--color-neutral-700);
-  --color-bg-emphasis: var(--color-neutral-600);
-
-  // White wash so an interactive lift reads on any dark surface, including the
-  // neutral-700 tier where bg-muted/-subtle/-elevated all coincide. This is the
-  // fix that lets dropdown/menu/dialog hovers lift off their elevated surfaces.
-  --color-state-hover: rgba(255, 255, 255, 0.08);
-  --color-state-active: rgba(255, 255, 255, 0.14);
-
-  // Borders stay clear of every bg-* shade so they stay visible. subtle mixes
-  // neutral-700/-800 to sit between card and cell backgrounds; default can't go
-  // darker without colliding with bg-subtle/-elevated (both neutral-700).
-  --color-border-subtle: color-mix(
-    in srgb,
-    var(--color-neutral-700),
-    var(--color-neutral-800)
-  );
-  --color-border-default: var(--color-neutral-400);
-  --color-border-strong: var(--color-neutral-300);
-  // Dividers read as barely-there against dark surfaces at border-subtle, so
-  // they step one neutral lighter for a visible-but-quiet rule.
-  --color-divider: var(--color-neutral-600);
-
-  // Surface roles step one shade lighter than light mode so the button clears
-  // WCAG 1.4.11 (3:1) on the near-black canvas while keeping a white label
-  // above 4.5:1.
-  --color-brand-default: var(--color-primary-500);
-  --color-brand-hover: var(--color-primary-600);
-  --color-brand-active: var(--color-primary-700);
-  --color-brand-text: var(--color-primary-300);
-  --color-brand-subtle: rgba(75, 145, 195, 0.1);
-  --color-brand-muted: rgba(75, 145, 195, 0.2);
-
-  // Light pastels become unreadable behind light text in dark mode. Re-tint as
-  // a low-alpha wash of the saturated *-500 hue so the surface darkens enough
-  // for white text.
-  --color-success-subtle: rgba(34, 197, 94, 0.15);
-  --color-success-muted: rgba(34, 197, 94, 0.25);
-  --color-warning-subtle: rgba(245, 158, 11, 0.15);
-  --color-warning-muted: rgba(245, 158, 11, 0.25);
-  --color-error-subtle: rgba(239, 68, 68, 0.15);
-  --color-error-muted: rgba(239, 68, 68, 0.25);
-  --color-info-subtle: rgba(6, 182, 212, 0.15);
-  --color-info-muted: rgba(6, 182, 212, 0.25);
-
-  // The *-700 shades are unreadable on the dark translucent washes above; flip
-  // to the light *-200 pastels so status text keeps 4.5:1.
-  --color-success-text: var(--color-success-200);
-  --color-warning-text: var(--color-warning-200);
-  --color-error-text: var(--color-error-200);
-  --color-info-text: var(--color-info-200);
-}
-
-@media (prefers-color-scheme: dark) {
-  :where(:root:not([data-theme='light'])) {
-    @include dark-color-tokens;
-  }
-}
-
-:where(:root[data-theme='dark']) {
-  @include dark-color-tokens;
-  color-scheme: dark;
-}

package/src/styles/tokens/_elevation.scss

@@ -1,87 +0,0 @@
-// :where() keeps these at zero specificity so consumer overrides win in every
-// theme; see the note in _colors.scss.
-:where(:root) {
-  --shadow-none: none;
-  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
-
-  // Composable top-edge highlight appended to every dark-mode shadow so elevated
-  // surfaces catch light along their top edge; a no-op in light mode.
-  --shadow-edge-highlight: 0 0 #0000;
-
-  // Bevel: paired inset highlight (top) + shadow (bottom) for a raised look;
-  // compose with --shadow-* for an ambient drop.
-  --shadow-bevel:
-    inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -1px 1.5px rgba(0, 0, 0, 0.25);
-  --shadow-bevel-strong:
-    inset 0 1.5px 2px rgba(255, 255, 255, 0.9), inset 0 -2px 3px rgba(0, 0, 0, 0.3);
-
-  // Well: inverse of bevel (inset shadow top, highlight bottom) for a recessed look
-  --shadow-well:
-    inset 0 1px 1.5px rgba(0, 0, 0, 0.3), inset 0 -1px 0.5px rgba(255, 255, 255, 0.5);
-  --shadow-well-strong:
-    inset 0 2px 3px rgba(0, 0, 0, 0.4), inset 0 -1.5px 1px rgba(255, 255, 255, 0.55);
-
-  --shadow-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.45);
-  --shadow-focus-ring-error: 0 0 0 3px var(--color-error-200);
-  --shadow-focus-ring-success: 0 0 0 3px var(--color-success-200);
-
-  --z-index-base: 0;
-  --z-index-raised: 10;
-  --z-index-dropdown: 100;
-  --z-index-sticky: 200;
-  --z-index-overlay: 300;
-  --z-index-modal: 400;
-  --z-index-popover: 500;
-  --z-index-toast: 600;
-  --z-index-tooltip: 700;
-}
-
-// Dark mode: a drop shadow is the absence of light, so it stays black (deeper
-// than light mode); a white "shadow" reads as a glow and looks wrong. Elevation
-// is carried instead by the lifted surface tone plus a hairline top highlight
-// that catches light, appended to every level via --shadow-edge-highlight.
-@mixin dark-elevation-tokens {
-  --shadow-edge-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
-
-  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4), var(--shadow-edge-highlight);
-  --shadow-sm:
-    0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4),
-    var(--shadow-edge-highlight);
-  --shadow-md:
-    0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4),
-    var(--shadow-edge-highlight);
-  --shadow-lg:
-    0 12px 20px -4px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.45),
-    var(--shadow-edge-highlight);
-  --shadow-xl:
-    0 20px 28px -6px rgba(0, 0, 0, 0.65), 0 8px 12px -6px rgba(0, 0, 0, 0.5),
-    var(--shadow-edge-highlight);
-  --shadow-2xl: 0 28px 50px -12px rgba(0, 0, 0, 0.75), var(--shadow-edge-highlight);
-
-  // On a dark surface a bright highlight reads as a halo, so drop the highlight
-  // alpha and raise the shadow alpha to keep the relief without glowing.
-  --shadow-bevel:
-    inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -1px 1.5px rgba(0, 0, 0, 0.6);
-  --shadow-bevel-strong:
-    inset 0 1.5px 2px rgba(255, 255, 255, 0.22), inset 0 -2px 3px rgba(0, 0, 0, 0.7);
-  --shadow-well:
-    inset 0 1px 1.5px rgba(0, 0, 0, 0.55), inset 0 -1px 0.5px rgba(255, 255, 255, 0.08);
-  --shadow-well-strong:
-    inset 0 2px 3px rgba(0, 0, 0, 0.7), inset 0 -1.5px 1px rgba(255, 255, 255, 0.12);
-}
-
-@media (prefers-color-scheme: dark) {
-  :where(:root:not([data-theme='light'])) {
-    @include dark-elevation-tokens;
-  }
-}
-
-:where(:root[data-theme='dark']) {
-  @include dark-elevation-tokens;
-}

package/src/styles/tokens/_index.scss

@@ -1,6 +0,0 @@
-@forward 'colors';
-@forward 'typography';
-@forward 'spacing';
-@forward 'shape';
-@forward 'elevation';
-@forward 'motion';

package/src/styles/tokens/_motion.scss

@@ -1,37 +0,0 @@
-// :where() keeps tokens at zero specificity so consumer overrides win; see _colors.scss.
-:where(:root) {
-  --duration-instant: 0ms;
-  --duration-fast: 100ms;
-  --duration-normal: 200ms;
-  --duration-slow: 300ms;
-  --duration-slower: 500ms;
-
-  --ease-linear: linear;
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-
-  --transition-colors:
-    color var(--duration-fast) var(--ease-out),
-    background-color var(--duration-fast) var(--ease-out),
-    border-color var(--duration-fast) var(--ease-out),
-    fill var(--duration-fast) var(--ease-out);
-
-  --transition-shadow: box-shadow var(--duration-fast) var(--ease-out);
-
-  --transition-transform: transform var(--duration-normal) var(--ease-spring);
-
-  --transition-opacity: opacity var(--duration-normal) var(--ease-out);
-
-  --transition-all: all var(--duration-normal) var(--ease-in-out);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :where(:root) {
-    --duration-fast: 0ms;
-    --duration-normal: 0ms;
-    --duration-slow: 0ms;
-    --duration-slower: 0ms;
-  }
-}

package/src/styles/tokens/_shape.scss

@@ -1,23 +0,0 @@
-// :where() keeps tokens at zero specificity so consumer overrides win; see _colors.scss.
-:where(:root) {
-  --radius-none: 0;
-  --radius-xs: 0.125rem; //  2px
-  --radius-sm: 0.25rem; //  4px
-  --radius-md: 0.375rem; //  6px
-  --radius-lg: 0.5rem; //  8px
-  --radius-xl: 0.75rem; // 12px
-  --radius-2xl: 1rem; // 16px
-  --radius-3xl: 1.5rem; // 24px
-  --radius-full: 9999px; // pill / circle
-
-  --border-width-none: 0;
-  --border-width-thin: 1px;
-  --border-width-medium: 2px;
-  --border-width-thick: 4px;
-
-  // Hit-target box for icon buttons (clear / close / dismiss / toggle). em-based
-  // so it scales with the host component's size; since all sized components share
-  // a font-size per tier, this is also consistent across components at a tier
-  // (md = 1.75 * 16px = 28px).
-  --ea-icon-button-size: 1.75em;
-}