@motion-proto/live-tokens 0.19.1 → 0.20.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 (12) hide show
  1. package/dist-plugin/index.cjs +5 -2
  2. package/dist-plugin/index.js +5 -2
  3. package/package.json +1 -1
  4. package/src/live-tokens/data/tokens.generated.css +5 -99
  5. package/src/system/components/Button.svelte +22 -22
  6. package/src/system/components/Callout.svelte +17 -17
  7. package/src/system/components/Card.svelte +15 -7
  8. package/src/system/components/CodeSnippet.svelte +4 -4
  9. package/src/system/components/Image.svelte +1 -1
  10. package/src/system/components/ImageLightbox.svelte +1 -1
  11. package/src/system/components/Table.svelte +12 -12
  12. package/src/system/components/Tooltip.svelte +2 -2
package/dist-plugin/index.cjs CHANGED
@@ -1013,9 +1013,12 @@ function themeFileApi(opts) {
1013
1013
  }
1014
1014
  function extractAliasDeclarations(body) {
1015
1015
  const aliases = {};
1016
- const re = /(--[a-z0-9-]+)\s*:\s*var\((--[a-z0-9-]+)\)\s*;/gi;
1016
+ const re = /(--[a-z0-9-]+)\s*:\s*(var\(--[a-z0-9-]+\)|color-mix\(in srgb,\s*var\(--[a-z0-9-]+\)\s+\d+%,\s*transparent\))\s*;/gi;
1017
1017
  let m;
1018
- while ((m = re.exec(body)) !== null) aliases[m[1]] = m[2];
1018
+ while ((m = re.exec(body)) !== null) {
1019
+ const plain = m[2].match(/^var\((--[a-z0-9-]+)\)$/i);
1020
+ aliases[m[1]] = plain ? plain[1] : m[2];
1021
+ }
1019
1022
  return aliases;
1020
1023
  }
1021
1024
  function componentNameFromFile(filePath) {
package/dist-plugin/index.js CHANGED
@@ -753,9 +753,12 @@ function themeFileApi(opts) {
753
753
  }
754
754
  function extractAliasDeclarations(body) {
755
755
  const aliases = {};
756
- const re = /(--[a-z0-9-]+)\s*:\s*var\((--[a-z0-9-]+)\)\s*;/gi;
756
+ const re = /(--[a-z0-9-]+)\s*:\s*(var\(--[a-z0-9-]+\)|color-mix\(in srgb,\s*var\(--[a-z0-9-]+\)\s+\d+%,\s*transparent\))\s*;/gi;
757
757
  let m;
758
- while ((m = re.exec(body)) !== null) aliases[m[1]] = m[2];
758
+ while ((m = re.exec(body)) !== null) {
759
+ const plain = m[2].match(/^var\((--[a-z0-9-]+)\)$/i);
760
+ aliases[m[1]] = plain ? plain[1] : m[2];
761
+ }
759
762
  return aliases;
760
763
  }
761
764
  function componentNameFromFile(filePath) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@motion-proto/live-tokens",
3
- "version": "0.19.1",
3
+ "version": "0.20.0",
4
4
  "type": "module",
5
5
  "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
6
6
  "keywords": [
package/src/live-tokens/data/tokens.generated.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* Generated by themeFileApi from the production theme and component configs. Do not edit. */
2
2
  /* tokens.css holds developer-authored defaults; this file holds editor overrides. */
3
3
 
4
- /* Production theme: my-theme */
4
+ /* Production theme: default */
5
5
  :root:root {
6
6
  --gradient-1: linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%);
7
7
  --gradient-2: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-special-500) 100%);
@@ -54,10 +54,6 @@
54
54
  --dialog-secondary-hover-border-width: var(--border-width-1);
55
55
  --dialog-secondary-hover-radius: var(--radius-md);
56
56
  --dialog-secondary-hover-padding: var(--space-8);
