feat: add duet color token

ccontrols · Sep 25, 2020 · 7819395 · 7819395
1 parent 505c541
commit 7819395
Show file tree

Hide file tree

Showing 8 changed files with 382 additions and 20 deletions.
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -22,6 +22,7 @@ import {
   CanvasColorPalette,
   CedarColorPalette,
   CometColorPalette,
+  DuetColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -560,4 +561,88 @@ import { CometColorPalette } from '@component-controls/design-tokens';
       sass: '$comet-color-midnight-60',
     },
   }}
+/>
+
+## DuetColor
+
+The [DuetColor](/api/design-tokens-colors-duetcolor--overview) component displays the color as a row, with color, name, description, var and sas variables and contrast ratio.
+
+Design inspired from [Duet](https://www.duetds.com/tokens/#color).
+
+```
+import { DuetColorPalette } from '@component-controls/design-tokens';
+
+<DuetColorPalette
+  palette={{
+    'Gray Darker': {
+      value: '#657787',
+      description:
+        'Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts.',
+      sass: '$color-gray-darker',
+      varName: 'var(--color-gray-darker)',
+      status: 'ok',
+    },
+    'Gray Dark': {
+      value: '#909599',
+      description:
+        'Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text.',
+      sass: '$color-gray-dark',
+      varName: 'var(--color-gray-dark)',
+      status: 'ok',
+    },
+    'Data 01': {
+      value: '#7a01c4',
+      description:
+        'Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.',
+      sass: '$color-data-01',
+      varName: 'var(--color-data-01)',
+      status: 'warning',
+    },
+    'Data 06': {
+      value: '#c21565',
+      description:
+        'Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.',
+      sass: '$color-data-06',
+      varName: 'var(--color-data-06)',
+      status: 'error',
+    },
+  }}
+/>
+```
+
+<DuetColorPalette
+  palette={{
+    'Gray Darker': {
+      value: '#657787',
+      description:
+        'Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts.',
+      sass: '$color-gray-darker',
+      varName: 'var(--color-gray-darker)',
+      status: 'ok',
+    },
+    'Gray Dark': {
+      value: '#909599',
+      description:
+        'Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text.',
+      sass: '$color-gray-dark',
+      varName: 'var(--color-gray-dark)',
+      status: 'ok',
+    },
+    'Data 01': {
+      value: '#7a01c4',
+      description:
+        'Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.',
+      sass: '$color-data-01',
+      varName: 'var(--color-data-01)',
+      status: 'warning',
+    },
+    'Data 06': {
+      value: '#c21565',
+      description:
+        'Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.',
+      sass: '$color-data-06',
+      varName: 'var(--color-data-06)',
+      status: 'error',
+    },
+  }}
 />
diff --git a/ui/design-tokens/src/Colors/BoltColor/BoltColor.tsx b/ui/design-tokens/src/Colors/BoltColor/BoltColor.tsx
@@ -5,20 +5,9 @@ import { CopyContainer } from '@component-controls/components';
 import tinycolor from 'tinycolor2';
 import { CheckCircleFillIcon, XCircleFillIcon } from '@primer/octicons-react';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps, ColorValue } from '../types';
+import { ColorBlockProps, ColorValue, colorContrast } from '../types';
 import { GridContainerProps, GridContainer } from '../GridContainer';
 
