@flytedan/flytebot-design-system 0.1.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/dist/index.cjs +9762 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +2727 -0
- package/dist/index.d.ts +2727 -0
- package/dist/index.js +9580 -0
- package/dist/index.js.map +1 -0
- package/package.json +53 -0
- package/styles/components.css +5557 -0
- package/styles/foundations.css +230 -0
- package/styles/tokens.css +290 -0
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
/* Vendored from the flytedesk Design System's foundations/base.css. */
|
|
2
|
+
*,
|
|
3
|
+
*::before,
|
|
4
|
+
*::after {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
}
|
|
7
|
+
html {
|
|
8
|
+
-webkit-text-size-adjust: 100%;
|
|
9
|
+
}
|
|
10
|
+
body {
|
|
11
|
+
margin: 0;
|
|
12
|
+
background: var(--page);
|
|
13
|
+
color: var(--text);
|
|
14
|
+
font-family: var(--font-sans);
|
|
15
|
+
font-size: var(--body-size);
|
|
16
|
+
line-height: var(--body-lh);
|
|
17
|
+
-webkit-font-smoothing: antialiased;
|
|
18
|
+
text-rendering: optimizeLegibility;
|
|
19
|
+
}
|
|
20
|
+
h1,
|
|
21
|
+
h2,
|
|
22
|
+
h3,
|
|
23
|
+
h4,
|
|
24
|
+
h5,
|
|
25
|
+
h6,
|
|
26
|
+
p,
|
|
27
|
+
figure,
|
|
28
|
+
blockquote {
|
|
29
|
+
margin: 0;
|
|
30
|
+
}
|
|
31
|
+
img,
|
|
32
|
+
svg,
|
|
33
|
+
video {
|
|
34
|
+
display: block;
|
|
35
|
+
max-width: 100%;
|
|
36
|
+
}
|
|
37
|
+
button,
|
|
38
|
+
input,
|
|
39
|
+
select,
|
|
40
|
+
textarea {
|
|
41
|
+
font: inherit;
|
|
42
|
+
color: inherit;
|
|
43
|
+
}
|
|
44
|
+
a {
|
|
45
|
+
color: var(--link);
|
|
46
|
+
text-decoration: none;
|
|
47
|
+
transition: color var(--dur-fast) var(--ease);
|
|
48
|
+
}
|
|
49
|
+
a:hover {
|
|
50
|
+
color: var(--link-hover);
|
|
51
|
+
text-decoration: underline;
|
|
52
|
+
text-underline-offset: 2px;
|
|
53
|
+
}
|
|
54
|
+
a:focus-visible,
|
|
55
|
+
button:focus-visible,
|
|
56
|
+
input:focus-visible,
|
|
57
|
+
select:focus-visible,
|
|
58
|
+
textarea:focus-visible,
|
|
59
|
+
[tabindex]:focus-visible {
|
|
60
|
+
outline: none;
|
|
61
|
+
box-shadow: var(--focus-ring);
|
|
62
|
+
}
|
|
63
|
+
::selection {
|
|
64
|
+
background: var(--selection-bg);
|
|
65
|
+
color: var(--selection-text);
|
|
66
|
+
}
|
|
67
|
+
hr {
|
|
68
|
+
border: 0;
|
|
69
|
+
border-top: 1px solid var(--border);
|
|
70
|
+
margin: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.fd-h1 {
|
|
74
|
+
font-size: var(--h1-size);
|
|
75
|
+
line-height: var(--h1-lh);
|
|
76
|
+
letter-spacing: var(--h1-track);
|
|
77
|
+
font-weight: var(--w-semibold);
|
|
78
|
+
}
|
|
79
|
+
.fd-h2 {
|
|
80
|
+
font-size: var(--h2-size);
|
|
81
|
+
line-height: var(--h2-lh);
|
|
82
|
+
letter-spacing: var(--h2-track);
|
|
83
|
+
font-weight: var(--w-semibold);
|
|
84
|
+
}
|
|
85
|
+
.fd-h3 {
|
|
86
|
+
font-size: var(--h3-size);
|
|
87
|
+
line-height: var(--h3-lh);
|
|
88
|
+
letter-spacing: var(--h3-track);
|
|
89
|
+
font-weight: var(--w-semibold);
|
|
90
|
+
}
|
|
91
|
+
.fd-h4 {
|
|
92
|
+
font-size: var(--h4-size);
|
|
93
|
+
line-height: var(--h4-lh);
|
|
94
|
+
letter-spacing: var(--h4-track);
|
|
95
|
+
font-weight: var(--w-semibold);
|
|
96
|
+
}
|
|
97
|
+
.fd-body-lg {
|
|
98
|
+
font-size: var(--body-lg-size);
|
|
99
|
+
line-height: var(--body-lg-lh);
|
|
100
|
+
}
|
|
101
|
+
.fd-body {
|
|
102
|
+
font-size: var(--body-size);
|
|
103
|
+
line-height: var(--body-lh);
|
|
104
|
+
}
|
|
105
|
+
.fd-body-sm {
|
|
106
|
+
font-size: var(--body-sm-size);
|
|
107
|
+
line-height: var(--body-sm-lh);
|
|
108
|
+
}
|
|
109
|
+
.fd-label-lg {
|
|
110
|
+
font-size: var(--label-lg-size);
|
|
111
|
+
line-height: var(--label-lg-lh);
|
|
112
|
+
letter-spacing: var(--label-lg-track);
|
|
113
|
+
font-weight: var(--w-semibold);
|
|
114
|
+
}
|
|
115
|
+
.fd-label {
|
|
116
|
+
font-size: var(--label-size);
|
|
117
|
+
line-height: var(--label-lh);
|
|
118
|
+
letter-spacing: var(--label-track);
|
|
119
|
+
font-weight: var(--w-semibold);
|
|
120
|
+
}
|
|
121
|
+
.fd-mono {
|
|
122
|
+
font-family: var(--font-mono);
|
|
123
|
+
font-size: var(--mono-size);
|
|
124
|
+
line-height: var(--mono-lh);
|
|
125
|
+
font-weight: var(--w-medium);
|
|
126
|
+
}
|
|
127
|
+
.fd-tabular {
|
|
128
|
+
font-variant-numeric: tabular-nums lining-nums;
|
|
129
|
+
}
|
|
130
|
+
.fd-muted {
|
|
131
|
+
color: var(--text-muted);
|
|
132
|
+
}
|
|
133
|
+
.fd-secondary {
|
|
134
|
+
color: var(--text-2);
|
|
135
|
+
}
|
|
136
|
+
.fd-sr {
|
|
137
|
+
position: absolute;
|
|
138
|
+
width: 1px;
|
|
139
|
+
height: 1px;
|
|
140
|
+
padding: 0;
|
|
141
|
+
margin: -1px;
|
|
142
|
+
overflow: hidden;
|
|
143
|
+
clip-path: inset(50%);
|
|
144
|
+
white-space: nowrap;
|
|
145
|
+
border: 0;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/* --- range slider ----------------------------------------------------- */
|
|
149
|
+
.fd-range {
|
|
150
|
+
-webkit-appearance: none;
|
|
151
|
+
appearance: none;
|
|
152
|
+
width: 100%;
|
|
153
|
+
height: var(--s-4);
|
|
154
|
+
border-radius: var(--r-full);
|
|
155
|
+
background: var(--border);
|
|
156
|
+
outline: none;
|
|
157
|
+
cursor: pointer;
|
|
158
|
+
}
|
|
159
|
+
.fd-range::-webkit-slider-runnable-track {
|
|
160
|
+
height: var(--s-4);
|
|
161
|
+
border-radius: var(--r-full);
|
|
162
|
+
background: transparent;
|
|
163
|
+
}
|
|
164
|
+
.fd-range::-webkit-slider-thumb {
|
|
165
|
+
-webkit-appearance: none;
|
|
166
|
+
appearance: none;
|
|
167
|
+
width: var(--s-16);
|
|
168
|
+
height: var(--s-16);
|
|
169
|
+
border-radius: var(--r-full);
|
|
170
|
+
background: var(--brand);
|
|
171
|
+
border: 2px solid var(--surface);
|
|
172
|
+
box-shadow: var(--e-1);
|
|
173
|
+
cursor: pointer;
|
|
174
|
+
margin-top: calc((var(--s-4) - var(--s-16)) / 2);
|
|
175
|
+
}
|
|
176
|
+
.fd-range::-moz-range-track {
|
|
177
|
+
height: var(--s-4);
|
|
178
|
+
border-radius: var(--r-full);
|
|
179
|
+
background: transparent;
|
|
180
|
+
}
|
|
181
|
+
.fd-range::-moz-range-thumb {
|
|
182
|
+
width: var(--s-16);
|
|
183
|
+
height: var(--s-16);
|
|
184
|
+
border-radius: var(--r-full);
|
|
185
|
+
background: var(--brand);
|
|
186
|
+
border: 2px solid var(--surface);
|
|
187
|
+
box-shadow: var(--e-1);
|
|
188
|
+
cursor: pointer;
|
|
189
|
+
}
|
|
190
|
+
.fd-range:disabled {
|
|
191
|
+
opacity: 0.55;
|
|
192
|
+
cursor: not-allowed;
|
|
193
|
+
}
|
|
194
|
+
.fd-range:disabled::-webkit-slider-thumb,
|
|
195
|
+
.fd-range:disabled::-moz-range-thumb {
|
|
196
|
+
cursor: not-allowed;
|
|
197
|
+
}
|
|
198
|
+
.fd-range:focus-visible::-webkit-slider-thumb {
|
|
199
|
+
box-shadow: var(--focus-ring);
|
|
200
|
+
}
|
|
201
|
+
.fd-range:focus-visible::-moz-range-thumb {
|
|
202
|
+
box-shadow: var(--focus-ring);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
/* Two overlapping <input type="range"> for RangeSlider: each input stays
|
|
206
|
+
transparent so the custom track div underneath does the drawing, and only
|
|
207
|
+
the thumb itself is clickable so both handles remain independently
|
|
208
|
+
reachable near the edges. */
|
|
209
|
+
.fd-range-multi {
|
|
210
|
+
position: absolute;
|
|
211
|
+
top: 0;
|
|
212
|
+
left: 0;
|
|
213
|
+
width: 100%;
|
|
214
|
+
height: var(--s-16);
|
|
215
|
+
margin: 0;
|
|
216
|
+
background: transparent;
|
|
217
|
+
pointer-events: none;
|
|
218
|
+
}
|
|
219
|
+
.fd-range-multi::-webkit-slider-runnable-track {
|
|
220
|
+
background: transparent;
|
|
221
|
+
}
|
|
222
|
+
.fd-range-multi::-moz-range-track {
|
|
223
|
+
background: transparent;
|
|
224
|
+
}
|
|
225
|
+
.fd-range-multi::-webkit-slider-thumb {
|
|
226
|
+
pointer-events: auto;
|
|
227
|
+
}
|
|
228
|
+
.fd-range-multi::-moz-range-thumb {
|
|
229
|
+
pointer-events: auto;
|
|
230
|
+
}
|
|
@@ -0,0 +1,290 @@
|
|
|
1
|
+
/* Vendored from the flytedesk Design System (Claude Design project
|
|
2
|
+
"flytedesk Design System"), tokens/colors.css + space.css + typography.css +
|
|
3
|
+
elevation.css + motion.css + layout.css + fonts.css, combined for this app.
|
|
4
|
+
Source of truth stays the Design System project — re-sync by hand if it
|
|
5
|
+
changes upstream. */
|
|
6
|
+
|
|
7
|
+
/* --- fonts ---------------------------------------------------------------
|
|
8
|
+
NOTE: webfont binaries (Figtree, JetBrains Mono) were not vendored in this
|
|
9
|
+
pass — --font-sans falls back to system UI fonts until assets/fonts/*.woff2
|
|
10
|
+
are copied in from the Design System project. Visual tokens (color, space,
|
|
11
|
+
type scale) are otherwise exact. */
|
|
12
|
+
:root {
|
|
13
|
+
--font-sans: "Figtree", "Aeonik Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
14
|
+
--font-display: var(--font-sans);
|
|
15
|
+
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* --- color ----------------------------------------------------------------
|
|
19
|
+
Brand core sampled from the real flytedesk wordmark: navy #052E4A,
|
|
20
|
+
blue #2272BA, sky #80BFE9. */
|
|
21
|
+
:root {
|
|
22
|
+
--navy: #052e4a;
|
|
23
|
+
--blue-25: #f8fbfe;
|
|
24
|
+
--blue-50: #f1f7fc;
|
|
25
|
+
--blue-100: #deebf7;
|
|
26
|
+
--blue-200: #c3ddf1;
|
|
27
|
+
--blue-300: #a0c9e8;
|
|
28
|
+
--blue-400: #80bfe9;
|
|
29
|
+
--blue-500: #4f97d6;
|
|
30
|
+
--blue-600: #2272ba;
|
|
31
|
+
--blue-700: #1a5b96;
|
|
32
|
+
--blue-800: #144674;
|
|
33
|
+
--blue-900: #0d3454;
|
|
34
|
+
--blue-950: #052e4a;
|
|
35
|
+
|
|
36
|
+
--n-0: #ffffff;
|
|
37
|
+
--n-25: #fbfcfd;
|
|
38
|
+
--n-50: #f7f8fa;
|
|
39
|
+
--n-100: #f1f3f6;
|
|
40
|
+
--n-200: #e5e8ed;
|
|
41
|
+
--n-300: #d2d7df;
|
|
42
|
+
--n-400: #a8b0bd;
|
|
43
|
+
--n-500: #7c8698;
|
|
44
|
+
--n-600: #5a6474;
|
|
45
|
+
--n-700: #414958;
|
|
46
|
+
--n-800: #2a303b;
|
|
47
|
+
--n-900: #171b22;
|
|
48
|
+
--n-950: #0b0d11;
|
|
49
|
+
--ink: #0a0a0b;
|
|
50
|
+
|
|
51
|
+
/* teal — reserved for the Campus Saturation Index. Never interaction. */
|
|
52
|
+
--csi-1-fill: #eef0f3;
|
|
53
|
+
--csi-1-edge: #c7cdd6;
|
|
54
|
+
--csi-1-text: #4a5261;
|
|
55
|
+
--csi-2-fill: #d3ede4;
|
|
56
|
+
--csi-2-edge: #a7d9c8;
|
|
57
|
+
--csi-2-text: #14584a;
|
|
58
|
+
--csi-3-fill: #86d2bc;
|
|
59
|
+
--csi-3-edge: #5cbfa4;
|
|
60
|
+
--csi-3-text: #0b3f35;
|
|
61
|
+
--csi-4-fill: #0e7c68;
|
|
62
|
+
--csi-4-edge: #0b6455;
|
|
63
|
+
--csi-4-text: #ffffff;
|
|
64
|
+
--csi-alert: #e0a32b;
|
|
65
|
+
--csi-ramp-1: #f1f4f5;
|
|
66
|
+
--csi-ramp-2: #d9ede6;
|
|
67
|
+
--csi-ramp-3: #a9decb;
|
|
68
|
+
--csi-ramp-4: #6cc7ae;
|
|
69
|
+
--csi-ramp-5: #2e9e85;
|
|
70
|
+
--csi-ramp-6: #0b5f50;
|
|
71
|
+
|
|
72
|
+
--ok-fill: #dff3e8;
|
|
73
|
+
--ok-border: #a8ddc2;
|
|
74
|
+
--ok-text: #0e5233;
|
|
75
|
+
--ok-solid: #34a26b;
|
|
76
|
+
--warn-fill: #fdf1da;
|
|
77
|
+
--warn-border: #f0d49a;
|
|
78
|
+
--warn-text: #6b4a05;
|
|
79
|
+
--warn-solid: #c8890b;
|
|
80
|
+
--danger-fill: #fce7e5;
|
|
81
|
+
--danger-border: #f2bdb8;
|
|
82
|
+
--danger-text: #7a241d;
|
|
83
|
+
--danger-solid: #d0473d;
|
|
84
|
+
--info-fill: #deebf7;
|
|
85
|
+
--info-border: #c3ddf1;
|
|
86
|
+
--info-text: #144674;
|
|
87
|
+
--info-solid: #2272ba;
|
|
88
|
+
|
|
89
|
+
--chart-1: #2272ba;
|
|
90
|
+
--chart-2: #23a183;
|
|
91
|
+
--chart-3: #7c8698;
|
|
92
|
+
--chart-4: #c8890b;
|
|
93
|
+
--chart-5: #6e5bc9;
|
|
94
|
+
--chart-6: #c86b8a;
|
|
95
|
+
--chart-7: #4f97d6;
|
|
96
|
+
--chart-8: #a8b0bd;
|
|
97
|
+
|
|
98
|
+
/* channel-identity hues — one per media channel taxonomy (ChannelMeta.tsx),
|
|
99
|
+
used for chip fills, stacked-bar segments, etc. Reserved for channel
|
|
100
|
+
identity only — never reuse for interaction state or the CSI ramp above. */
|
|
101
|
+
--ch-ooh: #d9702e;
|
|
102
|
+
--ch-dooh: #c2478a;
|
|
103
|
+
--ch-transit: #1f8a8a;
|
|
104
|
+
--ch-mobile: #c9971f;
|
|
105
|
+
--ch-print: #8a6d3b;
|
|
106
|
+
--ch-posters: #7c5cd1;
|
|
107
|
+
--ch-flyers: #7a8a1f;
|
|
108
|
+
--ch-email: #3b82c4;
|
|
109
|
+
--ch-sms: #a13d9e;
|
|
110
|
+
--ch-web: #2f9e78;
|
|
111
|
+
--ch-other: #7c8698;
|
|
112
|
+
|
|
113
|
+
--page: var(--n-25);
|
|
114
|
+
--surface: var(--n-0);
|
|
115
|
+
--surface-2: var(--n-50);
|
|
116
|
+
--surface-3: var(--n-100);
|
|
117
|
+
--surface-brand: var(--blue-50);
|
|
118
|
+
--surface-brand-strong: var(--blue-100);
|
|
119
|
+
--text-on-surface-brand: var(--blue-800);
|
|
120
|
+
--selection-bg: var(--blue-200);
|
|
121
|
+
--selection-text: var(--navy);
|
|
122
|
+
--border: var(--n-200);
|
|
123
|
+
--border-strong: var(--n-300);
|
|
124
|
+
--border-brand: var(--blue-200);
|
|
125
|
+
--text: var(--n-900);
|
|
126
|
+
--text-2: var(--n-600);
|
|
127
|
+
--text-muted: var(--n-500);
|
|
128
|
+
--text-disabled: var(--n-400);
|
|
129
|
+
--text-on-brand: #ffffff;
|
|
130
|
+
--display-ink: var(--ink);
|
|
131
|
+
--brand: var(--blue-600);
|
|
132
|
+
--brand-hover: var(--blue-700);
|
|
133
|
+
--brand-active: var(--blue-800);
|
|
134
|
+
--brand-soft: var(--blue-100);
|
|
135
|
+
--link: var(--blue-600);
|
|
136
|
+
--link-hover: var(--blue-800);
|
|
137
|
+
--scrim: rgba(11, 13, 17, 0.45);
|
|
138
|
+
--skeleton-base: var(--n-100);
|
|
139
|
+
--skeleton-sheen: rgba(255, 255, 255, 0.72);
|
|
140
|
+
--skeleton-dur: 1400ms;
|
|
141
|
+
--focus-ring: 0 0 0 2px var(--page), 0 0 0 4px var(--blue-500);
|
|
142
|
+
}
|
|
143
|
+
[data-theme="dark"] {
|
|
144
|
+
color-scheme: dark;
|
|
145
|
+
--page: #0b0d11;
|
|
146
|
+
--surface: #14171d;
|
|
147
|
+
--surface-2: #1b1f27;
|
|
148
|
+
--surface-3: #232832;
|
|
149
|
+
--surface-brand: #12283d;
|
|
150
|
+
--surface-brand-strong: #173d5c;
|
|
151
|
+
--text-on-surface-brand: #9cc7ec;
|
|
152
|
+
--selection-bg: #1e3f5e;
|
|
153
|
+
--selection-text: #f2f4f7;
|
|
154
|
+
--border: #2b313c;
|
|
155
|
+
--border-strong: #3a414e;
|
|
156
|
+
--border-brand: #1e3f5e;
|
|
157
|
+
--text: #f2f4f7;
|
|
158
|
+
--text-2: #a8b0bd;
|
|
159
|
+
--text-muted: #7c8698;
|
|
160
|
+
--text-disabled: #5a6474;
|
|
161
|
+
--display-ink: #ffffff;
|
|
162
|
+
--brand: #6fa8e8;
|
|
163
|
+
--brand-hover: #8fbef0;
|
|
164
|
+
--brand-active: #a0c9e8;
|
|
165
|
+
--brand-soft: #12283d;
|
|
166
|
+
--link: #80bfe9;
|
|
167
|
+
--link-hover: #a0c9e8;
|
|
168
|
+
--skeleton-base: #1f242d;
|
|
169
|
+
--skeleton-sheen: rgba(255, 255, 255, 0.06);
|
|
170
|
+
--ok-fill: #0e2a1d;
|
|
171
|
+
--ok-border: #1e5638;
|
|
172
|
+
--ok-text: #7fd9a8;
|
|
173
|
+
--warn-fill: #2c2210;
|
|
174
|
+
--warn-border: #5c4614;
|
|
175
|
+
--warn-text: #e9c377;
|
|
176
|
+
--danger-fill: #2e1512;
|
|
177
|
+
--danger-border: #5e2a24;
|
|
178
|
+
--danger-text: #f0a79f;
|
|
179
|
+
--info-fill: #12283d;
|
|
180
|
+
--info-border: #1e3f5e;
|
|
181
|
+
--info-text: #9cc7ec;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* --- space & radius --------------------------------------------------- */
|
|
185
|
+
:root {
|
|
186
|
+
--s-0: 0px;
|
|
187
|
+
--s-2: 2px;
|
|
188
|
+
--s-4: 4px;
|
|
189
|
+
--s-6: 6px;
|
|
190
|
+
--s-8: 8px;
|
|
191
|
+
--s-12: 12px;
|
|
192
|
+
--s-16: 16px;
|
|
193
|
+
--s-20: 20px;
|
|
194
|
+
--s-24: 24px;
|
|
195
|
+
--s-32: 32px;
|
|
196
|
+
--s-40: 40px;
|
|
197
|
+
--s-48: 48px;
|
|
198
|
+
--s-64: 64px;
|
|
199
|
+
--s-80: 80px;
|
|
200
|
+
--s-96: 96px;
|
|
201
|
+
--s-128: 128px;
|
|
202
|
+
--s-xs: var(--s-4);
|
|
203
|
+
--s-sm: var(--s-8);
|
|
204
|
+
--s-md: var(--s-12);
|
|
205
|
+
--s-lg: var(--s-16);
|
|
206
|
+
--s-xl: var(--s-24);
|
|
207
|
+
--s-2xl: var(--s-32);
|
|
208
|
+
--s-3xl: var(--s-48);
|
|
209
|
+
--s-4xl: var(--s-64);
|
|
210
|
+
|
|
211
|
+
--r-xs: 4px;
|
|
212
|
+
--r-sm: 6px;
|
|
213
|
+
--r-md: 8px;
|
|
214
|
+
--r-lg: 12px;
|
|
215
|
+
--r-xl: 16px;
|
|
216
|
+
--r-2xl: 24px;
|
|
217
|
+
--r-3xl: 32px;
|
|
218
|
+
--r-full: 999px;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/* --- type scale ---------------------------------------------------------- */
|
|
222
|
+
:root {
|
|
223
|
+
--w-light: 300;
|
|
224
|
+
--w-regular: 400;
|
|
225
|
+
--w-medium: 500;
|
|
226
|
+
--w-semibold: 600;
|
|
227
|
+
--w-bold: 700;
|
|
228
|
+
--w-black: 800;
|
|
229
|
+
|
|
230
|
+
--h1-size: 30px;
|
|
231
|
+
--h1-lh: 1.2;
|
|
232
|
+
--h1-track: -0.02em;
|
|
233
|
+
--h2-size: 24px;
|
|
234
|
+
--h2-lh: 1.28;
|
|
235
|
+
--h2-track: -0.015em;
|
|
236
|
+
--h3-size: 19px;
|
|
237
|
+
--h3-lh: 1.35;
|
|
238
|
+
--h3-track: -0.01em;
|
|
239
|
+
--h4-size: 16px;
|
|
240
|
+
--h4-lh: 1.4;
|
|
241
|
+
--h4-track: -0.005em;
|
|
242
|
+
--body-lg-size: 17px;
|
|
243
|
+
--body-lg-lh: 1.6;
|
|
244
|
+
--body-size: 15px;
|
|
245
|
+
--body-lh: 1.55;
|
|
246
|
+
--body-sm-size: 13.5px;
|
|
247
|
+
--body-sm-lh: 1.5;
|
|
248
|
+
--label-lg-size: 13px;
|
|
249
|
+
--label-lg-lh: 1.3;
|
|
250
|
+
--label-lg-track: 0.01em;
|
|
251
|
+
--label-size: 12px;
|
|
252
|
+
--label-lh: 1.25;
|
|
253
|
+
--label-track: 0.02em;
|
|
254
|
+
--mono-size: 12.5px;
|
|
255
|
+
--mono-lh: 1.5;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/* --- elevation & motion --------------------------------------------------- */
|
|
259
|
+
:root {
|
|
260
|
+
--e-0: none;
|
|
261
|
+
--e-1: 0 1px 2px rgba(11, 17, 28, 0.05), 0 1px 3px rgba(11, 17, 28, 0.04);
|
|
262
|
+
--e-2: 0 2px 4px rgba(11, 17, 28, 0.05), 0 6px 16px rgba(11, 17, 28, 0.06);
|
|
263
|
+
--e-3: 0 8px 20px rgba(11, 17, 28, 0.08), 0 20px 48px rgba(11, 17, 28, 0.1);
|
|
264
|
+
--e-4: 0 16px 32px rgba(11, 17, 28, 0.1), 0 40px 80px rgba(11, 17, 28, 0.14);
|
|
265
|
+
|
|
266
|
+
--dur-instant: 80ms;
|
|
267
|
+
--dur-fast: 120ms;
|
|
268
|
+
--dur-base: 180ms;
|
|
269
|
+
--dur-slow: 260ms;
|
|
270
|
+
--ease: cubic-bezier(0.2, 0, 0, 1);
|
|
271
|
+
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
272
|
+
}
|
|
273
|
+
[data-theme="dark"] {
|
|
274
|
+
--e-1: 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
275
|
+
--e-2: 0 4px 12px rgba(0, 0, 0, 0.5);
|
|
276
|
+
--e-3: 0 16px 40px rgba(0, 0, 0, 0.6);
|
|
277
|
+
--e-4: 0 24px 64px rgba(0, 0, 0, 0.7);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/* --- layout --------------------------------------------------------------- */
|
|
281
|
+
:root {
|
|
282
|
+
--sidebar-w: 264px;
|
|
283
|
+
--sidebar-w-collapsed: 72px;
|
|
284
|
+
--topbar-h: 60px;
|
|
285
|
+
--content-max: 1440px;
|
|
286
|
+
--gutter: 24px;
|
|
287
|
+
--control-h-sm: 34px;
|
|
288
|
+
--control-h-md: 44px;
|
|
289
|
+
--control-h-lg: 52px;
|
|
290
|
+
}
|