@motion-proto/live-tokens 0.6.2 → 0.8.0

package/src/{component-editor → editor/component-editor}/scaffolding/TypeEditor.svelte

@@ -5,6 +5,7 @@
   import UIFontSizeSelector from '../../ui/UIFontSizeSelector.svelte';
   import UIFontWeightSelector from '../../ui/UIFontWeightSelector.svelte';
   import UILineHeightSelector from '../../ui/UILineHeightSelector.svelte';
+  import UILetterSpacingSelector from '../../ui/UILetterSpacingSelector.svelte';
   import FieldsetWrapper from './FieldsetWrapper.svelte';
   import { BORDER_WIDTH } from '../../ui/variantScales';
 
@@ -22,6 +23,8 @@
     weightLabel?: string;
     lineHeightVariable?: string | undefined;
     lineHeightLabel?: string;
+    letterSpacingVariable?: string | undefined;
+    letterSpacingLabel?: string;
     /** Optional outline rows rendered under the typography rows so a text-with-
       stroke group keeps stroke controls visually nested with the type they
       drive (e.g. SectionDivider title outline). */
@@ -47,6 +50,8 @@
     weightLabel = 'weight',
     lineHeightVariable = undefined,
     lineHeightLabel = 'line-h',
+    letterSpacingVariable = undefined,
+    letterSpacingLabel = 'letter-sp',
     outlineWidthVariable = undefined,
     outlineWidthLabel = 'outline thickness',
     outlineColorVariable = undefined,
@@ -78,6 +83,10 @@
       <span class="row-label">{lineHeightLabel}</span>
       <UILineHeightSelector variable={lineHeightVariable} {component} canBeLinked {onchange} />
     {/if}
+    {#if letterSpacingVariable}
+      <span class="row-label">{letterSpacingLabel}</span>
+      <UILetterSpacingSelector variable={letterSpacingVariable} {component} canBeLinked {onchange} />
+    {/if}
     {#if outlineWidthVariable}
       <span class="row-label">{outlineWidthLabel}</span>
       <UIVariantSelector variable={outlineWidthVariable} {component} canBeLinked {...BORDER_WIDTH} {onchange} />
@@ -92,7 +101,10 @@
 <style>
   .type-grid {
     display: grid;
-    grid-template-columns: max-content 8rem 1fr;
+    /* Label column tracks the editor-wide `--editor-label-col` when an
+       ancestor (e.g. StateBlock's `.element-section`) sets one, so this
+       grid lines up with sibling `.token-grid`s in the same section. */
+    grid-template-columns: var(--editor-label-col, max-content) 8rem 1fr;
     column-gap: var(--ui-space-10);
     row-gap: var(--ui-space-6);
     align-items: center;