@motion-proto/live-tokens 0.3.7 → 0.5.0

package/src/component-editor/scaffolding/VariantGroup.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
+  import type { Snippet } from 'svelte';
   import TokenLayout from './TokenLayout.svelte';
   import StateBlock from './StateBlock.svelte';
   import CopyFromMenu from './CopyFromMenu.svelte';
@@ -8,36 +9,62 @@
   import type { Token, TypeGroupConfig } from './types';
   import type { Sibling } from './siblings';
 
-  export let name: string;
-  export let title: string;
-  export let tokens: Token[] = [];
-  export let states: Record<string, Token[]> | null = null;
-  /** Per-state type groups; rendered as TypeEditor blocks alongside the state's TokenLayout. */
-  export let typeGroups: Record<string, TypeGroupConfig[]> = {};
-  /** When set, overrides are read from and cleared through the editor store. */
-  export let component: string | undefined = undefined;
-  /** Sibling variants of this component (excludes self). When non-empty,
-      a "Copy from" menu is rendered that lets the user pull token values from
-      a sibling's same-state into the current state. */
-  export let siblings: Sibling[] = [];
-  /** Forwarded to StateBlock → TokenLayout. >1 lays out the property grid
-      across multiple visual columns (column-major flow). Useful for
-      single-text components like Button whose 8-10 properties stretch the
-      panel vertically when stacked single-column. */
-  export let columns: number = 1;
-  /** Label rendered above the state-tab selector strip. Defaults to "Element"
-      because most strips mix structural parts (e.g. bar, frame) with
-      component states; "States" would mislabel the parts. Editors can override
-      when every tab on the strip really is a state. */
-  export let selectorLabel: string = 'Element';
+  interface Props {
+    name: string;
+    title: string;
+    tokens?: Token[];
+    states?: Record<string, Token[]> | null;
+    /** Per-state type groups; rendered as TypeEditor blocks alongside the state's TokenLayout. */
+    typeGroups?: Record<string, TypeGroupConfig[]>;
+    /** When set, overrides are read from and cleared through the editor store. */
+    component?: string | undefined;
+    /** Sibling variants of this component (excludes self). When non-empty,
+        a "Copy from" menu is rendered that lets the user pull token values from
+        a sibling's same-state into the current state. */
+    siblings?: Sibling[];
+    /** Forwarded to StateBlock → TokenLayout. >1 lays out the property grid
+        across multiple visual columns (column-major flow). Useful for
+        single-text components like Button whose 8-10 properties stretch the
+        panel vertically when stacked single-column. */
+    columns?: number;
+    /** Label rendered above the state-tab selector strip. Defaults to "Element"
+        because most strips mix structural parts (e.g. bar, frame) with
+        component states; "States" would mislabel the parts. Editors can override
+        when every tab on the strip really is a state. */
+    selectorLabel?: string;
+    /** Forwarded to StateBlock — fires when a token is mutated. */
+    onchange?: () => void;
+    /** Default snippet: receives the active state name; renders the live preview. */
+    children?: Snippet<[{ activeState: string }]>;
+    /** Right-aligned controls in the state-tabs strip (e.g. per-state toggles). */
+    stateActions?: Snippet<[string]>;
+    /** Rendered above the property grid when a state is active. */
+    compositeControls?: Snippet<[string]>;
+  }
+
+  let {
+    name,
+    title,
+    tokens = [],
+    states = null,
+    typeGroups = {},
+    component = undefined,
+    siblings = [],
+    columns = 1,
+    selectorLabel = 'Element',
+    onchange,
+    children,
+    stateActions,
+    compositeControls,
+  }: Props = $props();
 
   const editorCtx = getEditorContext();
   const linkedOrderStore = editorCtx?.linkedOrder ?? writable<Map<string, number> | null>(null);
   const focusedVariantStore = editorCtx?.focusedVariant ?? writable<string | null>(null);
   const focusedStateStore = editorCtx?.focusedState ?? writable<string | null>(null);
-  $: linkedOrder = $linkedOrderStore ?? undefined;
+  let linkedOrder = $derived($linkedOrderStore ?? undefined);
 
-  let activeTab: string = '';
+  let activeTab: string = $state('');
 
   const TYPE_PROPS = ['colorVariable', 'familyVariable', 'sizeVariable', 'weightVariable', 'lineHeightVariable', 'outlineWidthVariable', 'outlineColorVariable'] as const;
 
@@ -73,7 +100,7 @@
     });
   }
 
