@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/component-editor/scaffolding/linkedBlock.ts

@@ -0,0 +1,226 @@
+import { get } from 'svelte/store';
+import {
+  isComponentPropertyLinked,
+  getComponentPropertySiblings,
+  editorState,
+} from '../../lib/editorStore';
+import type { CssVarRef } from '../../lib/editorTypes';
+import type { Token } from './types';
+
+function aliasKey(ref: CssVarRef | undefined): string {
+  if (!ref) return '';
+  return ref.kind === 'token' ? `t:${ref.name}` : `v:${ref.value}`;
+}
+
+const TYPOGRAPHY_PROP_SUFFIXES = ['font-family', 'font-size', 'font-weight', 'line-height'] as const;
+
+/** Derive a slot-aware label from a token's groupKey when the groupKey carries
+ *  a slot prefix (e.g. `title-font-family` → "title font family"). Bare
+ *  typography groupKeys (`font-family`) and non-typography groupKeys keep the
+ *  token's original label.
+ *
+ *  Disambiguates rows in the linked block when one bucket holds multiple
+ *  same-shape link groups (e.g. Notification's title vs. text typography),
+ *  without coupling the label to the per-variant view. */
+function deriveLinkedLabel(label: string, groupKey: string | undefined): string {
+  if (!groupKey) return label;
+  for (const prop of TYPOGRAPHY_PROP_SUFFIXES) {
+    if (groupKey === prop) return label;
+    if (groupKey.endsWith('-' + prop)) {
+      const slot = groupKey.slice(0, groupKey.length - prop.length - 1);
+      return `${slot} ${label}`;
+    }
+  }
+  return label;
+}
+
+/** `Token` enriched by the linked-block computation. The base fields are inherited from
+    `Token`; the extra commentary on `mergeVariables` here is linked-block-specific. */
+export interface LinkedToken extends Token {
+  /** Other groupKey lead variables whose current alias matches this row's. The row writes
+      the same alias to each of these (and their siblings) so the merged display stays in sync. */
+  mergeVariables?: string[];
+}
+
+export type LinkedGroup = {
+  token: LinkedToken;
+  /** Full set of contexts participating in this group (linked + broken), ordered by the
+      caller's `linkableContexts` insertion order so the LinkageChart row order matches the
+      variant tab strip. `brokenContexts` is a subset; the difference is currently linked. */
+  contexts: string[];
+  /** Subset of `contexts` whose alias has been overridden out of the linked group.
+      Renders as broken cells in the LinkageChart so the historical relationship stays visible. */
+  brokenContexts: string[];
+  variables: string[];
+  linked: boolean;
+  /** Reverse lookup from chart context label (e.g. "primary default") to the sibling variable
+      that backs that cell. Used by LinkedBlock to swap the row's displayed variable when the
+      user focuses a different variant/state, so the value and pop-bar reflect the cell the
+      user is looking at — not the group's first-seen representative. */
+  contextToVariable: Map<string, string>;
+};
+
+export type LinkedBlockResult = {
+  groups: LinkedGroup[];
+  varSet: Set<string>;
+  contextsByVar: Record<string, string[]>;
+  linkedOrder: Map<string, number>;
+};
+
+/**
+ * Compute linked-block groups for the given component.
+ * Each entry in `linkableContexts` maps a representative variable to a context label.
+ * A group is formed when ≥2 sibling variables (same component, same groupKey) exist.
+ *
+ * Reads editor state internally via `getComponentPropertySiblings` (which `get`s the store).
+ * Pass `$editorState` as the final argument so the call site subscribes and Svelte re-runs
+ * the reactive statement when state changes. The argument itself is ignored:
+ *
+ *   $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+ */
+export function computeLinkedBlock(
+  component: string,
+  linkableContexts: Map<string, string>,
+  allTokens: LinkedToken[],
+  // Reactivity hook — see JSDoc. The runtime state is read via `get(store)` internally;
+  // this parameter exists only so callers can pass `$editorState` to create the subscription.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _stateForReactivity?: unknown,
+): LinkedBlockResult {
+  const groups: LinkedGroup[] = [];
+  const varSet = new Set<string>();
+  const seen = new Set<string>();
+  const seenGroupKeys = new Set<string>();
+  const tokensByVar = new Map(allTokens.map((t) => [t.variable, t]));
+
+  // Topology peers per groupKey (everything the editor declared as part of one sharing set).
+  // Used to mirror writes from a row's lead onto sibling variables that aren't yet in the
+  // slice, so a single user change propagates to the full declared topology.
+  const topologyByGroupKey = new Map<string, string[]>();
+  for (const [variable] of linkableContexts) {
+    const gk = tokensByVar.get(variable)?.groupKey;
+    if (!gk) continue;
+    const list = topologyByGroupKey.get(gk) ?? [];
+    list.push(variable);
+    topologyByGroupKey.set(gk, list);
+  }
+
+  for (const [variable] of linkableContexts) {
+    if (seen.has(variable)) continue;
+    const rep = tokensByVar.get(variable);
+    if (!rep) continue;
+    if (rep.groupKey && seenGroupKeys.has(rep.groupKey)) continue;
+    const siblings = getComponentPropertySiblings(component, variable);
+    if (siblings.length < 2) continue;
+    for (const s of siblings) seen.add(s);
+    if (rep.groupKey) {
+      seenGroupKeys.add(rep.groupKey);
+      // Mark every other declared peer in linkableContexts as seen so they don't spawn dupe groups
+      // when the slice covers only a subset of the declared topology.
+      for (const peer of topologyByGroupKey.get(rep.groupKey) ?? []) seen.add(peer);
+    }
+
+    const propertyLinked = isComponentPropertyLinked(component, variable);
+    const declaredPeers = rep.groupKey ? topologyByGroupKey.get(rep.groupKey) ?? [] : [];
+    const mergePeers = declaredPeers.filter((v) => v !== variable && !siblings.includes(v));
+
+    // Partition the *currently linked* siblings by alias. Explicitly unlinked
+    // siblings (those in `slice.unlinked`) are tracked separately and always
+    // render as broken in the chart — even when their alias happens to match
+    // the canonical value — because they've opted out of sharing.
+    const slice = get(editorState).components[component];
+    const aliases = slice?.aliases ?? {};
+    const unlinkedSet = new Set(slice?.unlinked ?? []);
+    const buckets = new Map<string, string[]>();
+    for (const s of siblings) {
+      if (unlinkedSet.has(s)) continue;
+      const k = aliasKey(aliases[s]);
+      const arr = buckets.get(k) ?? [];
+      arr.push(s);
+      buckets.set(k, arr);
+    }
+    // Canonical = representative's bucket (if it's linked). Promoted to a more
+    // populous *explicit-alias* bucket when one exists. The empty-key bucket
+    // (peers with no saved alias) only wins canonical when the representative
+    // itself has no saved alias — otherwise an unsaved peer would silently
+    // outvote a peer that the user actively set.
+    let canonicalKey = unlinkedSet.has(variable) ? '' : aliasKey(aliases[variable]);
+    let canonicalSize = buckets.get(canonicalKey)?.length ?? 0;
+    for (const [k, arr] of buckets) {
+      if (k === '' && canonicalKey !== '') continue;
+      if (arr.length > canonicalSize) {
+        canonicalKey = k;
+        canonicalSize = arr.length;
+      }
+    }
+    const linkedSiblings = buckets.get(canonicalKey) ?? [];
+    const divergedSiblings: string[] = [];
+    for (const [k, arr] of buckets) {
+      if (k !== canonicalKey) divergedSiblings.push(...arr);
+    }
+    const explicitlyUnlinked = siblings.filter((s) => unlinkedSet.has(s));
+
+    // Build context lists in canonical (linkableContexts insertion) order so the
+    // LinkageChart row order matches the variant tab strip the editor declared.
+    // `contextToVariable` records which sibling backs each cell, so LinkedBlock
+    // can swap the row's displayed variable to follow focusedVariant/focusedState.
+    const linkedSet = new Set(linkedSiblings);
+    const brokenVarSet = new Set([...divergedSiblings, ...mergePeers, ...explicitlyUnlinked]);
+    const siblingSet = new Set(siblings);
+    const seenAll = new Set<string>();
+    const seenBroken = new Set<string>();
+    const ctxs: string[] = [];
+    const brokenContexts: string[] = [];
+    const contextToVariable = new Map<string, string>();
+    for (const [peer, ctx] of linkableContexts) {
+      if (rep.groupKey && tokensByVar.get(peer)?.groupKey !== rep.groupKey) continue;
+      if (siblingSet.has(peer) && !contextToVariable.has(ctx)) {
+        contextToVariable.set(ctx, peer);
+      }
+      const isLinked = linkedSet.has(peer);
+      const isBroken = brokenVarSet.has(peer);
+      if (!isLinked && !isBroken) continue;
+      if (!seenAll.has(ctx)) {
+        seenAll.add(ctx);
+        ctxs.push(ctx);
+      }
+      if (isBroken && !seenBroken.has(ctx)) {
+        seenBroken.add(ctx);
+        brokenContexts.push(ctx);
+      }
+    }
+    const tok: LinkedToken = {
+      ...rep,
+      label: deriveLinkedLabel(rep.label, rep.groupKey),
+      canBeLinked: true,
+      ...(mergePeers.length ? { mergeVariables: mergePeers } : {}),
+    };
+    groups.push({ token: tok, contexts: ctxs, brokenContexts, variables: siblings, linked: propertyLinked, contextToVariable });
+    // Per-variant rows for linked siblings stay directly editable — writes fan
+    // out through the linked write path (`setComponentAliasLinked`) because
+    // `isLinkedDisplay` resolves true. The link topology is dev-declared, so
+    // we don't gate edits behind a "go use the linked block" detour; the
+    // linked-block row is the topology view, not the only edit point.
+  }
+
+  const contextsByVar = Object.fromEntries(groups.map((g) => [g.token.variable, g.contexts]));
+  const linkedOrder = new Map<string, number>(
+    groups.flatMap((g, i) => [
+      [g.token.variable, i] as const,
+      ...g.variables.map((v) => [v, i] as const),
+    ]),
+  );
+
+  return { groups, varSet, contextsByVar, linkedOrder };
+}
+
+/** No-op since the linked-block became a peer to per-variant editing rather
+ *  than the single canonical edit point. Per-variant rows for linked properties
+ *  stay fully interactive — writes route through `setComponentAliasLinked`
+ *  when `isLinkedDisplay` resolves true, fanning out to all linked siblings.
+ *
+ *  Kept as an identity passthrough so existing editor call sites compile
+ *  without churn; remove the calls (and this export) when consolidating. */
+export function withLinkedDisabled<T extends { variable: string }>(tokens: T[], _linked: Set<string>): T[] {
+  return tokens;
+}

