@motion-proto/live-tokens 0.1.0 → 0.3.1

package/src/{showcase → ui}/SurfacesTab.svelte

@@ -41,15 +41,15 @@
       ]
     },
     {
-      title: 'Primary (Crimson)',
+      title: 'Brand (Crimson)',
       swatches: [
-        { name: 'Lowest', variable: '--surface-primary-lowest', description: 'Deepest' },
-        { name: 'Lower', variable: '--surface-primary-lower', description: 'Barely perceptible' },
-        { name: 'Low', variable: '--surface-primary-low', description: 'Subtle' },
-        { name: 'Primary', variable: '--surface-primary', description: 'Default' },
-        { name: 'High', variable: '--surface-primary-high', description: 'More prominent' },
-        { name: 'Higher', variable: '--surface-primary-higher', description: 'Very prominent' },
-        { name: 'Highest', variable: '--surface-primary-highest', description: 'Most prominent' }
+        { name: 'Lowest', variable: '--surface-brand-lowest', description: 'Deepest' },
+        { name: 'Lower', variable: '--surface-brand-lower', description: 'Barely perceptible' },
+        { name: 'Low', variable: '--surface-brand-low', description: 'Subtle' },
+        { name: 'Brand', variable: '--surface-brand', description: 'Default' },
+        { name: 'High', variable: '--surface-brand-high', description: 'More prominent' },
+        { name: 'Higher', variable: '--surface-brand-higher', description: 'Very prominent' },
+        { name: 'Highest', variable: '--surface-brand-highest', description: 'Most prominent' }
       ]
     },
     {
@@ -139,19 +139,19 @@
       borders: [
         { name: 'Faint', variable: '--border-neutral-faint' },
         { name: 'Subtle', variable: '--border-neutral-subtle' },
-        { name: 'Default', variable: '--border-neutral-default' },
+        { name: 'Default', variable: '--border-neutral' },
         { name: 'Medium', variable: '--border-neutral-medium' },
         { name: 'Strong', variable: '--border-neutral-strong' }
       ]
     },
     {
-      title: 'Primary (Crimson)',
+      title: 'Brand (Crimson)',
       borders: [
-        { name: 'Faint', variable: '--border-primary-faint' },
-        { name: 'Subtle', variable: '--border-primary-subtle' },
-        { name: 'Primary', variable: '--border-primary' },
-        { name: 'Medium', variable: '--border-primary-medium' },
-        { name: 'Strong', variable: '--border-primary-strong' }
+        { name: 'Faint', variable: '--border-brand-faint' },
+        { name: 'Subtle', variable: '--border-brand-subtle' },
+        { name: 'Brand', variable: '--border-brand' },
+        { name: 'Medium', variable: '--border-brand-medium' },
+        { name: 'Strong', variable: '--border-brand-strong' }
       ]
     },
     {
@@ -259,45 +259,43 @@
 </div>
 
 <style>
-  @import '../styles/variables.css';
-
   .surfaces-container {
     display: flex;
     flex-direction: column;
-    gap: var(--space-32);
+    gap: var(--ui-space-32);
   }
 
   .section {
     display: flex;
     flex-direction: column;
-    gap: var(--space-16);
+    gap: var(--ui-space-16);
   }
 
   .section-title {
-    font-size: var(--font-lg);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-primary);
     margin: 0;
-    padding-bottom: var(--space-8);
+    padding-bottom: var(--ui-space-8);
     border-bottom: 1px solid var(--ui-border-subtle);
   }
 
   .swatch-groups-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(min(28rem, 100%), 1fr));
-    gap: var(--space-24);
+    gap: var(--ui-space-24);
   }
 
   .swatch-group {
     display: flex;
     flex-direction: column;
-    gap: var(--space-8);
+    gap: var(--ui-space-8);
     min-width: 0;
   }
 
   .group-title {
-    font-size: var(--font-sm);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-secondary);
     margin: 0;
   }
@@ -305,21 +303,21 @@
   .swatches-row {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
-    gap: var(--space-8);
-    max-width: calc(7 * 3.5rem + 6 * var(--space-8));
+    gap: var(--ui-space-8);
+    max-width: calc(7 * 3.5rem + 6 * var(--ui-space-8));
   }
 
   .swatch-card {
     display: flex;
     flex-direction: column;
-    gap: var(--space-4);
+    gap: var(--ui-space-4);
     align-items: center;
   }
 
   .swatch-box {
     width: 3.5rem;
     height: 3.5rem;
-    border-radius: var(--radius-md);
+    border-radius: var(--ui-radius-md);
     flex-shrink: 0;
   }
 
@@ -328,18 +326,18 @@
   }
 
   .swatch-name {
-    font-size: var(--font-xs);
+    font-size: var(--ui-font-size-xs);
     color: var(--ui-text-tertiary);
     text-align: center;
   }
 
   .swatch-name.copyable {
     all: unset;
-    font-size: var(--font-xs);
+    font-size: var(--ui-font-size-xs);
     color: var(--ui-text-tertiary);
     text-align: center;
     cursor: pointer;
-    transition: color var(--transition-fast);
+    transition: color var(--ui-transition-fast);
   }
 
   .swatch-name.copyable:hover {
@@ -353,26 +351,26 @@
   .border-groups-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
-    gap: var(--space-24);
+    gap: var(--ui-space-24);
   }
 
   .border-group {
     display: flex;
     flex-direction: column;
-    gap: var(--space-8);
+    gap: var(--ui-space-8);
     min-width: 0;
   }
 
   .borders-row {
     display: flex;
-    gap: var(--space-8);
+    gap: var(--ui-space-8);
     flex-wrap: wrap;
   }
 
   .border-card {
     display: flex;
     flex-direction: column;
-    gap: var(--space-4);
+    gap: var(--ui-space-4);
     align-items: center;
   }
 
