feat: add seeds color token

ccontrols · Sep 30, 2020 · ee7de16 · ee7de16
1 parent 50d64e3
commit ee7de16
Show file tree

Hide file tree

Showing 35 changed files with 467 additions and 145 deletions.
diff --git a/core/store/src/serialization/transform-controls.ts b/core/store/src/serialization/transform-controls.ts
@@ -17,6 +17,8 @@ const controlShortcuts = (
 ): ComponentControl => {
   const valueType = typeof control;
   switch (valueType) {
+    case 'boolean':
+      return { type: ControlTypes.BOOLEAN, value: control };
     case 'string':
       return { type: ControlTypes.TEXT, value: control };
     case 'number':

diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -39,6 +39,7 @@ import {
   PatternFlyColorPalette,
   PhotonColorPalette,
   PrimerColorPalette,
+  SeedsColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -339,7 +340,6 @@ import { BeelineColorPalette } from '@component-controls/design-tokens';
     'Blue 4': { value: '#FBFDFF' },
   }}
 />
-
 ```
 
 <BeelineColorPalette
@@ -1169,7 +1169,6 @@ import { LiquidColorPalette } from '@component-controls/design-tokens';
     'Rich Green': '#149B5F',
   }}
 />
-
 ```
 
 <LiquidColorPalette
@@ -1218,7 +1217,6 @@ import { MorningstarColorPalette } from '@component-controls/design-tokens';
     },
   }}
 />
-
 ```
 
 <MorningstarColorPalette
@@ -1335,7 +1333,6 @@ import { PajamasColorPalette } from '@component-controls/design-tokens';
     '$orange-950': '#421f00',
   }}
 />
-
 ```
 
 <PajamasColorPalette
@@ -1401,7 +1398,6 @@ import { PatternFlyColorPalette } from '@component-controls/design-tokens';
     },
   }}
 />
-
 ```
 
 <PatternFlyColorPalette
@@ -1461,8 +1457,6 @@ import { PhotonColorPalette } from '@component-controls/design-tokens';
     'Teal 90': '#002d3e',
   }}
 />
-
-
 ```
 
 <PhotonColorPalette
@@ -1505,3 +1499,78 @@ import { PrimerColorPalette } from '@component-controls/design-tokens';
   }}
 />
 
+## SeedsColor
+
+The [SeedsColor](/api/design-tokens-colors-seedscolor--overview) component displays the color as a block wuth rgb and cmyk colors. Below the block are displayed the color name and description.
+
+Design inspired from SproutSocial's [Seed](https://seeds.sproutsocial.com/visual/color/).
+
+```
+import { SeedsColorPalette } from '@component-controls/design-tokens';
+
+<SeedsColorPalette
+  palette={{
+    'Purple.700': {
+      value: '#6f5ed3',
+      variants: ['purple.700'],
+      description:
+        'Use Purple 700 to highlight or draw attention to important information that has no interaction. When using our primary purple with our primary green, green should always be the dominant color of the two.',
+    },
+    'Aqua.1100': {
+      value: '#002838',
+      variants: ['aqua.1100'],
+      description:
+        'Use Aqua 1100 for dark backgrounds and solid drop shadows. Aqua 1100 should not be used on text.',
+    },
+    'Aqua.600': {
+      value: '#0797ae',
+      variants: ['aqua.600'],
+      description:
+        'Use Aqua 600 for in-app text links and to highlight or draw attention to important information that has no interaction. Aqua is also the primary spot illustration color and is used for color blocking.',
+    },
+    Primary: {
+      value: '#2079c3',
+      name: 'Primary CTA',
+      variants: ['cta.primary', 'blue.700'],
+    },
+    Secondary: {
+      value: '#364141',
+      name: 'Secondary CTA',
+      variants: ['cta.scondary', 'neutral.800'],
+    },
+  }}
+/>
+```
+
+<SeedsColorPalette
+  palette={{
+    'Purple.700': {
+      value: '#6f5ed3',
+      variants: ['purple.700'],
+      description:
+        'Use Purple 700 to highlight or draw attention to important information that has no interaction. When using our primary purple with our primary green, green should always be the dominant color of the two.',
+    },
+    'Aqua.1100': {
+      value: '#002838',
+      variants: ['aqua.1100'],
+      description:
+        'Use Aqua 1100 for dark backgrounds and solid drop shadows. Aqua 1100 should not be used on text.',
+    },
+    'Aqua.600': {
+      value: '#0797ae',
+      variants: ['aqua.600'],
+      description:
+        'Use Aqua 600 for in-app text links and to highlight or draw attention to important information that has no interaction. Aqua is also the primary spot illustration color and is used for color blocking.',
+    },
+    Primary: {
+      value: '#2079c3',
+      name: 'Primary CTA',
+      variants: ['cta.primary', 'blue.700'],
+    },
+    Secondary: {
+      value: '#364141',
+      name: 'Secondary CTA',
+      variants: ['cta.scondary', 'neutral.800'],
+    },
+  }}
+/>
diff --git a/ui/components/src/Source/Source.stories.tsx b/ui/components/src/Source/Source.stories.tsx
@@ -102,7 +102,7 @@ const themes: {
 export const themeSelector = () => {
   const [theme, setTheme] = React.useState('dracula');
   const themeAction: ActionItem = {
-    title: theme,
+    node: theme,
     onClick: () => {
       const themeNames = Object.keys(themes);
       const selected = themeNames.indexOf(theme);

diff --git a/ui/design-tokens/src/Colors/Alta/AltaColor.stories.tsx b/ui/design-tokens/src/Colors/Alta/AltaColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { AltaColor, AltaColorPalette } from './AltaColor';
 import { ColorProps } from '../../types';
 
@@ -12,8 +13,8 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text' },
-  color: { type: 'color', value: '#fbce4a' },
+  name: { type: ControlTypes.TEXT },
+  color: { type: ControlTypes.COLOR, value: '#fbce4a' },
 };
 
 export const name = () => <AltaColor name="brand" color="#e95b54" />;

diff --git a/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.stories.tsx b/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { AntdHorzColor, AntdHorzColorPalette } from './AntdHorzColor';
 import { ColorProps } from '../../types';
 
@@ -12,8 +13,8 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text' },
-  color: { type: 'color', value: '#cf1322' },
+  name: { type: ControlTypes.TEXT },
+  color: { type: ControlTypes.COLOR, value: '#cf1322' },
 };
 
 export const name = () => <AntdHorzColor name="brand" color="#e95b54" />;

diff --git a/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.stories.tsx b/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { AntdVertColor, AntdVertColorPalette } from './AntdVertColor';
 import { ColorProps } from '../../types';
 
@@ -12,8 +13,8 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text' },
-  color: { type: 'color', value: '#cf1322' },
+  name: { type: ControlTypes.TEXT },
+  color: { type: ControlTypes.COLOR, value: '#cf1322' },
 };
 
 export const name = () => <AntdVertColor name="brand" color="#e95b54" />;

diff --git a/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.stories.tsx b/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { AnvilColor, AnvilColorPalette } from './AnvilColor';
 import { ColorProps } from '../../types';
 
@@ -12,12 +13,12 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Brand' },
+  name: 'Brand',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#2270ee' },
-      name: { type: 'text', value: 'Blue400' },
+      value: { type: ControlTypes.COLOR, value: '#2270ee' },
+      name: 'Blue400',
     },
   },
 };

