alice.pds.demo.boltless.dev
This repository has no description
1@import "tailwindcss";
2
3@theme {
4 --font-sans: "InterVariable", "system-ui", sans-serif, ui-sans-serif;
5 --font-mono:
6 "IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
7 "Courier New", monospace;
8
9 /* =========================================================================
10 Semantic color tokens — synced from Figma "Design System" › semantic colors
11 Names mirror the Figma variables verbatim (`/` → `-`). Light-mode values
12 here; dark-mode overrides live in the prefers-color-scheme block below.
13 ========================================================================= */
14
15 /* --- background --- */
16 --color-background-default: #ffffff;
17 --color-background-subtle: #f9fafb;
18 --color-background-inset: #f3f4f6;
19 --color-background-muted: #e5e7eb;
20 --color-background-canvas: #f3f4f6;
21 --color-background-highlight: #fef08a;
22 --color-background-success-subtle: #dcfce7;
23 --color-background-success-subtle-hover: #bbf7d0;
24 --color-background-success-emphasis: #16a34a;
25 --color-background-success-emphasis-hover: #15803d;
26 --color-background-danger-subtle: #ffe2e2;
27 --color-background-danger-subtle-hover: #fecaca;
28 --color-background-danger-emphasis: #fca5a5;
29 --color-background-danger-emphasis-hover: #f87171;
30 --color-background-warning-subtle: #fffbeb;
31 --color-background-warning-subtle-hover: #fef3c7;
32 --color-background-warning-emphasis: #f59e0b;
33 --color-background-info-subtle: #eef2ff;
34 --color-background-info-subtle-hover: #e0e7ff;
35 --color-background-info-emphasis: #4f46e5;
36
37 /* --- foreground --- */
38 --color-foreground-default: #111827;
39 --color-foreground-muted: #4b5563;
40 --color-foreground-subtle: #6b7280;
41 --color-foreground-placeholder: #9ca3af;
42 --color-foreground-disabled: #d1d5db;
43 --color-foreground-on-emphasis: #ffffff;
44 --color-foreground-highlight: #854d0e;
45 --color-foreground-success: #16a34a;
46 --color-foreground-success-strong: #166534;
47 --color-foreground-success-disabled: #16a34a80;
48 --color-foreground-danger: #dc2626;
49 --color-foreground-danger-strong: #991b1b;
50 --color-foreground-danger-subtle: #f87171;
51 --color-foreground-warning: #d97706;
52 --color-foreground-warning-strong: #92400e;
53 --color-foreground-info: #4338ca;
54 --color-foreground-info-strong: #3730a3;
55 --color-foreground-link-default: #111827;
56 --color-foreground-link-hover: #374151;
57 --color-foreground-link-disabled: #9ca3af;
58 --color-foreground-link-danger: #dc2626;
59 --color-foreground-link-danger-hover: #ef4444;
60 --color-foreground-link-success: #16a34a;
61 --color-foreground-link-success-hover: #22c55e;
62 --color-foreground-link-warning: #d97706;
63 --color-foreground-link-warning-hover: #f59e0b;
64 --color-foreground-link-info: #4f46e5;
65 --color-foreground-link-info-hover: #6366f1;
66
67 /* --- border --- */
68 --color-border-default: #e5e7eb;
69 --color-border-subtle: #f3f4f6;
70 --color-border-strong: #d1d5db;
71 --color-border-disabled: #e5e7eb;
72 --color-border-focus: #9ca3af;
73 --color-border-focus-success: #22c55e;
74 --color-border-focus-danger: #ef4444;
75 --color-border-success: #15803d;
76 --color-border-danger: #fca5a5;
77 --color-border-danger-subtle: #fecaca;
78
79 /* --- shadow (inner depth) --- */
80 --color-shadow-inner-strong: #d1d5db;
81 --color-shadow-inner-strong-hover: #d1d5db;
82 --color-shadow-inner-subtle: #e5e7eb;
83
84 --shadow-menu: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
85
86 /* --- alpha --- */
87 --color-alpha-light-5: color-mix(in srgb, var(--color-background-default) 5%, transparent);
88 --color-alpha-light-10: color-mix(in srgb, var(--color-background-default) 10%, transparent);
89 --color-alpha-light-15: color-mix(in srgb, var(--color-background-default) 15%, transparent);
90 --color-alpha-light-20: color-mix(in srgb, var(--color-background-default) 20%, transparent);
91 --color-alpha-light-25: color-mix(in srgb, var(--color-background-default) 25%, transparent);
92 --color-alpha-light-30: color-mix(in srgb, var(--color-background-default) 30%, transparent);
93 --color-alpha-light-35: color-mix(in srgb, var(--color-background-default) 35%, transparent);
94 --color-alpha-light-40: color-mix(in srgb, var(--color-background-default) 40%, transparent);
95 --color-alpha-light-45: color-mix(in srgb, var(--color-background-default) 45%, transparent);
96 --color-alpha-light-50: color-mix(in srgb, var(--color-background-default) 50%, transparent);
97 --color-alpha-light-55: color-mix(in srgb, var(--color-background-default) 55%, transparent);
98 --color-alpha-light-60: color-mix(in srgb, var(--color-background-default) 60%, transparent);
99 --color-alpha-light-65: color-mix(in srgb, var(--color-background-default) 65%, transparent);
100 --color-alpha-light-70: color-mix(in srgb, var(--color-background-default) 70%, transparent);
101 --color-alpha-light-75: color-mix(in srgb, var(--color-background-default) 75%, transparent);
102 --color-alpha-light-80: color-mix(in srgb, var(--color-background-default) 80%, transparent);
103 --color-alpha-light-85: color-mix(in srgb, var(--color-background-default) 85%, transparent);
104 --color-alpha-light-90: color-mix(in srgb, var(--color-background-default) 90%, transparent);
105 --color-alpha-light-95: color-mix(in srgb, var(--color-background-default) 95%, transparent);
106
107 --color-alpha-dark-5: color-mix(in srgb, var(--color-foreground-default) 5%, transparent);
108 --color-alpha-dark-10: color-mix(in srgb, var(--color-foreground-default) 10%, transparent);
109 --color-alpha-dark-15: color-mix(in srgb, var(--color-foreground-default) 15%, transparent);
110 --color-alpha-dark-20: color-mix(in srgb, var(--color-foreground-default) 20%, transparent);
111 --color-alpha-dark-25: color-mix(in srgb, var(--color-foreground-default) 25%, transparent);
112 --color-alpha-dark-30: color-mix(in srgb, var(--color-foreground-default) 30%, transparent);
113 --color-alpha-dark-35: color-mix(in srgb, var(--color-foreground-default) 35%, transparent);
114 --color-alpha-dark-40: color-mix(in srgb, var(--color-foreground-default) 40%, transparent);
115 --color-alpha-dark-45: color-mix(in srgb, var(--color-foreground-default) 45%, transparent);
116 --color-alpha-dark-50: color-mix(in srgb, var(--color-foreground-default) 50%, transparent);
117 --color-alpha-dark-55: color-mix(in srgb, var(--color-foreground-default) 55%, transparent);
118 --color-alpha-dark-60: color-mix(in srgb, var(--color-foreground-default) 60%, transparent);
119 --color-alpha-dark-65: color-mix(in srgb, var(--color-foreground-default) 65%, transparent);
120 --color-alpha-dark-70: color-mix(in srgb, var(--color-foreground-default) 70%, transparent);
121 --color-alpha-dark-75: color-mix(in srgb, var(--color-foreground-default) 75%, transparent);
122 --color-alpha-dark-80: color-mix(in srgb, var(--color-foreground-default) 80%, transparent);
123 --color-alpha-dark-85: color-mix(in srgb, var(--color-foreground-default) 85%, transparent);
124 --color-alpha-dark-90: color-mix(in srgb, var(--color-foreground-default) 90%, transparent);
125 --color-alpha-dark-95: color-mix(in srgb, var(--color-foreground-default) 95%, transparent);
126}
127
128@layer base {
129 @font-face {
130 font-family: "InterVariable";
131 src: url("/fonts/InterVariable.woff2") format("woff2-variations");
132 font-weight: 100 600;
133 font-style: normal;
134 font-display: swap;
135 }
136
137 @font-face {
138 font-family: "InterVariable";
139 src: url("/fonts/InterVariable-Italic.woff2") format("woff2-variations");
140 font-weight: 100 600;
141 font-style: italic;
142 font-display: swap;
143 }
144
145 @font-face {
146 font-family: "InterVariable";
147 src: url("/fonts/InterDisplay-Bold.woff2") format("woff2");
148 font-weight: bold;
149 font-style: normal;
150 font-display: swap;
151 }
152
153 @font-face {
154 font-family: "InterVariable";
155 src: url("/fonts/InterDisplay-BoldItalic.woff2") format("woff2");
156 font-weight: bold;
157 font-style: italic;
158 font-display: swap;
159 }
160
161 @font-face {
162 font-family: "IBMPlexMono";
163 src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
164 font-weight: normal;
165 font-style: normal;
166 font-display: swap;
167 }
168
169 @font-face {
170 font-family: "IBMPlexMono";
171 src: url("/fonts/IBMPlexMono-Italic.woff2") format("woff2");
172 font-weight: normal;
173 font-style: italic;
174 font-display: swap;
175 }
176
177 @font-face {
178 font-family: "IBMPlexMono";
179 src: url("/fonts/IBMPlexMono-Bold.woff2") format("woff2");
180 font-weight: bold;
181 font-style: normal;
182 font-display: swap;
183 }
184
185 @font-face {
186 font-family: "IBMPlexMono";
187 src: url("/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
188 font-weight: bold;
189 font-style: italic;
190 font-display: swap;
191 }
192
193 html {
194 font-size: 16px;
195 scrollbar-gutter: stable;
196 }
197
198 @media (prefers-color-scheme: dark) {
199 :root {
200 /* --- background (Dark) --- */
201 --color-background-default: #1f2937;
202 --color-background-subtle: #374151;
203 --color-background-inset: #374151;
204 --color-background-muted: #4b5563;
205 --color-background-canvas: #111827;
206 --color-background-highlight: #713f12;
207 --color-background-success-subtle: #14532d;
208 --color-background-success-subtle-hover: #166534;
209 --color-background-success-emphasis: #15803d;
210 --color-background-success-emphasis-hover: #166534;
211 --color-background-danger-subtle: #7f1d1d;
212 --color-background-danger-subtle-hover: #991b1b;
213 --color-background-danger-emphasis: #b91c1c;
214 --color-background-danger-emphasis-hover: #991b1b;
215 --color-background-warning-subtle: #78350f;
216 --color-background-warning-subtle-hover: #92400e;
217 --color-background-warning-emphasis: #d97706;
218 --color-background-info-subtle: #312e81;
219 --color-background-info-subtle-hover: #3730a3;
220 --color-background-info-emphasis: #4f46e5;
221
222 /* --- foreground (Dark) --- */
223 --color-foreground-default: #f3f4f6;
224 --color-foreground-muted: #9ca3af;
225 --color-foreground-subtle: #6b7280;
226 --color-foreground-placeholder: #9ca3af;
227 --color-foreground-disabled: #6b7280;
228 --color-foreground-on-emphasis: #ffffff;
229 --color-foreground-highlight: #fef08a;
230 --color-foreground-success: #4ade80;
231 --color-foreground-success-strong: #bbf7d0;
232 --color-foreground-success-disabled: #15803d;
233 --color-foreground-danger: #f87171;
234 --color-foreground-danger-strong: #fecaca;
235 --color-foreground-warning: #fbbf24;
236 --color-foreground-warning-strong: #fde68a;
237 --color-foreground-info: #818cf8;
238 --color-foreground-info-strong: #c7d2fe;
239 --color-foreground-link-default: #f3f4f6;
240 --color-foreground-link-hover: #d1d5db;
241 --color-foreground-link-disabled: #6b7280;
242 --color-foreground-link-danger: #ef4444;
243 --color-foreground-link-danger-hover: #f87171;
244 --color-foreground-link-success: #22c55e;
245 --color-foreground-link-success-hover: #4ade80;
246 --color-foreground-link-warning: #f59e0b;
247 --color-foreground-link-warning-hover: #fbbf24;
248 --color-foreground-link-info: #6366f1;
249 --color-foreground-link-info-hover: #818cf8;
250
251 /* --- border (Dark) --- */
252 --color-border-default: #374151;
253 --color-border-subtle: #1f2937;
254 --color-border-strong: #6b7280;
255 --color-border-disabled: #4b5563;
256 --color-border-focus: #d1d5db;
257 --color-border-focus-success: #22c55e;
258 --color-border-focus-danger: #ef4444;
259 --color-border-success: #15803d;
260 --color-border-danger: #991b1b;
261
262 /* --- shadow (Dark) --- */
263 --color-shadow-inner-strong: #030712;
264 --color-shadow-inner-strong-hover: #1f2937;
265 --color-shadow-inner-subtle: #111827;
266 }
267 }
268
269 body {
270 @apply flex min-h-screen flex-col bg-background-canvas text-foreground-default transition-colors duration-200;
271 font-size: 14px;
272 }
273
274 a {
275 @apply text-foreground-default no-underline hover:text-foreground-muted;
276 }
277}