@motion-proto/live-tokens 0.85.0 → 0.87.0

package/src/editor/ui/ThemePanel.svelte

@@ -59,7 +59,6 @@
   } from '../core/store/editorStore';
   import { openThemeSlug } from '../core/store/editorConfigStore';
   import { sketchOffTheme, themeSketchSettings } from '../core/sketch/sketchStore';
-  import { editorView } from '../core/store/editorViewStore';
   import {
     componentActiveRevision,
     productionRevision,
@@ -70,24 +69,11 @@
   } from '../core/productionPulse';
   import { flashStatus } from '../core/flashStatus';
   import UIInfoPopover from './UIInfoPopover.svelte';
-  import UIPillButton from './UIPillButton.svelte';
   import FileLoadList from './FileLoadList.svelte';
   import FilePill from './FilePill.svelte';
   import UIDialog from './UIDialog.svelte';
   import SaveAsDialog from '../component-editor/scaffolding/SaveAsDialog.svelte';
 
-  interface Props {
-    /** False on the components page, which is the surface the link opens. */
-    showComponentsLink?: boolean;
-  }
-
-  let { showComponentsLink = true }: Props = $props();
-
-  let canOpenComponents = $derived(showComponentsLink && $editorView !== 'components');
-  // showComponentsLink=false marks the ThemePanel that renders outside the
-  // view switcher (ComponentEditorPage), where neither pill can navigate.
-  let canOpenSketchStyle = $derived(showComponentsLink && $editorView !== 'sketch');
-
   let files: ThemeMeta[] = $state([]);
   let colorsFiles: ColorsAndTypeMeta[] = $state([]);
   let rows = $derived(buildLoadRows(files, colorsFiles));
@@ -181,14 +167,6 @@
     refreshComponents();
   });
 
