@motion-proto/live-tokens 0.1.0

package/src/showcase/demos/ChoiceButtonsDemo.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+  let selectedChoice = 'option-2';
+  function handleChoiceClick(choice: string) {
+    selectedChoice = choice;
+  }
+</script>
+
+<div class="demo-block">
+  <h2 class="component-title">Button-Based Choice Sets</h2>
+  <p class="demo-description">
+    Interactive example showing all 4 visual states. Click buttons to see selection state.
+  </p>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">Interactive Example</h3>
+    <div class="choice-buttons-container">
+      <button
+        class="choice-button"
+        class:selected={selectedChoice === 'option-1'}
+        on:click={() => handleChoiceClick('option-1')}
+      >
+        <i class="fas fa-star"></i>
+        <span>Default/Hover</span>
+      </button>
+
+      <button
+        class="choice-button"
+        class:selected={selectedChoice === 'option-2'}
+        on:click={() => handleChoiceClick('option-2')}
+      >
+        <i class="fas fa-check"></i>
+        <span>Selected</span>
+      </button>
+
+      <button
+        class="choice-button"
+        class:selected={selectedChoice === 'option-3'}
+        on:click={() => handleChoiceClick('option-3')}
+      >
+        <i class="fas fa-heart"></i>
+        <span>Clickable</span>
+      </button>
+
+      <button
+        class="choice-button"
+        disabled
+      >
+        <i class="fas fa-ban"></i>
+        <span>Disabled</span>
+      </button>
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">State Reference</h3>
+    <div class="state-reference">
+      <div class="state-item">
+        <div class="state-label">Default</div>
+        <div class="state-details">
+          <code>background: --surface-neutral-high</code>
+          <code>border: 1px --border-neutral-default</code>
+        </div>
+      </div>
+
+      <div class="state-item">
+        <div class="state-label">Hover</div>
+        <div class="state-details">
+          <code>background: --surface-neutral-higher</code>
+          <code>border-color: --border-neutral-strong</code>
+        </div>
+      </div>
+
+      <div class="state-item">
+        <div class="state-label">Selected</div>
+        <div class="state-details">
+          <code>background: --surface-success-high</code>
+          <code>outline: 2px --border-success</code>
+        </div>
+      </div>
+
+      <div class="state-item">
+        <div class="state-label">Disabled</div>
+        <div class="state-details">
+          <code>opacity: 0.4</code>
+          <code>cursor: not-allowed</code>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  @import '../../styles/variables.css';
+
+  .choice-buttons-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-10);
+  }
+
+  .choice-button {
+    display: flex;
+    align-items: center;
+    gap: var(--space-8);
+    padding: var(--space-10) var(--space-16);
+    background: var(--ui-surface-high);
+    border: 1px solid var(--ui-border-default);
+    border-radius: var(--radius-lg);
+    outline: 2px solid transparent;
+    outline-offset: -1px;
+    font-size: var(--font-md);
+    font-weight: 500;
+    color: var(--ui-text-primary);
+    cursor: pointer;
+    transition: all 0.2s;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .choice-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, var(--ui-hover), transparent);
+    transition: left 0.5s ease;
+  }
+
+  .choice-button:hover::before {
+    left: 100%;
+  }
+
+  .choice-button i {
+    font-size: var(--font-lg);
+    color: var(--ui-text-secondary);
+    transition: color 0.2s;
+  }
+
+  .choice-button:hover:not(:disabled):not(.selected) {
+    background: var(--ui-surface-higher);
+    border-color: var(--ui-border-strong);
+    transform: translateY(-0.0625rem);
+    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
+  }
+
+  .choice-button.selected {
+    background: var(--ui-surface-highest);
+    outline-color: var(--ui-border-strong);
+  }
+
+  .choice-button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .state-reference {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--space-12);
+  }
+
+  .state-item {
+    background: var(--ui-surface-low);
+    border: 1px solid var(--ui-border-subtle);
+    border-radius: var(--radius-md);
+    padding: var(--space-12);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-8);
+  }
+
+  .state-label {
+    font-size: var(--font-sm);
+    font-weight: var(--font-weight-semibold);
+    color: var(--ui-text-primary);
+  }
+
+  .state-details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  .state-details code {
+    font-size: var(--font-xs);
+    color: var(--ui-text-tertiary);
+    background: var(--ui-surface-lowest);
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-sm);
+    font-family: var(--ui-font-mono);
+  }
+</style>

