@motion-proto/live-tokens 0.6.2 → 0.7.1

package/src/editor/ui/UIPillButton.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    variant?: 'primary' | 'default' | 'secondary';
+    size?: 'default' | 'compact';
+    icon?: string;
+    href?: string;
+    target?: string;
+    disabled?: boolean;
+    title?: string;
+    type?: 'button' | 'submit' | 'reset';
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'default',
+    size = 'default',
+    icon,
+    href,
+    target,
+    disabled = false,
+    title,
+    type = 'button',
+    onclick,
+    children,
+  }: Props = $props();
+</script>
+
+{#if href}
+  <a
+    class="ui-pill ui-pill-{variant} ui-pill-{size}"
+    {href}
+    {target}
+    {title}
+    {onclick}
+    rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+    aria-disabled={disabled ? 'true' : undefined}
+  >
+    {#if icon}<i class="fas {icon}" aria-hidden="true"></i>{/if}
+    {#if children}{@render children()}{/if}
+  </a>
+{:else}
+  <button
+    class="ui-pill ui-pill-{variant} ui-pill-{size}"
+    {type}
+    {disabled}
+    {title}
+    {onclick}
+  >
+    {#if icon}<i class="fas {icon}" aria-hidden="true"></i>{/if}
+    {#if children}{@render children()}{/if}
+  </button>
+{/if}
+
+<style>
+  .ui-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6, 6px);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.25) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    color: var(--ui-text-primary, #fff);
+    font-family: inherit;
+    font-size: var(--ui-font-size-md, 16px);
+    font-weight: var(--ui-font-weight-medium, 500);
+    line-height: 1;
+    padding: var(--ui-space-6, 6px) var(--ui-space-16, 16px);
+    border-radius: var(--ui-radius-full, 9999px);
+    cursor: pointer;
+    text-decoration: none;
+    transition:
+      background var(--ui-transition-fast, 120ms ease),
+      border-color var(--ui-transition-fast, 120ms ease);
+  }
+
+  .ui-pill:hover:not(:disabled):not([aria-disabled='true']) {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.45) 100%);
+    border-color: rgba(255, 255, 255, 0.75);
+  }
+
+  .ui-pill:disabled,
+  .ui-pill[aria-disabled='true'] {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.10) 100%);
+    border-color: rgba(255, 255, 255, 0.22);
+    color: var(--ui-text-muted, #4d4d4d);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .ui-pill:disabled i,
+  .ui-pill[aria-disabled='true'] i {
+    color: rgba(255, 255, 255, 0.28);
+  }
+
+  .ui-pill-primary:disabled,
+  .ui-pill-primary[aria-disabled='true'] {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
+    border-color: rgba(255, 255, 255, 0.24);
+  }
+
+  .ui-pill-secondary:disabled,
+  .ui-pill-secondary[aria-disabled='true'] {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
+    border-color: rgba(255, 255, 255, 0.14);
+  }
+
+  .ui-pill i {
+    font-size: var(--ui-font-size-xs, 12px);
+    color: rgba(255, 255, 255, 0.65);
+  }
+
+  /* Variant: primary — heavier gradient + brighter border for CTAs */
+  .ui-pill-primary {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
+    border-color: rgba(255, 255, 255, 0.55);
+  }
+  .ui-pill-primary:hover:not(:disabled):not([aria-disabled='true']) {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.12) 100%);
+    border-color: rgba(255, 255, 255, 0.7);
+  }
+
+  /* Variant: secondary — lighter, for low-emphasis actions */
+  .ui-pill-secondary {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
+    border-color: rgba(255, 255, 255, 0.30);
+  }
+  .ui-pill-secondary:hover:not(:disabled):not([aria-disabled='true']) {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
+    border-color: rgba(255, 255, 255, 0.5);
+  }
+
+  /* Size: compact — for header bars / chrome rails */
+  .ui-pill-compact {
+    font-size: var(--ui-font-size-sm, 14px);
+    padding: var(--ui-space-2, 2px) var(--ui-space-12, 12px);
+  }
+</style>

