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 /* --- typography — synced from Figma "Font Styles" (node 1:186) --- */
17 --text-heading-0: 5rem;
18 --text-heading-0--line-height: 5rem;
19 --text-heading-0--font-weight: 600;
20 --text-heading-0--letter-spacing: -0.25px;
21 --text-heading-1: 3rem;
22 --text-heading-1--line-height: 3.5rem;
23 --text-heading-1--font-weight: 500;
24 --text-heading-2: 1.875rem;
25 --text-heading-2--line-height: 1.875rem;
26 --text-heading-2--font-weight: 600;
27 --text-heading-3: 1.5rem;
28 --text-heading-3--line-height: 1.875rem;
29 --text-heading-3--font-weight: 500;
30 --text-heading-4: 1.25rem;
31 --text-heading-4--line-height: 1.75rem;
32 --text-heading-4--font-weight: 500;
33 --text-paragraph-large: 1rem;
34 --text-paragraph-large--line-height: 1.6875rem;
35 --text-paragraph-regular: 0.875rem;
36 --text-paragraph-regular--line-height: 1.5rem;
37 --text-paragraph-small: 0.75rem;
38 --text-paragraph-small--line-height: 1.25rem;
39 --text-paragraph-mini: 0.625rem;
40 --text-paragraph-mini--line-height: 1rem;
41 --text-monospace-large: 1rem;
42 --text-monospace-large--line-height: 1.5rem;
43 --text-monospace-regular: 0.875rem;
44 --text-monospace-regular--line-height: 1.375rem;
45 --text-monospace-small: 0.75rem;
46 --text-monospace-small--line-height: 1.25rem;
47
48 /* --- background --- */
49 --color-background-default: #ffffff;
50 --color-background-subtle: #f9fafb;
51 --color-background-inset: #f3f4f6;
52 --color-background-muted: #e5e7eb;
53 --color-background-canvas: #f3f4f6;
54 --color-background-highlight: #fef08a;
55 --color-background-success-subtle: #dcfce7;
56 --color-background-success-subtle-hover: #bbf7d0;
57 --color-background-success-emphasis: #16a34a;
58 --color-background-success-emphasis-hover: #15803d;
59 --color-background-danger-subtle: #ffe2e2;
60 --color-background-danger-subtle-hover: #fecaca;
61 --color-background-danger-emphasis: #fca5a5;
62 --color-background-danger-emphasis-hover: #f87171;
63 --color-background-warning-subtle: #fffbeb;
64 --color-background-warning-subtle-hover: #fef3c7;
65 --color-background-warning-emphasis: #f59e0b;
66 --color-background-info-subtle: #eef2ff;
67 --color-background-info-subtle-hover: #e0e7ff;
68 --color-background-info-emphasis: #4f46e5;
69 --color-background-neutral-emphasis: #1f2937;
70
71 /* --- foreground --- */
72 --color-foreground-default: #111827;
73 --color-foreground-muted: #4b5563;
74 --color-foreground-subtle: #6b7280;
75 --color-foreground-placeholder: #9ca3af;
76 --color-foreground-disabled: #d1d5db;
77 --color-foreground-on-emphasis: #ffffff;
78 --color-foreground-highlight: #854d0e;
79 --color-foreground-success: #16a34a;
80 --color-foreground-success-strong: #166534;
81 --color-foreground-success-disabled: #16a34a80;
82 --color-foreground-danger: #dc2626;
83 --color-foreground-danger-strong: #991b1b;
84 --color-foreground-danger-subtle: #f87171;
85 --color-foreground-warning: #d97706;
86 --color-foreground-warning-strong: #92400e;
87 --color-foreground-info: #4338ca;
88 --color-foreground-info-strong: #3730a3;
89 --color-foreground-link-default: #111827;
90 --color-foreground-link-hover: #374151;
91 --color-foreground-link-disabled: #9ca3af;
92 --color-foreground-link-danger: #dc2626;
93 --color-foreground-link-danger-hover: #ef4444;
94 --color-foreground-link-success: #16a34a;
95 --color-foreground-link-success-hover: #22c55e;
96 --color-foreground-link-warning: #d97706;
97 --color-foreground-link-warning-hover: #f59e0b;
98 --color-foreground-link-info: #4f46e5;
99 --color-foreground-link-info-hover: #6366f1;
100
101 /* --- border --- */
102 --color-border-default: #e5e7eb;
103 --color-border-subtle: #f3f4f6;
104 --color-border-strong: #d1d5db;
105 --color-border-disabled: #e5e7eb;
106 --color-border-focus: #9ca3af;
107 --color-border-focus-success: #22c55e;
108 --color-border-focus-danger: #ef4444;
109 --color-border-success: #15803d;
110 --color-border-danger: #fca5a5;
111 --color-border-danger-subtle: #fecaca;
112
113 /* --- shadow (inner depth) --- */
114 --color-shadow-inner-strong: #d1d5db;
115 --color-shadow-inner-strong-hover: #d1d5db;
116 --color-shadow-inner-subtle: #e5e7eb;
117
118 --shadow-menu: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
119
120 /* --- alpha --- */
121 --color-alpha-light-5: color-mix(in srgb, var(--color-background-default) 5%, transparent);
122 --color-alpha-light-10: color-mix(in srgb, var(--color-background-default) 10%, transparent);
123 --color-alpha-light-15: color-mix(in srgb, var(--color-background-default) 15%, transparent);
124 --color-alpha-light-20: color-mix(in srgb, var(--color-background-default) 20%, transparent);
125 --color-alpha-light-25: color-mix(in srgb, var(--color-background-default) 25%, transparent);
126 --color-alpha-light-30: color-mix(in srgb, var(--color-background-default) 30%, transparent);
127 --color-alpha-light-35: color-mix(in srgb, var(--color-background-default) 35%, transparent);
128 --color-alpha-light-40: color-mix(in srgb, var(--color-background-default) 40%, transparent);
129 --color-alpha-light-45: color-mix(in srgb, var(--color-background-default) 45%, transparent);
130 --color-alpha-light-50: color-mix(in srgb, var(--color-background-default) 50%, transparent);
131 --color-alpha-light-55: color-mix(in srgb, var(--color-background-default) 55%, transparent);
132 --color-alpha-light-60: color-mix(in srgb, var(--color-background-default) 60%, transparent);
133 --color-alpha-light-65: color-mix(in srgb, var(--color-background-default) 65%, transparent);
134 --color-alpha-light-70: color-mix(in srgb, var(--color-background-default) 70%, transparent);
135 --color-alpha-light-75: color-mix(in srgb, var(--color-background-default) 75%, transparent);
136 --color-alpha-light-80: color-mix(in srgb, var(--color-background-default) 80%, transparent);
137 --color-alpha-light-85: color-mix(in srgb, var(--color-background-default) 85%, transparent);
138 --color-alpha-light-90: color-mix(in srgb, var(--color-background-default) 90%, transparent);
139 --color-alpha-light-95: color-mix(in srgb, var(--color-background-default) 95%, transparent);
140
141 --color-alpha-dark-5: color-mix(in srgb, var(--color-foreground-default) 5%, transparent);
142 --color-alpha-dark-10: color-mix(in srgb, var(--color-foreground-default) 10%, transparent);
143 --color-alpha-dark-15: color-mix(in srgb, var(--color-foreground-default) 15%, transparent);
144 --color-alpha-dark-20: color-mix(in srgb, var(--color-foreground-default) 20%, transparent);
145 --color-alpha-dark-25: color-mix(in srgb, var(--color-foreground-default) 25%, transparent);
146 --color-alpha-dark-30: color-mix(in srgb, var(--color-foreground-default) 30%, transparent);
147 --color-alpha-dark-35: color-mix(in srgb, var(--color-foreground-default) 35%, transparent);
148 --color-alpha-dark-40: color-mix(in srgb, var(--color-foreground-default) 40%, transparent);
149 --color-alpha-dark-45: color-mix(in srgb, var(--color-foreground-default) 45%, transparent);
150 --color-alpha-dark-50: color-mix(in srgb, var(--color-foreground-default) 50%, transparent);
151 --color-alpha-dark-55: color-mix(in srgb, var(--color-foreground-default) 55%, transparent);
152 --color-alpha-dark-60: color-mix(in srgb, var(--color-foreground-default) 60%, transparent);
153 --color-alpha-dark-65: color-mix(in srgb, var(--color-foreground-default) 65%, transparent);
154 --color-alpha-dark-70: color-mix(in srgb, var(--color-foreground-default) 70%, transparent);
155 --color-alpha-dark-75: color-mix(in srgb, var(--color-foreground-default) 75%, transparent);
156 --color-alpha-dark-80: color-mix(in srgb, var(--color-foreground-default) 80%, transparent);
157 --color-alpha-dark-85: color-mix(in srgb, var(--color-foreground-default) 85%, transparent);
158 --color-alpha-dark-90: color-mix(in srgb, var(--color-foreground-default) 90%, transparent);
159 --color-alpha-dark-95: color-mix(in srgb, var(--color-foreground-default) 95%, transparent);
160}
161
162@layer base {
163 @font-face {
164 font-family: "InterVariable";
165 src: url("/fonts/InterVariable.woff2") format("woff2-variations");
166 font-weight: 100 600;
167 font-style: normal;
168 font-display: swap;
169 }
170
171 @font-face {
172 font-family: "InterVariable";
173 src: url("/fonts/InterVariable-Italic.woff2") format("woff2-variations");
174 font-weight: 100 600;
175 font-style: italic;
176 font-display: swap;
177 }
178
179 @font-face {
180 font-family: "InterVariable";
181 src: url("/fonts/InterDisplay-Bold.woff2") format("woff2");
182 font-weight: bold;
183 font-style: normal;
184 font-display: swap;
185 }
186
187 @font-face {
188 font-family: "InterVariable";
189 src: url("/fonts/InterDisplay-BoldItalic.woff2") format("woff2");
190 font-weight: bold;
191 font-style: italic;
192 font-display: swap;
193 }
194
195 @font-face {
196 font-family: "IBMPlexMono";
197 src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
198 font-weight: normal;
199 font-style: normal;
200 font-display: swap;
201 }
202
203 @font-face {
204 font-family: "IBMPlexMono";
205 src: url("/fonts/IBMPlexMono-Italic.woff2") format("woff2");
206 font-weight: normal;
207 font-style: italic;
208 font-display: swap;
209 }
210
211 @font-face {
212 font-family: "IBMPlexMono";
213 src: url("/fonts/IBMPlexMono-Bold.woff2") format("woff2");
214 font-weight: bold;
215 font-style: normal;
216 font-display: swap;
217 }
218
219 @font-face {
220 font-family: "IBMPlexMono";
221 src: url("/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
222 font-weight: bold;
223 font-style: italic;
224 font-display: swap;
225 }
226
227 html {
228 font-size: 16px;
229 scrollbar-gutter: stable;
230 }
231
232 @media (prefers-color-scheme: dark) {
233 :root {
234 /* --- background (Dark) --- */
235 --color-background-default: #1f2937;
236 --color-background-subtle: #374151;
237 --color-background-inset: #374151;
238 --color-background-muted: #4b5563;
239 --color-background-canvas: #111827;
240 --color-background-highlight: #713f12;
241 --color-background-success-subtle: #14532d;
242 --color-background-success-subtle-hover: #166534;
243 --color-background-success-emphasis: #15803d;
244 --color-background-success-emphasis-hover: #166534;
245 --color-background-danger-subtle: #7f1d1d;
246 --color-background-danger-subtle-hover: #991b1b;
247 --color-background-danger-emphasis: #b91c1c;
248 --color-background-danger-emphasis-hover: #991b1b;
249 --color-background-warning-subtle: #78350f;
250 --color-background-warning-subtle-hover: #92400e;
251 --color-background-warning-emphasis: #d97706;
252 --color-background-info-subtle: #312e81;
253 --color-background-info-subtle-hover: #3730a3;
254 --color-background-info-emphasis: #4f46e5;
255 --color-background-neutral-emphasis: #374151;
256
257 /* --- foreground (Dark) --- */
258 --color-foreground-default: #f3f4f6;
259 --color-foreground-muted: #9ca3af;
260 --color-foreground-subtle: #6b7280;
261 --color-foreground-placeholder: #9ca3af;
262 --color-foreground-disabled: #6b7280;
263 --color-foreground-on-emphasis: #ffffff;
264 --color-foreground-highlight: #fef08a;
265 --color-foreground-success: #4ade80;
266 --color-foreground-success-strong: #bbf7d0;
267 --color-foreground-success-disabled: #15803d;
268 --color-foreground-danger: #f87171;
269 --color-foreground-danger-strong: #fecaca;
270 --color-foreground-warning: #fbbf24;
271 --color-foreground-warning-strong: #fde68a;
272 --color-foreground-info: #818cf8;
273 --color-foreground-info-strong: #c7d2fe;
274 --color-foreground-link-default: #f3f4f6;
275 --color-foreground-link-hover: #d1d5db;
276 --color-foreground-link-disabled: #6b7280;
277 --color-foreground-link-danger: #ef4444;
278 --color-foreground-link-danger-hover: #f87171;
279 --color-foreground-link-success: #22c55e;
280 --color-foreground-link-success-hover: #4ade80;
281 --color-foreground-link-warning: #f59e0b;
282 --color-foreground-link-warning-hover: #fbbf24;
283 --color-foreground-link-info: #6366f1;
284 --color-foreground-link-info-hover: #818cf8;
285
286 /* --- border (Dark) --- */
287 --color-border-default: #374151;
288 --color-border-subtle: #1f2937;
289 --color-border-strong: #6b7280;
290 --color-border-disabled: #4b5563;
291 --color-border-focus: #d1d5db;
292 --color-border-focus-success: #22c55e;
293 --color-border-focus-danger: #ef4444;
294 --color-border-success: #15803d;
295 --color-border-danger: #991b1b;
296
297 /* --- shadow (Dark) --- */
298 --color-shadow-inner-strong: #030712;
299 --color-shadow-inner-strong-hover: #1f2937;
300 --color-shadow-inner-subtle: #111827;
301 }
302 }
303
304 body {
305 @apply flex min-h-screen flex-col bg-background-canvas text-foreground-default transition-colors duration-200;
306 font-size: 14px;
307 }
308
309 a {
310 @apply text-foreground-default no-underline hover:text-foreground-muted;
311 }
312}