@tenerife.music/ui 1.0.13 → 1.0.16

package/dist/tokens/index.mjs

@@ -5,13 +5,18 @@ var primaryColors = {
   100: "210 40% 96%",
   200: "217 32.6% 17.5%",
   300: "216 28% 26%",
-  400: "215 25% 27%",
-  500: "215 20% 35%",
-  // Base primary
-  600: "215 16% 47%",
-  700: "216 12% 54%",
-  800: "217 10% 62%",
-  900: "222 47.4% 11.2%",
+  400: "215 25% 30%",
+  // Adjusted for better progression
+  500: "215 20% 38%",
+  // Adjusted for better progression
+  600: "215 16% 45%",
+  // Adjusted for better progression
+  700: "216 12% 35%",
+  // Rebalanced for semantic strength (L* ~35)
+  800: "217 10% 28%",
+  // Adjusted for proper progression
+  900: "222 47.4% 18%",
+  // Adjusted for better progression
   950: "222 84% 4.9%"
   // Darkest blue
 };
@@ -21,12 +26,15 @@ var accentColors = {
   200: "280 60% 85%",
   300: "280 55% 75%",
   400: "280 50% 65%",
-  500: "280 70% 67%",
-  // Base accent (night mode primary)
-  600: "259 65% 58%",
-  700: "259 60% 50%",
-  800: "259 55% 45%",
-  900: "259 50% 40%",
+  500: "280 65% 72%",
+  // Adjusted for WCAG AA contrast (4.5:1) with dark text in night mode
+  600: "259 65% 59%",
+  // Default accent - lightened for better contrast vs secondary (L* ~59, was 52, 15 delta from secondary-600)
+  700: "259 60% 44%",
+  // Active state - rebalanced for semantic strength (L* ~44, 12 delta from secondary-700)
+  800: "259 55% 38%",
+  // Adjusted for proper progression
+  900: "259 50% 32%",
   950: "259 45% 30%"
 };
 var secondaryColors = {
@@ -35,12 +43,15 @@ var secondaryColors = {
   200: "173 100% 85%",
   300: "173 100% 70%",
   400: "173 100% 55%",
-  500: "173 100% 37%",
-  // Base secondary (Tenerife #00bfa6)
-  600: "173 100% 32%",
-  700: "173 95% 27%",
+  500: "173 100% 45%",
+  // Adjusted for better scale progression
+  600: "173 100% 44%",
+  // Default secondary - rebalanced for better contrast vs primary (L* ~44, was 38)
+  700: "173 95% 32%",
+  // Active state - rebalanced for semantic strength (L* ~32)
   800: "173 90% 22%",
-  900: "173 85% 17%",
+  // Primary variant - darkened for dominance (L* ~22, was 26)
+  900: "173 85% 20%",
   950: "173 80% 12%"
 };
 var surfaceColors = {
@@ -133,13 +144,13 @@ var chartColors = {
 var textColors = {
   day: {
     primary: "0 0% 9%",
-    // Almost black
+    // Almost black (neutral-900 equivalent)
     secondary: "0 0% 45%",
     // Medium gray
     tertiary: "0 0% 65%",
     // Light gray
-    muted: "0 0% 38%",
-    // Muted gray with stronger contrast
+    muted: "0 0% 42%",
+    // Muted gray - adjusted for WCAG AA contrast (4.5:1) on surface.elevated2
     inverse: "0 0% 100%"
     // White (for dark backgrounds)
   },
@@ -451,6 +462,139 @@ var ALERT_TOKENS = {
   }
 };
 
+// src/tokens/components/motion.ts
+var MOTION_TOKENS = {
+  /**
+   * Transition property tokens
+   * Maps to Tailwind transition utilities
+   */
+  transition: {
+    all: "transition-all",
+    // All properties
+    colors: "transition-colors",
+    // Color properties only
+    opacity: "transition-opacity",
+    // Opacity only
+    transform: "transition-transform",
+    // Transform only
+    shadow: "transition-shadow",
+    // Box shadow only
+    none: "transition-none"
+    // No transition
+  },
+  /**
+   * Duration tokens
+   * Maps to foundation motion duration tokens via Tailwind
+   */
+  duration: {
+    instant: "duration-0",
+    // 0ms
+    fast: "duration-fast",
+    // 150ms - maps to motion.durations.fast
+    normal: "duration-normal",
+    // 300ms - maps to motion.durations.normal
+    slow: "duration-slow",
+    // 500ms - maps to motion.durations.slow
+    slower: "duration-slower",
+    // 700ms - maps to motion.durations.slower
+    slowest: "duration-slowest",
+    // 1000ms - maps to motion.durations.slowest
+    // Granular durations
+    "75": "duration-75",
+    // 75ms
+    "100": "duration-100",
+    // 100ms
+    "200": "duration-200",
+    // 200ms
+    "250": "duration-250",
+    // 250ms
+    "300": "duration-300",
+    // 300ms
+    "400": "duration-400",
+    // 400ms
+    "500": "duration-500",
+    // 500ms
+    "600": "duration-600",
+    // 600ms
+    "700": "duration-700",
+    // 700ms
+    "800": "duration-800",
+    // 800ms
+    "1000": "duration-1000"
+    // 1000ms
+  },
+  /**
+   * Easing tokens
+   * Maps to foundation motion easing tokens via Tailwind
+   */
+  easing: {
+    linear: "ease-linear",
+    // Linear easing
+    in: "ease-in",
+    // Ease in
+    out: "ease-out",
+    // Ease out (recommended for most UI)
+    "in-out": "ease-in-out",
+    // Ease in-out
+    bounce: "ease-bounce",
+    // Bounce easing
+    elastic: "ease-elastic"
+    // Elastic easing
+  },
+  /**
+   * Pre-configured transition tokens
+   * Combines duration and easing for common use cases
+   */
+  transitionPreset: {
+    fast: "transition-all duration-fast ease-out",
+    // Fast transition
+    normal: "transition-all duration-normal ease-in-out",
+    // Normal transition (default)
+    slow: "transition-all duration-slow ease-in-out",
+    // Slow transition
+    colors: "transition-colors duration-normal ease-out",
+    // Color transitions (common)
+    transform: "transition-transform duration-normal ease-out",
+    // Transform transitions
+    opacity: "transition-opacity duration-fast ease-out"
+    // Opacity transitions
+  },
+  /**
+   * Animation tokens
+   * Maps to foundation motion animation tokens via Tailwind
+   */
+  animation: {
+    none: "animate-none",
+    // No animation
+    spin: "animate-spin",
+    // Spin animation
+    pulse: "animate-pulse",
+    // Pulse animation
+    bounce: "animate-bounce",
+    // Bounce animation
+    ping: "animate-ping",
+    // Ping animation
+    shake: "animate-shake",
+    // Shake animation
+    fadeIn: "animate-fadeIn",
+    // Fade in
+    fadeOut: "animate-fadeOut",
+    // Fade out
+    slideInUp: "animate-slideInUp",
+    // Slide in from bottom
+    slideInDown: "animate-slideInDown",
+    // Slide in from top
+    slideInLeft: "animate-slideInLeft",
+    // Slide in from right
+    slideInRight: "animate-slideInRight",
+    // Slide in from left
+    scaleIn: "animate-scaleIn",
+    // Scale in
+    scaleOut: "animate-scaleOut"
+    // Scale out
+  }
+};
+
 // src/tokens/components/button.ts
 var BUTTON_TOKENS = {
   /**
@@ -483,25 +627,48 @@ var BUTTON_TOKENS = {
     vertical: {
       sm: "py-xs",
       // 4px (0.25rem) - maps to semanticSpacing.xs
-      md: "py-sm"
+      md: "py-sm",
       // 8px (0.5rem) - maps to semanticSpacing.sm
+      lg: "py-md"
+      // 16px (1rem) - maps to semanticSpacing.md - standardized for visual distinction
     }
   },
   /**
-   * Gap between icon and text
+   * Gap between icon and text by size
+   * Scales with button size for visual consistency
    */
-  gap: "gap-sm",
-  // 8px (0.5rem) - maps to semanticSpacing.sm
+  gap: {
+    sm: "gap-xs",
+    // 4px (0.25rem) - smaller gap for small buttons
+    md: "gap-sm",
+    // 8px (0.5rem) - medium gap for medium buttons
+    lg: "gap-md"
+    // 16px (1rem) - larger gap for large buttons
+  },
   /**
    * Border radius for all button sizes
+   * Consistent radius across sizes for visual harmony
+   *
+   * @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
+   * @rule References componentRadius.button.md (6px / 0.375rem) from Radius Authority
+   * @see docs/architecture/RADIUS_AUTHORITY_CONTRACT.md
    */
   radius: "rounded-md",
-  // 6px (0.375rem) - maps to borderRadius.md
+  // References componentRadius.button.md (6px / 0.375rem) - Radius Authority compliant
   /**
-   * Icon size within buttons
+   * Icon size within buttons by button size
+   * Scales proportionally with button size for visual balance
    */
-  iconSize: "size-4",
-  // 16px (1rem) - maps to spacing[4]
+  iconSize: {
+    sm: "size-3.5",
+    // 14px (0.875rem) - smaller icon for small buttons
+    md: "size-4",
+    // 16px (1rem) - medium icon for medium buttons
+    lg: "size-5",
+    // 20px (1.25rem) - larger icon for large buttons
+    icon: "size-4"
+    // 16px (1rem) - medium icon for icon-only buttons
+  },
   /**
    * Width tokens
    */
@@ -511,15 +678,19 @@ var BUTTON_TOKENS = {
   },
   /**
    * Font sizes by button size
-   * Maps to foundation typography fontSize tokens
+   * References foundation typography fontSize tokens from Typography Authority
+   *
+   * @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
+   * @rule All fontSize values reference Typography Authority tokens
+   * @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
    */
   fontSize: {
     sm: "text-xs",
-    // Maps to fontSize.xs[0]
+    // References fontSize.xs[0] from Typography Authority (~12px)
     md: "text-sm",
-    // Maps to fontSize.sm[0]
-    lg: "text-sm"
-    // Maps to fontSize.sm[0]
+    // References fontSize.sm[0] from Typography Authority (~14px)
+    lg: "text-base"
+    // References fontSize.base[0] from Typography Authority (~16px)
   },
   /**
    * Shadow tokens by variant
@@ -534,50 +705,137 @@ var BUTTON_TOKENS = {
   /**
    * Color tokens for button variants
    * Uses semantic color tokens that map to CSS variables
+   *
+   * State tokens (hover, active, disabled) use CSS variables from State Matrix.
+   * All states are injected via updateStateMatrixFromTokens() and consumed via arbitrary values.
+   * States react to Color Authority changes automatically through State Matrix.
+   *
+   * Interaction Authority Rules:
+   * - Hover (Priority 4): hover: prefix - ONLY when !disabled && !loading && pointer-events:auto
+   * - Active (Priority 3): active: prefix - ONLY when !disabled && !loading && mousedown
+   * - Focus (Priority 5): focus-visible: prefix - ONLY when !disabled && keyboard navigation
+   * - Disabled (Priority 1): disabled: prefix - Blocks ALL interactions
+   * - Loading (Priority 2): loading: prefix - Blocks hover/active (when implemented)
+   * - Base (Priority 6): No prefix - Default state, pointer-events: auto
+   *
+   * @enforcement TUNG_STATE_AUTHORITY_FOUNDATION_LOCK
+   * @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
+   * @rule States use CSS variables, not Tailwind variants
+   * @rule All state variables follow pattern: --{component}-{variant}-{state}-{property}
+   * @rule Visual states (colors) are SEPARATE from interaction states (pointer-events)
+   * @rule Hover MUST work with real mouse cursor, NOT just DevTools force state
+   * @rule Active MUST activate only on mousedown, NOT on hover
+   * @rule Focus MUST activate only on keyboard navigation, NOT on mouse click
+   *
+   * @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
    */
   variant: {
     primary: {
-      background: "bg-primary",
-      // Primary background using CSS var
+      background: "bg-[hsl(var(--button-primary-base-bg))]",
+      // Primary base background - CSS variable from State Matrix
       text: "text-primary-foreground",
       // Primary text using CSS var
-      hover: "hover:bg-primary/90"
-      // Primary hover using CSS var
+      hover: "hover:bg-[hsl(var(--button-primary-hover-bg))]",
+      // Primary hover - CSS variable from State Matrix (Priority 4: blocked by disabled/loading)
+      active: "active:bg-[hsl(var(--button-primary-active-bg))]",
+      // Primary active - CSS variable from State Matrix (Priority 3: blocked by disabled/loading, priority over hover)
+      focus: "focus-visible:bg-[hsl(var(--button-primary-focus-bg))]",
+      // Primary focus - CSS variable from State Matrix (Priority 5: keyboard navigation only)
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-primary-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix (Priority 1: blocks all)
+        text: "disabled:text-[hsl(var(--button-primary-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
+      },
+      loading: "bg-[hsl(var(--button-primary-loading-bg))]"
+      // Primary loading - CSS variable from State Matrix (Priority 2: blocks hover/active, used with aria-busy/data-loading when implemented)
     },
     secondary: {
       background: "bg-secondary",
       // Secondary background using CSS var
       text: "text-secondary-foreground",
       // Secondary text using CSS var
-      hover: "hover:bg-secondary/80"
-      // Secondary hover using CSS var
+      hover: "hover:bg-[hsl(var(--button-secondary-hover-bg))]",
+      // Secondary hover - CSS variable from State Matrix
+      active: "active:bg-[hsl(var(--button-secondary-active-bg))]",
+      // Secondary active - CSS variable from State Matrix
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-secondary-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-secondary-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
+      }
     },
     accent: {
       background: "bg-accent",
       // Accent background using CSS var
       text: "text-accent-foreground",
       // Accent text using CSS var
-      hover: "hover:bg-accent/90"
-      // Accent hover using CSS var
+      hover: "hover:bg-[hsl(var(--button-accent-hover-bg))]",
+      // Accent hover - CSS variable from State Matrix
+      active: "active:bg-[hsl(var(--button-accent-active-bg))]",
+      // Accent active - CSS variable from State Matrix
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-accent-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-accent-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
+      }
     },
     outline: {
       border: "border border-input",
       // Input border using CSS var
       background: "bg-background",
       // Background using CSS var
+      text: "text-foreground",
+      // Foreground text using CSS var
       hover: {
-        background: "hover:bg-accent",
-        // Accent hover using CSS var
-        text: "hover:text-accent-foreground"
-        // Accent text using CSS var
+        background: "hover:bg-[hsl(var(--button-outline-hover-bg))]",
+        // Outline hover background - CSS variable from State Matrix
+        text: "hover:text-[hsl(var(--button-outline-hover-text))]",
+        // Outline hover text - CSS variable from State Matrix
+        border: "hover:border-[hsl(var(--button-outline-hover-border))]"
+        // Outline hover border - CSS variable from State Matrix
+      },
+      active: {
+        background: "active:bg-[hsl(var(--button-outline-active-bg))]",
+        // Outline active background - CSS variable from State Matrix
+        text: "active:text-[hsl(var(--button-outline-active-text))]",
+        // Outline active text - CSS variable from State Matrix
+        border: "active:border-[hsl(var(--button-outline-active-border))]"
+        // Outline active border - CSS variable from State Matrix
+      },
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-outline-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-outline-disabled-text))]",
+        // Disabled text - CSS variable from State Matrix
+        border: "disabled:border-[hsl(var(--button-outline-disabled-border))]"
+        // Disabled border - CSS variable from State Matrix
       }
     },
     ghost: {
+      background: "bg-transparent",
+      // Transparent background
+      text: "text-foreground",
+      // Foreground text using CSS var
       hover: {
-        background: "hover:bg-accent",
-        // Accent hover using CSS var
-        text: "hover:text-accent-foreground"
-        // Accent text using CSS var
+        background: "hover:bg-[hsl(var(--button-ghost-hover-bg))]",
+        // Ghost hover background - CSS variable from State Matrix
+        text: "hover:text-[hsl(var(--button-ghost-hover-text))]"
+        // Ghost hover text - CSS variable from State Matrix
+      },
+      active: {
+        background: "active:bg-[hsl(var(--button-ghost-active-bg))]",
+        // Ghost active background - CSS variable from State Matrix
+        text: "active:text-[hsl(var(--button-ghost-active-text))]"
+        // Ghost active text - CSS variable from State Matrix
+      },
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-ghost-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-ghost-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
       }
     },
     destructive: {
@@ -585,16 +843,94 @@ var BUTTON_TOKENS = {
       // Destructive background using CSS var
       text: "text-destructive-foreground",
       // Destructive text using CSS var
-      hover: "hover:bg-destructive/90"
-      // Destructive hover using CSS var
+      hover: "hover:bg-[hsl(var(--button-destructive-hover-bg))]",
+      // Destructive hover - CSS variable from State Matrix
+      active: "active:bg-[hsl(var(--button-destructive-active-bg))]",
+      // Destructive active - CSS variable from State Matrix
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-destructive-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-destructive-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
+      }
     }
   },
   /**
    * Transition tokens
+   * References Motion Authority tokens for consistent motion behavior
+   *
+   * @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
+   * @rule Uses MOTION_TOKENS.transitionPreset.colors from Motion Authority
+   * @rule Motion transitions MUST use canonical motion tokens only
+   * @see docs/architecture/MOTION_AUTHORITY_CONTRACT.md
    */
   transition: {
-    colors: "transition-colors"
-    // Color transition using motion tokens
+    colors: MOTION_TOKENS.transitionPreset.colors
+    // "transition-colors duration-normal ease-out" - Motion Authority compliant
+  },
+  /**
+   * Global state tokens
+   * Shared state tokens that apply across all variants
+   * Variant-specific states are defined in variant.*.active and variant.*.disabled
+   *
+   * @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
+   * @rule All interaction states MUST follow Interaction Authority Contract
+   * @rule State priority: disabled > loading > active > hover > focus-visible > base
+   * @rule Visual states (colors) are SEPARATE from interaction states (pointer-events, cursor)
+   * @rule All states MUST be browser-native (CSS pseudo-classes), NOT JavaScript-managed
+   */
+  state: {
+    /**
+     * Disabled state tokens
+     * Global disabled state tokens (variant-specific overrides in variant.*.disabled)
+     *
+     * Interaction Authority Rules:
+     * - Priority: 1 (Highest) - Blocks ALL interactions
+     * - MUST block hover, active, and focus states
+     * - MUST use disabled: prefix (never in base state)
+     * - Base state MUST have pointer-events: auto (default) for hover to work
+     *
+     * @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
+     * @enforcement TUNG_BUTTON_INTERACTION_FIX
+     * @rule Interaction Authority: pointer-events is NOT a visual token
+     * @rule pointer-events-none MUST use disabled: prefix (never in base state)
+     * @rule Base state MUST have pointer-events: auto (default) for hover to work
+     * @rule These tokens are applied in base but only activate when element is disabled
+     * @rule Hover is FORBIDDEN when disabled={true}
+     * @rule Active is FORBIDDEN when disabled={true}
+     * @rule Focus is FORBIDDEN when disabled={true} (for interactions)
+     *
+     * @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
+     */
+    disabled: {
+      cursor: "disabled:cursor-not-allowed",
+      // Disabled cursor style (only applies when disabled)
+      pointerEvents: "disabled:pointer-events-none"
+      // Disable pointer events (only applies when disabled)
+    },
+    /**
+     * Focus state tokens
+     * Focus ring for keyboard navigation
+     *
+     * Interaction Authority Rules:
+     * - Priority: 5 - Lower than active and hover
+     * - MUST activate only on keyboard navigation (focus-visible: prefix)
+     * - MUST NOT activate on mouse click (use :focus-visible, not :focus)
+     * - MUST be blocked by disabled state
+     *
+     * @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
+     * @rule Focus MUST use focus-visible: prefix (keyboard navigation only)
+     * @rule Focus MUST be blocked when disabled={true}
+     * @rule Focus MUST NOT activate on mouse click
+     *
+     * @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
+     */
+    focus: {
+      ring: "focus-visible:ring-1 focus-visible:ring-ring",
+      // Focus ring using semantic ring color
+      outline: "focus-visible:outline-none"
+      // Remove default outline (replaced by ring)
+    }
   }
 };
 
