@motion-proto/live-tokens 0.82.0 → 0.84.0

package/src/system/components/Toggle.svelte

@@ -3,8 +3,11 @@
 
   export const catalogue = {
     description: 'An on/off switch that names the setting it controls.',
-    useFor: 'a setting that takes effect the moment it flips.',
-    notFor: 'a choice between two named alternatives (SegmentedControl); a yes/no answer inside a form (RadioButton).',
+    whenToUse: 'a setting that takes effect the moment it flips.',
+    whenNotToUse: [
+      { when: 'the two states have names of their own that the reader compares.', use: 'segmentedcontrol' },
+      { when: 'the reader answers yes or no inside a larger form.', use: 'radiobutton' },
+    ],
   } satisfies CatalogueEntry;
 </script>
 

package/src/system/components/Tooltip.svelte

@@ -3,8 +3,11 @@
 
   export const catalogue = {
     description: 'A short note that appears on an element on hover or focus.',
-    useFor: 'a definition or a shortcut the reader can do without.',
-    notFor: 'content the reader must not miss (Callout); feedback after an action (Notification).',
+    whenToUse: 'a definition or a shortcut the reader can do without.',
+    whenNotToUse: [
+      { when: 'the reader must not miss the content.', use: 'callout' },
+      { when: 'the message is feedback about something that just happened.', use: 'notification' },
+    ],
   } satisfies CatalogueEntry;
 </script>
 

package/src/system/styles/tokens.css

@@ -267,10 +267,18 @@
   --surface-danger-highest: oklch(0.6696 0.1423 24.72);
 
   /* Scrims — translucent layers that dim what sits behind them. A scrim is not
-     a tint: it darkens the content underneath, it does not shade a surface. */
-  --scrim-low: rgba(20, 3, 0, 0.38);
-  --scrim: rgba(20, 3, 0, 0.51);
-  --scrim-high: rgba(20, 3, 0, 0.64);
+     a tint: it darkens the content underneath, it does not shade a surface.
+     Colour and strength are separate, so a theme can hold one and move the
+     other: set --scrim-color to a light value for a scrim that pales the page
+     instead of darkening it. The three stops stay, composed from the two, for
+     anywhere that wants one value. */
+  --scrim-color: rgb(20, 3, 0);
+  --scrim-opacity-low: 0.38;
+  --scrim-opacity: 0.51;
+  --scrim-opacity-high: 0.64;
+  --scrim-low: color-mix(in srgb, var(--scrim-color) calc(var(--scrim-opacity-low) * 100%), transparent);
+  --scrim: color-mix(in srgb, var(--scrim-color) calc(var(--scrim-opacity) * 100%), transparent);
+  --scrim-high: color-mix(in srgb, var(--scrim-color) calc(var(--scrim-opacity-high) * 100%), transparent);
 
   /* Tints — translucent washes that shade the surface they sit on, for a hover
      or an active row. The theme aliases these to the text color, so a tint

package/src/testing-js/{chunk-ZMZQZ33J.js → chunk-WQJ6QB6Y.js}

@@ -783,7 +783,6 @@ var dialogContract = {
   properties: [
     {
       paints: {
-        backdrop: { backgroundColor: "--dialog-scrim-surface" },
         root: {
           backgroundColor: "--dialog-surface",
           borderTopColor: "--dialog-border",
@@ -832,7 +831,9 @@ var dialogContract = {
     { state: "footer" }
   ],
   uncovered: {
-    "--dialog-blur": "consumed via backdrop-filter: blur(), which no probe covers"
+    "--dialog-blur": "consumed via backdrop-filter: blur(), which no probe covers",
+    "--dialog-scrim-color": "composed into the fill through color-mix(), so no computed style reports the token verbatim",
+    "--dialog-scrim-opacity": "composed into the fill through color-mix(), so no computed style reports the token verbatim"
   },
   persistence: {
     cases: [
@@ -1117,7 +1118,6 @@ var imageLightboxContract = {
           borderRadius: "--imagelightbox-tile-radius",
           boxShadow: "--imagelightbox-tile-shadow"
         },
-        overlay: { backgroundColor: "--imagelightbox-overlay-surface" },
         closeButton: {
           backgroundColor: "--imagelightbox-chrome-surface",
           borderTopColor: "--imagelightbox-chrome-border",
@@ -1137,6 +1137,10 @@ var imageLightboxContract = {
     }
   ],
   states: [{ state: "tile" }, { state: "overlay" }, { state: "chrome" }],
+  uncovered: {
+    "--imagelightbox-scrim-color": "composed into the fill through color-mix(), so no computed style reports the token verbatim",
+    "--imagelightbox-scrim-opacity": "composed into the fill through color-mix(), so no computed style reports the token verbatim"
+  },
   persistence: {
     cases: [
       {
@@ -3368,4 +3372,4 @@ export {
   allContracts,
   selectedContracts
 };
-//# sourceMappingURL=chunk-ZMZQZ33J.js.map
+//# sourceMappingURL=chunk-WQJ6QB6Y.js.map