feat: add canvas color token

ccontrols · Sep 23, 2020 · d3f9157 · d3f9157
1 parent 8590eb1
commit d3f9157
Show file tree

Hide file tree

Showing 7 changed files with 236 additions and 23 deletions.
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -18,6 +18,7 @@ import {
   BackpackColorPalette,
   BaseWebColorPalette,
   BoltColorPalette,
+  CanvasColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -338,4 +339,56 @@ import { BoltColorPalette } from '@component-controls/design-tokens';
     Black: { value: '#151619', varName: 'var(--bolt-color-black)' },
     White: { value: '#ffffff', varName: 'var(--bolt-color-white)' },
   }}
+/>
+
+## CanvasColor
+
+The [CanvasColor](/api/design-tokens-colors-canvascolor--overview) component displays the color  as a row, with color, name, sass variable name and hex value.
+
+Design inspired from [Canvas Design System](https://canvas.hubspot.com/styles/colors).
+
+```
+import { CanvasColorPalette } from '@component-controls/design-tokens';
+
+<CanvasColorPalette
+  palette={{
+    Primary: { value: '#ff8f59', name: 'SORBET', sass: '$color-sorbet' },
+    Shade: {
+      value: '#e68250',
+      name: 'SORBET_DARK',
+      sass: '$color-sorbet-dark',
+    },
+    'Medium Tint': {
+      value: '#ffc7ac',
+      name: 'SORBET_MEDIUM',
+      sass: '$color-sorbet-medium',
+    },
+    'Light Tint': {
+      value: '#fff3ee',
+      name: 'SORBET_LIGHT',
+      sass: '$color-sorbet-light',
+    },
+  }}
+/>
+```
+
+<CanvasColorPalette
+  palette={{
+    Primary: { value: '#ff8f59', name: 'SORBET', sass: '$color-sorbet' },
+    Shade: {
+      value: '#e68250',
+      name: 'SORBET_DARK',
+      sass: '$color-sorbet-dark',
+    },
+    'Medium Tint': {
+      value: '#ffc7ac',
+      name: 'SORBET_MEDIUM',
+      sass: '$color-sorbet-medium',
+    },
+    'Light Tint': {
+      value: '#fff3ee',
+      name: 'SORBET_LIGHT',
+      sass: '$color-sorbet-light',
+    },
+  }}
 />
diff --git a/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx b/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx
@@ -17,18 +17,19 @@ export const BaseWebColor: FC<ColorBlockProps> = ({ name, color }) => {
   const textColor = mostReadable(hex);
   return (
     <Box sx={{ display: 'flex', flex: '1' }}>
-      <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            height: 50,
-            alignItems: 'center',
-            fontSize: 2,
-            borderBottom: `1px solid ${hex}`,
-            bg: 'background',
-          }}
-        >
+      <Box
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'row',
+          height: 50,
+          alignItems: 'center',
+          fontSize: 2,
+          borderBottom: `1px solid ${hex}`,
+          bg: 'background',
+        }}
+      >
+        <CopyContainer value={hex} name={name}>
           <Box
             sx={{
               width: 100,
@@ -37,17 +38,17 @@ export const BaseWebColor: FC<ColorBlockProps> = ({ name, color }) => {
               color: textColor,
               mr: 3,
             }}
-          ></Box>
-          <Box
-            sx={{
-              flex: 1,
-            }}
-          >
-            {name}
-          </Box>
-          <div sx={{ mr: 3 }}>{hex.toUpperCase()}</div>
+          />
+        </CopyContainer>
+        <Box
+          sx={{
+            flex: 1,
+          }}
+        >
+          {name}
         </Box>
-      </CopyContainer>
+        <div sx={{ mr: 3 }}>{hex.toUpperCase()}</div>
+      </Box>
     </Box>
   );
 };

