@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/components/ProgressBar.svelte

@@ -9,7 +9,7 @@
   $: isComplete = clampedValue >= 100;
 </script>
 
-<div class="progress" class:compact={size === 'compact'}>
+<div class="progress {variant}" class:compact={size === 'compact'}>
   {#if label}
     <div class="progress-label">
       <span>{label}</span>
@@ -30,6 +30,98 @@
 </div>
 
 <style>
+  :global(:root) {
+    /* Primary */
+    --progressbar-primary-track-surface: var(--surface-neutral-low);
+    --progressbar-primary-track-border: var(--border-neutral-faint);
+    --progressbar-primary-track-border-width: var(--border-width-1);
+    --progressbar-primary-track-height: var(--space-8);
+    --progressbar-primary-radius: var(--radius-full);
+    --progressbar-primary-fill: var(--gradient-1);
+    --progressbar-primary-label: var(--text-secondary);
+    --progressbar-primary-label-font-family: var(--font-sans);
+    --progressbar-primary-label-font-size: var(--font-size-sm);
+    --progressbar-primary-label-font-weight: var(--font-weight-light);
+    --progressbar-primary-label-line-height: var(--line-height-normal);
+    --progressbar-primary-value: var(--text-tertiary);
+    --progressbar-primary-value-font-family: var(--font-mono);
+    --progressbar-primary-value-font-size: var(--font-size-xs);
+    --progressbar-primary-value-font-weight: var(--font-weight-light);
+    --progressbar-primary-value-line-height: var(--line-height-normal);
+
+    /* Success */
+    --progressbar-success-track-surface: var(--surface-neutral-low);
+    --progressbar-success-track-border: var(--border-neutral-faint);
+    --progressbar-success-track-border-width: var(--border-width-1);
+    --progressbar-success-track-height: var(--space-8);
+    --progressbar-success-radius: var(--radius-full);
+    --progressbar-success-fill: var(--border-success);
+    --progressbar-success-label: var(--text-secondary);
+    --progressbar-success-label-font-family: var(--font-sans);
+    --progressbar-success-label-font-size: var(--font-size-sm);
+    --progressbar-success-label-font-weight: var(--font-weight-light);
+    --progressbar-success-label-line-height: var(--line-height-normal);
+    --progressbar-success-value: var(--text-tertiary);
+    --progressbar-success-value-font-family: var(--font-mono);
+    --progressbar-success-value-font-size: var(--font-size-xs);
+    --progressbar-success-value-font-weight: var(--font-weight-light);
+    --progressbar-success-value-line-height: var(--line-height-normal);
+
+    /* Warning */
+    --progressbar-warning-track-surface: var(--surface-neutral-low);
+    --progressbar-warning-track-border: var(--border-neutral-faint);
+    --progressbar-warning-track-border-width: var(--border-width-1);
+    --progressbar-warning-track-height: var(--space-8);
+    --progressbar-warning-radius: var(--radius-full);
+    --progressbar-warning-fill: var(--border-warning);
+    --progressbar-warning-label: var(--text-secondary);
+    --progressbar-warning-label-font-family: var(--font-sans);
+    --progressbar-warning-label-font-size: var(--font-size-sm);
+    --progressbar-warning-label-font-weight: var(--font-weight-light);
+    --progressbar-warning-label-line-height: var(--line-height-normal);
+    --progressbar-warning-value: var(--text-tertiary);
+    --progressbar-warning-value-font-family: var(--font-mono);
+    --progressbar-warning-value-font-size: var(--font-size-xs);
+    --progressbar-warning-value-font-weight: var(--font-weight-light);
+    --progressbar-warning-value-line-height: var(--line-height-normal);
+
+    /* Danger */
+    --progressbar-danger-track-surface: var(--surface-neutral-low);
+    --progressbar-danger-track-border: var(--border-neutral-faint);
+    --progressbar-danger-track-border-width: var(--border-width-1);
+    --progressbar-danger-track-height: var(--space-8);
+    --progressbar-danger-radius: var(--radius-full);
+    --progressbar-danger-fill: var(--border-danger);
+    --progressbar-danger-label: var(--text-secondary);
+    --progressbar-danger-label-font-family: var(--font-sans);
+    --progressbar-danger-label-font-size: var(--font-size-sm);
+    --progressbar-danger-label-font-weight: var(--font-weight-light);
+    --progressbar-danger-label-line-height: var(--line-height-normal);
+    --progressbar-danger-value: var(--text-tertiary);
+    --progressbar-danger-value-font-family: var(--font-mono);
+    --progressbar-danger-value-font-size: var(--font-size-xs);
+    --progressbar-danger-value-font-weight: var(--font-weight-light);
+    --progressbar-danger-value-line-height: var(--line-height-normal);
+
+    /* Info */
+    --progressbar-info-track-surface: var(--surface-neutral-low);
+    --progressbar-info-track-border: var(--border-neutral-faint);
+    --progressbar-info-track-border-width: var(--border-width-1);
+    --progressbar-info-track-height: var(--space-8);
+    --progressbar-info-radius: var(--radius-full);
+    --progressbar-info-fill: var(--border-info);
+    --progressbar-info-label: var(--text-secondary);
+    --progressbar-info-label-font-family: var(--font-sans);
+    --progressbar-info-label-font-size: var(--font-size-sm);
+    --progressbar-info-label-font-weight: var(--font-weight-light);
+    --progressbar-info-label-line-height: var(--line-height-normal);
+    --progressbar-info-value: var(--text-tertiary);
+    --progressbar-info-value-font-family: var(--font-mono);
+    --progressbar-info-value-font-size: var(--font-size-xs);
+    --progressbar-info-value-font-weight: var(--font-weight-light);
+    --progressbar-info-value-line-height: var(--line-height-normal);
+  }
+
   .progress {
     display: flex;
     flex-direction: column;
@@ -41,59 +133,161 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: var(--font-sm);
-    color: var(--text-secondary);
-    font-weight: var(--font-weight-medium);
-  }
-
-  .progress-value {
-    font-size: var(--font-xs);
-    color: var(--text-tertiary);
-    font-family: 'Courier New', monospace;
   }
 
   .progress-track {
     width: 100%;
-    height: 8px;
-    background: var(--surface-neutral-low);
-    border-radius: var(--radius-full);
     overflow: hidden;
-    border: 1px solid var(--border-neutral-faint);
+    border-style: solid;
   }
 
   .compact .progress-track {
-    height: 4px;
+    height: calc(var(--progress-track-height, var(--space-4)) * 0.5);
   }
 
   .progress-fill {
     height: 100%;
-    border-radius: var(--radius-full);
     transition: width 0.4s ease;
   }
 
+  /* Primary */
+  .progress.primary .progress-label > span {
+    color: var(--progressbar-primary-label);
+    font-family: var(--progressbar-primary-label-font-family);
+    font-size: var(--progressbar-primary-label-font-size);
+    font-weight: var(--progressbar-primary-label-font-weight);
+    line-height: var(--progressbar-primary-label-line-height);
+  }
+  .progress.primary .progress-value {
+    color: var(--progressbar-primary-value);
+    font-family: var(--progressbar-primary-value-font-family);
+    font-size: var(--progressbar-primary-value-font-size);
+    font-weight: var(--progressbar-primary-value-font-weight);
+    line-height: var(--progressbar-primary-value-line-height);
+  }
+  .progress.primary .progress-track {
+    background: var(--progressbar-primary-track-surface);
+    border-color: var(--progressbar-primary-track-border);
+    border-width: var(--progressbar-primary-track-border-width);
+    border-radius: var(--progressbar-primary-radius);
+    height: var(--progressbar-primary-track-height);
+  }
   .progress-fill.primary {
-    background: var(--gradient-progress);
+    background: var(--progressbar-primary-fill);
+    border-radius: var(--progressbar-primary-radius);
   }
 
+  /* Success */
+  .progress.success .progress-label > span {
+    color: var(--progressbar-success-label);
+    font-family: var(--progressbar-success-label-font-family);
+    font-size: var(--progressbar-success-label-font-size);
+    font-weight: var(--progressbar-success-label-font-weight);
+    line-height: var(--progressbar-success-label-line-height);
+  }
+  .progress.success .progress-value {
+    color: var(--progressbar-success-value);
+    font-family: var(--progressbar-success-value-font-family);
+    font-size: var(--progressbar-success-value-font-size);
+    font-weight: var(--progressbar-success-value-font-weight);
+    line-height: var(--progressbar-success-value-line-height);
+  }
+  .progress.success .progress-track {
+    background: var(--progressbar-success-track-surface);
+    border-color: var(--progressbar-success-track-border);
+    border-width: var(--progressbar-success-track-border-width);
+    border-radius: var(--progressbar-success-radius);
+    height: var(--progressbar-success-track-height);
+  }
   .progress-fill.success {
-    background: var(--border-success);
+    background: var(--progressbar-success-fill);
+    border-radius: var(--progressbar-success-radius);
   }
 
+  /* Warning */
+  .progress.warning .progress-label > span {
+    color: var(--progressbar-warning-label);
+    font-family: var(--progressbar-warning-label-font-family);
+    font-size: var(--progressbar-warning-label-font-size);
+    font-weight: var(--progressbar-warning-label-font-weight);
+    line-height: var(--progressbar-warning-label-line-height);
+  }
+  .progress.warning .progress-value {
+    color: var(--progressbar-warning-value);
+    font-family: var(--progressbar-warning-value-font-family);
+    font-size: var(--progressbar-warning-value-font-size);
+    font-weight: var(--progressbar-warning-value-font-weight);
+    line-height: var(--progressbar-warning-value-line-height);
+  }
+  .progress.warning .progress-track {
+    background: var(--progressbar-warning-track-surface);
+    border-color: var(--progressbar-warning-track-border);
+    border-width: var(--progressbar-warning-track-border-width);
+    border-radius: var(--progressbar-warning-radius);
+    height: var(--progressbar-warning-track-height);
+  }
   .progress-fill.warning {
-    background: var(--border-warning);
+    background: var(--progressbar-warning-fill);
+    border-radius: var(--progressbar-warning-radius);
   }
 
+  /* Danger */
+  .progress.danger .progress-label > span {
+    color: var(--progressbar-danger-label);
+    font-family: var(--progressbar-danger-label-font-family);
+    font-size: var(--progressbar-danger-label-font-size);
+    font-weight: var(--progressbar-danger-label-font-weight);
+    line-height: var(--progressbar-danger-label-line-height);
+  }
+  .progress.danger .progress-value {
+    color: var(--progressbar-danger-value);
+    font-family: var(--progressbar-danger-value-font-family);
+    font-size: var(--progressbar-danger-value-font-size);
+    font-weight: var(--progressbar-danger-value-font-weight);
+    line-height: var(--progressbar-danger-value-line-height);
+  }
+  .progress.danger .progress-track {
+    background: var(--progressbar-danger-track-surface);
+    border-color: var(--progressbar-danger-track-border);
+    border-width: var(--progressbar-danger-track-border-width);
+    border-radius: var(--progressbar-danger-radius);
+    height: var(--progressbar-danger-track-height);
+  }
   .progress-fill.danger {
-    background: var(--border-danger);
+    background: var(--progressbar-danger-fill);
+    border-radius: var(--progressbar-danger-radius);
   }
 
+  /* Info */
+  .progress.info .progress-label > span {
+    color: var(--progressbar-info-label);
+    font-family: var(--progressbar-info-label-font-family);
+    font-size: var(--progressbar-info-label-font-size);
+    font-weight: var(--progressbar-info-label-font-weight);
+    line-height: var(--progressbar-info-label-line-height);
+  }
+  .progress.info .progress-value {
+    color: var(--progressbar-info-value);
+    font-family: var(--progressbar-info-value-font-family);
+    font-size: var(--progressbar-info-value-font-size);
+    font-weight: var(--progressbar-info-value-font-weight);
+    line-height: var(--progressbar-info-value-line-height);
+  }
+  .progress.info .progress-track {
+    background: var(--progressbar-info-track-surface);
+    border-color: var(--progressbar-info-track-border);
+    border-width: var(--progressbar-info-track-border-width);
+    border-radius: var(--progressbar-info-radius);
+    height: var(--progressbar-info-track-height);
+  }
   .progress-fill.info {
-    background: var(--border-info);
+    background: var(--progressbar-info-fill);
+    border-radius: var(--progressbar-info-radius);
   }
 
   .progress-icon {
     color: var(--text-success);
-    font-size: var(--font-md);
+    font-size: var(--icon-size-md);
     text-align: right;
   }
 </style>

package/src/components/RadioButton.svelte

@@ -2,86 +2,156 @@
   import { createEventDispatcher } from 'svelte';
 
   export let active: boolean = false;
-  export let icon: string;
   export let label: string;
-  export let color: string = 'var(--text-secondary)';
+  export let color: string = '';
+  let className: string = '';
+  export { className as class };
 
   const dispatch = createEventDispatcher();
 </script>
 
 <button
-  class="radio-button"
+  class="radio-button {className}"
   class:active
-  style="--radio-color: {color};"
+  style={color ? `--radiobutton-color: ${color};` : ''}
   on:click={() => dispatch('click')}
 >
-  <span class="radio-dot" class:filled={active}></span>
-  <i class={icon + ' fa-fw radio-icon'}></i>
+  <span class="radio-dot"></span>
   <span class="radio-label">{label}</span>
 </button>
 
 <style lang="scss">
+  :global(:root) {
+    /* Default */
+    --radiobutton-default-dot-border-color: var(--border-neutral);
+    --radiobutton-default-dot-border-width: var(--border-width-2);
+    --radiobutton-default-dot-fill: var(--text-secondary);
+    --radiobutton-default-dot-size: var(--dot-size-0);
+    --radiobutton-default-label: var(--text-primary);
+    --radiobutton-default-label-font-family: var(--font-sans);
+    --radiobutton-default-label-font-size: var(--font-size-md);
+    --radiobutton-default-label-font-weight: var(--font-weight-semibold);
+    --radiobutton-default-label-line-height: var(--line-height-tight);
+
+    /* Hover */
+    --radiobutton-hover-dot-border-color: var(--border-neutral);
+    --radiobutton-hover-dot-border-width: var(--border-width-2);
+    --radiobutton-hover-dot-fill: var(--text-secondary);
+    --radiobutton-hover-dot-size: var(--dot-size-50);
+    --radiobutton-hover-label: var(--text-primary);
+    --radiobutton-hover-label-font-family: var(--font-sans);
+    --radiobutton-hover-label-font-size: var(--font-size-md);
+    --radiobutton-hover-label-font-weight: var(--font-weight-semibold);
+    --radiobutton-hover-label-line-height: var(--line-height-tight);
+
+    /* Active */
+    --radiobutton-active-dot-border-color: var(--border-neutral);
+    --radiobutton-active-dot-border-width: var(--border-width-2);
+    --radiobutton-active-dot-fill: var(--text-secondary);
+    --radiobutton-active-dot-size: var(--dot-size-50);
+    --radiobutton-active-label: var(--text-primary);
+    --radiobutton-active-label-font-family: var(--font-sans);
+    --radiobutton-active-label-font-size: var(--font-size-md);
+    --radiobutton-active-label-font-weight: var(--font-weight-semibold);
+    --radiobutton-active-label-line-height: var(--line-height-tight);
+  }
+
   .radio-button {
     display: inline-flex;
     align-items: center;
     justify-content: flex-start;
-    gap: var(--space-4);
-    width: 120px;
-    height: 1rem;
-    padding: 0 var(--space-4);
+    gap: var(--space-8);
     background: transparent;
     border: none;
-    border-radius: var(--radius-lg);
     cursor: pointer;
-    transition: all 0.2s ease;
-    line-height: 1;
+    transition: all var(--duration-200);
+    line-height: var(--line-height-tight);
 
-    &:hover {
+    &:hover,
+    &.force-hover {
       background: linear-gradient(
         135deg,
-        color-mix(in srgb, var(--radio-color) 12%, var(--surface-neutral-lowest)),
+        color-mix(in srgb, var(--radiobutton-color) 12%, var(--surface-neutral-lowest)),
         var(--surface-neutral-lowest)
       );
+
+      .radio-label {
+        color: var(--radiobutton-hover-label);
+        font-family: var(--radiobutton-hover-label-font-family);
+        font-size: var(--radiobutton-hover-label-font-size);
+        font-weight: var(--radiobutton-hover-label-font-weight);
+        line-height: var(--radiobutton-hover-label-line-height);
+      }
+
+      .radio-dot {
+        border: var(--radiobutton-hover-dot-border-width) solid var(--radiobutton-color, var(--radiobutton-hover-dot-border-color));
+
+        &::after {
+          width: var(--radiobutton-hover-dot-size);
+          height: var(--radiobutton-hover-dot-size);
+          background: var(--radiobutton-color, var(--radiobutton-hover-dot-fill));
+          opacity: 1;
+        }
+      }
     }
 
     &.active {
       background: linear-gradient(
         135deg,
-        color-mix(in srgb, var(--radio-color) 15%, var(--surface-neutral-lowest)),
-        color-mix(in srgb, var(--radio-color) 5%, var(--surface-neutral-lowest))
+        color-mix(in srgb, var(--radiobutton-color) 15%, var(--surface-neutral-lowest)),
+        color-mix(in srgb, var(--radiobutton-color) 5%, var(--surface-neutral-lowest))
       );
+
+      .radio-label {
+        color: var(--radiobutton-active-label);
+        font-family: var(--radiobutton-active-label-font-family);
+        font-size: var(--radiobutton-active-label-font-size);
+        font-weight: var(--radiobutton-active-label-font-weight);
+        line-height: var(--radiobutton-active-label-line-height);
+      }
+
+      .radio-dot {
+        border: var(--radiobutton-active-dot-border-width) solid var(--radiobutton-color, var(--radiobutton-active-dot-border-color));
+
+        &::after {
+          width: var(--radiobutton-active-dot-size);
+          height: var(--radiobutton-active-dot-size);
+          background: var(--radiobutton-color, var(--radiobutton-active-dot-fill));
+          opacity: 1;
+        }
+      }
     }
   }
 
   .radio-dot {
-    width: 0.75rem;
-    height: 0.75rem;
-    border-radius: 50%;
-    border: 2px solid var(--border-neutral-default);
+    position: relative;
+    width: var(--space-12);
+    height: var(--space-12);
+    border-radius: var(--radius-full);
+    border: var(--radiobutton-default-dot-border-width) solid var(--radiobutton-default-dot-border-color);
     flex-shrink: 0;
-    transition: all 0.2s ease;
+    transition: all var(--duration-200);
 
-    .radio-button:hover & {
-      border-color: var(--radio-color);
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: var(--radiobutton-default-dot-size);
+      height: var(--radiobutton-default-dot-size);
+      background: var(--radiobutton-color, var(--radiobutton-default-dot-fill));
+      border-radius: var(--radius-full);
+      transform: translate(-50%, -50%);
+      opacity: 0;
+      transition: opacity var(--duration-200);
     }
-
-    &.filled {
-      border-color: var(--radio-color);
-      background: var(--radio-color);
-      box-shadow: inset 0 0 0 2px var(--surface-neutral-lowest);
-    }
-  }
-
-  .radio-icon {
-    font-size: var(--font-lg);
-    color: var(--radio-color);
-    line-height: 1;
   }
 
   .radio-label {
-    font-size: var(--font-md);
-    font-weight: var(--font-weight-bold);
-    color: var(--text-primary);
-    line-height: 1;
+    color: var(--radiobutton-default-label);
+    font-family: var(--radiobutton-default-label-font-family);
+    font-size: var(--radiobutton-default-label-font-size);
+    font-weight: var(--radiobutton-default-label-font-weight);
+    line-height: var(--radiobutton-default-label-line-height);
   }
 </style>