@eagami/ui 2.4.0 → 2.5.0
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/fesm2022/eagami-ui.mjs +918 -700
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/_reset.scss +0 -5
- package/src/styles/_tooltip.scss +3 -8
- package/src/styles/eagami-ui.scss +2 -13
- package/src/styles/tokens/_colors.scss +23 -66
- package/src/styles/tokens/_elevation.scss +8 -31
- package/src/styles/tokens/_index.scss +0 -5
- package/src/styles/tokens/_motion.scss +0 -14
- package/src/styles/tokens/_shape.scss +0 -10
- package/src/styles/tokens/_spacing.scss +4 -17
- package/src/styles/tokens/_typography.scss +26 -70
- package/types/eagami-ui.d.ts +93 -106
package/package.json
CHANGED
package/src/styles/_reset.scss
CHANGED
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
// =============================================================================
|
|
2
|
-
// BASE RESET
|
|
3
|
-
// Lightweight reset that plays well with design tokens.
|
|
4
|
-
// =============================================================================
|
|
5
|
-
|
|
6
1
|
*,
|
|
7
2
|
*::before,
|
|
8
3
|
*::after {
|
package/src/styles/_tooltip.scss
CHANGED
|
@@ -1,11 +1,6 @@
|
|
|
1
|
-
//
|
|
2
|
-
//
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
// Belt-and-braces guard against "sticky hover" on touch devices, which fire
|
|
6
|
-
// `mouseenter` on tap but never the matching `mouseleave`. The directive also
|
|
7
|
-
// gates pointer listeners on `(hover: hover)`, but if a tooltip ever slips
|
|
8
|
-
// through (e.g. from a custom integration), keep it invisible on touch.
|
|
1
|
+
// Guard against "sticky hover" on touch devices, which fire `mouseenter` on tap
|
|
2
|
+
// but never the matching `mouseleave`. The directive gates pointer listeners on
|
|
3
|
+
// `(hover: hover)`, but if a tooltip ever slips through keep it invisible on touch.
|
|
9
4
|
.ea-tooltip {
|
|
10
5
|
z-index: var(--z-index-tooltip);
|
|
11
6
|
position: absolute;
|
|
@@ -1,16 +1,5 @@
|
|
|
1
|
-
//
|
|
2
|
-
//
|
|
3
|
-
//
|
|
4
|
-
// Import this once at the root of your application:
|
|
5
|
-
// @use 'eagami-ui/src/styles/eagami-ui' (or via angular.json styles array)
|
|
6
|
-
//
|
|
7
|
-
// This file loads all design token CSS custom properties and the base reset.
|
|
8
|
-
//
|
|
9
|
-
// Fonts: load DM Sans + Syne via <link> tags in your HTML <head>:
|
|
10
|
-
// <link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
11
|
-
// <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
12
|
-
// <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=Syne:wght@400;500;600;700&display=swap" />
|
|
13
|
-
// =============================================================================
|
|
1
|
+
// Global stylesheet: loads all design token custom properties and the base reset.
|
|
2
|
+
// Consumers must also load the DM Sans and Syne fonts via <link> tags in the HTML head.
|
|
14
3
|
|
|
15
4
|
@use 'tokens/index';
|
|
16
5
|
@use 'reset';
|
|
@@ -1,13 +1,4 @@
|
|
|
1
|
-
// =============================================================================
|
|
2
|
-
// COLOR TOKENS
|
|
3
|
-
// =============================================================================
|
|
4
|
-
|
|
5
1
|
:root {
|
|
6
|
-
// ---------------------------------------------------------------------------
|
|
7
|
-
// Primitive palette
|
|
8
|
-
// ---------------------------------------------------------------------------
|
|
9
|
-
|
|
10
|
-
// Primary
|
|
11
2
|
--color-primary-50: #ecf3f9;
|
|
12
3
|
--color-primary-100: #d1e3f0;
|
|
13
4
|
--color-primary-200: #abcbe3;
|
|
@@ -19,7 +10,6 @@
|
|
|
19
10
|
--color-primary-800: #162f41;
|
|
20
11
|
--color-primary-900: #0d1c26;
|
|
21
12
|
|
|
22
|
-
// Secondary
|
|
23
13
|
--color-secondary-50: #f2eff5;
|
|
24
14
|
--color-secondary-100: #dfd9e8;
|
|
25
15
|
--color-secondary-200: #c4b9d5;
|
|
@@ -31,7 +21,6 @@
|
|
|
31
21
|
--color-secondary-800: #292136;
|
|
32
22
|
--color-secondary-900: #181320;
|
|
33
23
|
|
|
34
|
-
// Neutral (Gray)
|
|
35
24
|
--color-neutral-0: #ffffff;
|
|
36
25
|
--color-neutral-50: #f9fafb;
|
|
37
26
|
--color-neutral-100: #f3f4f6;
|
|
@@ -45,7 +34,6 @@
|
|
|
45
34
|
--color-neutral-900: #111827;
|
|
46
35
|
--color-neutral-950: #030712;
|
|
47
36
|
|
|
48
|
-
// Success (Green)
|
|
49
37
|
--color-success-50: #f0fdf4;
|
|
50
38
|
--color-success-100: #dcfce7;
|
|
51
39
|
--color-success-200: #bbf7d0;
|
|
@@ -53,7 +41,6 @@
|
|
|
53
41
|
--color-success-600: #16a34a;
|
|
54
42
|
--color-success-700: #15803d;
|
|
55
43
|
|
|
56
|
-
// Warning (Amber)
|
|
57
44
|
--color-warning-50: #fffbeb;
|
|
58
45
|
--color-warning-100: #fef3c7;
|
|
59
46
|
--color-warning-200: #fde68a;
|
|
@@ -61,7 +48,6 @@
|
|
|
61
48
|
--color-warning-600: #d97706;
|
|
62
49
|
--color-warning-700: #b45309;
|
|
63
50
|
|
|
64
|
-
// Error (Red)
|
|
65
51
|
--color-error-50: #fef2f2;
|
|
66
52
|
--color-error-100: #fee2e2;
|
|
67
53
|
--color-error-200: #fecaca;
|
|
@@ -69,7 +55,6 @@
|
|
|
69
55
|
--color-error-600: #dc2626;
|
|
70
56
|
--color-error-700: #b91c1c;
|
|
71
57
|
|
|
72
|
-
// Info (Cyan)
|
|
73
58
|
--color-info-50: #ecfeff;
|
|
74
59
|
--color-info-100: #cffafe;
|
|
75
60
|
--color-info-200: #a5f3fc;
|
|
@@ -77,11 +62,6 @@
|
|
|
77
62
|
--color-info-600: #0891b2;
|
|
78
63
|
--color-info-700: #0e7490;
|
|
79
64
|
|
|
80
|
-
// ---------------------------------------------------------------------------
|
|
81
|
-
// Semantic tokens — light mode
|
|
82
|
-
// ---------------------------------------------------------------------------
|
|
83
|
-
|
|
84
|
-
// Text
|
|
85
65
|
--color-text-primary: var(--color-neutral-900);
|
|
86
66
|
--color-text-secondary: var(--color-neutral-600);
|
|
87
67
|
--color-text-tertiary: var(--color-neutral-400);
|
|
@@ -90,10 +70,9 @@
|
|
|
90
70
|
--color-text-link: var(--color-primary-600);
|
|
91
71
|
--color-text-link-hover: var(--color-primary-800);
|
|
92
72
|
|
|
93
|
-
// Two-tier
|
|
94
|
-
//
|
|
95
|
-
//
|
|
96
|
-
// surfaces don't disappear into the page.
|
|
73
|
+
// Two-tier surfaces: bg-canvas is the page, bg-base is component surfaces on
|
|
74
|
+
// it (inputs, cards, accordion, popovers). In dark mode bg-base lifts above
|
|
75
|
+
// bg-canvas so surfaces don't vanish into the page.
|
|
97
76
|
--color-bg-canvas: var(--color-neutral-0);
|
|
98
77
|
--color-bg-base: var(--color-neutral-0);
|
|
99
78
|
--color-bg-subtle: var(--color-neutral-50);
|
|
@@ -102,26 +81,15 @@
|
|
|
102
81
|
--color-bg-elevated: var(--color-neutral-0);
|
|
103
82
|
--color-bg-overlay: rgba(0, 0, 0, 0.5);
|
|
104
83
|
|
|
105
|
-
// Border. `subtle` is for low-contrast dividers (table rows, cell grids)
|
|
106
|
-
// where a full `default` border would feel heavy. `default` is the everyday
|
|
107
|
-
// form-component outline; `strong` is for prominent outlines (secondary
|
|
108
|
-
// buttons, etc.); `focus` is the keyboard-focus ring.
|
|
109
84
|
--color-border-subtle: var(--color-neutral-200);
|
|
110
85
|
--color-border-default: var(--color-neutral-200);
|
|
111
86
|
--color-border-strong: var(--color-neutral-400);
|
|
112
87
|
--color-border-focus: var(--color-primary-500);
|
|
113
88
|
|
|
114
|
-
//
|
|
115
|
-
//
|
|
116
|
-
//
|
|
117
|
-
//
|
|
118
|
-
// used as a **surface** — solid background under white text (primary
|
|
119
|
-
// button, badge bg). Needs ≥ 4.5:1 vs white text.
|
|
120
|
-
// - `--color-brand-text` is the brand colour used as a **foreground** on a
|
|
121
|
-
// non-brand surface (selected dropdown row, today marker, sorted column
|
|
122
|
-
// header, link, spinner). Needs ≥ 4.5:1 vs `--color-bg-base`. In dark
|
|
123
|
-
// mode the foreground role flips to a lighter shade so contrast against
|
|
124
|
-
// the dark surface still holds.
|
|
89
|
+
// brand-default/-hover/-active are the brand colour as a surface (solid bg
|
|
90
|
+
// under white text); needs 4.5:1 vs white. brand-text is the brand colour as
|
|
91
|
+
// a foreground on a non-brand surface; needs 4.5:1 vs bg-base and flips
|
|
92
|
+
// lighter in dark mode.
|
|
125
93
|
--color-brand-default: var(--color-primary-600);
|
|
126
94
|
--color-brand-hover: var(--color-primary-700);
|
|
127
95
|
--color-brand-active: var(--color-primary-800);
|
|
@@ -129,14 +97,12 @@
|
|
|
129
97
|
--color-brand-subtle: var(--color-primary-50);
|
|
130
98
|
--color-brand-muted: var(--color-primary-100);
|
|
131
99
|
|
|
132
|
-
// Secondary brand semantic
|
|
133
100
|
--color-brand-secondary-default: var(--color-secondary-500);
|
|
134
101
|
--color-brand-secondary-hover: var(--color-secondary-600);
|
|
135
102
|
--color-brand-secondary-active: var(--color-secondary-700);
|
|
136
103
|
--color-brand-secondary-subtle: var(--color-secondary-50);
|
|
137
104
|
--color-brand-secondary-muted: var(--color-secondary-100);
|
|
138
105
|
|
|
139
|
-
// Feedback semantic
|
|
140
106
|
--color-success-default: var(--color-success-600);
|
|
141
107
|
--color-success-subtle: var(--color-success-50);
|
|
142
108
|
--color-success-muted: var(--color-success-100);
|
|
@@ -153,9 +119,9 @@
|
|
|
153
119
|
--color-info-subtle: var(--color-info-50);
|
|
154
120
|
--color-info-muted: var(--color-info-100);
|
|
155
121
|
|
|
156
|
-
//
|
|
157
|
-
//
|
|
158
|
-
//
|
|
122
|
+
// Pure RGB primaries for the picker's hue wheel and saturation/value
|
|
123
|
+
// gradient. Intrinsic to the picker, not themeable; kept here so component
|
|
124
|
+
// SCSS stays literal-free.
|
|
159
125
|
--color-picker-hue-red: #ff0000;
|
|
160
126
|
--color-picker-hue-yellow: #ffff00;
|
|
161
127
|
--color-picker-hue-green: #00ff00;
|
|
@@ -167,11 +133,8 @@
|
|
|
167
133
|
--color-picker-thumb-halo: rgba(0, 0, 0, 0.25);
|
|
168
134
|
}
|
|
169
135
|
|
|
170
|
-
//
|
|
171
|
-
//
|
|
172
|
-
// consumer has explicitly opted out via `<html data-theme="light">`. To
|
|
173
|
-
// force dark regardless of OS, set `<html data-theme="dark">`.
|
|
174
|
-
// ---------------------------------------------------------------------------
|
|
136
|
+
// Dark mode: applied when the OS prefers dark, unless forced light via
|
|
137
|
+
// `<html data-theme="light">`. `<html data-theme="dark">` forces dark.
|
|
175
138
|
@mixin dark-color-tokens {
|
|
176
139
|
--color-text-primary: var(--color-neutral-50);
|
|
177
140
|
--color-text-secondary: var(--color-neutral-300);
|
|
@@ -181,11 +144,8 @@
|
|
|
181
144
|
--color-text-link: var(--color-primary-300);
|
|
182
145
|
--color-text-link-hover: var(--color-primary-100);
|
|
183
146
|
|
|
184
|
-
//
|
|
185
|
-
//
|
|
186
|
-
// items, popover panels) read above the page instead of disappearing into
|
|
187
|
-
// it. Subtle / elevated / muted continue the lift for striped rows, floating
|
|
188
|
-
// surfaces, and hover states.
|
|
147
|
+
// Canvas is the deepest page tone; bg-base and up lift component surfaces,
|
|
148
|
+
// striped rows, floating surfaces, and hover states above it.
|
|
189
149
|
--color-bg-canvas: var(--color-neutral-950);
|
|
190
150
|
--color-bg-base: var(--color-neutral-800);
|
|
191
151
|
--color-bg-subtle: var(--color-neutral-700);
|
|
@@ -193,11 +153,9 @@
|
|
|
193
153
|
--color-bg-elevated: var(--color-neutral-700);
|
|
194
154
|
--color-bg-muted: var(--color-neutral-600);
|
|
195
155
|
|
|
196
|
-
// Borders
|
|
197
|
-
//
|
|
198
|
-
//
|
|
199
|
-
// `default` is the form-component outline; anything darker collides with
|
|
200
|
-
// bg-subtle / bg-elevated (both neutral-700) and disappears.
|
|
156
|
+
// Borders stay clear of every bg-* shade so they stay visible. subtle mixes
|
|
157
|
+
// neutral-700/-800 to sit between card and cell backgrounds; default can't go
|
|
158
|
+
// darker without colliding with bg-subtle/-elevated (both neutral-700).
|
|
201
159
|
--color-border-subtle: color-mix(
|
|
202
160
|
in srgb,
|
|
203
161
|
var(--color-neutral-700),
|
|
@@ -206,9 +164,9 @@
|
|
|
206
164
|
--color-border-default: var(--color-neutral-400);
|
|
207
165
|
--color-border-strong: var(--color-neutral-300);
|
|
208
166
|
|
|
209
|
-
//
|
|
210
|
-
//
|
|
211
|
-
//
|
|
167
|
+
// Surface roles step one shade lighter than light mode so the button clears
|
|
168
|
+
// WCAG 1.4.11 (3:1) on the near-black canvas while keeping a white label
|
|
169
|
+
// above 4.5:1.
|
|
212
170
|
--color-brand-default: var(--color-primary-500);
|
|
213
171
|
--color-brand-hover: var(--color-primary-600);
|
|
214
172
|
--color-brand-active: var(--color-primary-700);
|
|
@@ -216,10 +174,9 @@
|
|
|
216
174
|
--color-brand-subtle: rgba(75, 145, 195, 0.1);
|
|
217
175
|
--color-brand-muted: rgba(75, 145, 195, 0.2);
|
|
218
176
|
|
|
219
|
-
//
|
|
220
|
-
//
|
|
221
|
-
//
|
|
222
|
-
// (white) to read against it.
|
|
177
|
+
// Light pastels become unreadable behind light text in dark mode. Re-tint as
|
|
178
|
+
// a low-alpha wash of the saturated *-500 hue so the surface darkens enough
|
|
179
|
+
// for white text.
|
|
223
180
|
--color-success-subtle: rgba(34, 197, 94, 0.15);
|
|
224
181
|
--color-success-muted: rgba(34, 197, 94, 0.25);
|
|
225
182
|
--color-warning-subtle: rgba(245, 158, 11, 0.15);
|
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
// =============================================================================
|
|
2
|
-
// ELEVATION TOKENS — box shadows & z-index
|
|
3
|
-
// =============================================================================
|
|
4
|
-
|
|
5
1
|
:root {
|
|
6
|
-
// ---------------------------------------------------------------------------
|
|
7
|
-
// Box shadows
|
|
8
|
-
// ---------------------------------------------------------------------------
|
|
9
2
|
--shadow-none: none;
|
|
10
3
|
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
11
4
|
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
|
|
@@ -15,31 +8,23 @@
|
|
|
15
8
|
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
16
9
|
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
|
|
17
10
|
|
|
18
|
-
// Bevel
|
|
19
|
-
//
|
|
20
|
-
// toggles). Compose with `--shadow-*` for an ambient drop:
|
|
21
|
-
// `box-shadow: var(--shadow-bevel), var(--shadow-sm);`
|
|
11
|
+
// Bevel: paired inset highlight (top) + shadow (bottom) for a raised look;
|
|
12
|
+
// compose with --shadow-* for an ambient drop.
|
|
22
13
|
--shadow-bevel:
|
|
23
14
|
inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -1px 1.5px rgba(0, 0, 0, 0.25);
|
|
24
15
|
--shadow-bevel-strong:
|
|
25
16
|
inset 0 1.5px 2px rgba(255, 255, 255, 0.9), inset 0 -2px 3px rgba(0, 0, 0, 0.3);
|
|
26
17
|
|
|
27
|
-
// Well
|
|
28
|
-
// that should read as recessed/sunken (cavity in a ring, depressed switch,
|
|
29
|
-
// inset panel). Inverse lighting of `--shadow-bevel`.
|
|
18
|
+
// Well: inverse of bevel (inset shadow top, highlight bottom) for a recessed look
|
|
30
19
|
--shadow-well:
|
|
31
20
|
inset 0 1px 1.5px rgba(0, 0, 0, 0.3), inset 0 -1px 0.5px rgba(255, 255, 255, 0.5);
|
|
32
21
|
--shadow-well-strong:
|
|
33
22
|
inset 0 2px 3px rgba(0, 0, 0, 0.4), inset 0 -1.5px 1px rgba(255, 255, 255, 0.55);
|
|
34
23
|
|
|
35
|
-
// Focus ring — used for keyboard accessibility across all interactive elements
|
|
36
24
|
--shadow-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.45);
|
|
37
25
|
--shadow-focus-ring-error: 0 0 0 3px var(--color-error-200);
|
|
38
26
|
--shadow-focus-ring-success: 0 0 0 3px var(--color-success-200);
|
|
39
27
|
|
|
40
|
-
// ---------------------------------------------------------------------------
|
|
41
|
-
// Z-index scale
|
|
42
|
-
// ---------------------------------------------------------------------------
|
|
43
28
|
--z-index-base: 0;
|
|
44
29
|
--z-index-raised: 10;
|
|
45
30
|
--z-index-dropdown: 100;
|
|
@@ -51,16 +36,9 @@
|
|
|
51
36
|
--z-index-tooltip: 700;
|
|
52
37
|
}
|
|
53
38
|
|
|
54
|
-
// Dark mode
|
|
55
|
-
//
|
|
56
|
-
//
|
|
57
|
-
// muted dark gray that mirrors the role black-at-low-alpha plays in light mode.
|
|
58
|
-
// The larger tokens (xl, 2xl) use both tighter offset/blur and lower alpha than
|
|
59
|
-
// their light-mode counterparts — at light-mode geometry a white fade reads as
|
|
60
|
-
// a halo around the surface rather than a shadow beneath it. The
|
|
61
|
-
// `:not([data-theme='light'])` clause lets consumers force light mode via
|
|
62
|
-
// `<html data-theme="light">` even when the OS prefers dark, and the matching
|
|
63
|
-
// `[data-theme='dark']` block forces dark mode regardless of OS.
|
|
39
|
+
// Dark mode: black drop shadows vanish on a near-black page, so flip to white
|
|
40
|
+
// at low alpha (reads as a muted dark cast). xl/2xl also tighten offset/blur so
|
|
41
|
+
// the lighter fade doesn't bloom into a halo.
|
|
64
42
|
@mixin dark-elevation-tokens {
|
|
65
43
|
--shadow-xs: 0 1px 2px 0 rgba(255, 255, 255, 0.04);
|
|
66
44
|
--shadow-sm:
|
|
@@ -73,9 +51,8 @@
|
|
|
73
51
|
0 12px 18px -4px rgba(255, 255, 255, 0.05), 0 5px 8px -4px rgba(255, 255, 255, 0.03);
|
|
74
52
|
--shadow-2xl: 0 16px 28px -8px rgba(255, 255, 255, 0.06);
|
|
75
53
|
|
|
76
|
-
//
|
|
77
|
-
//
|
|
78
|
-
// still reads as 3D on the lifted bg-base (neutral-800) without glowing.
|
|
54
|
+
// On a dark surface a bright highlight reads as a halo, so drop the highlight
|
|
55
|
+
// alpha and raise the shadow alpha to keep the relief without glowing.
|
|
79
56
|
--shadow-bevel:
|
|
80
57
|
inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -1px 1.5px rgba(0, 0, 0, 0.6);
|
|
81
58
|
--shadow-bevel-strong:
|
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
// =============================================================================
|
|
2
|
-
// DESIGN TOKENS — barrel export
|
|
3
|
-
// Import this single file to get all tokens.
|
|
4
|
-
// =============================================================================
|
|
5
|
-
|
|
6
1
|
@forward 'colors';
|
|
7
2
|
@forward 'typography';
|
|
8
3
|
@forward 'spacing';
|
|
@@ -1,29 +1,16 @@
|
|
|
1
|
-
// =============================================================================
|
|
2
|
-
// MOTION TOKENS — duration, easing, transitions
|
|
3
|
-
// =============================================================================
|
|
4
|
-
|
|
5
1
|
:root {
|
|
6
|
-
// ---------------------------------------------------------------------------
|
|
7
|
-
// Duration
|
|
8
|
-
// ---------------------------------------------------------------------------
|
|
9
2
|
--duration-instant: 0ms;
|
|
10
3
|
--duration-fast: 100ms;
|
|
11
4
|
--duration-normal: 200ms;
|
|
12
5
|
--duration-slow: 300ms;
|
|
13
6
|
--duration-slower: 500ms;
|
|
14
7
|
|
|
15
|
-
// ---------------------------------------------------------------------------
|
|
16
|
-
// Easing
|
|
17
|
-
// ---------------------------------------------------------------------------
|
|
18
8
|
--ease-linear: linear;
|
|
19
9
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
20
10
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
21
11
|
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
22
12
|
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
23
13
|
|
|
24
|
-
// ---------------------------------------------------------------------------
|
|
25
|
-
// Composed transition shortcuts
|
|
26
|
-
// ---------------------------------------------------------------------------
|
|
27
14
|
--transition-colors:
|
|
28
15
|
color var(--duration-fast) var(--ease-out),
|
|
29
16
|
background-color var(--duration-fast) var(--ease-out),
|
|
@@ -39,7 +26,6 @@
|
|
|
39
26
|
--transition-all: all var(--duration-normal) var(--ease-in-out);
|
|
40
27
|
}
|
|
41
28
|
|
|
42
|
-
// Respect reduced-motion preferences
|
|
43
29
|
@media (prefers-reduced-motion: reduce) {
|
|
44
30
|
:root {
|
|
45
31
|
--duration-fast: 0ms;
|
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
// =============================================================================
|
|
2
|
-
// SHAPE TOKENS — border radius, borders
|
|
3
|
-
// =============================================================================
|
|
4
|
-
|
|
5
1
|
:root {
|
|
6
|
-
// ---------------------------------------------------------------------------
|
|
7
|
-
// Border radius
|
|
8
|
-
// ---------------------------------------------------------------------------
|
|
9
2
|
--radius-none: 0;
|
|
10
3
|
--radius-xs: 0.125rem; // 2px
|
|
11
4
|
--radius-sm: 0.25rem; // 4px
|
|
@@ -16,9 +9,6 @@
|
|
|
16
9
|
--radius-3xl: 1.5rem; // 24px
|
|
17
10
|
--radius-full: 9999px; // pill / circle
|
|
18
11
|
|
|
19
|
-
// ---------------------------------------------------------------------------
|
|
20
|
-
// Border width
|
|
21
|
-
// ---------------------------------------------------------------------------
|
|
22
12
|
--border-width-none: 0;
|
|
23
13
|
--border-width-thin: 1px;
|
|
24
14
|
--border-width-medium: 2px;
|
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
// =============================================================================
|
|
2
|
-
// SPACING TOKENS
|
|
3
|
-
// 4px base unit scale
|
|
4
|
-
// =============================================================================
|
|
5
|
-
|
|
6
1
|
:root {
|
|
7
2
|
--space-0: 0;
|
|
8
3
|
--space-px: 1px;
|
|
@@ -28,11 +23,8 @@
|
|
|
28
23
|
--space-24: 6rem; // 96px
|
|
29
24
|
--space-32: 8rem; // 128px
|
|
30
25
|
|
|
31
|
-
//
|
|
32
|
-
//
|
|
33
|
-
// Useful for negative margins (container bleeds, overlap tricks, gutter
|
|
34
|
-
// collapsing) so consumers don't have to write `calc(var(--space-2) * -1)`.
|
|
35
|
-
// ---------------------------------------------------------------------------
|
|
26
|
+
// Negative variants mirror the scale (n- infix) so consumers skip
|
|
27
|
+
// `calc(var(--space-2) * -1)` for negative margins.
|
|
36
28
|
--space-n-px: -1px;
|
|
37
29
|
--space-n-0-5: -0.125rem; // -2px
|
|
38
30
|
--space-n-1: -0.25rem; // -4px
|
|
@@ -56,18 +48,13 @@
|
|
|
56
48
|
--space-n-24: -6rem; // -96px
|
|
57
49
|
--space-n-32: -8rem; // -128px
|
|
58
50
|
|
|
59
|
-
// ---------------------------------------------------------------------------
|
|
60
|
-
// Layout / component-specific semantic spacing
|
|
61
|
-
// ---------------------------------------------------------------------------
|
|
62
|
-
|
|
63
|
-
// Component padding (inset)
|
|
64
51
|
--inset-xs: var(--space-1) var(--space-2); // 4px 8px
|
|
65
52
|
--inset-sm: var(--space-1-5) var(--space-3); // 6px 12px
|
|
66
53
|
--inset-md: var(--space-2) var(--space-4); // 8px 16px
|
|
67
54
|
--inset-lg: var(--space-3) var(--space-6); // 12px 24px
|
|
68
55
|
--inset-xl: var(--space-4) var(--space-8); // 16px 32px
|
|
69
56
|
|
|
70
|
-
//
|
|
57
|
+
// vertical gap
|
|
71
58
|
--stack-2xs: var(--space-1); // 4px
|
|
72
59
|
--stack-xs: var(--space-2); // 8px
|
|
73
60
|
--stack-sm: var(--space-3); // 12px
|
|
@@ -76,7 +63,7 @@
|
|
|
76
63
|
--stack-xl: var(--space-8); // 32px
|
|
77
64
|
--stack-2xl: var(--space-12); // 48px
|
|
78
65
|
|
|
79
|
-
//
|
|
66
|
+
// horizontal gap
|
|
80
67
|
--inline-2xs: var(--space-1); // 4px
|
|
81
68
|
--inline-xs: var(--space-2); // 8px
|
|
82
69
|
--inline-sm: var(--space-3); // 12px
|
|
@@ -1,42 +1,26 @@
|
|
|
1
|
-
// =============================================================================
|
|
2
|
-
// TYPOGRAPHY TOKENS
|
|
3
|
-
// =============================================================================
|
|
4
|
-
|
|
5
1
|
:root {
|
|
6
|
-
// ---------------------------------------------------------------------------
|
|
7
|
-
// Font families
|
|
8
|
-
// ---------------------------------------------------------------------------
|
|
9
2
|
--font-family-sans: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
|
|
10
3
|
--font-family-brand: 'Syne', 'DM Sans', system-ui, sans-serif;
|
|
11
4
|
--font-family-serif: 'Georgia', 'Times New Roman', serif;
|
|
12
5
|
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
13
6
|
|
|
14
|
-
//
|
|
15
|
-
|
|
16
|
-
//
|
|
17
|
-
--font-size-
|
|
18
|
-
--font-size-
|
|
19
|
-
--font-size-
|
|
20
|
-
--font-size-
|
|
21
|
-
--font-size-
|
|
22
|
-
--font-size-
|
|
23
|
-
--font-size-
|
|
24
|
-
|
|
25
|
-
--font-size-4xl: 2.25rem; // 36px
|
|
26
|
-
--font-size-5xl: 3rem; // 48px
|
|
27
|
-
|
|
28
|
-
// ---------------------------------------------------------------------------
|
|
29
|
-
// Font weights
|
|
30
|
-
// ---------------------------------------------------------------------------
|
|
7
|
+
--font-size-2xs: 0.625rem; // 10px
|
|
8
|
+
--font-size-xs: 0.75rem; // 12px
|
|
9
|
+
--font-size-sm: 0.875rem; // 14px
|
|
10
|
+
--font-size-md: 1rem; // 16px
|
|
11
|
+
--font-size-lg: 1.125rem; // 18px
|
|
12
|
+
--font-size-xl: 1.25rem; // 20px
|
|
13
|
+
--font-size-2xl: 1.5rem; // 24px
|
|
14
|
+
--font-size-3xl: 1.875rem; // 30px
|
|
15
|
+
--font-size-4xl: 2.25rem; // 36px
|
|
16
|
+
--font-size-5xl: 3rem; // 48px
|
|
17
|
+
|
|
31
18
|
--font-weight-regular: 400;
|
|
32
19
|
--font-weight-medium: 500;
|
|
33
20
|
--font-weight-semibold: 600;
|
|
34
21
|
--font-weight-bold: 700;
|
|
35
22
|
--font-weight-extrabold: 800;
|
|
36
23
|
|
|
37
|
-
// ---------------------------------------------------------------------------
|
|
38
|
-
// Line heights
|
|
39
|
-
// ---------------------------------------------------------------------------
|
|
40
24
|
--line-height-none: 1;
|
|
41
25
|
--line-height-tight: 1.25;
|
|
42
26
|
--line-height-snug: 1.375;
|
|
@@ -44,9 +28,6 @@
|
|
|
44
28
|
--line-height-relaxed: 1.625;
|
|
45
29
|
--line-height-loose: 2;
|
|
46
30
|
|
|
47
|
-
// ---------------------------------------------------------------------------
|
|
48
|
-
// Letter spacing
|
|
49
|
-
// ---------------------------------------------------------------------------
|
|
50
31
|
--letter-spacing-tighter: -0.05em;
|
|
51
32
|
--letter-spacing-tight: -0.025em;
|
|
52
33
|
--letter-spacing-normal: 0em;
|
|
@@ -54,17 +35,10 @@
|
|
|
54
35
|
--letter-spacing-wider: 0.05em;
|
|
55
36
|
--letter-spacing-widest: 0.1em;
|
|
56
37
|
|
|
57
|
-
// ---------------------------------------------------------------------------
|
|
58
|
-
// Semantic text styles (composite tokens)
|
|
59
|
-
// These map to specific UI roles for consistent usage.
|
|
60
|
-
// ---------------------------------------------------------------------------
|
|
61
|
-
|
|
62
|
-
// Display
|
|
63
38
|
--text-display-size: var(--font-size-5xl);
|
|
64
39
|
--text-display-weight: var(--font-weight-bold);
|
|
65
40
|
--text-display-lh: var(--line-height-tight);
|
|
66
41
|
|
|
67
|
-
// Headings
|
|
68
42
|
--text-h1-size: var(--font-size-4xl);
|
|
69
43
|
--text-h1-weight: var(--font-weight-bold);
|
|
70
44
|
--text-h1-lh: var(--line-height-tight);
|
|
@@ -81,18 +55,14 @@
|
|
|
81
55
|
--text-h4-weight: var(--font-weight-semibold);
|
|
82
56
|
--text-h4-lh: var(--line-height-snug);
|
|
83
57
|
|
|
84
|
-
//
|
|
85
|
-
//
|
|
86
|
-
//
|
|
87
|
-
// as part of the brand wordmark rather than the body type. The only
|
|
88
|
-
// composite that pins a font-family; consumers who want to recolour or
|
|
89
|
-
// resize without re-specifying the family can still override per-piece.
|
|
58
|
+
// Page-level subsection title (an `<h2>` under the page `<h1>`). Mirrors
|
|
59
|
+
// `--text-h4-*` metrics but pins the brand family so it reads as wordmark,
|
|
60
|
+
// not body. Only composite that pins a font-family.
|
|
90
61
|
--text-section-heading-size: var(--font-size-xl);
|
|
91
62
|
--text-section-heading-weight: var(--font-weight-semibold);
|
|
92
63
|
--text-section-heading-lh: var(--line-height-snug);
|
|
93
64
|
--text-section-heading-family: var(--font-family-brand);
|
|
94
65
|
|
|
95
|
-
// Body
|
|
96
66
|
--text-body-lg-size: var(--font-size-lg);
|
|
97
67
|
--text-body-lg-weight: var(--font-weight-regular);
|
|
98
68
|
--text-body-lg-lh: var(--line-height-relaxed);
|
|
@@ -105,7 +75,6 @@
|
|
|
105
75
|
--text-body-sm-weight: var(--font-weight-regular);
|
|
106
76
|
--text-body-sm-lh: var(--line-height-normal);
|
|
107
77
|
|
|
108
|
-
// Labels (form labels, badges, tags)
|
|
109
78
|
--text-label-lg-size: var(--font-size-md);
|
|
110
79
|
--text-label-lg-weight: var(--font-weight-medium);
|
|
111
80
|
--text-label-lg-lh: var(--line-height-tight);
|
|
@@ -118,19 +87,14 @@
|
|
|
118
87
|
--text-label-sm-weight: var(--font-weight-medium);
|
|
119
88
|
--text-label-sm-lh: var(--line-height-tight);
|
|
120
89
|
|
|
121
|
-
// Helper / caption
|
|
122
|
-
//
|
|
123
|
-
//
|
|
124
|
-
//
|
|
125
|
-
//
|
|
126
|
-
// Primary role: field-level hint and error messages on form-like components
|
|
127
|
-
// (see STANDARD below). Secondary role: short subordinate metadata text
|
|
128
|
-
// inside a component, e.g. `<ea-file-uploader>`'s constraints disclosure
|
|
129
|
-
// ("PNG or JPG up to 5MB") and per-file size label ("245 KB"). For any
|
|
130
|
-
// role bigger than these, reach for a body-* composite instead.
|
|
90
|
+
// Helper / caption: subordinate text below a component's primary content.
|
|
91
|
+
// 13px (between --font-size-xs 12px and -sm 14px) so it stays subordinate
|
|
92
|
+
// without hitting the barely-readable 12px floor. Used for field hint and
|
|
93
|
+
// error messages (see standard below) and short metadata such as a
|
|
94
|
+
// file-uploader's constraints or per-file size labels.
|
|
131
95
|
//
|
|
132
|
-
//
|
|
133
|
-
// `hint`) must render its messages identically. Mirror `<ea-input
|
|
96
|
+
// Standard: every form-like component (anything exposing `errorMsg` and/or
|
|
97
|
+
// `hint`) must render its messages identically. Mirror `<ea-input>`:
|
|
134
98
|
// 1. `<p class="ea-{name}-field__message ea-{name}-field__message--error">`
|
|
135
99
|
// (or `--hint`) with `role="alert"` on the error variant and an `id`
|
|
136
100
|
// matching the field's `aria-describedby`.
|
|
@@ -146,35 +110,27 @@
|
|
|
146
110
|
// specific (`--color-text-secondary` or `inherit`) but stays consistent
|
|
147
111
|
// within a component.
|
|
148
112
|
// 6. `AlertCircleIconComponent` must be in the component's `imports: [...]`.
|
|
149
|
-
--text-helper-size: 0.8125rem; //
|
|
113
|
+
--text-helper-size: 0.8125rem; // 13px
|
|
150
114
|
--text-helper-weight: var(--font-weight-regular);
|
|
151
115
|
--text-helper-lh: var(--line-height-normal);
|
|
152
116
|
|
|
153
|
-
//
|
|
154
|
-
// is relative (em) so it tracks the surrounding text size rather than
|
|
155
|
-
// forcing an absolute value. Apply with `font-size: var(--text-code-size);
|
|
156
|
-
// font-weight: var(--text-code-weight); font-family: var(--text-code-family);
|
|
157
|
-
// color: var(--text-code-color); background-color: var(--text-code-bg);
|
|
158
|
-
// padding: var(--text-code-padding); border-radius: var(--text-code-radius);`
|
|
159
|
-
// on `code` (or `<ea-text variant="code">` when that ships).
|
|
117
|
+
// Inline code chip; em-sized so it tracks the surrounding text
|
|
160
118
|
--text-code-size: 0.875em;
|
|
161
119
|
--text-code-weight: var(--font-weight-regular);
|
|
162
120
|
--text-code-family: var(--font-family-mono);
|
|
163
121
|
--text-code-color: var(--color-text-primary);
|
|
164
122
|
--text-code-bg: var(--color-bg-muted);
|
|
165
|
-
--text-code-padding: var(--space-0-5) var(--space-1-5); //
|
|
123
|
+
--text-code-padding: var(--space-0-5) var(--space-1-5); // 2px 6px
|
|
166
124
|
--text-code-radius: var(--radius-sm);
|
|
167
125
|
|
|
168
|
-
//
|
|
169
|
-
// raised appearance (border + 1px bottom shadow) to suggest a physical key.
|
|
170
|
-
// Same shape language as `code` so the two read as a family.
|
|
126
|
+
// Keyboard-key glyph; raised border + bottom shadow suggest a physical key
|
|
171
127
|
--text-kbd-size: 0.8125em;
|
|
172
128
|
--text-kbd-weight: var(--font-weight-medium);
|
|
173
129
|
--text-kbd-family: var(--font-family-mono);
|
|
174
130
|
--text-kbd-color: var(--color-text-primary);
|
|
175
131
|
--text-kbd-bg: var(--color-bg-base);
|
|
176
132
|
--text-kbd-border: var(--border-width-thin) solid var(--color-border-default);
|
|
177
|
-
--text-kbd-padding: var(--space-0-5) var(--space-1-5); //
|
|
133
|
+
--text-kbd-padding: var(--space-0-5) var(--space-1-5); // 2px 6px
|
|
178
134
|
--text-kbd-radius: var(--radius-sm);
|
|
179
135
|
--text-kbd-shadow: 0 1px 0 var(--color-border-default);
|
|
180
136
|
}
|