feat: added zendesk color token

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

@@ -46,6 +46,7 @@ import {
   UniformColorPalette,
   VanillaColorPalette,
   XColorPalette,
+  ZendeskColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -1839,4 +1840,45 @@ import { XColorPalette } from '@component-controls/design-tokens';
     'Pastor Pink': '#FF96B4',
     'Brigadier Blue': '#000A47',
   }}
+/>
+
+
+## ZendeskColor
+
+The [ZendeskColor](/api/design-tokens-colors-zendeskcolor--overview) component displays the color as a small block with the color name and hex value.
+
+Design inspired from [Zendesk Garden](https://zendeskgarden.github.io/react-components/theming/#!/PALETTE).
+
+```
+import { ZendeskColorPalette } from '@component-controls/design-tokens';
+
+<ZendeskColorPalette
+  palette={{
+    support: '#00A656',
+    message: '#37B8AF',
+    explore: '#30AABC',
+    gather: '#F6C8BE',
+    guide: '#FF6224',
+    connect: '#FF6224',
+    chat: '#F79A3E',
+    talk: '#EFC93D',
+    sell: '#C38F00',
+    '100 ': '#F8F9F9',
+  }}
+/>
+```
+
+ <ZendeskColorPalette
+  palette={{
+    support: '#00A656',
+    message: '#37B8AF',
+    explore: '#30AABC',
+    gather: '#F6C8BE',
+    guide: '#FF6224',
+    connect: '#FF6224',
+    chat: '#F79A3E',
+    talk: '#EFC93D',
+    sell: '#C38F00',
+    '100 ': '#F8F9F9',
+  }}
 />

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ControlTypes } from '@component-controls/core';
+import { ZendeskColor, ZendeskColorPalette } from './ZendeskColor';
+import { ColorProps } from '../../types';
+
+export default {
+  title: 'Design Tokens/Colors/ZendeskColor',
+  component: ZendeskColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <ZendeskColor name={name} color={color} />
+);
+
+overview.controls = {
+  name: 'Rich Purple',
+  color: { type: ControlTypes.COLOR, value: '#503291' },
+};
+
+export const palette = () => (
+  <ZendeskColorPalette
+    palette={{
+      support: '#00A656',
+      message: '#37B8AF',
+      explore: '#30AABC',
+      gather: '#F6C8BE',
+      guide: '#FF6224',
+      connect: '#FF6224',
+      chat: '#F79A3E',
+      talk: '#EFC93D',
+      sell: '#C38F00',
+      '100 ': '#F8F9F9',
+    }}
+  />
+);

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

@@ -0,0 +1,64 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Theme } from 'theme-ui';
+import { CopyContainer } from '@component-controls/components';
+import { colorToStr } from '../utils';
+import { ColorBlockProps } from '../../types';
+import { GridContainerProps, GridContainer } from '../../components';
+
+/**
+ * Color item displaying the color as a small block with the color name and hex value.
+ * Design inspired from [Zendesk Garden](https://zendeskgarden.github.io/react-components/theming/#!/PALETTE).
+ */
+export const ZendeskColor: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorValue = typeof color === 'string' ? color : color.value;
+  const { hex } = colorToStr(colorValue);
+  return (
+    <div
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        bg: 'background',
+        minWidth: 70,
+        fontSize: 0,
+        maxWidth: 120,
+        border: (t: Theme) => `1px solid ${t.colors?.shadow}`,
+        borderRadius: 1,
+        boxShadow: (t: Theme) => `0px 8px 12px 0px ${t.colors?.shadow}`,
+      }}
+    >
+      <CopyContainer value={hex} name={name}>
+        <div
+          sx={{
+            bg: colorValue,
+            ':after': {
+              content: '""',
+              display: 'block',
+              paddingBottom: '100%',
+            },
+          }}
+        />
+      </CopyContainer>
+      <div sx={{ p: 1, display: 'flex', flexDirection: 'column' }}>
+        <div sx={{ fontWeight: 'heading' }}>{name}</div>
+        <div>{hex}</div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ *
+ * palette displayed with ZendeskColor items
+ * using a css grid for the dsplay
+ */
+export const ZendeskColorPalette: FC<Omit<
+  GridContainerProps,
+  'children'
+>> = props => (
+  <GridContainer width={80} gap={2} {...props}>
+    {({ name, value }) => (
+      <ZendeskColor key={`color_item_${name}}`} name={name} color={value} />
+    )}
+  </GridContainer>
+);

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

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

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

@@ -33,3 +33,4 @@ export * from './SolidColor';
 export * from './UniformColor';
 export * from './VanillaColor';
 export * from './XColor';
+export * from './ZendeskColor';