feat: add solid color token

ccontrols · Oct 1, 2020 · 7f423b4 · 7f423b4
1 parent f47ca67
commit 7f423b4
Show file tree

Hide file tree

Showing 5 changed files with 205 additions and 0 deletions.
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -42,6 +42,7 @@ import {
   SeedsColorPalette,
   SeekColorPalette,
   SkylineColorPalette,
+  SolidColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -1663,3 +1664,70 @@ import { SkylineColorPalette } from '@component-controls/design-tokens';
     },
   }}
 />
+
+
+## SolidColor
+
+The [SolidColor](/api/design-tokens-colors-solidcolor--overview) component displays the color as a block. The css class, hex value and sass name are placed above the color block.
+
+Design inspired from [Solid](https://solid.buzzfeed.com/colors.html).
+
+```
+import { SolidColorPalette } from '@component-controls/design-tokens';
+
+<SolidColorPalette
+  palette={{
+    fillRed: { value: '#ee3322', sass: '$fill-red', css: '.fill-red' },
+    fillRedLighter: {
+      value: '#feebe9',
+      sass: '$fill-red-lighter',
+      css: '.fill-red-lighter',
+    },
+    fillPink: { value: '#e40c78', sass: '$fill-pink', css: '.fill-pink' },
+    fillBlue: { value: '#0f65ef', sass: '$fill-blue', css: '.fill-blue' },
+    fillPurple: {
+      value: '#6645dd',
+      sass: '$fill-purple',
+      css: '.fill-purple',
+    },
+    fillYellow: {
+      value: '#ffee00',
+      sass: ' $fill-yellow',
+      css: '.fill-promoted-orange',
+    },
+    fillTwitter: {
+      value: '#55acee',
+      sass: '$fill-twitter',
+      css: '.fill-twitter',
+    },
+  }}
+/>
+```
+
+<SolidColorPalette
+  palette={{
+    fillRed: { value: '#ee3322', sass: '$fill-red', css: '.fill-red' },
+    fillRedLighter: {
+      value: '#feebe9',
+      sass: '$fill-red-lighter',
+      css: '.fill-red-lighter',
+    },
+    fillPink: { value: '#e40c78', sass: '$fill-pink', css: '.fill-pink' },
+    fillBlue: { value: '#0f65ef', sass: '$fill-blue', css: '.fill-blue' },
+    fillPurple: {
+      value: '#6645dd',
+      sass: '$fill-purple',
+      css: '.fill-purple',
+    },
+    fillYellow: {
+      value: '#ffee00',
+      sass: ' $fill-yellow',
+      css: '.fill-promoted-orange',
+    },
+    fillTwitter: {
+      value: '#55acee',
+      sass: '$fill-twitter',
+      css: '.fill-twitter',
+    },
+  }}
+/>
diff --git a/ui/design-tokens/src/Colors/SolidColor/SolidColor.stories.tsx b/ui/design-tokens/src/Colors/SolidColor/SolidColor.stories.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { ControlTypes } from '@component-controls/core';
+import { SolidColor, SolidColorPalette } from './SolidColor';
+import { ColorProps } from '../../types';
+
+export default {
+  title: 'Design Tokens/Colors/SolidColor',
+  component: SolidColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <SolidColor name={name} color={color} />
+);
+
+overview.controls = {
+  color: {
+    type: ControlTypes.OBJECT,
+    value: {
+      value: { type: ControlTypes.COLOR, value: '#ee3322' },
+      sass: '$fill-red',
+      css: '.fill-red',
+    },
+  },
+};
+export const palette = () => (
+  <SolidColorPalette
+    palette={{
+      fillRed: { value: '#ee3322', sass: '$fill-red', css: '.fill-red' },
+      fillRedLighter: {
+        value: '#feebe9',
+        sass: '$fill-red-lighter',
+        css: '.fill-red-lighter',
+      },
+      fillPink: { value: '#e40c78', sass: '$fill-pink', css: '.fill-pink' },
+      fillBlue: { value: '#0f65ef', sass: '$fill-blue', css: '.fill-blue' },
+      fillPurple: {
+        value: '#6645dd',
+        sass: '$fill-purple',
+        css: '.fill-purple',
+      },
+      fillYellow: {
+        value: '#ffee00',
+        sass: ' $fill-yellow',
+        css: '.fill-promoted-orange',
+      },
+      fillTwitter: {
+        value: '#55acee',
+        sass: '$fill-twitter',
+        css: '.fill-twitter',
+      },
+    }}
+  />
+);
diff --git a/ui/design-tokens/src/Colors/SolidColor/SolidColor.tsx b/ui/design-tokens/src/Colors/SolidColor/SolidColor.tsx
@@ -0,0 +1,82 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Theme } from 'theme-ui';
+import { CopyContainer } from '@component-controls/components';
+import { colorToStr } from '../utils';
+import { ColorBlockProps, ColorValue } from '../../types';
+import { GridContainerProps, GridContainer } from '../../components';
+
+/**
+ * Color item displaying the color as a block. The css class, hex value and sass name are placed above the color block.
+ * Design inspired from [Solid](https://solid.buzzfeed.com/colors.html).
+ */
+export const SolidColor: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color } : color;
+  const { value: colorValue, sass, css } = colorObj;
+
+  const { hex } = colorToStr(colorValue);
+  return (
+    <div
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 180,
+        maxWidth: 450,
+      }}
+    >
+      <div
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          lineHeight: '16px',
+          justifyContent: 'space-between',
+          py: 1,
+        }}
+      >
+        <div
+          sx={{
+            my: 2,
+            fontSize: 2,
+            fontWeight: 'bold',
+            color: 'primary',
+          }}
+        >
+          {css && (
+            <CopyContainer value={css} name={name || css}>
+              {css}
+            </CopyContainer>
+          )}
+        </div>
+        <div sx={{ fontSize: 1, color: 'mutedText' }}>
+          {`${hex}${sass ? `, ${sass}` : ''}`}
+        </div>
+      </div>
+      <CopyContainer
+        value={hex}
+        name={name || css}
+        sx={{
+          bg: colorValue,
+          height: 50,
+          border: (t: Theme) => `1px solid  ${t.colors?.shadow}`,
+        }}
+      />
+    </div>
+  );
+};
+
+/**
+ *
+ * palette displayed with SolidColor items
+ * using a css grid for the dsplay
+ */
+export const SolidColorPalette: FC<Omit<
+  GridContainerProps,
+  'children'
+>> = props => (
+  <GridContainer {...props}>
+    {({ name, value }) => (
+      <SolidColor key={`color_item_${name}}`} name={name} color={value} />
+    )}
+  </GridContainer>
+);
diff --git a/ui/design-tokens/src/Colors/SolidColor/index.ts b/ui/design-tokens/src/Colors/SolidColor/index.ts
@@ -0,0 +1 @@
+export * from './SolidColor';
diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts
@@ -29,3 +29,4 @@ export * from './PrimerColor';
 export * from './SeedsColor';
 export * from './SeekColor';
 export * from './SkylineColor';
+export * from './SolidColor';