@flytedan/flytebot-design-system 0.1.1 → 0.1.3

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 (10) hide show
  1. package/dist/index.cjs +32 -31
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +32 -31
  4. package/dist/index.js.map +1 -1
  5. package/package.json +3 -2
  6. package/styles/components.css +42 -0
  7. package/styles/fonts/figtree-latin-ext.woff2 +0 -0
  8. package/styles/fonts/figtree-latin.woff2 +0 -0
  9. package/styles/foundations.css +44 -228
  10. package/styles/tokens.css +296 -264
package/styles/tokens.css CHANGED
@@ -1,290 +1,322 @@
1
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.
2
+ "flytedesk Design System"), tokens/fonts.css + colors.css + typography.css +
3
+ space.css + elevation.css + motion.css + layout.css, combined for this app
4
+ in the same order as the real system's own styles.css @import list.
4
5
  Source of truth stays the Design System project — re-sync by hand if it
5
- changes upstream. */
6
+ changes upstream. Font files live in ./fonts/ (relative to this file). */
6
7
 
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;
8
+ /* ============ tokens/fonts.css ============ */
9
+ /* flytedesk webfonts.
10
+ SUBSTITUTION NOTE: flytedesk.com sets its type in a geometric grotesque
11
+ (Aeonik Pro is the closest commercial match). No licensed Aeonik files were
12
+ provided, so Figtree (Google Fonts, SIL OFL) ships here as the open stand-in
13
+ and is listed first in --font-sans. Drop Aeonik woff2 files into
14
+ assets/fonts/ and add the @font-face block to promote it. */
15
+ @font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url("fonts/figtree-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
16
+ @font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url("fonts/figtree-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
17
+ :root{
18
+ --font-sans:"Figtree","Aeonik Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
19
+ --font-display:var(--font-sans);
20
+ --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
16
21
  }
17
22
 
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;
23
+ /* ============ tokens/colors.css ============ */
24
+ /* Brand core is sampled from the real flytedesk wordmark (assets/logo-wordmark.svg):
25
+ navy #052E4A, blue #2272BA, sky #80BFE9. The ramp is built around those three
26
+ exact values; the rest is interpolated. */
27
+ :root{
28
+ --navy:#052E4A;
29
+ --blue-25:#F8FBFE;
30
+ --blue-50:#F1F7FC;
31
+ --blue-100:#DEEBF7;
32
+ --blue-200:#C3DDF1;
33
+ --blue-300:#A0C9E8;
34
+ --blue-400:#80BFE9;
35
+ --blue-500:#4F97D6;
36
+ --blue-600:#2272BA;
37
+ --blue-700:#1A5B96;
38
+ --blue-800:#144674;
39
+ --blue-900:#0D3454;
40
+ --blue-950:#052E4A;
35
41
 
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;
42
+ --n-0:#FFFFFF;
43
+ --n-25:#FBFCFD;
44
+ --n-50:#F7F8FA;
45
+ --n-100:#F1F3F6;
46
+ --n-200:#E5E8ED;
47
+ --n-300:#D2D7DF;
48
+ --n-400:#A8B0BD;
49
+ --n-500:#7C8698;
50
+ --n-600:#5A6474;
51
+ --n-700:#414958;
52
+ --n-800:#2A303B;
53
+ --n-900:#171B22;
54
+ --n-950:#0B0D11;
55
+ --ink:#0A0A0B;
50
56
 
51
57
  /* 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;
58
+ --csi-1-fill:#EEF0F3;--csi-1-edge:#C7CDD6;--csi-1-text:#4A5261;--csi-1-mark:#C6CDD5;
59
+ --csi-2-fill:#D3EDE4;--csi-2-edge:#A7D9C8;--csi-2-text:#14584A;--csi-2-mark:#5EBFA4;
60
+ --csi-3-fill:#86D2BC;--csi-3-edge:#5CBFA4;--csi-3-text:#0B3F35;--csi-3-mark:#1F9880;
61
+ --csi-4-fill:#0E7C68;--csi-4-edge:#0B6455;--csi-4-text:#FFFFFF;--csi-4-mark:#0A5B4D;
62
+ --csi-alert:#E0A32B;
63
+ --csi-ramp-1:#F1F4F5;--csi-ramp-2:#D9EDE6;--csi-ramp-3:#A9DECB;
64
+ --csi-ramp-4:#6CC7AE;--csi-ramp-5:#2E9E85;--csi-ramp-6:#0B5F50;
71
65
 
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;
66
+ --ok-fill:#DFF3E8;--ok-border:#A8DDC2;--ok-text:#0E5233;--ok-solid:#34A26B;--ok-emph:#57C68C;
67
+ --warn-fill:#FDF1DA;--warn-border:#F0D49A;--warn-text:#6B4A05;--warn-solid:#C8890B;
68
+ --danger-fill:#FCE7E5;--danger-border:#F2BDB8;--danger-text:#7A241D;--danger-solid:#D0473D;
69
+ --info-fill:#DEEBF7;--info-border:#C3DDF1;--info-text:#144674;--info-solid:#2272BA;
88
70
 
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;
71
+ --chart-1:#2272BA;--chart-2:#23A183;--chart-3:#7C8698;--chart-4:#C8890B;
72
+ --chart-5:#6E5BC9;--chart-6:#C86B8A;--chart-7:#4F97D6;--chart-8:#A8B0BD;
97
73
 
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;
74
+ /* channel identity — one hue per medium, hue family per channel group.
75
+ Blues = large format, violets = moving, ambers = paper, roses = direct,
76
+ slate = digital. Never reuse a channel hue for anything else; the colour IS
77
+ the label. Teal stays reserved for the saturation index. */
78
+ --ch-ooh:#2272BA;--ch-dooh:#4F97D6;
79
+ --ch-transit:#6E5BC9;--ch-mobile:#9B8DE0;
80
+ --ch-print:#97650A;--ch-posters:#C8890B;--ch-flyers:#E0A93F;
81
+ --ch-email:#C86B8A;--ch-sms:#E0A0B6;
82
+ --ch-web:#7C8698;--ch-other:#A8B0BD;
83
+
84
+ /* AA-safe default primary: white label clears 4.5:1 at the lightest stop */
85
+ --grad-primary:linear-gradient(100deg,#1A5B96 0%,#3671B8 100%);/* @kind color */
86
+ --grad-primary-hover:linear-gradient(100deg,#144674 0%,#2C63A4 100%);/* @kind color */
87
+ /* As observed on flytedesk.com CTAs. Large text only (>=19px/700). */
88
+ --grad-brand-soft:linear-gradient(100deg,#2272BA 0%,#6FA8E8 100%);/* @kind color */
89
+ --grad-brand-soft-hover:linear-gradient(100deg,#1A5B96 0%,#5A98DE 100%);/* @kind color */
90
+ --grad-ok:linear-gradient(100deg,#4CBF84 0%,#63CE95 100%);/* @kind color */
91
+ --wash-hero:radial-gradient(120% 80% at 50% 110%,#D5E7F7 0%,#EDF4FC 45%,#FFFFFF 78%);/* @kind color */
92
+ --wash-panel:linear-gradient(180deg,#F4F9FE 0%,#FFFFFF 100%);/* @kind color */
93
+ --wash-edge:linear-gradient(90deg,#EDF4FC 0%,#FFFFFF 60%);/* @kind color */
94
+
95
+ /* semantic aliases — always design against these, not the ramps */
96
+ --page:var(--n-25);
97
+ --surface:var(--n-0);
98
+ --surface-2:var(--n-50);
99
+ --surface-3:var(--n-100);
100
+ --surface-brand:var(--blue-50);
101
+ --surface-brand-strong:var(--blue-100);
102
+ --text-on-surface-brand:var(--blue-800);
103
+ --selection-bg:var(--blue-200);
104
+ --selection-text:var(--navy);
105
+ --border:var(--n-200);
106
+ --border-strong:var(--n-300);
107
+ --border-brand:var(--blue-200);
108
+ --text:var(--n-900);
109
+ --text-2:var(--n-600);
110
+ --text-muted:var(--n-500);
111
+ --text-disabled:var(--n-400);
112
+ --text-on-brand:#FFFFFF;
113
+ --display-ink:var(--ink);
114
+ --brand:var(--blue-600);
115
+ --brand-hover:var(--blue-700);
116
+ --brand-active:var(--blue-800);
117
+ --brand-soft:var(--blue-100);
118
+ --link:var(--blue-600);
119
+ --link-hover:var(--blue-800);
120
+ --scrim:rgba(11,13,17,.45);
121
+ --skeleton-base:var(--n-100);
122
+ --skeleton-sheen:rgba(255,255,255,.72);
123
+ --focus-ring:0 0 0 2px var(--page),0 0 0 4px var(--blue-500);
124
+
125
+ /* chat kit — surface aliases so a theme lives in one place and consumers
126
+ never pass styling props. Re-declared in the dark scope below: these are
127
+ aliases, and if they only exist here they resolve to light values wherever
128
+ the theme is nested rather than set on <html>. */
129
+ /* the two that carry most of the readability: the gap inside one sender's run
130
+ and the gap between runs. Their RATIO is what makes a transcript scannable. */
131
+ --chat-gap-run:6px;
132
+ --chat-gap-turn:26px;
133
+ --chat-pad-x:18px;
134
+ --chat-pad-y:16px;
135
+ --chat-radius:var(--r-lg);
136
+ --chat-surface:var(--surface);
137
+ --chat-surface-2:var(--surface-2);
138
+ --chat-border:var(--border);
139
+ --chat-text:var(--text);
140
+ --chat-text-2:var(--text-2);
141
+ --chat-muted:var(--text-muted);
142
+ --chat-accent:var(--brand);
143
+ --chat-user-fill:var(--surface-brand);
144
+ --chat-user-border:var(--border-brand);
145
+ --chat-user-text:var(--text);
146
+ --chat-code-bg:var(--n-50);
147
+ --chat-code-border:var(--border);
148
+ --chat-max-read:74ch;
149
+ --code-kw:#6E5BC9;--code-str:#97650A;--code-num:#C86B8A;--code-com:#8A93A2;
150
+ --code-fn:#1A5B96;--code-type:#0D3454;--code-prop:#2272BA;--code-lit:#7A241D;--code-pun:#5A6474;
151
+ --diff-add-bg:#EAF6EF;--diff-add-text:#0E5233;--diff-del-bg:#FCECEA;--diff-del-text:#7A241D;
112
152
 
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
153
  }
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;
154
+ [data-theme="dark"]{
155
+ color-scheme:dark;
156
+ --page:#0B0D11;
157
+ --surface:#14171D;
158
+ --surface-2:#1B1F27;
159
+ --surface-3:#232832;
160
+ --surface-brand:#12283D;
161
+ --surface-brand-strong:#173D5C;
162
+ --text-on-surface-brand:#9CC7EC;
163
+ --selection-bg:#1E3F5E;
164
+ --selection-text:#F2F4F7;
165
+ --border:#2B313C;
166
+ --border-strong:#3A414E;
167
+ --border-brand:#1E3F5E;
168
+ --text:#F2F4F7;
169
+ --text-2:#A8B0BD;
170
+ --text-muted:#7C8698;
171
+ --text-disabled:#5A6474;
172
+ --display-ink:#FFFFFF;
173
+ --brand:#6FA8E8;
174
+ --brand-hover:#8FBEF0;
175
+ --brand-active:#A0C9E8;
176
+ --brand-soft:#12283D;
177
+ --link:#80BFE9;
178
+ --link-hover:#A0C9E8;
179
+ --skeleton-base:#1F242D;
180
+ --skeleton-sheen:rgba(255,255,255,.06);
181
+ --grad-primary:linear-gradient(100deg,#1A5B96 0%,#3671B8 100%);/* @kind color */
182
+ --grad-primary-hover:linear-gradient(100deg,#22699F 0%,#4180C7 100%);/* @kind color */
183
+ --wash-hero:none;/* @kind color */--wash-panel:none;/* @kind color */--wash-edge:none;/* @kind color */
184
+ --csi-1-fill:#23272E;--csi-1-edge:#333A44;--csi-1-text:#A3ACB9;--csi-1-mark:#5A6472;
185
+ --csi-2-fill:#0E3A32;--csi-2-edge:#175448;--csi-2-text:#7FD2BC;--csi-2-mark:#2C9077;
186
+ --csi-3-fill:#12695A;--csi-3-edge:#1A8571;--csi-3-text:#CBF0E5;--csi-3-mark:#38B79B;
187
+ --csi-4-fill:#1FBF9F;--csi-4-edge:#34D6B5;--csi-4-text:#052620;--csi-4-mark:#63DDC2;
188
+ --ok-fill:#0E2A1D;--ok-border:#1E5638;--ok-text:#7FD9A8;--ok-emph:#1E7A4C;
189
+ --warn-fill:#2C2210;--warn-border:#5C4614;--warn-text:#E9C377;
190
+ --danger-fill:#2E1512;--danger-border:#5E2A24;--danger-text:#F0A79F;
191
+ --info-fill:#12283D;--info-border:#1E3F5E;--info-text:#9CC7EC;
192
+
193
+ /* chat kit — see the :root block above */
194
+ --chat-code-bg:#12151B;
195
+ --code-kw:#B3A6F0;--code-str:#E9C377;--code-num:#EFA8BE;--code-com:#6C7686;
196
+ --code-fn:#8FBEF0;--code-type:#A0C9E8;--code-prop:#80BFE9;--code-lit:#F0A79F;--code-pun:#8892A0;
197
+ --diff-add-bg:#0E2A1D;--diff-add-text:#7FD9A8;--diff-del-bg:#2E1512;--diff-del-text:#F0A79F;
198
+
182
199
  }
183
200
 
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);
201
+ /* ============ tokens/typography.css ============ */
202
+ :root{
203
+ --w-light:300;/* @kind font */
204
+ --w-regular:400;/* @kind font */
205
+ --w-medium:500;/* @kind font */
206
+ --w-semibold:600;/* @kind font */
207
+ --w-bold:700;/* @kind font */
208
+ --w-black:800;/* @kind font */
209
+
210
+ --display-1-size:72px;/* @kind font */
211
+ --display-1-lh:1.03;/* @kind font */
212
+ --display-1-track:-.03em;/* @kind font */
213
+ --display-2-size:56px;/* @kind font */
214
+ --display-2-lh:1.06;/* @kind font */
215
+ --display-2-track:-.03em;/* @kind font */
216
+ --display-3-size:40px;/* @kind font */
217
+ --display-3-lh:1.12;/* @kind font */
218
+ --display-3-track:-.02em;/* @kind font */
219
+ --h1-size:30px;/* @kind font */
220
+ --h1-lh:1.2;/* @kind font */
221
+ --h1-track:-.02em;/* @kind font */
222
+ --h2-size:24px;/* @kind font */
223
+ --h2-lh:1.28;/* @kind font */
224
+ --h2-track:-.015em;/* @kind font */
225
+ --h3-size:19px;/* @kind font */
226
+ --h3-lh:1.35;/* @kind font */
227
+ --h3-track:-.01em;/* @kind font */
228
+ --h4-size:16px;/* @kind font */
229
+ --h4-lh:1.4;/* @kind font */
230
+ --h4-track:-.005em;/* @kind font */
231
+ --body-lg-size:17px;/* @kind font */
232
+ --body-lg-lh:1.6;/* @kind font */
233
+ --body-size:15px;/* @kind font */
234
+ --body-lh:1.55;/* @kind font */
235
+ --body-sm-size:13.5px;/* @kind font */
236
+ --body-sm-lh:1.5;/* @kind font */
237
+ --label-lg-size:13px;/* @kind font */
238
+ --label-lg-lh:1.3;/* @kind font */
239
+ --label-lg-track:.01em;/* @kind font */
240
+ --label-size:12px;/* @kind font */
241
+ --label-lh:1.25;/* @kind font */
242
+ --label-track:.02em;/* @kind font */
243
+ --overline-size:11px;/* @kind font */
244
+ --overline-lh:1.2;/* @kind font */
245
+ --overline-track:.09em;/* @kind font */
246
+ --num-hero-size:44px;/* @kind font */
247
+ --num-hero-lh:1;/* @kind font */
248
+ --num-hero-track:-.02em;/* @kind font */
249
+ --num-size:15px;/* @kind font */
250
+ --num-lh:1.4;/* @kind font */
251
+ --mono-size:12.5px;/* @kind font */
252
+ --mono-lh:1.5;/* @kind font */
210
253
 
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;
254
+ --measure-prose:68ch;/* @kind spacing */
255
+ --measure-lede:52ch;/* @kind spacing */
219
256
  }
220
257
 
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;
258
+ /* ============ tokens/space.css ============ */
259
+ :root{
260
+ --s-0:0px;--s-2:2px;--s-4:4px;--s-6:6px;--s-8:8px;--s-12:12px;--s-16:16px;
261
+ --s-20:20px;--s-24:24px;--s-32:32px;--s-40:40px;--s-48:48px;--s-64:64px;
262
+ --s-80:80px;--s-96:96px;--s-128:128px;
263
+ --s-xs:var(--s-4);--s-sm:var(--s-8);--s-md:var(--s-12);--s-lg:var(--s-16);
264
+ --s-xl:var(--s-24);--s-2xl:var(--s-32);--s-3xl:var(--s-48);--s-4xl:var(--s-64);
229
265
 
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;
266
+ --r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-2xl:24px;--r-3xl:32px;--r-full:999px;
256
267
  }
257
268
 
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);
269
+ /* ============ tokens/elevation.css ============ */
270
+ :root{
271
+ --e-0:none;/* @kind shadow */
272
+ --e-1:0 1px 2px rgba(11,17,28,.05),0 1px 3px rgba(11,17,28,.04);
273
+ --e-2:0 2px 4px rgba(11,17,28,.05),0 6px 16px rgba(11,17,28,.06);
274
+ --e-3:0 8px 20px rgba(11,17,28,.08),0 20px 48px rgba(11,17,28,.10);
275
+ --e-4:0 16px 32px rgba(11,17,28,.10),0 40px 80px rgba(11,17,28,.14);
276
+ --e-brand:0 2px 6px rgba(26,91,150,.28);
277
+ --e-inset:inset 0 1px 0 rgba(255,255,255,.6);
278
+ }
279
+ [data-theme="dark"]{
280
+ --e-1:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
281
+ --e-2:0 4px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
282
+ --e-3:0 16px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);
283
+ --e-4:0 24px 64px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.04);
284
+ --e-inset:inset 0 1px 0 rgba(255,255,255,.04);
285
+ }
265
286
 
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);
287
+ /* ============ tokens/motion.css ============ */
288
+ :root{
289
+ --dur-instant:80ms;/* @kind other */
290
+ --dur-fast:120ms;/* @kind other */
291
+ --dur-base:180ms;/* @kind other */
292
+ --dur-slow:260ms;/* @kind other */
293
+ --dur-panel:340ms;/* @kind other */
294
+ --ease:cubic-bezier(.2,0,0,1);/* @kind other */
295
+ --ease-out:cubic-bezier(.16,1,.3,1);/* @kind other */
296
+ --ease-spring:cubic-bezier(.34,1.56,.64,1);/* @kind other */
297
+ --skeleton-dur:1400ms;/* @kind other */
272
298
  }
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);
299
+ @media (prefers-reduced-motion:reduce){
300
+ :root{--dur-instant:40ms;/* @kind other */--dur-fast:80ms;/* @kind other */--dur-base:120ms;/* @kind other */--dur-slow:160ms;/* @kind other */--dur-panel:200ms;/* @kind other */--skeleton-dur:0ms/* @kind other */}
278
301
  }
279
302
 
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;
303
+ /* ============ tokens/layout.css ============ */
304
+ :root{
305
+ --sidebar-w:264px;/* @kind spacing */
306
+ --sidebar-w-collapsed:72px;/* @kind spacing */
307
+ --topbar-h:60px;/* @kind spacing */
308
+ --content-max:1440px;/* @kind spacing */
309
+ --marketing-max:1200px;/* @kind spacing */
310
+ --gutter:24px;/* @kind spacing */
311
+ --gutter-lg:32px;/* @kind spacing */
312
+ --bp-sm:640px;/* @kind spacing */
313
+ --bp-md:768px;/* @kind spacing */
314
+ --bp-lg:1024px;/* @kind spacing */
315
+ --bp-xl:1280px;/* @kind spacing */
316
+ --bp-2xl:1536px;/* @kind spacing */
317
+ --hit-product:36px;/* @kind spacing */
318
+ --hit-touch:44px;/* @kind spacing */
319
+ --control-h-sm:34px;/* @kind spacing */
320
+ --control-h-md:44px;/* @kind spacing */
321
+ --control-h-lg:52px;/* @kind spacing */
290
322
  }