@motion-proto/live-tokens 0.53.0 → 0.54.1

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() {

package/src/system/internal/backgroundContrast.ts

@@ -48,7 +48,8 @@ function luminance({ r, g, b }: Rgb): number {
 
 /**
  * Pick the invariant black/white token with the stronger minimum contrast
- * against every explicit colour in a solid or gradient page background.
+ * against every explicit colour in a solid or gradient page background —
+ * the rule FloatingTokenTags uses for its kite strings.
  */
 export function contrastTokenForBackground(background: string): ContrastColorToken {
   const colors = colorsIn(background);