@motion-proto/live-tokens 0.65.1 → 0.67.0

package/src/live-tokens/data/sketch-styles/marker.json

@@ -0,0 +1,47 @@
+{
+  "name": "Marker",
+  "settings": {
+    "label": "Marker",
+    "blurb": "Broad translucent nib gone round twice on the same line, so the overlap darkens and the ink pools where it slows.",
+    "fillTravel": 2,
+    "strokeTravel": 1.5,
+    "wobble": 56,
+    "roughness": 3,
+    "borderWavelength": 1.3,
+    "waveform": 1.4,
+    "strokeWidth": 4,
+    "doubleStroke": true,
+    "retraceOffset": 2.2,
+    "retracePass": "copy",
+    "fillStyle": "solid",
+    "hatchInk": 0.4,
+    "strokeStyle": "solid",
+    "pressure": 0.2,
+    "pressureMod": 0.25,
+    "pooling": 2,
+    "strokeInk": 0.52,
+    "maskOn": true,
+    "maskBlobX": 230,
+    "maskBlobY": 230,
+    "maskBlobLinked": true,
+    "maskAngle": 0,
+    "maskOutputMin": 0.76,
+    "maskOutputMax": 1,
+    "maskOctaves": 3,
+    "maskGrain": "fractal",
+    "maskPosterize": 4,
+    "maskSoftness": 0,
+    "jitterX": 3,
+    "jitterY": 3,
+    "jitterRot": 0.8,
+    "jitterScale": 0.045,
+    "cornerSpread": 10,
+    "cornerTravel": 8,
+    "iconTravel": 1.25,
+    "iconWavelength": 0.625,
+    "iconMaskOn": true,
+    "iconMaskScale": 4
+  },
+  "updatedAt": "2026-08-28T14:45:04.324Z",
+  "createdAt": "2026-08-28T14:45:04.324Z"
+}

package/src/live-tokens/data/sketch-styles/napkin.json

@@ -0,0 +1,47 @@
+{
+  "name": "Napkin",
+  "settings": {
+    "label": "Napkin",
+    "blurb": "Ballpoint in a hurry. Everything loose at once: a square wave sends every edge to full travel, and the second pass lands wherever it lands.",
+    "fillTravel": 3,
+    "strokeTravel": 2.25,
+    "wobble": 50,
+    "roughness": 3,
+    "borderWavelength": 1,
+    "waveform": 2.5,
+    "strokeWidth": 2.25,
+    "doubleStroke": true,
+    "retraceOffset": 4,
+    "retracePass": "reseeded",
+    "fillStyle": "solid",
+    "hatchInk": 0.4,
+    "strokeStyle": "solid",
+    "pressure": 0.45,
+    "pressureMod": 0.6,
+    "pooling": 2.5,
+    "strokeInk": 1,
+    "maskOn": true,
+    "maskBlobX": 150,
+    "maskBlobY": 150,
+    "maskBlobLinked": true,
+    "maskAngle": 0,
+    "maskOutputMin": 0.43,
+    "maskOutputMax": 0.95,
+    "maskOctaves": 2,
+    "maskGrain": "fractal",
+    "maskPosterize": 2,
+    "maskSoftness": 10,
+    "jitterX": 6,
+    "jitterY": 6,
+    "jitterRot": 1.8,
+    "jitterScale": 0.1,
+    "cornerSpread": 20,
+    "cornerTravel": 17,
+    "iconTravel": 2.25,
+    "iconWavelength": 0.625,
+    "iconMaskOn": true,
+    "iconMaskScale": 3.6
+  },
+  "updatedAt": "2026-08-28T15:47:36.934Z",
+  "createdAt": "2026-08-28T15:47:36.934Z"
+}

package/src/live-tokens/data/sketch-styles/pencil.json

