feat: ad imb design language color token

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

@@ -8,6 +8,7 @@ tags:
 order: 1
 author: atanasster
 ---
+import { Tabs, TabList, Tab, TabPanel } from '@component-controls/components';
 import { 
   AltaColorPalette, 
   AntdHorzColorPalette, 
@@ -28,6 +29,8 @@ import {
   FishTankColorPalette,
   GovUKColorPalette,
   HelpScoutColorPalette,
+  ColorTabs,
+  IBMDLColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -905,3 +908,44 @@ import { HelpScoutColorPalette } from '@component-controls/design-tokens';
     'lavender-600': { value: '#818AEC', name: '600' },
   }}
 />
+
+
+## IBMDLColor
+
+The [IBMDLColor](/api/design-tokens-colors-ibmdlcolor--overview) component displays the color as a row with the color name and display option of hex, rgb, pms or cmyk color display.
+
+Design inspired from IBM's [Design Language](https://www.ibm.com/design/language/color).
+
+```
+import { ColorTabs, IBMDLColorPalette } from '@component-controls/design-tokens';
+
+<ColorTabs>
+  {display => (
+    <IBMDLColorPalette
+      display={display}
+      palette={{
+        'Red 100': '#2d0709',
+        'Red 90': '#520408',
+        'Red 80': '#750e13',
+        'Red 70': '#a2191f',
+        'Red 60': '#da1e28',
+      }}
+    />
+  )}
+</ColorTabs>
+```
+
+<ColorTabs>
+  {display => (
+    <IBMDLColorPalette
+      display={display}
+      palette={{
+        'Red 100': '#2d0709',
+        'Red 90': '#520408',
+        'Red 80': '#750e13',
+        'Red 70': '#a2191f',
+        'Red 60': '#da1e28',
+      }}
+    />
+  )}
+</ColorTabs>

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  IBMDLColor,
+  IBMDLColorPalette,
+  IBMDLColorProps,
+  ColorTabs,
+} from './IBMDLColor';
+
+export default {
+  title: 'Design Tokens/Colors/IBMDLColor',
+  component: IBMDLColor,
+};
+
+export const overview = ({ name, color, display }: IBMDLColorProps) => (
+  <IBMDLColor name={name} color={color} display={display} />
+);
+
+overview.controls = {
+  name: 'Green 10',
+  color: { type: 'color', value: '#defbe6' },
+  display: { type: 'options', options: ['hex', 'rgb', 'pms', 'cmyk'] },
+};
+
+export const palette = () => {
+  return (
+    <ColorTabs>
+      {display => (
+        <IBMDLColorPalette
+          display={display}
+          palette={{
+            'Red 100': '#2d0709',
+            'Red 90': '#520408',
+            'Red 80': '#750e13',
+            'Red 70': '#a2191f',
+            'Red 60': '#da1e28',
+            'Red 50': '#fa4d56',
+            'Red 40': '#ff8389',
+            'Red 30': '#ffb3b8',
+            'Red 20': '#ffd7d9',
+            'Red 10': '#fff1f1',
+          }}
+        />
+      )}
+    </ColorTabs>
+  );
+};

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

@@ -0,0 +1,123 @@
+/** @jsx jsx */
+import { FC, ReactNode, useState } from 'react';
+import { jsx } from 'theme-ui';
+import {
+  CopyContainer,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanel,
+} from '@component-controls/components';
+import simpleColorConverter from 'simple-color-converter';
+import { colorToStr, mostReadable } from '../utils';
+import { ColorBlockProps, ColorValue } from '../../types';
+import { FlexContainerProps, FlexContainer } from '../../components';
+
+export const COLOR_OPTIONS = ['hex', 'rgb', 'pms', 'cmyk'] as const;
+
+type ColorDisplayTuple = typeof COLOR_OPTIONS;
+export type ColorDisplay = ColorDisplayTuple[number];
+
+export type IBMDLColorProps = ColorBlockProps & { display: ColorDisplay };
+/**
+ * Color item displaying the color as a row with the color name and display option of hex, rgb, pms or cmyk color display.
+ * Design inspired from IBM's [Design Language](https://www.ibm.com/design/language/color).
+ */
+
+export const IBMDLColor: FC<IBMDLColorProps> = ({
+  name,
+  color,
+  display = 'hex',
+}) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color } : color;
+  const { value: colorValue } = colorObj;
+
+  const { hex, rgba } = colorToStr(colorValue);
+  const textColor = mostReadable(hex);
+  const displayColor = () => {
+    switch (display) {
+      case 'hex':
+        return hex.split('#')[1];
+      case 'rgb':
+        return `r${rgba.r} g${rgba.g} b${rgba.b}${
+          rgba.a !== 1 ? ` a${rgba.a.toFixed(2)}` : ''
+        }`;
+      case 'pms':
+        const { color: pms } = new simpleColorConverter({
+          rgba,
+          to: 'pantone',
+        });
+        return pms.split('C')[0];
+      case 'cmyk':
+        const { color: cmyk } = new simpleColorConverter({
+          rgba,
+          to: 'cmyk',
+        });
+        return `c${cmyk.c} m${cmyk.m} y${cmyk.y} k${cmyk.k}`;
+    }
+  };
+  return (
+    <div sx={{ display: 'flex', flex: '1' }}>
+      <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
+        <div
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            bg: colorValue,
+            color: textColor,
+            height: 50,
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            fontSize: 1,
+            transition: 'all .2s',
+            px: 3,
+          }}
+        >
+          <div>{name}</div>
+          <div>{displayColor()}</div>
+        </div>
+      </CopyContainer>
+    </div>
+  );
+};
+
+/**
+ *
+ * palette displayed with FishTankColor items
+ * using a css flex display direction column
+ */
+export const IBMDLColorPalette: FC<Omit<
+  FlexContainerProps,
+  'children' | 'direction'
+> & { display: ColorDisplay }> = ({ display, ...props }) => (
+  <FlexContainer direction="column" {...props}>
+    {({ name, value }) => (
+      <IBMDLColor
+        key={`color_item_${name}}`}
+        name={name}
+        color={value}
+        display={display}
+      />
+    )}
+  </FlexContainer>
+);
+
+export const ColorTabs: FC<{
+  children: (display: ColorDisplay) => ReactNode;
+}> = ({ children }) => {
+  const [display, setDisplay] = useState(0);
+  return (
+    <Tabs selectedIndex={display} onSelect={index => setDisplay(index)}>
+      <TabList>
+        {COLOR_OPTIONS.map(display => (
+          <Tab key={`tab_${display}`}>{display.toUpperCase()}</Tab>
+        ))}
+      </TabList>
+      {COLOR_OPTIONS.map(display => (
+        <TabPanel key={`tab_panel_${display}`} />
+      ))}
+      {children(COLOR_OPTIONS[display])}
+    </Tabs>
+  );
+};

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

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

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

@@ -17,3 +17,4 @@ export * from './FinastraColor';
 export * from './FishTankColor';
 export * from './GovUKColor';
 export * from './HelpScoutColor';
+export * from './IBMDLColor';