@motion-proto/live-tokens 0.44.0 → 0.46.0

package/CHANGELOG.md

@@ -1,5 +1,108 @@
 # Changelog
 
+## 0.46.0 — Harmony axes are numbered, and you assign them with a picker
+
+### Changed
+
+- **The four harmony axes are numbered, not named.** `AXIS_ROLES`
+  (`Anchor`/`Secondary`/`Tertiary`/`Quaternary`) is deleted; every call site
+  routes through the new `axisLabel(index)`, and only axis 1 keeps a word.
+  Rows read `1 Anchor`, `2`, `3`, `4`. History entries read `colors: axis 3
+  hue`, `colors: anchor rotate`, `colors: assign Brand`, `colors: unassign
+  Brand`. Aria and titles drop the doubled "axis": `Rotate axis 3 hue`,
+  `Brand, on axis 2 of 4. ... Delete to unassign.` `bindFamilyToAxis` and
+  `unbindFamily` keep their names, so the model verb is unchanged.
+
+- **One source of truth for axis status.** `axisStatuses(mode, axes)` replaces
+  the three per-surface derivations off `modeActiveAxes`, so the swatch row,
+  the wheel and the axes list can no longer disagree about a family bound to an
+  axis the current mode gives no position. That family now reads as
+  bound-and-off-wheel everywhere: the list keeps its chip at full strength and
+  states `Off the wheel · <Mode> uses N`, the free dot carries its axis numeral and
+  says why it left the ring, and the swatch row's mark tracks the same status.
+  Unused rows replace the bare "Empty" with their reason. New helpers
+  `activeAxisCount` and `axisLabel` keep those strings out of per-call-site
+  composition.
+
+- **Assigning a family to an axis is a picker.** Each row opens an `Assign to
+  ...` menu listing the eligible families, with meta reading `moves from
+  anchor` / `moves from axis 2`. Dragging a chip onto an axis still works and
+  is now the accelerator, not the only path. The axes description leads with
+  the click path and mentions drag second.
+
+- **The Colors view is laid out around the wheel.** Color Harmony and Harmony
+  axes sit side by side, the family swatches tuck under the harmony presets,
+  the axes list moves under the mode row, and the selected color's edit panel
+  moves under the wheel with the lightness bar inside it and Absolute Chroma in
+  its header. The three slider rows are grid-aligned on one column set.
+
+- **`Special` moves ahead of `Canvas` in `PALETTE_SPECS`.** It reorders the
+  family list in the editor and the block order in
+  `src/live-tokens/data/tokens.generated.css`. No token name is added, renamed
+  or removed, so no migration applies.
+
+- **SectionDivider's eyebrow letter-spacing default is
+  `--letter-spacing-normal`.** All three sizes previously defaulted to
+  `--letter-spacing-wide`. Consumers on a saved component config keep their own
+  value; consumers on `default` pick this up.
+
+### Added
+
+- **`UIMenuButton`**, the shared editor menu-button behind the axis picker.
+  `aria-haspopup="menu"`, arrow navigation that wraps, Home/End, and dismissal
+  on Escape, Tab or outside mousedown, each pinned by a test. Internal to the
+  editor; it is not exported from `@motion-proto/live-tokens/ui`.
+
+- **`AxisNumeral`**, the one numeral treatment shared by the swatch row, the
+  wheel and the axes list.
+
+### Removed
+
+- **The tint-neutrals button.** Absolute Chroma sits beside the harmony presets
+  and covers the case.
+
+- **Chrome the surfaces did not need.** The Theme eyebrow and the panel's
+  preview square in the Colors view, the Proportional preview eyebrow, and the
+  inline axes description, which is now an info icon. Selected rows lose the
+  third emphasis signal on `.role`: the settled treatment is inverted numeral
+  plus one row border.
+
+## 0.45.0 — The Color Story shows the tokens you actually have
+
+### Fixed
+
+- **The Color Story's text steps read the live tokens.** The primary, secondary
+  and tertiary row rendered the values the *Even neutral steps* pill would have
+  written, not the current ones, so the same step could report two different
+  ratios in the same frame (the Canvas header said 17.9:1 while the row said
+  14.7:1). Each step now resolves `--text-primary` / `--text-secondary` /
+  `--text-tertiary` through the same path the functional chips and tone pills
+  already used, renders in its own token, and reports its real contrast against
+  the canvas.
+
+### Removed
+
+- **The Color Story's action pills.** *Raise all text to AA*, *Even neutral
+  steps*, and the *Anchor at pure white/black* toggle, added in 0.44.0, are
+  gone. The story is a proportional preview, and authoring text steps from it
+  put a second palette editor next to the real one. Text steps are edited in
+  the Tokens view.
+
+- **The text-contrast solvers.** `solveTextContrast.ts` and `recommendText.ts`
+  (plus `applySolvedTextCurves` and `applySuggestedNeutralText`) backed only
+  those pills and are deleted. Both were internal to `src/editor/core/palettes/`
+  and never reachable through the package exports, so no consumer import
+  changes. `BW_GUARD_MIN_L` / `BW_GUARD_MAX_L` are unaffected: they live in
+  `paletteDerivation.ts` and still guard derived inverted text.
+
+### Changed
+
+- **The story's prose lines and its unlabeled header ratio are gone.** The three
+  sentences under Canvas ("The dominant surface. Body text sits here." and its
+  two siblings) said nothing the labelled steps don't, and the ratio beside the
+  Canvas heading was primary's, measured but never named. The stacked steps
+  carry all three ratios now.
+
 ## 0.44.0 — Every text step derives to body contrast
 
 ### Added

