@motion-proto/live-tokens 0.1.0 → 0.3.1

package/src/showcase/demos/NotificationDemo.svelte

@@ -1,149 +0,0 @@
-<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

@@ -1,56 +0,0 @@
-<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

@@ -1,58 +0,0 @@
-<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

@@ -1,79 +0,0 @@
-<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>