@fastwork/xosmoz-svelte 0.0.21

package/dist/docs/foundation/Themes.svelte

@@ -0,0 +1,1048 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte'
+	import {
+		detectDarkTheme,
+		watchThemeChanges,
+	} from '../../utils/themeDetection'
+	import { calculateAPCA } from '../../utils/colorCalculations'
+	import { createClipboardHandler } from '../../utils/clipboard'
+
+	let isDarkTheme = $state(false)
+
+	let cleanupThemeWatcher: (() => void) | null = null
+
+	// Update colors based on theme
+	function updateColors() {
+		isDarkTheme = detectDarkTheme()
+	}
+
+	// Initial theme detection and watch for changes
+	if (typeof window !== 'undefined') {
+		updateColors()
+		cleanupThemeWatcher = watchThemeChanges(updateColors)
+	}
+
+	// Cleanup observer on component destroy
+	onDestroy(() => {
+		if (cleanupThemeWatcher) {
+			cleanupThemeWatcher()
+		}
+	})
+
+	// Define theme color tokens - using CSS variables for dynamic theme switching
+	const themeColors = [
+		{
+			category: 'Base Background',
+			description:
+				'Theme-agnostic surface colors that adapt to light and dark modes. Use these for page backgrounds, cards, panels, and layered surfaces.',
+			colors: [
+				{
+					name: 'bg.100',
+					token: '--xz-color-bg-100',
+					description:
+						'Primary app background - Use for main page surface',
+				},
+				{
+					name: 'bg.200',
+					token: '--xz-color-bg-200',
+					description:
+						'Secondary surface - Use for cards, modals, dropdowns',
+				},
+				{
+					name: 'bg.300',
+					token: '--xz-color-bg-300',
+					description:
+						'Tertiary surface - Use for table headers, sidebars',
+				},
+				{
+					name: 'bg.400',
+					token: '--xz-color-bg-400',
+					description:
+						'Elevated surface - Use for popovers, tooltips',
+				},
+			],
+		},
+		{
+			category: 'Base Content',
+			description:
+				'Universal text colors that maintain proper contrast across all themes. Use these for body text and supporting content.',
+			colors: [
+				{
+					name: 'content.100',
+					token: '--xz-color-content-100',
+					description:
+						'Primary text - Use for headings, body text, labels',
+				},
+				{
+					name: 'content.200',
+					token: '--xz-color-content-200',
+					description:
+						'Secondary text - Use for descriptions, helper text (60% opacity)',
+				},
+			],
+		},
+		{
+			category: 'Base Line',
+			description:
+				'Border and divider colors for creating visual separation. These adapt to theme and provide subtle to prominent boundaries.',
+			colors: [
+				{
+					name: 'line.100',
+					token: '--xz-color-line-100',
+					description:
+						'Subtle border - Use for dividers, subtle separations (10% opacity)',
+				},
+				{
+					name: 'line.200',
+					token: '--xz-color-line-200',
+					description:
+						'Standard border - Use for input fields, cards (20% opacity)',
+				},
+				{
+					name: 'line.300',
+					token: '--xz-color-line-300',
+					description:
+						'Strong border - Use for active states, emphasis (30% opacity)',
+				},
+			],
+		},
+		{
+			category: 'Primary',
+			description:
+				'Brand identity colors for primary actions, links, and key UI elements. Built from the Fastwork color scale.',
+			colors: [
+				{
+					name: 'primary.soft.100',
+					token: '--xz-color-primary-soft-100',
+					description:
+						'Subtle tint - Use for light backgrounds, tags, badges',
+				},
+				{
+					name: 'primary.soft.200',
+					token: '--xz-color-primary-soft-200',
+					description:
+						'Soft background - Use for component hover states, highlights',
+				},
+				{
+					name: 'primary.soft.300',
+					token: '--xz-color-primary-soft-300',
+					description:
+						'Soft active - Use for pressed states, selected items',
+				},
+				{
+					name: 'primary.line.100',
+					token: '--xz-color-primary-line-100',
+					description:
+						'Subtle border - Use for focus rings, decorative lines',
+				},
+				{
+					name: 'primary.line.200',
+					token: '--xz-color-primary-line-200',
+					description:
+						'Standard border - Use for outlined buttons, input focus',
+				},
+				{
+					name: 'primary.line.300',
+					token: '--xz-color-primary-line-300',
+					description:
+						'Strong border - Use for emphasis, active borders',
+				},
+				{
+					name: 'primary.bg.100',
+					token: '--xz-color-primary-bg-100',
+					description:
+						'Solid fill - Use for primary buttons, key actions',
+				},
+				{
+					name: 'primary.bg.200',
+					token: '--xz-color-primary-bg-200',
+					description: 'Solid hover - Use for button hover states',
+				},
+				{
+					name: 'primary.content.100',
+					token: '--xz-color-primary-content-100',
+					description:
+						'Primary text - Use for links, primary text elements',
+				},
+				{
+					name: 'primary.content.200',
+					token: '--xz-color-primary-content-200',
+					description:
+						'Emphasized text - Use for hovered links, strong emphasis',
+				},
+				{
+					name: 'primary.fg',
+					token: '--xz-color-primary-fg',
+					description:
+						'Text on solid - Use for text on primary.bg buttons (white)',
+				},
+			],
+		},
+		{
+			category: 'Danger',
+			description:
+				'Error states and destructive actions. Use for validation errors, delete actions, and critical alerts. Built from the red color scale.',
+			colors: [
+				{
+					name: 'danger.soft.100',
+					token: '--xz-color-danger-soft-100',
+					description:
+						'Subtle tint - Use for error backgrounds, alert panels',
+				},
+				{
+					name: 'danger.soft.200',
+					token: '--xz-color-danger-soft-200',
+					description:
+						'Soft background - Use for error component states',
+				},
+				{
+					name: 'danger.soft.300',
+					token: '--xz-color-danger-soft-300',
+					description:
+						'Soft active - Use for error hover/pressed states',
+				},
+				{
+					name: 'danger.line.100',
+					token: '--xz-color-danger-line-100',
+					description:
+						'Subtle border - Use for error decorative lines',
+				},
+				{
+					name: 'danger.line.200',
+					token: '--xz-color-danger-line-200',
+					description:
+						'Standard border - Use for error input borders',
+				},
+				{
+					name: 'danger.line.300',
+					token: '--xz-color-danger-line-300',
+					description:
+						'Strong border - Use for critical error emphasis',
+				},
+				{
+					name: 'danger.bg.100',
+					token: '--xz-color-danger-bg-100',
+					description:
+						'Solid fill - Use for delete buttons, destructive actions',
+				},
+				{
+					name: 'danger.bg.200',
+					token: '--xz-color-danger-bg-200',
+					description:
+						'Solid hover - Use for destructive button hover',
+				},
+				{
+					name: 'danger.content.100',
+					token: '--xz-color-danger-content-100',
+					description:
+						'Error text - Use for error messages, validation text',
+				},
+				{
+					name: 'danger.content.200',
+					token: '--xz-color-danger-content-200',
+					description:
+						'Emphasized error - Use for critical error emphasis',
+				},
+				{
+					name: 'danger.fg',
+					token: '--xz-color-danger-fg',
+					description:
+						'Text on solid - Use for text on danger.bg buttons (white)',
+				},
+			],
+		},
+		{
+			category: 'Success',
+			description:
+				'Success states and positive confirmations. Use for completed actions, valid inputs, and positive feedback. Built from the green color scale.',
+			colors: [
+				{
+					name: 'success.soft.100',
+					token: '--xz-color-success-soft-100',
+					description:
+						'Subtle tint - Use for success backgrounds, confirmation panels',
+				},
+				{
+					name: 'success.soft.200',
+					token: '--xz-color-success-soft-200',
+					description:
+						'Soft background - Use for success component states',
+				},
+				{
+					name: 'success.soft.300',
+					token: '--xz-color-success-soft-300',
+					description:
+						'Soft active - Use for success hover/pressed states',
+				},
+				{
+					name: 'success.line.100',
+					token: '--xz-color-success-line-100',
+					description:
+						'Subtle border - Use for success decorative lines',
+				},
+				{
+					name: 'success.line.200',
+					token: '--xz-color-success-line-200',
+					description:
+						'Standard border - Use for valid input borders',
+				},
+				{
+					name: 'success.line.300',
+					token: '--xz-color-success-line-300',
+					description: 'Strong border - Use for success emphasis',
+				},
+				{
+					name: 'success.bg.100',
+					token: '--xz-color-success-bg-100',
+					description:
+						'Solid fill - Use for success buttons, positive actions',
+				},
+				{
+					name: 'success.bg.200',
+					token: '--xz-color-success-bg-200',
+					description: 'Solid hover - Use for success button hover',
+				},
+				{
+					name: 'success.content.100',
+					token: '--xz-color-success-content-100',
+					description:
+						'Success text - Use for success messages, confirmation text',
+				},
+				{
+					name: 'success.content.200',
+					token: '--xz-color-success-content-200',
+					description:
+						'Emphasized success - Use for strong positive emphasis',
+				},
+				{
+					name: 'success.fg',
+					token: '--xz-color-success-fg',
+					description:
+						'Text on solid - Use for text on success.bg buttons (white)',
+				},
+			],
+		},
+		{
+			category: 'Warning',
+			description:
+				'Warning states and cautionary messages. Use for important alerts, potential issues, and actions requiring attention. Built from the amber color scale.',
+			colors: [
+				{
+					name: 'warning.soft.100',
+					token: '--xz-color-warning-soft-100',
+					description:
+						'Subtle tint - Use for warning backgrounds, alert panels',
+				},
+				{
+					name: 'warning.soft.200',
+					token: '--xz-color-warning-soft-200',
+					description:
+						'Soft background - Use for warning component states',
+				},
+				{
+					name: 'warning.soft.300',
+					token: '--xz-color-warning-soft-300',
+					description:
+						'Soft active - Use for warning hover/pressed states',
+				},
+				{
+					name: 'warning.line.100',
+					token: '--xz-color-warning-line-100',
+					description:
+						'Subtle border - Use for warning decorative lines',
+				},
+				{
+					name: 'warning.line.200',
+					token: '--xz-color-warning-line-200',
+					description:
+						'Standard border - Use for warning borders, caution lines',
+				},
+				{
+					name: 'warning.line.300',
+					token: '--xz-color-warning-line-300',
+					description:
+						'Strong border - Use for important warning emphasis',
+				},
+				{
+					name: 'warning.bg.100',
+					token: '--xz-color-warning-bg-100',
+					description:
+						'Solid fill - Use for warning buttons, caution actions',
+				},
+				{
+					name: 'warning.bg.200',
+					token: '--xz-color-warning-bg-200',
+					description: 'Solid hover - Use for warning button hover',
+				},
+				{
+					name: 'warning.content.100',
+					token: '--xz-color-warning-content-100',
+					description:
+						'Warning text - Use for warning messages, alert text',
+				},
+				{
+					name: 'warning.content.200',
+					token: '--xz-color-warning-content-200',
+					description:
+						'Emphasized warning - Use for critical warning emphasis',
+				},
+				{
+					name: 'warning.fg',
+					token: '--xz-color-warning-fg',
+					description:
+						'Text on solid - Use for text on warning.bg buttons (white)',
+				},
+			],
+		},
+		{
+			category: 'Info',
+			description:
+				'Informational states and neutral messages. Use for help text, tips, general information, and educational content. Built from the cyan color scale.',
+			colors: [
+				{
+					name: 'info.soft.100',
+					token: '--xz-color-info-soft-100',
+					description:
+						'Subtle tint - Use for info backgrounds, tip panels',
+				},
+				{
+					name: 'info.soft.200',
+					token: '--xz-color-info-soft-200',
+					description:
+						'Soft background - Use for info component states',
+				},
+				{
+					name: 'info.soft.300',
+					token: '--xz-color-info-soft-300',
+					description:
+						'Soft active - Use for info hover/pressed states',
+				},
+				{
+					name: 'info.line.100',
+					token: '--xz-color-info-line-100',
+					description:
+						'Subtle border - Use for info decorative lines',
+				},
+				{
+					name: 'info.line.200',
+					token: '--xz-color-info-line-200',
+					description:
+						'Standard border - Use for info borders, help lines',
+				},
+				{
+					name: 'info.line.300',
+					token: '--xz-color-info-line-300',
+					description:
+						'Strong border - Use for important info emphasis',
+				},
+				{
+					name: 'info.bg.100',
+					token: '--xz-color-info-bg-100',
+					description:
+						'Solid fill - Use for info buttons, educational actions',
+				},
+				{
+					name: 'info.bg.200',
+					token: '--xz-color-info-bg-200',
+					description: 'Solid hover - Use for info button hover',
+				},
+				{
+					name: 'info.content.100',
+					token: '--xz-color-info-content-100',
+					description: 'Info text - Use for info messages, help text',
+				},
+				{
+					name: 'info.content.200',
+					token: '--xz-color-info-content-200',
+					description:
+						'Emphasized info - Use for important info emphasis',
+				},
+				{
+					name: 'info.fg',
+					token: '--xz-color-info-fg',
+					description:
+						'Text on solid - Use for text on info.bg buttons (white)',
+				},
+			],
+		},
+	]
+
+	// Track copied state
+	let copiedVar = $state('')
+
+	// Create clipboard handler with state management
+	const copyToClipboard = createClipboardHandler(
+		() => copiedVar,
+		(val) => (copiedVar = val),
+	)
+
+	// Get computed CSS variable value
+	function getComputedValue(token: string): string {
+		if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+			const value = getComputedStyle(document.documentElement)
+				.getPropertyValue(token)
+				.trim()
+			return value || 'Not defined'
+		}
+		return ''
+	}
+
+	// Determine foreground color for contrast display based on token name
+	function getForegroundToken(tokenName: string): string | null {
+		// For bg tokens of semantic colors (primary, danger, etc.), use their fg token
+		if (tokenName.includes('-bg-')) {
+			const parts = tokenName.split('-')
+			// Extract category (e.g., 'primary', 'danger', 'success', etc.)
+			const colorIndex = parts.findIndex((p) => p === 'color') + 1
+			const category = parts[colorIndex]
+			if (category && category !== 'bg') {
+				return `--xz-color-${category}-fg`
+			}
+		}
+		// Base background tokens should use content.100 as text
+		if (tokenName.includes('-bg-')) {
+			return '--xz-color-content-100'
+		}
+		// Soft tokens can have content on them
+		if (tokenName.includes('-soft-')) {
+			const parts = tokenName.split('-')
+			const colorIndex = parts.findIndex((p) => p === 'color') + 1
+			const category = parts[colorIndex]
+			return `--xz-color-${category}-content-100`
+		}
+		return null
+	}
+
+	// Check if we should show contrast for this token
+	function shouldShowContrast(tokenName: string): boolean {
+		// Show contrast for bg tokens (they have text on them)
+		if (tokenName.includes('-bg-')) {
+			return true
+		}
+		// Show contrast for soft tokens (they can have content on them)
+		if (tokenName.includes('-soft-')) {
+			return true
+		}
+		// Don't show contrast for fg, content, line tokens
+		return false
+	}
+</script>
+
+<div class="themes-page">
+	<div class="header">
+		<h1>Theme Colors</h1>
+		<p class="lead">
+			Semantic color tokens that automatically adapt to the active theme.
+			Switch between light and dark themes using the theme icon in the
+			toolbar above. All colors use OKLCH color space for optimal color
+			management and perceptual uniformity.
+		</p>
+		<div class="theme-indicator">
+			<span class="indicator-label">Current Theme:</span>
+			<span class="indicator-badge" class:dark={isDarkTheme}>
+				{isDarkTheme ? '🌙 Dark' : '☀️ Light'}
+			</span>
+			<span class="indicator-hint">
+				Switch using the theme icon in the toolbar
+			</span>
+		</div>
+	</div>
+
+	<!-- Usage Examples -->
+	<section class="usage-section">
+		<h2>How to Use</h2>
+
+		<div class="usage-example">
+			<h3>Importing Themes</h3>
+			<div class="example-block">
+				<pre><code
+						>import &#123; lightTheme, darkTheme &#125; from '@fastwork/xosmoz-theme'
+
+// Access color values
+const primaryColor = lightTheme.colors.primary.bg[100]
+const backgroundColor = darkTheme.colors.bg[100]
+const textColor = lightTheme.colors.content[100]</code
+					></pre>
+			</div>
+		</div>
+
+		<div class="usage-example">
+			<h3>Using CSS Variables (Recommended)</h3>
+			<p class="usage-note">
+				For runtime theme switching, use CSS variables instead. They
+				automatically update when the theme changes.
+			</p>
+			<div class="example-block">
+				<pre><code
+						>/* In your CSS */
+.button &#123;
+  background: var(--xz-color-primary-bg-100);
+  color: var(--xz-color-primary-fg);
+  border: 1px solid var(--xz-color-primary-line-200);
+&#125;
+
+.card &#123;
+  background: var(--xz-color-bg-100);
+  color: var(--xz-color-content-100);
+&#125;</code
+					></pre>
+			</div>
+		</div>
+	</section>
+
+	<!-- Theme Color Categories -->
+	{#each themeColors as category, idx (idx)}
+		<section class="section">
+			<div class="category-header">
+				<h2>{category.category}</h2>
+				<p>{category.description}</p>
+			</div>
+
+			<div class="color-table">
+				<div class="table-header">
+					<div class="col-preview">Preview</div>
+					<div class="col-name">Name</div>
+					<div class="col-token">CSS Variable</div>
+					<div class="col-value">Current Value</div>
+				</div>
+
+				{#each category.colors as color, idx (idx)}
+					{@const currentValue = getComputedValue(color.token)}
+					{@const hasAlpha =
+						currentValue.includes('rgba') ||
+						currentValue.includes('hsla') ||
+						currentValue.includes('transparent') ||
+						currentValue.includes('color-mix') ||
+						(currentValue.includes('oklch') &&
+							currentValue.match(/\/\s*0?\.\d+/))}
+					{@const fgToken = getForegroundToken(color.token)}
+					{@const showContrast =
+						shouldShowContrast(color.token) &&
+						currentValue !== 'Not defined'}
+					{@const bgValue = currentValue}
+					{@const fgValue = fgToken ? getComputedValue(fgToken) : ''}
+					{@const contrastRatio =
+						showContrast &&
+						fgValue &&
+						bgValue !== 'Not defined' &&
+						fgValue !== 'Not defined'
+							? calculateAPCA(fgValue, bgValue)
+							: 0}
+					<div class="table-row">
+						<div class="col-preview">
+							<div
+								class="color-swatch"
+								class:has-alpha={hasAlpha &&
+									!color.token.includes('-line-')}
+								class:is-line={color.token.includes('-line-')}
+								style={color.token.includes('-line-')
+									? `--line-color: var(${color.token});`
+									: hasAlpha
+										? `--alpha-color: var(${color.token}); --text-color: var(${fgToken || '--xz-color-content-100'});`
+										: fgToken
+											? `background: var(${color.token}); color: var(${fgToken});`
+											: `background: var(${color.token});`}
+								title="var({color.token})"
+							>
+								{#if !color.token.includes('-fg') && !color.token.includes('content') && !color.token.includes('-line-')}
+									<div
+										class="swatch-label"
+										class:show-contrast={showContrast &&
+											contrastRatio > 0}
+										style={hasAlpha && fgToken
+											? 'color: var(--text-color);'
+											: ''}
+									>
+										A
+										{#if showContrast && contrastRatio > 0}
+											<span class="contrast-ratio"
+												>{contrastRatio}</span
+											>
+										{/if}
+									</div>
+								{/if}
+							</div>
+						</div>
+						<div class="col-name">
+							<code>{color.name}</code>
+						</div>
+						<div class="col-token">
+							<button
+								class="token-button"
+								class:copied={copiedVar === color.token}
+								onclick={() => copyToClipboard(color.token)}
+								title="Click to copy CSS variable"
+							>
+								{color.token}
+							</button>
+						</div>
+						<div class="col-value">
+							<button
+								class="value-button"
+								class:copied={copiedVar === currentValue}
+								onclick={() => copyToClipboard(currentValue)}
+								title="Click to copy {currentValue.includes(
+									'oklch',
+								)
+									? 'OKLCH'
+									: currentValue.includes('color-mix')
+										? 'color-mix()'
+										: ''} value"
+							>
+								{currentValue}
+							</button>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</section>
+	{/each}
+</div>
+
+<style>
+	.themes-page {
+		font-family: var(--xz-font-family-primary, system-ui);
+		padding: 2rem;
+		max-width: 100%;
+		background: var(--xz-color-bg-100);
+		color: var(--xz-color-content-100);
+		min-height: 100vh;
+		overflow: hidden;
+	}
+
+	.header {
+		margin-bottom: 3rem;
+	}
+
+	h1 {
+		font-size: 2.5rem;
+		font-weight: 700;
+		margin-bottom: 0.75rem;
+		color: var(--xz-color-content-100);
+	}
+
+	.lead {
+		font-size: 1.125rem;
+		color: var(--xz-color-content-200);
+		line-height: 1.6;
+		max-width: 800px;
+	}
+
+	.theme-indicator {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		margin-top: 1.5rem;
+		padding: 1rem;
+		background: var(--xz-color-bg-200);
+		border-radius: var(--xz-radius-md, 0.375rem);
+		border: 1px solid var(--xz-color-line-100);
+		max-width: fit-content;
+	}
+
+	.indicator-label {
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: var(--xz-color-content-100);
+	}
+
+	.indicator-badge {
+		padding: 0.375rem 0.75rem;
+		border-radius: var(--xz-radius-sm, 0.25rem);
+		font-size: 0.875rem;
+		font-weight: 600;
+		background: var(--xz-color-primary-soft-200);
+		color: var(--xz-color-primary-content-100);
+		transition: all 0.2s;
+	}
+
+	.indicator-badge.dark {
+		background: var(--xz-color-primary-soft-300);
+		color: var(--xz-color-primary-content-200);
+	}
+
+	.indicator-hint {
+		font-size: 0.8125rem;
+		color: var(--xz-color-content-200);
+		font-style: italic;
+	}
+
+	/* Usage Section */
+	.usage-section {
+		margin-bottom: 4rem;
+	}
+
+	.usage-section h2 {
+		font-size: 1.75rem;
+		font-weight: 600;
+		color: var(--xz-color-content-100);
+		margin-bottom: 2rem;
+	}
+
+	.usage-example {
+		margin-bottom: 2.5rem;
+	}
+
+	.usage-example h3 {
+		font-size: 1.25rem;
+		font-weight: 600;
+		color: var(--xz-color-content-100);
+		margin-bottom: 0.75rem;
+	}
+
+	.usage-note {
+		font-size: 0.9375rem;
+		color: var(--xz-color-content-200);
+		line-height: 1.6;
+		margin-bottom: 1rem;
+	}
+
+	.usage-note code {
+		background: var(--xz-color-bg-300);
+		padding: 0.125rem 0.375rem;
+		border-radius: var(--xz-radius-sm, 0.25rem);
+		font-family: var(--xz-font-family-mono, monospace);
+		font-size: 0.9em;
+		color: var(--xz-color-primary-content-100);
+	}
+
+	.example-block {
+		background: var(--xz-color-bg-300);
+		border-radius: var(--xz-radius-md, 0.375rem);
+		border: 1px solid var(--xz-color-line-200);
+		overflow: hidden;
+	}
+
+	.example-block pre {
+		margin: 0;
+		padding: 1.25rem;
+		overflow-x: auto;
+	}
+
+	.example-block code {
+		font-family: var(--xz-font-family-mono, monospace);
+		font-size: 0.875rem;
+		line-height: 1.6;
+		color: var(--xz-color-content-100);
+	}
+
+	.section {
+		margin-bottom: 4rem;
+	}
+
+	.category-header {
+		margin-bottom: 1.5rem;
+	}
+
+	.category-header h2 {
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin-bottom: 0.25rem;
+		color: var(--xz-color-content-100);
+	}
+
+	.category-header p {
+		font-size: 0.9375rem;
+		color: var(--xz-color-content-200);
+		line-height: 1.6;
+		margin: 0;
+	}
+
+	/* Table Styles */
+	.color-table {
+		margin-top: 1rem;
+	}
+
+	.table-header {
+		display: grid;
+		grid-template-columns: 80px 1fr 2fr 1.5fr;
+		gap: 1rem;
+		padding: 0.75rem 1rem;
+		background: var(--xz-color-bg-300);
+		border-radius: var(--xz-radius-md, 0.375rem);
+		font-weight: 600;
+		font-size: 0.875rem;
+		color: var(--xz-color-content-100);
+		margin-bottom: 0.5rem;
+	}
+
+	.table-row {
+		display: grid;
+		grid-template-columns: 80px 1fr 2fr 1.5fr;
+		gap: 1rem;
+		padding: 0.75rem 1rem;
+		align-items: center;
+		border-bottom: 1px solid var(--xz-color-border);
+		transition: background-color 0.15s;
+	}
+
+	.table-row:hover {
+		background: var(--xz-color-bg-200);
+	}
+
+	.table-row:last-child {
+		border-bottom: none;
+	}
+
+	.color-swatch {
+		width: 48px;
+		height: 48px;
+		border-radius: var(--xz-radius-md, 0.375rem);
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		cursor: pointer;
+		transition: transform 0.15s;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	/* Line colors show only the border */
+	.color-swatch.is-line {
+		background: transparent;
+		border: 1px solid var(--line-color);
+	}
+
+	.color-swatch.has-alpha {
+		background-image:
+			linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
+			linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
+			linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
+			linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
+		background-size: 8px 8px;
+		background-position:
+			0 0,
+			0 4px,
+			4px -4px,
+			-4px 0px;
+		background-color: #f5f5f5;
+	}
+
+	.color-swatch.has-alpha::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background-color: var(--alpha-color);
+		border-radius: inherit;
+	}
+
+	.color-swatch.has-alpha .swatch-label {
+		color: var(--text-color);
+	}
+
+	.color-swatch:hover {
+		transform: scale(1.05);
+	}
+
+	.swatch-label {
+		font-size: 1.25rem;
+		font-weight: 700;
+		opacity: 1;
+		user-select: none;
+		position: relative;
+		z-index: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.125rem;
+	}
+
+	.swatch-label.show-contrast {
+		opacity: 1;
+	}
+
+	.contrast-ratio {
+		font-size: 0.5rem;
+		font-weight: 500;
+		opacity: 0.7;
+		line-height: 1;
+	}
+
+	.col-name code {
+		font-family: var(--xz-font-family-mono, monospace);
+		font-size: 0.875rem;
+		color: var(--xz-color-primary-content-100);
+		font-weight: 500;
+	}
+
+	.token-button,
+	.value-button {
+		background: none;
+		border: none;
+		padding: 0.375rem 0.5rem;
+		font-family: var(--xz-font-family-mono, monospace);
+		font-size: 0.875rem;
+		color: var(--xz-color-primary-content-100);
+		cursor: pointer;
+		border-radius: var(--xz-radius-sm, 0.25rem);
+		transition: all 0.15s;
+		text-align: left;
+		width: 100%;
+	}
+
+	.token-button:hover,
+	.value-button:hover {
+		background: var(--xz-color-bg-300);
+	}
+
+	.token-button.copied,
+	.value-button.copied {
+		background: var(--xz-color-success-bg-100);
+		color: white;
+	}
+
+	.col-value {
+		font-size: 0.875rem;
+	}
+
+	/* Responsive */
+	@media (max-width: 768px) {
+		.themes-page {
+			padding: 1rem;
+		}
+
+		h1 {
+			font-size: 2rem;
+		}
+
+		.usage-section h2 {
+			font-size: 1.5rem;
+		}
+
+		.example-block pre {
+			padding: 1rem;
+		}
+
+		.example-block code {
+			font-size: 0.8125rem;
+		}
+
+		.table-header {
+			display: none;
+		}
+
+		.table-row {
+			grid-template-columns: 1fr;
+			gap: 0.75rem;
+			padding: 1rem;
+		}
+
+		.col-preview {
+			display: flex;
+			align-items: center;
+			gap: 1rem;
+		}
+
+		.col-name,
+		.col-token,
+		.col-value {
+			font-size: 0.8125rem;
+		}
+
+		.token-button,
+		.value-button {
+			font-size: 0.75rem;
+			padding: 0.25rem 0.375rem;
+		}
+	}
+</style>