@@ -682,6 +1018,68 @@ var CARD_TOKENS = {
   }
 };
 
+// src/tokens/components/artist.ts
+var ARTIST_TOKENS = {
+  /**
+   * Image container tokens
+   * Layout classes for image container wrapper
+   */
+  image: {
+    /**
+     * Container layout tokens
+     * Positioning and sizing for image container
+     */
+    container: {
+      /**
+       * Base container layout
+       * Relative positioning, full width, overflow hidden
+       * Uses Tailwind layout utilities (allowed per architecture)
+       */
+      layout: "relative w-full overflow-hidden"
+    },
+    /**
+     * Image sizing tokens
+     * Full width and height for images
+     */
+    sizing: {
+      /**
+       * Full size image
+       * Uses Tailwind sizing utilities (allowed per architecture)
+       */
+      full: "h-full w-full"
+    },
+    /**
+     * Placeholder container tokens
+     * Layout for placeholder icon container when no image is provided
+     */
+    placeholder: {
+      /**
+       * Placeholder container layout
+       * Flex centering for placeholder icon
+       * Uses Tailwind layout utilities (allowed per architecture)
+       */
+      container: "flex h-full w-full items-center justify-center"
+    }
+  },
+  /**
+   * Footer border tokens
+   * Border styling for card footer separator
+   */
+  footer: {
+    /**
+     * Footer border tokens
+     * Top border separator for footer section
+     */
+    border: {
+      /**
+       * Footer border top
+       * Uses semantic border color token
+       */
+      top: "border-t border-border"
+    }
+  }
+};
+
 // src/tokens/spacing.ts
 var spacing = {
   // Zero spacing
@@ -944,101 +1342,6 @@ var tailwindSpacingConfig = {
 
 // src/tokens/components/data.ts
 var DATA_TOKENS = {
-  /**
-   * Table Component Tokens
-   */
-  table: {
-    /**
-     * Table row heights by size
-     * Maps to Tailwind height utilities
-     */
-    rowHeight: {
-      sm: "h-8",
-      // 32px (2rem) - compact rows
-      md: "h-10",
-      // 40px (2.5rem) - default rows
-      lg: "h-12"
-      // 48px (3rem) - spacious rows
-    },
-    /**
-     * Table cell and header padding by size
-     * Maps to semantic spacing tokens
-     */
-    padding: {
-      cell: {
-        sm: "p-xs",
-        // 4px (0.25rem) - maps to semanticSpacing.xs
-        md: "p-sm",
-        // 8px (0.5rem) - maps to semanticSpacing.sm
-        lg: "p-md"
-        // 16px (1rem) - maps to semanticSpacing.md
-      },
-      header: {
-        sm: "px-xs py-sm",
-        // 4px horizontal, 8px vertical
-        md: "px-sm py-md",
-        // 8px horizontal, 16px vertical
-        lg: "px-md py-lg"
-        // 16px horizontal, 24px vertical
-      }
-    },
-    /**
-     * Gap between table cells (horizontal spacing)
-     */
-    gap: {
-      sm: "gap-xs",
-      // 4px (0.25rem) - maps to semanticSpacing.xs
-      md: "gap-sm"
-      // 8px (0.5rem) - maps to semanticSpacing.sm
-    },
-    /**
-     * Border radius for table
-     */
-    radius: {
-      default: "rounded-md"
-      // 6px (0.375rem) - maps to borderRadius.md
-    },
-    /**
-     * Shadow tokens for table
-     * Maps to foundation elevation shadow tokens
-     */
-    shadow: {
-      none: "shadow-none",
-      // No shadow
-      subtle: "shadow-sm"
-      // Maps to elevationShadows.sm
-    },
-    /**
-     * Typography tokens for table headers and cells
-     * Maps to foundation typography fontSize tokens
-     */
-    typography: {
-      header: {
-        fontSize: "text-sm",
-        // Maps to fontSize.sm[0]
-        fontWeight: "font-semibold"
-        // Maps to fontWeight.semibold
-      },
-      cell: {
-        fontSize: "text-sm",
-        // Maps to fontSize.sm[0]
-        fontWeight: "font-normal"
-        // Maps to fontWeight.normal
-      }
-    },
-    /**
-     * Color tokens for table states
-     * Uses semantic color tokens
-     */
-    colors: {
-      border: "border-border",
-      // Border color
-      rowHover: "hover:bg-muted/50",
-      // Row hover background
-      rowSelected: "bg-muted"
-      // Selected row background
-    }
-  },
   /**
    * Skeleton Component Tokens
    */
@@ -1104,97 +1407,6 @@ var DATA_TOKENS = {
       inline: "inline-block"
       // Inline block display
     }
-  },
-  /**
-   * EmptyState Component Tokens
-   */
-  emptyState: {
-    /**
-     * Spacing tokens for EmptyState
-     * Maps to semantic spacing tokens
-     */
-    spacing: {
-      gap: "gap-md",
-      // 16px (1rem) - gap between elements - maps to semanticSpacing.md
-      padding: "p-lg"
-      // 24px (1.5rem) - container padding - maps to semanticSpacing.lg
-    },
-    /**
-     * Border radius for EmptyState container
-     */
-    radius: {
-      default: "rounded-xl"
-      // 12px (0.75rem) - maps to borderRadius.xl
-    },
-    /**
-     * Icon sizes by variant
-     * Maps to Tailwind size utilities
-     */
-    iconSize: {
-      sm: "size-8",
-      // 32px (2rem)
-      md: "size-12",
-      // 48px (3rem)
-      lg: "size-16"
-      // 64px (4rem)
-    },
-    /**
-     * Typography tokens for EmptyState
-     * Maps to foundation typography tokens
-     */
-    typography: {
-      title: {
-        fontSize: "text-lg",
-        // Maps to fontSize.lg[0]
-        fontWeight: "font-semibold"
-        // Maps to fontWeight.semibold
-      },
-      description: {
-        fontSize: "text-sm",
-        // Maps to fontSize.sm[0]
-        fontWeight: "font-normal"
-        // Maps to fontWeight.normal
-      }
-    }
-  },
-  /**
-   * DataList Component Tokens
-   */
-  dataList: {
-    /**
-     * Spacing tokens for DataList
-     * Maps to semantic spacing tokens
-     */
-    spacing: {
-      gap: "gap-md",
-      // 16px (1rem) - gap between items - maps to semanticSpacing.md
-      padding: "p-md"
-      // 16px (1rem) - container padding - maps to semanticSpacing.md
-    },
-    /**
-     * Label width tokens (for desktop horizontal layout)
-     * Maps to Tailwind width utilities
-     */
-    labelWidth: {
-      sm: "w-24",
-      // 96px (6rem) - small label width
-      md: "w-32",
-      // 128px (8rem) - default label width
-      lg: "w-40"
-      // 160px (10rem) - large label width
-    },
-    /**
-     * Row padding tokens
-     * Maps to semantic spacing tokens
-     */
-    rowPadding: {
-      sm: "py-xs",
-      // 4px (0.25rem) - maps to semanticSpacing.xs
-      md: "py-sm",
-      // 8px (0.5rem) - maps to semanticSpacing.sm
-      lg: "py-md"
-      // 16px (1rem) - maps to semanticSpacing.md
-    }
   }
 };
 
@@ -1254,139 +1466,6 @@ var ICON_TOKENS = {
   }
 };
 
