working on display colors

primer · Jun 27, 2024 · 6e5d07f · 6e5d07f
1 parent 4a2f4a1
commit 6e5d07f
Show file tree

Hide file tree

Showing 3 changed files with 237 additions and 5 deletions.
diff --git a/docs/storybook/stories/DisplayColorTesting.stories.tsx b/docs/storybook/stories/DisplayColorTesting.stories.tsx
@@ -12,7 +12,27 @@ export default {
   },
 }
 
-const colors = ['gray', 'blue', 'indigo', 'cyan', 'teal', 'green', 'red', 'yellow', 'purple', 'orange', 'pink']
+const colors = [
+  'gray',
+  'blue',
+  'indigo',
+  'cyan',
+  'teal',
+  'pine',
+  'green',
+  'lime',
+  'olive',
+  'lemon',
+  'yellow',
+  'orange',
+  'red',
+  'coral',
+  'pink',
+  'plum',
+  'purple',
+  'brown',
+  'auburn',
+]
 
 export const DisplayDemo = () => {
   return (

diff --git a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5
@@ -5,10 +5,6 @@
  */
 {
   fgColor: {
-    onEmphasis: {
-      $value: '{base.color.neutral.9}',
-      $type: 'color',
-    },
     muted: {
       $value: '{base.color.neutral.1}',
       $type: 'color',

diff --git a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 b/src/tokens/functional/color/light/overrides/light.high-contrast.json5
@@ -611,5 +611,221 @@
         },
       },
     },
+    lime: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.lime.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.lime.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.lime.6}',
+          $type: 'color',
+        },
+      },
+    },
+    olive: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.olive.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.olive.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.olive.6}',
+          $type: 'color',
+        },
+      },
+    },
+    lemon: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.lemon.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.lemon.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.lemon.6}',
+          $type: 'color',
+        },
+      },
+    },
+    yellow: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.yellow.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.yellow.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.yellow.6}',
+          $type: 'color',
+        },
+      },
+    },
+  },
+  orange: {
+    bgColor: {
+      emphasis: {
+        $value: '{base.display.color.orange.7}',
+        $type: 'color',
+      },
+    },
+    fgColor: {
+      $value: '{base.display.color.orange.8}',
+      $type: 'color',
+    },
+    borderColor: {
+      emphasis: {
+        $value: '{base.display.color.orange.6}',
+        $type: 'color',
+      },
+    },
+  },
+  red: {
+    bgColor: {
+      emphasis: {
+        $value: '{base.display.color.red.7}',
+        $type: 'color',
+      },
+    },
+    fgColor: {
+      $value: '{base.display.color.red.8}',
+      $type: 'color',
+    },
+    borderColor: {
+      emphasis: {
+        $value: '{base.display.color.red.6}',
+        $type: 'color',
+      },
+    },
+  },
+  coral: {
+    bgColor: {
+      emphasis: {
+        $value: '{base.display.color.coral.7}',
+        $type: 'color',
+      },
+    },
+    fgColor: {
+      $value: '{base.display.color.coral.8}',
+      $type: 'color',
+    },
+    borderColor: {
+      emphasis: {
+        $value: '{base.display.color.coral.6}',
+        $type: 'color',
+      },
+    },
+  },
+  pink: {
+    bgColor: {
+      emphasis: {
+        $value: '{base.display.color.pink.7}',
+        $type: 'color',
+      },
+    },
+    fgColor: {
+      $value: '{base.display.color.pink.8}',
+      $type: 'color',
+    },
+    borderColor: {
+      emphasis: {
+        $value: '{base.display.color.pink.6}',
+        $type: 'color',
+      },
+    },
+  },
+  plum: {
+    bgColor: {
+      emphasis: {
+        $value: '{base.display.color.plum.7}',
+        $type: 'color',
+      },
+    },
+    fgColor: {
+      $value: '{base.display.color.plum.8}',
+      $type: 'color',
+    },
+    borderColor: {
+      emphasis: {
+        $value: '{base.display.color.plum.6}',
+        $type: 'color',
+      },
+    },
+  },
+  purple: {
+    bgColor: {
+      emphasis: {
+        $value: '{base.display.color.purple.7}',
+        $type: 'color',
+      },
+    },
+    fgColor: {
+      $value: '{base.display.color.purple.8}',
+      $type: 'color',
+    },
+    borderColor: {
+      emphasis: {
+        $value: '{base.display.color.purple.6}',
+        $type: 'color',
+      },
+    },
+  },
+  brown: {
+    bgColor: {
+      emphasis: {
+        $value: '{base.display.color.brown.7}',
+        $type: 'color',
+      },
+    },
+    fgColor: {
+      $value: '{base.display.color.brown.8}',
+      $type: 'color',
+    },
+    borderColor: {
+      emphasis: {
+        $value: '{base.display.color.brown.6}',
+        $type: 'color',
+      },
+    },
+  },
+  auburn: {
+    bgColor: {
+      emphasis: {
+        $value: '{base.display.color.auburn.7}',
+        $type: 'color',
+      },
+    },
+    fgColor: {
+      $value: '{base.display.color.auburn.8}',
+      $type: 'color',
+    },
+    borderColor: {
+      emphasis: {
+        $value: '{base.display.color.auburn.6}',
+        $type: 'color',
+      },
+    },
   },
 }