picocrank 1.25.0 → 1.25.1

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 (20) hide show
  1. package/package.json +2 -2
  2. package/public/themes/README.md +15 -0
  3. package/styles/dark-theme.css +42 -201
  4. package/styles/picocrank-extensions.css +15 -0
  5. package/styles.css +1 -0
  6. package/supplemental-themes/catppuccin-latte-frappe/theme.css +82 -147
  7. package/supplemental-themes/dracula-alucard/theme.css +82 -147
  8. package/supplemental-themes/gruvbox-dark-light/theme.css +82 -147
  9. package/supplemental-themes/waffles/theme.css +67 -143
  10. package/vue/components/Header.vue +3 -3
  11. package/vue/components/Sidebar.vue +4 -10
  12. package/vue/components/SidebarNavLink.vue +6 -15
  13. package/vue/components/Table.vue +4 -4
  14. package/vue/components/Tabs.vue +4 -25
  15. package/vue/components/ThemeSwitcher.vue +44 -5
  16. package/vue/components/TopBar.vue +2 -2
  17. package/vue/examples/App.vue +13 -0
  18. package/vue/examples/ExampleHeaderThemeSwitcher.vue +78 -0
  19. package/vue/examples/PageStructure.vue +17 -0
  20. package/vue/examples/ThemePreview.vue +41 -20