@@ -0,0 +1,47 @@
+{
+  "name": "Pencil",
+  "settings": {
+    "label": "Pencil",
+    "blurb": "Two graphite passes on their own seeds, so the outline disagrees with itself the way a hand coming back round does. Tight grain, little else.",
+    "fillTravel": 0.75,
+    "strokeTravel": 1.25,
+    "wobble": 30,
+    "roughness": 3,
+    "borderWavelength": 1,
+    "waveform": 1,
+    "strokeWidth": 1.25,
+    "doubleStroke": true,
+    "retraceOffset": 1.5,
+    "retracePass": "reseeded",
+    "fillStyle": "solid",
+    "hatchInk": 0.4,
+    "strokeStyle": "solid",
+    "pressure": 0.15,
+    "pressureMod": 0.3,
+    "pooling": 0,
+    "strokeInk": 0.85,
+    "maskOn": true,
+    "maskBlobX": 525,
+    "maskBlobY": 47,
+    "maskBlobLinked": false,
+    "maskAngle": 67,
+    "maskOutputMin": 0.59,
+    "maskOutputMax": 1,
+    "maskOctaves": 3,
+    "maskGrain": "turbulence",
+    "maskPosterize": 1,
+    "maskSoftness": 0,
+    "jitterX": 1.5,
+    "jitterY": 1.5,
+    "jitterRot": 0.35,
+    "jitterScale": 0.022,
+    "cornerSpread": 6,
+    "cornerTravel": 4.5,
+    "iconTravel": 0.75,
+    "iconWavelength": 0.625,
+    "iconMaskOn": true,
+    "iconMaskScale": 1
+  },
+  "updatedAt": "2026-08-28T14:35:06.291Z",
+  "createdAt": "2026-08-28T14:35:06.291Z"
+}

package/src/live-tokens/data/sketch-styles/whiteboard.json

@@ -0,0 +1,47 @@
+{
+  "name": "Whiteboard",
+  "settings": {
+    "label": "Whiteboard",
+    "blurb": "The fattest nib on glass. One long smooth undulation, and a veined mask that streaks the fill like a half-wiped board.",
+    "fillTravel": 2.5,
+    "strokeTravel": 2.5,
+    "wobble": 90,
+    "roughness": 1,
+    "borderWavelength": 1.5,
+    "waveform": 1,
+    "strokeWidth": 5.5,
+    "doubleStroke": true,
+    "retraceOffset": 3,
+    "retracePass": "copy",
+    "fillStyle": "solid",
+    "hatchInk": 0.4,
+    "strokeStyle": "solid",
+    "pressure": 0.15,
+    "pressureMod": 0.15,
+    "pooling": 3.5,
+    "strokeInk": 0.66,
+    "maskOn": true,
+    "maskBlobX": 180,
+    "maskBlobY": 38,
+    "maskBlobLinked": false,
+    "maskAngle": 0,
+    "maskOutputMin": 0.68,
+    "maskOutputMax": 1,
+    "maskOctaves": 3,
+    "maskGrain": "turbulence",
+    "maskPosterize": 3,
+    "maskSoftness": 0,
+    "jitterX": 4.5,
+    "jitterY": 4.5,
+    "jitterRot": 3,
+    "jitterScale": 0.07,
+    "cornerSpread": 14,
+    "cornerTravel": 11,
+    "iconTravel": 1.75,
+    "iconWavelength": 0.625,
+    "iconMaskOn": true,
+    "iconMaskScale": 1.5
+  },
+  "updatedAt": "2026-08-28T14:46:58.140Z",
+  "createdAt": "2026-08-28T14:46:58.140Z"
+}

package/src/live-tokens/data/themes/autumn.json

@@ -2655,7 +2655,7 @@
       "createdAt": "2026-05-10T19:28:06.893Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--button-primary-surface": "--surface-brand-high",
+        "--button-primary-surface": "--surface-brand",
         "--button-primary-text": "--text-primary",
         "--button-primary-text-font-family": "--font-sans",
         "--button-primary-text-font-size": "--font-size-lg",
@@ -2672,7 +2672,7 @@
         "--button-primary-disabled-text": "--text-tertiary",
         "--button-primary-disabled-border": "--border-neutral-faint",
         "--button-primary-icon-size": "--icon-size-md",
-        "--button-secondary-surface": "--surface-neutral-high",
+        "--button-secondary-surface": "--surface-neutral",
         "--button-secondary-text": "--text-primary",
         "--button-secondary-text-font-family": "--font-sans",
         "--button-secondary-text-font-size": "--font-size-lg",
@@ -3064,7 +3064,7 @@
       "createdAt": "2026-06-14T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--iconbutton-primary-surface": "--surface-brand-high",
+        "--iconbutton-primary-surface": "--surface-brand",
         "--iconbutton-primary-icon": "--text-primary",
         "--iconbutton-primary-border": "--border-brand",
         "--iconbutton-primary-border-width": "--border-width-1",