57
- --columns-count: 12;
58
- --columns-max-width: 1440px;
59
- --columns-gutter: 32px;
60
- --columns-margin: 0px;
61
57
  --overlay-low: color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent);
62
58
  --overlay: color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent);
63
59
  --overlay-high: color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent);
@@ -69,6 +65,10 @@
69
65
  --shadow-lg: 5px 5px 9px 0px hsla(237, 18%, 3%, 0.9);
70
66
  --shadow-xl: 6px 7px 13px 0px hsla(237, 18%, 3%, 0.9);
71
67
  --shadow-2xl: 8px 9px 16px 0px hsla(237, 18%, 3%, 0.9);
68
+ --columns-count: 12;
69
+ --columns-max-width: 1440px;
70
+ --columns-gutter: 32px;
71
+ --columns-margin: 0px;
72
72
  --color-neutral-100: #dde6ec;
73
73
  --color-neutral-200: #c4cdd3;
74
74
  --color-neutral-300: #a8b1b7;
@@ -356,97 +356,3 @@
356
356
  --font-serif: "GFS Didot", serif;
357
357
  --font-mono: "fira-code", ui-monospace, "SF Mono", Menlo, Consolas, monospace, monospace;
358
358
  }
359
-
360
- /* Component aliases (production configs differing from defaults) */
361
- :root:root {
362
- /* button (my-button) */
363
- --button-primary-text-font-size: var(--font-size-md);
364
- --button-primary-text-font-weight: var(--font-weight-semibold);
365
- --button-primary-radius: var(--radius-xl);
366
- --button-secondary-text-font-size: var(--font-size-md);
367
- --button-secondary-text-font-weight: var(--font-weight-semibold);
368
- --button-secondary-radius: var(--radius-xl);
369
- --button-outline-text-font-size: var(--font-size-md);
370
- --button-outline-text-font-weight: var(--font-weight-semibold);
371
- --button-outline-radius: var(--radius-xl);
372
- --button-success-text-font-size: var(--font-size-md);
373
- --button-success-text-font-weight: var(--font-weight-semibold);
374
- --button-success-border-width: var(--border-width-1);
375
- --button-success-radius: var(--radius-xl);
376
- --button-danger-text-font-size: var(--font-size-md);
377
- --button-danger-text-font-weight: var(--font-weight-semibold);
378
- --button-danger-border-width: var(--border-width-1);
379
- --button-danger-radius: var(--radius-xl);
380
- --button-warning-text-font-size: var(--font-size-md);
381
- --button-warning-text-font-weight: var(--font-weight-semibold);
382
- --button-warning-border-width: var(--border-width-1);
383
- --button-warning-radius: var(--radius-xl);
384
- --button-small-text-font-size: var(--font-size-sm);
385
-
386
- /* callout (my-callout) */
387
- --callout-info-border: var(--border-info-medium);
388
- --callout-info-label-font-family: var(--font-sans);
389
- --callout-info-label-font-size: var(--font-size-lg);
390
- --callout-info-text-font-family: var(--font-sans);
391
- --callout-info-text-font-size: var(--font-size-lg);
392
- --callout-success-label-font-family: var(--font-sans);
393
- --callout-success-label-font-size: var(--font-size-lg);
394
- --callout-success-text-font-family: var(--font-sans);
395
- --callout-success-text-font-size: var(--font-size-lg);
396
- --callout-warning-label-font-family: var(--font-sans);
397
- --callout-warning-label-font-size: var(--font-size-lg);
398
- --callout-warning-text-font-family: var(--font-sans);
399
- --callout-warning-text-font-size: var(--font-size-lg);
400
- --callout-danger-label-font-family: var(--font-sans);
401
- --callout-danger-label-font-size: var(--font-size-lg);
402
- --callout-danger-text-font-family: var(--font-sans);
403
- --callout-danger-text-font-size: var(--font-size-lg);
404
-
405
- /* card (my-card) */
406
- --card-default-surface: color-mix(in srgb, var(--surface-neutral-lower) 70%, transparent);
407
- --card-default-header-surface: color-mix(in srgb, var(--surface-neutral-lowest) 80%, transparent);
408
- --card-default-title-font-size: var(--font-size-2xl);
409
- --card-default-title-font-weight: var(--font-weight-medium);
410
- --card-default-title-line-height: var(--line-height-md);
411
- --card-default-icon-size: var(--icon-size-2xl);
412
- --card-default-body-font-size: var(--font-size-xl);
413
- --card-default-header-padding-top: var(--space-12);
414
- --card-default-header-padding-right: var(--space-20);
415
- --card-default-header-padding-bottom: var(--space-12);
416
- --card-default-header-padding-left: var(--space-20);
417
- --card-default-body-padding-top: var(--space-16);
418
- --card-default-body-padding-right: var(--space-20);
419
- --card-default-body-padding-bottom: var(--space-16);
420
- --card-default-body-padding-left: var(--space-20);
421
-
422
- /* codesnippet (my-code-snippet) */
423
- --codesnippet-surface: color-mix(in srgb, var(--surface-neutral-lowest) 76%, transparent);
424
- --codesnippet-border: var(--border-neutral);
425
- --codesnippet-code-text: var(--text-brand-secondary);
426
- --codesnippet-code-font-size: var(--font-size-md);
427
-
428
- /* image (my-image) */
429
- --image-default-radius: var(--radius-2xl);
430
-
431
- /* imagelightbox (my-image-lightbox) */
432
- --imagelightbox-tile-border: transparent;
433
- --imagelightbox-overlay-surface: color-mix(in srgb, var(--color-neutral-950) 76%, transparent);
434
-
435
- /* table (my-table) */
436
- --table-default-surface: color-mix(in srgb, var(--surface-neutral-lower) 57%, transparent);
437
- --table-default-border: var(--border-neutral);
438
- --table-default-border-width: var(--border-width-2);
439
- --table-default-header-surface: var(--surface-neutral-lowest);
440
- --table-default-header-font-size: var(--font-size-lg);
441
- --table-default-header-font-weight: var(--font-weight-semibold);
442
- --table-default-header-border: var(--border-neutral);
443
- --table-default-cell-font-size: var(--font-size-md);
444
- --table-default-cell-font-weight: var(--font-weight-medium);
445
- --table-default-row-divider: var(--border-neutral-subtle);
446
- --table-default-column-divider: var(--border-neutral-faint);
447
- --table-default-column-divider-width: var(--border-width-1);
448
-
449
- /* tooltip (my-tooltip) */
450
- --tooltip-surface: color-mix(in srgb, var(--surface-canvas-lowest) 75%, transparent);
451
- --tooltip-border-width: var(--border-width-1);
452
- }
package/src/system/components/Button.svelte CHANGED
@@ -77,12 +77,12 @@
77
77
  --button-primary-surface: var(--surface-brand-high);
