seblify 0.3.0 → 0.4.0

package/dist/components/action/button/icon-button/IconButton.svelte

@@ -0,0 +1,954 @@
+<script lang="ts">
+  import type { CustomCssSize, SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+
+  type IconButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full' | CustomCssSize;
+  type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | CustomCssSize;
+  type IconButtonTone =
+    | 'neutral'
+    | 'strong'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info';
+  type IconButtonType = 'button' | 'submit' | 'reset';
+  type IconButtonVariant = 'solid' | 'soft' | 'tint' | 'outline' | 'plain';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    children?: Snippet;
+    class?: string;
+    disabled?: boolean;
+    label: string;
+    loading?: boolean;
+    loadingLabel?: string;
+    radius?: IconButtonRadius;
+    size?: IconButtonSize;
+    tone?: IconButtonTone;
+    type?: IconButtonType;
+    variant?: IconButtonVariant;
+  }>;
+
+  const ICON_BUTTON_SIZE_MAP: Record<
+    Exclude<IconButtonSize, CustomCssSize>,
+    string
+  > = {
+    xs: '1.75rem',
+    sm: '2rem',
+    md: '2.25rem',
+    lg: '2.75rem',
+    xl: '3.25rem',
+  };
+  const ICON_BUTTON_RADIUS_MAP: Record<
+    Exclude<IconButtonRadius, CustomCssSize>,
+    string
+  > = {
+    none: '0',
+    sm: '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    full: '999px',
+  };
+
+  let {
+    children,
+    class: className,
+    disabled = false,
+    label,
+    loading = false,
+    loadingLabel,
+    radius = 'md',
+    size = 'md',
+    tone = 'neutral',
+    type = 'button',
+    variant = 'soft',
+    ...restProps
+  }: Props = $props();
+
+  function cssSize(value: CustomCssSize): string {
+    return typeof value === 'number' ? `${value}px` : value;
+  }
+
+  function resolveSizeValue(value: IconButtonSize): string {
+    if (typeof value === 'number') {
+      return cssSize(value);
+    }
+
+    return (
+      ICON_BUTTON_SIZE_MAP[value as keyof typeof ICON_BUTTON_SIZE_MAP] ?? value
+    );
+  }
+
+  function resolveRadiusValue(value: IconButtonRadius): string {
+    if (typeof value === 'number') {
+      return cssSize(value);
+    }
+
+    return (
+      ICON_BUTTON_RADIUS_MAP[value as keyof typeof ICON_BUTTON_RADIUS_MAP] ??
+      value
+    );
+  }
+
+  const sizeValue = $derived(resolveSizeValue(size));
+  const radiusValue = $derived(resolveRadiusValue(radius));
+  const isDisabled = $derived(disabled || loading);
+  const accessibleLabel = $derived(
+    loading && loadingLabel ? loadingLabel : label,
+  );
+</script>
+
+<button
+  {...restProps}
+  aria-busy={loading || undefined}
+  aria-label={accessibleLabel}
+  class={`icon-button seblify-tone-context${className ? ` ${className}` : ''}`}
+  data-loading={loading}
+  data-seblify-tone={tone}
+  data-variant={variant}
+  disabled={isDisabled}
+  style:--icon-button-radius={radiusValue}
+  style:--icon-button-size={sizeValue}
+  {type}
+>
+  <span class="icon-button__inner seblify-tone-publisher">
+    {#if loading}
+      <span class="icon-button__spinner" aria-hidden="true"></span>
+    {:else if children}
+      {@render children()}
+    {/if}
+  </span>
+</button>
+
+<style>:where(.seblify-tone-context) {
+  --seblify-tone-fill: var(--seblify-color-neutral-fill, #6f5f55);
+  --seblify-tone-fill-hover: var(--seblify-color-neutral-fill-hover, #5b4d45);
+  --seblify-tone-fill-text: var(--seblify-color-neutral-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-neutral-surface, #f2ebe4);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-neutral-surface-hover,
+    #ebe1d8
+  );
+  --seblify-tone-text: var(--seblify-color-neutral-text, #6f5f55);
+  --seblify-tone-border: var(--seblify-color-neutral-border, #ded0c4);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-neutral-derived-surface,
+    var(--seblify-color-surface-muted, #f2ebe4)
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-neutral-derived-border,
+    color-mix(
+      in srgb,
+      var(--seblify-color-neutral-fill, #6f5f55) 22%,
+      var(--seblify-color-border-strong, #c5afa0) 78%
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-neutral-derived-text,
+    var(--seblify-color-text-subtle, #8b7a70)
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-neutral-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 10%,
+      var(--seblify-color-surface-inverse, #15110f) 90%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-neutral-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 16%,
+      var(--seblify-color-surface-inverse, #15110f) 84%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-neutral-on-inverse-text,
+    var(--seblify-color-text-inverse, #fff4e7)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-neutral-on-inverse-border,
+    var(--seblify-color-border-inverse, #4a3b32)
+  );
+  --seblify-tone-control-fill: var(--seblify-tone-fill);
+  --seblify-tone-control-fill-hover: var(--seblify-tone-fill-hover);
+  --seblify-tone-control-fill-text: var(--seblify-tone-fill-text);
+  --seblify-tone-control-surface: var(--seblify-tone-surface);
+  --seblify-tone-control-surface-hover: var(--seblify-tone-surface-hover);
+  --seblify-tone-control-default-text: var(--seblify-color-text, #211916);
+  --seblify-tone-control-text: var(--seblify-tone-text);
+  --seblify-tone-control-border: var(--seblify-tone-border);
+  --seblify-tone-control-derived-surface: var(--seblify-tone-derived-surface);
+  --seblify-tone-control-derived-border: var(--seblify-tone-derived-border);
+  --seblify-tone-control-derived-text: var(--seblify-tone-derived-text);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inherit']) {
+  --seblify-tone-fill: var(
+    --seblify-current-tone-fill,
+    var(--seblify-color-neutral-fill, #6f5f55)
+  );
+  --seblify-tone-fill-hover: var(
+    --seblify-current-tone-fill-hover,
+    var(--seblify-color-neutral-fill-hover, #5b4d45)
+  );
+  --seblify-tone-fill-text: var(
+    --seblify-current-tone-fill-text,
+    var(--seblify-color-neutral-fill-text, #fff4e7)
+  );
+  --seblify-tone-surface: var(
+    --seblify-current-tone-surface,
+    var(--seblify-color-neutral-surface, #f2ebe4)
+  );
+  --seblify-tone-surface-hover: var(
+    --seblify-current-tone-surface-hover,
+    var(--seblify-color-neutral-surface-hover, #ebe1d8)
+  );
+  --seblify-tone-text: var(
+    --seblify-current-tone-text,
+    var(--seblify-color-neutral-text, #6f5f55)
+  );
+  --seblify-tone-border: var(
+    --seblify-current-tone-border,
+    var(--seblify-color-neutral-border, #ded0c4)
+  );
+  --seblify-tone-derived-surface: var(
+    --seblify-current-tone-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-current-tone-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-current-tone-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-current-tone-on-inverse-surface,
+    var(
+      --seblify-color-neutral-on-inverse-surface,
+      color-mix(
+        in srgb,
+        var(--seblify-color-text-inverse, #fff4e7) 10%,
+        var(--seblify-color-surface-inverse, #15110f) 90%
+      )
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-current-tone-on-inverse-surface-hover,
+    var(
+      --seblify-color-neutral-on-inverse-surface-hover,
+      color-mix(
+        in srgb,
+        var(--seblify-color-text-inverse, #fff4e7) 16%,
+        var(--seblify-color-surface-inverse, #15110f) 84%
+      )
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-current-tone-on-inverse-text,
+    var(
+      --seblify-color-neutral-on-inverse-text,
+      var(--seblify-color-text-inverse, #fff4e7)
+    )
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-current-tone-on-inverse-border,
+    var(
+      --seblify-color-neutral-on-inverse-border,
+      var(--seblify-color-border-inverse, #4a3b32)
+    )
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='neutral']) {
+  --seblify-tone-fill: var(--seblify-color-neutral-fill, #6f5f55);
+  --seblify-tone-fill-hover: var(--seblify-color-neutral-fill-hover, #5b4d45);
+  --seblify-tone-fill-text: var(--seblify-color-neutral-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-neutral-surface, #f2ebe4);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-neutral-surface-hover,
+    #ebe1d8
+  );
+  --seblify-tone-text: var(--seblify-color-neutral-text, #6f5f55);
+  --seblify-tone-border: var(--seblify-color-neutral-border, #ded0c4);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-neutral-derived-surface,
+    var(--seblify-color-surface-muted, #f2ebe4)
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-neutral-derived-border,
+    color-mix(
+      in srgb,
+      var(--seblify-color-neutral-fill, #6f5f55) 22%,
+      var(--seblify-color-border-strong, #c5afa0) 78%
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-neutral-derived-text,
+    var(--seblify-color-text-subtle, #8b7a70)
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-neutral-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 10%,
+      var(--seblify-color-surface-inverse, #15110f) 90%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-neutral-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 16%,
+      var(--seblify-color-surface-inverse, #15110f) 84%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-neutral-on-inverse-text,
+    var(--seblify-color-text-inverse, #fff4e7)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-neutral-on-inverse-border,
+    var(--seblify-color-border-inverse, #4a3b32)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='strong']) {
+  --seblify-tone-fill: var(--seblify-color-strong-fill, #211916);
+  --seblify-tone-fill-hover: var(--seblify-color-strong-fill-hover, #080706);
+  --seblify-tone-fill-text: var(--seblify-color-strong-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-strong-surface, #ffffff);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-strong-surface-hover,
+    #f2ebe4
+  );
+  --seblify-tone-text: var(--seblify-color-strong-text, #211916);
+  --seblify-tone-border: var(--seblify-color-strong-border, #c5afa0);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-strong-derived-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 10%,
+      var(--seblify-color-surface, #fffdf9) 90%
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-strong-derived-border,
+    color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 26%,
+      var(--seblify-color-border-strong, #c5afa0) 74%
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-strong-derived-text,
+    color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 66%,
+      var(--seblify-color-text-muted, #6f5f55) 34%
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-strong-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 14%,
+      var(--seblify-color-surface-inverse, #15110f) 86%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-strong-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-strong-on-inverse-text,
+    var(--seblify-color-text-inverse, #fff4e7)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-strong-on-inverse-border,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 42%,
+      var(--seblify-color-border-inverse, #4a3b32) 58%
+    )
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='primary']) {
+  --seblify-tone-fill: var(--seblify-color-primary-fill, #b43f5a);
+  --seblify-tone-fill-hover: var(--seblify-color-primary-fill-hover, #9f334d);
+  --seblify-tone-fill-text: var(--seblify-color-primary-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-primary-surface, #fae8ed);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-primary-surface-hover,
+    #f5d5dd
+  );
+  --seblify-tone-text: var(--seblify-color-primary-text, #8f2b43);
+  --seblify-tone-border: var(--seblify-color-primary-border, #e6a6b5);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-primary-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-primary-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-primary-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-primary-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-primary-fill, #b43f5a) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-primary-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-primary-fill, #b43f5a) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-primary-on-inverse-text,
+    var(--seblify-color-primary-fill, #b43f5a)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-primary-on-inverse-border,
+    var(--seblify-color-primary-border, #e6a6b5)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='secondary']) {
+  --seblify-tone-fill: var(--seblify-color-secondary-fill, #6f3a55);
+  --seblify-tone-fill-hover: var(--seblify-color-secondary-fill-hover, #5e2f47);
+  --seblify-tone-fill-text: var(--seblify-color-secondary-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-secondary-surface, #f4e5ee);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-secondary-surface-hover,
+    #ecd3e0
+  );
+  --seblify-tone-text: var(--seblify-color-secondary-text, #6f3a55);
+  --seblify-tone-border: var(--seblify-color-secondary-border, #d7a6bf);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-secondary-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-secondary-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-secondary-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-secondary-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-secondary-fill, #6f3a55) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-secondary-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-secondary-fill, #6f3a55) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-secondary-on-inverse-text,
+    var(--seblify-color-secondary-fill, #6f3a55)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-secondary-on-inverse-border,
+    var(--seblify-color-secondary-border, #d7a6bf)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='success']) {
+  --seblify-tone-fill: var(--seblify-color-success-fill, #777447);
+  --seblify-tone-fill-hover: var(--seblify-color-success-fill-hover, #66633c);
+  --seblify-tone-fill-text: var(--seblify-color-success-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-success-surface, #eeeddf);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-success-surface-hover,
+    #e1dfc4
+  );
+  --seblify-tone-text: var(--seblify-color-success-text, #5d5b34);
+  --seblify-tone-border: var(--seblify-color-success-border, #cbc790);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-success-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-success-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-success-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-success-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-success-fill, #777447) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-success-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-success-fill, #777447) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-success-on-inverse-text,
+    var(--seblify-color-success-fill, #777447)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-success-on-inverse-border,
+    var(--seblify-color-success-border, #cbc790)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='danger']) {
+  --seblify-tone-fill: var(--seblify-color-danger-fill, #b83d45);
+  --seblify-tone-fill-hover: var(--seblify-color-danger-fill-hover, #9f3239);
+  --seblify-tone-fill-text: var(--seblify-color-danger-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-danger-surface, #fae7e8);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-danger-surface-hover,
+    #f3d2d4
+  );
+  --seblify-tone-text: var(--seblify-color-danger-text, #923038);
+  --seblify-tone-border: var(--seblify-color-danger-border, #e2a2a7);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-danger-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-danger-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-danger-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-danger-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-danger-fill, #b83d45) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-danger-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-danger-fill, #b83d45) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-danger-on-inverse-text,
+    var(--seblify-color-danger-fill, #b83d45)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-danger-on-inverse-border,
+    var(--seblify-color-danger-border, #e2a2a7)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='warning']) {
+  --seblify-tone-fill: var(--seblify-color-warning-fill, #9a6d24);
+  --seblify-tone-fill-hover: var(--seblify-color-warning-fill-hover, #805918);
+  --seblify-tone-fill-text: var(--seblify-color-warning-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-warning-surface, #f8edd8);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-warning-surface-hover,
+    #efddbd
+  );
+  --seblify-tone-text: var(--seblify-color-warning-text, #7a5418);
+  --seblify-tone-border: var(--seblify-color-warning-border, #d8b46c);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-warning-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-warning-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-warning-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-warning-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-warning-fill, #9a6d24) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-warning-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-warning-fill, #9a6d24) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-warning-on-inverse-text,
+    var(--seblify-color-warning-fill, #9a6d24)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-warning-on-inverse-border,
+    var(--seblify-color-warning-border, #d8b46c)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='info']) {
+  --seblify-tone-fill: var(--seblify-color-info-fill, #a5664a);
+  --seblify-tone-fill-hover: var(--seblify-color-info-fill-hover, #8f543b);
+  --seblify-tone-fill-text: var(--seblify-color-info-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-info-surface, #f6e6de);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-info-surface-hover,
+    #edd3c6
+  );
+  --seblify-tone-text: var(--seblify-color-info-text, #844932);
+  --seblify-tone-border: var(--seblify-color-info-border, #d49d85);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-info-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-info-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-info-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-info-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-info-fill, #a5664a) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-info-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-info-fill, #a5664a) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-info-on-inverse-text,
+    var(--seblify-color-info-fill, #a5664a)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-info-on-inverse-border,
+    var(--seblify-color-info-border, #d49d85)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-surface='inverse']) {
+  --seblify-tone-control-surface: var(--seblify-tone-on-inverse-surface);
+  --seblify-tone-control-surface-hover: var(
+    --seblify-tone-on-inverse-surface-hover
+  );
+  --seblify-tone-control-default-text: var(
+    --seblify-color-text-inverse,
+    #fff4e7
+  );
+  --seblify-tone-control-text: var(--seblify-tone-on-inverse-text);
+  --seblify-tone-control-border: var(--seblify-tone-on-inverse-border);
+  --seblify-tone-control-derived-surface: color-mix(
+    in srgb,
+    var(--seblify-tone-on-inverse-surface) 70%,
+    var(--seblify-color-surface-inverse, #15110f) 30%
+  );
+  --seblify-tone-control-derived-border: color-mix(
+    in srgb,
+    var(--seblify-tone-on-inverse-border) 72%,
+    var(--seblify-color-border-inverse, #4a3b32) 28%
+  );
+  --seblify-tone-control-derived-text: var(--seblify-tone-on-inverse-text);
+}
+
+:where(
+  .seblify-tone-context[data-seblify-surface='inverse'][data-seblify-tone='strong']
+) {
+  --seblify-tone-control-fill: var(--seblify-color-text-inverse, #fff4e7);
+  --seblify-tone-control-fill-hover: color-mix(
+    in srgb,
+    var(--seblify-color-text-inverse, #fff4e7) 88%,
+    var(--seblify-color-surface-inverse, #15110f) 12%
+  );
+  --seblify-tone-control-fill-text: var(--seblify-color-text, #211916);
+}
+
+:where(.seblify-tone-publisher) {
+  --seblify-current-tone-fill: var(--seblify-tone-fill);
+  --seblify-current-tone-fill-hover: var(--seblify-tone-fill-hover);
+  --seblify-current-tone-fill-text: var(--seblify-tone-fill-text);
+  --seblify-current-tone-surface: var(--seblify-tone-surface);
+  --seblify-current-tone-surface-hover: var(--seblify-tone-surface-hover);
+  --seblify-current-tone-text: var(--seblify-tone-text);
+  --seblify-current-tone-border: var(--seblify-tone-border);
+  --seblify-current-tone-derived-surface: var(--seblify-tone-derived-surface);
+  --seblify-current-tone-derived-border: var(--seblify-tone-derived-border);
+  --seblify-current-tone-derived-text: var(--seblify-tone-derived-text);
+  --seblify-current-tone-on-inverse-surface: var(
+    --seblify-tone-on-inverse-surface
+  );
+  --seblify-current-tone-on-inverse-surface-hover: var(
+    --seblify-tone-on-inverse-surface-hover
+  );
+  --seblify-current-tone-on-inverse-text: var(--seblify-tone-on-inverse-text);
+  --seblify-current-tone-on-inverse-border: var(
+    --seblify-tone-on-inverse-border
+  );
+}
+
+.icon-button {
+    --icon-button-fill: var(--seblify-tone-fill);
+    --icon-button-fill-hover: var(--seblify-tone-fill-hover);
+    --icon-button-fill-text: var(--seblify-tone-fill-text);
+    --icon-button-surface: var(--seblify-tone-surface);
+    --icon-button-surface-hover: var(--seblify-tone-surface-hover);
+    --icon-button-default-text: var(--seblify-color-text, #211916);
+    --icon-button-text: var(--seblify-tone-text);
+    --icon-button-border: var(--seblify-tone-border);
+    --icon-button-icon-size: max(1rem, calc(var(--icon-button-size) * 0.5));
+
+    display: inline-grid;
+    width: var(--icon-button-size);
+    height: var(--icon-button-size);
+    flex: 0 0 auto;
+    place-items: center;
+    border: 1px solid transparent;
+    border-radius: var(--icon-button-radius);
+    padding: 0;
+    background: transparent;
+    box-sizing: border-box;
+    color: var(--icon-button-text);
+    cursor: pointer;
+    font: inherit;
+    line-height: 1;
+    vertical-align: middle;
+    transition:
+      background-color 140ms ease,
+      border-color 140ms ease,
+      color 140ms ease,
+      box-shadow 140ms ease,
+      transform 120ms ease;
+  }
+
+.icon-button__inner {
+    --seblify-current-size: var(--icon-button-icon-size);
+
+    display: inline-flex;
+    width: var(--icon-button-icon-size);
+    height: var(--icon-button-icon-size);
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+    pointer-events: none;
+  }
+
+.icon-button[data-variant='solid'] {
+    border-color: var(--icon-button-fill);
+    background: var(--icon-button-fill);
+    color: var(--icon-button-fill-text);
+    box-shadow: var(--seblify-shadow-control, 0 1px 3px rgb(16 24 40 / 24%));
+  }
+
+.icon-button[data-variant='soft'] {
+    background: var(--icon-button-surface);
+    color: var(--icon-button-default-text);
+  }
+
+.icon-button[data-variant='tint'] {
+    background: var(--icon-button-surface);
+    color: var(--icon-button-text);
+  }
+
+.icon-button[data-variant='outline'] {
+    border-color: var(--icon-button-border);
+    color: var(--icon-button-text);
+  }
+
+.icon-button[data-variant='plain'] {
+    color: var(--icon-button-text);
+  }
+
+.icon-button:not(:disabled):hover {
+    background: var(--icon-button-surface-hover);
+  }
+
+.icon-button[data-variant='solid']:not(:disabled):hover {
+    border-color: var(--icon-button-fill-hover);
+    background: var(--icon-button-fill-hover);
+  }
+
+.icon-button:not(:disabled):active {
+    transform: translateY(1px);
+  }
+
+.icon-button:focus-visible {
+    outline: 3px solid var(--seblify-color-focus-ring, #b43f5a);
+    outline-offset: 2px;
+  }
+
+.icon-button:disabled {
+    cursor: not-allowed;
+    opacity: var(--seblify-opacity-disabled, 0.56);
+  }
+
+.icon-button[data-loading='true'] {
+    cursor: progress;
+  }
+
+.icon-button__spinner {
+    display: block;
+    width: var(--icon-button-icon-size);
+    height: var(--icon-button-icon-size);
+    border: max(2px, calc(var(--icon-button-icon-size) / 8)) solid currentColor;
+    border-block-start-color: transparent;
+    border-radius: 999px;
+    animation: icon-button-spin 800ms linear infinite;
+  }
+
+@keyframes icon-button-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+@media (prefers-reduced-motion: reduce) {
+    .icon-button {
+      transition-duration: 0ms;
+    }
+
+    .icon-button__spinner {
+      animation-duration: 1400ms;
+    }
+  }
+</style>