seblify 0.2.1 → 0.3.0

package/dist/components/action/input/select/switch/Switch.svelte

@@ -3,7 +3,8 @@
   import { CircleOutlineIcon, HandleGripIcon, MinusIcon } from 'seblify/icons';
 
   type SwitchRadius = 'none' | 'sm' | 'md' | 'lg' | 'full' | CustomCssSize;
-  type SwitchAnimation = 'smooth' | 'snappy' | 'bouncy';
+  type SwitchAnimation = 'smooth' | 'bouncy';
+  type SwitchOrientation = 'horizontal' | 'vertical';
   type SwitchShape = 'pill' | 'floating' | 'line' | 'flat' | 'long';
   type SwitchSize =
     | 'xxs'
@@ -17,20 +18,25 @@
   type SwitchTone =
     | 'neutral'
     | 'primary'
+    | 'secondary'
     | 'success'
     | 'danger'
     | 'warning'
     | 'info'
     | 'inverse';
-  type SwitchVariant = 'solid' | 'soft' | 'tint';
+  type SwitchVariant = 'solid' | 'soft' | 'tint' | 'outline';
 
   type Props = SeblifyProps<{
     animation?: SwitchAnimation;
+    ariaLabel?: string;
     checked?: boolean;
     description?: string;
     disabled?: boolean;
+    duration?: number;
+    focusTone?: SwitchTone;
     label?: string;
     name?: string;
+    orientation?: SwitchOrientation;
     radius?: SwitchRadius;
     shape?: SwitchShape;
     showGripIcon?: boolean;
@@ -80,13 +86,44 @@
     );
   }
 
