feat: add primer color token

examples/stories/src/tutorial/design/tokens/colors.mdx

@@ -38,6 +38,7 @@ import {
   PajamasColorPalette,
   PatternFlyColorPalette,
   PhotonColorPalette,
+  PrimerColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -1474,3 +1475,33 @@ import { PhotonColorPalette } from '@component-controls/design-tokens';
   }}
 />
 
+## PrimerColor
+
+The [PrimerColor](/api/design-tokens-colors-primercolor--overview) component displays the color as a row, with sass variable name. Separate visualization (header) for primary color.
+
+Design inspired from GitHub's [Primer](https://styleguide.github.com/primer/support/color-system/).
+
+```
+import { PrimerColorPalette } from '@component-controls/design-tokens';
+
+<PrimerColorPalette
+  palette={{
+    Yellow: { value: '#ffd33d', sass: '$yellow-500', primary: true },
+    'yellow-400': { value: '#ffdf5d', sass: '$yellow-400' },
+    'yellow-500': { value: '#ffd33d', sass: '$yellow-500' },
+    'yellow-600': { value: '#f9c513', sass: '$yellow-600' },
+    'yellow-700': { value: '#dbab09', sass: '$yellow-700' },
+  }}
+/>
+```
+
+<PrimerColorPalette
+  palette={{
+    Yellow: { value: '#ffd33d', sass: '$yellow-500', primary: true },
+    'yellow-400': { value: '#ffdf5d', sass: '$yellow-400' },
+    'yellow-500': { value: '#ffd33d', sass: '$yellow-500' },
+    'yellow-600': { value: '#f9c513', sass: '$yellow-600' },
+    'yellow-700': { value: '#dbab09', sass: '$yellow-700' },
+  }}
+/>
+

ui/design-tokens/src/Colors/PrimerColor/PrimerColor.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { PrimerColor, PrimerColorPalette } from './PrimerColor';
+import { ColorProps } from '../../types';
+
+export default {
+  title: 'Design Tokens/Colors/PrimerColor',
+  component: PrimerColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <PrimerColor name={name} color={color} />
+);
+
+overview.controls = {
+  name: 'Yellow',
+  color: {
+    type: 'object',
+    value: {
+      value: { type: 'color', value: '#ffd33d' },
+      sass: '$yellow-500',
+      primary: { type: 'boolean', value: true },
+    },
+  },
+};
+
+export const palette = () => (
+  <PrimerColorPalette
+    palette={{
+      Yellow: { value: '#ffd33d', sass: '$yellow-500', primary: true },
+      'yellow-000': { value: '#fffdef', sass: '$yellow-000' },
+      'yellow-100': { value: '#fffbdd', sass: '$yellow-100' },
+      'yellow-200': { value: '#fff5b1', sass: '$yellow-200' },
+      'yellow-300': { value: '#ffea7f', sass: '$yellow-300' },
+      'yellow-400': { value: '#ffdf5d', sass: '$yellow-400' },
+      'yellow-500': { value: '#ffd33d', sass: '$yellow-500' },
+      'yellow-600': { value: '#f9c513', sass: '$yellow-600' },
+      'yellow-700': { value: '#dbab09', sass: '$yellow-700' },
+      'yellow-800': { value: '#b08800', sass: '$yellow-800' },
+      'yellow-900': { value: '#735c0f', sass: '$yellow-900' },
+    }}
+  />
+);

ui/design-tokens/src/Colors/PrimerColor/PrimerColor.tsx

@@ -0,0 +1,78 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx } from 'theme-ui';
+import { CopyContainer } from '@component-controls/components';
+import { colorToStr, mostReadable } from '../utils';
+import { ColorBlockProps, ColorValue } from '../../types';
+import { FlexContainerProps, FlexContainer } from '../../components';
+
+/**
+ * Color item displaying the color as a row, with sass variable name. Separate visualization (header) for primary color.
+ * Design inspired from GitHub's [Primer](https://styleguide.github.com/primer/support/color-system/).
+ */
+
+export const PrimerColor: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color } : color;
+  const { value: colorValue, primary, sass } = colorObj;
+
+  const { hex } = colorToStr(colorValue);
+  const textColor = mostReadable(hex);
+
+  return (
+    <div
+      sx={{ display: 'flex', flex: '1', mb: primary ? 2 : 0, color: textColor }}
+    >
+      <CopyContainer value={hex} name={name} sx={{ width: '100%' }}>
+        <div
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            bg: colorValue,
+
+            height: primary ? 140 : 50,
+            justifyContent: primary ? 'space-between' : 'center',
+            fontSize: 2,
+          }}
+        >
+          {primary && <div sx={{ px: 3, fontSize: 6 }}>{name}</div>}
+          <div
+            sx={{
+              px: 3,
+              display: 'flex',
+              height: 50,
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}
+          >
+            <div
+              sx={{
+                mr: 4,
+              }}
+            >
+              {sass}
+            </div>
+            <div>{hex}</div>
+          </div>
+        </div>
+      </CopyContainer>
+    </div>
+  );
+};
+
+/**
+ *
+ * palette displayed with PrimerColor items
+ * using a css flex display direction column
+ */
+export const PrimerColorPalette: FC<Omit<
+  FlexContainerProps,
+  'children' | 'direction'
+>> = props => (
+  <FlexContainer direction="column" sx={{ width: 350 }} {...props}>
+    {({ name, value }) => (
+      <PrimerColor key={`color_item_${name}}`} name={name} color={value} />
+    )}
+  </FlexContainer>
+);

ui/design-tokens/src/Colors/PrimerColor/index.ts

@@ -0,0 +1 @@
+export * from './PrimerColor';

ui/design-tokens/src/Colors/index.ts

@@ -25,3 +25,4 @@ export * from './OPatternColor';
 export * from './PajamasColor';
 export * from './PatternFlyColor';
 export * from './PhotonColor';
+export * from './PrimerColor';