Group formats

oddbird · Oct 26, 2023 · ddfb010 · ddfb010
1 parent f92ec4a
commit ddfb010
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 16 deletions.
diff --git a/src/lib/components/colors/FormatGroup.svelte b/src/lib/components/colors/FormatGroup.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { inGamut, to } from 'colorjs.io/fn';
+  import type { PlainColorObject } from 'colorjs.io/types/src/color';
+
+  import Output from '$lib/components/colors/Output.svelte';
+  import type { ColorFormatId } from '$lib/constants';
+  import { getSpaceFromFormatId } from '$lib/utils';
+
+  import ExternalLink from '../util/ExternalLink.svelte';
+
+  export let type: 'bg' | 'fg';
+  export let color: PlainColorObject;
+  export let name: string;
+  export let formats: ColorFormatId[];
+
+  $: targetSpace = getSpaceFromFormatId(formats[0] as ColorFormatId);
+  $: targetColor = to(color, targetSpace);
+  $: isInGamut = inGamut(targetColor);
+</script>
+
+<div data-content="format-group">
+  <h5>{name}</h5>
+  {#if !isInGamut}
+    <span data-color-info="warning"
+      >Selected color is outside the {targetColor.space.name} gamut.</span
+    ><ExternalLink href="https://www.w3.org/TR/css-color-4/#out-of-gamut"
+    ></ExternalLink>
+  {/if}
+  {#each formats as format (format)}
+    <Output {type} {color} {format} />
+  {/each}
+</div>
+
+<style lang="scss">
+  [data-color-info='warning'] {
+    grid-area: message;
+  }
+</style>
diff --git a/src/lib/components/colors/Formats.svelte b/src/lib/components/colors/Formats.svelte
@@ -1,22 +1,38 @@
 <script lang="ts">
   import type { PlainColorObject } from 'colorjs.io/types/src/color';
 
-  import Output from '$lib/components/colors/Output.svelte';
+  import FormatGroup from '$lib/components/colors/FormatGroup.svelte';
   import type { ColorFormatId } from '$lib/constants';
-  import { FORMATS } from '$lib/constants';
+  import { FORMAT_GROUPS, FORMATS } from '$lib/constants';
 
   export let type: 'bg' | 'fg';
   export let color: PlainColorObject;
   export let format: ColorFormatId;
 
+  function otherFormatGroups(
+    selectedFormat: ColorFormatId,
+  ): typeof FORMAT_GROUPS {
+    const otherFormats: typeof FORMAT_GROUPS = {};
+    FORMATS.filter((s) => s !== format);
+    Object.keys(FORMAT_GROUPS).forEach((key) => {
+      const groupFormats = FORMAT_GROUPS[key]!.filter(
+        (s) => s !== selectedFormat,
+      );
+      if (groupFormats.length) {
+        otherFormats[key] = groupFormats;
+      }
+    });
+    return otherFormats;
+  }
+
   $: displayType = type === 'bg' ? 'Background' : 'Foreground';
-  $: otherFormats = FORMATS.filter((s) => s !== format);
+  $: otherFormats = otherFormatGroups(format);
 </script>
 
 <div data-content="formats" data-column="tool">
   <h4 class="small-only label">{displayType} Color</h4>
-  {#each otherFormats as format (format)}
-    <Output {type} {color} {format} />
+  {#each Object.entries(otherFormats) as [name, formats]}
+    <FormatGroup {type} {color} {name} {formats} />
   {/each}
 </div>
 

diff --git a/src/lib/components/colors/Output.svelte b/src/lib/components/colors/Output.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { inGamut, serialize, to } from 'colorjs.io/fn';
+  import { serialize, to } from 'colorjs.io/fn';
   import type { PlainColorObject } from 'colorjs.io/types/src/color';
 
   import SupportWarning from '$lib/components/colors/SupportWarning.svelte';
@@ -13,7 +13,6 @@
 
   $: targetSpace = getSpaceFromFormatId(format);
   $: targetColor = to(color, targetSpace);
-  $: isInGamut = inGamut(targetColor);
   $: targetColorValue = serialize(targetColor, {
     format,
     inGamut: false,
@@ -25,11 +24,6 @@
     <CopyButton text={targetColorValue} />
     <span data-color-info="value">{targetColorValue}</span>
     <SupportWarning {format} />
-    {#if !isInGamut}
-      <span data-color-info="warning"
-        >This color is outside the {targetColor.space.name} gamut.</span
-      >
-    {/if}
   </li>
 </ul>
 
@@ -45,8 +39,4 @@
   [data-color-info='value'] {
     grid-area: color;
   }
-
-  [data-color-info='warning'] {
-    grid-area: message;
-  }
 </style>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -24,6 +24,12 @@ export const FORMATS: ColorFormatId[] = [
   'srgb',
 ];
 
+export const FORMAT_GROUPS: { [key: string]: ColorFormatId[] } = {
+  'sRGB Formats': ['hex', 'hsl', 'srgb'],
+  'Unbounded Spaces': ['lab', 'lch', 'oklab', 'oklch'],
+  'Display p3 Space': ['p3'],
+};
+
 export const RATIOS = {
   AA: {
     Normal: 4.5,