-// src/tokens/components/motion.ts
-var MOTION_TOKENS = {
-  /**
-   * Transition property tokens
-   * Maps to Tailwind transition utilities
-   */
-  transition: {
-    all: "transition-all",
-    // All properties
-    colors: "transition-colors",
-    // Color properties only
-    opacity: "transition-opacity",
-    // Opacity only
-    transform: "transition-transform",
-    // Transform only
-    shadow: "transition-shadow",
-    // Box shadow only
-    none: "transition-none"
-    // No transition
-  },
-  /**
-   * Duration tokens
-   * Maps to foundation motion duration tokens via Tailwind
-   */
-  duration: {
-    instant: "duration-0",
-    // 0ms
-    fast: "duration-fast",
-    // 150ms - maps to motion.durations.fast
-    normal: "duration-normal",
-    // 300ms - maps to motion.durations.normal
-    slow: "duration-slow",
-    // 500ms - maps to motion.durations.slow
-    slower: "duration-slower",
-    // 700ms - maps to motion.durations.slower
-    slowest: "duration-slowest",
-    // 1000ms - maps to motion.durations.slowest
-    // Granular durations
-    "75": "duration-75",
-    // 75ms
-    "100": "duration-100",
-    // 100ms
-    "200": "duration-200",
-    // 200ms
-    "250": "duration-250",
-    // 250ms
-    "300": "duration-300",
-    // 300ms
-    "400": "duration-400",
-    // 400ms
-    "500": "duration-500",
-    // 500ms
-    "600": "duration-600",
-    // 600ms
-    "700": "duration-700",
-    // 700ms
-    "800": "duration-800",
-    // 800ms
-    "1000": "duration-1000"
-    // 1000ms
-  },
-  /**
-   * Easing tokens
-   * Maps to foundation motion easing tokens via Tailwind
-   */
-  easing: {
-    linear: "ease-linear",
-    // Linear easing
-    in: "ease-in",
-    // Ease in
-    out: "ease-out",
-    // Ease out (recommended for most UI)
-    "in-out": "ease-in-out",
-    // Ease in-out
-    bounce: "ease-bounce",
-    // Bounce easing
-    elastic: "ease-elastic"
-    // Elastic easing
-  },
-  /**
-   * Pre-configured transition tokens
-   * Combines duration and easing for common use cases
-   */
-  transitionPreset: {
-    fast: "transition-all duration-fast ease-out",
-    // Fast transition
-    normal: "transition-all duration-normal ease-in-out",
-    // Normal transition (default)
-    slow: "transition-all duration-slow ease-in-out",
-    // Slow transition
-    colors: "transition-colors duration-normal ease-out",
-    // Color transitions (common)
-    transform: "transition-transform duration-normal ease-out",
-    // Transform transitions
-    opacity: "transition-opacity duration-fast ease-out"
-    // Opacity transitions
-  },
-  /**
-   * Animation tokens
-   * Maps to foundation motion animation tokens via Tailwind
-   */
-  animation: {
-    none: "animate-none",
-    // No animation
-    spin: "animate-spin",
-    // Spin animation
-    pulse: "animate-pulse",
-    // Pulse animation
-    bounce: "animate-bounce",
-    // Bounce animation
-    ping: "animate-ping",
-    // Ping animation
-    shake: "animate-shake",
-    // Shake animation
-    fadeIn: "animate-fadeIn",
-    // Fade in
-    fadeOut: "animate-fadeOut",
-    // Fade out
-    slideInUp: "animate-slideInUp",
-    // Slide in from bottom
-    slideInDown: "animate-slideInDown",
-    // Slide in from top
-    slideInLeft: "animate-slideInLeft",
-    // Slide in from right
-    slideInRight: "animate-slideInRight",
-    // Slide in from left
-    scaleIn: "animate-scaleIn",
-    // Scale in
-    scaleOut: "animate-scaleOut"
-    // Scale out
-  }
-};
-
 // src/tokens/components/domain.ts
 var DOMAIN_TOKENS = {
   /**
@@ -1539,7 +1618,7 @@ var DOMAIN_TOKENS = {
   },
   /**
    * Image tokens for card media
-   * Defines aspect ratio, radius, and overlay styles
+   * Defines aspect ratio, radius, overlay styles, and placeholder gradients
    */
   image: {
     /**
@@ -1562,6 +1641,40 @@ var DOMAIN_TOKENS = {
     overlay: {
       gradient: "bg-gradient-to-t from-black/60 via-transparent to-transparent"
       // Gradient overlay for image hover states
+    },
+    /**
+     * Placeholder gradient tokens for image placeholders
+     * Used when no image URL is provided
+     */
+    placeholder: {
+      gradient: "bg-gradient-to-br from-muted to-muted/50"
+      // Placeholder gradient background
+    }
+  },
+  /**
+   * Text tokens for card text elements
+   * Defines hover states and line clamping for titles and descriptions
+   */
+  text: {
+    /**
+     * Hover state tokens for text elements
+     * Used for interactive text elements like titles
+     */
+    hover: {
+      primary: "group-hover:text-primary"
+      // Hover state for primary text color
+    },
+    /**
+     * Line clamp tokens for text truncation
+     * Used for limiting text to specific number of lines
+     */
+    lineClamp: {
+      one: "line-clamp-1",
+      // Single line clamp
+      two: "line-clamp-2",
+      // Two line clamp
+      three: "line-clamp-3"
+      // Three line clamp
     }
   },
   /**
@@ -1784,6 +1897,94 @@ var DOMAIN_TOKENS = {
       height: "h-6"
       // References spacing[6] (1.5rem / 24px) via Tailwind
     }
+  },
+  /**
+   * CTA (Call-to-Action) button tokens for domain card components
+   * Provides PromoCard-specific CTA button styling tokens
+   * These tokens are semantically owned by domain card components, not by the Button component
+   * References foundation tokens (spacing, typography, radius, shadows, motion) for consistency
+   */
+  cta: {
+    /**
+     * CTA button styling tokens
+     * Used by PromoCard and other domain card components for CTA button elements
+     */
+    button: {
+      /**
+       * Button heights by size
+       * Maps to Tailwind height utilities: h-8, h-9
+       */
+      height: {
+        sm: "h-8",
+        // 32px (2rem) - compact size
+        md: "h-9"
+        // 36px (2.25rem) - default size
+      },
+      /**
+       * Button padding by size
+       * Horizontal and vertical padding values
+       * References semanticSpacing tokens
+       */
+      padding: {
+        horizontal: {
+          sm: "px-sm",
+          // 8px (0.5rem) - maps to semanticSpacing.sm
+          md: "px-md"
+          // 16px (1rem) - maps to semanticSpacing.md
+        },
+        vertical: {
+          sm: "py-xs"
+          // 4px (0.25rem) - maps to semanticSpacing.xs
+        }
+      },
+      /**
+       * Border radius for CTA buttons
+       * References borderRadius.md (6px / 0.375rem)
+       * Using Tailwind class "rounded-md" which maps to borderRadius.md
+       */
+      radius: "rounded-md",
+      // References borderRadius.md via Tailwind
+      /**
+       * Font sizes by button size
+       * Maps to foundation typography fontSize tokens
+       */
+      fontSize: {
+        sm: "text-xs",
+        // Maps to fontSize.xs[0]
+        md: "text-sm"
+        // Maps to fontSize.sm[0]
+      },
+      /**
+       * Shadow tokens for CTA buttons
+       * Maps to foundation elevation shadow tokens
+       */
+      shadow: {
+        primary: "shadow"
+        // Maps to elevationShadows.xs (primary variant uses shadow)
+      },
+      /**
+       * Color tokens for CTA button variants
+       * Uses semantic color tokens that map to CSS variables
+       */
+      variant: {
+        primary: {
+          background: "bg-primary",
+          // Primary background using CSS var
+          text: "text-primary-foreground",
+          // Primary text using CSS var
+          hover: "hover:bg-primary/90"
+          // Primary hover using CSS var
+        }
+      },
+      /**
+       * Transition tokens for CTA buttons
+       * References MOTION_TOKENS for transitions
+       */
+      transition: {
+        colors: "transition-colors"
+        // Color transition using motion tokens
+      }
+    }
   }
 };
 
