fix target spaces

oddbird · Oct 31, 2023 · 2152706 · 2152706
1 parent 7cf4118
commit 2152706
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/lib/components/colors/FormatGroup.svelte b/src/lib/components/colors/FormatGroup.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { inGamut, to } from 'colorjs.io/fn';
+  import { inGamut } 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 { ColorSpace } from '$lib/stores';
   import { getSpaceFromFormatId } from '$lib/utils';
 
   import ExternalLink from '../util/ExternalLink.svelte';
@@ -13,9 +14,10 @@
   export let name: string;
   export let formats: ColorFormatId[];
 
-  $: targetSpace = getSpaceFromFormatId(formats[0] as ColorFormatId);
-  $: targetColor = to(color, targetSpace);
-  $: isInGamut = inGamut(targetColor);
+  $: gamutSpace = ColorSpace.get(
+    getSpaceFromFormatId(formats[0] as ColorFormatId),
+  );
+  $: isInGamut = inGamut(color, gamutSpace);
 </script>
 
 <div data-content="format-group">
@@ -24,12 +26,12 @@
     <span data-color-info="warning"
       >Selected color is <ExternalLink
         href="https://www.w3.org/TR/css-color-4/#out-of-gamut"
-        >outside the {targetColor.space.name} gamut.</ExternalLink
+        >outside the {gamutSpace.name} gamut.</ExternalLink
       ></span
     >
   {/if}
   {#each formats as format (format)}
-    <Output {type} color={targetColor} {format} />
+    <Output {type} {color} {format} />
   {/each}
 </div>
 

diff --git a/src/lib/components/colors/Output.svelte b/src/lib/components/colors/Output.svelte
@@ -1,25 +1,28 @@
 <script lang="ts">
-  import { serialize } 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';
   import CopyButton from '$lib/components/util/CopyButton.svelte';
   import type { ColorFormatId } from '$lib/constants';
+  import { getSpaceFromFormatId } from '$lib/utils';
 
   export let type: 'bg' | 'fg';
   export let color: PlainColorObject;
   export let format: ColorFormatId;
 
-  $: colorValue = serialize(color, {
+  $: targetSpace = getSpaceFromFormatId(format);
+  $: targetColor = to(color, targetSpace);
+  $: targetColorValue = serialize(targetColor, {
     format,
     inGamut: false,
   });
 </script>
 
 <ul data-group="output {type}">
   <li data-testid={`format-${format}`}>
-    <CopyButton text={colorValue} />
-    <span data-color-info="value">{colorValue}</span>
+    <CopyButton text={targetColorValue} />
+    <span data-color-info="value">{targetColorValue}</span>
     <SupportWarning {format} />
   </li>
 </ul>