package/src/{ui → editor/ui}/UIRadio.svelte

@@ -1,6 +1,6 @@
 <!--
   Custom-styled radio that matches the editor's selection language: a quiet ring
-  in the unselected state (--ui-border-strong stroke, soft black inner fill) and
+  in the unselected state (--ui-border-higher stroke, soft black inner fill) and
   the highlight amber when selected (ring + dot, transparent inside).
 
   Usage:
@@ -50,7 +50,7 @@
     flex-shrink: 0;
     width: 14px;
     height: 14px;
-    border: 1.5px solid var(--ui-border-strong);
+    border: 1.5px solid var(--ui-border-higher);
     border-radius: 50%;
     background: rgba(0, 0, 0, 0.3);
     cursor: pointer;

package/src/{ui → editor/ui}/UIRelinkConfirmPopover.svelte

@@ -120,7 +120,7 @@
     top: calc(100% + var(--ui-space-4));
     right: 0;
     background: var(--ui-surface-higher);
-    border: 1px solid var(--ui-border-medium);
+    border: 1px solid var(--ui-border-high);
     border-radius: var(--ui-radius-md);
     box-shadow: var(--ui-shadow-lg);
     z-index: 20;
@@ -138,7 +138,7 @@
   }
 
   .ui-relink-header {
-    border-bottom: 1px solid var(--ui-border-faint);
+    border-bottom: 1px solid var(--ui-border-low);
     padding-bottom: var(--ui-space-6);
   }
 
@@ -205,7 +205,7 @@
     justify-content: flex-end;
     gap: var(--ui-space-6);
     padding-top: var(--ui-space-4);