@@ -3077,7 +3077,7 @@
         "--iconbutton-primary-disabled-surface": "--color-neutral-700",
         "--iconbutton-primary-disabled-icon": "--text-tertiary",
         "--iconbutton-primary-disabled-border": "--border-neutral-faint",
-        "--iconbutton-secondary-surface": "--surface-neutral-high",
+        "--iconbutton-secondary-surface": "--surface-neutral",
         "--iconbutton-secondary-icon": "--text-primary",
         "--iconbutton-secondary-border": "--border-neutral",
         "--iconbutton-secondary-border-width": "--border-width-1",

package/src/live-tokens/data/themes/halloween.json

@@ -2694,7 +2694,7 @@
       "createdAt": "2026-05-10T19:28:06.893Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--button-primary-surface": "--surface-brand-high",
+        "--button-primary-surface": "--surface-brand",
         "--button-primary-text": "--text-primary",
         "--button-primary-text-font-family": "--font-sans",
         "--button-primary-text-font-size": "--font-size-lg",
@@ -2711,7 +2711,7 @@
         "--button-primary-disabled-text": "--text-tertiary",
         "--button-primary-disabled-border": "--border-neutral-faint",
         "--button-primary-icon-size": "--icon-size-md",
-        "--button-secondary-surface": "--surface-neutral-high",
+        "--button-secondary-surface": "--surface-neutral",
         "--button-secondary-text": "--text-primary",
         "--button-secondary-text-font-family": "--font-sans",
         "--button-secondary-text-font-size": "--font-size-lg",
@@ -3103,7 +3103,7 @@
       "createdAt": "2026-06-14T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--iconbutton-primary-surface": "--surface-brand-high",
+        "--iconbutton-primary-surface": "--surface-brand",
         "--iconbutton-primary-icon": "--text-primary",
         "--iconbutton-primary-border": "--border-brand",
         "--iconbutton-primary-border-width": "--border-width-3",
@@ -3116,7 +3116,7 @@
         "--iconbutton-primary-disabled-surface": "--color-neutral-700",
         "--iconbutton-primary-disabled-icon": "--text-tertiary",
         "--iconbutton-primary-disabled-border": "--border-neutral-faint",
-        "--iconbutton-secondary-surface": "--surface-neutral-high",
+        "--iconbutton-secondary-surface": "--surface-neutral",
         "--iconbutton-secondary-icon": "--text-primary",
         "--iconbutton-secondary-border": "--border-neutral",
         "--iconbutton-secondary-border-width": "--border-width-3",

package/src/live-tokens/data/themes/midnight-study.json

