adding display colors to contrast:check

primer · Jun 18, 2024 · c72c763 · c72c763
1 parent 395d45f
commit c72c763
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 0 deletions.
diff --git a/scripts/color-contrast.config.ts b/scripts/color-contrast.config.ts
@@ -89,6 +89,46 @@ const baseRequirements: ContrastRequirement[] = [
   [3, 'control-borderColor-emphasis', 'bgColor-default'],
   [3, 'control-borderColor-emphasis', 'bgColor-muted'],
   // TODO: there are no specific border colors for roles
+  // display colors
+  [4.5, 'display-gray-fgColor', 'display-gray-bgColor-muted'],
+  [4.5, 'display-indigo-fgColor', 'display-indigo-bgColor-muted'],
+  [4.5, 'display-blue-fgColor', 'display-blue-bgColor-muted'],
+  [4.5, 'display-cyan-fgColor', 'display-cyan-bgColor-muted'],
+  [4.5, 'display-teal-fgColor', 'display-teal-bgColor-muted'],
+  [4.5, 'display-pine-fgColor', 'display-pine-bgColor-muted'],
+  [4.5, 'display-green-fgColor', 'display-green-bgColor-muted'],
+  [4.5, 'display-lime-fgColor', 'display-lime-bgColor-muted'],
+  [4.5, 'display-olive-fgColor', 'display-olive-bgColor-muted'],
+  [4.5, 'display-lemon-fgColor', 'display-lemon-bgColor-muted'],
+  [4.5, 'display-yellow-fgColor', 'display-yellow-bgColor-muted'],
+  [4.5, 'display-orange-fgColor', 'display-orange-bgColor-muted'],
+  [4.5, 'display-red-fgColor', 'display-red-bgColor-muted'],
+  [4.5, 'display-coral-fgColor', 'display-coral-bgColor-muted'],
+  [4.5, 'display-pink-fgColor', 'display-pink-bgColor-muted'],
+  [4.5, 'display-plum-fgColor', 'display-plum-bgColor-muted'],
+  [4.5, 'display-purple-fgColor', 'display-purple-bgColor-muted'],
+  [4.5, 'display-brown-fgColor', 'display-brown-bgColor-muted'],
+  [4.5, 'display-auburn-fgColor', 'display-auburn-bgColor-muted'],
+  //
+  [4.5, 'fgColor-onEmphasis', 'display-gray-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-indigo-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-blue-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-cyan-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-teal-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-pine-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-green-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-lime-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-olive-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-lemon-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-yellow-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-orange-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-red-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-coral-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-pink-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-plum-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-purple-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-brown-bgColor-emphasis'],
+  [4.5, 'fgColor-onEmphasis', 'display-auburn-bgColor-emphasis'],
 ]
 
 const highContrast: ContrastRequirement[] = [

diff --git a/scripts/color-contrast.ts b/scripts/color-contrast.ts
@@ -48,6 +48,9 @@ const runContrastTest = (colorPairs: ContrastRequirement[], tokens: Tokens): con
     // build required string
     const minimumContrastRatio = `${minimumContrast}:1`
     // colorB is fully opaque
+    if (!tokens[colorA]) throw new Error(`Color token not found ${colorB}`)
+    if (!tokens[colorB]) throw new Error(`Color token not found ${colorB}`)
+
     if (parseToRgba(tokens[colorB].value)[3] === 1) {
       return {
         contrastPair,