tsondb 0.7.8 → 0.7.10

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 (3) hide show
  1. package/dist/src/web/components/InstanceRouteSkeleton.js +32 -2
  2. package/package.json +1 -1
  3. package/public/css/styles.css +192 -164
package/dist/src/web/components/InstanceRouteSkeleton.js CHANGED
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
2
2
  import { useLocation, useRoute } from "preact-iso";
3
3
  import { useCallback, useContext, useEffect, useState } from "preact/hooks";
4
4
  import { removeAt } from "../../shared/utils/array.js";
5
+ import { deepEqual } from "../../shared/utils/compare.js";
5
6
  import { getSerializedDisplayNameFromEntityInstance } from "../../shared/utils/displayName.js";
6
7
  import { toTitleCase } from "../../shared/utils/string.js";
7
8
  import { validateLocaleIdentifier } from "../../shared/validation/identifier.js";
@@ -17,6 +18,11 @@ import { runWithLoading } from "../signals/loading.js";
17
18
  import { Layout } from "./Layout.js";
18
19
  import { TypeInput } from "./typeInputs/TypeInput.js";
19
20
  import { ValidationErrors } from "./typeInputs/utils/ValidationErrors.js";
21
+ const onBeforeUnload = (event) => {
22
+ event.preventDefault();
23
+ // eslint-disable-next-line @typescript-eslint/no-deprecated -- best practice according to MDN
24
+ event.returnValue = "unsaved changes";
25
+ };
20
26
  export const InstanceRouteSkeleton = ({ mode, buttons, init, titleBuilder, onSubmit, }) => {
21
27
  const { params: { name, id }, } = useRoute();
22
28
  const [locales] = useSetting("displayedLocales");
@@ -24,10 +30,22 @@ export const InstanceRouteSkeleton = ({ mode, buttons, init, titleBuilder, onSub
24
30
  const { declaration: entity, isLocaleEntity } = useEntityFromRoute() ?? {};
25
31
  const [instanceNamesByEntity] = useInstanceNamesByEntity();
26
32
  const [instanceContent, setInstanceContent] = useState();
33
+ const [savedInstanceContent, setSavedInstanceContent] = useState();
27
34
  const [childInstances, setChildInstances] = useState([]);
28
35
  const [customId, setCustomId] = useState("");
29
36
  const client = useContext(GitClientContext);
30
37
  const { route } = useLocation();
38
+ useEffect(() => {
39
+ if (deepEqual(instanceContent, savedInstanceContent)) {
40
+ window.removeEventListener("beforeunload", onBeforeUnload);
41
+ }
42
+ else {
43
+ window.addEventListener("beforeunload", onBeforeUnload);
44
+ }
45
+ return () => {
46
+ window.removeEventListener("beforeunload", onBeforeUnload);
47
+ };
48
+ }, [instanceContent, savedInstanceContent]);
31
49
  useEffect(() => {
32
50
  document.title =
33
51
  (entity && titleBuilder({ locales, entity, instanceContent, instanceId: id })) ??
@@ -35,7 +53,16 @@ export const InstanceRouteSkeleton = ({ mode, buttons, init, titleBuilder, onSub
35
53
  }, [entity, id, instanceContent, locales, titleBuilder]);
36
54
  useEffect(() => {
37
55
  if (entity && instanceContent === undefined && declsLoaded) {
38
- runWithLoading(() => init({ locales, entity, instanceId: id, setInstanceContent, getDeclFromDeclName }))
56
+ runWithLoading(() => init({
57
+ locales,
58
+ entity,
59
+ instanceId: id,
60
+ setInstanceContent: value => {
61
+ setInstanceContent(value);
62
+ setSavedInstanceContent(value);
63
+ },
64
+ getDeclFromDeclName,
65
+ }))
39
66
  .then(() => id
40
67
  ? getChildInstancesForInstanceByEntityName(locales, entity.name, id).then(result => {
41
68
  setChildInstances(result.instances);
@@ -61,7 +88,10 @@ export const InstanceRouteSkeleton = ({ mode, buttons, init, titleBuilder, onSub
61
88
  getDeclFromDeclName,
62
89
  isLocaleEntity,
63
90
  setCustomId,
64
- setInstanceContent,
91
+ setInstanceContent: value => {
92
+ setInstanceContent(value);
93
+ setSavedInstanceContent(value);
94
+ },
65
95
  childInstances,
66
96
  updateLocalGitState: client?.updateLocalState,
67
97
  })).catch((error) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tsondb",
3
- "version": "0.7.8",
3
+ "version": "0.7.10",
4
4
  "description": "",
5
5
  "license": "ISC",
6
6
  "author": "Lukas Obermann",
package/public/css/styles.css CHANGED
@@ -12,95 +12,109 @@
12
12
  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
13
13
  monospace;
14
14
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
15
- --background: white;
16
- --markdown-background: #e1e3e7;
17
- --color: black;
18
- --error-color: #9d1212;
19
- --separator-color: #e9e5eb;
20
- --secondary-color: #7e7f87;
21
- --tertiary-color: #bcbdc2;
22
- --input-border-color: black;
23
- --button-background: #c7cad0;
24
- --button-background-hover: #dedfe4;
25
- --button-background-primary: black;
26
- --button-background-primary-hover: #727379;
27
- --button-background-destructive: #b51616;
28
- --button-background-destructive-hover: #e63333;
29
- --button-background-disabled: #a4a5aa;
30
- --button-color: black;
31
- --button-color-hover: black;
32
- --button-color-primary: white;
33
- --button-color-primary-hover: white;
34
- --button-color-destructive: white;
35
- --button-color-destructive-hover: white;
36
- --button-color-disabled: #cdced2;
37
- --highlight-color: #a08500;
38
- --highlight-background: #fdfab9;
39
- --disabled-color: #cdced2;
40
- --shadow-color: rgba(53, 56, 58, 0.5);
41
- --git-status-untracked-color: rgb(13, 149, 101);
42
- --git-status-untracked-background: rgba(13, 149, 101, 0.15);
43
- --git-status-added-color: rgb(20, 148, 29);
44
- --git-status-added-background: rgba(20, 148, 29, 0.15);
45
- --git-status-modified-color: rgb(196, 155, 18);
46
- --git-status-modified-background: rgba(196, 155, 18, 0.15);
47
- --git-status-deleted-color: rgb(135, 22, 11);
48
- --git-status-deleted-background: rgba(135, 22, 11, 0.15);
49
- --git-status-renamed-color: rgb(20, 97, 148);
50
- --git-status-renamed-background: rgba(20, 97, 148, 0.15);
51
- --shadow-color: rgba(160, 163, 165, 0.5);
52
- --highlight-color-bold: rgb(205, 123, 43);
53
- --highlight-color-italic: rgb(41, 155, 96);
54
- --highlight-color-list-item-marker: rgb(195, 58, 237);
55
- --highlight-color-table-marker: rgb(237, 58, 118);
56
- --highlight-color-attributed: rgb(48, 81, 228);
57
- --highlight-color-heading-marker: rgb(62, 189, 191);
15
+
16
+ --color-background-primary: hsl(260, 6%, 97%);
17
+ --color-background-secondary: hsl(260, 6%, 90%);
18
+ --color-background-tertiary: hsl(260, 6%, 85%);
19
+
20
+ --color-foreground-primary: hsl(260, 6%, 10%);
21
+ --color-foreground-secondary: hsl(260, 6%, 40%);
22
+ --color-foreground-tertiary: hsl(260, 6%, 50%);
23
+
24
+ --color-error: #9d1212;
25
+ --color-placeholder: hsla(260, 6%, 50%);
26
+ --color-separator: hsla(260, 6%, 25%, 0.125);
27
+ --color-separator-input: hsl(260, 6%, 50%);
28
+ --color-disabled: hsl(260, 6%, 75%);
29
+ --color-shadow: rgba(53, 56, 58, 0.5);
30
+
31
+ --color-button-background: hsl(260, 6%, 75%);
32
+ --color-button-foreground: hsl(260, 6%, 10%);
33
+ --color-button-background-hover: hsl(260, 6%, 60%);
34
+ --color-button-foreground-hover: hsl(260, 6%, 10%);
35
+ --color-button-background-primary: hsl(260, 6%, 10%);
36
+ --color-button-foreground-primary: hsl(260, 6%, 95%);
37
+ --color-button-background-primary-hover: hsl(260, 6%, 30%);
38
+ --color-button-foreground-primary-hover: hsl(260, 6%, 95%);
39
+ --color-button-background-destructive: #b51616;
40
+ --color-button-foreground-destructive: white;
41
+ --color-button-background-destructive-hover: #e63333;
42
+ --color-button-foreground-destructive-hover: white;
43
+ --color-button-background-disabled: hsl(260, 6%, 90%);
44
+ --color-button-foreground-disabled: hsl(260, 6%, 75%);
45
+
46
+ --color-highlight-background: #fdfab9;
47
+ --color-highlight-foreground: #a08500;
48
+
49
+ --git-status-untracked-background-color: rgba(13, 149, 101, 0.15);
50
+ --git-status-untracked-foreground-color: rgb(13, 149, 101);
51
+ --git-status-added-background-color: rgba(20, 148, 29, 0.15);
52
+ --git-status-added-foreground-color: rgb(20, 148, 29);
53
+ --git-status-modified-background-color: rgba(196, 155, 18, 0.15);
54
+ --git-status-modified-foreground-color: rgb(196, 155, 18);
55
+ --git-status-deleted-background-color: rgba(135, 22, 11, 0.15);
56
+ --git-status-deleted-foreground-color: rgb(135, 22, 11);
57
+ --git-status-renamed-background-color: rgba(20, 97, 148, 0.15);
58
+ --git-status-renamed-foreground-color: rgb(20, 97, 148);
59
+
60
+ --color-syntax-bold: rgb(205, 123, 43);
61
+ --color-syntax-italic: rgb(41, 155, 96);
62
+ --color-syntax-list-item-marker: rgb(195, 58, 237);
63
+ --color-syntax-table-marker: rgb(237, 58, 118);
64
+ --color-syntax-attributed: rgb(48, 81, 228);
65
+ --color-syntax-heading-marker: rgb(62, 189, 191);
58
66
  }
59
67
 
60
68
  @media (prefers-color-scheme: dark) {
61
69
  :root {
62
- --background: hsl(260, 6%, 10%);
63
- --markdown-background: hsl(260, 6%, 17%);
64
- --color: hsl(260, 6%, 88%);
65
- --error-color: #ff6b6b;
66
- --separator-color: hsl(260, 6%, 24%);
67
- --secondary-color: hsl(260, 6%, 69%);
68
- --tertiary-color: hsl(260, 6%, 49%);
69
- --input-border-color: hsl(260, 6%, 40%);
70
- --button-background: hsl(260, 6%, 24%);
71
- --button-background-hover: hsl(260, 6%, 30%);
72
- --button-background-primary: hsl(260, 6%, 80%);
73
- --button-background-primary-hover: hsl(260, 6%, 60%);
74
- --button-background-destructive: #922727;
75
- --button-background-destructive-hover: #ff8080;
76
- --button-background-disabled: hsl(260, 6%, 35%);
77
- --button-color: #fff;
78
- --button-color-hover: #fff;
79
- --button-color-primary: #000;
80
- --button-color-primary-hover: #000;
81
- --button-color-destructive: #fff;
82
- --button-color-destructive-hover: #fff;
83
- --button-color-disabled: hsl(260, 6%, 54%);
84
- --disabled-color: #606164;
85
- --highlight-color: #f2d600;
86
- --highlight-background: #333300;
87
- --highlight-color-bold: rgb(236, 170, 105);
88
- --highlight-color-italic: rgb(130, 230, 178);
89
- --highlight-color-list-item-marker: rgb(220, 133, 245);
90
- --highlight-color-table-marker: rgb(244, 135, 171);
91
- --highlight-color-attributed: rgb(137, 157, 244);
92
- --highlight-color-heading-marker: rgb(140, 229, 231);
93
- --shadow-color: rgba(0, 0, 0, 0);
70
+ --color-background-primary: hsl(260, 6%, 10%);
71
+ --color-background-secondary: hsl(260, 6%, 15%);
72
+ --color-background-tertiary: hsl(260, 6%, 20%);
73
+
74
+ --color-foreground-primary: hsl(260, 6%, 90%);
75
+ --color-foreground-secondary: hsl(260, 6%, 70%);
76
+ --color-foreground-tertiary: hsl(260, 6%, 50%);
77
+
78
+ --color-error: #ff6b6b;
79
+ --color-separator: hsla(260, 6%, 75%, 0.25);
80
+ --color-separator-input: hsl(260, 6%, 50%);
81
+ --color-disabled: hsl(260, 6%, 30%);
82
+ --color-shadow: rgba(0, 0, 0, 0);
83
+
84
+ --color-button-background: hsl(260, 6%, 25%);
85
+ --color-button-foreground: #fff;
86
+ --color-button-background-hover: hsl(260, 6%, 30%);
87
+ --color-button-foreground-hover: #fff;
88
+ --color-button-background-primary: hsl(260, 6%, 80%);
89
+ --color-button-foreground-primary: #000;
90
+ --color-button-background-primary-hover: hsl(260, 6%, 60%);
91
+ --color-button-foreground-primary-hover: #000;
92
+ --color-button-background-destructive: #922727;
93
+ --color-button-foreground-destructive: #fff;
94
+ --color-button-background-destructive-hover: #ff8080;
95
+ --color-button-foreground-destructive-hover: #fff;
96
+ --color-button-background-disabled: hsl(260, 6%, 15%);
97
+ --color-button-foreground-disabled: hsl(260, 6%, 35%);
98
+
99
+ --color-highlight-background: #333300;
100
+ --color-highlight-foreground: #f2d600;
101
+
102
+ --color-syntax-bold: rgb(236, 170, 105);
103
+ --color-syntax-italic: rgb(130, 230, 178);
104
+ --color-syntax-list-item-marker: rgb(220, 133, 245);
105
+ --color-syntax-table-marker: rgb(244, 135, 171);
106
+ --color-syntax-attributed: rgb(137, 157, 244);
107
+ --color-syntax-heading-marker: rgb(140, 229, 231);
94
108
  }
95
109
  }
96
110
 
97
111
  body {
98
112
  font-family: var(--font-sans);
99
- color: var(--color);
113
+ color: var(--color-foreground-primary);
100
114
  margin: 0;
101
115
  padding: 1.5rem;
102
116
  line-height: 1.4;
103
- background: var(--background);
117
+ background: var(--color-background-primary);
104
118
  z-index: 1;
105
119
  }
106
120
 
@@ -153,11 +167,11 @@ h1 {
153
167
  }
154
168
 
155
169
  h1.empty-name {
156
- color: var(--tertiary-color);
170
+ color: var(--color-foreground-tertiary);
157
171
  }
158
172
 
159
173
  h1 .id {
160
- color: var(--tertiary-color);
174
+ color: var(--color-foreground-tertiary);
161
175
  font-size: 0.8rem;
162
176
  font-family: var(--font-mono);
163
177
  display: block;
@@ -173,7 +187,7 @@ h2 {
173
187
  h2.h1-faded {
174
188
  margin: 2rem 0 1.5rem;
175
189
  font-size: 2.5rem;
176
- color: var(--tertiary-color);
190
+ color: var(--color-foreground-tertiary);
177
191
  }
178
192
 
179
193
  h3 {
@@ -187,7 +201,7 @@ p {
187
201
  }
188
202
 
189
203
  a {
190
- color: var(--color);
204
+ color: var(--color-foreground-primary);
191
205
  }
192
206
 
193
207
  a.btn,
@@ -197,12 +211,12 @@ button {
197
211
  /* padding: calc(0.5rem - var(--border-width)) calc(1rem - var(--border-width)); */
198
212
  padding: 0.5rem 1rem;
199
213
  margin: 0;
200
- background: var(--button-background);
201
- color: var(--button-color);
214
+ background: var(--color-button-background);
215
+ color: var(--color-button-foreground);
202
216
  font-family: var(--font-sans);
203
217
  font-size: 1rem;
204
218
  line-height: 1.4;
205
- /* border: var(--border-width) solid var(--button-color); */
219
+ /* border: var(--border-width) solid var(--color-button-foreground); */
206
220
  border: none;
207
221
  text-decoration: none;
208
222
  cursor: pointer;
@@ -210,15 +224,15 @@ button {
210
224
 
211
225
  a.btn:hover,
212
226
  button:hover {
213
- background: var(--button-background-hover);
214
- color: var(--button-color-hover);
215
- border-color: var(--button-color-hover);
227
+ background: var(--color-button-background-hover);
228
+ color: var(--color-button-foreground-hover);
229
+ border-color: var(--color-button-foreground-hover);
216
230
  }
217
231
 
218
232
  a.btn--primary,
219
233
  button.primary {
220
- background: var(--button-background-primary);
221
- color: var(--button-color-primary);
234
+ background: var(--color-button-background-primary);
235
+ color: var(--color-button-foreground-primary);
222
236
  padding: 0.5rem 1rem;
223
237
  border: none;
224
238
  }
@@ -232,35 +246,35 @@ button.primary {
232
246
 
233
247
  a.btn--primary:hover,
234
248
  button.primary:hover {
235
- background: var(--button-background-primary-hover);
236
- color: var(--button-color-primary-hover);
249
+ background: var(--color-button-background-primary-hover);
250
+ color: var(--color-button-foreground-primary-hover);
237
251
  }
238
252
 
239
253
  a.btn--destructive,
240
254
  button.destructive {
241
- background: var(--button-background-destructive);
242
- color: var(--button-color-destructive);
255
+ background: var(--color-button-background-destructive);
256
+ color: var(--color-button-foreground-destructive);
243
257
  padding: 0.5rem 1rem;
244
258
  border: none;
245
259
  }
246
260
 
247
261
  a.btn--destructive:hover,
248
262
  button.destructive:hover {
249
- background: var(--button-background-destructive-hover);
250
- color: var(--button-color-destructive-hover);
263
+ background: var(--color-button-background-destructive-hover);
264
+ color: var(--color-button-foreground-destructive-hover);
251
265
  }
252
266
 
253
267
  a.btn[aria-disabled="true"],
254
268
  button:disabled {
255
- background: var(--button-background-disabled);
256
- color: var(--button-color-disabled);
269
+ background: var(--color-button-background-disabled);
270
+ color: var(--color-button-foreground-disabled);
257
271
  cursor: not-allowed;
258
272
  }
259
273
 
260
274
  button.primary:disabled,
261
275
  button.destructive:disabled {
262
- background: var(--button-background-disabled);
263
- color: var(--button-color-disabled);
276
+ background: var(--color-button-background-disabled);
277
+ color: var(--color-button-foreground-disabled);
264
278
  cursor: not-allowed;
265
279
  }
266
280
 
@@ -268,10 +282,10 @@ input,
268
282
  textarea,
269
283
  select,
270
284
  .textarea-grow-wrap__mirror {
271
- background: var(--background);
272
- color: var(--color);
285
+ background: var(--color-background-primary);
286
+ color: var(--color-foreground-primary);
273
287
  font-family: var(--font-sans);
274
- border: 1px solid var(--input-border-color);
288
+ border: 1px solid var(--color-separator-input);
275
289
  padding: 0.5rem;
276
290
  display: block;
277
291
  width: 100%;
@@ -280,18 +294,24 @@ select,
280
294
  border-radius: 0;
281
295
  }
282
296
 
297
+ input::placeholder,
298
+ textarea::placeholder,
299
+ select::placeholder {
300
+ color: var(--color-placeholder);
301
+ }
302
+
283
303
  input:disabled,
284
304
  textarea:disabled,
285
305
  select:disabled {
286
- border-color: var(--disabled-color);
287
- color: var(--disabled-color);
306
+ border-color: var(--color-disabled);
307
+ color: var(--color-disabled);
288
308
  }
289
309
 
290
310
  input[aria-invalid="true"]:not(:disabled),
291
311
  textarea[aria-invalid="true"]:not(:disabled),
292
312
  select[aria-invalid="true"]:not(:disabled) {
293
- border-color: var(--error-color);
294
- color: var(--error-color);
313
+ border-color: var(--color-error);
314
+ color: var(--color-error);
295
315
  }
296
316
 
297
317
  /* https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */
@@ -319,7 +339,7 @@ select[aria-invalid="true"]:not(:disabled) {
319
339
  height: 1rem;
320
340
  width: 1rem;
321
341
  margin: 0.25rem 0.5rem 0 0;
322
- border: 1px solid var(--color);
342
+ border: 1px solid var(--color-foreground-primary);
323
343
  flex: none;
324
344
  border-radius: 0;
325
345
  -webkit-appearance: none;
@@ -327,7 +347,7 @@ select[aria-invalid="true"]:not(:disabled) {
327
347
  }
328
348
 
329
349
  :is(input[type="checkbox"], input[type="radio"]):disabled {
330
- border-color: var(--disabled-color);
350
+ border-color: var(--color-disabled);
331
351
  }
332
352
 
333
353
  input[type="radio"] {
@@ -335,11 +355,11 @@ input[type="radio"] {
335
355
  }
336
356
 
337
357
  :is(input[type="checkbox"], input[type="radio"]):checked {
338
- background: var(--color);
358
+ background: var(--color-foreground-primary);
339
359
  }
340
360
 
341
361
  :is(input[type="checkbox"], input[type="radio"]):checked:disabled {
342
- background: var(--disabled-color);
362
+ background: var(--color-disabled);
343
363
  }
344
364
 
345
365
  :is(input[type="checkbox"], input[type="radio"]):checked::before {
@@ -352,7 +372,7 @@ input[type="checkbox"]:checked::before {
352
372
  border-style: solid;
353
373
  width: 0.8rem;
354
374
  height: 0.4rem;
355
- border-color: var(--background);
375
+ border-color: var(--color-background-primary);
356
376
  transform: rotate(-45deg);
357
377
  margin: calc(-0.325rem) 0 0 calc(-0.4rem);
358
378
  }
@@ -360,7 +380,7 @@ input[type="checkbox"]:checked::before {
360
380
  input[type="radio"]:checked::before {
361
381
  width: 0.5rem;
362
382
  height: 0.5rem;
363
- background-color: var(--background);
383
+ background-color: var(--color-background-primary);
364
384
  border-radius: 50%;
365
385
  margin: -0.25rem;
366
386
  }
@@ -371,7 +391,7 @@ input[type="radio"]:checked::before {
371
391
 
372
392
  :is(input[type="checkbox"], input[type="radio"]):disabled + label,
373
393
  :is(input[type="checkbox"], input[type="radio"]):disabled + * label {
374
- color: var(--disabled-color);
394
+ color: var(--color-disabled);
375
395
  }
376
396
 
377
397
  .field--option {
@@ -399,22 +419,22 @@ input[type="radio"]:checked::before {
399
419
  height: 0.5rem;
400
420
  border-width: 0 1px 1px 0;
401
421
  border-style: solid;
402
- border-color: var(--color);
422
+ border-color: var(--color-foreground-primary);
403
423
  transform: rotate(45deg);
404
424
  pointer-events: none;
405
425
  }
406
426
 
407
427
  .select-wrapper:has(> select:disabled)::after {
408
- border-color: var(--tertiary-color);
428
+ border-color: var(--color-foreground-tertiary);
409
429
  }
410
430
 
411
431
  select.no-selection {
412
- color: var(--tertiary-color);
432
+ color: var(--color-foreground-tertiary);
413
433
  }
414
434
 
415
435
  select:disabled {
416
- color: var(--disabled-color);
417
- border-color: var(--disabled-color);
436
+ color: var(--color-disabled);
437
+ border-color: var(--color-disabled);
418
438
  }
419
439
 
420
440
  select {
@@ -477,7 +497,7 @@ select {
477
497
  display: grid;
478
498
  gap: 0.125rem 1.5rem;
479
499
  padding: 0.5rem 0;
480
- border-top: 1px solid var(--separator-color);
500
+ border-top: 1px solid var(--color-separator);
481
501
  grid-template-columns: 1fr auto;
482
502
  grid-template-rows: auto 1fr;
483
503
  grid-template-areas: "title side" "subtitle side" ". side";
@@ -499,8 +519,8 @@ select {
499
519
  }
500
520
 
501
521
  .entries-item--created {
502
- color: var(--highlight-color);
503
- background: var(--highlight-background);
522
+ color: var(--color-highlight-foreground);
523
+ background: var(--color-highlight-background);
504
524
  }
505
525
 
506
526
  .entries-item h2 {
@@ -522,7 +542,7 @@ select {
522
542
  }
523
543
 
524
544
  .entries-item__title p {
525
- color: var(--secondary-color);
545
+ color: var(--color-foreground-secondary);
526
546
  margin: 0.125rem 0 0;
527
547
  }
528
548
 
@@ -531,7 +551,7 @@ select {
531
551
  }
532
552
 
533
553
  .entries-item__subtitle {
534
- color: var(--secondary-color);
554
+ color: var(--color-foreground-secondary);
535
555
  margin: 0;
536
556
  padding: 0;
537
557
  white-space: nowrap;
@@ -587,7 +607,7 @@ select {
587
607
 
588
608
  .validation-errors {
589
609
  margin: 0.5rem 0 0;
590
- color: var(--error-color);
610
+ color: var(--color-error);
591
611
  font-size: 0.8rem;
592
612
  }
593
613
 
@@ -601,18 +621,18 @@ select {
601
621
  }
602
622
 
603
623
  .field--container {
604
- border: 1px solid var(--separator-color);
605
- /* border-left-color: var(--color); */
624
+ border: 1px solid var(--color-separator);
625
+ /* border-left-color: var(--color-foreground-primary); */
606
626
  border-left-width: 4px;
607
627
  padding: 0.5rem 0.5rem 0.5rem 1rem;
608
628
  }
609
629
 
610
630
  .field--container.field--disabled {
611
- color: var(--disabled-color);
631
+ color: var(--color-disabled);
612
632
  }
613
633
 
614
634
  .field--container.field--disabled .comment {
615
- color: var(--disabled-color);
635
+ color: var(--color-disabled);
616
636
  }
617
637
 
618
638
  form > .field--container {
@@ -630,7 +650,7 @@ form > .field--container {
630
650
  .field--container > ul > li,
631
651
  .field--container > ol > li {
632
652
  padding-block: 0.5rem;
633
- border-top: 1px solid var(--separator-color);
653
+ border-top: 1px solid var(--color-separator);
634
654
  display: block;
635
655
  }
636
656
 
@@ -671,37 +691,37 @@ form > .field--container {
671
691
  .editor--markdown textarea {
672
692
  color: transparent;
673
693
  background: transparent;
674
- caret-color: var(--color);
694
+ caret-color: var(--color-foreground-primary);
675
695
  }
676
696
 
677
697
  .editor-highlighting strong {
678
- color: var(--highlight-color-bold);
698
+ color: var(--color-syntax-bold);
679
699
  }
680
700
 
681
701
  .editor-highlighting em {
682
- color: var(--highlight-color-italic);
702
+ color: var(--color-syntax-italic);
683
703
  }
684
704
 
685
705
  .editor-highlighting .list-item-marker {
686
- color: var(--highlight-color-list-item-marker);
706
+ color: var(--color-syntax-list-item-marker);
687
707
  }
688
708
 
689
709
  .editor-highlighting .table-marker {
690
- color: var(--highlight-color-table-marker);
710
+ color: var(--color-syntax-table-marker);
691
711
  }
692
712
 
693
713
  .editor-highlighting .heading-marker {
694
- color: var(--highlight-color-heading-marker);
714
+ color: var(--color-syntax-heading-marker);
695
715
  }
696
716
 
697
717
  .preview .attributed {
698
718
  text-decoration-line: underline;
699
719
  text-decoration-style: dashed;
700
- text-decoration-color: var(--highlight-color-attributed);
720
+ text-decoration-color: var(--color-syntax-attributed);
701
721
  }
702
722
 
703
723
  .editor-highlighting .attributed {
704
- color: var(--highlight-color-attributed);
724
+ color: var(--color-syntax-attributed);
705
725
  }
706
726
 
707
727
  .editor-highlighting .attributed__name {
@@ -714,18 +734,18 @@ form > .field--container {
714
734
 
715
735
  .help {
716
736
  font-size: 0.8rem;
717
- color: var(--secondary-color);
737
+ color: var(--color-foreground-secondary);
718
738
  margin: 0.25rem 0 0;
719
739
  }
720
740
 
721
741
  :disabled + .help,
722
742
  :disabled + .help a {
723
- color: var(--disabled-color);
743
+ color: var(--color-disabled);
724
744
  }
725
745
 
726
746
  .preview {
727
747
  padding: 1rem;
728
- background: var(--markdown-background);
748
+ background: var(--color-background-secondary);
729
749
  flex: 1 1 0;
730
750
  }
731
751
 
@@ -746,7 +766,11 @@ form > .field--container {
746
766
  margin: 0.5rem 0;
747
767
  }
748
768
 
749
- .preview table :is(th, td) {
769
+ .preview table caption {
770
+ padding: 0.25rem 0;
771
+ }
772
+
773
+ .preview table :is(th, td, caption) {
750
774
  vertical-align: top;
751
775
  padding: 0.25rem 0.5rem;
752
776
  }
@@ -759,8 +783,12 @@ form > .field--container {
759
783
  padding-right: 0;
760
784
  }
761
785
 
762
- .preview table tbody tr {
763
- border-top: 1px solid var(--tertiary-color);
786
+ .preview table tr {
787
+ border-top: 1px solid var(--color-separator);
788
+ }
789
+
790
+ .preview table thead:first-child tr {
791
+ border-top: none;
764
792
  }
765
793
 
766
794
  .container-item {
@@ -781,7 +809,7 @@ form > .field--container {
781
809
  }
782
810
 
783
811
  .container-item-title .id {
784
- color: var(--tertiary-color);
812
+ color: var(--color-foreground-tertiary);
785
813
  font-size: 0.8rem;
786
814
  font-family: var(--font-mono);
787
815
  }
@@ -810,7 +838,7 @@ button[type="submit"] {
810
838
  }
811
839
 
812
840
  .description {
813
- color: var(--secondary-color);
841
+ color: var(--color-foreground-secondary);
814
842
  }
815
843
 
816
844
  :is(.header-with-btns, h1) + .description {
@@ -820,7 +848,7 @@ button[type="submit"] {
820
848
  .comment {
821
849
  font-size: 0.8rem;
822
850
  line-height: 1.4;
823
- color: var(--secondary-color);
851
+ color: var(--color-foreground-secondary);
824
852
  margin: 0.5rem 0 0;
825
853
  max-width: 55em;
826
854
  }
@@ -843,7 +871,7 @@ main:has(.form-footer) {
843
871
  position: sticky;
844
872
  bottom: 0;
845
873
  padding-bottom: 1.5rem;
846
- background: var(--background);
874
+ background: var(--color-background-primary);
847
875
  }
848
876
 
849
877
  .git-status {
@@ -861,28 +889,28 @@ main:has(.form-footer) {
861
889
  }
862
890
 
863
891
  .git-status.git-status--U {
864
- color: var(--git-status-untracked-color);
865
- background: var(--git-status-untracked-background);
892
+ color: var(--git-status-untracked-foreground-color);
893
+ background: var(--git-status-untracked-background-color);
866
894
  }
867
895
 
868
896
  .git-status.git-status--A {
869
- color: var(--git-status-added-color);
870
- background: var(--git-status-added-background);
897
+ color: var(--git-status-added-foreground-color);
898
+ background: var(--git-status-added-background-color);
871
899
  }
872
900
 
873
901
  .git-status.git-status--M {
874
- color: var(--git-status-modified-color);
875
- background: var(--git-status-modified-background);
902
+ color: var(--git-status-modified-foreground-color);
903
+ background: var(--git-status-modified-background-color);
876
904
  }
877
905
 
878
906
  .git-status.git-status--D {
879
- color: var(--git-status-deleted-color);
880
- background: var(--git-status-deleted-background);
907
+ color: var(--git-status-deleted-foreground-color);
908
+ background: var(--git-status-deleted-background-color);
881
909
  }
882
910
 
883
911
  .git-status.git-status--R {
884
- color: var(--git-status-renamed-color);
885
- background: var(--git-status-renamed-background);
912
+ color: var(--git-status-renamed-foreground-color);
913
+ background: var(--git-status-renamed-background-color);
886
914
  }
887
915
 
888
916
  aside.git {
@@ -898,7 +926,7 @@ aside.git h2 {
898
926
  aside.git {
899
927
  display: block;
900
928
  width: 30rem;
901
- border-left: 1px solid var(--separator-color);
929
+ border-left: 1px solid var(--color-separator);
902
930
  padding-left: 1rem;
903
931
  }
904
932
 
@@ -956,7 +984,7 @@ aside.git h2 {
956
984
  }
957
985
 
958
986
  .git-files p.no-changes {
959
- color: var(--tertiary-color);
987
+ color: var(--color-foreground-tertiary);
960
988
  margin: 0;
961
989
  }
962
990
 
@@ -979,19 +1007,19 @@ aside.git h2 {
979
1007
  }
980
1008
 
981
1009
  .branch__origin {
982
- color: var(--secondary-color);
1010
+ color: var(--color-foreground-secondary);
983
1011
  }
984
1012
 
985
1013
  .branch__current-indicator {
986
- color: var(--secondary-color);
1014
+ color: var(--color-foreground-secondary);
987
1015
  flex: none;
988
1016
  }
989
1017
 
990
1018
  dialog {
991
- background: var(--background);
992
- color: var(--color);
1019
+ background: var(--color-background-primary);
1020
+ color: var(--color-foreground-primary);
993
1021
  border: none;
994
- box-shadow: 0 0.5rem 2rem var(--shadow-color);
1022
+ box-shadow: 0 0.5rem 2rem var(--color-shadow);
995
1023
  padding: 1.6rem 1.5rem;
996
1024
  max-height: calc(100% - 2rem);
997
1025
  max-width: calc(100% - 2rem);