@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/components/Callout.svelte

@@ -0,0 +1,145 @@
+<script context="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 = '';
+</script>
+
+<div class="callout callout-{variant}">
+  {#if label}<strong class="callout-label">{label}</strong>{' '}{/if}<span class="callout-message"><slot /></span>
+</div>
+
+<style lang="scss">
+  @use '../styles/padding' as *;
+
+  // Kept flat (not collapsed via SCSS @each) so the Layer-2 token-discovery
+  // parser (`extractGlobalRootBody` in src/lib/parsers/globalRootBlock.ts)
+  // can read the .svelte source verbatim. See parallel comment in
+  // Notification.svelte.
+  :global(:root) {
+    /* Info */
+    --callout-info-surface: var(--surface-info-lowest);
+    --callout-info-border: var(--border-info-subtle);
+    --callout-info-border-width: var(--border-width-1);
+    --callout-info-accent-width: var(--border-width-4);
+    --callout-info-radius: var(--radius-lg);
+    --callout-info-padding: var(--space-12);
+    --callout-info-label: var(--text-primary);
+    --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-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);
+
+    /* Success */
+    --callout-success-surface: var(--surface-success-lowest);
+    --callout-success-border: var(--border-success-subtle);
+    --callout-success-border-width: var(--border-width-1);
+    --callout-success-accent-width: var(--border-width-4);
+    --callout-success-radius: var(--radius-lg);
+    --callout-success-padding: var(--space-12);
+    --callout-success-label: var(--text-primary);
+    --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-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);
+
+    /* Warning */
+    --callout-warning-surface: var(--surface-warning-lowest);
+    --callout-warning-border: var(--border-warning-subtle);
+    --callout-warning-border-width: var(--border-width-1);
+    --callout-warning-accent-width: var(--border-width-4);
+    --callout-warning-radius: var(--radius-lg);
+    --callout-warning-padding: var(--space-12);
+    --callout-warning-label: var(--text-primary);
+    --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-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);
+
+    /* Danger */
+    --callout-danger-surface: var(--surface-danger-lowest);
+    --callout-danger-border: var(--border-danger-subtle);
+    --callout-danger-border-width: var(--border-width-1);
+    --callout-danger-accent-width: var(--border-width-4);
+    --callout-danger-radius: var(--radius-lg);
+    --callout-danger-padding: var(--space-12);
+    --callout-danger-label: var(--text-primary);
+    --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-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 {
+    margin: var(--space-24) 0;
+
+    :global(p) {
+      margin: 0;
+      display: inline;
+    }
+
+    :global(a) {
+      color: inherit;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  .callout-label {
+    margin-right: 0.25em;
+  }
+
+  // Variant rules differ only by token prefix.
+  @each $variant in (info, success, warning, danger) {
+    .callout-#{$variant} {
+      background: var(--callout-#{$variant}-surface);
+      border: var(--callout-#{$variant}-border-width) solid var(--callout-#{$variant}-border);
+      border-left-width: var(--callout-#{$variant}-accent-width);
+      border-radius: var(--callout-#{$variant}-radius);
+      @include themed-padding(--callout-#{$variant}-padding, $h: 1.33);
+
+      .callout-label {
+        color: var(--callout-#{$variant}-label);
+        font-family: var(--callout-#{$variant}-label-font-family);
+        font-size: var(--callout-#{$variant}-label-font-size);
+        font-weight: var(--callout-#{$variant}-label-font-weight);
+        line-height: var(--callout-#{$variant}-label-line-height);
+      }
+
+      .callout-message {
+        color: var(--callout-#{$variant}-text);
+        font-family: var(--callout-#{$variant}-text-font-family);
+        font-size: var(--callout-#{$variant}-text-font-size);
+        font-weight: var(--callout-#{$variant}-text-font-weight);
+        line-height: var(--callout-#{$variant}-text-line-height);
+      }
+    }
+  }
+</style>

package/src/components/Card.svelte

@@ -3,10 +3,12 @@
   export let iconColor: string = 'var(--text-secondary)';
   export let title: string = '';
   export let size: 'default' | 'compact' = 'default';
+  let className: string = '';
+  export { className as class };
 </script>
 
 <div
-  class="card"
+  class="card {className}"
   class:compact={size === 'compact'}
   style="--card-color: {iconColor};"
 >
@@ -26,58 +28,154 @@
 </div>
 
 <style>
+  :global(:root) {
+    /* Default */
+    --card-default-surface: var(--surface-neutral-high);
+    --card-default-border: var(--border-neutral);
+    --card-default-border-width: var(--border-width-1);
+    --card-default-radius: var(--radius-lg);
+    --card-default-header-padding: var(--space-16);
+    --card-default-body-padding: var(--space-16);
+    --card-default-shadow: var(--shadow-sm);
+    --card-default-blur: var(--blur-none);
+    --card-default-header-surface: var(--color-transparent);
+
+    --card-default-title: var(--text-primary);
+    --card-default-title-font-family: var(--font-sans);
+    --card-default-title-font-size: var(--font-size-lg);
+    --card-default-title-font-weight: var(--font-weight-normal);
+    --card-default-title-line-height: var(--line-height-snug);
+
+    --card-default-icon-size: var(--icon-size-lg);
+
+    --card-default-body: var(--text-secondary);
+    --card-default-body-font-family: var(--font-sans);
+    --card-default-body-font-size: var(--font-size-md);
+    --card-default-body-font-weight: var(--font-weight-normal);
+    --card-default-body-line-height: var(--line-height-normal);
+
+    /* Hover */
+    --card-hover-surface: var(--surface-neutral-high);
+    --card-hover-border: var(--border-neutral-strong);
+    --card-hover-border-width: var(--border-width-1);
+    --card-hover-radius: var(--radius-lg);
+    --card-hover-header-padding: var(--space-16);
+    --card-hover-body-padding: var(--space-16);
+    --card-hover-shadow: var(--shadow-md);
+    --card-hover-blur: var(--blur-none);
+    --card-hover-header-surface: var(--color-transparent);
+
+    --card-hover-title: var(--text-primary);
+    --card-hover-title-font-family: var(--font-sans);
+    --card-hover-title-font-size: var(--font-size-lg);
+    --card-hover-title-font-weight: var(--font-weight-normal);
+    --card-hover-title-line-height: var(--line-height-snug);
+
+    --card-hover-icon-size: var(--icon-size-lg);
+
+    --card-hover-body: var(--text-secondary);
+    --card-hover-body-font-family: var(--font-sans);
+    --card-hover-body-font-size: var(--font-size-md);
+    --card-hover-body-font-weight: var(--font-weight-normal);
+    --card-hover-body-line-height: var(--line-height-normal);
+  }
+
   .card {
-    background: var(--surface-neutral-high);
-    border: 1px solid var(--border-neutral-default);
-    border-radius: var(--radius-lg);
-    padding: var(--space-16);
-    transition: all var(--transition-fast);
+    background: var(--card-default-surface);
+    border: var(--card-default-border-width) solid var(--card-default-border);
+    border-radius: var(--card-default-radius);
+    box-shadow: var(--card-default-shadow);
+    backdrop-filter: blur(var(--card-default-blur));
+    transition: all var(--duration-150);
     display: flex;
     flex-direction: column;
-    gap: var(--space-12);
-  }
-
-  .card:hover {
-    border-color: var(--card-color, var(--border-neutral-strong));
-    box-shadow: var(--shadow-md);
+    overflow: hidden;
   }
 
-  .card.compact {
-    padding: var(--space-8) var(--space-12);
-    gap: var(--space-8);
+  .card:not(.no-hover):hover,
+  .card.force-hover {
+    background: var(--card-hover-surface);
+    border: var(--card-hover-border-width) solid var(--card-hover-border);
+    border-radius: var(--card-hover-radius);
+    box-shadow: var(--card-hover-shadow);
+    backdrop-filter: blur(var(--card-hover-blur));
   }
 
   .card-header {
     display: flex;
     align-items: center;
     gap: var(--space-8);
+    padding: var(--card-default-header-padding);
+    background: var(--card-default-header-surface);
+  }
+
+  .card:not(.no-hover):hover .card-header,
+  .card.force-hover .card-header {
+    padding: var(--card-hover-header-padding);
+    background: var(--card-hover-header-surface);
+  }
+
+  .card.compact .card-header,
+  .card.compact .card-body {
+    padding: var(--space-8) var(--space-12);
   }
 
   .card-icon {
-    font-size: var(--font-lg);
-    color: var(--card-color, var(--text-secondary));
+    font-size: var(--card-default-icon-size);
+    color: var(--card-color, var(--card-default-title));
+  }
+
+  .card:not(.no-hover):hover .card-icon,
+  .card.force-hover .card-icon {
+    font-size: var(--card-hover-icon-size);
+    color: var(--card-color, var(--card-hover-title));
   }
 
   .card.compact .card-icon {
-    font-size: var(--font-md);
+    font-size: var(--icon-size-md);
   }
 
   .card-title {
-    font-size: var(--font-lg);
-    font-weight: var(--font-weight-semibold);
-    color: var(--text-primary);
+    color: var(--card-default-title);
+    font-family: var(--card-default-title-font-family);
+    font-size: var(--card-default-title-font-size);
+    font-weight: var(--card-default-title-font-weight);
+    line-height: var(--card-default-title-line-height);
+  }
+
+  .card:not(.no-hover):hover .card-title,
+  .card.force-hover .card-title {
+    color: var(--card-hover-title);
+    font-family: var(--card-hover-title-font-family);
+    font-size: var(--card-hover-title-font-size);
+    font-weight: var(--card-hover-title-font-weight);
+    line-height: var(--card-hover-title-line-height);
   }
 
   .card.compact .card-title {
-    font-size: var(--font-md);
+    font-size: var(--font-size-md);
   }
 
   .card-body {
-    color: var(--text-secondary);
-    font-size: var(--font-md);
+    color: var(--card-default-body);
+    font-family: var(--card-default-body-font-family);
+    font-size: var(--card-default-body-font-size);
+    font-weight: var(--card-default-body-font-weight);
+    line-height: var(--card-default-body-line-height);
+    padding: var(--card-default-body-padding);
+  }
+
+  .card:not(.no-hover):hover .card-body,
+  .card.force-hover .card-body {
+    color: var(--card-hover-body);
+    font-family: var(--card-hover-body-font-family);
+    font-size: var(--card-hover-body-font-size);
+    font-weight: var(--card-hover-body-font-weight);
+    line-height: var(--card-hover-body-line-height);
+    padding: var(--card-hover-body-padding);
   }
 
   .card.compact .card-body {
-    font-size: var(--font-sm);
+    font-size: var(--font-size-sm);
   }
 </style>

package/src/components/CollapsibleSection.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
    import { createEventDispatcher } from 'svelte';
 
-   // Props
    export let label: string;
    export let expanded: boolean = false;
    export let href: string | undefined = undefined;
    export let active: boolean = false;
+   export let variant: 'chromeless' | 'divider' | 'container' = 'container';
+   let className: string = '';
+   export { className as class };
 
    const dispatch = createEventDispatcher<{
       toggle: void;
@@ -19,49 +21,165 @@
    }
 </script>
 
-{#if href}
-   <a {href} class="section-header" class:expanded class:active on:click={handleHeaderClick}>
-      <div class="section-toggle">
-         <i class="fas fa-chevron-right toggle-icon"></i>
-         <span class="section-label">{label}</span>
+<section class="es-root variant-{variant} {className}">
+   {#if href}
+      <a {href} class="section-header" class:expanded class:active on:click={handleHeaderClick}>
+         <div class="section-toggle">
+            <i class="fas fa-chevron-right toggle-icon"></i>
+            <span class="section-label">{label}</span>
+         </div>
+         <slot name="summary" />
+      </a>
+   {:else}
+      <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+      <div class="section-header" class:expanded on:click={() => dispatch('toggle')}>
+         <div class="section-toggle">
+            <i class="fas fa-chevron-right toggle-icon"></i>
+            <span class="section-label">{label}</span>
+         </div>
+         <slot name="summary" />
       </div>
-      <slot name="summary" />
-   </a>
-{:else}
-   <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-   <div class="section-header" class:expanded on:click={() => dispatch('toggle')}>
-      <div class="section-toggle">
-         <i class="fas fa-chevron-right toggle-icon"></i>
-         <span class="section-label">{label}</span>
+   {/if}
+   {#if expanded && $$slots.default}
+      <div class="section-content">
+         <slot />
       </div>
-      <slot name="summary" />
-   </div>
-{/if}
+   {/if}
+</section>
 
 <style lang="scss">
+   @use '../styles/padding' as *;
+
+   :global(:root) {
+      /* Chromeless — default */
+      --collapsiblesection-chromeless-default-surface: var(--color-transparent);
+      --collapsiblesection-chromeless-default-padding: var(--space-4);
+      --collapsiblesection-chromeless-default-label: var(--text-primary);
+      --collapsiblesection-chromeless-default-label-font-family: var(--font-sans);
+      --collapsiblesection-chromeless-default-label-font-size: var(--font-size-md);
+      --collapsiblesection-chromeless-default-label-font-weight: var(--font-weight-normal);
+      --collapsiblesection-chromeless-default-label-line-height: var(--line-height-normal);
+      --collapsiblesection-chromeless-default-icon: var(--text-muted);
+      --collapsiblesection-chromeless-default-icon-size: var(--icon-size-xs);
+      /* Chromeless — hover */
+      --collapsiblesection-chromeless-hover-surface: var(--color-transparent);
+      --collapsiblesection-chromeless-hover-padding: var(--space-4);
+      --collapsiblesection-chromeless-hover-label: var(--text-primary);
+      --collapsiblesection-chromeless-hover-label-font-family: var(--font-sans);
+      --collapsiblesection-chromeless-hover-label-font-size: var(--font-size-md);
+      --collapsiblesection-chromeless-hover-label-font-weight: var(--font-weight-normal);
+      --collapsiblesection-chromeless-hover-label-line-height: var(--line-height-normal);
+      --collapsiblesection-chromeless-hover-icon: var(--text-primary);
+      --collapsiblesection-chromeless-hover-icon-size: var(--icon-size-xs);
+      /* Chromeless — active */
+      --collapsiblesection-chromeless-active-surface: var(--color-transparent);
+      --collapsiblesection-chromeless-active-padding: var(--space-4);
+      --collapsiblesection-chromeless-active-label: var(--text-primary);
+      --collapsiblesection-chromeless-active-label-font-family: var(--font-sans);
+      --collapsiblesection-chromeless-active-label-font-size: var(--font-size-md);
+      --collapsiblesection-chromeless-active-label-font-weight: var(--font-weight-normal);
+      --collapsiblesection-chromeless-active-label-line-height: var(--line-height-normal);
+      --collapsiblesection-chromeless-active-icon: var(--text-muted);
+      --collapsiblesection-chromeless-active-icon-size: var(--icon-size-xs);
+      /* Chromeless — expanded */
+      --collapsiblesection-chromeless-expanded-padding: var(--space-4);
+
+      /* Divider — default */
+      --collapsiblesection-divider-default-surface: var(--color-transparent);
+      --collapsiblesection-divider-default-border: var(--border-neutral-faint);
+      --collapsiblesection-divider-default-border-width: var(--border-width-1);
+      --collapsiblesection-divider-default-padding: var(--space-4);
+      --collapsiblesection-divider-default-label: var(--text-primary);
+      --collapsiblesection-divider-default-label-font-family: var(--font-sans);
+      --collapsiblesection-divider-default-label-font-size: var(--font-size-md);
+      --collapsiblesection-divider-default-label-font-weight: var(--font-weight-normal);
+      --collapsiblesection-divider-default-label-line-height: var(--line-height-normal);
+      --collapsiblesection-divider-default-icon: var(--text-muted);
+      --collapsiblesection-divider-default-icon-size: var(--icon-size-xs);
+      /* Divider — hover */
+      --collapsiblesection-divider-hover-surface: var(--color-transparent);
+      --collapsiblesection-divider-hover-border: var(--border-neutral);
+      --collapsiblesection-divider-hover-border-width: var(--border-width-1);
+      --collapsiblesection-divider-hover-padding: var(--space-4);
+      --collapsiblesection-divider-hover-label: var(--text-primary);
+      --collapsiblesection-divider-hover-label-font-family: var(--font-sans);
+      --collapsiblesection-divider-hover-label-font-size: var(--font-size-md);
+      --collapsiblesection-divider-hover-label-font-weight: var(--font-weight-normal);
+      --collapsiblesection-divider-hover-label-line-height: var(--line-height-normal);
+      --collapsiblesection-divider-hover-icon: var(--text-primary);
+      --collapsiblesection-divider-hover-icon-size: var(--icon-size-xs);
+      /* Divider — active */
+      --collapsiblesection-divider-active-surface: var(--color-transparent);
+      --collapsiblesection-divider-active-border: var(--color-brand-400);
+      --collapsiblesection-divider-active-border-width: var(--border-width-1);
+      --collapsiblesection-divider-active-padding: var(--space-4);
+      --collapsiblesection-divider-active-label: var(--text-primary);
+      --collapsiblesection-divider-active-label-font-family: var(--font-sans);
+      --collapsiblesection-divider-active-label-font-size: var(--font-size-md);
+      --collapsiblesection-divider-active-label-font-weight: var(--font-weight-normal);
+      --collapsiblesection-divider-active-label-line-height: var(--line-height-normal);
+      --collapsiblesection-divider-active-icon: var(--text-muted);
+      --collapsiblesection-divider-active-icon-size: var(--icon-size-xs);
+      /* Divider — expanded */
+      --collapsiblesection-divider-expanded-padding: var(--space-4);
+
+      /* Container — frame (always-on outer chrome) */
+      --collapsiblesection-container-frame-surface: var(--surface-canvas);
+      --collapsiblesection-container-frame-border: var(--color-transparent);
+      --collapsiblesection-container-frame-border-width: var(--border-width-3);
+      --collapsiblesection-container-frame-radius: var(--radius-none);
+      /* Container — default header strip */
+      --collapsiblesection-container-default-surface: var(--surface-canvas);
+      --collapsiblesection-container-default-padding: var(--space-4);
+      --collapsiblesection-container-default-label: var(--text-primary);
+      --collapsiblesection-container-default-label-font-family: var(--font-sans);
+      --collapsiblesection-container-default-label-font-size: var(--font-size-md);
+      --collapsiblesection-container-default-label-font-weight: var(--font-weight-normal);
+      --collapsiblesection-container-default-label-line-height: var(--line-height-normal);
+      --collapsiblesection-container-default-icon: var(--text-muted);
+      --collapsiblesection-container-default-icon-size: var(--icon-size-xs);
+      /* Container — hover header strip */
+      --collapsiblesection-container-hover-surface: var(--surface-canvas);
+      --collapsiblesection-container-hover-padding: var(--space-4);
+      --collapsiblesection-container-hover-label: var(--text-primary);
+      --collapsiblesection-container-hover-label-font-family: var(--font-sans);
+      --collapsiblesection-container-hover-label-font-size: var(--font-size-md);
+      --collapsiblesection-container-hover-label-font-weight: var(--font-weight-normal);
+      --collapsiblesection-container-hover-label-line-height: var(--line-height-normal);
+      --collapsiblesection-container-hover-icon: var(--text-muted);
+      --collapsiblesection-container-hover-icon-size: var(--icon-size-xs);
+      /* Container — active header strip */
+      --collapsiblesection-container-active-surface: var(--surface-canvas-low);
+      --collapsiblesection-container-active-padding: var(--space-4);
+      --collapsiblesection-container-active-label: var(--text-primary);
+      --collapsiblesection-container-active-label-font-family: var(--font-sans);
+      --collapsiblesection-container-active-label-font-size: var(--font-size-md);
+      --collapsiblesection-container-active-label-font-weight: var(--font-weight-normal);
+      --collapsiblesection-container-active-label-line-height: var(--line-height-normal);
+      --collapsiblesection-container-active-icon: var(--text-muted);
+      --collapsiblesection-container-active-icon-size: var(--icon-size-xs);
+      /* Container — expanded content area */
+      --collapsiblesection-container-expanded-surface: var(--surface-canvas-low);
+      --collapsiblesection-container-expanded-padding: var(--space-4);
+   }
+
+   .es-root {
+      display: flex;
+      flex-direction: column;
+   }
+
    .section-header {
       display: flex;
       align-items: center;
       gap: var(--space-12);
-      padding: var(--space-4) var(--space-8);
-      border-left: 3px solid transparent;
       cursor: pointer;
       text-decoration: none;
       color: inherit;
-      transition: all var(--transition-fast);
-
-      &:hover {
-         background: var(--surface-bg);
-      }
+      transition: all var(--duration-150);
 
       &.expanded .toggle-icon {
          transform: rotate(90deg);
       }
-
-      &.active {
-         background: var(--surface-bg-low);
-         border-left-color: var(--color-primary-400);
-      }
    }
 
    .section-toggle {
@@ -69,14 +187,74 @@
       align-items: center;
       gap: var(--space-8);
       flex-shrink: 0;
-      color: var(--text-primary);
-      font-size: var(--font-md);
-      font-weight: var(--font-weight-semibold);
+   }
+
+   @mixin header-paint($variant, $state) {
+      background: var(--collapsiblesection-#{$variant}-#{$state}-surface);
+      @include themed-padding(--collapsiblesection-#{$variant}-#{$state}-padding, $h: 2);
+
+      .section-label {
+         color: var(--collapsiblesection-#{$variant}-#{$state}-label);
+         font-family: var(--collapsiblesection-#{$variant}-#{$state}-label-font-family);
+         font-size: var(--collapsiblesection-#{$variant}-#{$state}-label-font-size);
+         font-weight: var(--collapsiblesection-#{$variant}-#{$state}-label-font-weight);
+         line-height: var(--collapsiblesection-#{$variant}-#{$state}-label-line-height);
+      }
 
       .toggle-icon {
-         font-size: var(--font-xs);
-         color: var(--text-muted);
-         transition: transform 0.15s ease;
+         color: var(--collapsiblesection-#{$variant}-#{$state}-icon);
+         font-size: var(--collapsiblesection-#{$variant}-#{$state}-icon-size);
+         transition: transform var(--duration-150);
+      }
+   }
+
+   @mixin divider-bottom($state) {
+      border-bottom: var(--collapsiblesection-divider-#{$state}-border-width) solid var(--collapsiblesection-divider-#{$state}-border);
+   }
+
+   .es-root.variant-chromeless {
+      > .section-header {
+         @include header-paint(chromeless, default);
+         &:hover, &.force-hover { @include header-paint(chromeless, hover); }
+         &.active { @include header-paint(chromeless, active); }
+      }
+      > .section-content {
+         @include themed-padding(--collapsiblesection-chromeless-expanded-padding, $h: 2);
+      }
+   }
+
+   .es-root.variant-divider {
+      > .section-header {
+         @include header-paint(divider, default);
+         @include divider-bottom(default);
+         &:hover, &.force-hover {
+            @include header-paint(divider, hover);
+            @include divider-bottom(hover);
+         }
+         &.active {
+            @include header-paint(divider, active);
+            @include divider-bottom(active);
+         }
+      }
+      > .section-content {
+         @include themed-padding(--collapsiblesection-divider-expanded-padding, $h: 2);
+      }
+   }
+
+   .es-root.variant-container {
+      background: var(--collapsiblesection-container-frame-surface);
+      border: var(--collapsiblesection-container-frame-border-width) solid var(--collapsiblesection-container-frame-border);
+      border-radius: var(--collapsiblesection-container-frame-radius);
+      overflow: hidden;
+
+      > .section-header {
+         @include header-paint(container, default);
+         &:hover, &.force-hover { @include header-paint(container, hover); }
+         &.active { @include header-paint(container, active); }
+      }
+      > .section-content {
+         background: var(--collapsiblesection-container-expanded-surface);
+         @include themed-padding(--collapsiblesection-container-expanded-padding, $h: 2);
       }
    }
 </style>