78
78
  --button-primary-text: var(--text-primary);
79
79
  --button-primary-text-font-family: var(--font-sans);
80
- --button-primary-text-font-size: var(--font-size-sm);
81
- --button-primary-text-font-weight: var(--font-weight-light);
80
+ --button-primary-text-font-size: var(--font-size-md);
81
+ --button-primary-text-font-weight: var(--font-weight-semibold);
82
82
  --button-primary-text-line-height: var(--line-height-sm);
83
83
  --button-primary-border: var(--border-brand);
84
84
  --button-primary-border-width: var(--border-width-1);
85
- --button-primary-radius: var(--radius-md);
85
+ --button-primary-radius: var(--radius-xl);
86
86
  --button-primary-padding: var(--space-8);
87
87
  --button-primary-hover-surface: var(--surface-brand-higher);
88
88
  --button-primary-hover-text: var(--text-primary);
@@ -96,12 +96,12 @@
96
96
  --button-secondary-surface: var(--surface-neutral-high);
97
97
  --button-secondary-text: var(--text-primary);
98
98
  --button-secondary-text-font-family: var(--font-sans);
99
- --button-secondary-text-font-size: var(--font-size-sm);
100
- --button-secondary-text-font-weight: var(--font-weight-light);
99
+ --button-secondary-text-font-size: var(--font-size-md);
100
+ --button-secondary-text-font-weight: var(--font-weight-semibold);
101
101
  --button-secondary-text-line-height: var(--line-height-sm);
