picocrank 1.25.0 → 1.25.2

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