@motion-proto/live-tokens 0.86.0 → 0.87.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.87.0 — VideoLightbox play badge
+
+### Added
+
+- **`VideoLightbox` takes `chrome="badge"`.** A play badge sits over the
+  thumbnail, so a still reads as a clip before anyone clicks it. The default,
+  `none`, shows the still alone, as before. The badge has its own
+  `--videolightbox-badge-*` tokens with a hover state, editable in the
+  component editor. Every shipped theme takes its values from that theme's
+  VideoFrame badge, so the two match.
+
 ## 0.86.0 — Video and slides ship as components
 
 ### Added

package/package.json

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

package/src/editor/component-editor/VideoLightboxEditor.svelte

@@ -19,9 +19,20 @@
       { label: 'border width', canBeLinked: true, element: 'close', variable: '--videolightbox-chrome-border-width' },
       { label: 'corner radius', canBeLinked: true, element: 'close', variable: '--videolightbox-chrome-radius' },
       { label: 'icon color', element: 'close', variable: '--videolightbox-chrome-icon' },
+      { label: 'surface color', element: 'badge', variable: '--videolightbox-badge-default-surface' },
+      { label: 'border color', element: 'badge', variable: '--videolightbox-badge-default-border' },
+      { label: 'border width', canBeLinked: true, element: 'badge', variable: '--videolightbox-badge-default-border-width' },
+      { label: 'size', canBeLinked: true, element: 'badge', variable: '--videolightbox-badge-default-size' },
+      { label: 'icon color', element: 'badge', variable: '--videolightbox-badge-default-icon' },
+      { label: 'icon size', canBeLinked: true, element: 'badge', variable: '--videolightbox-badge-default-icon-size' },
+      { label: 'hover duration', element: 'badge', variable: '--videolightbox-badge-duration' },
+      { label: 'hover easing', element: 'badge', variable: '--videolightbox-badge-easing' },
     ],
     hover: [
       { label: 'surface color', element: 'close', variable: '--videolightbox-chrome-hover-surface' },
+      { label: 'surface color', element: 'badge', variable: '--videolightbox-badge-hover-surface' },
+      { label: 'border color', element: 'badge', variable: '--videolightbox-badge-hover-border' },
+      { label: 'icon color', element: 'badge', variable: '--videolightbox-badge-hover-icon' },
     ],
   };
 
@@ -39,7 +50,7 @@
 <ComponentEditorBase
   {component}
   title="Video Lightbox"
-  description="A small still that fades the page away and plays its clip in the middle of the screen. Click anywhere, the close button, or Escape to close it. The open preview beside the tile shows the overlay and close button in place."
+  description="A small still that fades the page away and plays its clip in the middle of the screen. The play badge over the still is optional. Click anywhere, the close button, or Escape to close it. The open preview beside the tile shows the overlay and close button in place."
   tokens={allTokens}
 >
   <VariantGroup
@@ -47,7 +58,7 @@
     title="Video Lightbox"
     {states}
     {component}