package/src/showcase/demos/CollapsibleSectionDemo.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import CollapsibleSection from '../../components/CollapsibleSection.svelte';
+  import TokenMap from '../TokenMap.svelte';
+
+  let demoExpanded = false;
+</script>
+
+<div class="demo-block">
+  <h2 class="component-title">Collapsible Section Component</h2>
+  <p class="demo-description">
+    Expandable section with chevron toggle. Import from <code>components/CollapsibleSection.svelte</code>
+  </p>
+
+  <div class="demo-section">
+    <div class="collapsible-demo-wrapper">
+      <CollapsibleSection
+        label="Click to expand"
+        expanded={demoExpanded}
+        on:toggle={() => demoExpanded = !demoExpanded}
+      />
+      {#if demoExpanded}
+        <div class="collapsible-demo-content">
+          <p style="margin: 0; color: var(--text-secondary);">
+            This content is revealed when the section is expanded. Any content can go here.
+          </p>
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">Tokens</h3>
+    <TokenMap tokens={[
+      { label: 'Active BG', variable: '--surface-primary-lowest' },
+      { label: 'Active Border', variable: '--color-primary-400' },
+      { label: 'Label', variable: '--text-primary' },
+      { label: 'Toggle Icon', variable: '--text-muted' },
+    ]} />
+  </div>
+</div>
+
+<style>
+  @import '../../styles/variables.css';
+
+  .collapsible-demo-wrapper {
+    border: 1px solid var(--ui-border-subtle);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+  }
+
+  .collapsible-demo-content {
+    padding: var(--space-12) var(--space-16);
+    background: var(--ui-surface-low);
+    border-top: 1px solid var(--ui-border-faint);
+  }
+</style>

package/src/showcase/demos/DialogDemo.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import Button from '../../components/Button.svelte';
+  import Dialog from '../../components/Dialog.svelte';
+  import TokenMap from '../TokenMap.svelte';
+
+  let showDialog = false;
+</script>
+
+<div class="demo-block">
+  <h2 class="component-title">Dialog Component</h2>
+  <p class="demo-description">
+    Modal dialog with focus management and slide-in animation. Import from <code>components/Dialog.svelte</code>
+  </p>
+
+  <div class="demo-section">
+    <Button variant="secondary" icon="fas fa-external-link-alt" on:click={() => showDialog = true}>
+      Open Dialog
+    </Button>
+
+    <Dialog
+      bind:show={showDialog}
+      title="Sample Dialog"
+      confirmLabel="Save"
+      cancelLabel="Cancel"
+      on:confirm={() => showDialog = false}
+    >
+      <p style="color: var(--text-secondary); margin: 0;">This is the dialog body content. It supports any slotted content including forms, lists, or other components.</p>
+    </Dialog>
+  </div>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">Tokens</h3>
+    <TokenMap tokens={[
+      { label: 'Surface', variable: '--surface-neutral-lowest' },
+      { label: 'Border', variable: '--border-neutral-strong' },
+      { label: 'Header BG', variable: '--empty' },
+      { label: 'Header Border', variable: '--border-neutral-subtle' },
+      { label: 'Title', variable: '--text-primary' },
+      { label: 'Close Icon', variable: '--text-secondary' },
+    ]} />
+  </div>
+</div>

package/src/showcase/demos/InlineEditActionsDemo.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import InlineEditActions from '../../components/InlineEditActions.svelte';
+</script>
+
+<div class="demo-block">
+  <h2 class="component-title">Inline Edit Actions</h2>
+  <p class="demo-description">
+    Confirm/cancel button pair for inline editing. Import from <code>components/InlineEditActions.svelte</code>
+  </p>
+
+  <div class="demo-section">
+    <div class="inline-edit-demo-row">
+      <span style="color: var(--text-secondary);">Editing value...</span>
+      <InlineEditActions onSave={() => {}} onCancel={() => {}} />
+    </div>
+  </div>
+</div>
+
+<style>
+  @import '../../styles/variables.css';
+
+  .inline-edit-demo-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-12);
+  }
+</style>