-  function openComponents() {
-    editorView.set('components');
-  }
-
-  function openSketchStyle() {
-    editorView.set('sketch');
-  }
-
   onMount(async () => {
     await refreshFiles();
     await refreshActive();
@@ -822,19 +800,16 @@
   <div class="theme-parts">
     <div class="part-head part-static">
       <span class="part-label">Colors &amp; Type</span>
-      <span class="part-summary">
-        {#if pairing}
-          <span class="part-summary-sep">·</span>
-          <span class="part-summary-text" title={pairing}>{pairing}</span>
-        {/if}
-      </span>
+      <span class="part-summary"></span>
       <UIInfoPopover title="Colors &amp; Type" ariaLabel="About colors and type">
         <p>
           <strong>Colors &amp; type</strong> is the part of the theme your design tokens live in. Components read those tokens for their own appearance.
         </p>
-        <p>
-          The two faces named here are the heading and body fonts the page is showing.
-        </p>
+        {#if pairing}
+          <p>
+            The page shows <strong>{pairing}</strong> as its heading and body fonts.
+          </p>
+        {/if}
         <p>
           To load colors and type without touching your shapes, open <strong>Load</strong> above and turn on <strong>Colors and type only</strong>.
         </p>
@@ -852,16 +827,6 @@
           <span>in sync</span>
         {/if}
       </span>
-      {#if canOpenComponents}
-        <UIPillButton
-          size="compact"
-          icon="fa-cubes"
-          title="Open the component editors"
-          onclick={openComponents}
-        >
-          Open
-        </UIPillButton>
-      {/if}
     </div>
 
     <div class="part-head part-static">
@@ -871,21 +836,11 @@
         {#if $sketchOffTheme}
           <span>off the theme</span>
         {:else if $themeSketchSettings}
-          <span class="part-summary-text">{$themeSketchSettings.label}</span>
+          <span>{$themeSketchSettings.label}</span>
         {:else}
           <span>none</span>
         {/if}
       </span>
-      {#if canOpenSketchStyle}
-        <UIPillButton
-          size="compact"
-          icon="fa-pen-nib"
-          title="Open the Sketchstyle view"
-          onclick={openSketchStyle}
-        >
-          Open
-        </UIPillButton>
-      {/if}
       <UIInfoPopover title="Sketchstyle" ariaLabel="About the sketchstyle">
         <p>
           <strong>Sketchstyle</strong> is part of the theme, the same way colors and type are.
@@ -1258,7 +1213,8 @@
     color: var(--ui-text-secondary);
   }
 
-  .part-summary-text {
+  .part-summary > span:not(.part-summary-sep) {
+    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

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

@@ -3994,6 +3994,103 @@
         "--slider-value-font-weight": "--font-weight-normal",
         "--slider-value-line-height": "--line-height-normal"
       }
+    },
+    "videolightbox": {
+      "name": "autumn",
+      "component": "videolightbox",
+      "createdAt": "2026-09-21T17:00:00.000Z",
+      "updatedAt": "2026-09-21T17:00:00.000Z",
+      "aliases": {
+        "--videolightbox-tile-surface": "--color-transparent",
+        "--videolightbox-tile-border": "--color-transparent",
+        "--videolightbox-tile-border-width": "--border-width-0",
+        "--videolightbox-tile-radius": "--radius-4xl",
+        "--videolightbox-tile-shadow": "--shadow-md",
+        "--videolightbox-scrim-surface": "--scrim-high",
+        "--videolightbox-overlay-padding": "--space-64",
+        "--videolightbox-overlay-duration": "--duration-500",
+        "--videolightbox-overlay-easing": "--ease-out-quad",
+        "--videolightbox-chrome-surface": "--surface-neutral-low",
+        "--videolightbox-chrome-border": "--border-brand",
+        "--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-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": {
+      "name": "autumn",
+      "component": "videoframe",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--videoframe-frame-surface": "--surface-neutral-lowest",
+        "--videoframe-clip-surface": "--color-transparent",
+        "--videoframe-frame-border": "--border-neutral",
+        "--videoframe-frame-border-width": "--border-width-1",
+        "--videoframe-frame-radius": "--radius-4xl",
+        "--videoframe-badge-default-surface": "--surface-brand-lower",
+        "--videoframe-badge-default-border": "--border-brand-medium",
+        "--videoframe-badge-default-border-width": "--border-width-2",
+        "--videoframe-badge-default-icon": "--text-primary",
+        "--videoframe-badge-default-size": "--space-64",
+        "--videoframe-badge-default-icon-size": "--icon-size-4xl",
+        "--videoframe-badge-duration": "--duration-200",
+        "--videoframe-badge-easing": "--ease-out-quad",
+        "--videoframe-badge-hover-surface": "--surface-brand",
+        "--videoframe-badge-hover-border": "--border-brand-strong",
+        "--videoframe-badge-hover-icon": "--text-primary"
+      }
+    },
+    "slidepager": {
+      "name": "autumn",
+      "component": "slidepager",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--slidepager-frame-surface": "--surface-neutral-lower",
+        "--slidepager-frame-border": "--border-neutral-subtle",
+        "--slidepager-frame-border-width": "--border-width-1",
+        "--slidepager-frame-radius": "--radius-4xl",
+        "--slidepager-frame-shadow": "--shadow-md",
+        "--slidepager-bar-gap": "--space-16",
+        "--slidepager-bar-padding": "--space-12",
+        "--slidepager-control-surface": "--surface-neutral-low",
+        "--slidepager-control-border": "--border-neutral",
+        "--slidepager-control-border-width": "--border-width-1",
+        "--slidepager-control-radius": "--radius-full",
+        "--slidepager-control-size": "--space-40",
+        "--slidepager-control-icon": "--text-primary",
+        "--slidepager-control-icon-size": "--icon-size-md",
+        "--slidepager-control-hover-surface": "--surface-brand-high",
+        "--slidepager-control-hover-border": "--border-brand",
+        "--slidepager-control-hover-icon": "--text-inverted",
+        "--slidepager-control-disabled-surface": "--surface-neutral-lower",
+        "--slidepager-control-disabled-border": "--border-neutral-subtle",
+        "--slidepager-control-disabled-icon": "--text-disabled",
+        "--slidepager-counter-text": "--text-secondary",
+        "--slidepager-counter-font-family": "--font-sans",
+        "--slidepager-counter-font-size": "--font-size-lg",
+        "--slidepager-counter-font-weight": "--font-weight-medium",
+        "--slidepager-counter-line-height": "--line-height-normal",
+        "--slidepager-counter-letter-spacing": "--letter-spacing-normal",
+        "--slidepager-scrim-surface": "--scrim-high",
+        "--slidepager-overlay-padding": "--space-64",
+        "--slidepager-close-margin": "--space-24",
+        "--slidepager-overlay-duration": "--duration-300",
+        "--slidepager-overlay-easing": "--ease-out-quad"
+      }
     }
   },
   "componentSchemaVersion": 38

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

@@ -4033,6 +4033,103 @@
         "--slider-value-font-weight": "--font-weight-normal",
         "--slider-value-line-height": "--line-height-normal"
       }
+    },
+    "videolightbox": {
+      "name": "halloween",
+      "component": "videolightbox",
+      "createdAt": "2026-09-21T17:00:00.000Z",
+      "updatedAt": "2026-09-21T17:00:00.000Z",
+      "aliases": {
+        "--videolightbox-tile-surface": "--color-transparent",
+        "--videolightbox-tile-border": "--color-transparent",
+        "--videolightbox-tile-border-width": "--border-width-2",
+        "--videolightbox-tile-radius": "--radius-none",
+        "--videolightbox-tile-shadow": "--shadow-md",
+        "--videolightbox-scrim-surface": "--scrim-high",
+        "--videolightbox-overlay-padding": "--space-64",
+        "--videolightbox-overlay-duration": "--duration-500",
+        "--videolightbox-overlay-easing": "--ease-out-quad",
+        "--videolightbox-chrome-surface": "--surface-neutral-low",
+        "--videolightbox-chrome-border": "--border-brand",
+        "--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-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": {
+      "name": "halloween",
+      "component": "videoframe",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--videoframe-frame-surface": "--surface-neutral-lowest",
+        "--videoframe-clip-surface": "--color-transparent",
+        "--videoframe-frame-border": "--border-neutral",
+        "--videoframe-frame-border-width": "--border-width-3",
+        "--videoframe-frame-radius": "--radius-none",
+        "--videoframe-badge-default-surface": "--surface-brand-lower",
+        "--videoframe-badge-default-border": "--border-brand-medium",
+        "--videoframe-badge-default-border-width": "--border-width-2",
+        "--videoframe-badge-default-icon": "--text-primary",
+        "--videoframe-badge-default-size": "--space-64",
+        "--videoframe-badge-default-icon-size": "--icon-size-4xl",
+        "--videoframe-badge-duration": "--duration-200",
+        "--videoframe-badge-easing": "--ease-out-quad",
+        "--videoframe-badge-hover-surface": "--surface-brand",
+        "--videoframe-badge-hover-border": "--border-brand-strong",
+        "--videoframe-badge-hover-icon": "--text-primary"
+      }
+    },
+    "slidepager": {
+      "name": "halloween",
+      "component": "slidepager",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--slidepager-frame-surface": "--surface-neutral-lower",
+        "--slidepager-frame-border": "--border-neutral-subtle",
+        "--slidepager-frame-border-width": "--border-width-3",
+        "--slidepager-frame-radius": "--radius-none",
+        "--slidepager-frame-shadow": "--shadow-md",
+        "--slidepager-bar-gap": "--space-16",
+        "--slidepager-bar-padding": "--space-12",
+        "--slidepager-control-surface": "--surface-neutral-low",
+        "--slidepager-control-border": "--border-neutral",
+        "--slidepager-control-border-width": "--border-width-3",
+        "--slidepager-control-radius": "--radius-none",
+        "--slidepager-control-size": "--space-40",
+        "--slidepager-control-icon": "--text-primary",
+        "--slidepager-control-icon-size": "--icon-size-md",
+        "--slidepager-control-hover-surface": "--surface-brand-high",
+        "--slidepager-control-hover-border": "--border-brand",
+        "--slidepager-control-hover-icon": "--text-inverted",
+        "--slidepager-control-disabled-surface": "--surface-neutral-lower",
+        "--slidepager-control-disabled-border": "--border-neutral-subtle",
+        "--slidepager-control-disabled-icon": "--text-disabled",
+        "--slidepager-counter-text": "--text-secondary",
+        "--slidepager-counter-font-family": "--font-sans",
+        "--slidepager-counter-font-size": "--font-size-lg",
+        "--slidepager-counter-font-weight": "--font-weight-medium",
+        "--slidepager-counter-line-height": "--line-height-normal",
+        "--slidepager-counter-letter-spacing": "--letter-spacing-normal",
+        "--slidepager-scrim-surface": "--scrim-high",
+        "--slidepager-overlay-padding": "--space-64",
+        "--slidepager-close-margin": "--space-24",
+        "--slidepager-overlay-duration": "--duration-300",
+        "--slidepager-overlay-easing": "--ease-out-quad"
+      }
     }
   },
   "componentSchemaVersion": 38

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

@@ -4052,6 +4052,103 @@
         "--tooltip-padding": "--space-6",
         "--tooltip-shadow": "--shadow-md"
       }
+    },
+    "videolightbox": {
+      "name": "midnight-study",
+      "component": "videolightbox",
+      "createdAt": "2026-09-21T17:00:00.000Z",
+      "updatedAt": "2026-09-21T17:00:00.000Z",
+      "aliases": {
+        "--videolightbox-tile-surface": "--color-transparent",
+        "--videolightbox-tile-border": "--color-transparent",
+        "--videolightbox-tile-border-width": "--border-width-0",
+        "--videolightbox-tile-radius": "--radius-2xl",
+        "--videolightbox-tile-shadow": "--shadow-md",
+        "--videolightbox-scrim-surface": "--scrim-high",
+        "--videolightbox-overlay-padding": "--space-64",
+        "--videolightbox-overlay-duration": "--duration-500",
+        "--videolightbox-overlay-easing": "--ease-out-quad",
+        "--videolightbox-chrome-surface": "--surface-neutral-low",
+        "--videolightbox-chrome-border": "--border-brand",
+        "--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-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": {
+      "name": "midnight-study",
+      "component": "videoframe",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--videoframe-frame-surface": "--surface-neutral-lowest",
+        "--videoframe-clip-surface": "--color-transparent",
+        "--videoframe-frame-border": "--border-neutral",
+        "--videoframe-frame-border-width": "--border-width-1",
+        "--videoframe-frame-radius": "--radius-2xl",
+        "--videoframe-badge-default-surface": "--surface-brand-lower",
+        "--videoframe-badge-default-border": "--border-brand-medium",
+        "--videoframe-badge-default-border-width": "--border-width-2",
+        "--videoframe-badge-default-icon": "--text-primary",
+        "--videoframe-badge-default-size": "--space-64",
+        "--videoframe-badge-default-icon-size": "--icon-size-4xl",
+        "--videoframe-badge-duration": "--duration-200",
+        "--videoframe-badge-easing": "--ease-out-quad",
+        "--videoframe-badge-hover-surface": "--surface-brand",
+        "--videoframe-badge-hover-border": "--border-brand-strong",
+        "--videoframe-badge-hover-icon": "--text-primary"
+      }
+    },
+    "slidepager": {
+      "name": "midnight-study",
+      "component": "slidepager",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--slidepager-frame-surface": "--surface-neutral-lower",
+        "--slidepager-frame-border": "--border-neutral-subtle",
+        "--slidepager-frame-border-width": "--border-width-1",
+        "--slidepager-frame-radius": "--radius-2xl",
+        "--slidepager-frame-shadow": "--shadow-md",
+        "--slidepager-bar-gap": "--space-16",
+        "--slidepager-bar-padding": "--space-12",
+        "--slidepager-control-surface": "--surface-neutral-low",
+        "--slidepager-control-border": "--border-neutral",
+        "--slidepager-control-border-width": "--border-width-1",
+        "--slidepager-control-radius": "--radius-full",
+        "--slidepager-control-size": "--space-40",
+        "--slidepager-control-icon": "--text-primary",
+        "--slidepager-control-icon-size": "--icon-size-md",
+        "--slidepager-control-hover-surface": "--surface-brand-high",
+        "--slidepager-control-hover-border": "--border-brand",
+        "--slidepager-control-hover-icon": "--text-inverted",
+        "--slidepager-control-disabled-surface": "--surface-neutral-lower",
+        "--slidepager-control-disabled-border": "--border-neutral-subtle",
+        "--slidepager-control-disabled-icon": "--text-disabled",
+        "--slidepager-counter-text": "--text-secondary",
+        "--slidepager-counter-font-family": "--font-sans",
+        "--slidepager-counter-font-size": "--font-size-lg",
+        "--slidepager-counter-font-weight": "--font-weight-medium",
+        "--slidepager-counter-line-height": "--line-height-normal",
+        "--slidepager-counter-letter-spacing": "--letter-spacing-normal",
+        "--slidepager-scrim-surface": "--scrim-high",
+        "--slidepager-overlay-padding": "--space-64",
+        "--slidepager-close-margin": "--space-24",
+        "--slidepager-overlay-duration": "--duration-300",
+        "--slidepager-overlay-easing": "--ease-out-quad"
+      }
     }
   },
   "componentSchemaVersion": 38

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