-    border-top: 1px solid var(--ui-border-faint);
+    border-top: 1px solid var(--ui-border-low);
   }
 
   .ui-relink-btn {
@@ -219,7 +219,7 @@
 
   .ui-relink-btn-cancel {
     background: transparent;
-    border: 1px solid var(--ui-border-default);
+    border: 1px solid var(--ui-border);
     color: var(--ui-text-secondary);
   }
 

package/src/editor/ui/UISquareButton.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    variant?: 'primary' | 'default' | 'secondary' | 'success';
+    size?: 'default' | 'compact';
+    icon?: string;
+    href?: string;
+    target?: string;
+    disabled?: boolean;
+    active?: boolean;
+    title?: string;
+    type?: 'button' | 'submit' | 'reset';
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'default',
+    size = 'default',
+    icon,
+    href,
+    target,
+    disabled = false,
+    active = false,
+    title,
+    type = 'button',
+    onclick,
+    children,
+  }: Props = $props();
+</script>
+
+{#if href}
+  <a
+    class="ui-sq ui-sq-{variant} ui-sq-{size}"
+    class:active
+    {href}
+    {target}
+    {title}
+    {onclick}
+    rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+    aria-disabled={disabled ? 'true' : undefined}
+  >
+    {#if icon}<i class="fas {icon}" aria-hidden="true"></i>{/if}
+    {#if children}{@render children()}{/if}
+  </a>
+{:else}
+  <button
+    class="ui-sq ui-sq-{variant} ui-sq-{size}"
+    class:active
+    {type}
+    {disabled}
+    {title}
+    {onclick}
+  >
+    {#if icon}<i class="fas {icon}" aria-hidden="true"></i>{/if}
+    {#if children}{@render children()}{/if}
+  </button>
+{/if}
+
+<style>
+  .ui-sq {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.25) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    color: var(--ui-text-primary);
+    font-family: inherit;
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-weight-medium);
+    line-height: 1;
+    padding: var(--ui-space-6) var(--ui-space-16);
+    border-radius: var(--ui-radius-md);
+    cursor: pointer;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background var(--ui-transition-fast), border-color var(--ui-transition-fast);
+  }
+
+  .ui-sq:hover:not(:disabled):not([aria-disabled='true']) {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.45) 100%);
+    border-color: rgba(255, 255, 255, 0.75);
+  }
+
+  .ui-sq.active {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.42) 100%);
+    border-color: rgba(255, 255, 255, 0.7);
+  }
+
+  .ui-sq:disabled,
+  .ui-sq[aria-disabled='true'] {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.10) 100%);
+    border-color: rgba(255, 255, 255, 0.22);
+    color: var(--ui-text-muted);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .ui-sq:disabled i,
+  .ui-sq[aria-disabled='true'] i {
+    color: rgba(255, 255, 255, 0.28);
+  }
+
+  .ui-sq i {
+    font-size: var(--ui-font-size-xs);
+    color: rgba(255, 255, 255, 0.65);
+  }
+
+  .ui-sq i.fa-spinner {
+    animation: ui-sq-spin 1s linear infinite;
+  }
+
+  @keyframes ui-sq-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  /* Variant: primary — heavier gradient + brighter border for CTAs */
+  .ui-sq-primary {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
+    border-color: rgba(255, 255, 255, 0.55);
+  }
+  .ui-sq-primary:hover:not(:disabled):not([aria-disabled='true']) {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.12) 100%);
+    border-color: rgba(255, 255, 255, 0.7);
+  }
+  .ui-sq-primary:disabled,
+  .ui-sq-primary[aria-disabled='true'] {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
+    border-color: rgba(255, 255, 255, 0.24);
+  }
+
+  /* Variant: secondary — lighter, for low-emphasis actions */
+  .ui-sq-secondary {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
+    border-color: rgba(255, 255, 255, 0.30);
+  }
+  .ui-sq-secondary:hover:not(:disabled):not([aria-disabled='true']) {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
+    border-color: rgba(255, 255, 255, 0.5);
+  }
+  .ui-sq-secondary:disabled,
+  .ui-sq-secondary[aria-disabled='true'] {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
+    border-color: rgba(255, 255, 255, 0.14);
+  }
+
+  /* Variant: success — green gradient for adopt/apply CTAs. Same gradient
+     shape as primary, swapping white for the success hue. */
+  .ui-sq-success {
+    background: linear-gradient(180deg, rgba(90, 168, 94, 0.35) 0%, rgba(90, 168, 94, 0.18) 100%);
+    border-color: rgba(90, 168, 94, 0.60);
+  }
+  .ui-sq-success:hover:not(:disabled):not([aria-disabled='true']) {
+    background: linear-gradient(180deg, rgba(90, 168, 94, 0.48) 0%, rgba(90, 168, 94, 0.26) 100%);
+    border-color: rgba(90, 168, 94, 0.78);
+  }
+  .ui-sq-success:disabled,
+  .ui-sq-success[aria-disabled='true'] {
+    background: linear-gradient(180deg, rgba(90, 168, 94, 0.10) 0%, rgba(90, 168, 94, 0.04) 100%);
+    border-color: rgba(90, 168, 94, 0.25);
+  }
+
+  .ui-sq-compact {
+    font-size: var(--ui-font-size-sm);
+    padding: var(--ui-space-2) var(--ui-space-12);
+  }
+
+  @media (max-width: 640px) {
+    .ui-sq :global(span:not(.chevron)) { display: none; }
+    .ui-sq { padding: var(--ui-space-6) var(--ui-space-10); }
+  }
+</style>

package/src/{ui → editor/ui}/UITokenSelector.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import type { Snippet } from 'svelte';
-  import { setCssVar, removeCssVar, CSS_VAR_CHANGE_EVENT } from '../lib/cssVarSync';
-  import type { CssVarRef } from '../lib/editorTypes';
+  import { setCssVar, removeCssVar, CSS_VAR_CHANGE_EVENT } from '../core/cssVarSync';
+  import type { CssVarRef } from '../core/store/editorTypes';
   import {
     editorState,
     setComponentAlias,
@@ -13,7 +13,7 @@
     unlinkComponentProperty,
     relinkComponentProperty,
     getComponentPropertySiblings,
-  } from '../lib/editorStore';
+  } from '../core/store/editorStore';
   import UILinkToggle from './UILinkToggle.svelte';
   import UIRelinkConfirmPopover from './UIRelinkConfirmPopover.svelte';
   import { keepInViewport } from './keepInViewport';
