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