Merge branch 'bug/fix-crash-on-invalid-color'

src/ColorPreview.tsx

@@ -4,12 +4,14 @@ interface ColorPreviewProps {
   color: string;
 }
 
+const UNPARSABLE_COLOR_VALUES = ['inherit', 'initial', 'unset'];
+
 // heuristic based on token name/scope and maybe even the format of the value
 export const isColor = (value: string): boolean => {
   // taken from https://stackoverflow.com/a/56266358/973537
   const s = new Option().style;
   s.color = value;
-  return s.color !== '';
+  return s.color !== '' && !UNPARSABLE_COLOR_VALUES.includes(s.color);
 };
 
 const ColorPreview = ({color}: ColorPreviewProps): JSX.Element | null => {

src/TokenRow.stories.mdx

@@ -48,6 +48,28 @@ support this yet!_
   </Story>
 </Canvas>
 
+**CSS color properties**
+
+<Canvas>
+  <Story
+    name="CSS color: inherit"
+    args={{
+      designToken: {
+        name: 'ofColorFg',
+        value: 'inherit',
+        original: {
+          value: 'inherit',
+        },
+        path: ['of', 'color', 'fg'],
+        attributes: {},
+      },
+      contained: false,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
 ## Props
 
 <ArgsTable of={TokenRow} />