@fastwork/xosmoz-svelte 0.0.21

package/dist/docs/foundation/Colors.svelte

@@ -0,0 +1,900 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte'
+	import { lightTheme, darkTheme } from '@fastwork/xosmoz-theme'
+	import type { ColorToken } from '@fastwork/xosmoz-theme'
+	import {
+		detectDarkTheme,
+		watchThemeChanges,
+	} from '../../utils/themeDetection'
+	import { calculateAPCA, toHex } from '../../utils/colorCalculations'
+	import { createClipboardHandler } from '../../utils/clipboard'
+
+	let isDarkTheme = $state(false)
+	let theme = $derived.by(() => (isDarkTheme ? darkTheme : lightTheme))
+	let colors = $derived.by(() => theme.colors)
+
+	let cleanupThemeWatcher: (() => void) | null = null
+
+	// Update colors based on theme
+	function updateColors() {
+		isDarkTheme = detectDarkTheme()
+		colors = isDarkTheme ? darkTheme.colors : lightTheme.colors
+	}
+
+	// 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 color groups with their scales
+	const colorGroups = $derived.by(() => [
+		{
+			title: 'Brand Colors',
+			description:
+				'Fastwork brand color palette used throughout the design system.',
+			colors: [
+				{
+					name: 'Fastwork',
+					scale: colors.fastwork,
+					key: 'fastwork',
+				},
+			],
+		},
+		{
+			title: 'Neutral Colors',
+			description:
+				'Gray scale for backgrounds, surfaces, text, and borders.',
+			colors: [{ name: 'Gray', scale: colors.gray, key: 'gray' }],
+		},
+		{
+			title: 'Semantic Colors',
+			description: 'Color palettes for UI states and feedback messages.',
+			colors: [
+				{
+					name: 'Green',
+					scale: colors.green,
+					key: 'green',
+					usage: 'Success states',
+				},
+				{
+					name: 'Red',
+					scale: colors.red,
+					key: 'red',
+					usage: 'Error states',
+				},
+				{
+					name: 'Amber',
+					scale: colors.amber,
+					key: 'amber',
+					usage: 'Warning states',
+				},
+				{
+					name: 'Cyan',
+					scale: colors.cyan,
+					key: 'cyan',
+					usage: 'Info states',
+				},
+			],
+		},
+		{
+			title: 'Extended Palette',
+			description:
+				'Additional colors for charts, data visualization, and extended UI needs.',
+			colors: [
+				{
+					name: 'Mint',
+					scale: colors.mint,
+					key: 'mint',
+				},
+				{
+					name: 'Orange',
+					scale: colors.orange,
+					key: 'orange',
+				},
+				{ name: 'Purple', scale: colors.purple, key: 'purple' },
+			],
+		},
+		{
+			title: 'Alpha Colors',
+			description:
+				'Transparent overlay colors for layering and depth effects.',
+			colors: [
+				{
+					name: 'Black Alpha',
+					scale: colors.blackAlpha,
+					key: 'blackAlpha',
+				},
+				{
+					name: 'White Alpha',
+					scale: colors.whiteAlpha,
+					key: 'whiteAlpha',
+				},
+			],
+		},
+	])
+
+	// Track copied state
+	let copiedVar = $state('')
+
+	// Create clipboard handler with state management
+	const copyToClipboard = createClipboardHandler(
+		() => copiedVar,
+		(val) => (copiedVar = val),
+	)
+
+	// Generate CSS variable name
+	function getCSSVarName(key: string, value: string): string {
+		// Convert camelCase to kebab-case
+		const kebabKey = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+		return `--xz-color-${kebabKey}-${value}`
+	}
+
+	// Get all scale values from a color token
+	function getScaleValues(
+		scale: ColorToken,
+	): { value: string; color: string }[] {
+		const values: { value: string; color: string }[] = []
+		const keys: (keyof ColorToken)[] = [
+			100, 200, 300, 400, 500, 600, 700, 800, 900, 1000,
+		]
+
+		for (const key of keys) {
+			if (scale[key]) {
+				values.push({ value: String(key), color: scale[key] })
+			}
+		}
+
+		return values
+	}
+
+	// Get foreground color for preview based on scale value
+	function getForegroundColor(scale: ColorToken, value: string): string {
+		// For colors 100, 200, 300: use 900
+		if (['100', '200', '300'].includes(value)) {
+			return scale[900] || '#000000'
+		}
+		// For colors 700, 800: use white or very light color for low contrast demo
+		if (['700', '800'].includes(value)) {
+			return '#ffffff'
+		}
+		// Default: transparent (will be invisible)
+		return 'transparent'
+	}
+</script>
+
+<div class="color-page">
+	<div class="header">
+		<h1>Color Tokens</h1>
+		<p class="lead">
+			Foundational color palettes that form the building blocks of the
+			Xosmoz design system. All colors use the OKLCH color format for
+			perceptually uniform lightness and are used to construct light and
+			dark themes.
+		</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>
+
+	<!-- Color Scale Reference Guide -->
+	<section class="scale-reference">
+		<h2>Color Usage Guidelines</h2>
+		<p class="scale-intro">
+			Each color palette follows a systematic 10-step scale (100-1000)
+			designed for specific UI purposes. Use this guide to select the
+			appropriate color for your design needs.
+			<br />
+			<br />
+			<strong>Note:</strong> These are flexible guidelines to help you choose
+			from the foundation colors, not strict rules that must be followed.
+		</p>
+
+		<div class="scale-guide">
+			<div class="scale-item">
+				<div class="scale-range">
+					<div class="range-header">
+						<span class="range-badge bg">100-300</span>
+						<div class="range-circles">
+							<div
+								class="range-circle"
+								style="background-color: {colors
+									.fastwork[100]};"
+								title="100"
+							></div>
+							<div
+								class="range-circle"
+								style="background-color: {colors
+									.fastwork[200]};"
+								title="200"
+							></div>
+							<div
+								class="range-circle"
+								style="background-color: {colors
+									.fastwork[300]};"
+								title="300"
+							></div>
+						</div>
+					</div>
+					<span class="range-label"
+						>Soft colors, component backgrounds</span
+					>
+				</div>
+				<p class="scale-description">
+					Subtle to medium background colors for cards, panels, and
+					component surfaces. Use 100 for the lightest backgrounds,
+					200 for secondary surfaces, and 300 for more prominent
+					backgrounds.
+				</p>
+			</div>
+
+			<div class="scale-item">
+				<div class="scale-range">
+					<div class="range-header">
+						<span class="range-badge border">400-600</span>
+						<div class="range-circles">
+							<div
+								class="range-circle"
+								style="background-color: {colors
+									.fastwork[400]};"
+								title="400"
+							></div>
+							<div
+								class="range-circle"
+								style="background-color: {colors
+									.fastwork[500]};"
+								title="500"
+							></div>
+							<div
+								class="range-circle"
+								style="background-color: {colors
+									.fastwork[600]};"
+								title="600"
+							></div>
+						</div>
+					</div>
+					<span class="range-label"
+						>Line, Borders, Other Utilities</span
+					>
+				</div>
+				<p class="scale-description">
+					Line colors for UI elements. 400 for subtle borders, 500 for
+					standard borders, and 600 for emphasized borders or other
+					utilities.
+				</p>
+			</div>
+
+			<div class="scale-item">
+				<div class="scale-range">
+					<div class="range-header">
+						<span class="range-badge solid">700-800</span>
+						<div class="range-circles">
+							<div
+								class="range-circle"
+								style="background-color: {colors
+									.fastwork[700]};"
+								title="700"
+							></div>
+							<div
+								class="range-circle"
+								style="background-color: {colors
+									.fastwork[800]};"
+								title="800"
+							></div>
+						</div>
+					</div>
+					<span class="range-label">Background, Solid Fills</span>
+				</div>
+				<p class="scale-description">
+					Background, solid fill colors for buttons, badges, and
+					interactive elements. 700 for normal state, 800 for hover
+					states and feedback.
+				</p>
+			</div>
+
+			<div class="scale-item">
+				<div class="scale-range">
+					<div class="range-header">
+						<span class="range-badge text">900-1000</span>
+						<div class="range-circles">
+							<div
+								class="range-circle"
+								style="background-color: {colors
+									.fastwork[900]};"
+								title="900"
+							></div>
+							<div
+								class="range-circle"
+								style="background-color: {colors
+									.fastwork[1000]};"
+								title="1000"
+							></div>
+						</div>
+					</div>
+					<span class="range-label">Content, Text & Icons</span>
+				</div>
+				<p class="scale-description">
+					High contrast colors for text and icons. 900 for primary
+					text and 1000 for maximum contrast text.
+				</p>
+			</div>
+		</div>
+	</section>
+
+	<!-- Foundational Color Scales -->
+	<section class="section">
+		{#each colorGroups as group, idx (idx)}
+			<div class="color-group">
+				<div class="group-header">
+					<h3>{group.title}</h3>
+					<p>{group.description}</p>
+				</div>
+
+				{#each group.colors as colorItem, idx (idx)}
+					<div class="color-scale">
+						<div class="scale-header">
+							<h4>{colorItem.name}</h4>
+						</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">Token</div>
+								<div class="col-value">OKLCH</div>
+								<div class="col-hex">Hex</div>
+							</div>
+
+							{#each getScaleValues(colorItem.scale) as { value, color }, idx (idx)}
+								{@const cssVar = getCSSVarName(
+									colorItem.key,
+									value,
+								)}
+								{@const tokenName = `${colorItem.key}.${value}`}
+								{@const hexColor = toHex(color)}
+								{@const isAlpha =
+									colorItem.key === 'blackAlpha' ||
+									colorItem.key === 'whiteAlpha'}
+								{@const fgColor = isAlpha
+									? colorItem.key === 'blackAlpha'
+										? '#ffffff'
+										: '#000000'
+									: getForegroundColor(
+											colorItem.scale,
+											value,
+										)}
+								{@const labelColor = fgColor}
+								{@const showContrast =
+									!isAlpha &&
+									[
+										'100',
+										'200',
+										'300',
+										'700',
+										'800',
+									].includes(value)}
+								{@const contrastRatio = showContrast
+									? calculateAPCA(fgColor, color)
+									: 0}
+								<div class="table-row">
+									<div class="col-preview">
+										<div
+											class="color-swatch"
+											class:has-alpha={isAlpha}
+											style={isAlpha
+												? `--alpha-color: ${color};`
+												: `background-color: ${color};`}
+											title={color}
+										>
+											<div
+												class="swatch-label"
+												class:show-contrast={showContrast}
+												style="color: {labelColor};"
+											>
+												A
+												{#if showContrast}
+													<span class="contrast-ratio"
+														>{contrastRatio}</span
+													>
+												{/if}
+											</div>
+										</div>
+									</div>
+									<div class="col-name">
+										{tokenName}
+									</div>
+									<div class="col-token">
+										<button
+											class="token-button"
+											class:copied={copiedVar === cssVar}
+											onclick={() =>
+												copyToClipboard(cssVar)}
+											title="Click to copy CSS variable"
+										>
+											{cssVar}
+										</button>
+									</div>
+									<div class="col-value">
+										<button
+											class="value-button"
+											class:copied={copiedVar === color}
+											onclick={() =>
+												copyToClipboard(color)}
+											title="Click to copy OKLCH"
+										>
+											{color}
+										</button>
+									</div>
+									<div class="col-hex">
+										{#if hexColor.includes('Out of gamut')}
+											<span
+												class="out-of-gamut"
+												title="This color is outside the sRGB gamut. OKLCH can represent more vibrant colors than hex/sRGB."
+											>
+												{hexColor}
+											</span>
+										{:else}
+											<button
+												class="value-button"
+												class:copied={copiedVar ===
+													hexColor}
+												onclick={() =>
+													copyToClipboard(hexColor)}
+												title="Click to copy Hex"
+											>
+												{hexColor}
+											</button>
+										{/if}
+									</div>
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/each}
+			</div>
+		{/each}
+	</section>
+</div>
+
+<style>
+	.color-page {
+		overflow: hidden;
+		background-color: var(--xz-color-bg-100);
+		font-family: var(--xz-font-family-primary, system-ui);
+		padding: 2rem 0;
+		max-width: 100%;
+		padding: 2rem;
+	}
+
+	.header {
+		margin-bottom: 3rem;
+	}
+
+	h1 {
+		font-size: 2.5rem;
+		font-weight: 700;
+		margin-bottom: 0.75rem;
+		color: var(--xz-color-text);
+	}
+
+	.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;
+	}
+
+	/* Scale Reference Guide Styles */
+	.scale-reference {
+		margin-bottom: 4rem;
+		padding: 2rem;
+		background: var(--xz-color-bg-200, #fafafa);
+		border-radius: var(--xz-radius-lg, 0.5rem);
+	}
+
+	.scale-reference h2 {
+		font-size: 1.75rem;
+		font-weight: 600;
+		color: var(--xz-color-text);
+		margin-bottom: 0.5rem;
+	}
+
+	.scale-intro {
+		font-size: 1rem;
+		color: var(--xz-color-content-200);
+		line-height: 1.6;
+		margin-bottom: 2rem;
+	}
+
+	.scale-guide {
+		display: grid;
+		gap: 1.5rem;
+	}
+
+	.scale-item {
+		padding: 1.25rem;
+		background: var(--xz-color-bg-100, #ffffff);
+		border-radius: var(--xz-radius-md, 0.375rem);
+		border: 1px solid var(--xz-color-line-100);
+	}
+
+	.scale-range {
+		display: flex;
+		gap: 0.75rem;
+		margin-bottom: 0.5rem;
+	}
+
+	.range-header {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		align-items: flex-start;
+	}
+
+	.range-circles {
+		display: flex;
+		gap: 0.375rem;
+		padding-left: 0.25rem;
+	}
+
+	.range-circle {
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		transition: transform 0.15s;
+		cursor: pointer;
+	}
+
+	.range-circle:hover {
+		transform: scale(1.15);
+	}
+
+	.range-badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.25rem 0.75rem;
+		border-radius: var(--xz-radius-sm, 0.25rem);
+		font-weight: 600;
+		font-size: 0.875rem;
+		font-family: var(--xz-font-family-mono, monospace);
+		min-width: 80px;
+	}
+
+	.range-badge.bg {
+		background: var(--xz-color-fastwork-200);
+		color: var(--xz-color-fastwork-900);
+	}
+
+	.range-badge.border {
+		background: var(--xz-color-fastwork-400);
+		color: var(--xz-color-fastwork-1000);
+	}
+
+	.range-badge.solid {
+		background: var(--xz-color-fastwork-700);
+		color: #ffffff;
+	}
+
+	.range-badge.text {
+		background: var(--xz-color-fastwork-800);
+		color: #ffffff;
+	}
+
+	.range-label {
+		font-weight: 600;
+		font-size: 1rem;
+		color: var(--xz-color-text);
+	}
+
+	.scale-description {
+		font-size: 0.9375rem;
+		color: var(--xz-color-content-200);
+		line-height: 1.6;
+		margin: 0;
+	}
+
+	.section {
+		margin-bottom: 4rem;
+	}
+
+	.color-group {
+		margin-bottom: 3rem;
+	}
+
+	.group-header {
+		margin-bottom: 1.5rem;
+	}
+
+	.group-header h3 {
+		font-size: 1.5rem;
+		font-weight: 600;
+		color: var(--xz-color-text);
+		margin-bottom: 0.25rem;
+	}
+
+	.group-header p {
+		font-size: 0.9375rem;
+		color: var(--xz-color-content-200);
+		margin: 0;
+	}
+
+	.color-scale {
+		margin-bottom: 2rem;
+	}
+
+	.scale-header {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		margin-bottom: 1rem;
+	}
+
+	.scale-header h4 {
+		font-size: 1.125rem;
+		font-weight: 600;
+		color: var(--xz-color-text);
+		margin: 0;
+	}
+
+	.color-table {
+		margin-top: 1rem;
+	}
+
+	.table-header {
+		display: grid;
+		grid-template-columns: 80px 1fr 2fr 1.5fr 1fr;
+		gap: 1rem;
+		padding: 0.75rem 1rem;
+		background: var(--xz-color-bg-300, #f5f5f5);
+		border-radius: var(--xz-radius-md, 0.375rem);
+		font-weight: 600;
+		font-size: 0.875rem;
+		color: var(--xz-color-content-100, #333);
+		margin-bottom: 0.5rem;
+	}
+
+	.table-row {
+		display: grid;
+		grid-template-columns: 80px 1fr 2fr 1.5fr 1fr;
+		gap: 1rem;
+		padding: 0.75rem 1rem;
+		align-items: center;
+		border-bottom: 1px solid var(--xz-color-border, rgba(0, 0, 0, 0.08));
+		transition: background-color 0.15s;
+	}
+
+	.table-row:hover {
+		background: var(--xz-color-bg-200, #fafafa);
+	}
+
+	.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;
+	}
+
+	.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: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;
+	}
+
+	.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;
+	}
+
+	.token-button:hover,
+	.value-button:hover {
+		background: var(--xz-color-bg-300, #f0f0f0);
+	}
+
+	.token-button.copied,
+	.value-button.copied {
+		background: var(--xz-color-success-bg-100, #22c55e);
+		color: white;
+	}
+
+	.out-of-gamut {
+		font-family: var(--xz-font-family-mono, monospace);
+		font-size: 0.875rem;
+		color: var(--xz-color-content-200, #666);
+		font-style: italic;
+		cursor: help;
+	}
+
+	.col-name,
+	.col-token,
+	.col-value {
+		font-family: var(--xz-font-family-mono, monospace);
+	}
+
+	/* Responsive */
+	@media (max-width: 768px) {
+		.scale-reference {
+			padding: 1.5rem;
+		}
+
+		.scale-reference h2 {
+			font-size: 1.5rem;
+		}
+
+		.scale-range {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 0.5rem;
+		}
+
+		.range-header {
+			gap: 0.375rem;
+		}
+
+		.range-circles {
+			gap: 0.25rem;
+		}
+
+		.range-circle {
+			width: 20px;
+			height: 20px;
+		}
+
+		.range-badge {
+			font-size: 0.8125rem;
+		}
+
+		.range-label {
+			font-size: 0.9375rem;
+		}
+
+		.scale-description {
+			font-size: 0.875rem;
+		}
+
+		.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-family: var(--xz-font-family-mono, monospace);
+			font-size: 0.8125rem;
+		}
+
+		.token-button,
+		.value-button {
+			font-size: 0.75rem;
+			padding: 0.25rem 0.375rem;
+		}
+	}
+</style>