feat: add morningstar color token

ccontrols · Sep 29, 2020 · 8ed5097 · 8ed5097
1 parent e920974
commit 8ed5097
Show file tree

Hide file tree

Showing 5 changed files with 236 additions and 0 deletions.
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -33,6 +33,7 @@ import {
   IBMDLColorPalette,
   LightningColorPalette,
   LiquidColorPalette,
+  MorningstarColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -1177,3 +1178,65 @@ import { LiquidColorPalette } from '@component-controls/design-tokens';
     'Rich Green': '#149B5F',
   }}
 />
+
+
+## MorningstarColor
+
+The [MorningstarColor](/api/design-tokens-colors-corningstarcolor--overview) component displays the color as a table row, with color, name, sass variable name and hex value.
+
+Design inspired from [Morningstar Design System](https://designsystem.morningstar.com/visual-language/color/?version=3.0.4&tab=backgrounds).
+
+```
+import { MorningstarColorPalette } from '@component-controls/design-tokens';
+
+<MorningstarColorPalette
+  palette={{
+    Error: {
+      value: '#ff0000',
+      sass: '$mds-feedback-color-error',
+    },
+    Warning: {
+      value: '#f5c400',
+      sass: '$mds-feedback-color-warning',
+    },
+    Success: {
+      value: '#00af41',
+      sass: '$mds-feedback-color-success',
+    },
+    'Success Background': {
+      value: '#e5f7eb',
+      sass: '$mds-feedback-color-success-background',
+    },
+    Active: {
+      value: '#004376',
+      sass: '$mds-interactive-color-primary-active',
+    },
+  }}
+/>
+
+```
+
+<MorningstarColorPalette
+  palette={{
+    Error: {
+      value: '#ff0000',
+      sass: '$mds-feedback-color-error',
+    },
+    Warning: {
+      value: '#f5c400',
+      sass: '$mds-feedback-color-warning',
+    },
+    Success: {
+      value: '#00af41',
+      sass: '$mds-feedback-color-success',
+    },
+    'Success Background': {
+      value: '#e5f7eb',
+      sass: '$mds-feedback-color-success-background',
+    },
+    Active: {
+      value: '#004376',
+      sass: '$mds-interactive-color-primary-active',
+    },
+  }}
+/>
diff --git a/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.stories.tsx b/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.stories.tsx
@@ -0,0 +1,63 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { MorningstarColor, MorningstarColorPalette } from './MorningstarColor';
+import { ColorProps } from '../../types';
+
+export default {
+  title: 'Design Tokens/Colors/MorningstarColor',
+  component: MorningstarColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <MorningstarColor name={name} color={color} />
+);
+
+overview.controls = {
+  name: 'Informational',
+  color: {
+    type: 'object',
+    value: {
+      value: { type: 'color', value: '#f2f2f2' },
+      sass: '$mds-feedback-color-info',
+    },
+  },
+};
+
+export const palette = () => (
+  <MorningstarColorPalette
+    palette={{
+      Informational: {
+        value: '#c9c7c5',
+        sass: '$mds-feedback-color-info',
+      },
+      Error: {
+        value: '#ff0000',
+        sass: '$mds-feedback-color-error',
+      },
+      'Error Background': {
+        value: '#ffe5e5',
+        sass: '$mds-feedback-color-error-background',
+      },
+      Warning: {
+        value: '#f5c400',
+        sass: '$mds-feedback-color-warning',
+      },
+      'Warning Background': {
+        value: '#fef9e5',
+        sass: '$mds-feedback-color-warning-background',
+      },
+      Success: {
+        value: '#00af41',
+        sass: '$mds-feedback-color-success',
+      },
+      'Success Background': {
+        value: '#e5f7eb',
+        sass: '$mds-feedback-color-success-background',
+      },
+      Active: {
+        value: '#004376',
+        sass: '$mds-interactive-color-primary-active',
+      },
+    }}
+  />
+);
diff --git a/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.tsx b/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.tsx
@@ -0,0 +1,108 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Theme } from 'theme-ui';
+import { CopyContainer } from '@component-controls/components';
+import { colorToStr, mostReadable } from '../utils';
+import { ColorBlockProps, ColorValue } from '../../types';
+import { TableContainerProps, TableContainer } from '../../components';
+
+/**
+ * Color item displaying as a table row, with color, name, sass variable name and hex value.
+ * Design inspired from [Morningstar Design System](https://designsystem.morningstar.com/visual-language/color/?version=3.0.4&tab=backgrounds).
+ */
+
+export const MorningstarColor: FC<ColorBlockProps> = props => (
+  <table>
+    <tbody>
+      <BaseMorningstarColor {...props} />
+    </tbody>
+  </table>
+);
+
+const BaseMorningstarColor: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color } : color;
+  const { value: colorValue, name: colorName = name, sass } = colorObj;
+  const { hex } = colorToStr(colorValue);
+  const textColor = mostReadable(hex);
+  return (
+    <tr
+      sx={{
+        fontSize: 0,
+        bg: hex,
+        '& > td ': {
+          p: 2,
+        },
+      }}
+    >
+      <td>
+        <div sx={{ fontSize: 1, fontWeight: 'bold', color: textColor }}>
+          {colorName}
+        </div>
+      </td>
+      <td>
+        <div
+          sx={{
+            bg: 'background',
+            color: 'text',
+            px: 2,
+            border: (t: Theme) => `1px solid ${t.colors?.shadow}`,
+          }}
+        >
+          {sass}
+        </div>
+      </td>
+      <td>
+        <CopyContainer
+          name={colorName}
+          value={hex}
+          sx={{
+            bg: 'background',
+            color: 'text',
+            px: 2,
+            border: (t: Theme) => `1px solid ${t.colors?.shadow}`,
+          }}
+        >
+          {hex}
+        </CopyContainer>
+      </td>
+    </tr>
+  );
+};
+
+/**
+ *
+ * palette displayed with MorningstarColor items
+ * using a css flex display direction column
+ */
+export const MorningstarColorPalette: FC<Omit<
+  TableContainerProps,
+  'children' | 'columns'
+>> = props => (
+  <TableContainer
+    sx={{
+      border: 'none',
+      '& > thead > tr > th': {
+        fontSize: 0,
+        bg: 'background',
+        textAlign: 'left',
+        pb: 2,
+        pl: 2,
+      },
+    }}
+    columns={[
+      { title: 'Name', sx: { width: '35%' } },
+      { title: 'Constant', sx: { width: '52%' } },
+      { title: 'Color', sx: { width: '15%' } },
+    ]}
+    {...props}
+  >
+    {({ name, value }) => (
+      <BaseMorningstarColor
+        key={`color_item_${name}}`}
+        name={name}
+        color={value}
+      />
+    )}
+  </TableContainer>
+);
diff --git a/ui/design-tokens/src/Colors/MorningstarColor/index.ts b/ui/design-tokens/src/Colors/MorningstarColor/index.ts
@@ -0,0 +1 @@
+export * from './MorningstarColor';
diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts
@@ -20,3 +20,4 @@ export * from './HelpScoutColor';
 export * from './IBMDLColor';
 export * from './LightningColor';
 export * from './LiquidColor';
+export * from './MorningstarColor';