@@ -354,7 +354,7 @@
   }
 
   .ui-token-selector.disabled .ui-ts-trigger:hover {
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
     background: var(--ui-surface-low);
   }
 
@@ -364,7 +364,7 @@
     gap: var(--ui-space-6);
     padding: var(--ui-space-2) var(--ui-space-8);
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-default);
+    border: 1px solid var(--ui-border);
     border-radius: var(--ui-radius-md);
     cursor: pointer;
     transition: all var(--ui-transition-fast);
@@ -409,7 +409,7 @@
   }
 
   .ui-ts-trigger:hover {
-    border-color: var(--ui-border-strong);
+    border-color: var(--ui-border-higher);
     background: var(--ui-surface-high);
   }
 
@@ -499,7 +499,7 @@
     top: calc(100% + var(--ui-space-4));
     left: 0;
     background: var(--ui-surface-higher);
-    border: 1px solid var(--ui-border-medium);
+    border: 1px solid var(--ui-border-high);
     border-radius: var(--ui-radius-md);
     box-shadow: var(--ui-shadow-lg);
     z-index: 10;
@@ -511,7 +511,7 @@
     justify-content: flex-end;
     gap: var(--ui-space-6);
     padding: var(--ui-space-6) var(--ui-space-8);
-    border-bottom: 1px solid var(--ui-border-faint);
+    border-bottom: 1px solid var(--ui-border-low);
   }
 
   .ui-ts-reset {
@@ -521,7 +521,7 @@
     height: 1.5rem;
     padding: var(--ui-space-2) var(--ui-space-8);
     background: none;
-    border: 1px solid var(--ui-border-default);
+    border: 1px solid var(--ui-border);
     border-radius: var(--ui-radius-sm);
     color: var(--ui-text-secondary);
     font-family: inherit;
@@ -537,7 +537,7 @@
 
   .ui-ts-reset:hover:not(:disabled) {
     background: var(--ui-hover);
-    border-color: var(--ui-border-strong);
+    border-color: var(--ui-border-higher);
     color: var(--ui-text-primary);
   }
 

package/src/{ui → editor/ui}/UIVariantSelector.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T extends { key: string; label?: string; value?: string }">
   import type { Snippet } from 'svelte';
-  import { resolveAliasChain } from '../lib/tokenRegistry';
+  import { resolveAliasChain } from '../core/palettes/tokenRegistry';
   import UITokenSelector from './UITokenSelector.svelte';
   import UIOptionList from './UIOptionList.svelte';
   import UIOptionItem from './UIOptionItem.svelte';

package/src/{ui → editor/ui}/VariablesTab.svelte

@@ -8,6 +8,7 @@
   import OverlaysSection from './sections/OverlaysSection.svelte';
   import GradientsSection from './sections/GradientsSection.svelte';
   import ShadowsSection from './sections/ShadowsSection.svelte';
+  import UIPillButton from './UIPillButton.svelte';
   import {
     SPACING_VARS, BORDER_WIDTH_VARS, RADIUS_VARS, FONT_SIZE_VARS,
     ICON_SIZE_VARS, FONT_WEIGHT_VARS, LINE_HEIGHT_VARS,
@@ -40,6 +41,9 @@
     copiedVar = v;
     setTimeout(() => { copiedVar = null; }, COPIED_FLASH_MS);
   }
+
+  type FontAddMode = 'closed' | 'url' | 'fontface';
+  let fontAddMode: FontAddMode = $state('closed');
 </script>
 
 <div class="variables-container">
@@ -81,11 +85,18 @@
 
   <!-- Typography -->
   <section class="section" id="typography">
-    <h2 class="section-title">Typography</h2>
+    <div class="typography-header">
+      <h2 class="section-title">Typography</h2>
+      <UIPillButton
+        variant="primary"
+        icon="fa-plus"
+        onclick={() => { fontAddMode = fontAddMode === 'closed' ? 'url' : 'closed'; }}
+      >Add Font</UIPillButton>
+    </div>
 
     <div class="typography-columns">
       <div class="typography-group font-families-group">
-        <ProjectFontsSection />
+        <ProjectFontsSection bind:addMode={fontAddMode} />
         <h3 class="group-title">Font Families</h3>
         <FontStackEditor />
       </div>
@@ -160,16 +171,16 @@
   }
 
   .section-title {
-    font-size: var(--ui-font-size-lg);
+    font-size: var(--ui-font-size-2xl);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-primary);
     margin: 0;
     padding-bottom: var(--ui-space-8);
