Add implementation warning for browsers

src/lib/components/colors/ImplementationWarning.svelte

@@ -0,0 +1,27 @@
+<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}

src/lib/components/colors/index.svelte

@@ -1,6 +1,7 @@
 <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';
@@ -9,6 +10,7 @@
 <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} />

src/lib/stores.ts

@@ -31,9 +31,9 @@ ColorSpace.register(REC_2020);
 export { ColorSpace };
 
 export const INITIAL_VALUES = {
-  format: 'oklch' as ColorFormatId,
-  bg_coord: [0.3259, 0.1333, 265.49] as [number, number, number],
-  fg_coord: [0.8241, 0.1061, 0.8587] as [number, number, number],
+  format: 'p3' as ColorFormatId,
+  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,
 };
 

test/js/lib/components/SpaceSelect.spec.ts

@@ -2,7 +2,7 @@ import { fireEvent, render } from '@testing-library/svelte';
 import { get } from 'svelte/store';
 
 import Space from '$lib/components/SpaceSelect.svelte';
-import { bg, fg, reset } from '$lib/stores';
+import { bg, fg, INITIAL_VALUES, reset } from '$lib/stores';
 
 describe('Space', () => {
   afterEach(() => {
@@ -12,8 +12,8 @@ describe('Space', () => {
   it('renders editable space select', async () => {
     const { getByLabelText } = render(Space);
 
-    expect(get(bg).space.id).toBe('oklch');
-    expect(get(fg).space.id).toBe('oklch');
+    expect(get(bg).space.id).toBe(INITIAL_VALUES.format);
+    expect(get(fg).space.id).toBe(INITIAL_VALUES.format);
 
     const select = getByLabelText('Color Format');
     await fireEvent.change(select, { target: { value: 'hsl' } });