feat: add govuk ds color token

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

@@ -26,6 +26,7 @@ import {
   ETradeColorPalette,
   FinastraColorPalette,
   FishTankColorPalette,
+  GovUKColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -817,3 +818,55 @@ import { FishTankColorPalette } from '@component-controls/design-tokens';
     },
   }}
 />
+
+## GovUKColor
+
+The [GovUKColor](/api/design-tokens-colors-govukcolor--overview) component displays the color as a row with a color circle and the sass var name and hex color.
+
+Design inspired from [GOV.UK Design System](https://design-system.service.gov.uk/styles/colour/).
+
+```
+import { GovUKColorPalette } from '@component-controls/design-tokens';
+
+<GovUKColorPalette
+  palette={{
+    'brand-colour': {
+      sass: '$govuk-brand-colour',
+      value: '#1d70b8',
+    },
+    'hover-colour': {
+      sass: '$govuk-link-hover-colour',
+      value: '#003078',
+    },
+    'visited-colour': {
+      sass: '$govuk-link-visited-colour',
+      value: '#4c2c92',
+    },
+    red: {
+      varName: 'govuk-colour("red")',
+      value: '#d4351c',
+    },
+  }}
+/>
+```
+
+<GovUKColorPalette
+  palette={{
+    'brand-colour': {
+      sass: '$govuk-brand-colour',
+      value: '#1d70b8',
+    },
+    'hover-colour': {
+      sass: '$govuk-link-hover-colour',
+      value: '#003078',
+    },
+    'visited-colour': {
+      sass: '$govuk-link-visited-colour',
+      value: '#4c2c92',
+    },
+    red: {
+      varName: 'govuk-colour("red")',
+      value: '#d4351c',
+    },
+  }}
+/>

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { GovUKColor, GovUKColorPalette } from './GovUKColor';
+import { ColorProps } from '../types';
+
+export default {
+  title: 'Design Tokens/Colors/GovUKColor',
+  component: GovUKColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <GovUKColor name={name} color={color} />
+);
+
+overview.controls = {
+  color: {
+    type: 'object',
+    value: {
+      value: { type: 'color', value: '#1d70b8' },
+      sass: { type: 'color', value: '$govuk-brand-colour' },
+    },
+  },
+};
+
+export const palette = () => (
+  <GovUKColorPalette
+    palette={{
+      'brand-colour': {
+        sass: '$govuk-brand-colour',
+        value: '#1d70b8',
+      },
+      'hover-colour': {
+        sass: '$govuk-link-hover-colour',
+        value: '#003078',
+      },
+      'visited-colour': {
+        sass: '$govuk-link-visited-colour',
+        value: '#4c2c92',
+      },
+      red: {
+        varName: 'govuk-colour("red")',
+        value: '#d4351c',
+      },
+    }}
+  />
+);

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

@@ -0,0 +1,74 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx } from 'theme-ui';
+import { CopyContainer } from '@component-controls/components';
+import { colorToStr } from '../utils';
+import { ColorBlockProps, ColorValue } from '../types';
+import { FlexContainerProps, FlexContainer } from '../FlexContainer';
+
+/**
+ * Color item displaying the color as a row with a color circle and the sass var name and hex color.
+ * Design inspired from [GOV.UK Design System](https://design-system.service.gov.uk/styles/colour/).
+ */
+
+export const GovUKColor: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color } : color;
+  const { value: colorValue, sass, varName } = colorObj;
+
+  const { hex } = colorToStr(colorValue);
+  return (
+    <div sx={{ display: 'flex', flex: '1' }}>
+      <div
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          fontSize: 2,
+          p: 2,
+        }}
+      >
+        <CopyContainer value={hex} name={name}>
+          <div
+            sx={{
+              width: 40,
+              height: 40,
+              borderRadius: '50%',
+              bg: colorValue,
+              mr: 3,
+            }}
+          />
+        </CopyContainer>
+        <div
+          sx={{
+            justifyContent: 'space-between',
+            flex: 1,
+            alignItems: 'center',
+            display: 'flex',
+            flexDirection: 'row',
+          }}
+        >
+          <div>{sass || varName}</div>
+          <div>{hex}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ *
+ * palette displayed with GovUKDS items
+ * using a css flex display direction column
+ */
+export const GovUKColorPalette: FC<Omit<
+  FlexContainerProps,
+  'children' | 'direction'
+>> = props => (
+  <FlexContainer direction="column" {...props}>
+    {({ name, value }) => (
+      <GovUKColor key={`color_item_${name}}`} name={name} color={value} />
+    )}
+  </FlexContainer>
+);

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

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

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

@@ -15,3 +15,4 @@ export * from './DuetColor';
 export * from './ETradeColor';
 export * from './FinastraColor';
 export * from './FishTankColor';
+export * from './GovUKColor';