package/src/component-editor/scaffolding/siblings.ts

@@ -0,0 +1,33 @@
+import type { Token, TypeGroupConfig } from './types';
+
+export type Sibling = {
+  name: string;
+  label: string;
+  states: Record<string, Token[]>;
+  typeGroups?: Record<string, TypeGroupConfig[]>;
+};
+
+/** Build the `siblings` list a VariantGroup needs for its "Copy from" menu.
+    Given the full variant list and per-variant state-map builders, returns
+    every variant *except* `toVariant` shaped as a Sibling.
+
+    `variantStates(v)` and `variantTypeGroups(v)` return the same shape the
+    parent VariantGroup gets for its own `states` / `typeGroups` props — a map
+    keyed by state name. For single-state-per-variant editors (Badge, Notification,
+    ProgressBar), wrap the single-state builders inline:
+      `(v) => ({ [v]: variantTokens(v) })`. */
+export function buildSiblings<V extends string>(
+  variants: readonly V[],
+  toVariant: V,
+  variantStates: (v: V) => Record<string, Token[]>,
+  variantTypeGroups?: (v: V) => Record<string, TypeGroupConfig[]>,
+): Sibling[] {
+  return variants
+    .filter((v) => v !== toVariant)
+    .map((v) => ({
+      name: v,
+      label: v.charAt(0).toUpperCase() + v.slice(1),
+      states: variantStates(v),
+      typeGroups: variantTypeGroups ? variantTypeGroups(v) : undefined,
+    }));
+}