102
102
  --button-secondary-border: var(--border-neutral);
103
103
  --button-secondary-border-width: var(--border-width-1);
104
- --button-secondary-radius: var(--radius-md);
104
+ --button-secondary-radius: var(--radius-xl);
105
105
  --button-secondary-padding: var(--space-8);
106
106
  --button-secondary-hover-surface: var(--surface-neutral-higher);
107
107
  --button-secondary-hover-text: var(--text-primary);
@@ -115,12 +115,12 @@
115
115
  --button-outline-surface: var(--color-transparent);
116
116
  --button-outline-text: var(--text-primary);
117
117
  --button-outline-text-font-family: var(--font-sans);
118
- --button-outline-text-font-size: var(--font-size-sm);
119
- --button-outline-text-font-weight: var(--font-weight-light);
118
+ --button-outline-text-font-size: var(--font-size-md);
119
+ --button-outline-text-font-weight: var(--font-weight-semibold);
120
120
  --button-outline-text-line-height: var(--line-height-sm);
121
121
  --button-outline-border: var(--border-neutral);
122
122
  --button-outline-border-width: var(--border-width-1);
123
- --button-outline-radius: var(--radius-md);
123
+ --button-outline-radius: var(--radius-xl);
124
124
  --button-outline-padding: var(--space-8);
125
125
  --button-outline-hover-surface: var(--surface-neutral-lower);
126
126
  --button-outline-hover-text: var(--text-primary);
@@ -135,12 +135,12 @@
135
135
  --button-success-surface: var(--surface-success-low);
136
136
  --button-success-text: var(--text-success);
137
137
  --button-success-text-font-family: var(--font-sans);
138
- --button-success-text-font-size: var(--font-size-sm);
139
- --button-success-text-font-weight: var(--font-weight-light);
138
+ --button-success-text-font-size: var(--font-size-md);
139
+ --button-success-text-font-weight: var(--font-weight-semibold);
140
140
  --button-success-text-line-height: var(--line-height-sm);
141
141
  --button-success-border: var(--border-success);
142
- --button-success-border-width: var(--border-width-2);
143
- --button-success-radius: var(--radius-md);
142
+ --button-success-border-width: var(--border-width-1);
143
+ --button-success-radius: var(--radius-xl);
144
144
  --button-success-padding: var(--space-8);
145
145
  --button-success-hover-surface: var(--surface-success-higher);
146
146
  --button-success-hover-text: var(--text-primary);
@@ -154,12 +154,12 @@
154
154
  --button-danger-surface: var(--surface-danger-low);
155
155
  --button-danger-text: var(--text-danger);
156
156
  --button-danger-text-font-family: var(--font-sans);
157
- --button-danger-text-font-size: var(--font-size-sm);
158
- --button-danger-text-font-weight: var(--font-weight-light);
157
+ --button-danger-text-font-size: var(--font-size-md);
158
+ --button-danger-text-font-weight: var(--font-weight-semibold);
159
159
  --button-danger-text-line-height: var(--line-height-sm);
160
160
  --button-danger-border: var(--border-danger);
161
- --button-danger-border-width: var(--border-width-2);
162
- --button-danger-radius: var(--radius-md);
161
+ --button-danger-border-width: var(--border-width-1);
162
+ --button-danger-radius: var(--radius-xl);
163
163
  --button-danger-padding: var(--space-8);