-    elementOrder={['tile', 'overlay', 'close']}
+    elementOrder={['tile', 'badge', 'overlay', 'close']}
   >
     {#snippet children({ activeState })}
     <div class="videolightbox-demo">
@@ -58,6 +69,8 @@
           alt="Navigation running on a smartwatch"
           width={480}
           height={552}
+          chrome="badge"
+          class={activeState === 'hover' ? 'force-hover' : ''}
         />
       </div>
       <div class="videolightbox-demo-open">

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

@@ -4015,7 +4015,18 @@
         "--videolightbox-chrome-border-width": "--border-width-1",
         "--videolightbox-chrome-radius": "--radius-full",
         "--videolightbox-chrome-icon": "--text-primary",
-        "--videolightbox-chrome-hover-surface": "--surface-brand-high"
+        "--videolightbox-chrome-hover-surface": "--surface-brand-high",
+        "--videolightbox-badge-default-surface": "--surface-brand-lower",
+        "--videolightbox-badge-default-border": "--border-brand-medium",
+        "--videolightbox-badge-default-border-width": "--border-width-2",
+        "--videolightbox-badge-default-icon": "--text-primary",
+        "--videolightbox-badge-default-size": "--space-64",
+        "--videolightbox-badge-default-icon-size": "--icon-size-4xl",
+        "--videolightbox-badge-duration": "--duration-200",
+        "--videolightbox-badge-easing": "--ease-out-quad",
+        "--videolightbox-badge-hover-surface": "--surface-brand",
+        "--videolightbox-badge-hover-border": "--border-brand-strong",
+        "--videolightbox-badge-hover-icon": "--text-primary"
       }
     },
     "videoframe": {

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

@@ -4054,7 +4054,18 @@
         "--videolightbox-chrome-border-width": "--border-width-3",
         "--videolightbox-chrome-radius": "--radius-none",
         "--videolightbox-chrome-icon": "--text-primary",
-        "--videolightbox-chrome-hover-surface": "--surface-brand-high"
+        "--videolightbox-chrome-hover-surface": "--surface-brand-high",
+        "--videolightbox-badge-default-surface": "--surface-brand-lower",
+        "--videolightbox-badge-default-border": "--border-brand-medium",
+        "--videolightbox-badge-default-border-width": "--border-width-2",
+        "--videolightbox-badge-default-icon": "--text-primary",
+        "--videolightbox-badge-default-size": "--space-64",
+        "--videolightbox-badge-default-icon-size": "--icon-size-4xl",
+        "--videolightbox-badge-duration": "--duration-200",
+        "--videolightbox-badge-easing": "--ease-out-quad",
+        "--videolightbox-badge-hover-surface": "--surface-brand",
+        "--videolightbox-badge-hover-border": "--border-brand-strong",
+        "--videolightbox-badge-hover-icon": "--text-primary"
       }
     },
     "videoframe": {

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

@@ -4073,7 +4073,18 @@
         "--videolightbox-chrome-border-width": "--border-width-1",
         "--videolightbox-chrome-radius": "--radius-full",
         "--videolightbox-chrome-icon": "--text-primary",
-        "--videolightbox-chrome-hover-surface": "--surface-brand-high"
+        "--videolightbox-chrome-hover-surface": "--surface-brand-high",
+        "--videolightbox-badge-default-surface": "--surface-brand-lower",
+        "--videolightbox-badge-default-border": "--border-brand-medium",
+        "--videolightbox-badge-default-border-width": "--border-width-2",
+        "--videolightbox-badge-default-icon": "--text-primary",
+        "--videolightbox-badge-default-size": "--space-64",
+        "--videolightbox-badge-default-icon-size": "--icon-size-4xl",
+        "--videolightbox-badge-duration": "--duration-200",
+        "--videolightbox-badge-easing": "--ease-out-quad",
+        "--videolightbox-badge-hover-surface": "--surface-brand",
+        "--videolightbox-badge-hover-border": "--border-brand-strong",
+        "--videolightbox-badge-hover-icon": "--text-primary"
       }
     },
     "videoframe": {

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

@@ -4014,7 +4014,18 @@
         "--videolightbox-chrome-border-width": "--border-width-1",
         "--videolightbox-chrome-radius": "--radius-full",
         "--videolightbox-chrome-icon": "--text-primary",
-        "--videolightbox-chrome-hover-surface": "--surface-brand-high"
+        "--videolightbox-chrome-hover-surface": "--surface-brand-high",
+        "--videolightbox-badge-default-surface": "--surface-brand-lower",
+        "--videolightbox-badge-default-border": "--border-brand-medium",
+        "--videolightbox-badge-default-border-width": "--border-width-2",
+        "--videolightbox-badge-default-icon": "--text-primary",
+        "--videolightbox-badge-default-size": "--space-64",
+        "--videolightbox-badge-default-icon-size": "--icon-size-4xl",
+        "--videolightbox-badge-duration": "--duration-200",
+        "--videolightbox-badge-easing": "--ease-out-quad",
+        "--videolightbox-badge-hover-surface": "--surface-brand",
+        "--videolightbox-badge-hover-border": "--border-brand-strong",
+        "--videolightbox-badge-hover-icon": "--text-primary"
       }
     },
     "videoframe": {

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

@@ -4045,7 +4045,18 @@
         "--videolightbox-chrome-border-width": "--border-width-2",
         "--videolightbox-chrome-radius": "--radius-full",
         "--videolightbox-chrome-icon": "--text-primary",
-        "--videolightbox-chrome-hover-surface": "--surface-brand-high"
+        "--videolightbox-chrome-hover-surface": "--surface-brand-high",
+        "--videolightbox-badge-default-surface": "--surface-brand-lower",
+        "--videolightbox-badge-default-border": "--border-brand-medium",
+        "--videolightbox-badge-default-border-width": "--border-width-2",
+        "--videolightbox-badge-default-icon": "--text-primary",
+        "--videolightbox-badge-default-size": "--space-64",
+        "--videolightbox-badge-default-icon-size": "--icon-size-4xl",
+        "--videolightbox-badge-duration": "--duration-200",
+        "--videolightbox-badge-easing": "--ease-out-quad",
+        "--videolightbox-badge-hover-surface": "--surface-brand",
+        "--videolightbox-badge-hover-border": "--border-brand-strong",
+        "--videolightbox-badge-hover-icon": "--text-primary"
       }
     },
     "videoframe": {

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

@@ -4028,7 +4028,18 @@
         "--videolightbox-chrome-border-width": "--border-width-1",
         "--videolightbox-chrome-radius": "--radius-none",
         "--videolightbox-chrome-icon": "--text-primary",
-        "--videolightbox-chrome-hover-surface": "--surface-brand-high"
+        "--videolightbox-chrome-hover-surface": "--surface-brand-high",
+        "--videolightbox-badge-default-surface": "--surface-brand-lower",
+        "--videolightbox-badge-default-border": "--border-brand-medium",
+        "--videolightbox-badge-default-border-width": "--border-width-2",
+        "--videolightbox-badge-default-icon": "--text-primary",
+        "--videolightbox-badge-default-size": "--space-64",
+        "--videolightbox-badge-default-icon-size": "--icon-size-4xl",
+        "--videolightbox-badge-duration": "--duration-200",
+        "--videolightbox-badge-easing": "--ease-out-quad",
+        "--videolightbox-badge-hover-surface": "--surface-brand",
+        "--videolightbox-badge-hover-border": "--border-brand-strong",
+        "--videolightbox-badge-hover-icon": "--text-primary"
       }
     },
     "videoframe": {

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

@@ -4001,7 +4001,18 @@
         "--videolightbox-chrome-border-width": "--border-width-1",
         "--videolightbox-chrome-radius": "--radius-full",
         "--videolightbox-chrome-icon": "--text-primary",
-        "--videolightbox-chrome-hover-surface": "--surface-brand-high"
+        "--videolightbox-chrome-hover-surface": "--surface-brand-high",
+        "--videolightbox-badge-default-surface": "--surface-brand-lower",
+        "--videolightbox-badge-default-border": "--border-brand-medium",
+        "--videolightbox-badge-default-border-width": "--border-width-2",
+        "--videolightbox-badge-default-icon": "--text-primary",
+        "--videolightbox-badge-default-size": "--space-64",
+        "--videolightbox-badge-default-icon-size": "--icon-size-4xl",
+        "--videolightbox-badge-duration": "--duration-200",
+        "--videolightbox-badge-easing": "--ease-out-quad",
+        "--videolightbox-badge-hover-surface": "--surface-brand",
+        "--videolightbox-badge-hover-border": "--border-brand-strong",
+        "--videolightbox-badge-hover-icon": "--text-primary"
       }
     },
     "videoframe": {

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

@@ -4053,7 +4053,18 @@
         "--videolightbox-chrome-border-width": "--border-width-1",
         "--videolightbox-chrome-radius": "--radius-full",
         "--videolightbox-chrome-icon": "--text-primary",
-        "--videolightbox-chrome-hover-surface": "--surface-brand-high"
+        "--videolightbox-chrome-hover-surface": "--surface-brand-high",
+        "--videolightbox-badge-default-surface": "--surface-brand-lower",
+        "--videolightbox-badge-default-border": "--border-brand-medium",
+        "--videolightbox-badge-default-border-width": "--border-width-2",
+        "--videolightbox-badge-default-icon": "--text-primary",
+        "--videolightbox-badge-default-size": "--space-64",
+        "--videolightbox-badge-default-icon-size": "--icon-size-4xl",
+        "--videolightbox-badge-duration": "--duration-200",
+        "--videolightbox-badge-easing": "--ease-out-quad",
+        "--videolightbox-badge-hover-surface": "--surface-brand",
+        "--videolightbox-badge-hover-border": "--border-brand-strong",
+        "--videolightbox-badge-hover-icon": "--text-primary"
       }
     },
     "videoframe": {

package/src/system/components/VideoLightbox.svelte

@@ -11,6 +11,8 @@
       { when: 'footage that plays in the layout at full size, with no thumbnail to open.', use: 'videoframe' }
     ],
     props: {
+      chrome:
+        '`badge` lays a play badge over the thumbnail, so a still reads as a clip. `none` shows the still alone.',
       inline: 'true renders the open lightbox in flow, without the thumbnail. The editor preview uses it.',
       loop: 'true repeats the clip.',
       hoverPlay:
@@ -40,6 +42,8 @@
     width?: number;
     height?: number;
     loop?: boolean;
+    /** "badge" lays a play badge over the thumbnail. */
+    chrome?: 'badge' | 'none';
     /** Renders the open lightbox in flow, without the thumbnail. Used by the editor preview. */
     inline?: boolean;
     /** Plays the thumbnail muted under the pointer. Still for reduced motion. */
@@ -52,7 +56,7 @@
     thumbFit?: 'contain' | 'cover';
     /** Seconds in that the hover preview starts. The open clip still plays from 0. */
     previewStart?: number;
-    /** Editor preview hook: `force-hover` on an `inline` lightbox paints the close button's hover. */
+    /** Editor preview hook: `force-hover` paints the hover of the close button on an `inline` lightbox, and of the badge on a tile. */
     class?: string;
   }
 
