Merge pull request #145 from oddbird/space-warning

Add implementation warning for browsers
oddbird · Dec 19, 2023 · 8833240 · 8833240
2 parents bc04fb5 + 2ad6e3b
commit 8833240
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
@@ -25,6 +25,31 @@
         screen may be displayed very differently than expected.
       </p>
     </dd>
+    <dt>Checking for Out of Gamut Colors</dt>
+    <dd>
+      <p>
+        The new color features in CSS allow for a much wider range of colors,
+        many of which cannot be shown on many (or any) screens. When selecting
+        colors, consider that most users will see these colors on a display that
+        supports the <code>sRGB</code> or <code>P3</code> gamut.
+      </p>
+      <p>There are two primary ways a color can be out of gamut:</p>
+      <ol>
+        <li>
+          Choosing a color in a space with a wider gamut, especially when a
+          channel is near one of the edges of its range.
+        </li>
+        <li>
+          Specifying a channel value that is outside its range. While the
+          sliders in this tool set hard boundaries, values outside these
+          boundaries are still valid, and can be entered in the text input.
+        </li>
+      </ol>
+      <p>
+        When a color is out of gamut for the user's screen, the browser will
+        adjust the color to be in gamut.
+      </p>
+    </dd>
   </dl>
 </details>
 

diff --git a/src/lib/stores.ts b/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,
 };
 

diff --git a/test/js/lib/components/SpaceSelect.spec.ts b/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' } });