164
164
  --button-danger-hover-surface: var(--surface-danger-high);
165
165
  --button-danger-hover-text: var(--text-primary);
@@ -173,12 +173,12 @@
173
173
  --button-warning-surface: var(--surface-warning-low);
174
174
  --button-warning-text: var(--text-warning);
175
175
  --button-warning-text-font-family: var(--font-sans);
176
- --button-warning-text-font-size: var(--font-size-sm);
177
- --button-warning-text-font-weight: var(--font-weight-light);
176
+ --button-warning-text-font-size: var(--font-size-md);
177
+ --button-warning-text-font-weight: var(--font-weight-semibold);
178
178
  --button-warning-text-line-height: var(--line-height-sm);
179
179
  --button-warning-border: var(--border-warning);
180
- --button-warning-border-width: var(--border-width-2);
181
- --button-warning-radius: var(--radius-md);
180
+ --button-warning-border-width: var(--border-width-1);
181
+ --button-warning-radius: var(--radius-xl);
182
182
  --button-warning-padding: var(--space-8);
183
183
  --button-warning-hover-surface: var(--surface-warning-high);
184
184
  --button-warning-hover-text: var(--text-primary);
@@ -193,7 +193,7 @@
193
193
  currently looks the same regardless of variant). Per-side padding
194
194
  overrides power split-padding edits at small. */
195
195
  --button-small-padding: var(--space-6);
196
- --button-small-text-font-size: var(--font-size-xs);
196
+ --button-small-text-font-size: var(--font-size-sm);
197
197
  --button-small-text-font-weight: var(--font-weight-normal);
198
198
  --button-small-text-line-height: var(--line-height-sm);
199
199
  --button-small-icon-size: var(--font-size-xs);
