@eagami/ui 4.1.1 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "4.1.1",
+  "version": "4.3.0",
   "description": "Lightweight, accessible Angular UI component library built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",

package/src/styles/tokens/_colors.scss

@@ -1,4 +1,10 @@
-:root {
+// 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;
@@ -248,12 +254,12 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme='light']) {
+  :where(:root:not([data-theme='light'])) {
     @include dark-color-tokens;
   }
 }
 
-:root[data-theme='dark'] {
+:where(:root[data-theme='dark']) {
   @include dark-color-tokens;
   color-scheme: dark;
 }

package/src/styles/tokens/_elevation.scss

@@ -1,4 +1,6 @@
-:root {
+// :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);
@@ -75,11 +77,11 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme='light']) {
+  :where(:root:not([data-theme='light'])) {
     @include dark-elevation-tokens;
   }
 }
 
-:root[data-theme='dark'] {
+:where(:root[data-theme='dark']) {
   @include dark-elevation-tokens;
 }

package/src/styles/tokens/_motion.scss

@@ -1,4 +1,5 @@
-:root {
+// :where() keeps tokens at zero specificity so consumer overrides win; see _colors.scss.
+:where(:root) {
   --duration-instant: 0ms;
   --duration-fast: 100ms;
   --duration-normal: 200ms;
@@ -27,7 +28,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  :root {
+  :where(:root) {
     --duration-fast: 0ms;
     --duration-normal: 0ms;
     --duration-slow: 0ms;

package/src/styles/tokens/_shape.scss

@@ -1,4 +1,5 @@
-:root {
+// :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

package/src/styles/tokens/_spacing.scss

@@ -1,4 +1,5 @@
-:root {
+// :where() keeps tokens at zero specificity so consumer overrides win; see _colors.scss.
+:where(:root) {
   --space-0: 0;
   --space-px: 1px;
   --space-0-5: 0.125rem; //  2px

package/src/styles/tokens/_typography.scss

@@ -1,4 +1,5 @@
-:root {
+// :where() keeps tokens at zero specificity so consumer overrides win; see _colors.scss.
+:where(:root) {
   // The `* Fallback` faces are Arial tuned with metric overrides to match the
   // web fonts, so they must sit right after each web font in the stack: that way
   // text laid out before the font loads has the same metrics and `font-display: