WIP

felixgirault · May 1, 2022 · 105fee6 · 105fee6
1 parent 0f033f6
commit 105fee6
Show file tree

Hide file tree

Showing 3 changed files with 189 additions and 2 deletions.
diff --git a/src/lib/components/combinations/CombinationGrid.svelte b/src/lib/components/combinations/CombinationGrid.svelte
@@ -0,0 +1,161 @@
+<script lang="ts">
+	import {hexColor} from '$lib/color/spaces';
+	import BlindnessFilter from '$lib/components/combinations/BlindnessFilter.svelte';
+	import ColorFilter from '$lib/components/combinations/ColorFilter.svelte';
+	import Combination from '$lib/components/combinations/Combination.svelte';
+	import ContrastFilter from '$lib/components/combinations/ContrastFilter.svelte';
+	import ContrastTypeFilter from '$lib/components/combinations/ContrastTypeFilter.svelte';
+	import LuminosityFilter from '$lib/components/combinations/LuminosityFilter.svelte';
+	import {
+		colorEntries,
+		cross,
+		previewedCombinationUid,
+		selectedCombinations
+	} from '$lib/stores/combinations';
+	import Sample from '../Sample.svelte';
+
+	const handlePreview = (uid: string) => {
+		$previewedCombinationUid =
+			$previewedCombinationUid === uid ? null : uid;
+	};
+
+	$: colorCount = $colorEntries?.length || 0;
+
+	let a = $cross.map(() => {});
+</script>
+
+<div class="data-layout">
+	<div class="data-options-track">
+		{#if colorCount > 1}
+			<div class="data-options form">
+				<ContrastTypeFilter />
+				<LuminosityFilter />
+			</div>
+		{/if}
+	</div>
+
+	<div class="list">
+		<!-- Using a keyed each here worsens performances as it causes layout shifts -->
+		{#if $cross.length}
+			<table>
+				<caption>Test</caption>
+
+				<thead>
+					<tr>
+						<td />
+						{#each $cross as { id, name, rgb } (id)}
+							<th scope="col">
+								<span title="Foreground: {name}">
+									Tt
+								</span>
+							</th>
+						{/each}
+					</tr>
+				</thead>
+
+				<tbody>
+					{#each $cross as { id, name, rgb, bgs }, j (id)}
+						<tr>
+							<th scope="row">
+								<Sample
+									color={hexColor(rgb)}
+									title="Background: {name}"
+								/>
+							</th>
+							{#each bgs as { grade }, i ($cross[i].id)}
+								<td
+									class="combination"
+									style="--cbg: {hexColor(
+										$cross[i].rgb
+									)}; --cfg: {hexColor(rgb)};"
+								>
+									{#if i !== j}
+										<input
+											type="checkbox"
+											id="combination-{j}-{i}"
+											checked={$selectedCombinations?.[
+												$cross[i].id
+											]?.[id]}
+											onchange={(e) => {
+												$selectedCombinations[
+													$cross[i].id
+												][id] = e.target.checked;
+											}}
+										/>
+										<label for="combination-{j}-{i}">
+											{grade}
+										</label>
+									{/if}
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{:else if colorCount > 1}
+			<p>
+				There is no color combination matching the selected
+				filters.
+				<br />
+				Try adding more colors to your palette or changing filters.
+			</p>
+		{:else}
+			<p>
+				Add colors to your palette to try color combinations.
+			</p>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.data-options {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(28ch, 1fr));
+		gap: 1rem;
+		animation: slide-up 250ms ease-out;
+		contain: layout;
+	}
+
+	.list {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(22ch, 1fr));
+		gap: 1rem;
+		contain: layout;
+	}
+
+	table {
+		width: auto;
+		caption-side: bottom;
+	}
+
+	.combination {
+		padding: 0;
+		font-weight: bold;
+	}
+
+	.combination label {
+		display: inline-block;
+		padding: 0.5rem;
+		background: var(--cbg);
+		color: var(--cfg);
+		font-weight: bolder;
+		font-family: var(--font-sans);
+		opacity: 0.1;
+		width: 5ch;
+	}
+
+	input {
+		display: none;
+	}
+
+	.combination:hover,
+	input:checked ~ label {
+		opacity: 1;
+		outline: 1px solid var(--fg);
+	}
+
+	.list :global(.sample) {
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+</style>
diff --git a/src/lib/stores/combinations.ts b/src/lib/stores/combinations.ts
@@ -1,5 +1,5 @@
 import type {Rgb} from 'culori/fn';
-import type {Readable} from 'svelte/store';
+import {readable, type Readable} from 'svelte/store';
 import {derived, get, writable} from 'svelte/store';
 import type {ContrastType} from '$lib/color/contrast';
 import {
@@ -124,6 +124,31 @@ const colorPairs = derived(filteredColors, ($colors) => {
 	);
 });
 
+export const cross = derived(
+	[filteredColors, contrastType],
+	([$colors, $type]) => {
+		const levelFn =
+			$type === 'wcag2' ? wcag2Contrast : wcag3Contrast;
+		const gradeFn =
+			$type === 'wcag2' ? wcag2Grade : wcag3Grade;
+
+		return $colors.map((fg) => ({
+			id: fg.id,
+			name: fg.name,
+			rgb: fg.rgbColor,
+			bgs: $colors.map((bg) => {
+				const level = levelFn(bg.rgbColor, fg.rgbColor);
+				return {
+					level,
+					grade: gradeFn(level)
+				};
+			})
+		}));
+	}
+);
+
+export const selectedCombinations = writable({});
+
 export const combinations = derived(
 	[colorPairs, contrastType, blindnessTypes],
 	([$pairs, $type, $blindnessTypes]) => {

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -2,6 +2,7 @@
 	import Layout from '$lib/components/Layout.svelte';
 	import Modal from '$lib/components/Modal.svelte';
 	import Palette from '$lib/components/Palette.svelte';
+	import CombinationGrid from '$lib/components/combinations/CombinationGrid.svelte';
 	import Combinations from '$lib/components/combinations/Combinations.svelte';
 	import Export from '$lib/components/export/Export.svelte';
 	import {pack} from '$lib/packing';
@@ -63,7 +64,7 @@
 				</h2>
 			</header>
 
-			<Combinations />
+			<CombinationGrid />
 		</section>
 	</main>
 </Layout>