package/dist-plugin/index.cjs

@@ -198,10 +198,10 @@ function sampleCurve(anchors, xPos) {
 var PALETTE_SPECS = [
   { label: "Brand", cssNamespace: "brand", initialColor: { l: 0.5573, c: 0.1841, h: 25.49 } },
   { label: "Accent", cssNamespace: "accent", initialColor: { l: 0.7674, c: 0.164, h: 70.44 } },
+  { label: "Special", cssNamespace: "special", initialColor: { l: 0.6056, c: 0.2189, h: 292.72 } },
   { label: "Canvas", cssNamespace: "canvas", emptySelector: true, initialColor: { l: 0.2284, c: 0.0384, h: 282.93 } },
   { label: "Neutral", cssNamespace: "neutral", neutral: true, initialColor: { l: 0.5679, c: 0.0134, h: 240.07 } },
   { label: "Alternate", cssNamespace: "alternate", neutral: true, displayLabel: "Alternate (neutral)", initialColor: { l: 0.5873, c: 87e-4, h: 48.57 } },
-  { label: "Special", cssNamespace: "special", initialColor: { l: 0.6056, c: 0.2189, h: 292.72 } },
   { label: "Info", cssNamespace: "info", initialColor: { l: 0.5871, c: 0.1855, h: 259.56 } },
   { label: "Success", cssNamespace: "success", initialColor: { l: 0.7198, c: 0.1918, h: 149.52 } },
   { label: "Warning", cssNamespace: "warning", initialColor: { l: 0.6704, c: 0.1716, h: 48.75 } },

package/dist-plugin/index.js

@@ -157,10 +157,10 @@ function sampleCurve(anchors, xPos) {
 var PALETTE_SPECS = [
   { label: "Brand", cssNamespace: "brand", initialColor: { l: 0.5573, c: 0.1841, h: 25.49 } },
   { label: "Accent", cssNamespace: "accent", initialColor: { l: 0.7674, c: 0.164, h: 70.44 } },
+  { label: "Special", cssNamespace: "special", initialColor: { l: 0.6056, c: 0.2189, h: 292.72 } },
   { label: "Canvas", cssNamespace: "canvas", emptySelector: true, initialColor: { l: 0.2284, c: 0.0384, h: 282.93 } },
   { label: "Neutral", cssNamespace: "neutral", neutral: true, initialColor: { l: 0.5679, c: 0.0134, h: 240.07 } },
   { label: "Alternate", cssNamespace: "alternate", neutral: true, displayLabel: "Alternate (neutral)", initialColor: { l: 0.5873, c: 87e-4, h: 48.57 } },
-  { label: "Special", cssNamespace: "special", initialColor: { l: 0.6056, c: 0.2189, h: 292.72 } },
   { label: "Info", cssNamespace: "info", initialColor: { l: 0.5871, c: 0.1855, h: 259.56 } },
   { label: "Success", cssNamespace: "success", initialColor: { l: 0.7198, c: 0.1918, h: 149.52 } },
   { label: "Warning", cssNamespace: "warning", initialColor: { l: 0.6704, c: 0.1716, h: 48.75 } },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

package/src/editor/component-editor/scaffolding/ComponentFileManager.svelte

@@ -531,7 +531,6 @@
   .cfm-row-label {
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-semibold);
-    text-transform: uppercase;
     color: var(--ui-text-secondary);
     line-height: 1.1;
   }

package/src/editor/component-editor/scaffolding/ComponentFileMenu.svelte

@@ -108,7 +108,7 @@
   title="Load {component} Config"
   {files}
   {activeFileName}
-  systemBadge={{ label: 'system', title: 'Protected system config' }}
+  systemBadge={{ label: 'System', title: 'Protected system config' }}
   emptyMessage="No saved files"
   onload={handleLoad}
   ondelete={handleDelete}

package/src/editor/core/palettes/colorHarmony.ts

@@ -1,9 +1,9 @@
 // Harmony rotates HUE ONLY (Global invariant 6). Each palette keeps its own
 // OKLCH chroma and lightness; only a family's hue moves onto a geometric
 // relationship with the anchor. The anchor is axis 0's stored hue: harmony lives
-// on four fixed axes (Anchor/Secondary/Tertiary/Quaternary), each owning a hue
-// whether or not a color family is bound to it. No chroma clamp or cap lives
-// here; a saturated background is a legitimate choice, not something to correct.
+// on four fixed axes, numbered, each owning a hue whether or not a color family
+// is bound to it. No chroma clamp or cap lives here; a saturated background is a
+// legitimate choice, not something to correct.
 
 import type { Oklch } from './oklch';
 import type { PaletteConfig } from '../themes/themeTypes';
@@ -24,7 +24,6 @@ export type HarmonyMode =
 export const HARMONY_ELIGIBLE: readonly string[] = ['Brand', 'Accent', 'Canvas', 'Special', 'Neutral', 'Alternate'];
 
 export const AXIS_COUNT = 4;
-export const AXIS_ROLES = ['Anchor', 'Secondary', 'Tertiary', 'Quaternary'] as const;
 
 export interface HarmonyAxis {
   /** Hue in [0, 360). Always present, bound or not. */
@@ -85,7 +84,7 @@ const specInitialHue = (label: string): number =>
 
 /**
  * Seed the four axes for a fresh editor: the default trio bound (hues read from
- * `PALETTE_SPECS`, never hardcoded) and Quaternary unbound at anchor + 270 (the
+ * `PALETTE_SPECS`, never hardcoded) and axis 4 unbound at anchor + 270 (the
  * square slot-3 offset). Fresh array each call — it seeds mutable state.
  */
 export function defaultHarmonyAxes(): HarmonyAxis[] {
@@ -110,6 +109,36 @@ export function modeActiveAxes(mode: HarmonyMode): boolean[] {
   return slots.map((h, i) => slots.slice(0, i).every((prev) => prev !== h));
 }
 
+export type AxisStatus = 'on-wheel' | 'off-wheel' | 'unused';
+
+/**
+ * Per-axis presentation status. The single source every Colors surface reads,
+ * so the wheel, the swatch row and the axes list cannot disagree about the
+ * same axis.
+ *
+ *   on-wheel  — the mode deals this slot a distinct hue: rail, handle, numeral.
+ *   off-wheel — a family is bound, but the mode deals the slot no position.
+ *               The binding is real and returns when the mode changes; the
+ *               family edits as the free dot meanwhile.
+ *   unused    — no family bound and no position dealt.
+ */
+export function axisStatuses(mode: HarmonyMode, axes: HarmonyAxis[]): AxisStatus[] {
+  return modeActiveAxes(mode).map((active, i) => {
+    if (active) return 'on-wheel';
+    return axes[i].family !== null ? 'off-wheel' : 'unused';
+  });
+}
+
+/** How many axes `mode` deals a distinct position to. Reason strings quote it. */
+export function activeAxisCount(mode: HarmonyMode): number {
+  return modeActiveAxes(mode).filter(Boolean).length;
+}
+
+/** Axis 1 is the slot the other three are measured from, so it keeps a name. */
+export function axisLabel(index: number): string {
+  return index === 0 ? 'anchor' : `axis ${index + 1}`;
+}
+
 /**
  * Re-deal every axis's hue from `mode`'s geometry, anchored on axis 0's hue.
  * Bindings are preserved; `'custom'` imposes no constraint and returns a copy.
@@ -173,7 +202,7 @@ export function sanitizeHarmonyAxes(
       axis.hue = norm(palettes[axis.family].baseColor.h);
     }
   }
-  // With no stored axes (a theme predating them), the default Quaternary hue is
+  // With no stored axes (a theme predating them), the default axis 4 hue is
   // an offset from the anchor, so it follows the anchor's palette-seeded hue
   // rather than the spec hue the defaults were built from.
   const last = axes[AXIS_COUNT - 1];

package/src/editor/core/palettes/paletteDerivation.ts

@@ -40,10 +40,10 @@ export interface PaletteSpec {
 export const PALETTE_SPECS: readonly PaletteSpec[] = [
   { label: 'Brand',      cssNamespace: 'brand',     initialColor: { l: 0.5573, c: 0.1841, h: 25.49 } },
   { label: 'Accent',     cssNamespace: 'accent',    initialColor: { l: 0.7674, c: 0.164, h: 70.44 } },
+  { label: 'Special',    cssNamespace: 'special',   initialColor: { l: 0.6056, c: 0.2189, h: 292.72 } },
   { label: 'Canvas',     cssNamespace: 'canvas',    emptySelector: true, initialColor: { l: 0.2284, c: 0.0384, h: 282.93 } },
   { label: 'Neutral',    cssNamespace: 'neutral',   neutral: true, initialColor: { l: 0.5679, c: 0.0134, h: 240.07 } },
   { label: 'Alternate',  cssNamespace: 'alternate', neutral: true, displayLabel: 'Alternate (neutral)', initialColor: { l: 0.5873, c: 0.0087, h: 48.57 } },
-  { label: 'Special',    cssNamespace: 'special',   initialColor: { l: 0.6056, c: 0.2189, h: 292.72 } },
   { label: 'Info',       cssNamespace: 'info',      initialColor: { l: 0.5871, c: 0.1855, h: 259.56 } },
   { label: 'Success',    cssNamespace: 'success',   initialColor: { l: 0.7198, c: 0.1918, h: 149.52 } },
   { label: 'Warning',    cssNamespace: 'warning',   initialColor: { l: 0.6704, c: 0.1716, h: 48.75 } },
@@ -104,8 +104,7 @@ export const SCALES: readonly Scale[] = [
 ];
 
 /** Guard band for derived near-black/near-white text: values stay between
- *  ≈ #111 and ≈ #e8e8e8 unless pure black/white is opted into. The AA floor
- *  beats the guard (see `recommendText.ts`). */
+ *  ≈ #111 and ≈ #e8e8e8, the range most designers prefer over pure extremes. */
 export const BW_GUARD_MIN_L = 0.17;
 export const BW_GUARD_MAX_L = 0.93;
 

package/src/editor/core/store/editorTypes.ts

@@ -137,8 +137,8 @@ export interface EditorState {
   columns: ColumnsState;
   components: Record<string, ComponentSlice>;
   gradients: { tokens: GradientToken[] };
-  /** Four fixed axes (index = role: Anchor/Secondary/Tertiary/Quaternary); each
-   *  owns a hue; family is the live-bound color or null. */
+  /** Four fixed numbered axes (index 0 is the anchor); each owns a hue;
+   *  family is the live-bound color or null. */
   harmonyAxes: HarmonyAxis[];
   cssVars: Record<string, string>;
 }

package/src/editor/docs/CodeBlock.svelte

@@ -67,8 +67,6 @@
     font-family: var(--font-mono, ui-monospace, monospace);
     font-size: var(--font-size-xs, 0.75rem);
     color: var(--text-tertiary, #7e8285);
-    text-transform: uppercase;
-    letter-spacing: var(--letter-spacing-wider, 0.06em);
     background: color-mix(in srgb, var(--surface-neutral-lowest, #040c13) 60%, transparent);
     border-left: var(--border-width-1, 1px) solid var(--border-neutral-faint, #1c2327);
     border-bottom: var(--border-width-1, 1px) solid var(--border-neutral-faint, #1c2327);

package/src/editor/docs/Docs.svelte

@@ -449,7 +449,6 @@
     font-size: var(--font-size-lg, 1.125rem);
     line-height: 1.75rem;
     font-weight: var(--font-weight-bold, 700);
-    letter-spacing: 0.025em;
     color: var(--text-primary);
     text-decoration: none;
     cursor: pointer;
@@ -638,8 +637,6 @@
   .footer-dir {
     font-size: var(--font-size-xs, 0.75rem);
     color: var(--text-tertiary);
-    text-transform: uppercase;
-    letter-spacing: var(--letter-spacing-wider, 0.08em);
   }
   .chapter-link { text-decoration: none; }
 

package/src/editor/pages/ComponentEditorPage.svelte

@@ -343,9 +343,9 @@
     background: black;
   }
 
-  /* Divider between SYSTEM and CUSTOM groups. The horizontal line uses the
-     dimmer border token (sub-element separator), with an uppercase eyebrow
-     label that fades out when the rail is collapsed so the line still reads. */
+  /* Divider between the System and Custom groups. The horizontal line uses the
+     dimmer border token (sub-element separator), with an eyebrow label that
+     fades out when the rail is collapsed so the line still reads. */
   .nav-divider {
     display: grid;
     grid-template-columns: 48px 1fr;
@@ -360,8 +360,6 @@
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-tertiary);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
     opacity: 0;
     transition: opacity 180ms ease;
   }

package/src/editor/pages/EditorShell.svelte

@@ -299,9 +299,9 @@
     flex-shrink: 0;
   }
 
-  /* Divider between SYSTEM and CUSTOM groups. The horizontal line uses the
-     dimmer border token (sub-element separator), with an uppercase eyebrow
-     label that fades out when the rail is condensed so the line still reads. */
+  /* Divider between the System and Custom groups. The horizontal line uses the
+     dimmer border token (sub-element separator), with an eyebrow label that
+     fades out when the rail is condensed so the line still reads. */
   .nav-divider {
     display: grid;
     grid-template-columns: 48px 1fr;
@@ -316,8 +316,6 @@
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-tertiary);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
     opacity: 1;
     transition: opacity 180ms ease;
   }

package/src/editor/ui/ColorEditPanel.svelte

@@ -12,6 +12,9 @@
     /** Hide the confirm/cancel actions for live-apply consumers (Colors view
      *  readout) where edits commit through the store as they happen. */
     hideActions?: boolean;
+    /** Hide the preview square where the surrounding view already shows the
+     *  color (Colors view: wheel, swatches and derived scale all do). */
+    hidePreview?: boolean;
     onConfirm?: () => void;
     onCancel?: () => void;
     onRemoveOverride?: () => void;
@@ -36,6 +39,7 @@
     title = null,
     showRemoveOverride = false,
     hideActions = false,
+    hidePreview = false,
     onConfirm = () => {},
     onCancel = () => {},
     onRemoveOverride = () => {},
@@ -131,7 +135,9 @@
 
 <div class="hsl-panel">
   <div class="hsl-panel-header">
-    <div class="hsl-preview" style="background: {previewHex}"></div>
+    {#if !hidePreview}
+      <div class="hsl-preview" style="background: {previewHex}"></div>
+    {/if}
     {#if hasEyeDropper}
       <button
         class="eyedropper-btn"
@@ -190,7 +196,7 @@
         type="number"
         min="0"
         max="360"
-        value={hue}
+        value={Math.round(hue)}
         onchange={(e) => onHueChromaChange(Math.min(360, Math.max(0, +e.currentTarget.value)), chroma, lPct)}
       /><span class="hsl-slider-unit">&deg;</span>
     </div>
@@ -205,14 +211,14 @@
           oninput={(e) => onHueChromaChange(hue, +e.currentTarget.value, lPct)} />
       </div>
       <input
-        class="hsl-slider-input chroma-input"
+        class="hsl-slider-input"
         type="number"
         min="0"
         max={chromaMax}
         step="0.001"
         value={chroma.toFixed(3)}
         onchange={(e) => onHueChromaChange(hue, Math.min(chromaMax, Math.max(0, +e.currentTarget.value)), lPct)}
-      />
+      /><span class="hsl-slider-unit"></span>
     </div>
     <div class="hsl-slider-row">
       <span class="hsl-slider-label">L</span>
@@ -330,25 +336,24 @@
     flex-wrap: wrap;
   }
 
+  /* Shared column tracks keep every bar and every input the same width
+     regardless of row content; the row wrappers dissolve into the grid. */
   .hsl-sliders {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-6);
+    display: grid;
+    grid-template-columns: 2.5rem minmax(6rem, 1fr) 3.5rem 0.75rem;
+    gap: var(--ui-space-6) var(--ui-space-8);
+    align-items: center;
   }
 
   .hsl-slider-row {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-8);
+    display: contents;
   }
 
   .hsl-slider-label {
     font-size: var(--ui-font-size-md);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-tertiary);
-    width: 2.5rem;
     text-align: right;
-    flex-shrink: 0;
   }
 
   .slider-track {
@@ -356,8 +361,6 @@
     height: 1.25rem;
     border-radius: var(--ui-radius-md);
     border: 1px solid var(--ui-border-low);
-    flex: 1;
-    min-width: 6rem;
   }
 
   .chroma-hint {
@@ -422,9 +425,9 @@
     font-size: var(--ui-font-size-md);
     color: var(--ui-text-primary);
     font-family: var(--ui-font-mono);
-    width: 2.5rem;
+    width: 100%;
+    box-sizing: border-box;
     text-align: right;
-    flex-shrink: 0;
     background: var(--ui-surface-lowest);
     border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
@@ -433,10 +436,6 @@
     appearance: textfield;
   }
 
-  .hsl-slider-input.chroma-input {
-    width: 3.5rem;
-  }
-
   .hsl-slider-input::-webkit-inner-spin-button,
   .hsl-slider-input::-webkit-outer-spin-button {
     -webkit-appearance: none;
@@ -452,7 +451,5 @@
     font-size: var(--ui-font-size-md);
     color: var(--ui-text-muted);
     font-family: var(--ui-font-mono);
-    width: 0.75rem;
-    flex-shrink: 0;
   }
 </style>

package/src/editor/ui/EditorViewSwitcher.svelte

@@ -116,10 +116,9 @@
   }
 
   .seg-label {
-    font-size: 10px;
+    font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-semibold);
-    text-transform: uppercase;
-    color: #fff;
+    color: var(--ui-text-primary);
     padding-left: var(--ui-space-2);
     margin-bottom: 2px;
   }

package/src/editor/ui/FileLoadList.svelte

@@ -152,7 +152,7 @@
           <span class="updated-at" title={file.updatedAt}>{formatUpdatedAt(file.updatedAt)}</span>
         {/if}
         {#if file.fileName === activeFileName}
-          <span class="active-badge">active</span>
+          <span class="active-badge">Active</span>
         {/if}
         {#if onexport}
           <button
@@ -207,10 +207,9 @@
     padding: 4px 0;
     background: none;
     border: none;
-    color: #888;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
+    color: var(--ui-text-tertiary);
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
     cursor: pointer;
     text-align: left;
   }
@@ -312,13 +311,12 @@
 
   .system-badge {
     flex-shrink: 0;
-    font-size: 11px;
+    font-size: var(--ui-font-size-xs);
     padding: 1px 6px;
     border-radius: 3px;
     background: transparent;
     border: 1px solid #3a3a3a;
-    color: #888;
-    text-transform: uppercase;
+    color: var(--ui-text-tertiary);
   }
 
   .updated-at {
@@ -331,7 +329,7 @@
 
   .active-badge {
     flex-shrink: 0;
-    font-size: 12px;
+    font-size: var(--ui-font-size-xs);
     padding: 1px 6px;
     border-radius: 3px;
     background: #333;

package/src/editor/ui/ManifestFileManager.svelte

@@ -343,7 +343,6 @@
   .mfm-header-label {
     font-size: var(--ui-font-size-xs);
     color: var(--ui-text-secondary);
-    text-transform: uppercase;
   }
 
   .mfm-card {
@@ -380,9 +379,8 @@
   }
 
   .mfm-card-label {
-    font-size: 10px;
+    font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-semibold);
-    text-transform: uppercase;
     color: var(--ui-text-tertiary);
   }
 

package/src/editor/ui/ProjectFontsSection.svelte

@@ -539,8 +539,6 @@
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-tertiary);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
   }
   .pf-browse-row {
     display: flex;
@@ -569,8 +567,6 @@
     gap: var(--ui-space-8);
     color: var(--ui-text-tertiary);
     font-size: var(--ui-font-size-xs);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
   }
   .pf-add-divider::before,
   .pf-add-divider::after {

package/src/editor/ui/SurfacesTab.svelte

@@ -290,9 +290,9 @@
   }
 
   .group-title {
-    font-size: var(--ui-font-size-lg);
-    font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-xl);
+    font-weight: var(--ui-font-weight-bold);
+    color: var(--ui-text-primary);
     margin: 0;
   }
 

package/src/editor/ui/TextStylesSection.svelte

@@ -23,28 +23,28 @@
 
       <div class="ts-controls">
         <div class="ts-field">
-          <span class="ts-label">family</span>
+          <span class="ts-label">Family</span>
           <UIFontFamilySelector variable={`${style.prefix}-font-family`} />
         </div>
         <div class="ts-field">
-          <span class="ts-label">size</span>
+          <span class="ts-label">Size</span>
           <UIFontSizeSelector variable={`${style.prefix}-font-size`} />
         </div>
         <div class="ts-field">
-          <span class="ts-label">weight</span>
+          <span class="ts-label">Weight</span>
           <UIFontWeightSelector variable={`${style.prefix}-font-weight`} />
         </div>
         <div class="ts-field">
-          <span class="ts-label">letter spacing</span>
+          <span class="ts-label">Letter spacing</span>
           <UILetterSpacingSelector variable={`${style.prefix}-letter-spacing`} />
         </div>
         <div class="ts-field">
-          <span class="ts-label">line height</span>
+          <span class="ts-label">Line height</span>
           <UILineHeightSelector variable={`${style.prefix}-line-height`} />
         </div>
         {#if style.hasTextTransform}
           <div class="ts-field">
-            <span class="ts-label">transform</span>
+            <span class="ts-label">Transform</span>
             <UITextTransformSelector variable={`${style.prefix}-text-transform`} />
           </div>
         {/if}
@@ -165,8 +165,6 @@
   .ts-label {
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-medium);
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
     color: var(--ui-text-muted);
     white-space: nowrap;
   }

package/src/editor/ui/ThemeFileManager.svelte

@@ -417,7 +417,7 @@
   activeFileName={$activeFileName}
   sortable
   showUpdatedAt
-  systemBadge={{ label: 'system', title: 'Protected system theme' }}
+  systemBadge={{ label: 'System', title: 'Protected system theme' }}
   emptyMessage="No saved files"
   canDelete={(file) => file.fileName !== 'default' && file.fileName !== $themeProductionInfo?.fileName}
   onload={handleLoad}
@@ -460,7 +460,6 @@
   .tfm-header-label {
     font-size: var(--ui-font-size-xs);
     color: var(--ui-text-secondary);
-    text-transform: uppercase;
   }
 
   /* Two-card pipeline (Editor → Production) — theme card + production card
@@ -508,7 +507,6 @@
   .tfm-card-label {
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-semibold);
-    text-transform: uppercase;
     color: var(--ui-text-secondary);
     line-height: 1.1;
   }