feat: added backpack color palette

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

@@ -8,8 +8,15 @@ tags:
 order: 1
 author: atanasster
 ---
-import { ColorBlock1Palette, ColorBlock2Palette, ColorBlock3Palette, 
-  ColorBlock4Palette, ColorBlock5Palette, ColorBlock6Palette } from '@component-controls/design-tokens';
+import { 
+  ColorBlock1Palette, 
+  ColorBlock2Palette, 
+  ColorBlock3Palette, 
+  ColorBlock4Palette, 
+  ColorBlock5Palette, 
+  ColorBlock6Palette,
+  ColorBlock7Palette,
+} from '@component-controls/design-tokens';
 
 # Overview
 
@@ -205,4 +212,34 @@ import { ColorBlock6Palette } from '@component-controls/design-tokens';
     "Da' juice": { value: '#6554C0', name: 'P300' },
     Critical: { value: '#f94d32', name: 'Red400' },
   }}
+/>
+
+## ColorBlock7 (Backpack)
+
+The [ColorBlock7](/api/design-tokens-colors-colorblock7--overview) component displays a color block and color aliases for various standard is Pantone, CMYK. If specified, will display the dark color as a bottom-right side triangle.
+
+```
+import { ColorBlock7Palette } from '@component-controls/design-tokens';
+
+<ColorBlock7Palette
+  palette={{
+    'Poppy surprise': { value: '#FF5630', name: 'R300' },
+    'Golden state': { value: '#FFAB00', name: 'Y300' },
+    'Fine pine': { value: '#36B37E', name: 'G300' },
+    Tamarama: { value: '#00B8D9', name: 'T300', dark: '#084eb2' },
+    "Da' juice": { value: '#6554C0', name: 'P300' },
+    Critical: { value: '#f94d32', name: 'Red400' },
+  }}
+/>
+```
+
+<ColorBlock7Palette
+  palette={{
+    'Poppy surprise': { value: '#FF5630', name: 'R300' },
+    'Golden state': { value: '#FFAB00', name: 'Y300' },
+    'Fine pine': { value: '#36B37E', name: 'G300' },
+    Tamarama: { value: '#00B8D9', name: 'T300', dark: '#084eb2' },
+    "Da' juice": { value: '#6554C0', name: 'P300' },
+    Critical: { value: '#f94d32', name: 'Red400' },
+  }}
 />

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { ColorBlock7, ColorBlock7Palette } from './ColorBlock7';
+import { ColorProps } from '../types';
+
+export default {
+  title: 'Design Tokens/Colors/ColorBlock7',
+  component: ColorBlock7,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <ColorBlock7 name={name} color={color} />
+);
+
+overview.controls = {
+  name: { type: 'text', value: 'Brand' },
+  color: {
+    type: 'object',
+    value: {
+      value: { type: 'color', value: '#084eb2' },
+      dark: {
+        type: 'object',
+        value: {
+          value: { type: 'color', value: '#cddff8' },
+          name: { type: 'text', value: 'Blue800' },
+        },
+      },
+      name: { type: 'text', value: 'Blue400' },
+    },
+  },
+};
+
+export const name = () => (
+  <ColorBlock7 name="Critical" color={{ name: 'brand', value: '#f94d32' }} />
+);
+
+export const rgb = () => <ColorBlock7 name="text" color="rgb(0, 0, 0)" />;
+
+export const rgba = () => (
+  <ColorBlock7 name="shadow" color="rgba(0, 0, 0, 0.1)" />
+);
+
+export const hsl = () => (
+  <ColorBlock7 name="accent" color="hsl(12, 10%, 50%)" />
+);
+
+export const hsla = () => (
+  <ColorBlock7 name="accent" color="hsl(12, 10%, 50%, .3)" />
+);
+
+export const palette = () => (
+  <ColorBlock7Palette
+    palette={{
+      'Poppy surprise': { value: '#FF5630', name: 'R300' },
+      'Golden state': { value: '#FFAB00', name: 'Y300' },
+      'Fine pine': { value: '#36B37E', name: 'G300' },
+      Tamarama: { value: '#00B8D9', name: 'T300', dark: '#084eb2' },
+      "Da' juice": { value: '#6554C0', name: 'P300' },
+      Critical: { value: '#f94d32', name: 'Red400' },
+    }}
+  />
+);

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