@@ -3993,6 +3993,103 @@
         "--slider-value-font-weight": "--font-weight-normal",
         "--slider-value-line-height": "--line-height-normal"
       }
+    },
+    "videolightbox": {
+      "name": "ocean",
+      "component": "videolightbox",
+      "createdAt": "2026-09-21T17:00:00.000Z",
+      "updatedAt": "2026-09-21T17:00:00.000Z",
+      "aliases": {
+        "--videolightbox-tile-surface": "--color-transparent",
+        "--videolightbox-tile-border": "--color-transparent",
+        "--videolightbox-tile-border-width": "--border-width-0",
+        "--videolightbox-tile-radius": "--radius-4xl",
+        "--videolightbox-tile-shadow": "--shadow-md",
+        "--videolightbox-scrim-surface": "--scrim-high",
+        "--videolightbox-overlay-padding": "--space-64",
+        "--videolightbox-overlay-duration": "--duration-500",
+        "--videolightbox-overlay-easing": "--ease-out-quad",
+        "--videolightbox-chrome-surface": "--surface-neutral-low",
+        "--videolightbox-chrome-border": "--border-brand",
+        "--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-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": {
+      "name": "ocean",
+      "component": "videoframe",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--videoframe-frame-surface": "--surface-neutral-lowest",
+        "--videoframe-clip-surface": "--color-transparent",
+        "--videoframe-frame-border": "--border-neutral",
+        "--videoframe-frame-border-width": "--border-width-1",
+        "--videoframe-frame-radius": "--radius-4xl",
+        "--videoframe-badge-default-surface": "--surface-brand-lower",
+        "--videoframe-badge-default-border": "--border-brand-medium",
+        "--videoframe-badge-default-border-width": "--border-width-2",
+        "--videoframe-badge-default-icon": "--text-primary",
+        "--videoframe-badge-default-size": "--space-64",
+        "--videoframe-badge-default-icon-size": "--icon-size-4xl",
+        "--videoframe-badge-duration": "--duration-200",
+        "--videoframe-badge-easing": "--ease-out-quad",
+        "--videoframe-badge-hover-surface": "--surface-brand",
+        "--videoframe-badge-hover-border": "--border-brand-strong",
+        "--videoframe-badge-hover-icon": "--text-primary"
+      }
+    },
+    "slidepager": {
+      "name": "ocean",
+      "component": "slidepager",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--slidepager-frame-surface": "--surface-neutral-lower",
+        "--slidepager-frame-border": "--border-neutral-subtle",
+        "--slidepager-frame-border-width": "--border-width-1",
+        "--slidepager-frame-radius": "--radius-4xl",
+        "--slidepager-frame-shadow": "--shadow-md",
+        "--slidepager-bar-gap": "--space-16",
+        "--slidepager-bar-padding": "--space-12",
+        "--slidepager-control-surface": "--surface-neutral-low",
+        "--slidepager-control-border": "--border-neutral",
+        "--slidepager-control-border-width": "--border-width-1",
+        "--slidepager-control-radius": "--radius-full",
+        "--slidepager-control-size": "--space-40",
+        "--slidepager-control-icon": "--text-primary",
+        "--slidepager-control-icon-size": "--icon-size-md",
+        "--slidepager-control-hover-surface": "--surface-brand-high",
+        "--slidepager-control-hover-border": "--border-brand",
+        "--slidepager-control-hover-icon": "--text-inverted",
+        "--slidepager-control-disabled-surface": "--surface-neutral-lower",
+        "--slidepager-control-disabled-border": "--border-neutral-subtle",
+        "--slidepager-control-disabled-icon": "--text-disabled",
+        "--slidepager-counter-text": "--text-secondary",
+        "--slidepager-counter-font-family": "--font-sans",
+        "--slidepager-counter-font-size": "--font-size-lg",
+        "--slidepager-counter-font-weight": "--font-weight-medium",
+        "--slidepager-counter-line-height": "--line-height-normal",
+        "--slidepager-counter-letter-spacing": "--letter-spacing-normal",
+        "--slidepager-scrim-surface": "--scrim-high",
+        "--slidepager-overlay-padding": "--space-64",
+        "--slidepager-close-margin": "--space-24",
+        "--slidepager-overlay-duration": "--duration-300",
+        "--slidepager-overlay-easing": "--ease-out-quad"
+      }
     }
   },
   "componentSchemaVersion": 38

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

