feat: add cedar color token

ccontrols · Sep 23, 2020 · 9e76204 · 9e76204
1 parent d3f9157
commit 9e76204
Show file tree

Hide file tree

Showing 10 changed files with 241 additions and 18 deletions.
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -19,6 +19,7 @@ import {
   BaseWebColorPalette,
   BoltColorPalette,
   CanvasColorPalette,
+  CedarColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -391,4 +392,74 @@ import { CanvasColorPalette } from '@component-controls/design-tokens';
       sass: '$color-sorbet-light',
     },
   }}
+/>
+
+## CedarColor
+
+The [CedarColor](/api/design-tokens-colors-cedarcolor--overview) component displays the color as a row, with color, name, description and hex value.
+
+Design inspired from REI's [Cedar](https://rei.github.io/rei-cedar-docs/foundation/color/).
+
+```
+import { CedarColorPalette } from '@component-controls/design-tokens';
+
+<CedarColorPalette
+  palette={{
+    primary: {
+      name: 'cdr-color-text-primary',
+      value: 'rgba(12, 11, 8, 0.75)',
+      description: 'The default, primary text color',
+    },
+    brand: {
+      name: 'cdr-color-text-brand',
+      value: '#113731',
+      description: 'Text set in our primary brand color',
+    },
+    sale: {
+      name: 'cdr-color-text-sale',
+      value: '#cc0000',
+      description: 'The color of sale text',
+    },
+    success: {
+      name: 'cdr-color-text-success',
+      value: '#2e6b34',
+      description: 'Color of success messages',
+    },
+    warning: {
+      name: 'cdr-color-text-warning',
+      value: '#854714',
+      description: 'Color of warning messages',
+    },
+  }}
+/>
+```
+
+<CedarColorPalette
+  palette={{
+    primary: {
+      name: 'cdr-color-text-primary',
+      value: 'rgba(12, 11, 8, 0.75)',
+      description: 'The default, primary text color',
+    },
+    brand: {
+      name: 'cdr-color-text-brand',
+      value: '#113731',
+      description: 'Text set in our primary brand color',
+    },
+    sale: {
+      name: 'cdr-color-text-sale',
+      value: '#cc0000',
+      description: 'The color of sale text',
+    },
+    success: {
+      name: 'cdr-color-text-success',
+      value: '#2e6b34',
+      description: 'Color of success messages',
+    },
+    warning: {
+      name: 'cdr-color-text-warning',
+      value: '#854714',
+      description: 'Color of warning messages',
+    },
+  }}
 />
