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-warning: #d97706;
51 --color-foreground-warning-strong: #92400e;
52 --color-foreground-info: #4338ca;
53 --color-foreground-info-strong: #3730a3;
54 --color-foreground-link-default: #111827;
55 --color-foreground-link-hover: #374151;
56 --color-foreground-link-disabled: #9ca3af;
57 --color-foreground-link-danger: #dc2626;
58 --color-foreground-link-danger-hover: #ef4444;
59 --color-foreground-link-success: #16a34a;
60 --color-foreground-link-success-hover: #22c55e;
61 --color-foreground-link-warning: #d97706;
62 --color-foreground-link-warning-hover: #f59e0b;
63 --color-foreground-link-info: #4f46e5;
64 --color-foreground-link-info-hover: #6366f1;
65
66 /* --- border --- */
67 --color-border-default: #e5e7eb;
68 --color-border-subtle: #f3f4f6;
69 --color-border-strong: #d1d5db;
70 --color-border-disabled: #e5e7eb;
71 --color-border-focus: #9ca3af;
72 --color-border-focus-success: #22c55e;
73 --color-border-focus-danger: #ef4444;
74 --color-border-success: #15803d;
75 --color-border-danger: #fca5a5;
76
77 /* --- shadow (inner depth) --- */
78 --color-shadow-inner-strong: #d1d5db;
79 --color-shadow-inner-strong-hover: #d1d5db;
80 --color-shadow-inner-subtle: #e5e7eb;
81
82 --shadow-menu: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
83}
84
85@layer base {
86 @font-face {
87 font-family: "InterVariable";
88 src: url("/fonts/InterVariable.woff2") format("woff2-variations");
89 font-weight: 100 600;
90 font-style: normal;
91 font-display: swap;
92 }
93
94 @font-face {
95 font-family: "InterVariable";
96 src: url("/fonts/InterVariable-Italic.woff2") format("woff2-variations");
97 font-weight: 100 600;
98 font-style: italic;
99 font-display: swap;
100 }
101
102 @font-face {
103 font-family: "InterVariable";
104 src: url("/fonts/InterDisplay-Bold.woff2") format("woff2");
105 font-weight: bold;
106 font-style: normal;
107 font-display: swap;
108 }
109
110 @font-face {
111 font-family: "InterVariable";
112 src: url("/fonts/InterDisplay-BoldItalic.woff2") format("woff2");
113 font-weight: bold;
114 font-style: italic;
115 font-display: swap;
116 }
117
118 @font-face {
119 font-family: "IBMPlexMono";
120 src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
121 font-weight: normal;
122 font-style: normal;
123 font-display: swap;
124 }
125
126 @font-face {
127 font-family: "IBMPlexMono";
128 src: url("/fonts/IBMPlexMono-Italic.woff2") format("woff2");
129 font-weight: normal;
130 font-style: italic;
131 font-display: swap;
132 }
133
134 @font-face {
135 font-family: "IBMPlexMono";
136 src: url("/fonts/IBMPlexMono-Bold.woff2") format("woff2");
137 font-weight: bold;
138 font-style: normal;
139 font-display: swap;
140 }
141
142 @font-face {
143 font-family: "IBMPlexMono";
144 src: url("/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
145 font-weight: bold;
146 font-style: italic;
147 font-display: swap;
148 }
149
150 html {
151 font-size: 16px;
152 scrollbar-gutter: stable;
153 }
154
155 @media (prefers-color-scheme: dark) {
156 :root {
157 /* --- background (Dark) --- */
158 --color-background-default: #1f2937;
159 --color-background-subtle: #374151;
160 --color-background-inset: #374151;
161 --color-background-muted: #4b5563;
162 --color-background-canvas: #111827;
163 --color-background-highlight: #713f12;
164 --color-background-success-subtle: #14532d;
165 --color-background-success-subtle-hover: #166534;
166 --color-background-success-emphasis: #15803d;
167 --color-background-success-emphasis-hover: #166534;
168 --color-background-danger-subtle: #7f1d1d;
169 --color-background-danger-subtle-hover: #991b1b;
170 --color-background-danger-emphasis: #b91c1c;
171 --color-background-danger-emphasis-hover: #991b1b;
172 --color-background-warning-subtle: #78350f;
173 --color-background-warning-subtle-hover: #92400e;
174 --color-background-warning-emphasis: #d97706;
175 --color-background-info-subtle: #312e81;
176 --color-background-info-subtle-hover: #3730a3;
177 --color-background-info-emphasis: #4f46e5;
178
179 /* --- foreground (Dark) --- */
180 --color-foreground-default: #f3f4f6;
181 --color-foreground-muted: #9ca3af;
182 --color-foreground-subtle: #6b7280;
183 --color-foreground-placeholder: #9ca3af;
184 --color-foreground-disabled: #6b7280;
185 --color-foreground-on-emphasis: #ffffff;
186 --color-foreground-highlight: #fef08a;
187 --color-foreground-success: #4ade80;
188 --color-foreground-success-strong: #bbf7d0;
189 --color-foreground-success-disabled: #15803d;
190 --color-foreground-danger: #f87171;
191 --color-foreground-danger-strong: #fecaca;
192 --color-foreground-warning: #fbbf24;
193 --color-foreground-warning-strong: #fde68a;
194 --color-foreground-info: #818cf8;
195 --color-foreground-info-strong: #c7d2fe;
196 --color-foreground-link-default: #f3f4f6;
197 --color-foreground-link-hover: #d1d5db;
198 --color-foreground-link-disabled: #6b7280;
199 --color-foreground-link-danger: #ef4444;
200 --color-foreground-link-danger-hover: #f87171;
201 --color-foreground-link-success: #22c55e;
202 --color-foreground-link-success-hover: #4ade80;
203 --color-foreground-link-warning: #f59e0b;
204 --color-foreground-link-warning-hover: #fbbf24;
205 --color-foreground-link-info: #6366f1;
206 --color-foreground-link-info-hover: #818cf8;
207
208 /* --- border (Dark) --- */
209 --color-border-default: #374151;
210 --color-border-subtle: #1f2937;
211 --color-border-strong: #6b7280;
212 --color-border-disabled: #4b5563;
213 --color-border-focus: #d1d5db;
214 --color-border-focus-success: #22c55e;
215 --color-border-focus-danger: #ef4444;
216 --color-border-success: #15803d;
217 --color-border-danger: #991b1b;
218
219 /* --- shadow (Dark) --- */
220 --color-shadow-inner-strong: #030712;
221 --color-shadow-inner-strong-hover: #1f2937;
222 --color-shadow-inner-subtle: #111827;
223 }
224 }
225
226 body {
227 @apply flex min-h-screen flex-col bg-background-canvas text-foreground-default transition-colors duration-200;
228 font-size: 14px;
229 }
230
231 a {
232 @apply text-foreground-default no-underline hover:text-foreground-muted;
233 }
234}