feat: add vanilla color token

ccontrols · Oct 1, 2020 · c303439 · c303439
1 parent 10296e1
commit c303439
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 0 deletions.
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -44,6 +44,7 @@ import {
   SkylineColorPalette,
   SolidColorPalette,
   UniformColorPalette,
+  VanillaColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -1761,4 +1762,45 @@ import { UniformColorPalette } from '@component-controls/design-tokens';
     AlertLight: '#f3c6b7',
     Weather: '#990099',
   }}
+/>
+
+
+## VanillaColor
+
+The [VanillaColor](/api/design-tokens-colors-vanillacolor--overview) component displays the color as a color block with sass variable name and hex color value.
+
+Design inspired from [Vanilla](https://vanillaframework.io/docs/settings/color-settings).
+
+```
+import { VanillaColorPalette } from '@component-controls/design-tokens';
+
+<VanillaColorPalette
+  palette={{
+    'x-light': { value: '#FFF', sass: '$color-x-light' },
+    brand: { value: '#333', sass: '$color-brand' },
+    caution: { value: '#F99B11', sass: '$color-caution' },
+    negative: { value: '#C7162B', sass: '$color-negative' },
+    positive: { value: '#0E8420', sass: '$color-positive' },
+    information: { value: '#06C', sass: '$color-information' },
+    'navigation-background': {
+      value: '#FFF',
+      sass: '$color-navigation-background',
+    },
+  }}
+/>
+```
+
+<VanillaColorPalette
+  palette={{
+    'x-light': { value: '#FFF', sass: '$color-x-light' },
+    brand: { value: '#333', sass: '$color-brand' },
+    caution: { value: '#F99B11', sass: '$color-caution' },
+    negative: { value: '#C7162B', sass: '$color-negative' },
+    positive: { value: '#0E8420', sass: '$color-positive' },
+    information: { value: '#06C', sass: '$color-information' },
+    'navigation-background': {
+      value: '#FFF',
+      sass: '$color-navigation-background',
+    },
+  }}
 />
diff --git a/ui/design-tokens/src/Colors/VanillaColor/VanillaColor.stories.tsx b/ui/design-tokens/src/Colors/VanillaColor/VanillaColor.stories.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { ControlTypes } from '@component-controls/core';
+import { VanillaColor, VanillaColorPalette } from './VanillaColor';
+import { ColorProps } from '../../types';
+
+export default {
+  title: 'Design Tokens/Colors/VanillaColor',
+  component: VanillaColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <VanillaColor name={name} color={color} />
+);
+
+overview.controls = {
+  name: 'negative',
+  color: {
+    type: ControlTypes.OBJECT,
+    value: {
+      value: { type: ControlTypes.COLOR, value: '#C7162B' },
+      sass: '$color-negative',
+    },
+  },
+};
+
+export const palette = () => (
+  <VanillaColorPalette
+    palette={{
+      'x-light': { value: '#FFF', sass: '$color-x-light' },
+      brand: { value: '#333', sass: '$color-brand' },
+      caution: { value: '#F99B11', sass: '$color-caution' },
+      negative: { value: '#C7162B', sass: '$color-negative' },
+      positive: { value: '#0E8420', sass: '$color-positive' },
+      information: { value: '#06C', sass: '$color-information' },
+      'navigation-background': {
+        value: '#FFF',
+        sass: '$color-navigation-background',
+      },
+    }}
+  />
+);
diff --git a/ui/design-tokens/src/Colors/VanillaColor/VanillaColor.tsx b/ui/design-tokens/src/Colors/VanillaColor/VanillaColor.tsx
@@ -0,0 +1,69 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Theme } from 'theme-ui';
+import { CopyContainer } from '@component-controls/components';
+import { ColorBlockProps, ColorValue } from '../../types';
+import { GridContainerProps, GridContainer } from '../../components';
+
+/**
+ * Color item displaying the color as a color block with sass variable name and hex color value.
+ * Design inspired from [Vanilla](https://vanillaframework.io/docs/settings/color-settings).
+ */
+export const VanillaColor: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color } : color;
+  const { value: colorValue, sass } = colorObj;
+  return (
+    <div
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        bg: 'background',
+        minWidth: 100,
+        maxWidth: 320,
+        border: (t: Theme) => `1px solid ${t.colors?.shadow}`,
+      }}
+    >
+      <CopyContainer
+        value={colorValue}
+        name={name}
+        sx={{
+          border: (t: Theme) => `1px solid ${t.colors?.shadow}`,
+          bg: colorValue,
+          ':after': {
+            content: '""',
+            display: 'block',
+            paddingBottom: '30%',
+          },
+        }}
+      />
+      <div
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          p: 2,
+          fontSize: 2,
+        }}
+      >
+        <div>{sass}</div>
+        <div>{colorValue}</div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ *
+ * palette displayed with VanillaColor items
+ * using a css grid for the dsplay
+ */
+export const VanillaColorPalette: FC<Omit<
+  GridContainerProps,
+  'children'
+>> = props => (
+  <GridContainer width={150} gap={3} {...props}>
+    {({ name, value }) => (
+      <VanillaColor key={`color_item_${name}}`} name={name} color={value} />
+    )}
+  </GridContainer>
+);
diff --git a/ui/design-tokens/src/Colors/VanillaColor/index.ts b/ui/design-tokens/src/Colors/VanillaColor/index.ts
@@ -0,0 +1 @@
+export * from './VanillaColor';
diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts
@@ -31,3 +31,4 @@ export * from './SeekColor';
 export * from './SkylineColor';
 export * from './SolidColor';
 export * from './UniformColor';
+export * from './VanillaColor';