@@ -380,23 +378,23 @@
     width: 3.5rem;
     height: 3.5rem;
     background: var(--ui-surface-low);
-    border-radius: var(--radius-md);
+    border-radius: var(--ui-radius-md);
     flex-shrink: 0;
   }
 
   .border-name {
-    font-size: var(--font-xs);
+    font-size: var(--ui-font-size-xs);
     color: var(--ui-text-tertiary);
     text-align: center;
   }
 
   .border-name.copyable {
     all: unset;
-    font-size: var(--font-xs);
+    font-size: var(--ui-font-size-xs);
     color: var(--ui-text-tertiary);
     text-align: center;
     cursor: pointer;
-    transition: color var(--transition-fast);
+    transition: color var(--ui-transition-fast);
   }
 
   .border-name.copyable:hover {

package/src/{showcase → ui}/TextTab.svelte

@@ -17,13 +17,13 @@
       ]
     },
     {
-      title: 'Primary Text Colors (Crimson)',
+      title: 'Brand Text Colors (Crimson)',
       colors: [
-        { name: 'Primary', variable: '--text-primary-color', description: 'Primary - Main text color' },
-        { name: 'Primary Secondary', variable: '--text-primary-secondary', description: 'Secondary - Less prominent' },
-        { name: 'Primary Tertiary', variable: '--text-primary-tertiary', description: 'Tertiary - Subtle text' },
-        { name: 'Primary Muted', variable: '--text-primary-muted', description: 'Muted - De-emphasized' },
-        { name: 'Primary Disabled', variable: '--text-primary-disabled', description: 'Disabled - Disabled state' }
+        { name: 'Brand', variable: '--text-brand', description: 'Primary - Main text color' },
+        { name: 'Brand Secondary', variable: '--text-brand-secondary', description: 'Secondary - Less prominent' },
+        { name: 'Brand Tertiary', variable: '--text-brand-tertiary', description: 'Tertiary - Subtle text' },
+        { name: 'Brand Muted', variable: '--text-brand-muted', description: 'Muted - De-emphasized' },
+        { name: 'Brand Disabled', variable: '--text-brand-disabled', description: 'Disabled - Disabled state' }
       ]
     },
     {
@@ -112,73 +112,71 @@
 </div>
 
 <style>
-  @import '../styles/variables.css';
-
   .text-container {
     display: flex;
     flex-direction: column;
-    gap: var(--space-24);
+    gap: var(--ui-space-24);
   }
 
   .color-group {
     display: flex;
     flex-direction: column;
-    gap: var(--space-12);
+    gap: var(--ui-space-12);
   }
 
   .group-title {
-    font-size: var(--font-sm);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-secondary);
     margin: 0;
-    padding-bottom: var(--space-4);
+    padding-bottom: var(--ui-space-4);
     border-bottom: 1px solid var(--ui-border-faint);
   }
 
   .text-colors-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    gap: var(--space-12);
+    gap: var(--ui-space-12);
   }
 
   .text-color-card {
     background: var(--ui-surface-low);
     border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--radius-md);
-    padding: var(--space-12);
+    border-radius: var(--ui-radius-md);
+    padding: var(--ui-space-12);
     display: flex;
     flex-direction: column;
-    gap: var(--space-8);
+    gap: var(--ui-space-8);
     align-items: center;
   }
 
   .text-color-preview {
-    font-size: var(--font-4xl);
-    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-4xl);
+    font-weight: var(--ui-font-weight-bold);
     line-height: 1;
   }
 
   .text-color-info {
     display: flex;
     flex-direction: column;
-    gap: var(--space-2);
+    gap: var(--ui-space-2);
     align-items: center;
     text-align: center;
   }
 
   .text-color-name {
-    font-size: var(--font-sm);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-primary);
   }
 
   .text-color-name.copyable {
     all: unset;
-    font-size: var(--font-sm);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-primary);
     cursor: pointer;
-    transition: color var(--transition-fast);
+    transition: color var(--ui-transition-fast);
   }
 
   .text-color-name.copyable:hover {
@@ -190,16 +188,16 @@
   }
 
   .text-color-variable {
-    font-size: var(--font-xs);
+    font-size: var(--ui-font-size-xs);
     color: var(--ui-text-tertiary);
     font-family: var(--ui-font-mono);
     background: var(--ui-surface-lowest);
-    padding: var(--space-2) var(--space-4);
-    border-radius: var(--radius-sm);
+    padding: var(--ui-space-2) var(--ui-space-4);
+    border-radius: var(--ui-radius-sm);
   }
 
   .text-color-description {
-    font-size: var(--font-xs);
+    font-size: var(--ui-font-size-xs);
     color: var(--ui-text-muted);
   }
 </style>