package/src/system/components/Callout.svelte CHANGED
@@ -27,19 +27,19 @@
27
27
  :global(:root) {
28
28
  /* Info */
29
29
  --callout-info-surface: var(--surface-info-lowest);
30
- --callout-info-border: var(--border-info-subtle);
30
+ --callout-info-border: var(--border-info-medium);
31
31
  --callout-info-border-width: var(--border-width-1);
32
32
  --callout-info-accent-width: var(--border-width-4);
33
33
  --callout-info-radius: var(--radius-lg);
34
34
  --callout-info-padding: var(--space-12);
35
35
  --callout-info-label: var(--text-primary);
36
- --callout-info-label-font-family: var(--font-serif);
37
- --callout-info-label-font-size: var(--font-size-md);
36
+ --callout-info-label-font-family: var(--font-sans);
37
+ --callout-info-label-font-size: var(--font-size-lg);
38
38
  --callout-info-label-font-weight: var(--font-weight-bold);
39
39
  --callout-info-label-line-height: var(--line-height-md);
40
40
  --callout-info-text: var(--text-info);
41
- --callout-info-text-font-family: var(--font-serif);
42
- --callout-info-text-font-size: var(--font-size-md);
41
+ --callout-info-text-font-family: var(--font-sans);
42
+ --callout-info-text-font-size: var(--font-size-lg);
43
43
  --callout-info-text-font-weight: var(--font-weight-normal);
44
44
  --callout-info-text-line-height: var(--line-height-md);
45
45
 
@@ -51,13 +51,13 @@
51
51
  --callout-success-radius: var(--radius-lg);
52
52
  --callout-success-padding: var(--space-12);
53
53
  --callout-success-label: var(--text-primary);
54
- --callout-success-label-font-family: var(--font-serif);
55
- --callout-success-label-font-size: var(--font-size-md);
54
+ --callout-success-label-font-family: var(--font-sans);
55
+ --callout-success-label-font-size: var(--font-size-lg);
56
56
  --callout-success-label-font-weight: var(--font-weight-bold);
57
57
  --callout-success-label-line-height: var(--line-height-md);
58
58
  --callout-success-text: var(--text-success);
59
- --callout-success-text-font-family: var(--font-serif);
60
- --callout-success-text-font-size: var(--font-size-md);
59
+ --callout-success-text-font-family: var(--font-sans);
60
+ --callout-success-text-font-size: var(--font-size-lg);
61
61
  --callout-success-text-font-weight: var(--font-weight-normal);
62
62
  --callout-success-text-line-height: var(--line-height-md);
63
63
 
@@ -69,13 +69,13 @@
69
69
  --callout-warning-radius: var(--radius-lg);
70
70
  --callout-warning-padding: var(--space-12);
71
71
  --callout-warning-label: var(--text-primary);
72
- --callout-warning-label-font-family: var(--font-serif);
73
- --callout-warning-label-font-size: var(--font-size-md);
72
+ --callout-warning-label-font-family: var(--font-sans);
73
+ --callout-warning-label-font-size: var(--font-size-lg);
74
74
  --callout-warning-label-font-weight: var(--font-weight-bold);
75
75
  --callout-warning-label-line-height: var(--line-height-md);
76
76
  --callout-warning-text: var(--text-warning);
77
- --callout-warning-text-font-family: var(--font-serif);
78
- --callout-warning-text-font-size: var(--font-size-md);
77
+ --callout-warning-text-font-family: var(--font-sans);
78
+ --callout-warning-text-font-size: var(--font-size-lg);
79
79
  --callout-warning-text-font-weight: var(--font-weight-normal);
80
80
  --callout-warning-text-line-height: var(--line-height-md);
81
81
 
@@ -87,13 +87,13 @@
87
87
  --callout-danger-radius: var(--radius-lg);
88
88
  --callout-danger-padding: var(--space-12);
89
89
  --callout-danger-label: var(--text-primary);
90
- --callout-danger-label-font-family: var(--font-serif);
91
- --callout-danger-label-font-size: var(--font-size-md);
90
+ --callout-danger-label-font-family: var(--font-sans);
91
+ --callout-danger-label-font-size: var(--font-size-lg);
92
92
  --callout-danger-label-font-weight: var(--font-weight-bold);
93
93
  --callout-danger-label-line-height: var(--line-height-md);
94
94
  --callout-danger-text: var(--text-danger);
95
- --callout-danger-text-font-family: var(--font-serif);
96
- --callout-danger-text-font-size: var(--font-size-md);
95
+ --callout-danger-text-font-family: var(--font-sans);
96
+ --callout-danger-text-font-size: var(--font-size-lg);
97
97
  --callout-danger-text-font-weight: var(--font-weight-normal);
98
98
  --callout-danger-text-line-height: var(--line-height-md);
99
99
  }
package/src/system/components/Card.svelte CHANGED
@@ -43,28 +43,36 @@
43
43
  @use '../styles/padding' as *;
44
44
 
