@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/components/InlineEditActions.svelte

@@ -9,11 +9,14 @@
    export let disabled = false;
    export let saveTitle = "Save";
    export let cancelTitle = "Cancel";
+   let className: string = '';
+   export { className as class };
 </script>
 
-<div class="inline-actions">
+<div class="inline-actions {className}">
    <button
       class="save-btn"
+      type="button"
       on:click={onSave}
       {disabled}
       title={saveTitle}
@@ -22,6 +25,7 @@
    </button>
    <button
       class="cancel-btn"
+      type="button"
       on:click={onCancel}
       disabled={disabled}
       title={cancelTitle}
@@ -31,6 +35,44 @@
 </div>
 
 <style lang="scss">
+   :global(:root) {
+      /* Save (default) */
+      --inlineeditactions-save-default-surface: var(--surface-success-low);
+      --inlineeditactions-save-default-text: var(--text-success);
+      --inlineeditactions-save-default-border: var(--border-success);
+      --inlineeditactions-save-default-border-width: var(--border-width-0);
+      --inlineeditactions-save-default-radius: var(--radius-md);
+      --inlineeditactions-save-default-padding: var(--space-4);
+      --inlineeditactions-save-default-icon-size: var(--icon-size-md);
+
+      /* Save (hover) */
+      --inlineeditactions-save-hover-surface: var(--surface-success-high);
+      --inlineeditactions-save-hover-text: var(--text-success);
+      --inlineeditactions-save-hover-border: var(--border-success);
+      --inlineeditactions-save-hover-border-width: var(--border-width-0);
+      --inlineeditactions-save-hover-radius: var(--radius-md);
+      --inlineeditactions-save-hover-padding: var(--space-4);
+      --inlineeditactions-save-hover-icon-size: var(--icon-size-md);
+
+      /* Cancel (default) */
+      --inlineeditactions-cancel-default-surface: var(--surface-danger-low);
+      --inlineeditactions-cancel-default-text: var(--text-danger);
+      --inlineeditactions-cancel-default-border: var(--border-danger);
+      --inlineeditactions-cancel-default-border-width: var(--border-width-0);
+      --inlineeditactions-cancel-default-radius: var(--radius-md);
+      --inlineeditactions-cancel-default-padding: var(--space-4);
+      --inlineeditactions-cancel-default-icon-size: var(--icon-size-md);
+
+      /* Cancel (hover) */
+      --inlineeditactions-cancel-hover-surface: var(--surface-danger-high);
+      --inlineeditactions-cancel-hover-text: var(--text-danger);
+      --inlineeditactions-cancel-hover-border: var(--border-danger);
+      --inlineeditactions-cancel-hover-border-width: var(--border-width-0);
+      --inlineeditactions-cancel-hover-radius: var(--radius-md);
+      --inlineeditactions-cancel-hover-padding: var(--space-4);
+      --inlineeditactions-cancel-hover-icon-size: var(--icon-size-md);
+   }
+
    .inline-actions {
       display: flex;
       gap: var(--space-8);
@@ -38,36 +80,54 @@
 
    .save-btn,
    .cancel-btn {
-      padding: var(--space-4) var(--space-8);
-      border: none;
-      border-radius: var(--radius-md);
       cursor: pointer;
-      transition: all 0.2s;
+      transition: all var(--duration-200);
       display: flex;
       align-items: center;
       gap: var(--space-8);
 
       &:disabled {
-         opacity: 0.5;
+         background: var(--surface-neutral-low);
+         color: var(--text-disabled);
          cursor: not-allowed;
       }
    }
 
    .save-btn {
-      background: rgba(144, 238, 144, 0.2);
-      color: #90ee90;
+      background: var(--inlineeditactions-save-default-surface);
+      color: var(--inlineeditactions-save-default-text);
+      border: var(--inlineeditactions-save-default-border-width) solid var(--inlineeditactions-save-default-border);
+      border-radius: var(--inlineeditactions-save-default-radius);
+      padding: var(--inlineeditactions-save-default-padding) calc(var(--inlineeditactions-save-default-padding) * 2);
+      font-size: var(--inlineeditactions-save-default-icon-size);
 
-      &:hover:not(:disabled) {
-         background: rgba(144, 238, 144, 0.3);
+      &:hover:not(:disabled),
+      .inline-actions.force-hover &:not(:disabled) {
+         background: var(--inlineeditactions-save-hover-surface);
+         color: var(--inlineeditactions-save-hover-text);
+         border: var(--inlineeditactions-save-hover-border-width) solid var(--inlineeditactions-save-hover-border);
+         border-radius: var(--inlineeditactions-save-hover-radius);
+         padding: var(--inlineeditactions-save-hover-padding) calc(var(--inlineeditactions-save-hover-padding) * 2);
+         font-size: var(--inlineeditactions-save-hover-icon-size);
       }
    }
 
    .cancel-btn {
-      background: rgba(255, 107, 107, 0.2);
-      color: #ff6b6b;
+      background: var(--inlineeditactions-cancel-default-surface);
+      color: var(--inlineeditactions-cancel-default-text);
+      border: var(--inlineeditactions-cancel-default-border-width) solid var(--inlineeditactions-cancel-default-border);
+      border-radius: var(--inlineeditactions-cancel-default-radius);
+      padding: var(--inlineeditactions-cancel-default-padding) calc(var(--inlineeditactions-cancel-default-padding) * 2);
+      font-size: var(--inlineeditactions-cancel-default-icon-size);
 
-      &:hover:not(:disabled) {
-         background: rgba(255, 107, 107, 0.3);
+      &:hover:not(:disabled),
+      .inline-actions.force-hover &:not(:disabled) {
+         background: var(--inlineeditactions-cancel-hover-surface);
+         color: var(--inlineeditactions-cancel-hover-text);
+         border: var(--inlineeditactions-cancel-hover-border-width) solid var(--inlineeditactions-cancel-hover-border);
+         border-radius: var(--inlineeditactions-cancel-hover-radius);
+         padding: var(--inlineeditactions-cancel-hover-padding) calc(var(--inlineeditactions-cancel-hover-padding) * 2);
+         font-size: var(--inlineeditactions-cancel-hover-icon-size);
       }
    }
 </style>

package/src/components/Notification.svelte

@@ -1,22 +1,16 @@
 <script lang="ts">
    import { createEventDispatcher } from 'svelte';
    import Button from './Button.svelte';
+   import type { NotificationActions } from './types';
 
    export let title: string;
    export let description: string;
-   export let impact: string = '';
    export let variant: 'info' | 'warning' | 'danger' | 'success' = 'info';
    export let size: 'normal' | 'compact' = 'normal';
    export let icon: string = '';
    export let dismissible: boolean = false;
    export let emphasis: boolean = false;
-
-   // Action button props
-   export let actionText: string = '';
-   export let actionIcon: string = '';
-   export let onAction: (() => void) | undefined = undefined;
-   export let actionInline: boolean = false;
-   export let actionHeader: boolean = false; // NEW: Show action button in header row
+   export let actions: NotificationActions = {};
 
    const dispatch = createEventDispatcher();
 
@@ -36,13 +30,13 @@
 </script>
 
 <div class="notification" class:info={variant === 'info'} class:warning={variant === 'warning'} class:danger={variant === 'danger'} class:success={variant === 'success'} class:emphasis={emphasis} class:compact={size === 'compact'}>
-   <div class="notification-header" class:has-action={actionHeader && onAction}>
+   <div class="notification-header" class:has-action={actions.header}>
       <i class={displayIcon}></i>
       <span class="notification-title">{title}</span>
-      {#if actionHeader && onAction}
+      {#if actions.header}
          <div class="action-button-backdrop">
-            <Button variant="outline" icon={actionIcon} on:click={onAction}>
-               {actionText}
+            <Button variant={actions.header.variant ?? 'outline'} icon={actions.header.icon} disabled={actions.header.disabled} on:click={actions.header.onClick}>
+               {actions.header.label ?? ''}
             </Button>
          </div>
       {/if}
@@ -52,44 +46,135 @@
          </button>
       {/if}
    </div>
-   {#if description && !actionInline}
-      <div class="notification-description">{description}</div>
-   {/if}
-   {#if impact}
-      <div class="notification-impact">{impact}</div>
+   {#if (description && !actions.inline) || actions.right || actions.left}
+      <div class="notification-body">
+         {#if description && !actions.inline}
+            <div class="notification-description">{description}</div>
+         {/if}
+         {#if actions.right || actions.left}
+            <div class="notification-body-actions">
+               {#if actions.left}
+                  <Button variant={actions.left.variant ?? 'outline'} icon={actions.left.icon} disabled={actions.left.disabled} on:click={actions.left.onClick}>
+                     {actions.left.label ?? ''}
+                  </Button>
+               {/if}
+               {#if actions.right}
+                  <Button variant={actions.right.variant ?? 'primary'} icon={actions.right.icon} disabled={actions.right.disabled} on:click={actions.right.onClick}>
+                     {actions.right.label ?? ''}
+                  </Button>
+               {/if}
+            </div>
+         {/if}
+      </div>
    {/if}
    <slot />
-   {#if onAction && !actionHeader}
-      {#if actionInline}
-         <div class="notification-actions-inline">
-            {#if description}
-               <span class="description-text">{description}</span>
-            {/if}
-            <Button variant="outline" icon={actionIcon} on:click={onAction}>
-               {actionText}
-            </Button>
-         </div>
-      {:else}
-         <div class="notification-actions">
-            <Button variant="outline" icon={actionIcon} on:click={onAction}>
-               {actionText}
-            </Button>
-         </div>
-      {/if}
+   {#if actions.inline}
+      <div class="notification-actions-inline">
+         {#if description}
+            <span class="description-text">{description}</span>
+         {/if}
+         <Button variant={actions.inline.variant ?? 'outline'} icon={actions.inline.icon} disabled={actions.inline.disabled} on:click={actions.inline.onClick}>
+            {actions.inline.label ?? ''}
+         </Button>
+      </div>
    {/if}
 </div>
 
 <style lang="scss">
+   @use '../styles/padding' as *;
+
+   // The four-variant token block below is intentionally NOT collapsed via SCSS
+   // `@each`. The Layer-2 token-discovery parser (`extractGlobalRootBody` in
+   // src/lib/parsers/globalRootBlock.ts) reads the `.svelte` source verbatim and
+   // does not pre-compile SCSS — wrapping these declarations in `@each` would
+   // make the editor's alias picker / file-manager UI see zero tokens for
+   // Notification, even though the rendered DOM would be unchanged. The
+   // declarations are kept flat by design so the parser can scrape them.
+   :global(:root) {
+      /* Info */
+      --notification-info-surface: var(--surface-info);
+      --notification-info-border: var(--border-info);
+      --notification-info-border-width: var(--border-width-1);
+      --notification-info-radius: var(--radius-md);
+      --notification-info-padding: var(--space-12);
+      --notification-info-icon: var(--text-info);
+      --notification-info-icon-size: var(--icon-size-md);
+      --notification-info-title: var(--text-info);
+      --notification-info-title-font-family: var(--font-sans);
+      --notification-info-title-font-size: var(--font-size-lg);
+      --notification-info-title-font-weight: var(--font-weight-normal);
+      --notification-info-title-line-height: var(--line-height-snug);
+      --notification-info-text: var(--text-primary);
+      --notification-info-text-font-family: var(--font-sans);
+      --notification-info-text-font-size: var(--font-size-md);
+      --notification-info-text-font-weight: var(--font-weight-extralight);
+      --notification-info-text-line-height: var(--line-height-normal);
+
+      /* Success */
+      --notification-success-surface: var(--surface-success);
+      --notification-success-border: var(--border-success);
+      --notification-success-border-width: var(--border-width-1);
+      --notification-success-radius: var(--radius-md);
+      --notification-success-padding: var(--space-12);
+      --notification-success-icon: var(--text-success);
+      --notification-success-icon-size: var(--icon-size-md);
+      --notification-success-title: var(--text-success);
+      --notification-success-title-font-family: var(--font-sans);
+      --notification-success-title-font-size: var(--font-size-lg);
+      --notification-success-title-font-weight: var(--font-weight-normal);
+      --notification-success-title-line-height: var(--line-height-snug);
+      --notification-success-text: var(--text-primary);
+      --notification-success-text-font-family: var(--font-sans);
+      --notification-success-text-font-size: var(--font-size-md);
+      --notification-success-text-font-weight: var(--font-weight-extralight);
+      --notification-success-text-line-height: var(--line-height-normal);
+
+      /* Warning */
+      --notification-warning-surface: var(--surface-warning);
+      --notification-warning-border: var(--border-warning);
+      --notification-warning-border-width: var(--border-width-1);
+      --notification-warning-radius: var(--radius-md);
+      --notification-warning-padding: var(--space-12);
+      --notification-warning-icon: var(--text-warning);
+      --notification-warning-icon-size: var(--icon-size-md);
+      --notification-warning-title: var(--text-warning);
+      --notification-warning-title-font-family: var(--font-sans);
+      --notification-warning-title-font-size: var(--font-size-lg);
+      --notification-warning-title-font-weight: var(--font-weight-normal);
+      --notification-warning-title-line-height: var(--line-height-snug);
+      --notification-warning-text: var(--text-primary);
+      --notification-warning-text-font-family: var(--font-sans);
+      --notification-warning-text-font-size: var(--font-size-md);
+      --notification-warning-text-font-weight: var(--font-weight-extralight);
+      --notification-warning-text-line-height: var(--line-height-normal);
+
+      /* Danger */
+      --notification-danger-surface: var(--surface-danger);
+      --notification-danger-border: var(--border-danger);
+      --notification-danger-border-width: var(--border-width-1);
+      --notification-danger-radius: var(--radius-md);
+      --notification-danger-padding: var(--space-12);
+      --notification-danger-icon: var(--text-danger);
+      --notification-danger-icon-size: var(--icon-size-md);
+      --notification-danger-title: var(--text-danger);
+      --notification-danger-title-font-family: var(--font-sans);
+      --notification-danger-title-font-size: var(--font-size-lg);
+      --notification-danger-title-font-weight: var(--font-weight-normal);
+      --notification-danger-title-line-height: var(--line-height-snug);
+      --notification-danger-text: var(--text-primary);
+      --notification-danger-text-font-family: var(--font-sans);
+      --notification-danger-text-font-size: var(--font-size-md);
+      --notification-danger-text-font-weight: var(--font-weight-extralight);
+      --notification-danger-text-line-height: var(--line-height-normal);
+   }
+
    .notification {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       width: 100%;
       gap: 0;
-      border-radius: var(--radius-md);
-      font-size: var(--font-md);
-      border: 1px solid;
-      transition: all var(--transition-fast);
+      transition: all var(--duration-150);
       position: relative;
       text-align: left;
       overflow: hidden;
@@ -99,95 +184,42 @@
       }
 
       &.compact {
-         font-size: var(--font-sm);
-
-         .notification-header {
-            padding: var(--space-6) var(--space-12);
-
-            i {
-               font-size: var(--font-sm);
-            }
-
-            .notification-title {
-               font-size: var(--font-md);
-            }
-         }
-
-         .notification-description {
-            font-size: var(--font-sm);
-            padding: var(--space-8) var(--space-12);
-         }
-
-         .notification-impact {
-            font-size: var(--font-sm);
-            padding: var(--space-8) var(--space-12);
-         }
-
-         .notification-actions-inline {
-            padding: var(--space-8) var(--space-12);
-
-            .description-text {
-               font-size: var(--font-sm);
-            }
-         }
+         font-size: var(--font-size-sm);
 
+         .notification-description,
+         .notification-actions-inline,
          .notification-actions {
-            padding: var(--space-8) var(--space-12);
-         }
-      }
-
-      // Info variant (blue)
-      &.info {
-         border-color: var(--border-info-darker);
-         color: var(--text-primary);
-
-         .notification-header {
-            background: var(--surface-info-low);
-
-            i {
-               color: var(--text-info);
-            }
-         }
-      }
-
-      // Warning variant (orange)
-      &.warning {
-         border-color: var(--border-warning);
-         color: var(--text-primary);
-
-         .notification-header {
-            background: var(--surface-warning);
-
-            i {
-               color: var(--text-warning);
-            }
+            font-size: var(--font-size-sm);
          }
       }
 
-      // Danger variant (red)
-      &.danger {
-         border-color: var(--border-danger);
-         color: var(--text-primary);
-
-         .notification-header {
-            background: var(--surface-primary);
-
-            i {
-               color: var(--text-danger);
-            }
-         }
-      }
-
-      // Success variant (green)
-      &.success {
-         border-color: var(--border-success);
-         color: var(--text-primary);
-
-         .notification-header {
-            background: var(--surface-success);
-
-            i {
-               color: var(--text-success);
+      // Variant rules (info / warning / danger / success) only differ by token prefix.
+      @each $variant in (info, warning, danger, success) {
+         &.#{$variant} {
+            border: var(--notification-#{$variant}-border-width) solid var(--notification-#{$variant}-border);
+            border-radius: var(--notification-#{$variant}-radius);
+            color: var(--notification-#{$variant}-text);
+            font-family: var(--notification-#{$variant}-text-font-family);
+            font-size: var(--notification-#{$variant}-text-font-size);
+            font-weight: var(--notification-#{$variant}-text-font-weight);
+            line-height: var(--notification-#{$variant}-text-line-height);
+
+            .notification-header {
+               background: var(--notification-#{$variant}-surface);
+               @include themed-padding(--notification-#{$variant}-padding, $h: 1.33);
+
+               i {
+                  color: var(--notification-#{$variant}-icon);
+                  font-size: var(--notification-#{$variant}-icon-size);
+               }
+
+               .notification-title {
+                  color: var(--notification-#{$variant}-title);
+                  font-family: var(--notification-#{$variant}-title-font-family);
+                  font-size: var(--notification-#{$variant}-title-font-size);
+                  font-weight: var(--notification-#{$variant}-title-font-weight);
+                  line-height: var(--notification-#{$variant}-title-line-height);
+               }
             }
          }
       }
@@ -199,7 +231,7 @@
       justify-content: flex-start;
       gap: var(--space-8);
       width: 100%;
-      padding: .5rem var(--space-16);
+      box-sizing: border-box;
       position: relative;
 
       // When action button is in header, add spacing
@@ -208,13 +240,10 @@
       }
 
       i {
-         font-size: var(--font-md);
          flex-shrink: 0;
       }
 
       .notification-title {
-         font-weight: var(--font-weight-semibold);
-         font-size: var(--font-lg);
          text-align: left;
          flex: 1;
       }
@@ -226,54 +255,48 @@
       }
 
       .notification-close {
-         position: absolute;
-         top: 50%;
-         right: 0.5rem;
-         transform: translateY(-50%);
+         flex-shrink: 0;
+         margin-left: auto;
+         padding: 0;
          background: none;
          border: none;
          cursor: pointer;
-         padding: var(--space-4);
-         display: flex;
-         align-items: center;
-         justify-content: center;
-         opacity: 0.7;
-         transition: opacity var(--transition-fast);
-
-         i {
-            font-size: var(--font-sm);
-            color: inherit;
-         }
+         color: inherit;
+         font-size: inherit;
+         line-height: 1;
+         transition: color var(--duration-200);
 
          &:hover {
-            opacity: 1;
+            color: var(--text-primary);
          }
 
          &:focus {
-            outline: 2px solid currentColor;
-            outline-offset: 0.125rem;
-            border-radius: var(--radius-sm);
+            outline: var(--border-width-2) solid currentColor;
+            outline-offset: var(--space-2);
          }
       }
    }
 
-   .notification-description {
-      line-height: 1.4;
-      font-size: var(--font-md);
-      font-weight: var(--font-weight-light);
+   // Body row: description (col 1) + optional action buttons (col 2, right-aligned).
+   .notification-body {
+      display: flex;
+      align-items: center;
+      gap: var(--space-16);
+      padding: var(--space-12) var(--space-16);
+      width: 100%;
+      box-sizing: border-box;
       text-align: left;
-      padding: .75rem var(--space-16);
    }
 
-   .notification-impact {
-      font-weight: var(--font-weight-bold);
-      padding: var(--space-8) var(--space-16);
-      padding-bottom: var(--space-12);
-      margin-top: 0;
-      border-top: 1px solid var(--border-neutral-subtle);
-      font-size: var(--font-md);
-      text-align: left;
-      width: 100%;
+   .notification-description {
+      flex: 1;
+   }
+
+   .notification-body-actions {
+      display: flex;
+      gap: var(--space-8);
+      margin-left: auto;
+      flex-shrink: 0;
    }
 
    // Action buttons - inline variant
@@ -285,9 +308,6 @@
 
       .description-text {
          flex: 1;
-         line-height: 1.4;
-         font-size: var(--font-md);
-         font-weight: var(--font-weight-light);
       }
 
       // Button stays on the right (doesn't shrink or grow)
@@ -303,6 +323,7 @@
       gap: var(--space-8);
       padding: var(--space-12) var(--space-16);
       padding-top: var(--space-8);
-      border-top: 1px solid var(--border-neutral-subtle);
+      border-top: var(--border-width-1) solid var(--border-neutral-subtle);
    }
+
 </style>