package/supplemental-themes/dracula-alucard/theme.css CHANGED
@@ -26,23 +26,61 @@ html[data-theme="dark"] {
26
26
  --dt-red: #ff5555;
27
27
  --dt-yellow: #f1fa8c;
28
28
  --dt-accent: var(--dt-pink);
29
- --dt-shadow: rgba(33, 34, 44, 0.85);
30
29
  --dt-shadow-strong: rgba(33, 34, 44, 0.9);
31
30
  --dt-good-fg: var(--dt-surface);
32
31
  --dt-bad-fg: var(--dt-foreground);
33
32
  --dt-warning-fg: var(--dt-surface);
34
33
 
34
+ --body-bg-color: var(--dt-background);
35
+ --surface-bg-color: var(--dt-surface);
36
+ --standout-bg-color: var(--dt-surface);
37
+ --section-header-bg-color: var(--dt-surface);
38
+ --shadow-color: var(--dt-shadow-strong);
39
+
35
40
  --text-color: var(--dt-foreground);
41
+ --muted-text-color: var(--dt-muted);
42
+ --annotation-key-color: var(--dt-muted);
43
+ --link-color: var(--dt-accent);
36
44
  --border-color: var(--dt-border);
37
- --standout-bg-color: var(--dt-surface);
45
+
38
46
  --hover-background-color: var(--dt-selection);
39
47
  --hover-text-color: var(--dt-foreground);
48
+
49
+ --header-bg-color: var(--dt-surface);
50
+ --header-fg-color: var(--dt-foreground);
51
+ --header-border-color: var(--dt-border);
52
+ --header-shadow: none;
40
53
  --header-hover-background-color: var(--dt-selection);
41
54
  --header-hover-text-color: var(--dt-foreground);
42
- --header-text-color: var(--dt-foreground);
55
+ --header-button-hover-bg-color: var(--dt-selection);
56
+
57
+ --sidebar-bg-color: var(--dt-surface);
58
+ --sidebar-link-color: var(--dt-foreground);
59
+ --sidebar-hover-bg-color: var(--dt-selection);
60
+ --sidebar-border-color: var(--dt-border);
61
+
62
+ --input-bg-color: var(--dt-background);
63
+ --input-fg-color: var(--dt-foreground);
64
+ --control-option-bg-color: var(--dt-overlay);
65
+ --control-hover-bg-color: var(--dt-selection);
66
+ --menu-hover-bg-color: var(--dt-selection);
67
+
68
+ --table-row-hover-bg: var(--dt-selection);
69
+ --table-row-hover-fg: var(--dt-foreground);
70
+ --table-uneditable-bg: var(--dt-overlay);
71
+ --footer-chip-bg-color: var(--dt-overlay);
72
+
43
73
  --disabled-background-color: var(--dt-overlay);
44
74
  --disabled-text-color: var(--dt-muted);
45
75
 
76
+ --button-good-bg: var(--dt-green);
77
+ --button-good-hover-bg: var(--dt-green);
78
+ --button-bad-bg: var(--dt-red);
79
+ --button-bad-hover-bg: var(--dt-red);
80
+ --button-warning-bg: var(--dt-yellow);
81
+ --button-warning-hover-bg: var(--dt-yellow);
82
+ --button-on-accent-fg: var(--dt-good-fg);
83
+
46
84
  --karma-good: var(--dt-green);
47
85
  --karma-bad: var(--dt-red);
48
86
  --karma-warning: var(--dt-yellow);
@@ -80,23 +118,61 @@ html[data-theme="light"] {
80
118
  --dt-red: #cb3a2a;
81
119
  --dt-yellow: #846e15;
82
120
  --dt-accent: var(--dt-pink);
83
- --dt-shadow: rgba(31, 31, 31, 0.12);
84
121
  --dt-shadow-strong: rgba(31, 31, 31, 0.16);
85
122
  --dt-good-fg: var(--dt-background);
86
123
  --dt-bad-fg: var(--dt-background);
87
124
  --dt-warning-fg: var(--dt-background);
88
125
 
126
+ --body-bg-color: var(--dt-background);
127
+ --surface-bg-color: var(--dt-surface);
128
+ --standout-bg-color: var(--dt-surface);
129
+ --section-header-bg-color: var(--dt-surface);
130
+ --shadow-color: var(--dt-shadow-strong);
131
+
89
132
  --text-color: var(--dt-foreground);
133
+ --muted-text-color: var(--dt-muted);
134
+ --annotation-key-color: var(--dt-muted);
135
+ --link-color: var(--dt-accent);
90
136
  --border-color: var(--dt-border);
91
- --standout-bg-color: var(--dt-surface);
137
+
92
138
  --hover-background-color: var(--dt-selection);
93
139
  --hover-text-color: var(--dt-foreground);
140
+
141
+ --header-bg-color: var(--dt-surface);
142
+ --header-fg-color: var(--dt-foreground);
143
+ --header-border-color: var(--dt-border);
144
+ --header-shadow: none;
94
145
  --header-hover-background-color: var(--dt-overlay);
95
146
  --header-hover-text-color: var(--dt-foreground);
96
- --header-text-color: var(--dt-foreground);
147
+ --header-button-hover-bg-color: var(--dt-overlay);
148
+
149
+ --sidebar-bg-color: var(--dt-surface);
150
+ --sidebar-link-color: var(--dt-foreground);
151
+ --sidebar-hover-bg-color: var(--dt-selection);
152
+ --sidebar-border-color: var(--dt-border);
153
+
154
+ --input-bg-color: var(--dt-background);
155
+ --input-fg-color: var(--dt-foreground);
156
+ --control-option-bg-color: var(--dt-overlay);
157
+ --control-hover-bg-color: var(--dt-selection);
158
+ --menu-hover-bg-color: var(--dt-selection);
159
+
160
+ --table-row-hover-bg: var(--dt-selection);
161
+ --table-row-hover-fg: var(--dt-foreground);
162
+ --table-uneditable-bg: var(--dt-overlay);
163
+ --footer-chip-bg-color: var(--dt-overlay);
164
+
97
165
  --disabled-background-color: var(--dt-overlay);
98
166
  --disabled-text-color: var(--dt-muted);
99
167
 
168
+ --button-good-bg: var(--dt-green);
169
+ --button-good-hover-bg: var(--dt-green);
170
+ --button-bad-bg: var(--dt-red);
171
+ --button-bad-hover-bg: var(--dt-red);
172
+ --button-warning-bg: var(--dt-yellow);
173
+ --button-warning-hover-bg: var(--dt-yellow);
174
+ --button-on-accent-fg: var(--dt-good-fg);
175
+
100
176
  --karma-good: var(--dt-green);
101
177
  --karma-bad: var(--dt-red);
102
178
  --karma-warning: var(--dt-yellow);
@@ -115,144 +191,3 @@ html[data-theme="light"] {
115
191
  --karma-info-fg: var(--dt-muted);
116
192
  --karma-old-fg: var(--dt-muted);
117
193
  }
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 CHANGED
@@ -31,21 +31,59 @@ html[data-theme="dark"] {
31
31
  --gb-aqua: #8ec07c;
32
32
  --gb-orange: #fe8019;
33
33
  --gb-accent: var(--gb-blue);
34
- --gb-shadow: rgba(29, 32, 33, 0.85);
35
34
  --gb-shadow-strong: rgba(29, 32, 33, 0.9);
36
35
  --gb-good-fg: var(--gb-bg0-hard);
37
36
 
37
+ --body-bg-color: var(--gb-bg0);
38
+ --surface-bg-color: var(--gb-bg1);
39
+ --standout-bg-color: var(--gb-bg1);
40
+ --section-header-bg-color: var(--gb-bg1);
41
+ --shadow-color: var(--gb-shadow-strong);
42
+
38
43
  --text-color: var(--gb-fg0);
44
+ --muted-text-color: var(--gb-fg3);
45
+ --annotation-key-color: var(--gb-fg3);
46
+ --link-color: var(--gb-accent);
39
47
  --border-color: var(--gb-bg3);
40
- --standout-bg-color: var(--gb-bg1);
48
+
41
49
  --hover-background-color: var(--gb-bg2);
42
50
  --hover-text-color: var(--gb-fg0);
51
+
52
+ --header-bg-color: var(--gb-bg0-hard);
53
+ --header-fg-color: var(--gb-fg0);
54
+ --header-border-color: var(--gb-bg2);
55
+ --header-shadow: none;
43
56
  --header-hover-background-color: var(--gb-bg2);
44
57
  --header-hover-text-color: var(--gb-fg0);
45
- --header-text-color: var(--gb-fg0);
58
+ --header-button-hover-bg-color: var(--gb-bg2);
59
+
60
+ --sidebar-bg-color: var(--gb-bg1);
61
+ --sidebar-link-color: var(--gb-fg0);
62
+ --sidebar-hover-bg-color: var(--gb-bg2);
63
+ --sidebar-border-color: var(--gb-bg2);
64
+
65
+ --input-bg-color: var(--gb-bg0);
66
+ --input-fg-color: var(--gb-fg0);
67
+ --control-option-bg-color: var(--gb-bg2);
68
+ --control-hover-bg-color: var(--gb-bg2);
69
+ --menu-hover-bg-color: var(--gb-bg2);
70
+
71
+ --table-row-hover-bg: var(--gb-bg2);
72
+ --table-row-hover-fg: var(--gb-fg0);
73
+ --table-uneditable-bg: var(--gb-bg2);
74
+ --footer-chip-bg-color: var(--gb-bg2);
75
+
46
76
  --disabled-background-color: var(--gb-bg2);
47
77
  --disabled-text-color: var(--gb-gray);
48
78
 
79
+ --button-good-bg: var(--gb-green);
80
+ --button-good-hover-bg: var(--gb-green);
81
+ --button-bad-bg: var(--gb-red);
82
+ --button-bad-hover-bg: var(--gb-red);
83
+ --button-warning-bg: var(--gb-yellow);
84
+ --button-warning-hover-bg: var(--gb-yellow);
85
+ --button-on-accent-fg: var(--gb-good-fg);
86
+
49
87
  --karma-good: var(--gb-green);
50
88
  --karma-bad: var(--gb-red);
51
89
  --karma-warning: var(--gb-yellow);
@@ -88,21 +126,59 @@ html[data-theme="light"] {
88
126
  --gb-aqua: #427b58;
89
127
  --gb-orange: #af3a03;
90
128
  --gb-accent: var(--gb-blue);
91
- --gb-shadow: rgba(40, 40, 40, 0.12);
92
129
  --gb-shadow-strong: rgba(40, 40, 40, 0.16);
93
130
  --gb-good-fg: var(--gb-bg0);
94
131
 
132
+ --body-bg-color: var(--gb-bg0);
133
+ --surface-bg-color: var(--gb-bg1);
134
+ --standout-bg-color: var(--gb-bg1);
135
+ --section-header-bg-color: var(--gb-bg1);
136
+ --shadow-color: var(--gb-shadow-strong);
137
+
95
138
  --text-color: var(--gb-fg0);
139
+ --muted-text-color: var(--gb-fg3);
140
+ --annotation-key-color: var(--gb-fg3);
141
+ --link-color: var(--gb-accent);
96
142
  --border-color: var(--gb-bg3);
97
- --standout-bg-color: var(--gb-bg1);
143
+
98
144
  --hover-background-color: var(--gb-bg2);
99
145
  --hover-text-color: var(--gb-fg0);
146
+
147
+ --header-bg-color: var(--gb-bg0-hard);
148
+ --header-fg-color: var(--gb-fg0);
149
+ --header-border-color: var(--gb-bg2);
150
+ --header-shadow: none;
100
151
  --header-hover-background-color: var(--gb-bg2);
101
152
  --header-hover-text-color: var(--gb-fg0);
102
- --header-text-color: var(--gb-fg0);
153
+ --header-button-hover-bg-color: var(--gb-bg2);
154
+
155
+ --sidebar-bg-color: var(--gb-bg1);
156
+ --sidebar-link-color: var(--gb-fg0);
157
+ --sidebar-hover-bg-color: var(--gb-bg2);
158
+ --sidebar-border-color: var(--gb-bg2);
159
+
160
+ --input-bg-color: var(--gb-bg0);
161
+ --input-fg-color: var(--gb-fg0);
162
+ --control-option-bg-color: var(--gb-bg2);
163
+ --control-hover-bg-color: var(--gb-bg2);
164
+ --menu-hover-bg-color: var(--gb-bg2);
165
+
166
+ --table-row-hover-bg: var(--gb-bg2);
167
+ --table-row-hover-fg: var(--gb-fg0);
168
+ --table-uneditable-bg: var(--gb-bg2);
169
+ --footer-chip-bg-color: var(--gb-bg2);
170
+
103
171
  --disabled-background-color: var(--gb-bg2);
104
172
  --disabled-text-color: var(--gb-gray);
105
173
 
174
+ --button-good-bg: var(--gb-green);
175
+ --button-good-hover-bg: var(--gb-green);
176
+ --button-bad-bg: var(--gb-red);
177
+ --button-bad-hover-bg: var(--gb-red);
178
+ --button-warning-bg: var(--gb-yellow);
179
+ --button-warning-hover-bg: var(--gb-yellow);
180
+ --button-on-accent-fg: var(--gb-good-fg);
181
+
106
182
  --karma-good: var(--gb-green);
107
183
  --karma-bad: var(--gb-red);
108
184
  --karma-warning: var(--gb-yellow);
@@ -121,144 +197,3 @@ html[data-theme="light"] {
121
197
  --karma-info-fg: var(--gb-fg3);
122
198
  --karma-old-fg: var(--gb-fg4);
123
199
  }
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
- }