feat: added BaseWeb color item

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

@@ -16,6 +16,7 @@ import {
   ColorBlock5Palette, 
   ColorBlock6Palette,
   ColorBlock7Palette,
+  ColorBlock8Palette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -242,4 +243,38 @@ import { ColorBlock7Palette } from '@component-controls/design-tokens';
     "Da' juice": { value: '#6554C0', name: 'P300' },
     Critical: { value: '#f94d32', name: 'Red400' },
   }}
+/>
+
+## ColorBlock8 (BaseWeb)
+
+The [ColorBlock8](/api/design-tokens-colors-colorblock8--overview) component displays a color block as a row, with color, name and hex value.
+
+```
+import { ColorBlock8Palette } from '@component-controls/design-tokens';
+
+<ColorBlock8Palette
+  palette={{
+    yellow50: '#FFFAF0',
+    yellow100: '#FFF2D9',
+    yellow200: '#FFE3AC',
+    yellow300: '#FFCF70',
+    yellow400: '#FFC043',
+    yellow500: '#BC8B2C',
+    yellow600: '#997328',
+    yellow700: '#674D1B',
+  }}
+/>
+```
+
+<ColorBlock8Palette
+  palette={{
+    yellow50: '#FFFAF0',
+    yellow100: '#FFF2D9',
+    yellow200: '#FFE3AC',
+    yellow300: '#FFCF70',
+    yellow400: '#FFC043',
+    yellow500: '#BC8B2C',
+    yellow600: '#997328',
+    yellow700: '#674D1B',
+  }}
 />

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ColorBlock8, ColorBlock8Palette } from './ColorBlock8';
+import { ColorProps } from '../types';
+
+export default {
+  title: 'Design Tokens/Colors/ColorBlock8',
+  component: ColorBlock8,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <ColorBlock8 name={name} color={color} />
+);
+
+overview.controls = {
+  name: { type: 'text', value: 'cobalt400' },
+  color: { type: 'color', value: '#0E1FC1' },
+};
+
+export const palette = () => (
+  <ColorBlock8Palette
+    palette={{
+      yellow50: '#FFFAF0',
+      yellow100: '#FFF2D9',
+      yellow200: '#FFE3AC',
+      yellow300: '#FFCF70',
+      yellow400: '#FFC043',
+      yellow500: '#BC8B2C',
+      yellow600: '#997328',
+      yellow700: '#674D1B',
+    }}
+  />
+);

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

@@ -0,0 +1,74 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Box } from 'theme-ui';
+import { CopyContainer } from '@component-controls/components';
+import { colorToStr, mostReadable } from '../utils';
+import { ColorBlockProps } from '../types';
+import { FlexContainerProps, FlexContainer } from '../FlexContainer';
+
+/**
+ * Color item displaying as a row, with color, name and hex value
+ * Design inspired from [BaseWeb](https://baseweb.design/components/tokens/).
+ */
+
+export const ColorBlock8: FC<ColorBlockProps> = ({ name, color, sx }) => {
+  const colorValue = typeof color === 'string' ? color : color.value;
+  const { hex } = colorToStr(colorValue);
+  const textColor = mostReadable(hex);
+  return (
+    <Box sx={{ display: 'flex', flex: '1', ...sx }}>
+      <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            height: 50,
+            alignItems: 'center',
+            fontSize: 2,
+            borderBottom: `1px solid ${hex}`,
+            bg: 'background',
+          }}
+        >
+          <Box
+            sx={{
+              width: 100,
+              height: 50,
+              bg: colorValue,
+              color: textColor,
+              mr: 3,
+            }}
+          ></Box>
+          <Box
+            sx={{
+              flex: 1,
+            }}
+          >
+            {name}
+          </Box>
+          <div sx={{ mr: 3 }}>{hex.toUpperCase()}</div>
+        </Box>
+      </CopyContainer>
+    </Box>
+  );
+};
+
+/**
+ *
+ * palette displayed with ColorBlock8 items
+ * using a css flex display direction column
+ */
+export const ColorBlock8Palette: FC<Omit<
+  FlexContainerProps,
+  'children' | 'direction'
+>> = props => (
+  <FlexContainer direction="column" {...props}>
+    {({ name, value, hover }) => (
+      <ColorBlock8
+        key={`color_item_${name}}`}
+        name={name}
+        color={value}
+        hover={hover}
+      />
+    )}
+  </FlexContainer>
+);

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

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

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

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