45
45
  :global(:root) {
46
- --card-default-surface: var(--surface-neutral-high);
46
+ --card-default-surface: color-mix(in srgb, var(--surface-neutral-lower) 70%, transparent);
47
47
  --card-default-border: var(--border-neutral);
48
48
  --card-default-border-width: var(--border-width-1);
49
49
  --card-default-radius: var(--radius-lg);
50
50
  --card-default-header-padding: var(--space-16);
51
+ --card-default-header-padding-top: var(--space-12);
52
+ --card-default-header-padding-right: var(--space-20);
53
+ --card-default-header-padding-bottom: var(--space-12);
54
+ --card-default-header-padding-left: var(--space-20);
51
55
  --card-default-header-gap: var(--space-8);
52
56
  --card-default-body-padding: var(--space-16);
57
+ --card-default-body-padding-top: var(--space-16);
58
+ --card-default-body-padding-right: var(--space-20);
59
+ --card-default-body-padding-bottom: var(--space-16);
60
+ --card-default-body-padding-left: var(--space-20);
53
61
  --card-default-shadow: var(--shadow-sm);
54
62
  --card-default-blur: var(--blur-none);
55
- --card-default-header-surface: var(--color-transparent);
63
+ --card-default-header-surface: color-mix(in srgb, var(--surface-neutral-lowest) 80%, transparent);
56
64
 
57
65
  --card-default-title: var(--text-primary);
58
66
  --card-default-title-font-family: var(--font-sans);
59
- --card-default-title-font-size: var(--font-size-lg);
60
- --card-default-title-font-weight: var(--font-weight-normal);
61
- --card-default-title-line-height: var(--line-height-sm);
67
+ --card-default-title-font-size: var(--font-size-2xl);
68
+ --card-default-title-font-weight: var(--font-weight-medium);
69
+ --card-default-title-line-height: var(--line-height-md);
62
70
 
63
- --card-default-icon-size: var(--icon-size-lg);
71
+ --card-default-icon-size: var(--icon-size-2xl);
64
72
 
65
73
  --card-default-body: var(--text-secondary);
66
74
  --card-default-body-font-family: var(--font-sans);
67
- --card-default-body-font-size: var(--font-size-md);
75
+ --card-default-body-font-size: var(--font-size-xl);
68
76
  --card-default-body-font-weight: var(--font-weight-normal);
69
77
  --card-default-body-line-height: var(--line-height-md);
70
78
 
package/src/system/components/CodeSnippet.svelte CHANGED
@@ -53,17 +53,17 @@
53
53
  <style>
54
54
  :global(:root) {
55
55
  /* Container. */
56
- --codesnippet-surface: var(--surface-neutral-lower);
57
- --codesnippet-border: var(--border-neutral-subtle);
56
+ --codesnippet-surface: color-mix(in srgb, var(--surface-neutral-lowest) 76%, transparent);
57
+ --codesnippet-border: var(--border-neutral);
58
58
  --codesnippet-border-width: var(--border-width-1);
59
59
  --codesnippet-radius: var(--radius-md);
60
60
  --codesnippet-padding: var(--space-16);
61
61
  --codesnippet-gap: var(--space-16);
62
62
 
63
63
  /* Code text. */
64
- --codesnippet-code-text: var(--text-primary);
64
+ --codesnippet-code-text: var(--text-brand-secondary);
65
65
  --codesnippet-code-font-family: var(--font-mono);
66
- --codesnippet-code-font-size: var(--font-size-sm);
66
+ --codesnippet-code-font-size: var(--font-size-md);
67
67
  --codesnippet-code-font-weight: var(--font-weight-normal);
68
68
  --codesnippet-code-line-height: var(--line-height-md);
69
69
 
package/src/system/components/Image.svelte CHANGED
@@ -29,7 +29,7 @@
29
29
 
30
30
  <style>
31
31
  :global(:root) {
32
- --image-default-radius: var(--radius-xl);
32
+ --image-default-radius: var(--radius-2xl);
33
33
  --image-default-border: var(--border-neutral);
34
34
  --image-default-border-width: var(--border-width-1);
35
35
  --image-default-shadow: var(--shadow-md);
package/src/system/components/ImageLightbox.svelte CHANGED
@@ -409,7 +409,7 @@
409
409
  --imagelightbox-tile-shadow: var(--shadow-md);
410
410
 
411
411
  /* overlay */
412
- --imagelightbox-overlay-surface: var(--overlay-high);
412
+ --imagelightbox-overlay-surface: color-mix(in srgb, var(--color-neutral-950) 76%, transparent);
413
413
 
414
414
  /* chrome (toolbar + close button) */
415
415
  --imagelightbox-chrome-surface: var(--surface-neutral-low);
package/src/system/components/Table.svelte CHANGED
@@ -16,39 +16,39 @@
16
16
  :global(:root) {
17
17
  /* Wrapper */
18
18
  --table-default-radius: var(--radius-md);
19
- --table-default-surface: var(--color-transparent);
20
- --table-default-border: var(--border-canvas-subtle);
21
- --table-default-border-width: var(--border-width-1);
19
+ --table-default-surface: color-mix(in srgb, var(--surface-neutral-lower) 57%, transparent);
20
+ --table-default-border: var(--border-neutral);
21
+ --table-default-border-width: var(--border-width-2);
22
22
  --table-default-shadow: var(--shadow-md);
23
23
 
24
24
  /* Header */
25
- --table-default-header-surface: var(--surface-canvas-low);
25
+ --table-default-header-surface: var(--surface-neutral-lowest);
26
26
  --table-default-header-text: var(--text-primary);
27
27
  --table-default-header-font-family: var(--font-sans);
28
- --table-default-header-font-size: var(--font-size-sm);
29
- --table-default-header-font-weight: var(--font-weight-normal);
28
+ --table-default-header-font-size: var(--font-size-lg);
29
+ --table-default-header-font-weight: var(--font-weight-semibold);
30
30
  --table-default-header-line-height: var(--line-height-xs);
31
31
  --table-default-header-padding: var(--space-12);
32
- --table-default-header-border: var(--border-canvas-subtle);
32
+ --table-default-header-border: var(--border-neutral);
33
33
  --table-default-header-border-width: var(--border-width-1);
34
34
 
35
35
  /* Cell */
36
36
  --table-default-cell-text: var(--text-secondary);
37
37
  --table-default-cell-font-family: var(--font-sans);
38
- --table-default-cell-font-size: var(--font-size-sm);
39
- --table-default-cell-font-weight: var(--font-weight-normal);
38
+ --table-default-cell-font-size: var(--font-size-md);
39
+ --table-default-cell-font-weight: var(--font-weight-medium);
40
40
  --table-default-cell-line-height: var(--line-height-md);
41
41
  --table-default-cell-padding: var(--space-8);
42
42
 
43
43
  /* Row */
44
44
  --table-default-row-surface: var(--color-transparent);
45
- --table-default-row-divider: var(--border-canvas-faint);
45
+ --table-default-row-divider: var(--border-neutral-subtle);
46
46
  --table-default-row-divider-width: var(--border-width-1);
47
47
  --table-default-row-stripe-surface: var(--color-transparent);
48
48
 
49
49
  /* Column */
50
- --table-default-column-divider: var(--border-canvas-faint);
51
- --table-default-column-divider-width: var(--border-width-0);
50
+ --table-default-column-divider: var(--border-neutral-faint);
51
+ --table-default-column-divider-width: var(--border-width-1);
52
52
  }
53
53
 
54
54
  .table-wrapper {
package/src/system/components/Tooltip.svelte CHANGED
@@ -27,14 +27,14 @@
27
27
  @use '../styles/padding' as *;
28
28
 
29
29
  :global(:root) {
30
- --tooltip-surface: var(--surface-neutral-highest);
30
+ --tooltip-surface: color-mix(in srgb, var(--surface-canvas-lowest) 75%, transparent);
31
31
  --tooltip-text: var(--text-primary);
32
32
  --tooltip-text-font-family: var(--font-sans);
33
33
  --tooltip-text-font-size: var(--font-size-sm);
34
34
  --tooltip-text-font-weight: var(--font-weight-normal);
35
35
  --tooltip-text-line-height: var(--line-height-md);
36
36
  --tooltip-border: var(--border-neutral);
37
- --tooltip-border-width: var(--border-width-0);
37
+ --tooltip-border-width: var(--border-width-1);
38
38
  --tooltip-radius: var(--radius-md);
39
39
  --tooltip-padding: var(--space-6);
40
40
  --tooltip-shadow: var(--shadow-md);