@eagami/ui 2.4.0 → 2.5.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/fesm2022/eagami-ui.mjs +922 -704
- 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 +25 -37
- 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,27 @@
|
|
|
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
|
-
//
|
|
19
|
-
//
|
|
20
|
-
|
|
21
|
-
|
|
11
|
+
// Composable top-edge highlight appended to every dark-mode shadow so elevated
|
|
12
|
+
// surfaces catch light along their top edge; a no-op in light mode.
|
|
13
|
+
--shadow-edge-highlight: 0 0 #0000;
|
|
14
|
+
|
|
15
|
+
// Bevel: paired inset highlight (top) + shadow (bottom) for a raised look;
|
|
16
|
+
// compose with --shadow-* for an ambient drop.
|
|
22
17
|
--shadow-bevel:
|
|
23
18
|
inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -1px 1.5px rgba(0, 0, 0, 0.25);
|
|
24
19
|
--shadow-bevel-strong:
|
|
25
20
|
inset 0 1.5px 2px rgba(255, 255, 255, 0.9), inset 0 -2px 3px rgba(0, 0, 0, 0.3);
|
|
26
21
|
|
|
27
|
-
// Well
|
|
28
|
-
// that should read as recessed/sunken (cavity in a ring, depressed switch,
|
|
29
|
-
// inset panel). Inverse lighting of `--shadow-bevel`.
|
|
22
|
+
// Well: inverse of bevel (inset shadow top, highlight bottom) for a recessed look
|
|
30
23
|
--shadow-well:
|
|
31
24
|
inset 0 1px 1.5px rgba(0, 0, 0, 0.3), inset 0 -1px 0.5px rgba(255, 255, 255, 0.5);
|
|
32
25
|
--shadow-well-strong:
|
|
33
26
|
inset 0 2px 3px rgba(0, 0, 0, 0.4), inset 0 -1.5px 1px rgba(255, 255, 255, 0.55);
|
|
34
27
|
|
|
35
|
-
// Focus ring — used for keyboard accessibility across all interactive elements
|
|
36
28
|
--shadow-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.45);
|
|
37
29
|
--shadow-focus-ring-error: 0 0 0 3px var(--color-error-200);
|
|
38
30
|
--shadow-focus-ring-success: 0 0 0 3px var(--color-success-200);
|
|
39
31
|
|
|
40
|
-
// ---------------------------------------------------------------------------
|
|
41
|
-
// Z-index scale
|
|
42
|
-
// ---------------------------------------------------------------------------
|
|
43
32
|
--z-index-base: 0;
|
|
44
33
|
--z-index-raised: 10;
|
|
45
34
|
--z-index-dropdown: 100;
|
|
@@ -51,31 +40,30 @@
|
|
|
51
40
|
--z-index-tooltip: 700;
|
|
52
41
|
}
|
|
53
42
|
|
|
54
|
-
// Dark mode
|
|
55
|
-
//
|
|
56
|
-
//
|
|
57
|
-
//
|
|
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.
|
|
43
|
+
// Dark mode: a drop shadow is the absence of light, so it stays black (deeper
|
|
44
|
+
// than light mode); a white "shadow" reads as a glow and looks wrong. Elevation
|
|
45
|
+
// is carried instead by the lifted surface tone plus a hairline top highlight
|
|
46
|
+
// that catches light, appended to every level via --shadow-edge-highlight.
|
|
64
47
|
@mixin dark-elevation-tokens {
|
|
65
|
-
--shadow-
|
|
48
|
+
--shadow-edge-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
|
|
49
|
+
|
|
50
|
+
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4), var(--shadow-edge-highlight);
|
|
66
51
|
--shadow-sm:
|
|
67
|
-
0 1px 3px 0 rgba(
|
|
52
|
+
0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4),
|
|
53
|
+
var(--shadow-edge-highlight);
|
|
68
54
|
--shadow-md:
|
|
69
|
-
0 4px
|
|
55
|
+
0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4),
|
|
56
|
+
var(--shadow-edge-highlight);
|
|
70
57
|
--shadow-lg:
|
|
71
|
-
0
|
|
58
|
+
0 12px 20px -4px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.45),
|
|
59
|
+
var(--shadow-edge-highlight);
|
|
72
60
|
--shadow-xl:
|
|
73
|
-
0
|
|
74
|
-
|
|
61
|
+
0 20px 28px -6px rgba(0, 0, 0, 0.65), 0 8px 12px -6px rgba(0, 0, 0, 0.5),
|
|
62
|
+
var(--shadow-edge-highlight);
|
|
63
|
+
--shadow-2xl: 0 28px 50px -12px rgba(0, 0, 0, 0.75), var(--shadow-edge-highlight);
|
|
75
64
|
|
|
76
|
-
//
|
|
77
|
-
//
|
|
78
|
-
// still reads as 3D on the lifted bg-base (neutral-800) without glowing.
|
|
65
|
+
// On a dark surface a bright highlight reads as a halo, so drop the highlight
|
|
66
|
+
// alpha and raise the shadow alpha to keep the relief without glowing.
|
|
79
67
|
--shadow-bevel:
|
|
80
68
|
inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -1px 1.5px rgba(0, 0, 0, 0.6);
|
|
81
69
|
--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
|