alice.pds.demo.boltless.dev
This repository has no description
1@import "tailwindcss";
2@import "./markup.css";
3@import "./pierre.css";
4
5@theme {
6 --font-sans: "InterVariable", "system-ui", sans-serif, ui-sans-serif;
7 --font-mono:
8 "IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9 "Courier New", monospace;
10
11 /* =========================================================================
12 Semantic color tokens — synced from Figma "Design System" › semantic colors
13 Names mirror the Figma variables verbatim (`/` → `-`). Light-mode values
14 here; dark-mode overrides live in the prefers-color-scheme block below.
15 ========================================================================= */
16
17 /* --- background --- */
18 --color-background-default: #ffffff;
19 --color-background-subtle: #f9fafb;
20 --color-background-inset: #f3f4f6;
21 --color-background-muted: #e5e7eb;
22 --color-background-strong: #d1d5db;
23 --color-background-canvas: #f3f4f6;
24 --color-background-highlight: #fef08a;
25 --color-background-success-subtle: #dcfce7;
26 --color-background-success-subtle-hover: #bbf7d0;
27 --color-background-success-emphasis: #16a34a;
28 --color-background-success-emphasis-hover: #15803d;
29 --color-background-danger-subtle: #ffe2e2;
30 --color-background-danger-subtle-hover: #fecaca;
31 --color-background-danger-emphasis: #fca5a5;
32 --color-background-danger-emphasis-hover: #f87171;
33 --color-background-warning-subtle: #fffbeb;
34 --color-background-warning-subtle-hover: #fef3c7;
35 --color-background-warning-emphasis: #f59e0b;
36 --color-background-info-subtle: #eef2ff;
37 --color-background-info-subtle-hover: #e0e7ff;
38 --color-background-info-emphasis: #4f46e5;
39 --color-background-emphasis: #111827;
40
41 /* --- background / navigation ---
42 The settings sidebar aliases *invert* between modes, so these cannot be
43 spelled as an existing pair: light recesses the frame (subtle) and raises
44 the active item (default), dark does the exact opposite. */
45 --color-background-navigation-frame: #f9fafb;
46 --color-background-navigation-item: #ffffff;
47
48 /* --- foreground --- */
49 --color-foreground-default: #111827;
50 --color-foreground-muted: #4b5563;
51 --color-foreground-subtle: #6b7280;
52 --color-foreground-placeholder: #9ca3af;
53 --color-foreground-disabled: #d1d5db;
54 --color-foreground-on-emphasis: #ffffff;
55 --color-foreground-inverted: #f3f4f6;
56 --color-foreground-highlight: #854d0e;
57 --color-foreground-success: #16a34a;
58 --color-foreground-success-strong: #166534;
59 --color-foreground-success-disabled: #16a34a80;
60 --color-foreground-danger: #dc2626;
61 --color-foreground-danger-strong: #991b1b;
62 --color-foreground-danger-subtle: #f87171;
63 --color-foreground-danger-disabled: #fca5a5;
64 --color-foreground-warning: #d97706;
65 --color-foreground-warning-strong: #92400e;
66 --color-foreground-warning-disabled: #fcd34d;
67 --color-foreground-info: #4338ca;
68 --color-foreground-info-strong: #3730a3;
69 --color-foreground-link-default: #111827;
70 --color-foreground-link-hover: #374151;
71 --color-foreground-link-disabled: #9ca3af;
72 --color-foreground-link-danger: #dc2626;
73 --color-foreground-link-danger-hover: #ef4444;
74 --color-foreground-link-success: #16a34a;
75 --color-foreground-link-success-hover: #22c55e;
76 --color-foreground-link-warning: #d97706;
77 --color-foreground-link-warning-hover: #f59e0b;
78 --color-foreground-link-info: #4f46e5;
79 --color-foreground-link-info-hover: #6366f1;
80
81 /* --- border --- */
82 --color-border-default: #e5e7eb;
83 --color-border-subtle: #f3f4f6;
84 --color-border-strong: #d1d5db;
85 --color-border-disabled: #e5e7eb;
86 --color-border-focus: #9ca3af;
87 --color-border-focus-success: #22c55e;
88 --color-border-focus-danger: #ef4444;
89 --color-border-success: #15803d;
90 --color-border-danger: #fca5a5;
91 --color-border-danger-subtle: #fecaca;
92 --color-border-navigation-item-active: #e5e7eb;
93
94 /* --- shadow (inner depth, eg.: for the button component) --- */
95 --color-shadow-inner-strong: #d1d5db;
96 --color-shadow-inner-strong-hover: #d1d5db;
97 --color-shadow-inner-subtle: #e5e7eb;
98 --color-shadow-ambient-strong: var(--color-alpha-dark-10);
99 --color-shadow-ambient-subtle: var(--color-alpha-dark-5);
100
101 /* --- shadow --- */
102 --shadow-small: 0 2px 4px var(--color-shadow-ambient-strong);
103 --shadow-regular:
104 0 4px 12px var(--color-shadow-ambient-subtle), 0 2px 4px var(--color-shadow-ambient-subtle);
105 --shadow-large:
106 0 6px 16px var(--color-shadow-ambient-subtle), 0 4px 6px var(--color-shadow-ambient-subtle);
107
108 /* --- alpha --- */
109 --color-alpha-light-5: color-mix(in srgb, var(--color-background-default) 5%, transparent);
110 --color-alpha-light-10: color-mix(in srgb, var(--color-background-default) 10%, transparent);
111 --color-alpha-light-15: color-mix(in srgb, var(--color-background-default) 15%, transparent);
112 --color-alpha-light-20: color-mix(in srgb, var(--color-background-default) 20%, transparent);
113 --color-alpha-light-25: color-mix(in srgb, var(--color-background-default) 25%, transparent);
114 --color-alpha-light-30: color-mix(in srgb, var(--color-background-default) 30%, transparent);
115 --color-alpha-light-35: color-mix(in srgb, var(--color-background-default) 35%, transparent);
116 --color-alpha-light-40: color-mix(in srgb, var(--color-background-default) 40%, transparent);
117 --color-alpha-light-45: color-mix(in srgb, var(--color-background-default) 45%, transparent);
118 --color-alpha-light-50: color-mix(in srgb, var(--color-background-default) 50%, transparent);
119 --color-alpha-light-55: color-mix(in srgb, var(--color-background-default) 55%, transparent);
120 --color-alpha-light-60: color-mix(in srgb, var(--color-background-default) 60%, transparent);
121 --color-alpha-light-65: color-mix(in srgb, var(--color-background-default) 65%, transparent);
122 --color-alpha-light-70: color-mix(in srgb, var(--color-background-default) 70%, transparent);
123 --color-alpha-light-75: color-mix(in srgb, var(--color-background-default) 75%, transparent);
124 --color-alpha-light-80: color-mix(in srgb, var(--color-background-default) 80%, transparent);
125 --color-alpha-light-85: color-mix(in srgb, var(--color-background-default) 85%, transparent);
126 --color-alpha-light-90: color-mix(in srgb, var(--color-background-default) 90%, transparent);
127 --color-alpha-light-95: color-mix(in srgb, var(--color-background-default) 95%, transparent);
128
129 --color-alpha-dark-5: color-mix(in srgb, var(--color-foreground-default) 5%, transparent);
130 --color-alpha-dark-10: color-mix(in srgb, var(--color-foreground-default) 10%, transparent);
131 --color-alpha-dark-15: color-mix(in srgb, var(--color-foreground-default) 15%, transparent);
132 --color-alpha-dark-20: color-mix(in srgb, var(--color-foreground-default) 20%, transparent);
133 --color-alpha-dark-25: color-mix(in srgb, var(--color-foreground-default) 25%, transparent);
134 --color-alpha-dark-30: color-mix(in srgb, var(--color-foreground-default) 30%, transparent);
135 --color-alpha-dark-35: color-mix(in srgb, var(--color-foreground-default) 35%, transparent);
136 --color-alpha-dark-40: color-mix(in srgb, var(--color-foreground-default) 40%, transparent);
137 --color-alpha-dark-45: color-mix(in srgb, var(--color-foreground-default) 45%, transparent);
138 --color-alpha-dark-50: color-mix(in srgb, var(--color-foreground-default) 50%, transparent);
139 --color-alpha-dark-55: color-mix(in srgb, var(--color-foreground-default) 55%, transparent);
140 --color-alpha-dark-60: color-mix(in srgb, var(--color-foreground-default) 60%, transparent);
141 --color-alpha-dark-65: color-mix(in srgb, var(--color-foreground-default) 65%, transparent);
142 --color-alpha-dark-70: color-mix(in srgb, var(--color-foreground-default) 70%, transparent);
143 --color-alpha-dark-75: color-mix(in srgb, var(--color-foreground-default) 75%, transparent);
144 --color-alpha-dark-80: color-mix(in srgb, var(--color-foreground-default) 80%, transparent);
145 --color-alpha-dark-85: color-mix(in srgb, var(--color-foreground-default) 85%, transparent);
146 --color-alpha-dark-90: color-mix(in srgb, var(--color-foreground-default) 90%, transparent);
147 --color-alpha-dark-95: color-mix(in srgb, var(--color-foreground-default) 95%, transparent);
148}
149
150@utility typography-heading-0 {
151 font-size: 5rem;
152 line-height: 5rem;
153 font-weight: 600;
154 letter-spacing: -0.25px;
155}
156
157@utility typography-heading-1 {
158 font-size: 3rem;
159 line-height: 3.5rem;
160 font-weight: 500;
161}
162
163@utility typography-heading-2 {
164 font-size: 1.875rem;
165 line-height: 1.875rem;
166 font-weight: 600;
167}
168
169@utility typography-heading-3 {
170 font-size: 1.5rem;
171 line-height: 1.875rem;
172 font-weight: 500;
173}
174
175@utility typography-heading-4 {
176 font-size: 1.25rem;
177 line-height: 1.75rem;
178 font-weight: 500;
179}
180
181@utility typography-paragraph-large {
182 font-size: 1rem;
183 line-height: 1.6875rem;
184}
185
186@utility typography-paragraph-regular {
187 font-size: 0.875rem;
188 line-height: 1.5rem;
189}
190
191@utility typography-paragraph-small {
192 font-size: 0.75rem;
193 line-height: 1.25rem;
194}
195
196@utility typography-paragraph-mini {
197 font-size: 0.625rem;
198 line-height: 1rem;
199}
200
201@utility typography-monospace-large {
202 @apply font-mono;
203 font-size: 1rem;
204 line-height: 1.5rem;
205}
206
207@utility typography-monospace-regular {
208 @apply font-mono;
209 font-size: 0.875rem;
210 line-height: 1.375rem;
211}
212
213@utility typography-monospace-small {
214 @apply font-mono;
215 font-size: 0.75rem;
216 line-height: 1.25rem;
217}
218
219@layer base {
220 @font-face {
221 font-family: "InterVariable";
222 src: url("/fonts/InterVariable.woff2") format("woff2-variations");
223 font-weight: 100 600;
224 font-style: normal;
225 font-display: swap;
226 }
227
228 @font-face {
229 font-family: "InterVariable";
230 src: url("/fonts/InterVariable-Italic.woff2") format("woff2-variations");
231 font-weight: 100 600;
232 font-style: italic;
233 font-display: swap;
234 }
235
236 @font-face {
237 font-family: "InterVariable";
238 src: url("/fonts/InterDisplay-Bold.woff2") format("woff2");
239 font-weight: bold;
240 font-style: normal;
241 font-display: swap;
242 }
243
244 @font-face {
245 font-family: "InterVariable";
246 src: url("/fonts/InterDisplay-BoldItalic.woff2") format("woff2");
247 font-weight: bold;
248 font-style: italic;
249 font-display: swap;
250 }
251
252 @font-face {
253 font-family: "IBMPlexMono";
254 src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
255 font-weight: normal;
256 font-style: normal;
257 font-display: swap;
258 }
259
260 @font-face {
261 font-family: "IBMPlexMono";
262 src: url("/fonts/IBMPlexMono-Italic.woff2") format("woff2");
263 font-weight: normal;
264 font-style: italic;
265 font-display: swap;
266 }
267
268 @font-face {
269 font-family: "IBMPlexMono";
270 src: url("/fonts/IBMPlexMono-Bold.woff2") format("woff2");
271 font-weight: bold;
272 font-style: normal;
273 font-display: swap;
274 }
275
276 @font-face {
277 font-family: "IBMPlexMono";
278 src: url("/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
279 font-weight: bold;
280 font-style: italic;
281 font-display: swap;
282 }
283
284 html {
285 font-size: 16px;
286 scrollbar-gutter: stable;
287 }
288
289 @media (prefers-color-scheme: dark) {
290 :root {
291 /* --- background (Dark) --- */
292 --color-background-default: #1f2937;
293 --color-background-subtle: #374151;
294 --color-background-inset: #374151;
295 --color-background-muted: #4b5563;
296 --color-background-strong: #6b7280;
297 --color-background-canvas: #111827;
298 --color-background-highlight: #713f12;
299 --color-background-success-subtle: #14532d;
300 --color-background-success-subtle-hover: #166534;
301 --color-background-success-emphasis: #15803d;
302 --color-background-success-emphasis-hover: #166534;
303 --color-background-danger-subtle: #7f1d1d;
304 --color-background-danger-subtle-hover: #991b1b;
305 --color-background-danger-emphasis: #b91c1c;
306 --color-background-danger-emphasis-hover: #991b1b;
307 --color-background-warning-subtle: #78350f;
308 --color-background-warning-subtle-hover: #92400e;
309 --color-background-warning-emphasis: #d97706;
310 --color-background-info-subtle: #312e81;
311 --color-background-info-subtle-hover: #3730a3;
312 --color-background-info-emphasis: #4f46e5;
313 --color-background-emphasis: #f3f4f6;
314
315 /* --- background / navigation (Dark) --- inverted vs light, see above */
316 --color-background-navigation-frame: #1f2937;
317 --color-background-navigation-item: #374151;
318
319 /* --- foreground (Dark) --- */
320 --color-foreground-default: #f3f4f6;
321 --color-foreground-muted: #9ca3af;
322 --color-foreground-subtle: #6b7280;
323 --color-foreground-placeholder: #9ca3af;
324 --color-foreground-disabled: #6b7280;
325 --color-foreground-on-emphasis: #ffffff;
326 --color-foreground-inverted: #111827;
327 --color-foreground-highlight: #fef08a;
328 --color-foreground-success: #4ade80;
329 --color-foreground-success-strong: #bbf7d0;
330 --color-foreground-success-disabled: #15803d;
331 --color-foreground-danger: #f87171;
332 --color-foreground-danger-strong: #fecaca;
333 --color-foreground-danger-disabled: #f87171;
334 --color-foreground-warning: #fbbf24;
335 --color-foreground-warning-strong: #fde68a;
336 --color-foreground-warning-disabled: #fbbf24;
337 --color-foreground-info: #818cf8;
338 --color-foreground-info-strong: #c7d2fe;
339 --color-foreground-link-default: #f3f4f6;
340 --color-foreground-link-hover: #d1d5db;
341 --color-foreground-link-disabled: #6b7280;
342 --color-foreground-link-danger: #ef4444;
343 --color-foreground-link-danger-hover: #f87171;
344 --color-foreground-link-success: #22c55e;
345 --color-foreground-link-success-hover: #4ade80;
346 --color-foreground-link-warning: #f59e0b;
347 --color-foreground-link-warning-hover: #fbbf24;
348 --color-foreground-link-info: #6366f1;
349 --color-foreground-link-info-hover: #818cf8;
350
351 /* --- border (Dark) --- */
352 --color-border-default: #374151;
353 --color-border-subtle: #1f2937;
354 --color-border-strong: #6b7280;
355 --color-border-disabled: #4b5563;
356 --color-border-focus: #d1d5db;
357 --color-border-focus-success: #22c55e;
358 --color-border-focus-danger: #ef4444;
359 --color-border-success: #15803d;
360 --color-border-danger: #991b1b;
361 --color-border-navigation-item-active: #4b5563;
362
363 /* --- shadow (Dark) --- */
364 --color-shadow-inner-strong: #030712;
365 --color-shadow-inner-strong-hover: #1f2937;
366 --color-shadow-inner-subtle: #111827;
367 --color-shadow-ambient-strong: transparent;
368 --color-shadow-ambient-subtle: transparent;
369 }
370 }
371
372 body {
373 @apply flex min-h-screen flex-col bg-background-canvas text-foreground-default transition-colors duration-200;
374 font-size: 14px;
375 }
376
377 a {
378 @apply text-foreground-default no-underline hover:text-foreground-muted;
379 }
380}