From 0ac29162610870dbbe25aefef8681cf73cf1f572 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <jamesnw@gmail.com>
Date: Tue, 12 Dec 2023 16:44:51 -0500
Subject: [PATCH] Remove implementation warning

---
 .../colors/ImplementationWarning.svelte       | 27 -------------------
 src/lib/components/colors/index.svelte        |  2 --
 2 files changed, 29 deletions(-)
 delete mode 100644 src/lib/components/colors/ImplementationWarning.svelte

diff --git a/src/lib/components/colors/ImplementationWarning.svelte b/src/lib/components/colors/ImplementationWarning.svelte
deleted file mode 100644
index 77ac8b21..00000000
--- a/src/lib/components/colors/ImplementationWarning.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-  import ExternalLink from '$lib/components/util/ExternalLink.svelte';
-  import Icon from '$lib/components/util/Icon.svelte';
-  import type { ColorFormatId } from '$lib/constants';
-  import { ColorSpace } from '$lib/stores';
-  import { getSpaceFromFormatId } from '$lib/utils';
-
-  export let format: ColorFormatId;
-
-  $: targetSpace = getSpaceFromFormatId(format);
-  $: spaceObject = ColorSpace.get(targetSpace);
-  // TODO: Can be replaced with spaceObject.isUnbounded in next version of
-  // Color.js.
-  $: isUnbounded = Object.values(spaceObject.coords).every(
-    (coord) => !('range' in coord),
-  );
-</script>
-
-{#if isUnbounded}
-  <span data-color-info="warning"
-    ><Icon name="warning" /> Browser rendering for colors outside of the display
-    gamut is incorrect
-    <ExternalLink href="https://github.com/w3c/csswg-drafts/issues/9449">
-      according to the CSS specification.</ExternalLink
-    >
-  </span>
-{/if}
diff --git a/src/lib/components/colors/index.svelte b/src/lib/components/colors/index.svelte
index e2f81486..e666ed02 100644
--- a/src/lib/components/colors/index.svelte
+++ b/src/lib/components/colors/index.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import Formats from '$lib/components/colors/Formats.svelte';
   import Header from '$lib/components/colors/Header.svelte';
-  import ImplementationWarning from '$lib/components/colors/ImplementationWarning.svelte';
   import Sliders from '$lib/components/colors/Sliders.svelte';
   import SupportWarning from '$lib/components/colors/SupportWarning.svelte';
   import { bg, fg, format } from '$lib/stores';
@@ -10,7 +9,6 @@
 <h2 class="sr-only">Check the contrast ratio between two colors</h2>
 
 <SupportWarning format={$format} />
-<ImplementationWarning format={$format} />
 
 <form data-form="contrast-checker" data-layout="color-form">
   <Header type="bg" color={bg} format={$format} />