diff --git a/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.stories.tsx b/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { AtlassianColor, AtlassianColorPalette } from './AtlassianColor';
 import { ColorProps } from '../../types';
 
@@ -12,12 +13,12 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Brand' },
+  name: 'Brand',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#2270ee' },
-      name: { type: 'text', value: 'Blue400' },
+      value: { type: ControlTypes.COLOR, value: '#2270ee' },
+      name: 'Blue400',
     },
   },
 };

diff --git a/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.stories.tsx b/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { AudiDSColor, AudiDSColorPalette } from './AudiDSColor';
 import { ColorProps } from '../../types';
 
@@ -12,12 +13,12 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Brand' },
+  name: 'Brand',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#2270ee' },
-      name: { type: 'text', value: 'Blue400' },
+      value: { type: ControlTypes.COLOR, value: '#2270ee' },
+      name: 'Blue400',
     },
   },
 };

diff --git a/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.stories.tsx b/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { BackpackColor, BackpackColorPalette } from './BackpackColor';
 import { ColorProps } from '../../types';
 
@@ -12,19 +13,19 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Brand' },
+  name: 'Brand',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#084eb2' },
+      value: { type: ControlTypes.COLOR, value: '#084eb2' },
       dark: {
-        type: 'object',
+        type: ControlTypes.OBJECT,
         value: {
-          value: { type: 'color', value: '#cddff8' },
-          name: { type: 'text', value: 'Blue800' },
+          value: { type: ControlTypes.COLOR, value: '#cddff8' },
+          name: 'Blue800',
         },
       },
-      name: { type: 'text', value: 'Blue400' },
+      name: 'Blue400',
     },
   },
 };

diff --git a/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.stories.tsx b/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { BaseWebColor, BaseWebColorPalette } from './BaseWebColor';
 import { ColorProps } from '../../types';
 
@@ -12,8 +13,8 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'cobalt400' },
-  color: { type: 'color', value: '#0E1FC1' },
+  name: 'cobalt400',
+  color: { type: ControlTypes.COLOR, value: '#0E1FC1' },
 };
 
 export const palette = () => (

diff --git a/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.stories.tsx b/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { BeelineColor, BeelineColorPalette } from './BeelineColor';
 import { ColorProps } from '../../types';
 
@@ -12,8 +13,8 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Brand' },
-  color: { type: 'color', value: '#2270ee' },
+  name: 'Brand',
+  color: { type: ControlTypes.COLOR, value: '#2270ee' },
 };
 
 export const name = () => <BeelineColor name="Critical" color="#f94d32" />;

diff --git a/ui/design-tokens/src/Colors/BoltColor/BoltColor.stories.tsx b/ui/design-tokens/src/Colors/BoltColor/BoltColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { BoltColor, BoltColorPalette } from './BoltColor';
 import { ColorProps } from '../../types';
 
@@ -12,12 +13,12 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Brand' },
+  name: 'Brand',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#2270ee' },
-      varName: { type: 'text', value: 'var(--bolt-color-navy)' },
+      value: { type: ControlTypes.COLOR, value: '#2270ee' },
+      varName: 'var(--bolt-color-navy)',
     },
   },
 };

diff --git a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.stories.tsx b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { CanvasColor, CanvasColorPalette } from './CanvasColor';
 import { ColorProps } from '../../types';
 
@@ -12,13 +13,13 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Primary' },
+  name: 'Primary',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      name: { type: 'text', value: 'LORAX' },
-      sass: { type: 'text', value: '$color-lorax' },
-      value: { type: 'color', value: '#ff7a59' },
+      name: 'LORAX',
+      sass: '$color-lorax',
+      value: { type: ControlTypes.COLOR, value: '#ff7a59' },
     },
   },
 };