@eagami/ui 2.5.1 → 2.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/eagami-ui.mjs +6 -6
  2. package/fesm2022/eagami-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/src/styles/tokens/_colors.scss +17 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eagami/ui",
3
- "version": "2.5.1",
3
+ "version": "2.5.2",
4
4
  "description": "Lightweight, accessible Angular UI component library built on CSS custom properties",
5
5
  "author": "Michal Wiraszka <michal@eagami.com>",
6
6
  "license": "MIT",
package/src/styles/tokens/_colors.scss CHANGED
@@ -103,21 +103,28 @@
103
103
  --color-brand-secondary-subtle: var(--color-secondary-50);
104
104
  --color-brand-secondary-muted: var(--color-secondary-100);
105
105
 
106
+ // *-text is the status hue as a foreground on its own *-subtle/-muted wash
107
+ // (badge, tag, toast). It needs 4.5:1 vs that wash and flips lighter in dark
108
+ // mode, mirroring --color-brand-text.
106
109
  --color-success-default: var(--color-success-600);
107
110
  --color-success-subtle: var(--color-success-50);
108
111
  --color-success-muted: var(--color-success-100);
112
+ --color-success-text: var(--color-success-700);
109
113
 
110
114
  --color-warning-default: var(--color-warning-600);
111
115
  --color-warning-subtle: var(--color-warning-50);
112
116
  --color-warning-muted: var(--color-warning-100);
117
+ --color-warning-text: var(--color-warning-700);
113
118
 
114
119
  --color-error-default: var(--color-error-600);
115
120
  --color-error-subtle: var(--color-error-50);
116
121
  --color-error-muted: var(--color-error-100);
122
+ --color-error-text: var(--color-error-700);
117
123
 
118
124
  --color-info-default: var(--color-info-600);
119
125
  --color-info-subtle: var(--color-info-50);
120
126
  --color-info-muted: var(--color-info-100);
127
+ --color-info-text: var(--color-info-700);
121
128
 
122
129
  // Pure RGB primaries for the picker's hue wheel and saturation/value
123
130
  // gradient. Intrinsic to the picker, not themeable; kept here so component
@@ -151,7 +158,9 @@
151
158
  --color-bg-subtle: var(--color-neutral-700);
152
159
  --color-bg-stripe: var(--color-neutral-900);
153
160
  --color-bg-elevated: var(--color-neutral-700);
154
- --color-bg-muted: var(--color-neutral-600);
161
+ // One step above bg-base so hover fills (ghost/secondary button, table row)
162
+ // and muted surfaces lift subtly; neutral-600 read too strong on dark.
163
+ --color-bg-muted: var(--color-neutral-700);
155
164
 
156
165
  // Borders stay clear of every bg-* shade so they stay visible. subtle mixes
157
166
  // neutral-700/-800 to sit between card and cell backgrounds; default can't go
@@ -185,6 +194,13 @@
185
194
  --color-error-muted: rgba(239, 68, 68, 0.25);
186
195
  --color-info-subtle: rgba(6, 182, 212, 0.15);
187
196
  --color-info-muted: rgba(6, 182, 212, 0.25);
197
+
198
+ // The *-700 shades are unreadable on the dark translucent washes above; flip
199
+ // to the light *-200 pastels so status text keeps 4.5:1.
200
+ --color-success-text: var(--color-success-200);
201
+ --color-warning-text: var(--color-warning-200);
202
+ --color-error-text: var(--color-error-200);
203
+ --color-info-text: var(--color-info-200);
188
204
  }
189
205
 
190
206
  @media (prefers-color-scheme: dark) {