package/src/showcase/demos/NotificationDemo.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import Notification from '../../components/Notification.svelte';
+  import TokenMap from '../TokenMap.svelte';
+</script>
+
+<div class="demo-block">
+  <h2 class="component-title">Notification Components</h2>
+  <p class="demo-description">
+    Contextual feedback notifications with multiple variants. Import from <code>components/Notification.svelte</code>
+  </p>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">Variants</h3>
+    <div class="notification-showcase">
+      <Notification
+        variant="info"
+        title="Information"
+        description="This is an informational message to keep you updated."
+      />
+
+      <Notification
+        variant="success"
+        title="Success"
+        description="Your action was completed successfully."
+      />
+
+      <Notification
+        variant="warning"
+        title="Warning"
+        description="Caution: This action may have unintended consequences."
+      />
+
+      <Notification
+        variant="danger"
+        title="Danger"
+        description="Critical error: Please address this issue immediately."
+      />
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">With Impact Text</h3>
+    <div class="notification-showcase">
+      <Notification
+        variant="warning"
+        title="Food Shortage"
+        description="Your kingdom is running low on food supplies."
+        impact="-2 to Economy until resolved"
+      />
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">With Action Button</h3>
+    <div class="notification-showcase">
+      <Notification
+        variant="info"
+        title="Settlement Unmapped"
+        description="This settlement has not been placed on the map yet."
+        actionText="Place on Map"
+        actionIcon="fas fa-map-marker-alt"
+        onAction={() => {}}
+      />
+
+      <Notification
+        variant="success"
+        title="Trade Agreement Available"
+        description="A neighboring faction has offered a trade deal."
+        actionText="View Details"
+        actionIcon="fas fa-handshake"
+        onAction={() => {}}
+        actionInline={true}
+      />
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">Compact Size & Emphasis</h3>
+    <div class="notification-showcase">
+      <Notification
+        variant="info"
+        title="Compact Notification"
+        description="A smaller notification for tighter spaces."
+        size="compact"
+      />
+
+      <Notification
+        variant="danger"
+        title="Emphasized Alert"
+        description="Important notifications can have emphasis styling."
+        emphasis={true}
+      />
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">Dismissible</h3>
+    <div class="notification-showcase">
+      <Notification
+        variant="success"
+        title="Dismissible Notification"
+        description="Click the X to dismiss this notification."
+        dismissible={true}
+      />
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">Tokens</h3>
+    <div class="token-sections">
+      <TokenMap title="info" tokens={[
+        { label: 'Header BG', variable: '--surface-info-low' },
+        { label: 'Border', variable: '--border-info' },
+        { label: 'Icon', variable: '--text-info' },
+      ]} />
+      <TokenMap title="success" tokens={[
+        { label: 'Header BG', variable: '--surface-success' },
+        { label: 'Border', variable: '--border-success' },
+        { label: 'Icon', variable: '--text-success' },
+      ]} />
+      <TokenMap title="warning" tokens={[
+        { label: 'Header BG', variable: '--surface-warning' },
+        { label: 'Border', variable: '--border-warning' },
+        { label: 'Icon', variable: '--text-warning' },
+      ]} />
+      <TokenMap title="danger" tokens={[
+        { label: 'Header BG', variable: '--surface-primary' },
+        { label: 'Border', variable: '--border-danger' },
+        { label: 'Icon', variable: '--text-danger' },
+      ]} />
+    </div>
+  </div>
+</div>
+
+<style>
+  @import '../../styles/variables.css';
+
+  .notification-showcase {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-16);
+  }
+
+  .token-sections {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-16);
+  }
+</style>

package/src/showcase/demos/ProgressBarDemo.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import ProgressBar from '../../components/ProgressBar.svelte';
+  import TokenMap from '../TokenMap.svelte';
+</script>
+
+<div class="demo-block">
+  <h2 class="component-title">Progress Bar Component</h2>
+  <p class="demo-description">
+    Animated progress bar with variants. Import from <code>components/ProgressBar.svelte</code>
+  </p>
+
+  <div class="demo-section">
+    <div class="progress-demo-stack">
+      <ProgressBar value={25} label="Getting Started" variant="primary" />
+      <ProgressBar value={50} label="Halfway There" variant="info" />
+      <ProgressBar value={75} label="Almost Done" variant="warning" />
+      <ProgressBar value={100} label="Complete" variant="success" />
+      <ProgressBar value={33} label="Danger Zone" variant="danger" />
+      <ProgressBar value={60} variant="primary" size="compact" />
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">Tokens</h3>
+    <div class="token-sections">
+      <TokenMap title="track" tokens={[
+        { label: 'Background', variable: '--surface-neutral-low' },
+        { label: 'Border', variable: '--border-neutral-faint' },
+        { label: 'Label', variable: '--text-secondary' },
+      ]} />
+      <TokenMap title="fill colors" tokens={[
+        { label: 'Success', variable: '--border-success' },
+        { label: 'Warning', variable: '--border-warning' },
+        { label: 'Danger', variable: '--border-danger' },
+        { label: 'Info', variable: '--border-info' },
+      ]} />
+    </div>
+  </div>
+</div>
+
+<style>
+  @import '../../styles/variables.css';
+
+  .progress-demo-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-16);
+    max-width: 400px;
+  }
+
+  .token-sections {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-16);
+  }
+</style>