-    border-bottom: 1px solid var(--ui-border-subtle);
+    border-bottom: 2px solid var(--ui-border-high);
   }
 
   .group-title {
-    font-size: var(--ui-font-size-md);
+    font-size: var(--ui-font-size-lg);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-secondary);
     margin: 0;
@@ -178,11 +189,11 @@
   /* Subsection title (used by Spacing & Borders) */
   .subsection-title {
     margin: var(--ui-space-16) 0 var(--ui-space-8);
-    font-size: var(--ui-font-size-sm);
+    font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-secondary);
+    color: var(--ui-text-tertiary);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: 0.06em;
   }
 
   .subsection-title:first-child,
@@ -191,6 +202,18 @@
   }
 
   /* Typography */
+  .typography-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ui-space-12);
+    padding-bottom: var(--ui-space-8);
+    border-bottom: 2px solid var(--ui-border-high);
+  }
+  .typography-header .section-title {
+    padding-bottom: 0;
+    border-bottom: none;
+  }
   .typography-columns {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));

package/src/{ui → editor/ui}/palette/GradientStopEditor.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { stopPropagation } from 'svelte/legacy';
 
-  import type { GradientStyle, GradientStop } from '../../lib/themeTypes';
-  import { beginSliderGesture } from '../../lib/editorStore';
+  import type { GradientStyle, GradientStop } from '../../core/themes/themeTypes';
+  import { beginSliderGesture } from '../../core/store/editorStore';
 
   /**
    * Gradient style + stop editor (the bar, draggable handles, and selected-
@@ -296,7 +296,7 @@
     margin-top: var(--ui-space-8);
     padding: var(--ui-space-12);
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-lg);
     display: flex;
     flex-direction: column;
@@ -324,7 +324,7 @@
   .style-btn {
     width: 28px;
     height: 28px;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     background: var(--ui-surface-lowest);
     color: var(--ui-text-secondary);
@@ -343,7 +343,7 @@
   }
 
   .style-btn:hover {
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .size-btn {
@@ -357,7 +357,7 @@
     padding: 2px 6px;
     font-size: var(--ui-font-size-md);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     color: var(--ui-text-primary);
     text-align: center;
@@ -394,7 +394,7 @@
     padding: 2px 6px;
     font-size: var(--ui-font-size-md);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     color: var(--ui-text-primary);
   }
@@ -403,7 +403,7 @@
     width: 20px;
     height: 20px;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     flex-shrink: 0;
   }
 
@@ -423,7 +423,7 @@
     position: relative;
     height: 24px;
     border-radius: var(--ui-radius-md);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     cursor: crosshair;
   }
 
@@ -446,7 +446,7 @@
     width: 16px;
     height: 16px;
     border-radius: var(--ui-radius-sm);
-    border: 2px solid var(--ui-border-medium);
+    border: 2px solid var(--ui-border-high);
     flex-shrink: 0;
   }
 
@@ -463,7 +463,7 @@
     height: 0;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
-    border-top: 6px solid var(--ui-border-medium);
+    border-top: 6px solid var(--ui-border-high);
   }
 
   .gradient-stop-handle.selected .stop-arrow {
@@ -481,7 +481,7 @@
   .stop-remove-btn {
     width: 20px;
     height: 20px;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     background: var(--ui-surface-lowest);
     color: var(--ui-text-tertiary);
@@ -495,7 +495,7 @@
   }
 
   .stop-remove-btn:hover {
-    border-color: var(--ui-border-strong);
+    border-color: var(--ui-border-higher);
     color: var(--ui-text-primary);
   }
 </style>