+  function resolveDurationNumber(duration: number): number {
+    if (!Number.isFinite(duration)) {
+      return 0;
+    }
+
+    return Math.max(0, duration);
+  }
+
+  function resolveDurationValue(duration: number): string {
+    return `${resolveDurationNumber(duration)}ms`;
+  }
+
+  function supportsThumbGrip(shape: SwitchShape): boolean {
+    return shape === 'pill' || shape === 'floating' || shape === 'line';
+  }
+
+  function supportsTrackIcons(shape: SwitchShape): boolean {
+    return shape !== 'line';
+  }
+
+  function resolveGripIconSize(shape: SwitchShape): string {
+    return shape === 'floating' || shape === 'line' ? '1em' : '0.75em';
+  }
+
+  const BOUNCY_MOTION_CLEAR_BUFFER = 80;
+  const switchId = $props.id();
+
   let {
     checked = $bindable(false),
     animation = 'smooth',
+    ariaLabel,
     description,
     disabled = false,
+    duration = 190,
+    focusTone,
     label,
     name,
+    orientation = 'horizontal',
     radius = 'full',
     shape = 'pill',
     showGripIcon = false,
@@ -102,31 +139,56 @@
 
   const sizeValue = $derived(resolveSizeValue(size));
   const radiusValue = $derived(resolveRadiusValue(radius));
-  const showThumbGrip = $derived(
-    showGripIcon &&
-      (shape === 'pill' || shape === 'floating' || shape === 'line'),
-  );
-  const showTrackIcons = $derived(showTrackIcon && shape !== 'line');
-  const gripIconSize = $derived(
-    shape === 'floating' || shape === 'line' ? '1em' : '0.75em',
+  const resolvedDuration = $derived(resolveDurationNumber(duration));
+  const durationValue = $derived(resolveDurationValue(duration));
+  const labelId = $derived(label ? `${switchId}-label` : undefined);
+  const descriptionId = $derived(
+    description ? `${switchId}-description` : undefined,
   );
+  const showContent = $derived(Boolean(label || description));
+  const showThumbGrip = $derived(showGripIcon && supportsThumbGrip(shape));
+  const showTrackIcons = $derived(showTrackIcon && supportsTrackIcons(shape));
+  const gripIconSize = $derived(resolveGripIconSize(shape));
   const onTrackIconSize = $derived(shape === 'pill' ? '0.95em' : '0.75em');
   const offTrackIconSize = $derived(shape === 'pill' ? '0.9em' : '0.7em');
 
   $effect(() => {
     const currentChecked = checked;
+    const canBounce = animation === 'bouncy' && resolvedDuration > 0;
 
     if (!hasMounted) {
       hasMounted = true;
       previousChecked = currentChecked;
+      bouncyMotion = 'none';
+      return;
+    }
+
+    if (!canBounce) {
+      previousChecked = currentChecked;
+      bouncyMotion = 'none';
       return;
     }
 
     if (currentChecked !== previousChecked) {
-      bouncyMotion =
-        animation === 'bouncy' ? (currentChecked ? 'to-on' : 'to-off') : 'none';
+      bouncyMotion = currentChecked ? 'to-on' : 'to-off';
       previousChecked = currentChecked;
     }
+
+    const activeMotion = bouncyMotion;
+
+    if (activeMotion === 'none') {
+      return;
+    }
+
+    const timeout = window.setTimeout(() => {
+      if (bouncyMotion === activeMotion) {
+        bouncyMotion = 'none';
+      }
+    }, resolvedDuration + BOUNCY_MOTION_CLEAR_BUFFER);
+
+    return () => {
+      window.clearTimeout(timeout);
+    };
   });
 
   function handleThumbAnimationEnd() {
@@ -141,13 +203,26 @@
   class="switch seblify-tone-context"
   data-animation={animation}
   data-bouncy-motion={bouncyMotion}
+  data-focus-tone={focusTone ?? tone ?? 'inherit'}
+  data-orientation={orientation}
   data-seblify-tone={tone ?? 'inherit'}
   data-shape={shape}
   data-variant={variant}
   style:--switch-size={sizeValue}
   style:--switch-radius={radiusValue}
+  style:--switch-duration={durationValue}
 >
-  <input bind:checked {disabled} {name} role="switch" type="checkbox" {value} />
+  <input
+    aria-describedby={descriptionId}
+    aria-label={labelId ? undefined : ariaLabel}
+    aria-labelledby={labelId}
+    bind:checked
+    {disabled}
+    {name}
+    role="switch"
+    type="checkbox"
+    {value}
+  />
   <span class="control" aria-hidden="true">
     {#if showTrackIcons}
       <span class="track-icons">
@@ -167,14 +242,16 @@
       {/if}
     </span>
   </span>
-  <span class="content">
-    {#if label}
-      <span class="label">{label}</span>
-    {/if}
-    {#if description}
-      <span class="description">{description}</span>
-    {/if}
-  </span>
+  {#if showContent}
+    <span class="content">
+      {#if label}
+        <span class="label" id={labelId}>{label}</span>
+      {/if}
+      {#if description}
+        <span class="description" id={descriptionId}>{description}</span>
+      {/if}
+    </span>
+  {/if}
 </label>
 
 <style>:where(.seblify-tone-context) {
@@ -216,6 +293,14 @@
   --seblify-tone-border: var(--seblify-color-border, #c8d2df);
 }
 
+:where(.seblify-tone-context[data-seblify-tone='strong']) {
+  --seblify-tone-fill: var(--seblify-color-fill-strong, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-strong-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-raised, #ffffff);
+  --seblify-tone-text: var(--seblify-color-text, #172033);
+  --seblify-tone-border: var(--seblify-color-border-strong, #aab7c5);
+}
+
 :where(.seblify-tone-context[data-seblify-tone='primary']) {
   --seblify-tone-fill: var(--seblify-color-fill-primary, #146a6f);
   --seblify-tone-fill-text: var(--seblify-color-fill-primary-text, #ffffff);
@@ -224,6 +309,17 @@
   --seblify-tone-border: var(--seblify-color-border-accent, #9ab7ba);
 }
 
+:where(.seblify-tone-context[data-seblify-tone='secondary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-secondary, #5b5fc7);
+  --seblify-tone-fill-text: var(
+    --seblify-color-fill-secondary-text,
+    #ffffff
+  );
+  --seblify-tone-surface: var(--seblify-color-secondary-surface, #f0efff);
+  --seblify-tone-text: var(--seblify-color-secondary-text, #2f316f);
+  --seblify-tone-border: var(--seblify-color-secondary-border, #c8c6f4);
+}
+
 :where(.seblify-tone-context[data-seblify-tone='success']) {
   --seblify-tone-fill: var(--seblify-color-fill-success, #1f7a3f);
   --seblify-tone-fill-text: var(--seblify-color-fill-success-text, #ffffff);
@@ -272,6 +368,8 @@
   --seblify-current-tone-border: var(--seblify-tone-border);
 }
 
+/* Base */
+
 .switch {
     --switch-track-width: calc(var(--switch-size) * 1.75);
     --switch-track-height: var(--switch-size);
@@ -284,12 +382,15 @@
       var(--switch-track-height) - 2 * var(--switch-radius-inset)
     );
     --switch-thumb-width: var(--switch-thumb-size);
+    --switch-thumb-height: var(--switch-thumb-size);
     --switch-thumb-travel: calc(
       var(--switch-track-width) - var(--switch-thumb-width) - 2 *
         var(--switch-radius-inset)
     );
     --switch-thumb-position-off: 0px;
     --switch-thumb-position-on: var(--switch-thumb-travel);
+    --switch-thumb-transform-off: translateX(var(--switch-thumb-position-off));
+    --switch-thumb-transform-on: translateX(var(--switch-thumb-position-on));
     --switch-thumb-radius: max(
       0px,
       min(
@@ -299,6 +400,7 @@
     );
     --switch-solid-border: var(--seblify-tone-fill);
     --switch-solid-surface: var(--seblify-tone-fill);
+    --switch-focus-tone-fill: var(--seblify-tone-fill);
     --switch-solid-thumb: color-mix(
       in srgb,
       var(--seblify-tone-fill) 8%,
@@ -319,6 +421,13 @@
       var(--seblify-tone-fill) 78%,
       var(--seblify-color-surface, #ffffff)
     );
+    --switch-outline-border: var(--seblify-tone-fill);
+    --switch-outline-surface: color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 7%,
+      var(--seblify-color-surface, #ffffff)
+    );
+    --switch-outline-thumb: var(--seblify-tone-fill);
     --switch-off-border: var(--seblify-color-border-strong, #aab7c5);
     --switch-off-surface: var(--seblify-color-surface-muted, #d9e0e8);
     --switch-off-thumb: var(--seblify-color-surface, #ffffff);
@@ -335,9 +444,9 @@
     );
     --switch-bouncy-runup: max(1px, calc(var(--switch-thumb-size) * 0.1));
     --switch-bouncy-overshoot: max(1px, calc(var(--switch-thumb-size) * 0.07));
-    --switch-thumb-motion-duration: 160ms;
+    --switch-thumb-motion-duration: var(--switch-duration);
     --switch-thumb-motion-timing: cubic-bezier(0.32, 0.72, 0, 1);
-    --switch-state-duration: 160ms;
+    --switch-state-duration: var(--switch-duration);
     --switch-state-timing: ease;
     --switch-track-icon-on-color: color-mix(
       in srgb,
@@ -351,7 +460,7 @@
     );
     --switch-focus-ring-color: color-mix(
       in srgb,
-      var(--seblify-tone-fill) 56%,
+      var(--switch-focus-tone-fill) 56%,
       transparent
     );
 
@@ -363,6 +472,8 @@
     cursor: pointer;
   }
 
+/* Tone */
+
 .switch[data-seblify-tone='inherit'] {
     --seblify-tone-fill: var(
       --seblify-current-tone-fill,
@@ -386,24 +497,46 @@
     );
   }
 
-.switch[data-animation='smooth'] {
-    --switch-thumb-motion-duration: 190ms;
-    --switch-thumb-motion-timing: cubic-bezier(0.32, 0.72, 0, 1);
-    --switch-state-duration: 190ms;
-    --switch-state-timing: ease;
+.switch[data-focus-tone='inherit'] {
+    --switch-focus-tone-fill: var(--seblify-tone-fill);
+  }
+
+.switch[data-focus-tone='neutral'] {
+    --switch-focus-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  }
+
+.switch[data-focus-tone='primary'] {
+    --switch-focus-tone-fill: var(--seblify-color-fill-primary, #146a6f);
+  }
+
+.switch[data-focus-tone='secondary'] {
+    --switch-focus-tone-fill: var(--seblify-color-fill-secondary, #5b5fc7);
+  }
+
+.switch[data-focus-tone='success'] {
+    --switch-focus-tone-fill: var(--seblify-color-fill-success, #1f7a3f);
+  }
+
+.switch[data-focus-tone='danger'] {
+    --switch-focus-tone-fill: var(--seblify-color-fill-danger, #c93434);
+  }
+
+.switch[data-focus-tone='warning'] {
+    --switch-focus-tone-fill: var(--seblify-color-fill-warning, #8a5a00);
+  }
+
+.switch[data-focus-tone='info'] {
+    --switch-focus-tone-fill: var(--seblify-color-fill-info, #1f6fb2);
   }
 
-.switch[data-animation='snappy'] {
-    --switch-thumb-motion-duration: 90ms;
-    --switch-thumb-motion-timing: cubic-bezier(0.12, 0.92, 0.18, 1);
-    --switch-state-duration: 90ms;
-    --switch-state-timing: linear;
+.switch[data-focus-tone='inverse'] {
+    --switch-focus-tone-fill: var(--seblify-color-fill-inverse, #172033);
   }
 
+/* Motion */
+
 .switch[data-animation='bouncy'] {
-    --switch-thumb-motion-duration: 380ms;
     --switch-thumb-motion-timing: cubic-bezier(0.24, 1.18, 0.4, 1);
-    --switch-state-duration: 220ms;
     --switch-state-timing: ease;
   }
 
@@ -451,6 +584,50 @@
     }
   }
 
+@keyframes switch-bouncy-vertical-to-on {
+    0% {
+      transform: translateY(var(--switch-thumb-position-off));
+    }
+
+    20% {
+      transform: translateY(
+        calc(var(--switch-thumb-position-off) - var(--switch-bouncy-runup))
+      );
+    }
+
+    76% {
+      transform: translateY(
+        calc(var(--switch-thumb-position-on) + var(--switch-bouncy-overshoot))
+      );
+    }
+
+    100% {
+      transform: translateY(var(--switch-thumb-position-on));
+    }
+  }
+
+@keyframes switch-bouncy-vertical-to-off {
+    0% {
+      transform: translateY(var(--switch-thumb-position-on));
+    }
+
+    20% {
+      transform: translateY(
+        calc(var(--switch-thumb-position-on) + var(--switch-bouncy-runup))
+      );
+    }
+
+    76% {
+      transform: translateY(
+        calc(var(--switch-thumb-position-off) - var(--switch-bouncy-overshoot))
+      );
+    }
+
+    100% {
+      transform: translateY(var(--switch-thumb-position-off));
+    }
+  }
+
 input {
     position: absolute;
     width: 1px;
@@ -462,6 +639,8 @@ input {
     white-space: nowrap;
   }
 
+/* Structure */
+
 .control {
     position: relative;
     display: inline-flex;
@@ -512,7 +691,7 @@ input {
 .thumb {
     display: inline-flex;
     width: var(--switch-thumb-width);
-    height: var(--switch-thumb-size);
+    height: var(--switch-thumb-height);
     align-items: center;
     justify-content: center;
     border-radius: var(--switch-thumb-radius);
@@ -524,7 +703,7 @@ input {
       var(--seblify-color-text-muted, #516176) 36%,
       transparent
     );
-    transform: translateX(var(--switch-thumb-position-off));
+    transform: var(--switch-thumb-transform-off);
     transition:
       transform var(--switch-thumb-motion-duration)
         var(--switch-thumb-motion-timing),
@@ -533,6 +712,8 @@ input {
       color var(--switch-state-duration) var(--switch-state-timing);
   }
 
+/* Shapes */
+
 .switch[data-shape='floating'],
   .switch[data-shape='line'] {
     --switch-track-height: calc(var(--switch-size) * 0.6666667);
@@ -596,6 +777,86 @@ input {
     --switch-thumb-width: var(--switch-thumb-size);
   }
 
+/* Orientation */
+
+.switch[data-orientation='vertical'] {
+    --switch-track-width: var(--switch-size);
+    --switch-track-height: calc(var(--switch-size) * 1.75);
+    --switch-thumb-size: calc(
+      var(--switch-track-width) - 2 * var(--switch-radius-inset)
+    );
+    --switch-thumb-width: var(--switch-thumb-size);
+    --switch-thumb-height: var(--switch-thumb-size);
+    --switch-thumb-travel: calc(
+      var(--switch-track-height) - var(--switch-thumb-height) - 2 *
+        var(--switch-radius-inset)
+    );
+    --switch-thumb-position-off: var(--switch-thumb-travel);
+    --switch-thumb-position-on: 0px;
+    --switch-thumb-transform-off: translateY(var(--switch-thumb-position-off));
+    --switch-thumb-transform-on: translateY(var(--switch-thumb-position-on));
+    --switch-track-icon-offset: calc(
+      var(--switch-radius-inset) + var(--switch-thumb-size) * 0.08
+    );
+  }
+
+.switch[data-orientation='vertical'] .control {
+    flex-direction: column;
+  }
+
+.switch[data-orientation='vertical'][data-shape='flat'],
+  .switch[data-orientation='vertical'][data-shape='long'] {
+    --switch-track-width: calc(var(--switch-size) * 0.75);
+    --switch-track-height: calc(var(--switch-size) * 1.75);
+    --switch-thumb-size: calc(
+      var(--switch-track-width) - 2 * var(--switch-radius-inset)
+    );
+    --switch-thumb-width: var(--switch-thumb-size);
+    --switch-thumb-height: calc(var(--switch-thumb-size) * 1.55);
+  }
+
+.switch[data-orientation='vertical'][data-shape='long'] {
+    --switch-thumb-height: var(--switch-thumb-size);
+  }
+
+.switch[data-orientation='vertical'][data-shape='floating'],
+  .switch[data-orientation='vertical'][data-shape='line'] {
+    --switch-track-width: calc(var(--switch-size) * 0.6666667);
+    --switch-track-height: calc(var(--switch-size) * 1.75);
+    --switch-padding: 0px;
+    --switch-radius-inset: var(--switch-border-width);
+    --switch-thumb-size: var(--switch-size);
+    --switch-thumb-width: var(--switch-thumb-size);
+    --switch-thumb-height: var(--switch-thumb-size);
+    --switch-thumb-travel: calc(
+      var(--switch-track-height) - var(--switch-thumb-height)
+    );
+    --switch-thumb-position-off: var(--switch-thumb-travel);
+    --switch-thumb-position-on: calc(-2 * var(--switch-border-width));
+  }
+
+.switch[data-orientation='vertical'][data-shape='line'] {
+    --switch-track-width: calc(var(--switch-size) * 0.3333333);
+  }
+
+.switch[data-orientation='vertical'] .track-icon {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+.switch[data-orientation='vertical'] .track-icon--on {
+    top: var(--switch-track-icon-offset);
+    transform: translateX(-50%) rotate(90deg);
+  }
+
+.switch[data-orientation='vertical'] .track-icon--off {
+    top: auto;
+    right: auto;
+    bottom: var(--switch-track-icon-offset);
+  }
+
+/* States */
+
 input:checked + .control {
     border-color: var(--switch-on-border);
     background: var(--switch-on-surface);
@@ -622,7 +883,7 @@ input:checked + .control .thumb {
   }
 
 input:checked + .control .thumb {
-    transform: translateX(var(--switch-thumb-position-on));
+    transform: var(--switch-thumb-transform-on);
   }
 
 .thumb-grip {
@@ -639,16 +900,34 @@ input:checked + .control .thumb {
     overflow: visible;
   }
 
-.switch[data-animation='bouncy'][data-bouncy-motion='to-on'] .thumb {
+/* Animation selectors */
+
+.switch[data-orientation='horizontal'][data-animation='bouncy'][data-bouncy-motion='to-on']
+    .thumb {
     animation: switch-bouncy-to-on var(--switch-thumb-motion-duration)
       var(--switch-thumb-motion-timing);
   }
 
-.switch[data-animation='bouncy'][data-bouncy-motion='to-off'] .thumb {
+.switch[data-orientation='horizontal'][data-animation='bouncy'][data-bouncy-motion='to-off']
+    .thumb {
     animation: switch-bouncy-to-off var(--switch-thumb-motion-duration)
       var(--switch-thumb-motion-timing);
   }
 
+.switch[data-orientation='vertical'][data-animation='bouncy'][data-bouncy-motion='to-on']
+    .thumb {
+    animation: switch-bouncy-vertical-to-on var(--switch-thumb-motion-duration)
+      var(--switch-thumb-motion-timing);
+  }
+
+.switch[data-orientation='vertical'][data-animation='bouncy'][data-bouncy-motion='to-off']
+    .thumb {
+    animation: switch-bouncy-vertical-to-off var(--switch-thumb-motion-duration)
+      var(--switch-thumb-motion-timing);
+  }
+
+/* Variants */
+
 .switch[data-variant='soft'] {
     --switch-on-border: var(--switch-soft-border);
     --switch-on-surface: var(--switch-soft-surface);
@@ -662,6 +941,23 @@ input:checked + .control .thumb {
     --switch-off-thumb: var(--switch-soft-thumb);
   }
 
+.switch[data-variant='outline'] {
+    --switch-off-border: var(--seblify-color-border-strong, #aab7c5);
+    --switch-off-surface: var(--seblify-color-surface, #ffffff);
+    --switch-off-thumb: var(--switch-off-border);
+    --switch-on-border: var(--switch-outline-border);
+    --switch-on-surface: var(--switch-outline-surface);
+    --switch-on-thumb-base: var(--switch-outline-thumb);
+    --switch-on-thumb: var(--switch-on-thumb-base);
+    --switch-track-icon-on-color: color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 48%,
+      transparent
+    );
+  }
+
+/* Color schemes */
+
 :global([data-theme='dark']) .switch {
     --switch-solid-thumb: color-mix(
       in srgb,
@@ -696,6 +992,19 @@ input:checked + .control .thumb {
     }
   }
 
+@media (prefers-reduced-motion: reduce) {
+    .switch {
+      --switch-thumb-motion-duration: 0ms;
+      --switch-thumb-motion-timing: linear;
+      --switch-state-duration: 0ms;
+      --switch-state-timing: linear;
+    }
+
+    .switch[data-animation='bouncy'] .thumb {
+      animation: none;
+    }
+  }
+
 input:focus-visible + .control {
     outline: 3px solid var(--switch-focus-ring-color);
     outline-offset: 2px;

package/dist/components/action/input/select/switch/Switch.svelte.d.ts

@@ -1,17 +1,22 @@
 import type { CustomCssSize } from 'seblify';
 type SwitchRadius = 'none' | 'sm' | 'md' | 'lg' | 'full' | CustomCssSize;
-type SwitchAnimation = 'smooth' | 'snappy' | 'bouncy';
+type SwitchAnimation = 'smooth' | 'bouncy';
+type SwitchOrientation = 'horizontal' | 'vertical';
 type SwitchShape = 'pill' | 'floating' | 'line' | 'flat' | 'long';
 type SwitchSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | CustomCssSize;
-type SwitchTone = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
-type SwitchVariant = 'solid' | 'soft' | 'tint';
+type SwitchTone = 'neutral' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+type SwitchVariant = 'solid' | 'soft' | 'tint' | 'outline';
 declare const Switch: import("svelte").Component<{
     animation?: SwitchAnimation | undefined;
+    ariaLabel?: string | undefined;
     checked?: boolean | undefined;
     description?: string | undefined;
     disabled?: boolean | undefined;
+    duration?: number | undefined;
+    focusTone?: SwitchTone | undefined;
     label?: string | undefined;
     name?: string | undefined;
+    orientation?: SwitchOrientation | undefined;
     radius?: SwitchRadius | undefined;
     shape?: SwitchShape | undefined;
     showGripIcon?: boolean | undefined;

package/dist/components/display/annotation/tag/Tag.svelte

@@ -102,6 +102,14 @@
   --seblify-tone-border: var(--seblify-color-border, #c8d2df);
 }
 
+:where(.seblify-tone-context[data-seblify-tone='strong']) {
+  --seblify-tone-fill: var(--seblify-color-fill-strong, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-strong-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-raised, #ffffff);
+  --seblify-tone-text: var(--seblify-color-text, #172033);
+  --seblify-tone-border: var(--seblify-color-border-strong, #aab7c5);
+}
+
 :where(.seblify-tone-context[data-seblify-tone='primary']) {
   --seblify-tone-fill: var(--seblify-color-fill-primary, #146a6f);
   --seblify-tone-fill-text: var(--seblify-color-fill-primary-text, #ffffff);
@@ -110,6 +118,17 @@
   --seblify-tone-border: var(--seblify-color-border-accent, #9ab7ba);
 }
 
+:where(.seblify-tone-context[data-seblify-tone='secondary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-secondary, #5b5fc7);
+  --seblify-tone-fill-text: var(
+    --seblify-color-fill-secondary-text,
+    #ffffff
+  );
+  --seblify-tone-surface: var(--seblify-color-secondary-surface, #f0efff);
+  --seblify-tone-text: var(--seblify-color-secondary-text, #2f316f);
+  --seblify-tone-border: var(--seblify-color-secondary-border, #c8c6f4);
+}
+
 :where(.seblify-tone-context[data-seblify-tone='success']) {
   --seblify-tone-fill: var(--seblify-color-fill-success, #1f7a3f);
   --seblify-tone-fill-text: var(--seblify-color-fill-success-text, #ffffff);