Merge pull request #146 from oddbird/color-issues

Add color issues section

src/lib/components/colors/SupportWarning.svelte

@@ -26,8 +26,8 @@
     <ExternalLink
       href="https://caniuse.com/css-lch-lab,mdn-css_types_color_hsl,mdn-css_types_color_hsla,mdn-css_types_color_oklab,mdn-css_types_color_oklch,css-color-function"
     >
-      not supported by your current browser.</ExternalLink
-    >
+      not supported by your current browser</ExternalLink
+    >.
   </span>
 {/if}
 

src/lib/components/ratio/ColorIssues.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  import ExternalLink from '$lib/components/util/ExternalLink.svelte';
+
+  export let pass: boolean;
+
+  let startOpen = false;
+  onMount(() => {
+    startOpen = window.matchMedia('(min-width: 80em)').matches;
+  });
+</script>
+
+<details class="known-issues" open={startOpen} data-pass={pass}>
+  <summary>Known Color Issues</summary>
+  <dl class="issues-list">
+    <dt>Gamut Mapping Implementation</dt>
+    <dd>
+      <p>
+        Browsers implemented gamut mapping using clipping, which is fast but
+        provides inferior results compared to the algorithm defined in the <ExternalLink
+          href="https://drafts.csswg.org/css-color/#binsearch"
+          >CSS Spec</ExternalLink
+        >. Until browsers are updated, colors that are out of gamut for your
+        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>
+
+<style lang="scss">
+  @use 'config';
+  .known-issues {
+    grid-area: knownissues;
+    padding: var(--gutter);
+
+    @include config.above('lg-page-break') {
+      margin-inline: calc(var(--gutter) * -1);
+    }
+  }
+
+  summary {
+    align-items: center;
+    display: grid;
+    gap: var(--shim-plus);
+    grid-template-columns: max-content var(--triangle-height);
+  }
+
+  .issues-list {
+    display: grid;
+    gap: var(--half-shim);
+    grid-auto-rows: auto;
+    grid-template-columns: 1fr;
+    margin-block-start: var(--gutter);
+  }
+
+  dt {
+    font-weight: bold;
+  }
+
+  dd {
+    --description-margin-inline: 0;
+  }
+
+  p {
+    margin-block-end: var(--gutter);
+  }
+</style>

src/lib/components/ratio/index.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
   import { contrast } from 'colorjs.io/fn';
 
+  import ColorIssues from '$lib/components/ratio/ColorIssues.svelte';
   import Result from '$lib/components/ratio/Result.svelte';
   import ExternalLink from '$lib/components/util/ExternalLink.svelte';
   import { RATIOS } from '$lib/constants';
   import { bg, fg } from '$lib/stores';
 
   $: ratio = contrast($bg, $fg, 'WCAG21');
   $: displayRatio = Math.round((ratio + Number.EPSILON) * 100) / 100;
-  $: pass = ratio >= RATIOS.AA.Large;
+  $: pass = ratio >= RATIOS.AA.Normal;
 </script>
 
 <aside data-layout="results">
@@ -24,8 +25,8 @@
       In WCAG 2, contrast is a measure of the difference in perceived brightness
       between two colors, expressed as a ratio. <ExternalLink
         href="https://webaim.org/articles/contrast/#ratio"
-        >Learn more about contrast ratio requirements.</ExternalLink
-      >
+        >Learn more about contrast ratio requirements</ExternalLink
+      >.
     </p>
   </div>
 
@@ -65,6 +66,7 @@
       <dd>Bold Weight</dd>
     </dl>
   </div>
+  <ColorIssues {pass} />
 </aside>
 
 <style lang="scss">
@@ -74,14 +76,18 @@
     background-color: var(--bgcolor);
     color: var(--fgcolor);
     display: grid;
-    gap: var(--result-layout-gap, var(--double-gutter));
+    gap: var(--result-layout-gap, var(--shim));
     grid-template:
       'contrastinfo' min-content
-      'status' min-content / 1fr;
+      'status' min-content
+      'contrastdefined' min-content
+      'knownissues' min-content / 1fr;
 
     @include config.between('sm-page-break', 'lg-page-break') {
       --result-layout-gap: var(--gutter-plus);
-      grid-template: 'contrastinfo status' auto / 1fr 1fr;
+      grid-template:
+        'contrastinfo status' auto
+        '... knownissues' auto / 1fr 1fr;
     }
 
     @include config.above('lg-page-break') {

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,
 };
 

src/sass/config/scale/_ui.scss

@@ -15,3 +15,5 @@ $icon-medium: 1.5em;
 $ratio-width: 10rem;
 $range-thumb-size: 1.35rem;
 $range-input: 0.85rem;
+$triangle-width: var(--shim);
+$triangle-height: var(--shim-plus);

src/sass/patterns/_disclosure.scss

@@ -0,0 +1,43 @@
+// The Details disclosure element
+// ------------------------------
+
+details {
+  --link: var(--fgcolor);
+  --link-focus: var(--fgcolor);
+
+  background-color: var(--status-result-bg, var(--bgcolor));
+  border-radius: var(--border-radius);
+  color: var(--status-result-fg, var(--fgcolor));
+}
+
+summary {
+  cursor: pointer;
+  font-weight: bold;
+
+  // Hides marker some browsers add
+  &::marker {
+    content: none;
+  }
+
+  // Hides marker webkit adds
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &::before {
+    border-color: transparent transparent transparent currentcolor;
+    border-style: solid;
+    border-width: var(--triangle-width) 0 var(--triangle-width)
+      var(--triangle-height);
+    content: '';
+    grid-column: 2;
+    grid-row: 1;
+    margin-block-start: var(--half-shim);
+    rotate: var(--rotate-triangle, none);
+    transition: rotate var(--fast);
+
+    [open] & {
+      --rotate-triangle: 90deg;
+    }
+  }
+}

src/sass/patterns/_index.scss

@@ -7,4 +7,5 @@
 @forward 'buttons';
 @forward 'icons';
 @forward 'lists';
+@forward 'disclosure';
 @forward 'themes';

src/sass/patterns/_lists.scss

@@ -11,15 +11,19 @@ li {
 [data-list='inline'] {
   align-items: center;
   display: flex;
-  gap: var(--gutter);
+  gap: var(--shim);
 }
 
 dl {
   display: grid;
   grid-template-columns: auto 1fr;
   margin-block: var(--half-shim) var(--double-gutter);
+
+  &:last-child {
+    margin-block-end: 0;
+  }
 }
 
 dd {
-  margin-inline-start: var(--gutter);
+  margin-inline-start: var(--description-margin-inline, var(--gutter));
 }

src/sass/patterns/_themes.scss

@@ -5,6 +5,8 @@
 
 // If the ratio is too low, make sure important info has high enough contrast
 [data-pass='false'] {
+  --link: var(--status-result-fg);
+  --link-focus: var(--status-result-fg);
   --status-result-bg: var(--text);
   --status-result-fg: var(--bg);
 }

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' } });