@fastwork/xosmoz-svelte 0.0.21

package/dist/docs/foundation/APCA.svelte

@@ -0,0 +1,358 @@
+<script lang="ts">
+	// Guidelines data
+	const guidelines = [
+		{
+			minApca: 90,
+			textSize: '14-16px',
+			weight: 'Regular (400)',
+			usage: 'Body text, fine print, UI labels',
+			example: true,
+		},
+		{
+			minApca: 75,
+			textSize: '18-20px',
+			weight: 'Regular (400)',
+			usage: 'Subheadings, captions, large labels',
+			example: true,
+		},
+		{
+			minApca: 75,
+			textSize: '14-16px',
+			weight: 'Bold (700)',
+			usage: 'Bold body text, emphasized content',
+			example: true,
+		},
+		{
+			minApca: 60,
+			textSize: '24px+',
+			weight: 'Regular (400)',
+			usage: 'Large headings, hero text',
+			example: true,
+		},
+		{
+			minApca: 60,
+			textSize: '18-20px',
+			weight: 'Bold (700)',
+			usage: 'Bold subheadings, call-to-action buttons',
+			example: true,
+		},
+		{
+			minApca: 45,
+			textSize: '32px+',
+			weight: 'Bold (700)',
+			usage: 'Display text only (not for readability)',
+			example: false,
+		},
+	]
+</script>
+
+<div class="apca-docs">
+	<section class="intro">
+		<h1>APCA: Modern Accessible Contrast</h1>
+		<p class="lead">
+			Xosmoz uses APCA (Accessible Perceptual Contrast Algorithm) to
+			ensure all colors meet modern accessibility standards based on human
+			perception, not outdated mathematical models.
+		</p>
+	</section>
+
+	<!-- Guidelines Table -->
+	<section class="guidelines-section">
+		<h2>APCA Guidelines by Use Case</h2>
+		<p>Minimum APCA contrast values based on text size and weight:</p>
+
+		<div class="guidelines-table">
+			<table>
+				<thead>
+					<tr>
+						<th>Min. APCA (Lc)</th>
+						<th>Text Size</th>
+						<th>Weight</th>
+						<th>Usage</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each guidelines as guideline (`${guideline.minApca}-${guideline.textSize}`)}
+						<tr class:recommended={guideline.example}>
+							<td class="apca-min">
+								<span class="lc-badge"
+									>Lc {guideline.minApca}+</span
+								>
+							</td>
+							<td>{guideline.textSize}</td>
+							<td>{guideline.weight}</td>
+							<td>{guideline.usage}</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+
+		<div class="guidelines-notes">
+			<h4>Important Notes:</h4>
+			<ul>
+				<li>
+					These are <strong>minimum</strong> values - aim higher for better
+					accessibility
+				</li>
+				<li>
+					For critical text (errors, warnings), target Lc 75+
+					regardless of size
+				</li>
+				<li>
+					Fonts with thin strokes or complex details may need higher
+					contrast
+				</li>
+				<li>
+					Consider increasing contrast by 10-15 points for users with
+					low vision
+				</li>
+			</ul>
+		</div>
+	</section>
+
+	<!-- Resources -->
+	<section class="resources-section">
+		<h2>Learn More</h2>
+
+		<div class="resources-grid">
+			<div class="resource-card">
+				<h4>🧮 APCA Calculator</h4>
+				<p>Interactive tool to test color combinations</p>
+				<a
+					href="https://apcacontrast.com"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					apcacontrast.com →
+				</a>
+			</div>
+
+			<div class="resource-card">
+				<h4>📘 WCAG 3.0 Draft</h4>
+				<p>Future accessibility standard featuring APCA</p>
+				<a
+					href="https://www.w3.org/TR/wcag-3.0/"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					W3C Specification →
+				</a>
+			</div>
+
+			<div class="resource-card">
+				<h4>🎨 Color.js Documentation</h4>
+				<p>Library used for APCA calculations</p>
+				<a
+					href="https://colorjs.io/docs/contrast"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					colorjs.io/docs/contrast →
+				</a>
+			</div>
+
+			<div class="resource-card">
+				<h4>🔧 apcach Library</h4>
+				<p>Create colors from APCA values in OKLCH</p>
+				<a
+					href="https://github.com/antiflasher/apcach"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					GitHub Repository →
+				</a>
+			</div>
+		</div>
+	</section>
+</div>
+
+<style>
+	.apca-docs {
+		padding: 3rem;
+		max-width: 1400px;
+		margin: 0 auto;
+		font-family:
+			system-ui,
+			-apple-system,
+			sans-serif;
+	}
+
+	section {
+		margin-bottom: 4rem;
+	}
+
+	h1 {
+		font-size: 2.5rem;
+		font-weight: 700;
+		margin-bottom: 1rem;
+		color: #111;
+	}
+
+	h2 {
+		font-size: 2rem;
+		font-weight: 600;
+		margin-bottom: 1rem;
+		color: #222;
+	}
+
+	h4 {
+		font-size: 1.25rem;
+		font-weight: 600;
+		margin-bottom: 0.5rem;
+		color: #444;
+	}
+
+	.lead {
+		font-size: 1.25rem;
+		line-height: 1.6;
+		color: #555;
+		margin-bottom: 2rem;
+	}
+
+	p {
+		line-height: 1.6;
+		color: #666;
+		margin-bottom: 1rem;
+	}
+
+	/* Guidelines Table */
+	.guidelines-table {
+		overflow-x: auto;
+		margin-bottom: 2rem;
+	}
+
+	table {
+		width: 100%;
+		border-collapse: collapse;
+		background: white;
+		border-radius: 8px;
+		overflow: hidden;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	}
+
+	thead {
+		background: #f5f5f5;
+	}
+
+	th {
+		text-align: left;
+		padding: 1rem 1.5rem;
+		font-weight: 600;
+		color: #333;
+		border-bottom: 2px solid #e5e5e5;
+	}
+
+	td {
+		padding: 1rem 1.5rem;
+		border-bottom: 1px solid #f0f0f0;
+		color: #555;
+	}
+
+	tr:last-child td {
+		border-bottom: none;
+	}
+
+	tr.recommended {
+		background: #f0fdf4;
+	}
+
+	.apca-min {
+		font-weight: 600;
+	}
+
+	.lc-badge {
+		display: inline-block;
+		padding: 0.25rem 0.75rem;
+		border-radius: 4px;
+		background: #4338ca;
+		color: white;
+		font-size: 0.875rem;
+		font-weight: 700;
+	}
+
+	.guidelines-notes {
+		background: #fffbeb;
+		border: 1px solid #fcd34d;
+		border-radius: 8px;
+		padding: 1.5rem;
+	}
+
+	.guidelines-notes h4 {
+		color: #92400e;
+		margin-bottom: 1rem;
+	}
+
+	.guidelines-notes ul {
+		margin: 0;
+		padding-left: 1.5rem;
+		color: #78350f;
+	}
+
+	.guidelines-notes li {
+		margin-bottom: 0.5rem;
+		line-height: 1.6;
+	}
+
+	/* Resources Section */
+	.resources-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+		gap: 1.5rem;
+	}
+
+	.resource-card {
+		background: white;
+		border: 1px solid #e5e5e5;
+		border-radius: 8px;
+		padding: 1.5rem;
+		transition: all 0.2s ease;
+	}
+
+	.resource-card:hover {
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+		transform: translateY(-2px);
+	}
+
+	.resource-card h4 {
+		margin-top: 0;
+		margin-bottom: 0.5rem;
+		color: #333;
+	}
+
+	.resource-card p {
+		color: #666;
+		font-size: 0.875rem;
+		margin-bottom: 1rem;
+	}
+
+	.resource-card a {
+		color: #4338ca;
+		text-decoration: none;
+		font-weight: 600;
+		font-size: 0.875rem;
+	}
+
+	.resource-card a:hover {
+		text-decoration: underline;
+	}
+
+	/* Responsive */
+	@media (max-width: 768px) {
+		.apca-docs {
+			padding: 1.5rem;
+		}
+
+		h1 {
+			font-size: 2rem;
+		}
+
+		h2 {
+			font-size: 1.5rem;
+		}
+
+		.resources-grid {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

package/dist/docs/foundation/APCA.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const APCA: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type APCA = InstanceType<typeof APCA>;
+export default APCA;

package/dist/docs/foundation/BoxShadows.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+	import { boxShadows } from '@fastwork/xosmoz-theme'
+	import { createClipboardHandler } from '../../utils/clipboard'
+
+	// Track copied state
+	let copiedVar = $state('')
+
+	// Create clipboard handler with state management
+	const copyToClipboard = createClipboardHandler(
+		() => copiedVar,
+		(val) => (copiedVar = val),
+	)
+
+	// Shadow entries for display
+	const shadowEntries = Object.entries(boxShadows).map(([key, value]) => ({
+		key,
+		value,
+		cssVar: `--xz-box-shadow-${key}`,
+	}))
+</script>
+
+<div class="shadows-page">
+	<div class="header">
+		<h1>Box Shadows</h1>
+		<p class="lead">
+			Elevation tokens for adding depth and visual hierarchy to elements.
+		</p>
+		<div class="usage-examples">
+			<span class="usage-label">CSS</span>
+			<pre class="usage-code"><code>{`.card {
+  box-shadow: var(--xz-box-shadow-200);
+}`}</code></pre>
+			<span class="usage-label">JS</span>
+			<pre class="usage-code"><code>{`import { boxShadows } from '@fastwork/xosmoz-theme';
+
+boxShadows[200]; // '0 2px 6px 0 rgba(0, 0, 0, 0.10)'`}</code></pre>
+		</div>
+	</div>
+
+	<!-- Shadow Scale -->
+	<section class="shadows-section">
+		<h2>Shadow Scale</h2>
+		<div class="shadow-grid">
+			{#each shadowEntries as shadow (shadow.key)}
+				<div class="shadow-card">
+					<div class="shadow-preview" style="box-shadow: {shadow.value};">
+						<span class="shadow-level">{shadow.key}</span>
+					</div>
+					<div class="shadow-info">
+						<button
+							class="shadow-var"
+							class:copied={copiedVar === shadow.cssVar}
+							onclick={() => copyToClipboard(shadow.cssVar)}
+							title="Click to copy"
+						>
+							{shadow.cssVar}
+						</button>
+						<code class="shadow-value">{shadow.value}</code>
+					</div>
+				</div>
+			{/each}
+		</div>
+	</section>
+</div>
+
+<style>
+	.shadows-page {
+		background-color: var(--xz-color-bg-100);
+		font-family: var(--xz-font-family-primary, system-ui);
+		padding: 1.5rem;
+		max-width: 900px;
+	}
+
+	.header {
+		margin-bottom: 2rem;
+	}
+
+	h1 {
+		font-size: 2rem;
+		font-weight: 700;
+		margin-bottom: 0.5rem;
+		color: var(--xz-color-text);
+	}
+
+	h2 {
+		font-size: 1.125rem;
+		font-weight: 600;
+		color: var(--xz-color-text);
+		margin: 0 0 1rem 0;
+	}
+
+	.lead {
+		font-size: 0.9375rem;
+		color: var(--xz-color-content-200);
+		line-height: 1.5;
+		margin-bottom: 0.75rem;
+	}
+
+	.usage-examples {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin-top: 0.75rem;
+	}
+
+	.usage-label {
+		font-size: 0.5625rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--xz-color-content-200);
+		background: var(--xz-color-bg-300);
+		padding: 0.125rem 0.375rem;
+		border-radius: 0.25rem;
+		align-self: flex-start;
+	}
+
+	.usage-code {
+		margin: 0 0 0.5rem 0;
+		background: var(--xz-color-bg-200);
+		padding: 0.625rem 0.875rem;
+		border-radius: 0.25rem;
+		overflow-x: auto;
+	}
+
+	.usage-code code {
+		font-family: var(--xz-font-family-mono, monospace);
+		font-size: 0.8125rem;
+		color: var(--xz-color-content-100);
+		line-height: 1.6;
+		white-space: pre;
+	}
+
+	/* Shadows Section */
+	.shadows-section {
+		margin-top: 2rem;
+	}
+
+	.shadow-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+		gap: 1.5rem;
+	}
+
+	.shadow-card {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.shadow-preview {
+		background: var(--xz-color-bg-100);
+		border-radius: 0.5rem;
+		padding: 2rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 100px;
+	}
+
+	.shadow-level {
+		font-size: 1.5rem;
+		font-weight: 700;
+		color: var(--xz-color-content-100);
+	}
+
+	.shadow-info {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.shadow-var {
+		background: none;
+		border: none;
+		padding: 0.25rem 0.5rem;
+		margin-left: -0.5rem;
+		font-family: var(--xz-font-family-mono, monospace);
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: var(--xz-color-primary-content-100);
+		cursor: pointer;
+		border-radius: 0.25rem;
+		transition: all 0.1s;
+		text-align: left;
+	}
+
+	.shadow-var:hover {
+		background: var(--xz-color-bg-300);
+	}
+
+	.shadow-var.copied {
+		background: var(--xz-color-success-bg-100, #22c55e);
+		color: white;
+	}
+
+	.shadow-value {
+		font-family: var(--xz-font-family-mono, monospace);
+		font-size: 0.75rem;
+		color: var(--xz-color-content-200);
+		padding-left: 0.5rem;
+	}
+</style>
+

package/dist/docs/foundation/BoxShadows.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const BoxShadows: import("svelte").Component<Record<string, never>, {}, "">;
+type BoxShadows = ReturnType<typeof BoxShadows>;
+export default BoxShadows;