feat: added beline color token

ccontrols · Sep 24, 2020 · 505c541 · 505c541
1 parent e3ed82d
commit 505c541
Show file tree

Hide file tree

Showing 5 changed files with 203 additions and 0 deletions.
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -17,6 +17,7 @@ import {
   AudiDSColorPalette,
   BackpackColorPalette,
   BaseWebColorPalette,
+  BeelineColorPalette,
   BoltColorPalette,
   CanvasColorPalette,
   CedarColorPalette,
@@ -301,6 +302,41 @@ import { BaseWebColorPalette } from '@component-controls/design-tokens';
   }}
 />
 
+## BeelineColor
+
+The [BeelineColor](/api/design-tokens-colors-beelinecolor--overview) component displays a color block with values for rgb and Pantone colors.
+
+Design inspired from [Beeline Design System](http://beelinedesignsystem.com/color-palette/).
+
+```
+import { BeelineColorPalette } from '@component-controls/design-tokens';
+
+<BeelineColorPalette
+  palette={{
+    'Blue 5': { value: '#001b38' },
+    'Blue Accessibility': { value: '#0352a0' },
+    'Blue Primary': { value: '#0575e6' },
+    'Blue 1': { value: '#4fa7ff' },
+    'Blue 2': { value: '#85dfff' },
+    'Blue 3': { value: '#ecf5ff' },
+    'Blue 4': { value: '#FBFDFF' },
+  }}
+/>
+
+```
+
+<BeelineColorPalette
+  palette={{
+    'Blue 5': { value: '#001b38' },
+    'Blue Accessibility': { value: '#0352a0' },
+    'Blue Primary': { value: '#0575e6' },
+    'Blue 1': { value: '#4fa7ff' },
+    'Blue 2': { value: '#85dfff' },
+    'Blue 3': { value: '#ecf5ff' },
+    'Blue 4': { value: '#FBFDFF' },
+  }}
+/>
+
 ## BoltColor
 
 The [BoltColor](/api/design-tokens-colors-boltcolor--overview) component displays the color as a block with [AA](https://www.w3.org/TR/WCAG/) color contrast tests.

diff --git a/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.stories.tsx b/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.stories.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { BeelineColor, BeelineColorPalette } from './BeelineColor';
+import { ColorProps } from '../types';
+
+export default {
+  title: 'Design Tokens/Colors/BeelineColor',
+  component: BeelineColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <BeelineColor name={name} color={color} />
+);
+
+overview.controls = {
+  name: { type: 'text', value: 'Brand' },
+  color: { type: 'color', value: '#2270ee' },
+};
+
+export const name = () => <BeelineColor name="Critical" color="#f94d32" />;
+
+export const rgb = () => <BeelineColor name="text" color="rgb(0, 0, 0)" />;
+
+export const rgba = () => (
+  <BeelineColor name="shadow" color="rgba(0, 0, 0, 0.1)" />
+);
+
+export const hsl = () => (
+  <BeelineColor name="accent" color="hsl(12, 10%, 50%)" />
+);
+
+export const hsla = () => (
+  <BeelineColor name="accent" color="hsl(12, 10%, 50%, .3)" />
+);
+
+export const palette = () => (
+  <BeelineColorPalette
+    palette={{
+      'Blue 5': { value: '#001b38' },
+      'Blue Accessibility': { value: '#0352a0' },
+      'Blue Primary': { value: '#0575e6' },
+      'Blue 1': { value: '#4fa7ff' },
+      'Blue 2': { value: '#85dfff' },
+      'Blue 3': { value: '#ecf5ff' },
+      'Blue 4': { value: '#FBFDFF' },
+    }}
+  />
+);
diff --git a/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.tsx b/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.tsx
@@ -0,0 +1,118 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Box, Theme } from 'theme-ui';
+import { CopyContainer } from '@component-controls/components';
+import simpleColorConverter from 'simple-color-converter';
+import { colorToStr } from '../utils';
+import { ColorBlockProps } from '../types';
+import { GridContainerProps, GridContainer } from '../GridContainer';
+
+/**
+ * Color item displaying the color as a block with values for rgb and Pantone colors.
+ * Design inspired from [Beeline Design System](http://beelinedesignsystem.com/color-palette/).
+ */
+export const BeelineColor: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorValue = typeof color === 'string' ? color : color.value;
+  const { hex, rgba } = colorToStr(colorValue);
+  const { color: pantone } = new simpleColorConverter({
+    rgba,
+    to: 'pantone',
+  });
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        bg: 'background',
+        minWidth: 120,
+        maxWidth: 320,
+        border: (t: Theme) => `1px solid ${t.colors?.shadow}`,
+        borderRadius: 1,
+        boxShadow: (t: Theme) => `0 1px 2px 0 ${t.colors?.shadow}`,
+      }}
+    >
+      <CopyContainer value={hex} name={name} sxStyle={{ px: 2, pt: 2 }}>
+        <Box
+          sx={{
+            bg: colorValue,
+            ':after': {
+              content: '""',
+              display: 'block',
+              paddingBottom: '60%',
+            },
+          }}
+        />
+      </CopyContainer>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          p: 2,
+          fontSize: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <Box sx={{ pb: 2, fontSize: 3 }}>{name || hex}</Box>
+        </Box>
+        <div sx={{ fontSize: 0 }}>
+          <div
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
+            <div sx={{ fontWeight: 'bold', mr: 1 }}>HEX:</div>
+            <div>{hex}:</div>
+          </div>
+          <div
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
+            <div sx={{ fontWeight: 'bold', mr: 1 }}>RGB:</div>
+            <div>
+              {`rgb(${rgba.r},${rgba.g},${rgba.b}${
+                rgba.a !== 1 ? `,${rgba.a}` : ''
+              })`}
+              :
+            </div>
+          </div>
+          <div
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
+            <div sx={{ fontWeight: 'bold', mr: 1 }}>Pantone:</div>
+            <div>{pantone || '--'}:</div>
+          </div>
+        </div>
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ *
+ * palette displayed with BeelineColor items
+ * using a css grid for the dsplay
+ */
+export const BeelineColorPalette: FC<Omit<
+  GridContainerProps,
+  'children'
+>> = props => (
+  <GridContainer width={170} gap={3} {...props}>
+    {({ name, value }) => (
+      <BeelineColor key={`color_item_${name}}`} name={name} color={value} />
+    )}
+  </GridContainer>
+);
diff --git a/ui/design-tokens/src/Colors/BeelineColor/index.ts b/ui/design-tokens/src/Colors/BeelineColor/index.ts
@@ -0,0 +1 @@
+export * from './BeelineColor';
diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts
@@ -6,6 +6,7 @@ export * from './AtlassianColor';
 export * from './AudiDSColor';
 export * from './BackpackColor';
 export * from './BaseWebColor';
+export * from './BeelineColor';
 export * from './BoltColor';
 export * from './CanvasColor';
 export * from './CedarColor';