diff --git a/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx b/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx
@@ -63,13 +63,8 @@ export const BaseWebColorPalette: FC<Omit<
   'children' | 'direction'
 >> = props => (
   <FlexContainer direction="column" {...props}>
-    {({ name, value, hover }) => (
-      <BaseWebColor
-        key={`color_item_${name}}`}
-        name={name}
-        color={value}
-        hover={hover}
-      />
+    {({ name, value }) => (
+      <BaseWebColor key={`color_item_${name}}`} name={name} color={value} />
     )}
   </FlexContainer>
 );
diff --git a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx
@@ -92,13 +92,8 @@ export const CanvasColorPalette: FC<Omit<
   'children' | 'direction'
 >> = props => (
   <FlexContainer direction="column" {...props}>
-    {({ name, value, hover }) => (
-      <CanvasColor
-        key={`color_item_${name}}`}
-        name={name}
-        color={value}
-        hover={hover}
-      />
+    {({ name, value }) => (
+      <CanvasColor key={`color_item_${name}}`} name={name} color={value} />
     )}
   </FlexContainer>
 );
diff --git a/ui/design-tokens/src/Colors/CedarColor/CedarColor.stories.tsx b/ui/design-tokens/src/Colors/CedarColor/CedarColor.stories.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { CedarColor, CedarColorPalette } from './CedarColor';
+import { ColorProps } from '../types';
+
+export default {
+  title: 'Design Tokens/Colors/CedarColor',
+  component: CedarColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <CedarColor name={name} color={color} />
+);
+
+overview.controls = {
+  name: { type: 'text', value: 'cobalt400' },
+  color: {
+    type: 'object',
+    value: {
+      value: { type: 'color', value: '#225c4e' },
+      name: { type: 'text', value: 'cdr-color-text-button-primary-hover' },
+      description: {
+        type: 'text',
+        value: 'Text color for the hover state of primary buttons',
+      },
+    },
+  },
+};
+
+export const palette = () => (
+  <CedarColorPalette
+    palette={{
+      primary: {
+        name: 'cdr-color-text-primary',
+        value: 'rgba(12, 11, 8, 0.75)',
+        description: 'The default, primary text color',
+      },
+      secondary: {
+        name: 'cdr-color-text-secondary',
+        value: 'rgba(66, 59, 47, 0.75)',
+        description: 'The secondary text color',
+      },
+      brand: {
+        name: 'cdr-color-text-brand',
+        value: '#113731',
+        description: 'Text set in our primary brand color',
+      },
+      sale: {
+        name: 'cdr-color-text-sale',
+        value: '#cc0000',
+        description: 'The color of sale text',
+      },
+      inverse: {
+        name: 'cdr-color-text-inverse',
+        value: '#f9f8f6',
+        description: 'Text color on dark background',
+      },
+      disabled: {
+        name: 'cdr-color-text-disabled',
+        value: '#d1cbbd',
+        description: 'The color of text when it is disabled',
+      },
+      success: {
+        name: 'cdr-color-text-success',
+        value: '#2e6b34',
+        description: 'Color of success messages',
+      },
+      warning: {
+        name: 'cdr-color-text-warning',
+        value: '#854714',
+        description: 'Color of warning messages',
+      },
+    }}
+  />
+);
diff --git a/ui/design-tokens/src/Colors/CedarColor/CedarColor.tsx b/ui/design-tokens/src/Colors/CedarColor/CedarColor.tsx
@@ -0,0 +1,84 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Box } from 'theme-ui';
+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, description and hex value
+ * Design inspired from REI's [Cedar](https://rei.github.io/rei-cedar-docs/foundation/color/).
+ */
+
+export const CedarColor: FC<ColorBlockProps & { index?: number }> = ({
+  name,
+  color,
+  index = 0,
+}) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color } : color;
+  const { value: colorValue, name: colorName, description } = colorObj;
+
+  const { hex } = colorToStr(colorValue);
+  const textColor = mostReadable(hex);
+  return (
+    <Box sx={{ display: 'flex', flex: '1' }}>
+      <Box
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          fontSize: 1,
+          p: 2,
+          bg: index % 2 ? 'background' : 'gray',
+        }}
+      >
+        <CopyContainer value={hex} name={name}>
+          <Box
+            sx={{
+              width: 50,
+              height: 50,
+              bg: colorValue,
+              color: textColor,
+              mr: 3,
+            }}
+          />
+        </CopyContainer>
+        <Box
+          sx={{
+            flex: 1,
+          }}
+        >
+          <div sx={{ display: 'flex', flexDirection: 'column' }}>
+            <div sx={{ fontWeight: 'bold' }}>{colorName}</div>
+            <div> {description}</div>
+          </div>
+        </Box>
+        <div sx={{ mr: 3, fontSize: 0 }}>{hex}</div>
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ *
+ * palette displayed with CedarColor items
+ * using a css flex display direction column
+ */
+export const CedarColorPalette: FC<Omit<
+  FlexContainerProps,
+  'children' | 'direction'
+>> = props => (
+  <FlexContainer direction="column" {...props}>
+    {({ name, value, index }) => (
+      <CedarColor
+        key={`color_item_${name}}`}
+        name={name}
+        color={value}
+        index={index}
+      />
+    )}
+  </FlexContainer>
+);
diff --git a/ui/design-tokens/src/Colors/CedarColor/index.ts b/ui/design-tokens/src/Colors/CedarColor/index.ts
@@ -0,0 +1 @@
+export * from './CedarColor';
diff --git a/ui/design-tokens/src/Colors/FlexContainer/FlexContainer.tsx b/ui/design-tokens/src/Colors/FlexContainer/FlexContainer.tsx
@@ -30,8 +30,8 @@ export const FlexContainer: FC<FlexContainerProps> = ({
       }}
       {...rest}
     >
-      {Object.keys(palette).map(color =>
-        children({ name: color, value: palette[color], hover }),
+      {Object.keys(palette).map((color, index) =>
+        children({ name: color, value: palette[color], hover, index }),
       )}
     </Box>
   );

diff --git a/ui/design-tokens/src/Colors/GridContainer/GridContainer.tsx b/ui/design-tokens/src/Colors/GridContainer/GridContainer.tsx
@@ -22,8 +22,8 @@ export const GridContainer: FC<GridContainerProps> = ({
       width={width}
       {...rest}
     >
-      {Object.keys(palette).map(color =>
-        children({ name: color, value: palette[color], hover }),
+      {Object.keys(palette).map((color, index) =>
+        children({ name: color, value: palette[color], hover, index }),
       )}
     </Grid>
   );

diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts
@@ -8,3 +8,4 @@ export * from './BackpackColor';
 export * from './BaseWebColor';
 export * from './BoltColor';
 export * from './CanvasColor';
+export * from './CedarColor';
diff --git a/ui/design-tokens/src/Colors/types.ts b/ui/design-tokens/src/Colors/types.ts
@@ -8,6 +8,7 @@ export type ColorValue =
       dark?: ColorValue;
       varName?: string;
       sass?: string;
+      description?: string;
     };
 export interface ColorProps {
   /**
@@ -36,6 +37,7 @@ export type ContaionerCallbackProps = {
   name: string;
   value: ColorValue;
   hover: boolean;
+  index: number;
 };
 /**
  * design token container