feat: add comet color token

ccontrols · Sep 24, 2020 · e3ed82d · e3ed82d
1 parent 9e76204
commit e3ed82d
Show file tree

Hide file tree

Showing 6 changed files with 246 additions and 1 deletion.
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -20,6 +20,7 @@ import {
   BoltColorPalette,
   CanvasColorPalette,
   CedarColorPalette,
+  CometColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -462,4 +463,65 @@ import { CedarColorPalette } from '@component-controls/design-tokens';
       description: 'Color of warning messages',
     },
   }}
+/>
+
+
+## CometColor
+
+The [CometColor](/api/design-tokens-colors-cometcolor--overview) component displays the color as a row, with color, name sass variable name and AA/AAA tests.
+
+Design inspired from [Comet](https://comet.discoveryeducation.com/visual-language/color.html).
+
+```
+import { CometColorPalette } from '@component-controls/design-tokens';
+
+<CometColorPalette
+  palette={{
+    'midnight-30': {
+      name: '30',
+      value: '#0C518D',
+      sass: '$comet-color-midnight-30',
+    },
+    'midnight-40': {
+      name: '40',
+      value: '#106CBC',
+      sass: '$comet-color-midnight-40',
+    },
+    'midnight-50': {
+      name: '50',
+      value: '#1487EB',
+      sass: '$comet-color-midnight-50',
+    },
+    'midnight-60': {
+      name: '60',
+      value: '#439FEF',
+      sass: '$comet-color-midnight-60',
+    },
+  }}
+/>
+```
+
+<CometColorPalette
+  palette={{
+    'midnight-30': {
+      name: '30',
+      value: '#0C518D',
+      sass: '$comet-color-midnight-30',
+    },
+    'midnight-40': {
+      name: '40',
+      value: '#106CBC',
+      sass: '$comet-color-midnight-40',
+    },
+    'midnight-50': {
+      name: '50',
+      value: '#1487EB',
+      sass: '$comet-color-midnight-50',
+    },
+    'midnight-60': {
+      name: '60',
+      value: '#439FEF',
+      sass: '$comet-color-midnight-60',
+    },
+  }}
 />
diff --git a/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx b/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx
@@ -55,7 +55,7 @@ export const BaseWebColor: FC<ColorBlockProps> = ({ name, color }) => {
 
 /**
  *
- * palette displayed with ColorBlock8 items
+ * palette displayed with BaseWebColor items
  * using a css flex display direction column
  */
 export const BaseWebColorPalette: FC<Omit<

diff --git a/ui/design-tokens/src/Colors/CometColor/CometColor.stories.tsx b/ui/design-tokens/src/Colors/CometColor/CometColor.stories.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { CometColor, CometColorPalette } from './CometColor';
+import { ColorProps } from '../types';
+
+export default {
+  title: 'Design Tokens/Colors/CometColor',
+  component: CometColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <CometColor name={name} color={color} />
+);
+
+overview.controls = {
+  name: { type: 'text', value: 'emerald-40' },
+  color: {
+    type: 'object',
+    value: {
+      name: { type: 'text', value: '40' },
+      sass: { type: 'text', value: '$comet-color-emerald-40' },
+      value: { type: 'color', value: '#2F9D89' },
+    },
+  },
+};
+
+export const palette = () => (
+  <CometColorPalette
+    palette={{
+      'midnight-05': {
+        name: '05',
+        value: '#020D17',
+        sass: '$comet-color-midnight-05',
+      },
+      'midnight-10': {
+        name: '10',
+        value: '#041B2F',
+        sass: '$comet-color-midnight-10',
+      },
+      'midnight-20': {
+        name: '20',
+        value: '#08365E',
+        sass: '$comet-color-midnight-20',
+      },
+      'midnight-30': {
+        name: '30',
+        value: '#0C518D',
+        sass: '$comet-color-midnight-30',
+      },
+      'midnight-40': {
+        name: '40',
+        value: '#106CBC',
+        sass: '$comet-color-midnight-40',
+      },
+      'midnight-50': {
+        name: '50',
+        value: '#1487EB',
+        sass: '$comet-color-midnight-50',
+      },
+      'midnight-60': {
+        name: '60',
+        value: '#439FEF',
+        sass: '$comet-color-midnight-60',
+      },
+      'midnight-70': {
+        name: '70',
+        value: '#72B7F3',
+        sass: '$comet-color-midnight-70',
+      },
+      'midnight-80': {
+        name: '80',
+        value: '#A1CFF7',
+        sass: '$comet-color-midnight-80',
+      },
+      'midnight-90': {
+        name: '90',
+        value: '#D0E7FB',
+        sass: '$comet-color-midnight-90',
+      },
+    }}
+  />
+);
diff --git a/ui/design-tokens/src/Colors/CometColor/CometColor.tsx b/ui/design-tokens/src/Colors/CometColor/CometColor.tsx
@@ -0,0 +1,100 @@
+/** @jsx jsx */
+import { FC } from 'react';
+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 { FlexContainerProps, FlexContainer } from '../FlexContainer';
+
+/**
+ * Color item displaying as a row, with color, name sass variable name and AA/AAA tests
+ * Design inspired from [Comet](https://comet.discoveryeducation.com/visual-language/color.html).
+ */
+
+export const CometColor: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color, name } : color;
+  const { value: colorValue, name: colorName = name, sass } = colorObj;
+
+  const { hex } = colorToStr(colorValue);
+  const textColor = mostReadable(hex);
+  const contrast = tinycolor.readability(hex, textColor);
+
+  let accessibilityTest;
+  const testProps: SxStyleProp = {
+    ml: 3,
+    width: '40px',
+    textAlign: 'center',
+    color: 'black',
+    fontSize: 1,
+  };
+  if (contrast >= 7) {
+    accessibilityTest = <div sx={{ ...testProps, bg: 'gray' }}>AAA</div>;
+  } else if (contrast >= 4.5) {
+    accessibilityTest = <div sx={{ ...testProps, bg: 'gray' }}>AA</div>;
+  } else if (contrast >= 3) {
+    accessibilityTest = <div sx={{ ...testProps, bg: '#e6c719' }}>AA18</div>;
+  } else {
+    accessibilityTest = (
+      <div sx={{ ...testProps, bg: '##b42818', color: 'white' }}>DNP</div>
+    );
+  }
+  return (
+    <Box sx={{ display: 'flex', flex: '1' }}>
+      <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
+        <div
+          sx={{
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            height: 60,
+            alignItems: 'center',
+            fontSize: 1,
+            px: 3,
+            bg: colorValue,
+            color: textColor,
+          }}
+        >
+          <div
+            sx={{
+              fontWeight: 'bold',
+              fontSize: 2,
+              width: '30%',
+            }}
+          >
+            {colorName}
+          </div>
+
+          <div
+            sx={{
+              flex: 1,
+            }}
+          >
+            {sass}
+          </div>
+          <div sx={{ display: 'flex', flexDirection: 'row' }}>
+            <div sx={{ textAlign: 'right' }}>{hex.toUpperCase()}</div>
+            {accessibilityTest}
+          </div>
+        </div>
+      </CopyContainer>
+    </Box>
+  );
+};
+
+/**
+ *
+ * palette displayed with CometColor items
+ * using a css flex display direction column
+ */
+export const CometColorPalette: FC<Omit<
+  FlexContainerProps,
+  'children' | 'direction'
+>> = props => (
+  <FlexContainer direction="column" {...props}>
+    {({ name, value }) => (
+      <CometColor key={`color_item_${name}}`} name={name} color={value} />
+    )}
+  </FlexContainer>
+);
diff --git a/ui/design-tokens/src/Colors/CometColor/index.ts b/ui/design-tokens/src/Colors/CometColor/index.ts
@@ -0,0 +1 @@
+export * from './CometColor';
diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts
@@ -9,3 +9,4 @@ export * from './BaseWebColor';
 export * from './BoltColor';
 export * from './CanvasColor';
 export * from './CedarColor';
+export * from './CometColor';