@@ -4024,6 +4024,103 @@
         "--slider-value-font-weight": "--font-weight-normal",
         "--slider-value-line-height": "--line-height-normal"
       }
+    },
+    "videolightbox": {
+      "name": "royal-velvet",
+      "component": "videolightbox",
+      "createdAt": "2026-09-21T17:00:00.000Z",
+      "updatedAt": "2026-09-21T17:00:00.000Z",
+      "aliases": {
+        "--videolightbox-tile-surface": "--color-transparent",
+        "--videolightbox-tile-border": "--color-transparent",
+        "--videolightbox-tile-border-width": "--border-width-1",
+        "--videolightbox-tile-radius": "--radius-2xl",
+        "--videolightbox-tile-shadow": "--shadow-md",
+        "--videolightbox-scrim-surface": "--scrim-high",
+        "--videolightbox-overlay-padding": "--space-64",
+        "--videolightbox-overlay-duration": "--duration-500",
+        "--videolightbox-overlay-easing": "--ease-out-quad",
+        "--videolightbox-chrome-surface": "--surface-neutral-low",
+        "--videolightbox-chrome-border": "--border-brand",
+        "--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-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": {
+      "name": "royal-velvet",
+      "component": "videoframe",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--videoframe-frame-surface": "--surface-neutral-lowest",
+        "--videoframe-clip-surface": "--color-transparent",
+        "--videoframe-frame-border": "--border-neutral",
+        "--videoframe-frame-border-width": "--border-width-2",
+        "--videoframe-frame-radius": "--radius-2xl",
+        "--videoframe-badge-default-surface": "--surface-brand-lower",
+        "--videoframe-badge-default-border": "--border-brand-medium",
+        "--videoframe-badge-default-border-width": "--border-width-2",
+        "--videoframe-badge-default-icon": "--text-primary",
+        "--videoframe-badge-default-size": "--space-64",
+        "--videoframe-badge-default-icon-size": "--icon-size-4xl",
+        "--videoframe-badge-duration": "--duration-200",
+        "--videoframe-badge-easing": "--ease-out-quad",
+        "--videoframe-badge-hover-surface": "--surface-brand",
+        "--videoframe-badge-hover-border": "--border-brand-strong",
+        "--videoframe-badge-hover-icon": "--text-primary"
+      }
+    },
+    "slidepager": {
+      "name": "royal-velvet",
+      "component": "slidepager",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--slidepager-frame-surface": "--surface-neutral-lower",
+        "--slidepager-frame-border": "--border-neutral-subtle",
+        "--slidepager-frame-border-width": "--border-width-2",
+        "--slidepager-frame-radius": "--radius-2xl",
+        "--slidepager-frame-shadow": "--shadow-md",
+        "--slidepager-bar-gap": "--space-16",
+        "--slidepager-bar-padding": "--space-12",
+        "--slidepager-control-surface": "--surface-neutral-low",
+        "--slidepager-control-border": "--border-neutral",
+        "--slidepager-control-border-width": "--border-width-2",
+        "--slidepager-control-radius": "--radius-full",
+        "--slidepager-control-size": "--space-40",
+        "--slidepager-control-icon": "--text-primary",
+        "--slidepager-control-icon-size": "--icon-size-md",
+        "--slidepager-control-hover-surface": "--surface-brand-high",
+        "--slidepager-control-hover-border": "--border-brand",
+        "--slidepager-control-hover-icon": "--text-inverted",
+        "--slidepager-control-disabled-surface": "--surface-neutral-lower",
+        "--slidepager-control-disabled-border": "--border-neutral-subtle",
+        "--slidepager-control-disabled-icon": "--text-disabled",
+        "--slidepager-counter-text": "--text-secondary",
+        "--slidepager-counter-font-family": "--font-sans",
+        "--slidepager-counter-font-size": "--font-size-lg",
+        "--slidepager-counter-font-weight": "--font-weight-medium",
+        "--slidepager-counter-line-height": "--line-height-normal",
+        "--slidepager-counter-letter-spacing": "--letter-spacing-normal",
+        "--slidepager-scrim-surface": "--scrim-high",
+        "--slidepager-overlay-padding": "--space-64",
+        "--slidepager-close-margin": "--space-24",
+        "--slidepager-overlay-duration": "--duration-300",
+        "--slidepager-overlay-easing": "--ease-out-quad"
+      }
     }
   },
   "componentSchemaVersion": 38