-const tests: Record<string, { ratio: number; fontSize: string }> = {
-  small: {
-    ratio: 4.5,
-    fontSize: '14px',
-  },
-  large: {
-    ratio: 3,
-    fontSize: '18px',
-  },
-};
-
 const PassFail: FC<{ status: 'pass' | 'fail' }> = ({ status }) => (
   <div
     sx={{
@@ -47,10 +36,14 @@ const ContrastTest: FC<{
     <tr>
       <td sx={{ color }}>{`${color} (${contrast.toFixed(2)})`}</td>
       <td sx={{ textAlign: 'right', py: 1 }}>
-        <PassFail status={contrast >= tests.large.ratio ? 'pass' : 'fail'} />
+        <PassFail
+          status={contrast >= colorContrast.large.ratio ? 'pass' : 'fail'}
+        />
       </td>
       <td sx={{ textAlign: 'right', py: 1 }}>
-        <PassFail status={contrast >= tests.small.ratio ? 'pass' : 'fail'} />
+        <PassFail
+          status={contrast >= colorContrast.small.ratio ? 'pass' : 'fail'}
+        />
       </td>
     </tr>
   );
@@ -132,12 +125,18 @@ export const BoltColor: FC<ColorBlockProps> = ({ name, color }) => {
                 <tr sx={{ color: textColor }}>
                   <td>Text size</td>
                   <td
-                    sx={{ textAlign: 'right', fontSize: tests.large.fontSize }}
+                    sx={{
+                      textAlign: 'right',
+                      fontSize: colorContrast.large.fontSize,
+                    }}
                   >
                     Aa
                   </td>
                   <td
-                    sx={{ textAlign: 'right', fontSize: tests.small.fontSize }}
+                    sx={{
+                      textAlign: 'right',
+                      fontSize: colorContrast.small.fontSize,
+                    }}
                   >
                     Aa
                   </td>

diff --git a/ui/design-tokens/src/Colors/CometColor/CometColor.tsx b/ui/design-tokens/src/Colors/CometColor/CometColor.tsx
@@ -4,7 +4,7 @@ import { jsx, Box, SxStyleProp } from 'theme-ui';
 import tinycolor from 'tinycolor2';
 import { CopyContainer } from '@component-controls/components';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps, ColorValue } from '../types';
+import { ColorBlockProps, ColorValue, colorContrast } from '../types';
 import { FlexContainerProps, FlexContainer } from '../FlexContainer';
 
 /**
@@ -29,11 +29,11 @@ export const CometColor: FC<ColorBlockProps> = ({ name, color }) => {
     color: 'black',
     fontSize: 1,
   };
-  if (contrast >= 7) {
+  if (contrast >= colorContrast.AAA.ratio) {
     accessibilityTest = <div sx={{ ...testProps, bg: 'gray' }}>AAA</div>;
-  } else if (contrast >= 4.5) {
+  } else if (contrast >= colorContrast.small.ratio) {
     accessibilityTest = <div sx={{ ...testProps, bg: 'gray' }}>AA</div>;
-  } else if (contrast >= 3) {
+  } else if (contrast >= colorContrast.large.ratio) {
     accessibilityTest = <div sx={{ ...testProps, bg: '#e6c719' }}>AA18</div>;
   } else {
     accessibilityTest = (

diff --git a/ui/design-tokens/src/Colors/DuetColor/DuetColor.stories.tsx b/ui/design-tokens/src/Colors/DuetColor/DuetColor.stories.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { DuetColor, DuetColorPalette } from './DuetColor';
+import { ColorProps } from '../types';
+
+export default {
+  title: 'Design Tokens/Colors/DuetColor',
+  component: DuetColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <DuetColor name={name} color={color} />
+);
+
+overview.controls = {
+  name: { type: 'text', value: 'Primary Blue Dark' },
+  color: {
+    type: 'object',
+    value: {
+      value: { type: 'color', value: '#004d80' },
+      description: {
+        type: 'text',
+        value:
+          'Dark version of primary blue that is accessible with white. Most commonly used to indicate hover and active states of an item with primary blue background.',
+      },
+      sass: { type: 'text', value: '$color-primary-dark' },
+      varName: { type: 'text', value: 'var(--color-primary-dark)' },
+      status: {
+        type: 'options',
+        options: ['ok', 'warning', 'error'],
+        value: 'ok',
+      },
+    },
+  },
+};
+
+export const palette = () => (
+  <DuetColorPalette
+    palette={{
+      'Status Danger': {
+        value: '#de2362',
+        description:
+          'Danger red that is accessible with white. Only used in special cases like form validation and messaging.',
+        sass: '$color-danger',
+        varName: 'var(--color-danger)',
+        status: 'ok',
+      },
+      'Status Warning': {
+        value: '#f7b228',
+        description:
+          'Warning orange (non-accessible) is only used in special cases like form validation and messaging.',
+        sass: '$color-warning',
+        varName: 'var(--color-warning)',
+        status: 'ok',
+      },
+      'Status Success': {
+        value: '#00875a',
+        description:
+          'Success green that is accessible with white. Only used in special cases like form validation and messaging.',
+        sass: '$color-success',
+        varName: 'var(--color-success)',
+        status: 'ok',
+      },
+      'Gray Darker': {
+        value: '#657787',
+        description:
+          'Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts.',
+        sass: '$color-gray-darker',
+        varName: 'var(--color-gray-darker)',
+        status: 'ok',
+      },
+      'Gray Dark': {
+        value: '#909599',
+        description:
+          'Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text.',
+        sass: '$color-gray-dark',
+        varName: 'var(--color-gray-dark)',
+        status: 'ok',
+      },
+      'Data 01': {
+        value: '#7a01c4',
+        description:
+          'Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.',
+        sass: '$color-data-01',
+        varName: 'var(--color-data-01)',
+        status: 'warning',
+      },
+      'Data 06': {
+        value: '#c21565',
+        description:
+          'Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.',
+        sass: '$color-data-06',
+        varName: 'var(--color-data-06)',
+        status: 'error',
+      },
+    }}
+  />
+);