@@ -0,0 +1,129 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Box } from 'theme-ui';
+import { CopyContainer } from '@component-controls/components';
+import simpleColorConverter from 'simple-color-converter';
+import { colorToStr, mostReadable } from '../utils';
+import { ColorBlockProps, ColorValue } from '../types';
+import { GridContainerProps, GridContainer } from '../GridContainer';
+
+/**
+ * Color item displaying the color as a block and color aliases for various standard is Pantone, CMYK.
+ * If specified, will display the dark color as a bottom-right side triangle.
+ * Design inspired from [Backpack](https://backpack.github.io/guidelines/colors).
+ */
+export const ColorBlock7: FC<ColorBlockProps> = ({ name, color, sx }) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color, name: '' } : color;
+  const { value: colorValue, name: colorName, dark } = colorObj;
+  const darkColorObj: ColorValue | undefined =
+    typeof dark === 'string' ? { value: dark, name: dark } : dark;
+  const { value: darkValue, name: darkName } = darkColorObj || {};
+  const { hex, rgba } = colorToStr(colorValue);
+  const textColor = mostReadable(hex);
+  const { color: cmyk } = new simpleColorConverter({
+    rgba,
+    to: 'cmyk',
+  });
+  const { color: pantone } = new simpleColorConverter({
+    rgba,
+    to: 'pantone',
+  });
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 180,
+        maxWidth: 320,
+      }}
+    >
+      <CopyContainer value={hex} name={name}>
+        <Box
+          sx={{
+            color: textColor,
+            bg: colorValue,
+            position: 'relative',
+            ':after': {
+              content: '""',
+              display: 'block',
+              paddingBottom: '100%',
+            },
+            ...sx,
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-between',
+              position: 'absolute',
+              p: 2,
+              top: 0,
+              bottom: 0,
+              left: 0,
+              right: 0,
+            }}
+          >
+            {typeof darkValue !== 'undefined' && (
+              <Box
+                sx={{
+                  position: 'absolute',
+                  bottom: 0,
+                  right: 0,
+                  height: '40%',
+                  width: '40%',
+                  backgroundImage: `linear-gradient(to right bottom, transparent 50%, ${darkValue} 0%, ${darkValue} 50% )`,
+                }}
+              />
+            )}
+            <Box sx={{ pt: 1, pb: 2, fontWeight: 'bold' }}>{`${name || hex} ${
+              typeof darkName !== 'string' ? colorName : ''
+            }`}</Box>
+            <div
+              sx={{
+                lineHeight: 1.5,
+              }}
+            >
+              {typeof darkName !== 'string' ? (
+                <div>
+                  <div>
+                    {`RGB ${rgba.r}, ${rgba.g}, ${rgba.b}${
+                      rgba.a !== 1 ? `, ${rgba.a}` : ''
+                    }`}
+                  </div>
+                  <div>{`HEX ${hex}`}</div>
+                  <div>{`CMYK: ${cmyk.c}, ${cmyk.m}, ${cmyk.y}, ${cmyk.k}`}</div>
+                  <div sx={{ mb: 1 }}>{`${
+                    pantone ? `PMS ${pantone}` : '--'
+                  }`}</div>
+                </div>
+              ) : (
+                <div>
+                  <div>{`light: ${colorName}`}</div>
+                  <div>{`dark: ${darkName}`}</div>
+                </div>
+              )}
+            </div>
+          </Box>
+        </Box>
+      </CopyContainer>
+    </Box>
+  );
+};
+
+/**
+ *
+ * palette displayed with ColorBlock6 items
+ * using a css grid for the dsplay
+ */
+export const ColorBlock7Palette: FC<Omit<
+  GridContainerProps,
+  'children'
+>> = props => (
+  <GridContainer {...props}>
+    {({ name, value }) => (
+      <ColorBlock7 key={`color_item_${name}}`} name={name} color={value} />
+    )}
+  </GridContainer>
+);

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

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

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

@@ -4,3 +4,4 @@ export * from './ColorBlock3';
 export * from './ColorBlock4';
 export * from './ColorBlock5';
 export * from './ColorBlock6';
+export * from './ColorBlock7';

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

@@ -1,7 +1,9 @@
 import { FC, ReactNode } from 'react';
 import { SxProps } from 'theme-ui';
 
-export type ColorValue = string | { name: string; value: string };
+export type ColorValue =
+  | string
+  | { name?: string; value: string; dark?: ColorValue };
 export interface ColorProps {
   /**
    * name of the color, If none, or same as the color value, some color blocks will not display it