@@ -63,6 +67,7 @@
     width = undefined,
     height = undefined,
     loop = false,
+    chrome = 'none',
     inline = false,
     hoverPlay = false,
     stretch = false,
@@ -195,6 +200,11 @@
       {:else}
         <img src={poster} alt="" {width} {height} draggable="false" />
       {/if}
+      {#if chrome === 'badge'}
+        <span class="videolightbox-badge sketch-chip" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5.5v13l11-6.5z" /></svg>
+        </span>
+      {/if}
     </button>
   </div>
 
@@ -253,6 +263,19 @@
     --videolightbox-chrome-radius: var(--radius-full);
     --videolightbox-chrome-icon: var(--text-primary);
     --videolightbox-chrome-hover-surface: var(--surface-brand-high);
+
+    --videolightbox-badge-default-surface: var(--surface-brand-lower);
+    --videolightbox-badge-default-border: var(--border-brand-medium);
+    --videolightbox-badge-default-border-width: var(--border-width-2);
+    --videolightbox-badge-default-icon: var(--text-primary);
+    --videolightbox-badge-default-size: var(--space-64);
+    --videolightbox-badge-default-icon-size: var(--icon-size-4xl);
+    --videolightbox-badge-duration: var(--duration-200);
+    --videolightbox-badge-easing: var(--ease-out-quad);
+
+    --videolightbox-badge-hover-surface: var(--surface-brand);
+    --videolightbox-badge-hover-border: var(--border-brand-strong);
+    --videolightbox-badge-hover-icon: var(--text-primary);
   }
 
   .videolightbox {
@@ -265,8 +288,11 @@
 
   /* The clip lives one level in: the sketch layer forces the drawn part's
      overflow visible, which would let the picture's square corners escape. */
+  /* One grid cell stacks the badge on the still without positioning the
+     trigger, which would capture a `stretch` pad meant for the ancestor. */
   .videolightbox-trigger {
-    display: block;
+    display: grid;
+    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
     width: 100%;
     height: 100%;
     padding: 0;
@@ -297,6 +323,7 @@
 
   .videolightbox-trigger img,
   .videolightbox-trigger .videolightbox-thumb {
+    grid-area: 1 / 1;
     display: block;
     width: 100%;
     height: 100%;
@@ -304,6 +331,52 @@
     user-select: none;
   }
 
+  .videolightbox-badge {
+    grid-area: 1 / 1;
+    place-self: center;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--videolightbox-badge-default-size);
+    height: var(--videolightbox-badge-default-size);
+    color: var(--videolightbox-badge-default-icon);
+    background: var(--videolightbox-badge-default-surface);
+    border: var(--videolightbox-badge-default-border-width) solid
+      var(--videolightbox-badge-default-border);
+    border-radius: var(--radius-full);
+    transition:
+      background var(--videolightbox-badge-duration) var(--videolightbox-badge-easing),
+      border-color var(--videolightbox-badge-duration) var(--videolightbox-badge-easing),
+      color var(--videolightbox-badge-duration) var(--videolightbox-badge-easing);
+
+    --sketch-fill: var(--videolightbox-badge-default-surface);
+    --sketch-stroke: var(--videolightbox-badge-default-border);
+    --sketch-hatch-color: var(--videolightbox-badge-default-border);
+    --sketch-radius: var(--radius-full);
+    --sketch-shadow: none;
+    /* Travel is stated in px, and the play triangle is small enough to tear. */
+    --sketch-icon-off: var(--sketch-icon-soft);
+  }
+
+  .videolightbox-badge svg {
+    width: var(--videolightbox-badge-default-icon-size);
+    height: var(--videolightbox-badge-default-icon-size);
+    /* The triangle's mass sits left of centre; nudge it back onto the axis. */
+    margin-inline-start: 6%;
+  }
+
+  .videolightbox-trigger:hover .videolightbox-badge,
+  .videolightbox:global(.force-hover) .videolightbox-badge {
+    color: var(--videolightbox-badge-hover-icon);
+    background: var(--videolightbox-badge-hover-surface);
+    border-color: var(--videolightbox-badge-hover-border);
+
+    --sketch-fill: var(--videolightbox-badge-hover-surface);
+    --sketch-stroke: var(--videolightbox-badge-hover-border);
+    --sketch-hatch-color: var(--videolightbox-badge-hover-border);
+  }
+
   .videolightbox-modal {
     position: fixed;
     inset: 0;

package/src/testing-js/{chunk-OHU5BHGZ.js → chunk-FTLASW2R.js}

@@ -3320,6 +3320,8 @@ var videoLightboxContract = {
   parts: {
     root: ".videolightbox",
     trigger: ".videolightbox-trigger",
+    badge: ".videolightbox-badge",
+    badgeIcon: ".videolightbox-badge svg",
     overlay: ".videolightbox-modal.inline",
     closeButton: ".videolightbox-modal.inline .videolightbox-close",
     closeIcon: ".videolightbox-modal.inline .videolightbox-close svg"
@@ -3345,7 +3347,25 @@ var videoLightboxContract = {
           borderRadius: "--videolightbox-chrome-radius",
           color: "--videolightbox-chrome-icon"
         },
-        closeIcon: { stroke: "--videolightbox-chrome-icon" }
+        closeIcon: { stroke: "--videolightbox-chrome-icon" },
+        badge: {
+          backgroundColor: "--videolightbox-badge-default-surface",
+          borderTopColor: "--videolightbox-badge-default-border",
+          borderTopWidth: "--videolightbox-badge-default-border-width",
+          width: "--videolightbox-badge-default-size",
+          color: "--videolightbox-badge-default-icon"
+        },
+        badgeIcon: { width: "--videolightbox-badge-default-icon-size" }
+      }
+    },
+    {
+      state: "hover",
+      paints: {
+        badge: {
+          backgroundColor: "--videolightbox-badge-hover-surface",
+          borderTopColor: "--videolightbox-badge-hover-border",
+          color: "--videolightbox-badge-hover-icon"
+        }
       }
     },
     // The inline close button has no handler, so the click leaves the pointer
@@ -3358,7 +3378,9 @@ var videoLightboxContract = {
   states: [{ state: "default" }, { state: "hover" }],
   uncovered: {
     "--videolightbox-overlay-duration": "consumed inside the opacity transition shorthand, never a standalone computed value",
-    "--videolightbox-overlay-easing": "consumed inside the opacity transition shorthand, never a standalone computed value"
+    "--videolightbox-overlay-easing": "consumed inside the opacity transition shorthand, never a standalone computed value",
+    "--videolightbox-badge-duration": "consumed inside the badge transition shorthand, never a standalone computed value",
+    "--videolightbox-badge-easing": "consumed inside the badge transition shorthand, never a standalone computed value"
   },
   persistence: {
     cases: [
@@ -3710,4 +3732,4 @@ export {
   allContracts,
   selectedContracts
 };
-//# sourceMappingURL=chunk-OHU5BHGZ.js.map
+//# sourceMappingURL=chunk-FTLASW2R.js.map