package/src/component-editor/scaffolding/types.ts

@@ -0,0 +1,39 @@
+/** Editor token: a single CSS custom property the user can theme. */
+export type Token = {
+  label: string;
+  variable: string;
+  /** When true, this token participates in the linked block when ≥2 variants agree on its value. */
+  canBeLinked?: boolean;
+  /** Used by the editor store to identify cross-variant counterparts (e.g. all `border-width` tokens link). */
+  groupKey?: string;
+  /** Token row is rendered in a disabled state (still visible). */
+  disabled?: boolean;
+  /** Token row is omitted entirely. */
+  hidden?: boolean;
+  /** When the linked block collapses several same-label same-value rows into one,
+      the surviving row carries the other groupKey leads here so writes co-propagate. */
+  mergeVariables?: string[];
+};
+
+/** Editor type-group: a fieldset containing a coordinated set of typography tokens
+    (text color + font-family/size/weight/line-height) for a piece of content
+    (e.g. a card title, notification body). Optional outline rows let
+    text-with-stroke groups (e.g. SectionDivider title) keep their stroke
+    width/color visually nested with the typography that drives them. */
+export type TypeGroupConfig = {
+  legend?: string;
+  colorVariable: string;
+  colorLabel?: string;
+  familyVariable?: string;
+  familyLabel?: string;
+  sizeVariable?: string;
+  sizeLabel?: string;
+  weightVariable?: string;
+  weightLabel?: string;
+  lineHeightVariable?: string;
+  lineHeightLabel?: string;
+  outlineWidthVariable?: string;
+  outlineWidthLabel?: string;
+  outlineColorVariable?: string;
+  outlineColorLabel?: string;
+};

