sacred-solid 0.0.0-stage → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +134 -2
- package/dist/index.d.mts +1111 -0
- package/dist/index.mjs +9786 -0
- package/dist/rolldown-runtime-D8jQpDG7.mjs +12 -0
- package/dist/style.css +4716 -0
- package/dist/styles/global-fonts.css +398 -0
- package/dist/styles/global.css +541 -0
- package/dist/themes/acid.css +46 -0
- package/dist/themes/holo.css +45 -0
- package/dist/themes/redline.css +46 -0
- package/package.json +84 -4
|
@@ -0,0 +1,541 @@
|
|
|
1
|
+
@layer sacred.vendor, sacred.base, sacred.aug, sacred.components, sacred.themes;
|
|
2
|
+
@layer sacred.base {
|
|
3
|
+
/*
|
|
4
|
+
NOTE(jimmylee):
|
|
5
|
+
Color palette for Sacred Computer. The root source of truth for color is the
|
|
6
|
+
Simulacrum CLI palette in scripts/cli/colors.json — those are the true, terminal-
|
|
7
|
+
tested colors, the ones a real terminal actually renders. The --ansi-* primitives
|
|
8
|
+
below mirror that palette in CSS, so every value must be one a terminal can show:
|
|
9
|
+
Standard (SGR 30-37, 90-97), 256-color (SGR 38;5;n), the grayscale ramp (232-255),
|
|
10
|
+
or 24-bit true color (SGR 38;2;r;g;b). Do not add a color outside that spec.
|
|
11
|
+
|
|
12
|
+
The OKLCH tint themes further down are a WEB-ONLY behavior. A terminal cannot run
|
|
13
|
+
OKLCH math; it exists purely so the React surface can derive tinted variants while
|
|
14
|
+
staying inside the same perceptual band as the terminal-tested primitives. OKLCH is
|
|
15
|
+
a projection of the root palette, never a new source of color.
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
a,
|
|
19
|
+
abbr,
|
|
20
|
+
acronym,
|
|
21
|
+
address,
|
|
22
|
+
applet,
|
|
23
|
+
article,
|
|
24
|
+
aside,
|
|
25
|
+
audio,
|
|
26
|
+
b,
|
|
27
|
+
big,
|
|
28
|
+
blockquote,
|
|
29
|
+
body,
|
|
30
|
+
canvas,
|
|
31
|
+
caption,
|
|
32
|
+
center,
|
|
33
|
+
cite,
|
|
34
|
+
code,
|
|
35
|
+
dd,
|
|
36
|
+
del,
|
|
37
|
+
details,
|
|
38
|
+
dfn,
|
|
39
|
+
div,
|
|
40
|
+
dl,
|
|
41
|
+
dt,
|
|
42
|
+
embed,
|
|
43
|
+
em,
|
|
44
|
+
figure,
|
|
45
|
+
figcaption,
|
|
46
|
+
fieldset,
|
|
47
|
+
footer,
|
|
48
|
+
form,
|
|
49
|
+
h1,
|
|
50
|
+
h2,
|
|
51
|
+
h3,
|
|
52
|
+
h4,
|
|
53
|
+
h5,
|
|
54
|
+
h6,
|
|
55
|
+
header,
|
|
56
|
+
hgroup,
|
|
57
|
+
html,
|
|
58
|
+
i,
|
|
59
|
+
iframe,
|
|
60
|
+
img,
|
|
61
|
+
ins,
|
|
62
|
+
kbd,
|
|
63
|
+
label,
|
|
64
|
+
legend,
|
|
65
|
+
li,
|
|
66
|
+
mark,
|
|
67
|
+
menu,
|
|
68
|
+
nav,
|
|
69
|
+
object,
|
|
70
|
+
ol,
|
|
71
|
+
output,
|
|
72
|
+
p,
|
|
73
|
+
pre,
|
|
74
|
+
q,
|
|
75
|
+
ruby,
|
|
76
|
+
s,
|
|
77
|
+
samp,
|
|
78
|
+
section,
|
|
79
|
+
small,
|
|
80
|
+
span,
|
|
81
|
+
strike,
|
|
82
|
+
strong,
|
|
83
|
+
sub,
|
|
84
|
+
summary,
|
|
85
|
+
sup,
|
|
86
|
+
table,
|
|
87
|
+
tbody,
|
|
88
|
+
td,
|
|
89
|
+
tfoot,
|
|
90
|
+
th,
|
|
91
|
+
thead,
|
|
92
|
+
time,
|
|
93
|
+
tr,
|
|
94
|
+
tt,
|
|
95
|
+
u,
|
|
96
|
+
ul,
|
|
97
|
+
var,
|
|
98
|
+
video {
|
|
99
|
+
border: 0;
|
|
100
|
+
box-sizing: border-box;
|
|
101
|
+
margin: 0;
|
|
102
|
+
padding: 0;
|
|
103
|
+
vertical-align: baseline;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
a {
|
|
107
|
+
background: var(--theme-surface-subdued);
|
|
108
|
+
color: var(--theme-ink);
|
|
109
|
+
|
|
110
|
+
&:hover {
|
|
111
|
+
background: var(--theme-accent);
|
|
112
|
+
color: var(--theme-ink);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
&:focus {
|
|
116
|
+
background: var(--theme-accent);
|
|
117
|
+
color: var(--theme-ink);
|
|
118
|
+
outline: 0;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&:active {
|
|
122
|
+
background: var(--theme-accent);
|
|
123
|
+
color: var(--theme-ink);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
ul {
|
|
128
|
+
list-style-position: inside;
|
|
129
|
+
list-style-type: '▪';
|
|
130
|
+
text-indent: -1ch;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
ol {
|
|
134
|
+
list-style-type: '';
|
|
135
|
+
list-style-position: inside;
|
|
136
|
+
counter-reset: cupcake;
|
|
137
|
+
text-indent: -1ch;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
ul ul,
|
|
141
|
+
ul ol,
|
|
142
|
+
ol ul,
|
|
143
|
+
ol ol {
|
|
144
|
+
padding-left: 2ch;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
ol li {
|
|
148
|
+
padding-left: 1ch;
|
|
149
|
+
counter-increment: cupcake;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
ul li:before {
|
|
153
|
+
content: ' ';
|
|
154
|
+
display: inline-block;
|
|
155
|
+
width: 1ch;
|
|
156
|
+
height: 0;
|
|
157
|
+
visibility: hidden;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
ol li:before {
|
|
161
|
+
content: counters(cupcake, '.') '. ';
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
article,
|
|
165
|
+
aside,
|
|
166
|
+
details,
|
|
167
|
+
figcaption,
|
|
168
|
+
figure,
|
|
169
|
+
footer,
|
|
170
|
+
header,
|
|
171
|
+
hgroup,
|
|
172
|
+
menu,
|
|
173
|
+
nav,
|
|
174
|
+
section {
|
|
175
|
+
display: block;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
html,
|
|
179
|
+
body {
|
|
180
|
+
/* ------------------------------------------------------------------ */
|
|
181
|
+
/* Standard 16 Colors (SGR 38;5;0-15) */
|
|
182
|
+
/* ------------------------------------------------------------------ */
|
|
183
|
+
--ansi-0-black: #000000;
|
|
184
|
+
--ansi-1-maroon: #800000;
|
|
185
|
+
--ansi-2-green: #008000;
|
|
186
|
+
--ansi-3-olive: #808000;
|
|
187
|
+
--ansi-4-navy: #000080;
|
|
188
|
+
--ansi-5-purple: #800080;
|
|
189
|
+
--ansi-6-teal: #008080;
|
|
190
|
+
--ansi-7-silver: #c0c0c0;
|
|
191
|
+
--ansi-8-gray: #808080;
|
|
192
|
+
--ansi-9-red: #ff0000;
|
|
193
|
+
--ansi-10-lime: #00ff00;
|
|
194
|
+
--ansi-11-yellow: #ffff00;
|
|
195
|
+
--ansi-12-blue: #0000ff;
|
|
196
|
+
--ansi-13-fuchsia: #ff00ff;
|
|
197
|
+
--ansi-14-aqua: #00ffff;
|
|
198
|
+
--ansi-15-white: #ffffff;
|
|
199
|
+
|
|
200
|
+
/* ------------------------------------------------------------------ */
|
|
201
|
+
/* 216 Color Cube (SGR 38;5;16-231) */
|
|
202
|
+
/* Channels: 0x00, 0x5F, 0x87, 0xAF, 0xD7, 0xFF */
|
|
203
|
+
/* ------------------------------------------------------------------ */
|
|
204
|
+
--ansi-100-yellow4a: #878700;
|
|
205
|
+
--ansi-148-yellow3a: #afd700;
|
|
206
|
+
--ansi-232-gray-3: #080808;
|
|
207
|
+
--ansi-235-gray-15: #262626;
|
|
208
|
+
--ansi-237-gray-23: #3a3a3a;
|
|
209
|
+
--ansi-240-gray-35: #585858;
|
|
210
|
+
--ansi-242-gray-42: #6c6c6c;
|
|
211
|
+
--ansi-245-gray-54: #8a8a8a;
|
|
212
|
+
--ansi-248-gray-66: #a8a8a8;
|
|
213
|
+
--ansi-251-gray-78: #c6c6c6;
|
|
214
|
+
--ansi-254-gray-89: #e4e4e4;
|
|
215
|
+
--ansi-255-gray-93: #eeeeee;
|
|
216
|
+
|
|
217
|
+
/* ------------------------------------------------------------------ */
|
|
218
|
+
/* Bright Colors (SGR 90-97) — overlap with ansi-8..15 in some terms */
|
|
219
|
+
/* but the SGR 90-97 renditions use these distinct hex values. */
|
|
220
|
+
/* ------------------------------------------------------------------ */
|
|
221
|
+
--ansi-bright-green: #55ff55;
|
|
222
|
+
|
|
223
|
+
/* ------------------------------------------------------------------ */
|
|
224
|
+
/* 24-bit True Color (SGR 38;2;r;g;b) — outside the 256 palette */
|
|
225
|
+
/* ------------------------------------------------------------------ */
|
|
226
|
+
--ansi-true-brand: #e4f221;
|
|
227
|
+
|
|
228
|
+
/* ------------------------------------------------------------------ */
|
|
229
|
+
/* Semantic Color Aliases */
|
|
230
|
+
/* All values reference the ANSI palette above. */
|
|
231
|
+
/* ------------------------------------------------------------------ */
|
|
232
|
+
--color-black: var(--ansi-0-black);
|
|
233
|
+
--color-white: var(--ansi-15-white);
|
|
234
|
+
--color-green: var(--ansi-2-green);
|
|
235
|
+
--color-lime: var(--ansi-10-lime);
|
|
236
|
+
--color-bright-green: var(--ansi-bright-green);
|
|
237
|
+
--color-brand: var(--ansi-true-brand);
|
|
238
|
+
|
|
239
|
+
--color-gray-93: var(--ansi-255-gray-93);
|
|
240
|
+
--color-gray-89: var(--ansi-254-gray-89);
|
|
241
|
+
--color-gray-78: var(--ansi-251-gray-78);
|
|
242
|
+
--color-gray-66: var(--ansi-248-gray-66);
|
|
243
|
+
--color-gray-54: var(--ansi-245-gray-54);
|
|
244
|
+
--color-gray-42: var(--ansi-242-gray-42);
|
|
245
|
+
--color-gray-35: var(--ansi-240-gray-35);
|
|
246
|
+
--color-gray-23: var(--ansi-237-gray-23);
|
|
247
|
+
--color-gray-15: var(--ansi-235-gray-15);
|
|
248
|
+
--color-gray-3: var(--ansi-232-gray-3);
|
|
249
|
+
|
|
250
|
+
/* ------------------------------------------------------------------ */
|
|
251
|
+
/* Web-only Alpha Variants (no ANSI equivalent — CSS rendering only) */
|
|
252
|
+
/* Used for translucent overlays and subdued borders. */
|
|
253
|
+
/* ------------------------------------------------------------------ */
|
|
254
|
+
--color-black-alpha-40: rgba(0, 0, 0, 0.4);
|
|
255
|
+
--color-white-alpha-40: rgba(255, 255, 255, 0.4);
|
|
256
|
+
--color-gray-89-border-alpha: rgba(228, 228, 228, 0.6);
|
|
257
|
+
--color-gray-23-border-alpha: rgba(58, 58, 58, 0.3);
|
|
258
|
+
--color-brand-alpha-50: rgba(228, 242, 33, 0.5);
|
|
259
|
+
|
|
260
|
+
--font-family-mono: 'FiraCode-Regular', Consolas, monaco, monospace;
|
|
261
|
+
|
|
262
|
+
--theme-line-height-base: 1.25;
|
|
263
|
+
--font-size: 16px;
|
|
264
|
+
|
|
265
|
+
--z-index-page: 1;
|
|
266
|
+
--z-index-page-select: 3;
|
|
267
|
+
--z-index-page-tooltips: 4;
|
|
268
|
+
--z-index-page-popover: 5;
|
|
269
|
+
--z-index-page-dropdown-menus: 6;
|
|
270
|
+
--z-index-page-modals: 10;
|
|
271
|
+
|
|
272
|
+
--theme-line-width-strong: 2px;
|
|
273
|
+
--theme-line-width: 1px;
|
|
274
|
+
--theme-line-width-double: 6px;
|
|
275
|
+
|
|
276
|
+
--theme-shadow-window-geometry: 1ch calc(var(--theme-line-height-base) * 1rem) 0 0;
|
|
277
|
+
--theme-shadow-float-geometry: 1ch 1ch 0 0;
|
|
278
|
+
--theme-shadow-tooltip-geometry: 0.5ch 0.5ch 0 0;
|
|
279
|
+
--theme-shadow-ring-geometry: 0 0 0 1ch;
|
|
280
|
+
|
|
281
|
+
background: var(--theme-surface-page);
|
|
282
|
+
color: var(--theme-ink);
|
|
283
|
+
font-family: var(--font-family-mono);
|
|
284
|
+
line-height: calc(var(--theme-line-height-base) * 1rem);
|
|
285
|
+
|
|
286
|
+
font-size: var(--font-size);
|
|
287
|
+
font-optical-sizing: auto;
|
|
288
|
+
text-rendering: geometricPrecision;
|
|
289
|
+
font-weight: 400;
|
|
290
|
+
font-variant-numeric: tabular-nums lining-nums;
|
|
291
|
+
|
|
292
|
+
&::-webkit-scrollbar {
|
|
293
|
+
background: transparent;
|
|
294
|
+
height: calc(var(--theme-line-height-base) * 1rem);
|
|
295
|
+
width: 1ch;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
&::-webkit-scrollbar-track {
|
|
299
|
+
background: var(--theme-surface-page);
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
&::-webkit-scrollbar-thumb {
|
|
303
|
+
background: var(--theme-surface-chip);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
&::-webkit-scrollbar-thumb:hover {
|
|
307
|
+
background: var(--theme-surface-chip);
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
body.theme-light {
|
|
312
|
+
--theme-ink: var(--color-black);
|
|
313
|
+
--theme-ink-inverse: var(--color-white);
|
|
314
|
+
--theme-ink-subdued: var(--color-black-alpha-40);
|
|
315
|
+
|
|
316
|
+
--theme-surface-page: var(--color-white);
|
|
317
|
+
--theme-surface-input: var(--color-gray-89);
|
|
318
|
+
--theme-surface-panel: var(--color-gray-89);
|
|
319
|
+
--theme-surface-panel-footer: var(--color-gray-66);
|
|
320
|
+
--theme-surface-window: var(--color-gray-89);
|
|
321
|
+
--theme-surface-float: var(--color-gray-89);
|
|
322
|
+
--theme-surface-chip: var(--color-gray-89);
|
|
323
|
+
--theme-surface-inverse: var(--color-black);
|
|
324
|
+
--theme-surface-subdued: var(--color-gray-89-border-alpha);
|
|
325
|
+
--theme-surface-sunken: var(--color-gray-66);
|
|
326
|
+
|
|
327
|
+
--theme-line-strong: var(--color-black);
|
|
328
|
+
--theme-line: var(--color-gray-89);
|
|
329
|
+
--theme-line-subdued: var(--color-gray-89-border-alpha);
|
|
330
|
+
|
|
331
|
+
--theme-accent: var(--color-bright-green);
|
|
332
|
+
--theme-accent-subdued: var(--color-brand-alpha-50);
|
|
333
|
+
|
|
334
|
+
--theme-control: var(--color-black);
|
|
335
|
+
--theme-control-ink: var(--color-white);
|
|
336
|
+
--theme-control-foreground: var(--color-gray-78);
|
|
337
|
+
--theme-control-background: var(--color-gray-89);
|
|
338
|
+
|
|
339
|
+
--theme-shadow-window-color: var(--color-gray-66);
|
|
340
|
+
--theme-shadow-float-color: var(--color-gray-89-border-alpha);
|
|
341
|
+
--theme-shadow-tooltip-color: var(--color-gray-89-border-alpha);
|
|
342
|
+
--theme-shadow-ring-color: var(--color-gray-89-border-alpha);
|
|
343
|
+
/*
|
|
344
|
+
NOTE(jimmylee):
|
|
345
|
+
Window-specific tones: surface-window sits one step darker than surface-page so the
|
|
346
|
+
window reads as a "lifted" panel, and shadow-window-color sits one step darker still so
|
|
347
|
+
the drop shadow is unambiguously darker than the window body. The CLI mirror lives in
|
|
348
|
+
scripts/cli/colors.json (windowBg / shadow).
|
|
349
|
+
*/
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
body.theme-dark {
|
|
353
|
+
--theme-ink: var(--color-white);
|
|
354
|
+
--theme-ink-inverse: var(--color-black);
|
|
355
|
+
--theme-ink-subdued: var(--color-black-alpha-40);
|
|
356
|
+
|
|
357
|
+
--theme-surface-page: var(--color-black);
|
|
358
|
+
--theme-surface-input: var(--color-gray-23);
|
|
359
|
+
--theme-surface-panel: var(--color-gray-23);
|
|
360
|
+
--theme-surface-panel-footer: var(--color-gray-35);
|
|
361
|
+
--theme-surface-window: var(--color-gray-23);
|
|
362
|
+
--theme-surface-float: var(--color-gray-23);
|
|
363
|
+
--theme-surface-chip: var(--color-gray-23);
|
|
364
|
+
--theme-surface-inverse: var(--color-white);
|
|
365
|
+
--theme-surface-subdued: var(--color-gray-23-border-alpha);
|
|
366
|
+
--theme-surface-sunken: var(--color-gray-15);
|
|
367
|
+
|
|
368
|
+
--theme-line-strong: var(--color-white);
|
|
369
|
+
--theme-line: var(--color-gray-23);
|
|
370
|
+
--theme-line-subdued: var(--color-gray-23-border-alpha);
|
|
371
|
+
|
|
372
|
+
--theme-accent: oklch(from var(--ansi-13-fuchsia) 0.55 c h);
|
|
373
|
+
--theme-accent-subdued: oklch(from var(--ansi-13-fuchsia) 0.55 c h / 0.5);
|
|
374
|
+
|
|
375
|
+
--theme-control: var(--color-white);
|
|
376
|
+
--theme-control-ink: var(--color-black);
|
|
377
|
+
--theme-control-foreground: var(--color-gray-15);
|
|
378
|
+
--theme-control-background: var(--color-gray-23);
|
|
379
|
+
|
|
380
|
+
--theme-shadow-window-color: var(--color-gray-15);
|
|
381
|
+
--theme-shadow-float-color: var(--color-gray-23-border-alpha);
|
|
382
|
+
--theme-shadow-tooltip-color: var(--color-gray-23-border-alpha);
|
|
383
|
+
--theme-shadow-ring-color: var(--color-gray-23-border-alpha);
|
|
384
|
+
/*
|
|
385
|
+
NOTE(jimmylee):
|
|
386
|
+
Window body is gray-23 (#3a3a3a) so it lifts off the gray-3 (#080808) page
|
|
387
|
+
background, and the shadow is gray-15 (#262626), a hair lighter than the page
|
|
388
|
+
but visibly darker than the window body, preserving the "shadow darker than the
|
|
389
|
+
body" contract while staying inside the ANSI gray ramp.
|
|
390
|
+
*/
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
/*
|
|
394
|
+
NOTE(jimmylee):
|
|
395
|
+
OKLCH tint themes — web-only. These have no terminal equivalent (Simulacrum renders
|
|
396
|
+
the fixed colors.json palette, never derived tints). They are recalibrated against
|
|
397
|
+
the --ansi-* base so the saturation and lightness ramps fall in the same perceptual
|
|
398
|
+
range as the ANSI gray scale (#eeeeee → #262626) and the brand color (#e4f221). Each
|
|
399
|
+
tint sets only --tint, and the body.theme-light.tint-* / body.theme-dark.tint-*
|
|
400
|
+
selectors below derive every --theme-* token from that tint via OKLCH math.
|
|
401
|
+
*/
|
|
402
|
+
|
|
403
|
+
body.tint-green {
|
|
404
|
+
--tint: #39ff44;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
body.tint-blue {
|
|
408
|
+
--tint: #0047ff;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
body.tint-red {
|
|
412
|
+
--tint: #ff0000;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
body.tint-yellow {
|
|
416
|
+
--tint: var(--ansi-true-brand);
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
body.tint-purple {
|
|
420
|
+
--tint: #8000ff;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
body.tint-orange {
|
|
424
|
+
--tint: #ffac1c;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
body.tint-pink {
|
|
428
|
+
--tint: #ff00ff;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
body.theme-light.tint-green,
|
|
432
|
+
body.theme-light.tint-blue,
|
|
433
|
+
body.theme-light.tint-red,
|
|
434
|
+
body.theme-light.tint-yellow,
|
|
435
|
+
body.theme-light.tint-purple,
|
|
436
|
+
body.theme-light.tint-orange,
|
|
437
|
+
body.theme-light.tint-pink {
|
|
438
|
+
/*
|
|
439
|
+
NOTE(jimmylee):
|
|
440
|
+
Light tint ramp is anchored to the ANSI light grays:
|
|
441
|
+
--theme-surface-page ~ ansi-255-gray-93 (#eeeeee)
|
|
442
|
+
--theme-surface-panel ~ ansi-254-gray-89 (#e4e4e4)
|
|
443
|
+
--theme-surface-input ~ ansi-255-gray-93 (#eeeeee)
|
|
444
|
+
--theme-line ~ ansi-251-gray-78 (#c6c6c6)
|
|
445
|
+
--theme-ink ~ ansi-232-gray-3 (#080808)
|
|
446
|
+
Each token uses oklch(from var(--tint) L C H) so it tints toward the source
|
|
447
|
+
color while staying within the ANSI lightness band. Window body matches
|
|
448
|
+
surface-panel so the panel sits one step darker than the page, and
|
|
449
|
+
shadow-window-color drops to L=0.70, a third step down, so the drop shadow stays
|
|
450
|
+
visibly darker than the window body across every tint.
|
|
451
|
+
*/
|
|
452
|
+
--theme-ink: oklch(from var(--tint) 0.18 calc(c * 0.4) h);
|
|
453
|
+
--theme-ink-inverse: oklch(from var(--tint) 0.97 calc(c * 0.1) h);
|
|
454
|
+
--theme-ink-subdued: var(--color-black-alpha-40);
|
|
455
|
+
|
|
456
|
+
--theme-surface-page: oklch(from var(--tint) 0.97 calc(c * 0.1) h);
|
|
457
|
+
--theme-surface-input: oklch(from var(--tint) 0.97 calc(c * 0.1) h);
|
|
458
|
+
--theme-surface-panel: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
|
|
459
|
+
--theme-surface-panel-footer: oklch(from var(--tint) 0.86 calc(c * 0.22) h);
|
|
460
|
+
--theme-surface-window: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
|
|
461
|
+
--theme-surface-float: oklch(from var(--tint) 0.84 calc(c * 0.28) h);
|
|
462
|
+
--theme-surface-chip: oklch(from var(--tint) 0.84 calc(c * 0.28) h);
|
|
463
|
+
--theme-surface-inverse: oklch(from var(--tint) 0.18 calc(c * 0.4) h);
|
|
464
|
+
--theme-surface-subdued: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
|
|
465
|
+
--theme-surface-sunken: oklch(from var(--tint) 0.7 calc(c * 0.28) h);
|
|
466
|
+
|
|
467
|
+
--theme-line-strong: oklch(from var(--tint) 0.18 calc(c * 0.4) h);
|
|
468
|
+
--theme-line: oklch(from var(--tint) 0.84 calc(c * 0.28) h);
|
|
469
|
+
--theme-line-subdued: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
|
|
470
|
+
|
|
471
|
+
--theme-accent: oklch(from var(--tint) 0.62 c h);
|
|
472
|
+
--theme-accent-subdued: oklch(from var(--tint) 0.62 c h / 0.5);
|
|
473
|
+
|
|
474
|
+
--theme-control: oklch(from var(--tint) 0.18 calc(c * 0.4) h);
|
|
475
|
+
--theme-control-ink: oklch(from var(--tint) 0.97 calc(c * 0.1) h);
|
|
476
|
+
--theme-control-foreground: oklch(from var(--tint) 0.86 calc(c * 0.22) h);
|
|
477
|
+
--theme-control-background: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
|
|
478
|
+
|
|
479
|
+
--theme-shadow-window-color: oklch(from var(--tint) 0.7 calc(c * 0.28) h);
|
|
480
|
+
--theme-shadow-float-color: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
|
|
481
|
+
--theme-shadow-tooltip-color: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
|
|
482
|
+
--theme-shadow-ring-color: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
body.theme-dark.tint-green,
|
|
486
|
+
body.theme-dark.tint-blue,
|
|
487
|
+
body.theme-dark.tint-red,
|
|
488
|
+
body.theme-dark.tint-yellow,
|
|
489
|
+
body.theme-dark.tint-purple,
|
|
490
|
+
body.theme-dark.tint-orange,
|
|
491
|
+
body.theme-dark.tint-pink {
|
|
492
|
+
/*
|
|
493
|
+
NOTE(jimmylee):
|
|
494
|
+
Dark tint ramp is anchored to the ANSI dark grays:
|
|
495
|
+
--theme-surface-page ~ ansi-232-gray-3 (#080808)
|
|
496
|
+
--theme-surface-panel ~ ansi-235-gray-15 (#262626)
|
|
497
|
+
--theme-surface-input ~ ansi-237-gray-23 (#3a3a3a)
|
|
498
|
+
--theme-line ~ ansi-237-gray-23 (#3a3a3a)
|
|
499
|
+
--theme-ink ~ ansi-15-white (#ffffff)
|
|
500
|
+
Window body matches surface-panel (L=0.24) so it sits one step lighter than the
|
|
501
|
+
L=0.14 page, and shadow-window-color drops to L=0.18, a hair lighter than the page
|
|
502
|
+
but darker than the window body, preserving the "shadow darker than the body"
|
|
503
|
+
contract under every dark tint.
|
|
504
|
+
*/
|
|
505
|
+
--theme-ink: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
|
|
506
|
+
--theme-ink-inverse: oklch(from var(--tint) 0.14 calc(c * 0.18) h);
|
|
507
|
+
--theme-ink-subdued: var(--color-black-alpha-40);
|
|
508
|
+
|
|
509
|
+
--theme-surface-page: oklch(from var(--tint) 0.14 calc(c * 0.18) h);
|
|
510
|
+
--theme-surface-input: oklch(from var(--tint) 0.28 calc(c * 0.2) h);
|
|
511
|
+
--theme-surface-panel: oklch(from var(--tint) 0.24 calc(c * 0.22) h);
|
|
512
|
+
--theme-surface-panel-footer: oklch(from var(--tint) 0.3 calc(c * 0.24) h);
|
|
513
|
+
--theme-surface-window: oklch(from var(--tint) 0.24 calc(c * 0.22) h);
|
|
514
|
+
--theme-surface-float: oklch(from var(--tint) 0.4 calc(c * 0.28) h);
|
|
515
|
+
--theme-surface-chip: oklch(from var(--tint) 0.4 calc(c * 0.28) h);
|
|
516
|
+
--theme-surface-inverse: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
|
|
517
|
+
--theme-surface-subdued: oklch(from var(--tint) 0.4 calc(c * 0.28) h / 0.6);
|
|
518
|
+
--theme-surface-sunken: oklch(from var(--tint) 0.18 calc(c * 0.2) h);
|
|
519
|
+
|
|
520
|
+
--theme-line-strong: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
|
|
521
|
+
--theme-line: oklch(from var(--tint) 0.4 calc(c * 0.28) h);
|
|
522
|
+
--theme-line-subdued: oklch(from var(--tint) 0.4 calc(c * 0.28) h / 0.6);
|
|
523
|
+
|
|
524
|
+
--theme-accent: oklch(from var(--tint) 0.72 c h);
|
|
525
|
+
--theme-accent-subdued: oklch(from var(--tint) 0.72 c h / 0.5);
|
|
526
|
+
|
|
527
|
+
--theme-control: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
|
|
528
|
+
--theme-control-ink: oklch(from var(--tint) 0.14 calc(c * 0.18) h);
|
|
529
|
+
--theme-control-foreground: oklch(from var(--tint) 0.3 calc(c * 0.22) h);
|
|
530
|
+
--theme-control-background: oklch(from var(--tint) 0.24 calc(c * 0.22) h);
|
|
531
|
+
|
|
532
|
+
--theme-shadow-window-color: oklch(from var(--tint) 0.18 calc(c * 0.2) h);
|
|
533
|
+
--theme-shadow-float-color: oklch(from var(--tint) 0.4 calc(c * 0.28) h / 0.6);
|
|
534
|
+
--theme-shadow-tooltip-color: oklch(from var(--tint) 0.4 calc(c * 0.28) h / 0.6);
|
|
535
|
+
--theme-shadow-ring-color: oklch(from var(--tint) 0.4 calc(c * 0.28) h / 0.6);
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
#__next {
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
@layer sacred.vendor, sacred.base, sacred.aug, sacred.components, sacred.themes;
|
|
2
|
+
@layer sacred.themes {
|
|
3
|
+
body.theme-acid {
|
|
4
|
+
--font-family-mono: 'Rajdhani', 'FiraCode-Regular', Consolas, monaco, monospace;
|
|
5
|
+
|
|
6
|
+
--theme-ink: #dfff5e;
|
|
7
|
+
--theme-ink-inverse: #0b0a10;
|
|
8
|
+
--theme-ink-subdued: rgb(223 255 94 / 0.5);
|
|
9
|
+
|
|
10
|
+
--theme-surface-page: #120f16;
|
|
11
|
+
--theme-surface-input: #17141d;
|
|
12
|
+
--theme-surface-panel: #120f16;
|
|
13
|
+
--theme-surface-panel-footer: #1c1923;
|
|
14
|
+
--theme-surface-window: #120f16;
|
|
15
|
+
--theme-surface-float: rgb(18 15 22 / 0.85);
|
|
16
|
+
--theme-surface-chip: #292d39;
|
|
17
|
+
--theme-surface-inverse: #dfff5e;
|
|
18
|
+
--theme-surface-subdued: rgb(223 255 94 / 0.12);
|
|
19
|
+
--theme-surface-sunken: #0b0a10;
|
|
20
|
+
|
|
21
|
+
--theme-line-strong: #dfff5e;
|
|
22
|
+
--theme-line: rgb(223 255 94 / 0.55);
|
|
23
|
+
--theme-line-subdued: rgb(223 255 94 / 0.2);
|
|
24
|
+
|
|
25
|
+
--theme-accent: #3a4157;
|
|
26
|
+
--theme-accent-subdued: rgb(58 65 87 / 0.5);
|
|
27
|
+
|
|
28
|
+
--theme-control: #dfff5e;
|
|
29
|
+
--theme-control-ink: #0b0a10;
|
|
30
|
+
--theme-control-foreground: #5edde3;
|
|
31
|
+
--theme-control-background: rgb(94 221 227 / 0.12);
|
|
32
|
+
|
|
33
|
+
--theme-shadow-window-color: rgb(223 255 94 / 0.25);
|
|
34
|
+
--theme-shadow-float-color: rgb(223 255 94 / 0.3);
|
|
35
|
+
--theme-shadow-tooltip-color: rgb(223 255 94 / 0.3);
|
|
36
|
+
--theme-shadow-ring-color: rgb(223 255 94 / 0.3);
|
|
37
|
+
|
|
38
|
+
--theme-line-width-double: 3px;
|
|
39
|
+
|
|
40
|
+
--theme-shadow-window-geometry: 0 0 24px 0;
|
|
41
|
+
--theme-shadow-float-geometry: 0 0 14px 0;
|
|
42
|
+
--theme-shadow-tooltip-geometry: 0 0 8px 0;
|
|
43
|
+
--theme-shadow-ring-geometry: 0 0 16px 2px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
@layer sacred.vendor, sacred.base, sacred.aug, sacred.components, sacred.themes;
|
|
2
|
+
@layer sacred.themes {
|
|
3
|
+
body.theme-holo {
|
|
4
|
+
--theme-ink: oklch(0.95 0.03 205 / 0.94);
|
|
5
|
+
--theme-ink-inverse: oklch(0.14 0.03 220);
|
|
6
|
+
--theme-ink-subdued: oklch(0.8 0.05 205 / 0.55);
|
|
7
|
+
|
|
8
|
+
--theme-surface-page: oklch(0.15 0.04 230 / 0.28);
|
|
9
|
+
--theme-surface-input: oklch(0.18 0.05 225 / 0.35);
|
|
10
|
+
--theme-surface-panel: oklch(0.2 0.05 225 / 0.6);
|
|
11
|
+
--theme-surface-panel-footer: oklch(0.26 0.06 215 / 0.7);
|
|
12
|
+
--theme-surface-window: oklch(0.2 0.05 225 / 0.38);
|
|
13
|
+
--theme-surface-float: oklch(0.18 0.05 225 / 0.78);
|
|
14
|
+
--theme-surface-chip: oklch(0.3 0.07 210 / 0.5);
|
|
15
|
+
--theme-surface-inverse: oklch(0.86 0.13 200 / 0.92);
|
|
16
|
+
--theme-surface-subdued: oklch(0.8 0.1 205 / 0.12);
|
|
17
|
+
--theme-surface-sunken: oklch(0.1 0.03 230 / 0.5);
|
|
18
|
+
|
|
19
|
+
--theme-line-strong: oklch(0.85 0.14 200 / 0.7);
|
|
20
|
+
--theme-line: oklch(0.82 0.12 205 / 0.35);
|
|
21
|
+
--theme-line-subdued: oklch(0.82 0.12 205 / 0.16);
|
|
22
|
+
|
|
23
|
+
--theme-accent: oklch(0.55 0.12 205 / 0.9);
|
|
24
|
+
--theme-accent-subdued: oklch(0.55 0.12 205 / 0.4);
|
|
25
|
+
|
|
26
|
+
--theme-control: oklch(0.85 0.12 200 / 0.9);
|
|
27
|
+
--theme-control-ink: oklch(0.14 0.03 220);
|
|
28
|
+
--theme-control-foreground: oklch(0.45 0.08 210 / 0.6);
|
|
29
|
+
--theme-control-background: oklch(0.28 0.06 215 / 0.4);
|
|
30
|
+
|
|
31
|
+
--theme-shadow-window-color: oklch(0.8 0.12 205 / 0.25);
|
|
32
|
+
--theme-shadow-float-color: oklch(0.82 0.13 205 / 0.35);
|
|
33
|
+
--theme-shadow-tooltip-color: oklch(0.82 0.13 205 / 0.3);
|
|
34
|
+
--theme-shadow-ring-color: oklch(0.8 0.13 205 / 0.3);
|
|
35
|
+
|
|
36
|
+
--theme-line-width-strong: 1px;
|
|
37
|
+
--theme-line-width-double: 3px;
|
|
38
|
+
|
|
39
|
+
--theme-shadow-window-geometry: 0 0 24px 0;
|
|
40
|
+
--theme-shadow-float-geometry: 0 0 16px 0;
|
|
41
|
+
--theme-shadow-tooltip-geometry: 0 0 8px 0;
|
|
42
|
+
--theme-shadow-ring-geometry: 0 0 18px 2px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
@layer sacred.vendor, sacred.base, sacred.aug, sacred.components, sacred.themes;
|
|
2
|
+
@layer sacred.themes {
|
|
3
|
+
body.theme-redline {
|
|
4
|
+
--font-family-mono: 'Rajdhani', 'FiraCode-Regular', Consolas, monaco, monospace;
|
|
5
|
+
|
|
6
|
+
--theme-ink: #ff5a53;
|
|
7
|
+
--theme-ink-inverse: #0b0e13;
|
|
8
|
+
--theme-ink-subdued: rgb(255 90 83 / 0.5);
|
|
9
|
+
|
|
10
|
+
--theme-surface-page: #0b0e13;
|
|
11
|
+
--theme-surface-input: #170d12;
|
|
12
|
+
--theme-surface-panel: #1a0d12;
|
|
13
|
+
--theme-surface-panel-footer: #240f15;
|
|
14
|
+
--theme-surface-window: #14090e;
|
|
15
|
+
--theme-surface-float: rgb(18 10 16 / 0.85);
|
|
16
|
+
--theme-surface-chip: #3a1218;
|
|
17
|
+
--theme-surface-inverse: #ff5a53;
|
|
18
|
+
--theme-surface-subdued: rgb(255 90 83 / 0.12);
|
|
19
|
+
--theme-surface-sunken: #070a0e;
|
|
20
|
+
|
|
21
|
+
--theme-line-strong: #ff5a53;
|
|
22
|
+
--theme-line: rgb(255 90 83 / 0.55);
|
|
23
|
+
--theme-line-subdued: rgb(255 90 83 / 0.22);
|
|
24
|
+
|
|
25
|
+
--theme-accent: #7b2526;
|
|
26
|
+
--theme-accent-subdued: rgb(123 37 38 / 0.5);
|
|
27
|
+
|
|
28
|
+
--theme-control: #ff5a53;
|
|
29
|
+
--theme-control-ink: #0b0e13;
|
|
30
|
+
--theme-control-foreground: #4de1e0;
|
|
31
|
+
--theme-control-background: rgb(77 225 224 / 0.12);
|
|
32
|
+
|
|
33
|
+
--theme-shadow-window-color: rgb(255 90 83 / 0.25);
|
|
34
|
+
--theme-shadow-float-color: rgb(255 90 83 / 0.3);
|
|
35
|
+
--theme-shadow-tooltip-color: rgb(255 90 83 / 0.3);
|
|
36
|
+
--theme-shadow-ring-color: rgb(255 90 83 / 0.3);
|
|
37
|
+
|
|
38
|
+
--theme-line-width-double: 3px;
|
|
39
|
+
|
|
40
|
+
--theme-shadow-window-geometry: 0 0 24px 0;
|
|
41
|
+
--theme-shadow-float-geometry: 0 0 14px 0;
|
|
42
|
+
--theme-shadow-tooltip-geometry: 0 0 8px 0;
|
|
43
|
+
--theme-shadow-ring-geometry: 0 0 16px 2px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
}
|