-  $: copySources = (() => {
+  let copySources = $derived.by(() => {
     const fromSiblings = siblings.map((s) => ({
       name: s.name,
       label: s.label,
@@ -84,27 +111,33 @@
       return [{ name, label: title, states: ownStates }, ...fromSiblings];
     }
     return fromSiblings;
-  })();
+  });
 
-  $: stateNames = states ? Object.keys(states) : [];
-  $: tabsStripVisible = stateNames.length >= 2;
-  $: if (stateNames.length > 0 && !stateNames.includes(activeTab)) {
-    activeTab = stateNames[0];
-  }
+  let stateNames = $derived(states ? Object.keys(states) : []);
+  let tabsStripVisible = $derived(stateNames.length >= 2);
+  $effect(() => {
+    if (stateNames.length > 0 && !stateNames.includes(activeTab)) {
+      activeTab = stateNames[0];
+    }
+  });
   // Cross-group hint from chart row clicks: adopt it if it names one of our states.
-  $: if ($focusedStateStore && stateNames.includes($focusedStateStore) && activeTab !== $focusedStateStore) {
-    activeTab = $focusedStateStore;
-  }
+  $effect(() => {
+    if ($focusedStateStore && stateNames.includes($focusedStateStore) && activeTab !== $focusedStateStore) {
+      activeTab = $focusedStateStore;
+    }
+  });
 
-  $: inFocusMode = siblings.length > 0;
-  $: amIFocused = $focusedVariantStore === name;
-  $: shouldRender = !inFocusMode || amIFocused;
+  let inFocusMode = $derived(siblings.length > 0);
+  let amIFocused = $derived($focusedVariantStore === name);
+  let shouldRender = $derived(!inFocusMode || amIFocused);
   // Mirror this group's active state back to the shared store when this is the
   // focused variant, so the linked-block row + chart selection track the user's
   // state-tab clicks (not just chart-row clicks).
-  $: if (amIFocused && activeTab && stateNames.includes(activeTab) && $focusedStateStore !== activeTab) {
-    focusedStateStore.set(activeTab);
-  }
+  $effect(() => {
+    if (amIFocused && activeTab && stateNames.includes(activeTab) && $focusedStateStore !== activeTab) {
+      focusedStateStore.set(activeTab);
+    }
+  });
 
 </script>
 
@@ -120,7 +153,7 @@
     <!-- Preview at top, then state tabs + Copy from, then properties for active tab. -->
     <div class="tabs-preview">
       <span class="section-label">Preview</span>
-      <slot activeState={activeTab} />
+      {@render children?.({ activeState: activeTab })}
     </div>
 
     {#if tabsStripVisible || (copySources.length > 0 && activeTab)}
@@ -138,20 +171,20 @@
                   class:active={activeTab === s}
                   role="tab"
                   aria-selected={activeTab === s}
-                  on:click={() => { activeTab = s; focusedStateStore.set(s); }}
+                  onclick={() => { activeTab = s; focusedStateStore.set(s); }}
                 >{s}</button>
               {/each}
             </div>
           {/if}
           {#if activeTab}
-            <slot name="state-actions" stateName={activeTab} />
+            {@render stateActions?.(activeTab)}
           {/if}
           {#if copySources.length > 0 && activeTab}
             <CopyFromMenu
               toState={activeTab}
               variantName={name}
               {copySources}
-              on:select={(e) => pickCopySource(activeTab, e.detail.fromVariant, e.detail.fromState)}
+              onselect={(d) => pickCopySource(activeTab, d.fromVariant, d.fromState)}
             />
           {/if}
         </div>
@@ -160,7 +193,7 @@
 
     {#if activeTab && states[activeTab]}
       {@const stateName = activeTab}
-      <slot name="composite-controls" {stateName} />
+      {@render compositeControls?.(stateName)}
       <span class="section-label">Properties</span>
       <StateBlock
         tokens={states[stateName]}
@@ -168,17 +201,17 @@
         {component}
         {linkedOrder}
         {columns}
-        on:change
+        {onchange}
       />
     {/if}
   {:else}
-    <slot activeState="" />
+    {@render children?.({ activeState: '' })}
     <TokenLayout
       title={name}
       tokens={tokens}
       {component}
       {linkedOrder}
-      on:change
+      {onchange}
     />
   {/if}
 

package/src/component-editor/scaffolding/componentSectionType.ts

@@ -1,8 +1,8 @@
-import type { ComponentType } from 'svelte';
+import type { Component } from 'svelte';
 
 export type ComponentSection = {
   id: string;
   label: string;
-  component: ComponentType;
+  component: Component<any, any, any>;
   props?: Record<string, unknown>;
 };

package/src/components/Badge.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export const badgeVariants = [
     'primary',
     'accent',
@@ -15,17 +15,36 @@
 </script>
 
 <script lang="ts">
-  export let variant: BadgeVariant = 'info';
-  export let size: 'default' | 'small' = 'default';
-  export let icon: string | undefined = undefined;
-  /** When true, badge is absolutely positioned. Requires the parent to be position: relative. */
-  export let floating: boolean = false;
-  /** Corner of the positioned parent to attach to when floating. */
-  export let anchor: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = 'bottom-right';
-  /** CSS length to offset from the anchor edges. Defaults to --space-12 (or --space-8 when size='small'). */
-  export let offset: string | undefined = undefined;
-  /** When true, badge sits flush in the anchor corner: zero offset and squared corners. */
-  export let flush: boolean = false;
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    variant?: BadgeVariant;
+    size?: 'default' | 'small';
+    icon?: string | undefined;
+    /** When true, badge is absolutely positioned. Requires the parent to be position: relative. */
+    floating?: boolean;
+    /** Corner of the positioned parent to attach to when floating. */
+    anchor?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** CSS length to offset from the anchor edges. Defaults to --space-12 (or --space-8 when size='small'). */
+    offset?: string | undefined;
+    /** When true, badge sits flush in the anchor corner: zero offset and squared corners. */
+    flush?: boolean;
+    /** Custom icon content. Falls back to `icon` prop's font-icon class. Renamed from `slot="icon"` in 0.5.0. */
+    iconSlot?: Snippet;
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'info',
+    size = 'default',
+    icon = undefined,
+    floating = false,
+    anchor = 'bottom-right',
+    offset = undefined,
+    flush = false,
+    iconSlot,
+    children,
+  }: Props = $props();
 </script>
 
 <span
@@ -38,10 +57,10 @@
 >
   {#if icon}
     <span class="icon"><i class={icon}></i></span>
-  {:else}
-    <span class="icon"><slot name="icon" /></span>
+  {:else if iconSlot}
+    <span class="icon">{@render iconSlot()}</span>
   {/if}
-  <slot />
+  {@render children?.()}
 </span>
 
 <style lang="scss">
@@ -64,7 +83,7 @@
     --badge-primary-text-font-family: var(--font-sans);
     --badge-primary-text-font-size: var(--font-size-sm);
     --badge-primary-text-font-weight: var(--font-weight-light);
-    --badge-primary-text-line-height: var(--line-height-tight);
+    --badge-primary-text-line-height: var(--line-height-xs);
     --badge-primary-border-width: var(--border-width-1);
     --badge-primary-radius: var(--radius-full);
     --badge-primary-padding: var(--space-6);
@@ -79,7 +98,7 @@
     --badge-accent-text-font-family: var(--font-sans);
     --badge-accent-text-font-size: var(--font-size-sm);
     --badge-accent-text-font-weight: var(--font-weight-light);
-    --badge-accent-text-line-height: var(--line-height-tight);
+    --badge-accent-text-line-height: var(--line-height-xs);
     --badge-accent-border-width: var(--border-width-1);
     --badge-accent-radius: var(--radius-full);
     --badge-accent-padding: var(--space-6);
@@ -94,7 +113,7 @@
     --badge-neutral-text-font-family: var(--font-sans);
     --badge-neutral-text-font-size: var(--font-size-sm);
     --badge-neutral-text-font-weight: var(--font-weight-light);
-    --badge-neutral-text-line-height: var(--line-height-tight);
+    --badge-neutral-text-line-height: var(--line-height-xs);
     --badge-neutral-border-width: var(--border-width-1);
     --badge-neutral-radius: var(--radius-full);
     --badge-neutral-padding: var(--space-6);
@@ -109,7 +128,7 @@
     --badge-alternate-text-font-family: var(--font-sans);
     --badge-alternate-text-font-size: var(--font-size-sm);
     --badge-alternate-text-font-weight: var(--font-weight-light);
-    --badge-alternate-text-line-height: var(--line-height-tight);
+    --badge-alternate-text-line-height: var(--line-height-xs);
     --badge-alternate-border-width: var(--border-width-1);
     --badge-alternate-radius: var(--radius-full);
     --badge-alternate-padding: var(--space-6);
@@ -124,7 +143,7 @@
     --badge-canvas-text-font-family: var(--font-sans);
     --badge-canvas-text-font-size: var(--font-size-sm);
     --badge-canvas-text-font-weight: var(--font-weight-light);
-    --badge-canvas-text-line-height: var(--line-height-tight);
+    --badge-canvas-text-line-height: var(--line-height-xs);
     --badge-canvas-border-width: var(--border-width-1);
     --badge-canvas-radius: var(--radius-full);
     --badge-canvas-padding: var(--space-6);
@@ -139,7 +158,7 @@
     --badge-special-text-font-family: var(--font-sans);
     --badge-special-text-font-size: var(--font-size-sm);
     --badge-special-text-font-weight: var(--font-weight-light);
-    --badge-special-text-line-height: var(--line-height-tight);
+    --badge-special-text-line-height: var(--line-height-xs);
     --badge-special-border-width: var(--border-width-1);
     --badge-special-radius: var(--radius-full);
     --badge-special-padding: var(--space-6);
@@ -154,7 +173,7 @@
     --badge-success-text-font-family: var(--font-sans);
     --badge-success-text-font-size: var(--font-size-sm);
     --badge-success-text-font-weight: var(--font-weight-light);
-    --badge-success-text-line-height: var(--line-height-tight);
+    --badge-success-text-line-height: var(--line-height-xs);
     --badge-success-border-width: var(--border-width-1);
     --badge-success-radius: var(--radius-full);
     --badge-success-padding: var(--space-6);
@@ -169,7 +188,7 @@
     --badge-warning-text-font-family: var(--font-sans);
     --badge-warning-text-font-size: var(--font-size-sm);
     --badge-warning-text-font-weight: var(--font-weight-light);
-    --badge-warning-text-line-height: var(--line-height-tight);
+    --badge-warning-text-line-height: var(--line-height-xs);
     --badge-warning-border-width: var(--border-width-1);
     --badge-warning-radius: var(--radius-full);
     --badge-warning-padding: var(--space-6);
@@ -184,7 +203,7 @@
     --badge-danger-text-font-family: var(--font-sans);
     --badge-danger-text-font-size: var(--font-size-sm);
     --badge-danger-text-font-weight: var(--font-weight-light);
-    --badge-danger-text-line-height: var(--line-height-tight);
+    --badge-danger-text-line-height: var(--line-height-xs);
     --badge-danger-border-width: var(--border-width-1);
     --badge-danger-radius: var(--radius-full);
     --badge-danger-padding: var(--space-6);
@@ -199,7 +218,7 @@
     --badge-info-text-font-family: var(--font-sans);
     --badge-info-text-font-size: var(--font-size-sm);
     --badge-info-text-font-weight: var(--font-weight-light);
-    --badge-info-text-line-height: var(--line-height-tight);
+    --badge-info-text-line-height: var(--line-height-xs);
     --badge-info-border-width: var(--border-width-1);
     --badge-info-radius: var(--radius-full);
     --badge-info-padding: var(--space-6);
@@ -213,7 +232,7 @@
     display: inline-flex;
     align-items: center;
     gap: var(--space-6);
-    line-height: var(--line-height-tight);
+    line-height: var(--line-height-xs);
     white-space: nowrap;
     backdrop-filter: blur(var(--badge-blur, 0));
     -webkit-backdrop-filter: blur(var(--badge-blur, 0));

package/src/components/Button.svelte

@@ -1,23 +1,46 @@
 <script lang="ts">
    import { createEventDispatcher } from 'svelte';
 
-   export let disabled: boolean = false;
-   export let type: 'button' | 'submit' | 'reset' = 'button';
-   export let variant: 'primary' | 'secondary' | 'outline' | 'success' | 'danger' | 'warning' = 'primary';
-   export let size: 'default' | 'small' = 'default';
-   export let ariaLabel: string | undefined = undefined;
-   export let tooltip: string | undefined = undefined;
-   export let icon: string | undefined = undefined;
-   export let iconPosition: 'left' | 'right' = 'left';
-   export let fullWidth: boolean = false;
-   export let buttonRef: HTMLButtonElement | undefined = undefined;
-   let className: string = '';
-   export { className as class };
+   interface Props {
+      disabled?: boolean;
+      type?: 'button' | 'submit' | 'reset';
+      variant?: 'primary' | 'secondary' | 'outline' | 'success' | 'danger' | 'warning';
+      size?: 'default' | 'small';
+      ariaLabel?: string | undefined;
+      tooltip?: string | undefined;
+      icon?: string | undefined;
+      iconPosition?: 'left' | 'right';
+      fullWidth?: boolean;
+      buttonRef?: HTMLButtonElement | undefined;
+      class?: string;
+      /** Click callback. Preferred over `on:click` from 0.5.0 onward. */
+      onclick?: (event: MouseEvent) => void;
+      children?: import('svelte').Snippet;
+   }
 
+   let {
+      disabled = false,
+      type = 'button',
+      variant = 'primary',
+      size = 'default',
+      ariaLabel = undefined,
+      tooltip = undefined,
+      icon = undefined,
+      iconPosition = 'left',
+      fullWidth = false,
+      buttonRef = $bindable(undefined),
+      class: className = '',
+      onclick,
+      children
+   }: Props = $props();
+
+   // Dual-fire bridge: keeps Svelte-4-style `<Button on:click={fn}>` consumers
+   // working until 0.6.0. Remove the dispatcher and this comment in 0.6.0.
    const dispatch = createEventDispatcher();
 
    function handleClick(event: MouseEvent) {
       if (!disabled) {
+         onclick?.(event);
          dispatch('click', event);
       }
    }
@@ -32,12 +55,12 @@
    {disabled}
    aria-label={ariaLabel}
    data-tooltip={tooltip}
-   on:click={handleClick}
+   onclick={handleClick}
 >
    {#if icon && iconPosition === 'left'}
       <i class={icon}></i>
    {/if}
-   <slot />
+   {@render children?.()}
    {#if icon && iconPosition === 'right'}
       <i class={icon}></i>
    {/if}
@@ -56,7 +79,7 @@
       --button-primary-text-font-family: var(--font-sans);
       --button-primary-text-font-size: var(--font-size-sm);
       --button-primary-text-font-weight: var(--font-weight-light);
-      --button-primary-text-line-height: var(--line-height-snug);
+      --button-primary-text-line-height: var(--line-height-sm);
       --button-primary-border: var(--border-brand);
       --button-primary-border-width: var(--border-width-1);
       --button-primary-radius: var(--radius-md);
@@ -81,7 +104,7 @@
       --button-secondary-text-font-family: var(--font-sans);
       --button-secondary-text-font-size: var(--font-size-sm);
       --button-secondary-text-font-weight: var(--font-weight-light);
-      --button-secondary-text-line-height: var(--line-height-snug);
+      --button-secondary-text-line-height: var(--line-height-sm);
       --button-secondary-border: var(--border-neutral);
       --button-secondary-border-width: var(--border-width-1);
       --button-secondary-radius: var(--radius-md);
@@ -106,7 +129,7 @@
       --button-outline-text-font-family: var(--font-sans);
       --button-outline-text-font-size: var(--font-size-sm);
       --button-outline-text-font-weight: var(--font-weight-light);
-      --button-outline-text-line-height: var(--line-height-snug);
+      --button-outline-text-line-height: var(--line-height-sm);
       --button-outline-border: var(--border-neutral);
       --button-outline-border-width: var(--border-width-1);
       --button-outline-radius: var(--radius-md);
@@ -131,7 +154,7 @@
       --button-success-text-font-family: var(--font-sans);
       --button-success-text-font-size: var(--font-size-sm);
       --button-success-text-font-weight: var(--font-weight-light);
-      --button-success-text-line-height: var(--line-height-snug);
+      --button-success-text-line-height: var(--line-height-sm);
       --button-success-border: var(--border-success);
       --button-success-border-width: var(--border-width-2);
       --button-success-radius: var(--radius-md);
@@ -156,7 +179,7 @@
       --button-danger-text-font-family: var(--font-sans);
       --button-danger-text-font-size: var(--font-size-sm);
       --button-danger-text-font-weight: var(--font-weight-light);
-      --button-danger-text-line-height: var(--line-height-snug);
+      --button-danger-text-line-height: var(--line-height-sm);
       --button-danger-border: var(--border-danger);
       --button-danger-border-width: var(--border-width-2);
       --button-danger-radius: var(--radius-md);
@@ -181,7 +204,7 @@
       --button-warning-text-font-family: var(--font-sans);
       --button-warning-text-font-size: var(--font-size-sm);
       --button-warning-text-font-weight: var(--font-weight-light);
-      --button-warning-text-line-height: var(--line-height-snug);
+      --button-warning-text-line-height: var(--line-height-sm);
       --button-warning-border: var(--border-warning);
       --button-warning-border-width: var(--border-width-2);
       --button-warning-radius: var(--radius-md);
@@ -499,7 +522,7 @@
          padding: var(--space-6) var(--space-12);
          font-size: var(--font-size-xs);
          font-weight: var(--font-weight-normal);
-         line-height: var(--line-height-snug);
+         line-height: var(--line-height-sm);
       }
 
       &.small :global(i) {

package/src/components/Callout.svelte

@@ -1,15 +1,20 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export const calloutVariants = ['info', 'success', 'warning', 'danger'] as const;
   export type CalloutVariant = typeof calloutVariants[number];
 </script>
 
 <script lang="ts">
-  export let variant: CalloutVariant = 'info';
-  export let label: string = '';
+  interface Props {
+    variant?: CalloutVariant;
+    label?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { variant = 'info', label = '', children }: Props = $props();
 </script>
 
 <div class="callout callout-{variant}">
-  {#if label}<strong class="callout-label">{label}</strong>{' '}{/if}<span class="callout-message"><slot /></span>
+  {#if label}<strong class="callout-label">{label}</strong>{' '}{/if}<span class="callout-message">{@render children?.()}</span>
 </div>
 
 <style lang="scss">
@@ -31,12 +36,12 @@
     --callout-info-label-font-family: var(--font-serif);
     --callout-info-label-font-size: var(--font-size-md);
     --callout-info-label-font-weight: var(--font-weight-bold);
-    --callout-info-label-line-height: var(--line-height-relaxed);
+    --callout-info-label-line-height: var(--line-height-md);
     --callout-info-text: var(--text-info);
     --callout-info-text-font-family: var(--font-serif);
     --callout-info-text-font-size: var(--font-size-md);
     --callout-info-text-font-weight: var(--font-weight-normal);
-    --callout-info-text-line-height: var(--line-height-relaxed);
+    --callout-info-text-line-height: var(--line-height-md);
 
     /* Success */
     --callout-success-surface: var(--surface-success-lowest);
@@ -49,12 +54,12 @@
     --callout-success-label-font-family: var(--font-serif);
     --callout-success-label-font-size: var(--font-size-md);
     --callout-success-label-font-weight: var(--font-weight-bold);
-    --callout-success-label-line-height: var(--line-height-relaxed);
+    --callout-success-label-line-height: var(--line-height-md);
     --callout-success-text: var(--text-success);
     --callout-success-text-font-family: var(--font-serif);
     --callout-success-text-font-size: var(--font-size-md);
     --callout-success-text-font-weight: var(--font-weight-normal);
-    --callout-success-text-line-height: var(--line-height-relaxed);
+    --callout-success-text-line-height: var(--line-height-md);
 
     /* Warning */
     --callout-warning-surface: var(--surface-warning-lowest);
@@ -67,12 +72,12 @@
     --callout-warning-label-font-family: var(--font-serif);
     --callout-warning-label-font-size: var(--font-size-md);
     --callout-warning-label-font-weight: var(--font-weight-bold);
-    --callout-warning-label-line-height: var(--line-height-relaxed);
+    --callout-warning-label-line-height: var(--line-height-md);
     --callout-warning-text: var(--text-warning);
     --callout-warning-text-font-family: var(--font-serif);
     --callout-warning-text-font-size: var(--font-size-md);
     --callout-warning-text-font-weight: var(--font-weight-normal);
-    --callout-warning-text-line-height: var(--line-height-relaxed);
+    --callout-warning-text-line-height: var(--line-height-md);
 
     /* Danger */
     --callout-danger-surface: var(--surface-danger-lowest);
@@ -85,12 +90,12 @@
     --callout-danger-label-font-family: var(--font-serif);
     --callout-danger-label-font-size: var(--font-size-md);
     --callout-danger-label-font-weight: var(--font-weight-bold);
-    --callout-danger-label-line-height: var(--line-height-relaxed);
+    --callout-danger-label-line-height: var(--line-height-md);
     --callout-danger-text: var(--text-danger);
     --callout-danger-text-font-family: var(--font-serif);
     --callout-danger-text-font-size: var(--font-size-md);
     --callout-danger-text-font-weight: var(--font-weight-normal);
-    --callout-danger-text-line-height: var(--line-height-relaxed);
+    --callout-danger-text-line-height: var(--line-height-md);
   }
 
   .callout {