From 7cf4118d5117edc7ef89c192bb55035306c7ff06 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Tue, 31 Oct 2023 10:38:17 -0400
Subject: [PATCH] review

---
 src/lib/components/colors/FormatGroup.svelte | 10 ++++++----
 src/lib/components/colors/Formats.svelte     |  3 +--
 src/lib/components/colors/Output.svelte      | 11 ++++-------
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/colors/FormatGroup.svelte b/src/lib/components/colors/FormatGroup.svelte
index f3dca99e..4c6ad656 100644
--- a/src/lib/components/colors/FormatGroup.svelte
+++ b/src/lib/components/colors/FormatGroup.svelte
@@ -22,12 +22,14 @@
   <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>
+      >Selected color is <ExternalLink
+        href="https://www.w3.org/TR/css-color-4/#out-of-gamut"
+        >outside the {targetColor.space.name} gamut.</ExternalLink
+      ></span
+    >
   {/if}
   {#each formats as format (format)}
-    <Output {type} {color} {format} />
+    <Output {type} color={targetColor} {format} />
   {/each}
 </div>
 
diff --git a/src/lib/components/colors/Formats.svelte b/src/lib/components/colors/Formats.svelte
index e39ce764..8147f16e 100644
--- a/src/lib/components/colors/Formats.svelte
+++ b/src/lib/components/colors/Formats.svelte
@@ -3,7 +3,7 @@
 
   import FormatGroup from '$lib/components/colors/FormatGroup.svelte';
   import type { ColorFormatId } from '$lib/constants';
-  import { FORMAT_GROUPS, FORMATS } from '$lib/constants';
+  import { FORMAT_GROUPS } from '$lib/constants';
 
   export let type: 'bg' | 'fg';
   export let color: PlainColorObject;
@@ -13,7 +13,6 @@
     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,
diff --git a/src/lib/components/colors/Output.svelte b/src/lib/components/colors/Output.svelte
index 77f83dc8..971271f8 100644
--- a/src/lib/components/colors/Output.svelte
+++ b/src/lib/components/colors/Output.svelte
@@ -1,19 +1,16 @@
 <script lang="ts">
-  import { serialize, to } from 'colorjs.io/fn';
+  import { serialize } 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;
 
-  $: targetSpace = getSpaceFromFormatId(format);
-  $: targetColor = to(color, targetSpace);
-  $: targetColorValue = serialize(targetColor, {
+  $: colorValue = serialize(color, {
     format,
     inGamut: false,
   });
@@ -21,8 +18,8 @@
 
 <ul data-group="output {type}">
   <li data-testid={`format-${format}`}>
-    <CopyButton text={targetColorValue} />
-    <span data-color-info="value">{targetColorValue}</span>
+    <CopyButton text={colorValue} />
+    <span data-color-info="value">{colorValue}</span>
     <SupportWarning {format} />
   </li>
 </ul>