package/src/components/Badge.svelte

@@ -1,10 +1,41 @@
+<script context="module" lang="ts">
+  export const badgeVariants = [
+    'primary',
+    'accent',
+    'neutral',
+    'alternate',
+    'canvas',
+    'special',
+    'success',
+    'warning',
+    'danger',
+    'info',
+  ] as const;
+  export type BadgeVariant = typeof badgeVariants[number];
+</script>
+
 <script lang="ts">
-  export let variant: 'info' | 'accent' | 'trait' | 'hero' = 'info';
+  export let variant: BadgeVariant = 'info';
   export let size: 'default' | 'small' = 'default';
   export let icon: string | undefined = undefined;
+  /** When true, badge is absolutely positioned. Requires the parent to be position: relative. */
+  export let floating: boolean = false;
+  /** Corner of the positioned parent to attach to when floating. */
+  export let anchor: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = 'bottom-right';
+  /** CSS length to offset from the anchor edges. Defaults to --space-12 (or --space-8 when size='small'). */
+  export let offset: string | undefined = undefined;
+  /** When true, badge sits flush in the anchor corner: zero offset and squared corners. */
+  export let flush: boolean = false;
 </script>
 
-<span class="badge badge-{variant}" class:badge-small={size === 'small'}>
+<span
+  class="badge badge-{variant}"
+  class:badge-small={size === 'small'}
+  class:badge-floating={floating}
+  class:badge-flush={flush}
+  data-anchor={floating ? anchor : undefined}
+  style={floating && offset && !flush ? `--badge-offset: ${offset};` : undefined}
+>
   {#if icon}
     <span class="icon"><i class={icon}></i></span>
   {:else}
@@ -13,24 +44,185 @@
   <slot />
 </span>
 
-<style>
+<style lang="scss">
+  @use '../styles/padding' as *;
+
+  $variants: info, accent, primary, success, warning, danger, neutral, special, alternate, canvas;
+
+  // Per-variant token block kept flat (not collapsed via SCSS @each) so the
+  // Layer-2 token-discovery parser (`extractGlobalRootBody` in
+  // src/lib/parsers/globalRootBlock.ts) can read the .svelte source verbatim;
+  // @each interpolation would make the parser see zero tokens for Badge,
+  // even though the rendered DOM would be identical. See parallel comment in
+  // Notification.svelte. `--text-primary` is the neutral primary text (with
+  // -secondary/-tertiary scale); `--text-brand` is the brand-family text.
+  :global(:root) {
+    /* Primary */
+    --badge-primary-surface: var(--surface-brand);
+    --badge-primary-text: var(--text-brand);
+    --badge-primary-border: var(--border-brand);
+    --badge-primary-text-font-family: var(--font-sans);
+    --badge-primary-text-font-size: var(--font-size-sm);
+    --badge-primary-text-font-weight: var(--font-weight-light);
+    --badge-primary-text-line-height: var(--line-height-tight);
+    --badge-primary-border-width: var(--border-width-1);
+    --badge-primary-radius: var(--radius-full);
+    --badge-primary-padding: var(--space-6);
+    --badge-primary-shadow: var(--shadow-none);
+    --badge-primary-blur: var(--blur-none);
+    --badge-primary-icon-size: var(--icon-size-sm);
+
+    /* Accent */
+    --badge-accent-surface: var(--surface-accent);
+    --badge-accent-text: var(--text-accent);
+    --badge-accent-border: var(--border-accent);
+    --badge-accent-text-font-family: var(--font-sans);
+    --badge-accent-text-font-size: var(--font-size-sm);
+    --badge-accent-text-font-weight: var(--font-weight-light);
+    --badge-accent-text-line-height: var(--line-height-tight);
+    --badge-accent-border-width: var(--border-width-1);
+    --badge-accent-radius: var(--radius-full);
+    --badge-accent-padding: var(--space-6);
+    --badge-accent-shadow: var(--shadow-none);
+    --badge-accent-blur: var(--blur-none);
+    --badge-accent-icon-size: var(--icon-size-sm);
+
+    /* Neutral */
+    --badge-neutral-surface: var(--surface-neutral);
+    --badge-neutral-text: var(--text-primary);
+    --badge-neutral-border: var(--border-neutral);
+    --badge-neutral-text-font-family: var(--font-sans);
+    --badge-neutral-text-font-size: var(--font-size-sm);
+    --badge-neutral-text-font-weight: var(--font-weight-light);
+    --badge-neutral-text-line-height: var(--line-height-tight);
+    --badge-neutral-border-width: var(--border-width-1);
+    --badge-neutral-radius: var(--radius-full);
+    --badge-neutral-padding: var(--space-6);
+    --badge-neutral-shadow: var(--shadow-none);
+    --badge-neutral-blur: var(--blur-none);
+    --badge-neutral-icon-size: var(--icon-size-sm);
+
+    /* Alternate */
+    --badge-alternate-surface: var(--surface-alternate);
+    --badge-alternate-text: var(--text-alternate);
+    --badge-alternate-border: var(--border-alternate);
+    --badge-alternate-text-font-family: var(--font-sans);
+    --badge-alternate-text-font-size: var(--font-size-sm);
+    --badge-alternate-text-font-weight: var(--font-weight-light);
+    --badge-alternate-text-line-height: var(--line-height-tight);
+    --badge-alternate-border-width: var(--border-width-1);
+    --badge-alternate-radius: var(--radius-full);
+    --badge-alternate-padding: var(--space-6);
+    --badge-alternate-shadow: var(--shadow-none);
+    --badge-alternate-blur: var(--blur-none);
+    --badge-alternate-icon-size: var(--icon-size-sm);
+
+    /* Canvas */
+    --badge-canvas-surface: var(--surface-canvas);
+    --badge-canvas-text: var(--text-canvas);
+    --badge-canvas-border: var(--border-canvas);
+    --badge-canvas-text-font-family: var(--font-sans);
+    --badge-canvas-text-font-size: var(--font-size-sm);
+    --badge-canvas-text-font-weight: var(--font-weight-light);
+    --badge-canvas-text-line-height: var(--line-height-tight);
+    --badge-canvas-border-width: var(--border-width-1);
+    --badge-canvas-radius: var(--radius-full);
+    --badge-canvas-padding: var(--space-6);
+    --badge-canvas-shadow: var(--shadow-none);
+    --badge-canvas-blur: var(--blur-none);
+    --badge-canvas-icon-size: var(--icon-size-sm);
+
+    /* Special */
+    --badge-special-surface: var(--surface-special);
+    --badge-special-text: var(--text-special);
+    --badge-special-border: var(--border-special);
+    --badge-special-text-font-family: var(--font-sans);
+    --badge-special-text-font-size: var(--font-size-sm);
+    --badge-special-text-font-weight: var(--font-weight-light);
+    --badge-special-text-line-height: var(--line-height-tight);
+    --badge-special-border-width: var(--border-width-1);
+    --badge-special-radius: var(--radius-full);
+    --badge-special-padding: var(--space-6);
+    --badge-special-shadow: var(--shadow-none);
+    --badge-special-blur: var(--blur-none);
+    --badge-special-icon-size: var(--icon-size-sm);
+
+    /* Success */
+    --badge-success-surface: var(--surface-success);
+    --badge-success-text: var(--text-success);
+    --badge-success-border: var(--border-success);
+    --badge-success-text-font-family: var(--font-sans);
+    --badge-success-text-font-size: var(--font-size-sm);
+    --badge-success-text-font-weight: var(--font-weight-light);
+    --badge-success-text-line-height: var(--line-height-tight);
+    --badge-success-border-width: var(--border-width-1);
+    --badge-success-radius: var(--radius-full);
+    --badge-success-padding: var(--space-6);
+    --badge-success-shadow: var(--shadow-none);
+    --badge-success-blur: var(--blur-none);
+    --badge-success-icon-size: var(--icon-size-sm);
+
+    /* Warning */
+    --badge-warning-surface: var(--surface-warning);
+    --badge-warning-text: var(--text-warning);
+    --badge-warning-border: var(--border-warning);
+    --badge-warning-text-font-family: var(--font-sans);
+    --badge-warning-text-font-size: var(--font-size-sm);
+    --badge-warning-text-font-weight: var(--font-weight-light);
+    --badge-warning-text-line-height: var(--line-height-tight);
+    --badge-warning-border-width: var(--border-width-1);
+    --badge-warning-radius: var(--radius-full);
+    --badge-warning-padding: var(--space-6);
+    --badge-warning-shadow: var(--shadow-none);
+    --badge-warning-blur: var(--blur-none);
+    --badge-warning-icon-size: var(--icon-size-sm);
+
+    /* Danger */
+    --badge-danger-surface: var(--surface-danger);
+    --badge-danger-text: var(--text-danger);
+    --badge-danger-border: var(--border-danger);
+    --badge-danger-text-font-family: var(--font-sans);
+    --badge-danger-text-font-size: var(--font-size-sm);
+    --badge-danger-text-font-weight: var(--font-weight-light);
+    --badge-danger-text-line-height: var(--line-height-tight);
+    --badge-danger-border-width: var(--border-width-1);
+    --badge-danger-radius: var(--radius-full);
+    --badge-danger-padding: var(--space-6);
+    --badge-danger-shadow: var(--shadow-none);
+    --badge-danger-blur: var(--blur-none);
+    --badge-danger-icon-size: var(--icon-size-sm);
+
+    /* Info */
+    --badge-info-surface: var(--surface-info);
+    --badge-info-text: var(--text-info);
+    --badge-info-border: var(--border-info);
+    --badge-info-text-font-family: var(--font-sans);
+    --badge-info-text-font-size: var(--font-size-sm);
+    --badge-info-text-font-weight: var(--font-weight-light);
+    --badge-info-text-line-height: var(--line-height-tight);
+    --badge-info-border-width: var(--border-width-1);
+    --badge-info-radius: var(--radius-full);
+    --badge-info-padding: var(--space-6);
+    --badge-info-shadow: var(--shadow-none);
+    --badge-info-blur: var(--blur-none);
+    --badge-info-icon-size: var(--icon-size-sm);
+  }
+
   .badge {
+    --badge-offset: var(--space-12);
     display: inline-flex;
     align-items: center;
     gap: var(--space-6);
-    font-size: var(--font-sm);
-    line-height: 1;
-    padding: var(--space-6) var(--space-12);
-    border-radius: var(--radius-full);
-    font-family: var(--font-sans);
-    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-tight);
     white-space: nowrap;
+    backdrop-filter: blur(var(--badge-blur, 0));
+    -webkit-backdrop-filter: blur(var(--badge-blur, 0));
   }
 
   .icon {
     display: inline-flex;
     align-items: center;
-    font-size: 1em;
+    font-size: var(--badge-icon-size, 1em);
   }
 
   .icon:empty {
@@ -38,45 +230,42 @@
   }
 
   .badge-small {
-    font-size: var(--font-xs);
-    padding: var(--space-6) var(--space-12);
+    --badge-offset: var(--space-8);
     gap: var(--space-4);
   }
 
