picocrank 1.23.1 → 1.25.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.
Files changed (38) hide show
  1. package/AGENTS.md +2 -0
  2. package/docs/filter-query-v1.md +180 -0
  3. package/logo.svg +7 -7
  4. package/package.json +7 -5
  5. package/public/themes/README.md +19 -2
  6. package/public/themes/index.json +1 -5
  7. package/styles/dark-theme.css +16 -1
  8. package/supplemental-themes/README.md +9 -0
  9. package/supplemental-themes/catppuccin-latte-frappe/theme.css +276 -0
  10. package/supplemental-themes/dracula-alucard/theme.css +258 -0
  11. package/supplemental-themes/gruvbox-dark-light/theme.css +264 -0
  12. package/supplemental-themes/index.json +17 -0
  13. package/{public/themes → supplemental-themes}/waffles/theme.css +99 -0
  14. package/vite.config.js +91 -0
  15. package/vue/components/FormField.vue +69 -1
  16. package/vue/components/Header.vue +3 -3
  17. package/vue/components/Login.vue +1 -3
  18. package/vue/components/Section.vue +45 -14
  19. package/vue/components/Sidebar.vue +2 -1
  20. package/vue/components/SidebarNavLink.vue +6 -0
  21. package/vue/components/Table.vue +1113 -73
  22. package/vue/components/TableColumnFilterPopover.vue +263 -44
  23. package/vue/components/TableColumnOptionsPopover.vue +1116 -0
  24. package/vue/components/ThemeSwitcher.vue +119 -0
  25. package/vue/components/TopBar.vue +2 -2
  26. package/vue/composables/tableColumnPresets.js +296 -0
  27. package/vue/composables/tableFilterQuery.js +202 -0
  28. package/vue/composables/tableFilters.js +167 -3
  29. package/vue/composables/useCustomTheme.js +167 -24
  30. package/vue/data/examplePeople.js +2 -6
  31. package/vue/examples/App.vue +1 -1
  32. package/vue/examples/FormExample.vue +40 -6
  33. package/vue/examples/LoginExample.vue +1 -3
  34. package/vue/examples/TableExample.vue +329 -11
  35. package/vue/examples/TableRemoteExample.vue +112 -4
  36. package/vue/examples/ThemePreview.vue +17 -31
  37. package/public/themes/catppuccin/theme.css +0 -195
  38. package/public/themes/dracula/theme.css +0 -181