@@ -2711,7 +2711,7 @@
       "createdAt": "2026-05-10T19:28:06.893Z",
       "updatedAt": "2026-08-20T00:00:00.000Z",
       "aliases": {
-        "--button-primary-surface": "--surface-brand-high",
+        "--button-primary-surface": "--surface-brand",
         "--button-primary-text": "--text-primary",
         "--button-primary-text-font-family": "--font-sans",
         "--button-primary-text-font-size": "--font-size-lg",
@@ -2728,7 +2728,7 @@
         "--button-primary-disabled-text": "--text-tertiary",
         "--button-primary-disabled-border": "--border-neutral-faint",
         "--button-primary-icon-size": "--icon-size-md",
-        "--button-secondary-surface": "--surface-neutral-high",
+        "--button-secondary-surface": "--surface-neutral",
         "--button-secondary-text": "--text-primary",
         "--button-secondary-text-font-family": "--font-sans",
         "--button-secondary-text-font-size": "--font-size-lg",
@@ -3121,7 +3121,7 @@
       "createdAt": "2026-06-14T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--iconbutton-primary-surface": "--surface-brand-high",
+        "--iconbutton-primary-surface": "--surface-brand",
         "--iconbutton-primary-icon": "--text-primary",
         "--iconbutton-primary-border": "--border-brand",
         "--iconbutton-primary-border-width": "--border-width-1",
@@ -3134,7 +3134,7 @@
         "--iconbutton-primary-disabled-surface": "--color-neutral-700",
         "--iconbutton-primary-disabled-icon": "--text-tertiary",
         "--iconbutton-primary-disabled-border": "--border-neutral-faint",
-        "--iconbutton-secondary-surface": "--surface-neutral-high",
+        "--iconbutton-secondary-surface": "--surface-neutral",
         "--iconbutton-secondary-icon": "--text-primary",
         "--iconbutton-secondary-border": "--border-neutral",
         "--iconbutton-secondary-border-width": "--border-width-1",

package/src/live-tokens/data/themes/ocean.json

@@ -2654,7 +2654,7 @@
       "createdAt": "2026-05-10T19:28:06.893Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--button-primary-surface": "--surface-brand-high",
+        "--button-primary-surface": "--surface-brand",
         "--button-primary-text": "--text-primary",
         "--button-primary-text-font-family": "--font-sans",
         "--button-primary-text-font-size": "--font-size-lg",
@@ -2671,7 +2671,7 @@
         "--button-primary-disabled-text": "--text-tertiary",
         "--button-primary-disabled-border": "--border-neutral-faint",
         "--button-primary-icon-size": "--icon-size-md",
-        "--button-secondary-surface": "--surface-neutral-high",
+        "--button-secondary-surface": "--surface-neutral",
         "--button-secondary-text": "--text-primary",
         "--button-secondary-text-font-family": "--font-sans",
         "--button-secondary-text-font-size": "--font-size-lg",
@@ -3063,7 +3063,7 @@
       "createdAt": "2026-06-14T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--iconbutton-primary-surface": "--surface-brand-high",
+        "--iconbutton-primary-surface": "--surface-brand",
         "--iconbutton-primary-icon": "--text-primary",
         "--iconbutton-primary-border": "--border-brand",
         "--iconbutton-primary-border-width": "--border-width-1",
@@ -3076,7 +3076,7 @@
         "--iconbutton-primary-disabled-surface": "--color-neutral-700",
         "--iconbutton-primary-disabled-icon": "--text-tertiary",
         "--iconbutton-primary-disabled-border": "--border-neutral-faint",
-        "--iconbutton-secondary-surface": "--surface-neutral-high",
+        "--iconbutton-secondary-surface": "--surface-neutral",
         "--iconbutton-secondary-icon": "--text-primary",
         "--iconbutton-secondary-border": "--border-neutral",
         "--iconbutton-secondary-border-width": "--border-width-1",

package/src/live-tokens/data/themes/royal-velvet.json

@@ -2685,7 +2685,7 @@
       "createdAt": "2026-05-10T19:28:06.893Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--button-primary-surface": "--surface-brand-high",
+        "--button-primary-surface": "--surface-brand",
         "--button-primary-text": "--text-primary",
         "--button-primary-text-font-family": "--font-sans",
         "--button-primary-text-font-size": "--font-size-lg",
@@ -2702,7 +2702,7 @@
         "--button-primary-disabled-text": "--text-tertiary",
         "--button-primary-disabled-border": "--border-neutral-faint",
         "--button-primary-icon-size": "--icon-size-md",
-        "--button-secondary-surface": "--surface-neutral-high",
+        "--button-secondary-surface": "--surface-neutral",
         "--button-secondary-text": "--text-primary",
         "--button-secondary-text-font-family": "--font-sans",
         "--button-secondary-text-font-size": "--font-size-lg",
@@ -3094,7 +3094,7 @@
       "createdAt": "2026-06-14T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--iconbutton-primary-surface": "--surface-brand-high",
+        "--iconbutton-primary-surface": "--surface-brand",
         "--iconbutton-primary-icon": "--text-primary",
         "--iconbutton-primary-border": "--border-brand",
         "--iconbutton-primary-border-width": "--border-width-2",
@@ -3107,7 +3107,7 @@
         "--iconbutton-primary-disabled-surface": "--color-neutral-700",
         "--iconbutton-primary-disabled-icon": "--text-tertiary",
         "--iconbutton-primary-disabled-border": "--border-neutral-faint",
-        "--iconbutton-secondary-surface": "--surface-neutral-high",
+        "--iconbutton-secondary-surface": "--surface-neutral",
         "--iconbutton-secondary-icon": "--text-primary",
         "--iconbutton-secondary-border": "--border-neutral",
         "--iconbutton-secondary-border-width": "--border-width-2",

package/src/live-tokens/data/themes/sketchy.json

@@ -2668,7 +2668,7 @@
       "createdAt": "2026-05-10T19:28:06.893Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
       "aliases": {
-        "--button-primary-surface": "--surface-brand-high",
+        "--button-primary-surface": "--surface-brand",
         "--button-primary-text": "--text-primary",
         "--button-primary-text-font-family": "--font-sans",
         "--button-primary-text-font-size": "--font-size-lg",
@@ -2685,7 +2685,7 @@
         "--button-primary-disabled-text": "--text-tertiary",
         "--button-primary-disabled-border": "--border-neutral-faint",
         "--button-primary-icon-size": "--icon-size-md",
-        "--button-secondary-surface": "--surface-neutral-high",
+        "--button-secondary-surface": "--surface-neutral",
         "--button-secondary-text": "--text-primary",
         "--button-secondary-text-font-family": "--font-sans",
         "--button-secondary-text-font-size": "--font-size-lg",
@@ -3077,7 +3077,7 @@
       "createdAt": "2026-06-14T00:00:00.000Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
       "aliases": {
-        "--iconbutton-primary-surface": "--surface-brand-high",
+        "--iconbutton-primary-surface": "--surface-brand",
         "--iconbutton-primary-icon": "--text-primary",
         "--iconbutton-primary-border": "--border-brand",
         "--iconbutton-primary-border-width": "--border-width-1",
@@ -3090,7 +3090,7 @@
         "--iconbutton-primary-disabled-surface": "--color-neutral-700",
         "--iconbutton-primary-disabled-icon": "--text-tertiary",
         "--iconbutton-primary-disabled-border": "--border-neutral-faint",
-        "--iconbutton-secondary-surface": "--surface-neutral-high",
+        "--iconbutton-secondary-surface": "--surface-neutral",
         "--iconbutton-secondary-icon": "--text-primary",
         "--iconbutton-secondary-border": "--border-neutral",
         "--iconbutton-secondary-border-width": "--border-width-1",

package/src/live-tokens/data/themes/spring-meadow.json

@@ -2641,7 +2641,7 @@
       "createdAt": "2026-05-10T19:28:06.893Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--button-primary-surface": "--surface-brand-high",
+        "--button-primary-surface": "--surface-brand",
         "--button-primary-text": "--text-primary",
         "--button-primary-text-font-family": "--font-sans",
         "--button-primary-text-font-size": "--font-size-lg",
@@ -2658,7 +2658,7 @@
         "--button-primary-disabled-text": "--text-tertiary",
         "--button-primary-disabled-border": "--border-neutral-faint",
         "--button-primary-icon-size": "--icon-size-md",
-        "--button-secondary-surface": "--surface-neutral-high",
+        "--button-secondary-surface": "--surface-neutral",
         "--button-secondary-text": "--text-primary",
         "--button-secondary-text-font-family": "--font-sans",
         "--button-secondary-text-font-size": "--font-size-lg",
@@ -3050,7 +3050,7 @@
       "createdAt": "2026-06-14T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--iconbutton-primary-surface": "--surface-brand-high",
+        "--iconbutton-primary-surface": "--surface-brand",
         "--iconbutton-primary-icon": "--text-primary",
         "--iconbutton-primary-border": "--border-brand",
         "--iconbutton-primary-border-width": "--border-width-1",
@@ -3063,7 +3063,7 @@
         "--iconbutton-primary-disabled-surface": "--color-neutral-700",
         "--iconbutton-primary-disabled-icon": "--text-tertiary",
         "--iconbutton-primary-disabled-border": "--border-neutral-faint",
-        "--iconbutton-secondary-surface": "--surface-neutral-high",
+        "--iconbutton-secondary-surface": "--surface-neutral",
         "--iconbutton-secondary-icon": "--text-primary",
         "--iconbutton-secondary-border": "--border-neutral",
         "--iconbutton-secondary-border-width": "--border-width-1",

package/src/live-tokens/data/themes/sunset.json

@@ -2693,7 +2693,7 @@
       "createdAt": "2026-05-10T19:28:06.893Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--button-primary-surface": "--surface-brand-high",
+        "--button-primary-surface": "--surface-brand",
         "--button-primary-text": "--text-primary",
         "--button-primary-text-font-family": "--font-sans",
         "--button-primary-text-font-size": "--font-size-lg",
@@ -2710,7 +2710,7 @@
         "--button-primary-disabled-text": "--text-tertiary",
         "--button-primary-disabled-border": "--border-neutral-faint",
         "--button-primary-icon-size": "--icon-size-md",
-        "--button-secondary-surface": "--surface-neutral-high",
+        "--button-secondary-surface": "--surface-neutral",
         "--button-secondary-text": "--text-primary",
         "--button-secondary-text-font-family": "--font-sans",
         "--button-secondary-text-font-size": "--font-size-lg",
@@ -3102,7 +3102,7 @@
       "createdAt": "2026-06-14T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--iconbutton-primary-surface": "--surface-brand-high",
+        "--iconbutton-primary-surface": "--surface-brand",
         "--iconbutton-primary-icon": "--text-primary",
         "--iconbutton-primary-border": "--border-brand",
         "--iconbutton-primary-border-width": "--border-width-1",
@@ -3115,7 +3115,7 @@
         "--iconbutton-primary-disabled-surface": "--color-neutral-700",
         "--iconbutton-primary-disabled-icon": "--text-tertiary",
         "--iconbutton-primary-disabled-border": "--border-neutral-faint",
-        "--iconbutton-secondary-surface": "--surface-neutral-high",
+        "--iconbutton-secondary-surface": "--surface-neutral",
         "--iconbutton-secondary-icon": "--text-primary",
         "--iconbutton-secondary-border": "--border-neutral",
         "--iconbutton-secondary-border-width": "--border-width-1",

package/src/system/components/Button.svelte

@@ -74,7 +74,7 @@
       --button-shimmer: block;
 
       /* Primary */
-      --button-primary-surface: var(--surface-brand-high);
+      --button-primary-surface: var(--surface-brand);
       --button-primary-text: var(--text-primary);
       --button-primary-text-font-family: var(--font-sans);
       --button-primary-text-font-size: var(--font-size-lg);
@@ -93,7 +93,7 @@
       --button-primary-icon-size: var(--icon-size-md);
 
       /* Secondary */
-      --button-secondary-surface: var(--surface-neutral-high);
+      --button-secondary-surface: var(--surface-neutral);
       --button-secondary-text: var(--text-primary);
       --button-secondary-text-font-family: var(--font-sans);
       --button-secondary-text-font-size: var(--font-size-lg);

package/src/system/components/IconButton.svelte

@@ -49,7 +49,7 @@
 
    :global(:root) {
       /* Primary */
-      --iconbutton-primary-surface: var(--surface-brand-high);
+      --iconbutton-primary-surface: var(--surface-brand);
       --iconbutton-primary-icon: var(--text-primary);
       --iconbutton-primary-border: var(--border-brand);
       --iconbutton-primary-border-width: var(--border-width-1);
@@ -64,7 +64,7 @@
       --iconbutton-primary-disabled-border: var(--border-neutral-faint);
 
       /* Secondary */
-      --iconbutton-secondary-surface: var(--surface-neutral-high);
+      --iconbutton-secondary-surface: var(--surface-neutral);
       --iconbutton-secondary-icon: var(--text-primary);
       --iconbutton-secondary-border: var(--border-neutral);
       --iconbutton-secondary-border-width: var(--border-width-1);

package/src/system/styles/fonts.css

@@ -4,11 +4,11 @@
 /* Adobe Typekit — fira-code */
 @import url('https://use.typekit.net/jes8oow.css');
 
-/* Google Fonts — GFS Didot */
-@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap');
+/* Google Fonts — Manrope */
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
 
-/* Google Fonts — Comfortaa */
-@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
+/* Google Fonts — Arvo */
+@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 
-/* Google Fonts — Figtree */
-@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300..900&display=swap');
+/* Google Fonts — GFS Didot */
+@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap');

package/template/src/main.ts

@@ -9,4 +9,17 @@ import App from './App.svelte';
 
 configureEditor({ storagePrefix: 'app-' });
 
-bootLiveTokens(App, '#app');
+/** The sketchstyles saved in this project, registered so they reach a built
+    site. The editor re-reads the directory over the dev API; this snapshot is
+    what a build has instead. */
+const sketchFiles = import.meta.glob<{ name?: string; settings: unknown }>(
+  './live-tokens/data/sketch-styles/*.json',
+  { eager: true, import: 'default' },
+);
+
+const sketchLooks = Object.entries(sketchFiles).map(([path, file]) => {
+  const id = path.split('/').pop()!.replace('.json', '');
+  return { id, label: file.name || id, settings: file.settings };
+});
+
+bootLiveTokens(App, '#app', { sketchLooks });