@@ -1887,40 +2088,6 @@ var INPUT_TOKENS = {
     text: "text-[hsl(var(--foreground))]"
     // File input text color using CSS var
   },
-  /**
-   * Select listbox tokens
-   * Styling for select dropdown container
-   */
-  selectListbox: {
-    border: "border border-[hsl(var(--border))]",
-    // Border color using CSS var
-    background: "bg-[hsl(var(--popover))]",
-    // Background using CSS var
-    text: "text-[hsl(var(--popover-foreground))]",
-    // Text color using CSS var
-    radius: "rounded-md",
-    // Radius token (6px)
-    shadow: "shadow-md"
-    // Shadow token
-  },
-  /**
-   * Select option tokens
-   * Styling for select option items
-   */
-  selectOption: {
-    focus: {
-      background: "focus:bg-[hsl(var(--accent))]",
-      // Focus background using CSS var
-      text: "focus:text-[hsl(var(--accent-foreground))]"
-      // Focus text using CSS var
-    },
-    selected: {
-      background: "bg-[hsl(var(--accent))]",
-      // Selected background using CSS var
-      text: "text-[hsl(var(--accent-foreground))]"
-      // Selected text using CSS var
-    }
-  },
   /**
    * Variant-based tokens
    * Border, background, and text colors for different variants
@@ -2908,8 +3075,16 @@ var TEXT_TOKENS = {
     // Maps to fontSize.base[0]
     lg: "text-lg",
     // Maps to fontSize.lg[0]
-    xl: "text-xl"
+    xl: "text-xl",
     // Maps to fontSize.xl[0]
+    "2xl": "text-2xl",
+    // Maps to fontSize.2xl[0]
+    "3xl": "text-3xl",
+    // Maps to fontSize.3xl[0]
+    "4xl": "text-4xl",
+    // Maps to fontSize.4xl[0]
+    "5xl": "text-5xl"
+    // Maps to fontSize.5xl[0]
   },
   /**
    * Font weights by weight variant
@@ -2934,6 +3109,8 @@ var TEXT_TOKENS = {
     // Maps to lineHeight.none
     tight: "leading-tight",
     // Maps to lineHeight.tight
+    snug: "leading-snug",
+    // Maps to lineHeight.snug
     normal: "leading-normal",
     // Maps to lineHeight.normal
     relaxed: "leading-relaxed",
@@ -3457,9 +3634,9 @@ var TOAST_TOKENS = {
       // Default opacity (hidden)
       groupHover: "group-hover:opacity-100",
       // Visible on group hover
-      focus: "focus:opacity-100",
+      focus: "focus-visible:opacity-100",
       // Visible on focus
-      focusRing: "focus:outline-none focus:ring-1"
+      focusRing: "focus-visible:outline-none focus-visible:ring-1"
       // Focus ring styling
     }
   }
@@ -4201,19 +4378,27 @@ var DROPDOWN_TOKENS = {
       // 256px
     }
   },
+  /**
+   * Width tokens
+   * Common width utilities
+   */
+  width: {
+    full: "w-full"
+    // Full width (100%)
+  },
   /**
    * Item tokens by size
    * Individual menu item
    */
   item: {
     background: {
-      focus: "focus:bg-[hsl(var(--accent))]",
+      focus: "focus-visible:bg-[hsl(var(--accent))]",
       // Focus background using CSS var
       selected: "bg-[hsl(var(--accent))]"
       // Selected background using CSS var
     },
     text: {
-      focus: "focus:text-[hsl(var(--accent-foreground))]",
+      focus: "focus-visible:text-[hsl(var(--accent-foreground))]",
       // Focus text using CSS var
       selected: "text-[hsl(var(--accent-foreground))]"
       // Selected text using CSS var
@@ -4471,9 +4656,9 @@ var SELECT_TOKENS = {
       // 8px (0.5rem) from left
     },
     focus: {
-      background: "focus:bg-[hsl(var(--accent))]",
+      background: "focus-visible:bg-[hsl(var(--accent))]",
       // Focus background using CSS var
-      text: "focus:text-[hsl(var(--accent-foreground))]"
+      text: "focus-visible:text-[hsl(var(--accent-foreground))]"
       // Focus text using CSS var
     },
     selected: {
@@ -5063,54 +5248,54 @@ var transitions = {
 var keyframes = {
   // Fade animations
   fadeIn: {
-    from: { opacity: 0 },
-    to: { opacity: 1 }
+    from: { opacity: "0" },
+    to: { opacity: "1" }
   },
   fadeOut: {
-    from: { opacity: 1 },
-    to: { opacity: 0 }
+    from: { opacity: "1" },
+    to: { opacity: "0" }
   },
   // Slide animations
   slideInUp: {
-    from: { transform: "translateY(100%)", opacity: 0 },
-    to: { transform: "translateY(0)", opacity: 1 }
+    from: { transform: "translateY(100%)", opacity: "0" },
+    to: { transform: "translateY(0)", opacity: "1" }
   },
   slideInDown: {
-    from: { transform: "translateY(-100%)", opacity: 0 },
-    to: { transform: "translateY(0)", opacity: 1 }
+    from: { transform: "translateY(-100%)", opacity: "0" },
+    to: { transform: "translateY(0)", opacity: "1" }
   },
   slideInLeft: {
-    from: { transform: "translateX(-100%)", opacity: 0 },
-    to: { transform: "translateX(0)", opacity: 1 }
+    from: { transform: "translateX(-100%)", opacity: "0" },
+    to: { transform: "translateX(0)", opacity: "1" }
   },
   slideInRight: {
-    from: { transform: "translateX(100%)", opacity: 0 },
-    to: { transform: "translateX(0)", opacity: 1 }
+    from: { transform: "translateX(100%)", opacity: "0" },
+    to: { transform: "translateX(0)", opacity: "1" }
   },
   slideOutUp: {
-    from: { transform: "translateY(0)", opacity: 1 },
-    to: { transform: "translateY(-100%)", opacity: 0 }
+    from: { transform: "translateY(0)", opacity: "1" },
+    to: { transform: "translateY(-100%)", opacity: "0" }
   },
   slideOutDown: {
-    from: { transform: "translateY(0)", opacity: 1 },
-    to: { transform: "translateY(100%)", opacity: 0 }
+    from: { transform: "translateY(0)", opacity: "1" },
+    to: { transform: "translateY(100%)", opacity: "0" }
   },
   slideOutLeft: {
-    from: { transform: "translateX(0)", opacity: 1 },
-    to: { transform: "translateX(-100%)", opacity: 0 }
+    from: { transform: "translateX(0)", opacity: "1" },
+    to: { transform: "translateX(-100%)", opacity: "0" }
   },
   slideOutRight: {
-    from: { transform: "translateX(0)", opacity: 1 },
-    to: { transform: "translateX(100%)", opacity: 0 }
+    from: { transform: "translateX(0)", opacity: "1" },
+    to: { transform: "translateX(100%)", opacity: "0" }
   },
   // Scale animations
   scaleIn: {
-    from: { transform: "scale(0.95)", opacity: 0 },
-    to: { transform: "scale(1)", opacity: 1 }
+    from: { transform: "scale(0.95)", opacity: "0" },
+    to: { transform: "scale(1)", opacity: "1" }
   },
   scaleOut: {
-    from: { transform: "scale(1)", opacity: 1 },
-    to: { transform: "scale(0.95)", opacity: 0 }
+    from: { transform: "scale(1)", opacity: "1" },
+    to: { transform: "scale(0.95)", opacity: "0" }
   },
   scaleUp: {
     from: { transform: "scale(1)" },
@@ -5131,8 +5316,8 @@ var keyframes = {
   },
   // Pulse and bounce
   pulse: {
-    "0%, 100%": { opacity: 1 },
-    "50%": { opacity: 0.5 }
+    "0%, 100%": { opacity: "1" },
+    "50%": { opacity: "0.5" }
   },
   bounce: {
     "0%, 100%": {
@@ -5154,7 +5339,7 @@ var keyframes = {
   ping: {
     "75%, 100%": {
       transform: "scale(2)",
-      opacity: 0
+      opacity: "0"
     }
   },
   // Accordion animations (for Radix UI)
@@ -6114,4 +6299,4 @@ var tokenSystemSummary = {
 // src/tokens/theme.ts
 var UI_COLORS = tailwindThemeColors;
 
-export { ALERT_TOKENS, BUTTON_TOKENS, CARD_TOKENS, CHECKBOX_TOKENS, DATA_TOKENS, DOMAIN_TOKENS, DROPDOWN_TOKENS, ICON_TOKENS, INPUT_TOKENS, MENU_TOKENS, MOTION_TOKENS, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, OVERLAY_TOKENS, POPOVER_TOKENS, RADIO_TOKENS, SECTION_TOKENS, SELECT_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, UI_COLORS, accentColoredShadows, accentColors, allCSSVariables, allCSSVariablesCSS, animations, baseColors, borderRadius, chartColors, colorCSSVariables, componentRadius, componentShadowMapping, cssVariableColorTokens, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, keyframes, layoutSpacing, letterSpacing, lineHeight, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, primaryColoredShadows, primaryColors, radiusCSSVariables, reducedMotion, secondaryColors, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, spacing, spacingCSSVariables, springs, surfaceColors, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, tokenSystemSummary, transitions, typographyCSSVariables };
+export { ALERT_TOKENS, ARTIST_TOKENS, BUTTON_TOKENS, CARD_TOKENS, CHECKBOX_TOKENS, DATA_TOKENS, DOMAIN_TOKENS, DROPDOWN_TOKENS, ICON_TOKENS, INPUT_TOKENS, MENU_TOKENS, MOTION_TOKENS, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, OVERLAY_TOKENS, POPOVER_TOKENS, RADIO_TOKENS, SECTION_TOKENS, SELECT_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, UI_COLORS, accentColoredShadows, accentColors, allCSSVariables, allCSSVariablesCSS, animations, baseColors, borderRadius, chartColors, colorCSSVariables, componentRadius, componentShadowMapping, cssVariableColorTokens, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, keyframes, layoutSpacing, letterSpacing, lineHeight, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, primaryColoredShadows, primaryColors, radiusCSSVariables, reducedMotion, secondaryColors, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, spacing, spacingCSSVariables, springs, surfaceColors, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, tokenSystemSummary, transitions, typographyCSSVariables };