@eagami/ui 0.12.0 → 1.0.1
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.
- package/README.md +41 -670
- package/fesm2022/eagami-ui.mjs +733 -202
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +4 -1
- package/src/styles/tokens/_colors.scss +53 -21
- package/src/styles/tokens/_elevation.scss +24 -0
- package/types/eagami-ui.d.ts +509 -90
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eagami/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.1",
|
|
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",
|
|
@@ -25,6 +25,9 @@
|
|
|
25
25
|
"@angular/core": "^21.0.0",
|
|
26
26
|
"@angular/forms": "^21.0.0"
|
|
27
27
|
},
|
|
28
|
+
"engines": {
|
|
29
|
+
"node": ">=20"
|
|
30
|
+
},
|
|
28
31
|
"module": "fesm2022/eagami-ui.mjs",
|
|
29
32
|
"typings": "types/eagami-ui.d.ts",
|
|
30
33
|
"exports": {
|
|
@@ -88,12 +88,13 @@
|
|
|
88
88
|
--color-text-disabled: var(--color-neutral-300);
|
|
89
89
|
--color-text-inverse: var(--color-neutral-0);
|
|
90
90
|
--color-text-link: var(--color-primary-600);
|
|
91
|
-
--color-text-link-hover: var(--color-primary-
|
|
91
|
+
--color-text-link-hover: var(--color-primary-800);
|
|
92
92
|
|
|
93
93
|
// Background
|
|
94
94
|
--color-bg-base: var(--color-neutral-0);
|
|
95
95
|
--color-bg-subtle: var(--color-neutral-50);
|
|
96
96
|
--color-bg-muted: var(--color-neutral-100);
|
|
97
|
+
--color-bg-elevated: var(--color-neutral-0);
|
|
97
98
|
--color-bg-overlay: rgba(0, 0, 0, 0.5);
|
|
98
99
|
|
|
99
100
|
// Border
|
|
@@ -134,27 +135,58 @@
|
|
|
134
135
|
}
|
|
135
136
|
|
|
136
137
|
// ---------------------------------------------------------------------------
|
|
137
|
-
// Dark mode overrides
|
|
138
|
+
// Dark mode overrides — applied when the OS prefers dark, unless the
|
|
139
|
+
// consumer has explicitly opted out via `<html data-theme="light">`. To
|
|
140
|
+
// force dark regardless of OS, set `<html data-theme="dark">`.
|
|
138
141
|
// ---------------------------------------------------------------------------
|
|
142
|
+
@mixin dark-color-tokens {
|
|
143
|
+
--color-text-primary: var(--color-neutral-50);
|
|
144
|
+
--color-text-secondary: var(--color-neutral-400);
|
|
145
|
+
--color-text-tertiary: var(--color-neutral-500);
|
|
146
|
+
--color-text-disabled: var(--color-neutral-700);
|
|
147
|
+
--color-text-inverse: var(--color-neutral-900);
|
|
148
|
+
--color-text-link: var(--color-primary-300);
|
|
149
|
+
--color-text-link-hover: var(--color-primary-100);
|
|
150
|
+
|
|
151
|
+
--color-bg-base: var(--color-neutral-950);
|
|
152
|
+
--color-bg-subtle: var(--color-neutral-900);
|
|
153
|
+
--color-bg-muted: var(--color-neutral-800);
|
|
154
|
+
// Elevated surfaces (Card variant="elevated", Dialog, Drawer) need a
|
|
155
|
+
// background that's visibly lighter than the page bg, since black shadows
|
|
156
|
+
// disappear against a near-black page. Neutral-900 sits one step above
|
|
157
|
+
// bg-base and gives shadows something to fall against.
|
|
158
|
+
--color-bg-elevated: var(--color-neutral-900);
|
|
159
|
+
|
|
160
|
+
--color-border-default: var(--color-neutral-700);
|
|
161
|
+
--color-border-strong: var(--color-neutral-500);
|
|
162
|
+
|
|
163
|
+
--color-brand-default: var(--color-primary-400);
|
|
164
|
+
--color-brand-hover: var(--color-primary-300);
|
|
165
|
+
--color-brand-active: var(--color-primary-200);
|
|
166
|
+
--color-brand-subtle: rgba(98, 142, 173, 0.1);
|
|
167
|
+
--color-brand-muted: rgba(98, 142, 173, 0.2);
|
|
168
|
+
|
|
169
|
+
// Status `*-subtle` / `*-muted` — light pastels in light mode become
|
|
170
|
+
// unreadable behind light text in dark mode. Re-tint as a low-alpha wash of
|
|
171
|
+
// the saturated `*-500` hue so the surface darkens enough for `*-text-primary`
|
|
172
|
+
// (white) to read against it.
|
|
173
|
+
--color-success-subtle: rgba(34, 197, 94, 0.15);
|
|
174
|
+
--color-success-muted: rgba(34, 197, 94, 0.25);
|
|
175
|
+
--color-warning-subtle: rgba(245, 158, 11, 0.15);
|
|
176
|
+
--color-warning-muted: rgba(245, 158, 11, 0.25);
|
|
177
|
+
--color-error-subtle: rgba(239, 68, 68, 0.15);
|
|
178
|
+
--color-error-muted: rgba(239, 68, 68, 0.25);
|
|
179
|
+
--color-info-subtle: rgba(6, 182, 212, 0.15);
|
|
180
|
+
--color-info-muted: rgba(6, 182, 212, 0.25);
|
|
181
|
+
}
|
|
182
|
+
|
|
139
183
|
@media (prefers-color-scheme: dark) {
|
|
140
|
-
:root {
|
|
141
|
-
|
|
142
|
-
--color-text-secondary: var(--color-neutral-400);
|
|
143
|
-
--color-text-tertiary: var(--color-neutral-500);
|
|
144
|
-
--color-text-disabled: var(--color-neutral-700);
|
|
145
|
-
--color-text-inverse: var(--color-neutral-900);
|
|
146
|
-
|
|
147
|
-
--color-bg-base: var(--color-neutral-950);
|
|
148
|
-
--color-bg-subtle: var(--color-neutral-900);
|
|
149
|
-
--color-bg-muted: var(--color-neutral-800);
|
|
150
|
-
|
|
151
|
-
--color-border-default: var(--color-neutral-700);
|
|
152
|
-
--color-border-strong: var(--color-neutral-500);
|
|
153
|
-
|
|
154
|
-
--color-brand-default: var(--color-primary-400);
|
|
155
|
-
--color-brand-hover: var(--color-primary-300);
|
|
156
|
-
--color-brand-active: var(--color-primary-200);
|
|
157
|
-
--color-brand-subtle: rgba(98, 142, 173, 0.1);
|
|
158
|
-
--color-brand-muted: rgba(98, 142, 173, 0.2);
|
|
184
|
+
:root:not([data-theme='light']) {
|
|
185
|
+
@include dark-color-tokens;
|
|
159
186
|
}
|
|
160
187
|
}
|
|
188
|
+
|
|
189
|
+
:root[data-theme='dark'] {
|
|
190
|
+
@include dark-color-tokens;
|
|
191
|
+
color-scheme: dark;
|
|
192
|
+
}
|
|
@@ -33,3 +33,27 @@
|
|
|
33
33
|
--z-index-toast: 600;
|
|
34
34
|
--z-index-tooltip: 700;
|
|
35
35
|
}
|
|
36
|
+
|
|
37
|
+
// Dark mode — black shadows lose contrast against dark backgrounds, so deepen
|
|
38
|
+
// alpha values so elevated surfaces still have a perceptible boundary. The
|
|
39
|
+
// `:not([data-theme='light'])` clause lets consumers force light mode via
|
|
40
|
+
// `<html data-theme="light">` even when the OS prefers dark, and the
|
|
41
|
+
// matching `[data-theme='dark']` block forces dark mode regardless of OS.
|
|
42
|
+
@mixin dark-elevation-tokens {
|
|
43
|
+
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
|
|
44
|
+
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.6), 0 1px 2px -1px rgba(0, 0, 0, 0.5);
|
|
45
|
+
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
|
|
46
|
+
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
|
|
47
|
+
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
|
|
48
|
+
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@media (prefers-color-scheme: dark) {
|
|
52
|
+
:root:not([data-theme='light']) {
|
|
53
|
+
@include dark-elevation-tokens;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
:root[data-theme='dark'] {
|
|
58
|
+
@include dark-elevation-tokens;
|
|
59
|
+
}
|