-  /* Info (default) */
-  .badge-info {
-    color: var(--text-primary);
-    background: var(--surface-neutral-higher);
-    border: 1px solid var(--border-neutral-default);
-    box-shadow: var(--shadow-sm);
-  }
-
-
-  /* Accent */
-  .badge-accent {
-    color: var(--color-accent-300);
-    background: var(--surface-neutral-higher);
-    border: 1px solid var(--border-accent);
-    box-shadow: var(--shadow-sm);
-    text-transform: capitalize;
+  .badge-floating {
+    position: absolute;
+    /* Floating badges are decorative overlays over other content — let clicks
+       pass through to whatever owns the underlying surface (links, buttons). */
+    pointer-events: none;
   }
 
+  .badge-floating[data-anchor='top-left']     { top: var(--badge-offset); left: var(--badge-offset); }
+  .badge-floating[data-anchor='top-right']    { top: var(--badge-offset); right: var(--badge-offset); }
+  .badge-floating[data-anchor='bottom-left']  { bottom: var(--badge-offset); left: var(--badge-offset); }
+  .badge-floating[data-anchor='bottom-right'] { bottom: var(--badge-offset); right: var(--badge-offset); }
 
-  /* Hero */
-  .badge-hero {
-    color: #fff;
-    background: rgba(0, 0, 0, 0.35);
-    backdrop-filter: blur(8px);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    font-weight: var(--font-weight-semibold);
-    letter-spacing: 0.02em;
+  @each $v in $variants {
+    .badge-#{$v} {
+      --badge-icon-size: var(--badge-#{$v}-icon-size);
+      --badge-blur: var(--badge-#{$v}-blur);
+      color: var(--badge-#{$v}-text);
+      background: var(--badge-#{$v}-surface);
+      border: var(--badge-#{$v}-border-width) solid var(--badge-#{$v}-border);
+      border-radius: var(--badge-#{$v}-radius);
+      @include themed-padding(--badge-#{$v}-padding, $h: 2);
+      font-family: var(--badge-#{$v}-text-font-family);
+      font-size: var(--badge-#{$v}-text-font-size);
+      font-weight: var(--badge-#{$v}-text-font-weight);
+      line-height: var(--badge-#{$v}-text-line-height);
+      box-shadow: var(--badge-#{$v}-shadow);
+    }
   }
 
-  /* Trait */
-  .badge-trait {
-    color: var(--text-primary);
-    background: var(--surface-primary-high);
-    border: 1px solid var(--border-primary-strong);
-    text-transform: capitalize;
+  /* Flush wins over per-variant radius via source order — declared after @each. */
+  .badge-flush {
+    --badge-offset: 0;
+    border-radius: 0;
   }
 </style>