From 5c83b3252274c7be6e4ba8a3d41f82846caf4e2b Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 11 Dec 2024 18:57:50 +0000
Subject: [PATCH] Add gamut selector

---
 src/lib/components/GamutSelect.svelte    | 45 ++++++++++++++++++++++++
 src/lib/components/Header.svelte         |  2 ++
 src/lib/components/SpaceSelect.svelte    |  2 +-
 src/lib/components/colors/Sliders.svelte | 16 +++++++--
 src/lib/constants.ts                     |  8 +++++
 src/lib/stores.ts                        |  4 ++-
 src/lib/utils.ts                         | 20 +++++++----
 src/sass/initial/_layout.scss            |  2 +-
 8 files changed, 86 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/components/GamutSelect.svelte

diff --git a/src/lib/components/GamutSelect.svelte b/src/lib/components/GamutSelect.svelte
new file mode 100644
index 00000000..86e31e1a
--- /dev/null
+++ b/src/lib/components/GamutSelect.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { GAMUTS } from '$lib/constants';
+  import { gamut } from '$lib/stores';
+</script>
+
+<div data-field="color-format">
+  <label for="color-format" data-label>Gamut</label>
+  <select name="color-format" id="color-format" bind:value={$gamut}>
+    {#each GAMUTS as gamut (gamut.format)}
+      {#if gamut}
+        <option value={gamut.format}>{gamut.name}</option>
+      {/if}
+    {/each}
+  </select>
+</div>
+
+<style lang="scss">
+  @use 'config';
+
+  [data-field='color-format'] {
+    align-items: center;
+    column-gap: var(--gutter);
+    display: grid;
+    grid-template:
+      'format-label' auto
+      'format-input' auto / 1fr;
+    justify-content: end;
+
+    @include config.above('sm-page-break') {
+      grid-template: 'format-label format-input' auto / 1fr minmax(10rem, auto);
+    }
+  }
+
+  label {
+    grid-area: format-label;
+
+    @include config.above('sm-page-break') {
+      text-align: right;
+    }
+  }
+
+  select {
+    grid-area: format-input;
+  }
+</style>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 360fff76..0bb934f4 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import GamutSelect from '$lib/components/GamutSelect.svelte';
   import SpaceSelect from '$lib/components/SpaceSelect.svelte';
   import Icon from '$lib/components/util/Icon.svelte';
 </script>
@@ -9,6 +10,7 @@
     <span class="sr-only">OddContrast</span>
   </h1>
   <SpaceSelect />
+  <GamutSelect />
 </header>
 
 <style lang="scss">
diff --git a/src/lib/components/SpaceSelect.svelte b/src/lib/components/SpaceSelect.svelte
index 41fd50fd..c922c5ef 100644
--- a/src/lib/components/SpaceSelect.svelte
+++ b/src/lib/components/SpaceSelect.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <div data-field="color-format">
-  <label for="color-format" data-label>Color Format</label>
+  <label for="color-format" data-label>Format</label>
   <select name="color-format" id="color-format" bind:value={$format}>
     {#each spaces as space (space.id)}
       {#if space}
diff --git a/src/lib/components/colors/Sliders.svelte b/src/lib/components/colors/Sliders.svelte
index 7e970703..9009b0d1 100644
--- a/src/lib/components/colors/Sliders.svelte
+++ b/src/lib/components/colors/Sliders.svelte
@@ -3,7 +3,7 @@
   import type { Writable } from 'svelte/store';
 
   import { type ColorFormatId, SLIDERS } from '$lib/constants';
-  import { ColorSpace } from '$lib/stores';
+  import { ColorSpace, gamut } from '$lib/stores';
   import { getSpaceFromFormatId, sliderGradient } from '$lib/utils';
 
   interface Props {
@@ -20,7 +20,12 @@
     SLIDERS[format].map((id) => {
       const coord = spaceObject.coords[id];
       const range = coord?.range ?? coord?.refRange ?? [0, 1];
-      const gradient = sliderGradient($color, id, range);
+      const gradient = sliderGradient({
+        color: $color,
+        channel: id,
+        range: range,
+        gamut: $gamut,
+      });
       return {
         id,
         name: coord?.name ?? '',
@@ -37,7 +42,12 @@
   );
 
   let alphaGradient = $derived(
-    sliderGradient($color, 'alpha', [0, $color.alpha]),
+    sliderGradient({
+      color: $color,
+      channel: 'alpha',
+      range: [0, $color.alpha],
+      gamut: $gamut,
+    }),
   );
 
   const handleInput = (
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 0edbcf8e..36d94e17 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -24,6 +24,14 @@ export const FORMATS: ColorFormatId[] = [
   'srgb',
 ];
 
+export type ColorGamutId = 'srgb' | 'p3' | 'rec2020';
+
+export const GAMUTS: { name: string; format: ColorGamutId }[] = [
+  { name: 'sRGB', format: 'srgb' },
+  { name: 'P3', format: 'p3' },
+  { name: 'Rec2020', format: 'rec2020' },
+];
+
 export interface FormatGroup {
   name: string;
   formats: ColorFormatId[];
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index cc5773cd..ee866f0d 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -14,7 +14,7 @@ import { writable } from 'svelte/store';
 
 // eslint-disable-next-line import/no-unresolved
 import { browser, dev } from '$app/environment';
-import type { ColorFormatId } from '$lib/constants';
+import type { ColorFormatId, ColorGamutId } from '$lib/constants';
 
 // Register supported color spaces
 ColorSpace.register(HSL);
@@ -32,6 +32,7 @@ export { ColorSpace };
 
 export const INITIAL_VALUES = {
   format: 'p3' as ColorFormatId,
+  gamut: 'p3' as ColorGamutId,
   bg_coord: [0.0967, 0.167, 0.4494] as [number, number, number],
   fg_coord: [0.951, 0.675, 0.7569] as [number, number, number],
   alpha: 1,
@@ -49,6 +50,7 @@ const INITIAL_FG = {
 };
 
 export const format = writable<ColorFormatId>(INITIAL_VALUES.format);
+export const gamut = writable<ColorGamutId>(INITIAL_VALUES.gamut);
 export const bg = writable<PlainColorObject>(INITIAL_BG);
 export const fg = writable<PlainColorObject>(INITIAL_FG);
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index f432f6ee..e5a006e8 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -9,16 +9,22 @@ import {
   to,
 } from 'colorjs.io/fn';
 
-import { type ColorFormatId, FORMATS } from '$lib/constants';
+import { type ColorFormatId, type ColorGamutId, FORMATS } from '$lib/constants';
 
 export const getSpaceFromFormatId = (formatId: ColorFormatId) =>
   formatId === 'hex' ? 'srgb' : formatId;
 
-export const sliderGradient = (
-  color: PlainColorObject,
-  channel: string,
-  range: [number, number],
-) => {
+export const sliderGradient = ({
+  color,
+  channel,
+  range,
+  gamut,
+}: {
+  color: PlainColorObject;
+  channel: string;
+  range: [number, number];
+  gamut: ColorGamutId;
+}) => {
   const start = clone(color);
   const end = clone(color);
   if (channel === 'alpha') {
@@ -44,7 +50,7 @@ export const sliderGradient = (
   }
 
   gradientSteps.forEach((step, index) => {
-    if (inGamut(step, 'p3')) {
+    if (inGamut(step, gamut)) {
       if (wasInGamut === false) {
         inGamutSteps.push(`transparent ${stepWidth * (index + 1)}%`);
       }
diff --git a/src/sass/initial/_layout.scss b/src/sass/initial/_layout.scss
index c8517246..3e1020c7 100644
--- a/src/sass/initial/_layout.scss
+++ b/src/sass/initial/_layout.scss
@@ -40,7 +40,7 @@ body {
   display: grid;
   gap: var(--shim) var(--double-gutter);
   grid-area: header;
-  grid-template: 'logo colorspace' auto / auto 1fr;
+  grid-template: 'logo colorspace gamut' auto / auto 1fr;
 
   @include config.above('sm-page-break') {
     gap: var(--double-gutter);