package/supplemental-themes/dracula-alucard/theme.css ADDED
@@ -0,0 +1,258 @@
1
+ /*
2
+ * Dracula / Alucard supplemental theme for PicoCrank / Femtocrank.
3
+ * Palettes: https://draculatheme.com/spec (Dracula Classic + Alucard Classic)
4
+ *
5
+ * Dark mode (header toggle) uses Dracula; light mode uses Alucard.
6
+ *
7
+ * Asset URLs must be absolute, e.g.:
8
+ * background-image: url('/supplemental-themes/dracula-alucard/background.png');
9
+ */
10
+
11
+ html[data-theme="dark"] {
12
+ color-scheme: dark;
13
+
14
+ --dt-background: #282a36;
15
+ --dt-surface: #21222c;
16
+ --dt-overlay: #44475a;
17
+ --dt-border: #44475a;
18
+ --dt-foreground: #f8f8f2;
19
+ --dt-muted: #6272a4;
20
+ --dt-selection: #44475a;
21
+ --dt-cyan: #8be9fd;
22
+ --dt-green: #50fa7b;
23
+ --dt-orange: #ffb86c;
24
+ --dt-pink: #ff79c6;
25
+ --dt-purple: #bd93f9;
26
+ --dt-red: #ff5555;
27
+ --dt-yellow: #f1fa8c;
28
+ --dt-accent: var(--dt-pink);
29
+ --dt-shadow: rgba(33, 34, 44, 0.85);
30
+ --dt-shadow-strong: rgba(33, 34, 44, 0.9);
31
+ --dt-good-fg: var(--dt-surface);
32
+ --dt-bad-fg: var(--dt-foreground);
33
+ --dt-warning-fg: var(--dt-surface);
34
+
35
+ --text-color: var(--dt-foreground);
36
+ --border-color: var(--dt-border);
37
+ --standout-bg-color: var(--dt-surface);
38
+ --hover-background-color: var(--dt-selection);
39
+ --hover-text-color: var(--dt-foreground);
40
+ --header-hover-background-color: var(--dt-selection);
41
+ --header-hover-text-color: var(--dt-foreground);
42
+ --header-text-color: var(--dt-foreground);
43
+ --disabled-background-color: var(--dt-overlay);
44
+ --disabled-text-color: var(--dt-muted);
45
+
46
+ --karma-good: var(--dt-green);
47
+ --karma-bad: var(--dt-red);
48
+ --karma-warning: var(--dt-yellow);
49
+ --karma-severe: var(--dt-orange);
50
+ --karma-important: var(--dt-purple);
51
+ --karma-note: var(--dt-cyan);
52
+ --karma-info: var(--dt-overlay);
53
+ --karma-old: var(--dt-muted);
54
+
55
+ --karma-good-fg: var(--dt-green);
56
+ --karma-bad-fg: var(--dt-red);
57
+ --karma-warning-fg: var(--dt-yellow);
58
+ --karma-severe-fg: var(--dt-orange);
59
+ --karma-important-fg: var(--dt-purple);
60
+ --karma-note-fg: var(--dt-cyan);
61
+ --karma-info-fg: var(--dt-muted);
62
+ --karma-old-fg: var(--dt-muted);
63
+ }
64
+
65
+ html[data-theme="light"] {
66
+ color-scheme: light;
67
+
68
+ --dt-background: #fffbeb;
69
+ --dt-surface: #ece9df;
70
+ --dt-overlay: #dedccf;
71
+ --dt-border: #ceccc0;
72
+ --dt-foreground: #1f1f1f;
73
+ --dt-muted: #6c664b;
74
+ --dt-selection: #cfcfde;
75
+ --dt-cyan: #036a96;
76
+ --dt-green: #14710a;
77
+ --dt-orange: #a34d14;
78
+ --dt-pink: #a3144d;
79
+ --dt-purple: #644ac9;
80
+ --dt-red: #cb3a2a;
81
+ --dt-yellow: #846e15;
82
+ --dt-accent: var(--dt-pink);
83
+ --dt-shadow: rgba(31, 31, 31, 0.12);
84
+ --dt-shadow-strong: rgba(31, 31, 31, 0.16);
85
+ --dt-good-fg: var(--dt-background);
86
+ --dt-bad-fg: var(--dt-background);
87
+ --dt-warning-fg: var(--dt-background);
88
+
89
+ --text-color: var(--dt-foreground);
90
+ --border-color: var(--dt-border);
91
+ --standout-bg-color: var(--dt-surface);
92
+ --hover-background-color: var(--dt-selection);
93
+ --hover-text-color: var(--dt-foreground);
94
+ --header-hover-background-color: var(--dt-overlay);
95
+ --header-hover-text-color: var(--dt-foreground);
96
+ --header-text-color: var(--dt-foreground);
97
+ --disabled-background-color: var(--dt-overlay);
98
+ --disabled-text-color: var(--dt-muted);
99
+
100
+ --karma-good: var(--dt-green);
101
+ --karma-bad: var(--dt-red);
102
+ --karma-warning: var(--dt-yellow);
103
+ --karma-severe: var(--dt-orange);
104
+ --karma-important: var(--dt-purple);
105
+ --karma-note: var(--dt-cyan);
106
+ --karma-info: var(--dt-overlay);
107
+ --karma-old: var(--dt-muted);
108
+
109
+ --karma-good-fg: var(--dt-green);
110
+ --karma-bad-fg: var(--dt-red);
111
+ --karma-warning-fg: var(--dt-yellow);
112
+ --karma-severe-fg: var(--dt-orange);
113
+ --karma-important-fg: var(--dt-purple);
114
+ --karma-note-fg: var(--dt-cyan);
115
+ --karma-info-fg: var(--dt-muted);
116
+ --karma-old-fg: var(--dt-muted);
117
+ }
118
+
119
+ body {
120
+ background-color: var(--dt-background);
121
+ color: var(--dt-foreground);
122
+ }
123
+
124
+ header {
125
+ background-color: var(--dt-surface);
126
+ border-bottom: 1px solid var(--dt-border);
127
+ box-shadow: none;
128
+ color: var(--dt-foreground);
129
+ }
130
+
131
+ header a,
132
+ header a:visited,
133
+ header button,
134
+ header .button,
135
+ header h1,
136
+ header .topbar-link,
137
+ header .topbar-link:visited {
138
+ color: var(--header-text-color, var(--dt-foreground));
139
+ }
140
+
141
+ #sidebar-toggler-button,
142
+ #sidebar-toggler-button.neutral,
143
+ header .theme-toggle,
144
+ header .theme-toggle.neutral,
145
+ header .search-trigger,
146
+ header .search-trigger.neutral,
147
+ header .user-info {
148
+ background-color: transparent;
149
+ border: 0;
150
+ color: var(--header-text-color, var(--dt-foreground));
151
+ }
152
+
153
+ #sidebar-toggler-button:hover,
154
+ header .theme-toggle:hover,
155
+ header .search-trigger:hover,
156
+ header .user-info:hover {
157
+ background-color: var(--header-hover-background-color);
158
+ color: var(--header-hover-text-color);
159
+ }
160
+
161
+ aside,
162
+ #sidebar {
163
+ background-color: var(--dt-surface);
164
+ color: var(--dt-foreground);
165
+ border-color: var(--dt-border);
166
+ box-shadow: 0.15em 0 0.6em var(--dt-shadow);
167
+ }
168
+
169
+ aside a,
170
+ aside a:visited {
171
+ color: var(--dt-foreground);
172
+ }
173
+
174
+ aside a:hover,
175
+ aside a:focus-visible,
176
+ aside :is(ul, menu) li a:hover,
177
+ aside :is(ul, menu) li a:focus-visible,
178
+ aside .nav-section-header:hover,
179
+ aside .nav-section-header:focus-visible {
180
+ background-color: var(--dt-selection);
181
+ color: var(--dt-foreground);
182
+ }
183
+
184
+ section {
185
+ background-color: var(--dt-surface);
186
+ color: var(--dt-foreground);
187
+ box-shadow: 0 0 0.5em var(--dt-shadow-strong);
188
+ border-color: var(--dt-border);
189
+ }
190
+
191
+ section .section-header,
192
+ section .section-subheader {
193
+ background-color: var(--dt-surface);
194
+ border-bottom-color: var(--dt-border);
195
+ color: var(--dt-foreground);
196
+ }
197
+
198
+ button,
199
+ .button {
200
+ background-color: var(--dt-overlay);
201
+ border: 1px solid var(--dt-muted);
202
+ color: var(--dt-foreground);
203
+ }
204
+
205
+ button:hover,
206
+ .button:hover {
207
+ background-color: var(--dt-selection);
208
+ color: var(--dt-foreground);
209
+ }
210
+
211
+ button.good,
212
+ .button.good {
213
+ background-color: var(--dt-green);
214
+ border-color: var(--dt-green);
215
+ color: var(--dt-good-fg);
216
+ }
217
+
218
+ button.bad,
219
+ .button.bad {
220
+ background-color: var(--dt-red);
221
+ border-color: var(--dt-red);
222
+ color: var(--dt-bad-fg);
223
+ }
224
+
225
+ button.warning,
226
+ .button.warning {
227
+ background-color: var(--dt-yellow);
228
+ border-color: var(--dt-yellow);
229
+ color: var(--dt-warning-fg);
230
+ }
231
+
232
+ button.neutral,
233
+ .button.neutral {
234
+ background-color: var(--dt-selection);
235
+ border-color: var(--dt-muted);
236
+ color: var(--dt-foreground);
237
+ }
238
+
239
+ input,
240
+ select,
241
+ textarea {
242
+ background-color: var(--dt-background);
243
+ border: 1px solid var(--dt-border);
244
+ color: var(--dt-foreground);
245
+ }
246
+
247
+ a {
248
+ color: var(--dt-accent);
249
+ }
250
+
251
+ footer {
252
+ color: var(--dt-muted);
253
+ border-top-color: var(--dt-border);
254
+ }
255
+
256
+ .subtle {
257
+ color: var(--dt-muted);
258
+ }
package/supplemental-themes/gruvbox-dark-light/theme.css ADDED
@@ -0,0 +1,264 @@
1
+ /*
2
+ * Gruvbox (Dark+Light) supplemental theme for PicoCrank / Femtocrank.
3
+ * Palette: https://github.com/morhetz/gruvbox (medium contrast)
4
+ *
5
+ * Dark mode (header toggle) uses Gruvbox Dark; light mode uses Gruvbox Light.
6
+ *
7
+ * Asset URLs must be absolute, e.g.:
8
+ * background-image: url('/supplemental-themes/gruvbox-dark-light/background.png');
9
+ */
10
+
11
+ html[data-theme="dark"] {
12
+ color-scheme: dark;
13
+
14
+ --gb-bg0: #282828;
15
+ --gb-bg0-hard: #1d2021;
16
+ --gb-bg1: #3c3836;
17
+ --gb-bg2: #504945;
18
+ --gb-bg3: #665c54;
19
+ --gb-bg4: #7c6f64;
20
+ --gb-fg0: #fbf1c7;
21
+ --gb-fg1: #ebdbb2;
22
+ --gb-fg2: #d5c4a1;
23
+ --gb-fg3: #bdae93;
24
+ --gb-fg4: #a89984;
25
+ --gb-gray: #928374;
26
+ --gb-red: #fb4934;
27
+ --gb-green: #b8bb26;
28
+ --gb-yellow: #fabd2f;
29
+ --gb-blue: #83a598;
30
+ --gb-purple: #d3869b;
31
+ --gb-aqua: #8ec07c;
32
+ --gb-orange: #fe8019;
33
+ --gb-accent: var(--gb-blue);
34
+ --gb-shadow: rgba(29, 32, 33, 0.85);
35
+ --gb-shadow-strong: rgba(29, 32, 33, 0.9);
36
+ --gb-good-fg: var(--gb-bg0-hard);
37
+
38
+ --text-color: var(--gb-fg0);
39
+ --border-color: var(--gb-bg3);
40
+ --standout-bg-color: var(--gb-bg1);
41
+ --hover-background-color: var(--gb-bg2);
42
+ --hover-text-color: var(--gb-fg0);
43
+ --header-hover-background-color: var(--gb-bg2);
44
+ --header-hover-text-color: var(--gb-fg0);
45
+ --header-text-color: var(--gb-fg0);
46
+ --disabled-background-color: var(--gb-bg2);
47
+ --disabled-text-color: var(--gb-gray);
48
+
49
+ --karma-good: var(--gb-green);
50
+ --karma-bad: var(--gb-red);
51
+ --karma-warning: var(--gb-yellow);
52
+ --karma-severe: var(--gb-orange);
53
+ --karma-important: var(--gb-purple);
54
+ --karma-note: var(--gb-aqua);
55
+ --karma-info: var(--gb-bg2);
56
+ --karma-old: var(--gb-gray);
57
+
58
+ --karma-good-fg: var(--gb-green);
59
+ --karma-bad-fg: var(--gb-red);
60
+ --karma-warning-fg: var(--gb-yellow);
61
+ --karma-severe-fg: var(--gb-orange);
62
+ --karma-important-fg: var(--gb-purple);
63
+ --karma-note-fg: var(--gb-aqua);
64
+ --karma-info-fg: var(--gb-fg3);
65
+ --karma-old-fg: var(--gb-fg4);
66
+ }
67
+
68
+ html[data-theme="light"] {
69
+ color-scheme: light;
70
+
71
+ --gb-bg0: #fbf1c7;
72
+ --gb-bg0-hard: #f9f5d7;
73
+ --gb-bg1: #ebdbb2;
74
+ --gb-bg2: #d5c4a1;
75
+ --gb-bg3: #bdae93;
76
+ --gb-bg4: #a89984;
77
+ --gb-fg0: #282828;
78
+ --gb-fg1: #3c3836;
79
+ --gb-fg2: #504945;
80
+ --gb-fg3: #665c54;
81
+ --gb-fg4: #7c6f64;
82
+ --gb-gray: #928374;
83
+ --gb-red: #9d0006;
84
+ --gb-green: #79740e;
85
+ --gb-yellow: #b57614;
86
+ --gb-blue: #076678;
87
+ --gb-purple: #8f3f71;
88
+ --gb-aqua: #427b58;
89
+ --gb-orange: #af3a03;
90
+ --gb-accent: var(--gb-blue);
91
+ --gb-shadow: rgba(40, 40, 40, 0.12);
92
+ --gb-shadow-strong: rgba(40, 40, 40, 0.16);
93
+ --gb-good-fg: var(--gb-bg0);
94
+
95
+ --text-color: var(--gb-fg0);
96
+ --border-color: var(--gb-bg3);
97
+ --standout-bg-color: var(--gb-bg1);
98
+ --hover-background-color: var(--gb-bg2);
99
+ --hover-text-color: var(--gb-fg0);
100
+ --header-hover-background-color: var(--gb-bg2);
101
+ --header-hover-text-color: var(--gb-fg0);
102
+ --header-text-color: var(--gb-fg0);
103
+ --disabled-background-color: var(--gb-bg2);
104
+ --disabled-text-color: var(--gb-gray);
105
+
106
+ --karma-good: var(--gb-green);
107
+ --karma-bad: var(--gb-red);
108
+ --karma-warning: var(--gb-yellow);
109
+ --karma-severe: var(--gb-orange);
110
+ --karma-important: var(--gb-purple);
111
+ --karma-note: var(--gb-aqua);
112
+ --karma-info: var(--gb-bg2);
113
+ --karma-old: var(--gb-gray);
114
+
115
+ --karma-good-fg: var(--gb-green);
116
+ --karma-bad-fg: var(--gb-red);
117
+ --karma-warning-fg: var(--gb-yellow);
118
+ --karma-severe-fg: var(--gb-orange);
119
+ --karma-important-fg: var(--gb-purple);
120
+ --karma-note-fg: var(--gb-aqua);
121
+ --karma-info-fg: var(--gb-fg3);
122
+ --karma-old-fg: var(--gb-fg4);
123
+ }
124
+
125
+ body {
126
+ background-color: var(--gb-bg0);
127
+ color: var(--gb-fg0);
128
+ }
129
+
130
+ header {
131
+ background-color: var(--gb-bg0-hard);
132
+ border-bottom: 1px solid var(--gb-bg2);
133
+ box-shadow: none;
134
+ color: var(--gb-fg0);
135
+ }
136
+
137
+ header a,
138
+ header a:visited,
139
+ header button,
140
+ header .button,
141
+ header h1,
142
+ header .topbar-link,
143
+ header .topbar-link:visited {
144
+ color: var(--header-text-color, var(--gb-fg0));
145
+ }
146
+
147
+ #sidebar-toggler-button,
148
+ #sidebar-toggler-button.neutral,
149
+ header .theme-toggle,
150
+ header .theme-toggle.neutral,
151
+ header .search-trigger,
152
+ header .search-trigger.neutral,
153
+ header .user-info {
154
+ background-color: transparent;
155
+ border: 0;
156
+ color: var(--header-text-color, var(--gb-fg0));
157
+ }
158
+
159
+ #sidebar-toggler-button:hover,
160
+ header .theme-toggle:hover,
161
+ header .search-trigger:hover,
162
+ header .user-info:hover {
163
+ background-color: var(--header-hover-background-color);
164
+ color: var(--header-hover-text-color);
165
+ }
166
+
167
+ aside,
168
+ #sidebar {
169
+ background-color: var(--gb-bg1);
170
+ color: var(--gb-fg0);
171
+ border-color: var(--gb-bg2);
172
+ box-shadow: 0.15em 0 0.6em var(--gb-shadow);
173
+ }
174
+
175
+ aside a,
176
+ aside a:visited {
177
+ color: var(--gb-fg0);
178
+ }
179
+
180
+ aside a:hover,
181
+ aside a:focus-visible,
182
+ aside :is(ul, menu) li a:hover,
183
+ aside :is(ul, menu) li a:focus-visible,
184
+ aside .nav-section-header:hover,
185
+ aside .nav-section-header:focus-visible {
186
+ background-color: var(--gb-bg2);
187
+ color: var(--gb-fg0);
188
+ }
189
+
190
+ section {
191
+ background-color: var(--gb-bg1);
192
+ color: var(--gb-fg0);
193
+ box-shadow: 0 0 0.5em var(--gb-shadow-strong);
194
+ border-color: var(--gb-bg2);
195
+ }
196
+
197
+ section .section-header,
198
+ section .section-subheader {
199
+ background-color: var(--gb-bg1);
200
+ border-bottom-color: var(--gb-bg2);
201
+ color: var(--gb-fg0);
202
+ }
203
+
204
+ button,
205
+ .button {
206
+ background-color: var(--gb-bg2);
207
+ border: 1px solid var(--gb-bg3);
208
+ color: var(--gb-fg0);
209
+ }
210
+
211
+ button:hover,
212
+ .button:hover {
213
+ background-color: var(--gb-bg3);
214
+ color: var(--gb-fg0);
215
+ }
216
+
217
+ button.good,
218
+ .button.good {
219
+ background-color: var(--gb-green);
220
+ border-color: var(--gb-green);
221
+ color: var(--gb-good-fg);
222
+ }
223
+
224
+ button.bad,
225
+ .button.bad {
226
+ background-color: var(--gb-red);
227
+ border-color: var(--gb-red);
228
+ color: var(--gb-bg0-hard);
229
+ }
230
+
231
+ button.warning,
232
+ .button.warning {
233
+ background-color: var(--gb-yellow);
234
+ border-color: var(--gb-yellow);
235
+ color: var(--gb-bg0-hard);
236
+ }
237
+
238
+ button.neutral,
239
+ .button.neutral {
240
+ background-color: var(--gb-bg2);
241
+ border-color: var(--gb-bg3);
242
+ color: var(--gb-fg0);
243
+ }
244
+
245
+ input,
246
+ select,
247
+ textarea {
248
+ background-color: var(--gb-bg0);
249
+ border: 1px solid var(--gb-bg3);
250
+ color: var(--gb-fg0);
251
+ }
252
+
253
+ a {
254
+ color: var(--gb-accent);
255
+ }
256
+
257
+ footer {
258
+ color: var(--gb-fg3);
259
+ border-top-color: var(--gb-bg2);
260
+ }
261
+
262
+ .subtle {
263
+ color: var(--gb-fg3);
264
+ }
package/supplemental-themes/index.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "themes": [
3
+ {
4
+ "id": "catppuccin-latte-frappe",
5
+ "label": "Catppuccin Latte / Frappé"
6
+ },
7
+ {
8
+ "id": "dracula-alucard",
9
+ "label": "Dracula / Alucard"
10
+ },
11
+ {
12
+ "id": "gruvbox-dark-light",
13
+ "label": "Gruvbox (Dark+Light)"
14
+ },
15
+ "waffles"
16
+ ]
17
+ }
package/{public/themes → supplemental-themes}/waffles/theme.css RENAMED
@@ -9,6 +9,8 @@
9
9
  html {
10
10
  --waffle-cream: #fff8e7;
11
11
  --waffle-batter: #f5e6c8;
12
+ --waffle-section: #edd9b0;
13
+ --waffle-sidebar: #e5cf9a;
12
14
  --waffle-crust: #c4863b;
13
15
  --waffle-syrup: #8b4513;
14
16
  --waffle-butter: #ffd966;
@@ -107,6 +109,103 @@ section .section-header {
107
109
  color: var(--waffle-syrup);
108
110
  }
109
111
 
112
+ html[data-theme="dark"] {
113
+ --waffle-foreground: #3a1f08;
114
+ --waffle-foreground-muted: #5c3a18;
115
+ --text-color: var(--waffle-foreground);
116
+ --hover-background-color: #f0d9a8;
117
+ --hover-text-color: var(--waffle-foreground);
118
+ --border-color: #c9a66a;
119
+ --standout-bg-color: var(--waffle-batter);
120
+ --disabled-text-color: #7a6548;
121
+ }
122
+
123
+ html[data-theme="dark"] body {
124
+ color: var(--waffle-foreground);
125
+ }
126
+
127
+ html[data-theme="dark"] section {
128
+ background-color: var(--waffle-batter);
129
+ color: var(--waffle-foreground);
130
+ }
131
+
132
+ html[data-theme="dark"] section .section-header,
133
+ html[data-theme="dark"] section .section-subheader {
134
+ background-color: var(--waffle-section);
135
+ border-bottom: 2px solid var(--waffle-crust);
136
+ color: var(--waffle-foreground);
137
+ }
138
+
139
+ html[data-theme="dark"] aside,
140
+ html[data-theme="dark"] #sidebar {
141
+ background-color: var(--waffle-sidebar);
142
+ color: var(--waffle-foreground);
143
+ border-color: var(--waffle-crust);
144
+ box-shadow: 0.15em 0 0.6em rgba(139, 69, 19, 0.22);
145
+ }
146
+
147
+ html[data-theme="dark"] aside a,
148
+ html[data-theme="dark"] aside a:visited,
149
+ html[data-theme="dark"] aside .nav-section-header {
150
+ color: var(--waffle-foreground) !important;
151
+ }
152
+
153
+ html[data-theme="dark"] aside a:hover,
154
+ html[data-theme="dark"] aside a:focus-visible,
155
+ html[data-theme="dark"] aside :is(ul, menu) li a:hover,
156
+ html[data-theme="dark"] aside :is(ul, menu) li a:focus-visible,
157
+ html[data-theme="dark"] aside .nav-section-header:hover,
158
+ html[data-theme="dark"] aside .nav-section-header:focus-visible {
159
+ background-color: var(--hover-background-color);
160
+ color: var(--hover-text-color) !important;
161
+ }
162
+
163
+ html[data-theme="dark"] a {
164
+ color: #6b3410;
165
+ }
166
+
167
+ html[data-theme="dark"] a:visited {
168
+ color: #5c2d0e;
169
+ }
170
+
171
+ html[data-theme="dark"] button,
172
+ html[data-theme="dark"] .button {
173
+ color: var(--waffle-foreground);
174
+ }
175
+
176
+ html[data-theme="dark"] input,
177
+ html[data-theme="dark"] select,
178
+ html[data-theme="dark"] textarea {
179
+ background-color: var(--waffle-cream);
180
+ border-color: var(--border-color);
181
+ color: var(--waffle-foreground);
182
+ }
183
+
184
+ html[data-theme="dark"] table,
185
+ html[data-theme="dark"] th,
186
+ html[data-theme="dark"] td {
187
+ color: var(--waffle-foreground);
188
+ }
189
+
190
+ html[data-theme="dark"] table.row-hover tr:hover td {
191
+ background-color: var(--hover-background-color);
192
+ color: var(--waffle-foreground);
193
+ }
194
+
195
+ html[data-theme="dark"] pre {
196
+ background-color: var(--waffle-batter);
197
+ border-color: var(--border-color);
198
+ color: var(--waffle-foreground);
199
+ }
200
+
201
+ html[data-theme="dark"] footer {
202
+ color: var(--waffle-foreground-muted);
203
+ }
204
+
205
+ html[data-theme="dark"] .subtle {
206
+ color: var(--waffle-foreground-muted);
207
+ }
208
+
110
209
  button,
111
210
  .button {
112
211
  border: 1px solid var(--waffle-crust);