rastrillo / fiesta Public

Clone
git clone https://amadan.net/rastrillo/fiesta

Plain git — no account needed to clone.

Download

Download this file

1/*! Fiesta 1.0.0 | MPL-2.0 | https://fiesta.rastrillo.org */
2
3:root {
4 color-scheme: light dark;
5
6 --rst-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
7
8 --rst-radius: 6px;
9 --rst-radius-sm: 4px;
10 --rst-radius-pill: 999px;
11
12 --rst-bg: light-dark(#fbfbfc, #0c0d0f);
13 --rst-surface: light-dark(#ffffff, #141518);
14 --rst-surface-2: light-dark(#f3f3f5, #18191d);
15 --rst-line: light-dark(#e6e6ea, #26282e);
16 --rst-line-strong: light-dark(#868691, #71737c);
17 --rst-header-rule: var(--rst-line);
18
19 --rst-text: light-dark(#18181b, #ededf0);
20 --rst-text-muted: light-dark(#52525c, #a1a1aa);
21 --rst-text-faint: light-dark(#6b6b75, #8c8c96);
22
23 --rst-accent: light-dark(#1f56d6, #7aa2ff);
24 --rst-accent-strong: light-dark(color-mix(in srgb, var(--rst-accent, #1f56d6) 80%, #000000), color-mix(in srgb, var(--rst-accent, #7aa2ff) 68.5%, #ffffff));
25 --rst-accent-soft: light-dark(#ecf1ff, #16234a);
26 --rst-on-accent: light-dark(#ffffff, #0c0d0f);
27
28 --rst-tone-neutral-fg: light-dark(#374151, #c3c9d1);
29 --rst-tone-neutral-bg: light-dark(#eef0f2, #262c34);
30 --rst-tone-positive-fg: light-dark(#166534, #6ee7a8);
31 --rst-tone-positive-bg: light-dark(#dcfce7, #10281c);
32 --rst-tone-warning-fg: light-dark(#854d0e, #f0c46a);
33 --rst-tone-warning-bg: light-dark(#fef3c7, #2c2110);
34 --rst-tone-negative-fg: light-dark(#b91c1c, #f79aa0);
35 --rst-tone-negative-bg: light-dark(#fee2e2, #331819);
36
37 --rst-shadow-pop: 0 2px 4px light-dark(rgba(16, 24, 40, 0.06), rgba(0, 0, 0, 0.35)), 0 8px 16px -4px light-dark(rgba(16, 24, 40, 0.1), rgba(0, 0, 0, 0.5));
38 --rst-shadow-knob: 0 1px 2px light-dark(rgba(16, 24, 40, 0.22), rgba(0, 0, 0, 0.5)), 0 0 0 0.5px light-dark(rgba(16, 24, 40, 0.08), rgba(0, 0, 0, 0.3));
39 --rst-shadow-knob-hover: 0 1.5px 3px light-dark(rgba(16, 24, 40, 0.26), rgba(0, 0, 0, 0.58)), 0 0 0 0.5px light-dark(rgba(16, 24, 40, 0.08), rgba(0, 0, 0, 0.3));
40 --rst-shadow-lift: 0 1px 2px light-dark(rgba(16, 24, 40, 0.08), rgba(0, 0, 0, 0.3));
41 --rst-overlay: light-dark(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.6));
42
43 --rst-accent-fill: light-dark(#2257df, #2f61e8);
44 --rst-accent-fill-hover: light-dark(#1d4dc8, #2956d0);
45 --rst-accent-fill-edge: light-dark(#153ca0, #1f43a6);
46 --rst-accent-fill-edge-hover: light-dark(#12358f, #1a3b95);
47 --rst-on-accent-fill: #ffffff;
48 --rst-danger-fill: light-dark(#c62f2f, #c43232);
49 --rst-danger-fill-hover: light-dark(#b12929, #af2c2c);
50 --rst-danger-fill-edge: light-dark(#8d1f1f, #8c2121);
51 --rst-danger-fill-edge-hover: light-dark(#7e1a1a, #7d1d1d);
52 --rst-on-danger-fill: #ffffff;
53 --rst-on-danger-fill-hover: #ffffff;
54 --rst-danger-hover-filter: none;
55
56 --rst-control-face: light-dark(#ffffff, #141518);
57 --rst-control-face-hover: light-dark(#f7f8fa, #1b1d22);
58 --rst-control-face-press: light-dark(#e6e9ee, #202329);
59 --rst-control-border: light-dark(#d0d4dc, #343843);
60 --rst-control-border-hover: light-dark(#8a8a95, #71737c);
61 --rst-control-text-hover: light-dark(#18181b, #ededf0);
62 --rst-ghost-edge: transparent;
63 --rst-ghost-face-hover: light-dark(#f3f3f5, #18191d);
64 --rst-ghost-edge-hover: transparent;
65 --rst-summary-face: light-dark(#ffffff, #141518);
66 --rst-summary-face-hover: light-dark(#f7f8fa, #1b1d22);
67 --rst-summary-edge: light-dark(#d0d4dc, #343843);
68 --rst-summary-edge-hover: light-dark(#8a8a95, #71737c);
69 --rst-summary-radius: var(--rst-radius-sm);
70
71 --rst-depth-hl: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.06));
72 --rst-depth-contact: light-dark(rgba(16, 24, 40, 0.1), rgba(0, 0, 0, 0.5));
73 --rst-depth-ambient: light-dark(rgba(16, 24, 40, 0.06), rgba(0, 0, 0, 0.35));
74 --rst-depth-face: 0.04;
75 --rst-press-drop: 1px;
76
77 --rst-knob: #ffffff;
78 --rst-knob-shade: light-dark(#f1f3f6, #d9dee8);
79 --rst-track-off: light-dark(#8a8a95, #71737c);
80 --rst-switch-w: 40px;
81 --rst-switch-h: 23px;
82 --rst-switch-knob: 19px;
83 --rst-switch-touch-w: 51px;
84 --rst-switch-touch-h: 31px;
85 --rst-switch-touch-knob: 27px;
86
87 --rst-tint-hover: light-dark(color-mix(in srgb, var(--rst-accent, #1f56d6) 4.5%, var(--rst-surface)), color-mix(in srgb, var(--rst-accent, #7aa2ff) 10%, var(--rst-bg)));
88 --rst-tint-press: light-dark(color-mix(in srgb, var(--rst-accent, #1f56d6) 8.5%, var(--rst-surface)), color-mix(in srgb, var(--rst-accent, #7aa2ff) 19%, #000000));
89 --rst-tint-tap: var(--rst-tint-press);
90 --rst-tint-card-hover: var(--rst-tint-hover);
91 --rst-tint-tile-hover: var(--rst-tint-hover);
92 --rst-tint-tile-press: var(--rst-tint-press);
93 --rst-tint-group-hover: var(--rst-tint-hover);
94 --rst-row-tint-hover: var(--rst-tint-hover);
95 --rst-row-tint-press: var(--rst-tint-press);
96 --rst-focus-edge: var(--rst-accent, light-dark(#1f56d6, #7aa2ff));
97 --rst-focus-halo: color-mix(in srgb, var(--rst-accent, light-dark(#1f56d6, #7aa2ff)) 22%, transparent);
98
99 --rst-sheen-fill: light-dark(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
100 --rst-sheen-plain: light-dark(color-mix(in srgb, var(--rst-accent-fill) 9%, transparent), rgba(255, 255, 255, 0.04));
101 --rst-light-rim: light-dark(color-mix(in srgb, var(--rst-accent, #1f56d6) 23%, var(--rst-line)), color-mix(in srgb, var(--rst-accent, #7aa2ff) 31%, #505050));
102 --rst-light-wash: light-dark(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.015));
103
104 --rst-press-wash: 0.08;
105 --rst-press-spot: 0.16;
106 --rst-press-wash-plain: 0.04;
107 --rst-press-spot-plain: 0.07;
108
109 --rst-title-size: 1.25rem;
110 --rst-title-weight: 600;
111 --rst-title-track: -0.012em;
112 --rst-heading-size: 0.8125rem;
113 --rst-label-case: none;
114 --rst-label-track: 0;
115 --rst-rail-bg: var(--rst-bg);
116 --rst-nav-current-bg: light-dark(#ffffff, #141518);
117 --rst-nav-current-fg: light-dark(#18181b, #ededf0);
118}
119
120@supports (color: oklch(from red l c h)) {
121 :root {
122 --rst-accent-soft: light-dark(oklch(from var(--rst-accent, #1f56d6) 0.958 min(calc(c * 0.0878), 0.018) h), oklch(from var(--rst-accent, #7aa2ff) 0.268 min(calc(c * 0.5039), 0.072) h));
123 --rst-accent-fill: light-dark(oklch(from var(--rst-accent, #1f56d6) calc(0.513 - 0.05 * max(0, cos((h - 170) * 1deg) - 0.087)) min(calc(c * 1.0244), 0.21) h), oklch(from var(--rst-accent, #7aa2ff) calc(0.543 - 0.1 * max(0, cos((h - 170) * 1deg) - 0.087)) min(calc(c * 1.5045), 0.215) h));
124 --rst-accent-fill-hover: light-dark(oklch(from var(--rst-accent, #1f56d6) calc(0.472 - 0.045 * max(0, cos((h - 170) * 1deg) - 0.087)) min(calc(c * 0.9463), 0.194) h), oklch(from var(--rst-accent, #7aa2ff) calc(0.5 - 0.05 * max(0, cos((h - 170) * 1deg) - 0.087)) min(calc(c * 1.3786), 0.197) h));
125 --rst-accent-fill-edge: light-dark(oklch(from var(--rst-accent, #1f56d6) 0.401 min(calc(c * 0.8049), 0.165) h), oklch(from var(--rst-accent, #7aa2ff) 0.422 min(calc(c * 1.1617), 0.166) h));
126 --rst-accent-fill-edge-hover: light-dark(oklch(from var(--rst-accent, #1f56d6) 0.37 min(calc(c * 0.7366), 0.151) h), oklch(from var(--rst-accent, #7aa2ff) 0.389 min(calc(c * 1.0847), 0.155) h));
127 }
128}
129
130:root[data-theme="light"] { color-scheme: light; }
131:root[data-theme="dark"] { color-scheme: dark; }
132
133:root[data-theme="dark"] { --rst-press-wash: 0.18; --rst-press-spot: 0.30; --rst-press-wash-plain: 0.18; --rst-press-spot-plain: 0.30; }
134@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rst-press-wash: 0.18; --rst-press-spot: 0.30; --rst-press-wash-plain: 0.18; --rst-press-spot-plain: 0.30; } }
135