package/src/showcase/demos/RadioButtonDemo.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import RadioButton from '../../components/RadioButton.svelte';
+  import TokenMap from '../TokenMap.svelte';
+
+  let selectedRadio = 'option-b';
+</script>
+
+<div class="demo-block">
+  <h2 class="component-title">Radio Button Component</h2>
+  <p class="demo-description">
+    Styled radio buttons with icon and color support. Import from <code>components/RadioButton.svelte</code>
+  </p>
+
+  <div class="demo-section">
+    <div class="radio-demo-row">
+      <RadioButton
+        icon="fas fa-shield-alt"
+        label="Defense"
+        color="var(--text-info)"
+        active={selectedRadio === 'option-a'}
+        on:click={() => selectedRadio = 'option-a'}
+      />
+      <RadioButton
+        icon="fas fa-coins"
+        label="Economy"
+        color="var(--text-accent)"
+        active={selectedRadio === 'option-b'}
+        on:click={() => selectedRadio = 'option-b'}
+      />
+      <RadioButton
+        icon="fas fa-users"
+        label="Loyalty"
+        color="var(--text-success)"
+        active={selectedRadio === 'option-c'}
+        on:click={() => selectedRadio = 'option-c'}
+      />
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">Tokens</h3>
+    <TokenMap tokens={[
+      { label: 'Dot Border', variable: '--border-neutral-default' },
+      { label: 'Label', variable: '--text-primary' },
+      { label: 'Surface', variable: '--surface-neutral-lowest' },
+    ]} />
+  </div>
+</div>
+
+<style>
+  @import '../../styles/variables.css';
+
+  .radio-demo-row {
+    display: flex;
+    gap: var(--space-16);
+    flex-wrap: wrap;
+  }
+</style>

package/src/showcase/demos/SectionDividerDemo.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import SectionDivider from '../../components/SectionDivider.svelte';
+  import TokenMap from '../TokenMap.svelte';
+
+  const dividerVariants: { variant: 'bg' | 'neutral' | 'alternate' | 'primary' | 'accent' | 'special'; label: string }[] = [
+    { variant: 'bg', label: 'Background' },
+    { variant: 'neutral', label: 'Neutral' },
+    { variant: 'alternate', label: 'Alternate' },
+    { variant: 'primary', label: 'Primary' },
+    { variant: 'accent', label: 'Accent' },
+    { variant: 'special', label: 'Special' },
+  ];
+</script>
+
+<div class="demo-block">
+  <h2 class="component-title">Section Divider Component</h2>
+  <p class="demo-description">
+    Full-width section banner with display font and palette variants. Import from <code>components/SectionDivider.svelte</code>
+  </p>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">Variants</h3>
+    <div class="divider-showcase">
+      {#each dividerVariants as item}
+        <div class="divider-showcase-item">
+          <SectionDivider title={item.label} variant={item.variant} />
+          <span class="variant-label">variant="{item.variant}" &nbsp; surface-{item.variant}-highest → surface-{item.variant}</span>
+        </div>
+      {/each}
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">With Description</h3>
+    <div class="divider-showcase">
+      <SectionDivider
+        title="Community Modules"
+        variant="bg"
+        description="These modules were created by other authors and are no longer actively maintained."
+      />
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">Tokens (bg variant)</h3>
+    <TokenMap tokens={[
+      { label: 'Gradient High', variable: '--surface-bg-highest' },
+      { label: 'Gradient Mid', variable: '--surface-bg-higher' },
+      { label: 'Gradient Low', variable: '--surface-bg-high' },
+      { label: 'Gradient Base', variable: '--surface-bg' },
+      { label: 'Text Stroke', variable: '--surface-bg-lowest' },
+    ]} />
+  </div>
+</div>
+
+<style>
+  @import '../../styles/variables.css';
+
+  .divider-showcase {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .divider-showcase-item {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  .variant-label {
+    font-size: var(--font-xs);
+    color: var(--ui-text-tertiary);
+    font-family: var(--ui-font-mono);
+    background: var(--ui-surface-lowest);
+    padding: var(--space-2) var(--space-6);
+    border-radius: var(--radius-sm);
+  }
+</style>