diff --git a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.stories.tsx b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.stories.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { CanvasColor, CanvasColorPalette } from './CanvasColor';
+import { ColorProps } from '../types';
+
+export default {
+  title: 'Design Tokens/Colors/CanvasColor',
+  component: CanvasColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <CanvasColor name={name} color={color} />
+);
+
+overview.controls = {
+  name: { type: 'text', value: 'Primary' },
+  color: {
+    type: 'object',
+    value: {
+      name: { type: 'text', value: 'LORAX' },
+      sass: { type: 'text', value: '$color-lorax' },
+      value: { type: 'color', value: '#ff7a59' },
+    },
+  },
+};
+
+export const palette = () => (
+  <CanvasColorPalette
+    palette={{
+      Primary: { value: '#ff8f59', name: 'SORBET', sass: '$color-sorbet' },
+      Shade: {
+        value: '#e68250',
+        name: 'SORBET_DARK',
+        sass: '$color-sorbet-dark',
+      },
+      'Medium Tint': {
+        value: '#ffc7ac',
+        name: 'SORBET_MEDIUM',
+        sass: '$color-sorbet-medium',
+      },
+      'Light Tint': {
+        value: '#fff3ee',
+        name: 'SORBET_LIGHT',
+        sass: '$color-sorbet-light',
+      },
+    }}
+  />
+);
diff --git a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx
@@ -0,0 +1,104 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Box, Theme } 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, sass variable name and hex value
+ * Design inspired from [Canvas Design System](https://canvas.hubspot.com/styles/colors).
+ */
+
+export const CanvasColor: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color } : color;
+  const { value: colorValue, name: colorName, sass } = colorObj;
+
+  const { hex } = colorToStr(colorValue);
+  const textColor = mostReadable(hex);
+  return (
+    <Box sx={{ display: 'flex', flex: '1', mb: 2 }}>
+      <Box
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'row',
+          height: 90,
+          fontSize: 2,
+          border: (t: Theme) => `1px solid ${t.colors?.shadow}`,
+          bg: 'background',
+        }}
+      >
+        <CopyContainer
+          value={hex}
+          name={name}
+          sxStyle={{ width: '40%', height: '100%' }}
+        >
+          <Box
+            sx={{
+              width: '100%',
+              height: '100%',
+              bg: colorValue,
+              color: textColor,
+              p: 3,
+              fontSize: 1,
+            }}
+          >
+            {name}
+          </Box>
+        </CopyContainer>
+        <Box
+          sx={{
+            flex: 1,
+          }}
+        >
+          <div
+            sx={{
+              p: 3,
+              height: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-between',
+            }}
+          >
+            <div
+              sx={{
+                fontSize: 1,
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+              }}
+            >
+              {colorName}
+              <div sx={{ bg: 'gray', p: 1 }}>{hex}</div>
+            </div>
+            <div sx={{ fontSize: 0 }}>{sass}</div>
+          </div>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ *
+ * palette displayed with CanvasColor items
+ * using a css flex display direction column
+ */
+export const CanvasColorPalette: FC<Omit<
+  FlexContainerProps,
+  'children' | 'direction'
+>> = props => (
+  <FlexContainer direction="column" {...props}>
+    {({ name, value, hover }) => (
+      <CanvasColor
+        key={`color_item_${name}}`}
+        name={name}
+        color={value}
+        hover={hover}
+      />
+    )}
+  </FlexContainer>
+);
diff --git a/ui/design-tokens/src/Colors/CanvasColor/index.ts b/ui/design-tokens/src/Colors/CanvasColor/index.ts
@@ -0,0 +1 @@
+export * from './CanvasColor';
diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts
@@ -7,3 +7,4 @@ export * from './AudiDSColor';
 export * from './BackpackColor';
 export * from './BaseWebColor';
 export * from './BoltColor';
+export * from './CanvasColor';
diff --git a/ui/design-tokens/src/Colors/types.ts b/ui/design-tokens/src/Colors/types.ts
@@ -2,7 +2,13 @@ import { FC, ReactNode } from 'react';
 
 export type ColorValue =
   | string
-  | { name?: string; value: string; dark?: ColorValue; varName?: string };
+  | {
+      name?: string;
+      value: string;
+      dark?: ColorValue;
+      varName?: string;
+      sass?: string;
+    };
 export interface ColorProps {
   /**
    * name of the color, If none, or same as the color value, some color blocks will not display it