@motion-proto/live-tokens 0.54.0 → 0.54.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 0.54.1 — Palette editing opens on a curve
+
+### Changed
+
+- **The base-color panel opens with the rest of the palette editor.** The panel
+  above the swatch grid appeared and vanished in one frame while the swatch
+  grid and the derived row animated, so opening a base color read as a jump. It
+  now reveals on the same height transition as its neighbours.
+
+- **The floating token pills read as polished chrome.** The gradient was tuned
+  against a dark ground and sat too low in the scale for a light page, where it
+  looked tarnished. The bands keep their spacing and move up the scale, the
+  border becomes a dark hairline, and the strings drop to 0.3 opacity on light
+  pages, where a black stroke at 0.5 reads far heavier than the white stroke it
+  mirrors. The darkest stop stays at `#8f9090`, so the black label keeps AA.
+
+- **The demo hero labels its theme picker.** The trigger showed the open
+  theme's name with nothing saying what it picked. A "Theme" label sits above
+  it, and the actions row bottom-aligns so the picker and the buttons sit on
+  one line.
+
 ## 0.54.0 — Shadow weight and text insets follow their context
 
 ### Fixed

package/package.json

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

package/src/editor/ui/PaletteEditor.svelte

@@ -545,7 +545,7 @@
     {/snippet}
   </PaletteBase>
 
-  {#if paletteEditorOpen || (isEditingBase && panelOpen && editingColor)}
+  <UIReveal open={paletteEditorOpen || (isEditingBase && panelOpen && !!editingColor)}>
     <div class="swatch-grid" style="--swatch-cols: {paletteStepLightness.length + 2}">
       <div class="base-panel" style="grid-column: 2 / {paletteStepLightness.length + 2}">
         <ColorEditPanel
@@ -577,7 +577,7 @@
         </ColorEditPanel>
       </div>
     </div>
-  {/if}
+  </UIReveal>
 
   <!-- Palette + Text row -->
   <div class="scales-row">

package/src/system/components/FloatingTokenTags.css

@@ -9,6 +9,7 @@
 
 .ftt-stage {
   --ftt-contrast-color: var(--color-white);
+  --ftt-string-opacity: 0.5;
   position: relative;
   width: 100%;
   height: 100%;
@@ -79,7 +80,7 @@
   stroke-width: 2;
   stroke-linecap: round;
   vector-effect: non-scaling-stroke;
-  opacity: 0.5;
+  opacity: var(--ftt-string-opacity);
   transition: opacity 150ms ease, stroke 150ms ease;
 }
 
@@ -178,16 +179,18 @@
   align-items: center;
   gap: 0.25rem;
   padding: 0.375rem 0.75rem;
-  /* Darkest stop stays ≥ #8f9090 so black text keeps ~6:1 AA contrast. */
+  /* Polished chrome, not brushed steel: the bands keep their spacing but sit
+     high in the scale, so the pill stays bright against a cream page. Keep
+     the darkest stop ≥ #8f9090 or the black label loses AA. */
   background: linear-gradient(
     135deg,
-    #e4e5e5 0%,
-    #a2a3a3 38%,
-    #cdcece 62%,
-    #8f9090 100%
+    #fbfbfb 0%,
+    #c9cbcb 38%,
+    #eff0f0 62%,
+    #b6b8b8 100%
   );
   color: #000;
-  border: 1px solid rgba(255, 255, 255, 0.55);
+  border: 1px solid rgba(86, 96, 104, 0.45);
   border-radius: 9999px;
   box-shadow: var(--shadow-md);
   font-family: Manrope, system-ui, -apple-system, sans-serif;

package/src/system/components/FloatingTokenTags.svelte

@@ -200,6 +200,9 @@
     lastPageBackground = pageBackground;
     const token = contrastTokenForBackground(pageBackground);
     stageEl.style.setProperty('--ftt-contrast-color', `var(${token})`);
+    // Dark strokes on a light page read far heavier than white ones on a dark
+    // page at the same alpha, so the light theme gets a thinner string.
+    stageEl.style.setProperty('--ftt-string-opacity', token === '--color-black' ? '0.3' : '0.5');
   }
 
   function syncBoxLabelContrast() {