From b400415c42fce7f9abfcee61292498ae9e23cc3d Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Thu, 7 Nov 2024 11:23:56 +0100
Subject: [PATCH] Colormix test

---
 .../src/docs/components/color-palette.css     | 55 +++++++++++++++++++
 .../foundation/design-tokens/colour.docs.mdx  | 14 +++++
 2 files changed, 69 insertions(+)

diff --git a/storybook/src/docs/components/color-palette.css b/storybook/src/docs/components/color-palette.css
index f9d8e6f140..cb8b50c048 100644
--- a/storybook/src/docs/components/color-palette.css
+++ b/storybook/src/docs/components/color-palette.css
@@ -203,3 +203,58 @@
     --ams-lightness: 75%;
   }
 }
+
+.ams-storybook-color-palette__swatches--color-mix {
+  --ams-color: var(--ams-color-primary-blue);
+
+  /* Swatches */
+  --ams-swatch-1: color-mix(in oklab, var(--ams-color) 100%, var(--ams-color-neutral-gray1) 0%);
+  --ams-swatch-2: color-mix(in oklab, var(--ams-color) 100%, var(--ams-color-neutral-gray1) 10%);
+  --ams-swatch-3: color-mix(in oklab, var(--ams-color) 100%, var(--ams-color-neutral-gray1) 20%);
+  --ams-swatch-4: color-mix(in oklab, var(--ams-color) 100%, var(--ams-color-neutral-gray1) 30%);
+  --ams-swatch-5: color-mix(in oklab, var(--ams-color) 100%, var(--ams-color-neutral-gray1) 40%);
+
+  .ams-storybook-color-palette__swatch:nth-of-type(1) {
+    background-color: var(--ams-swatch-1);
+  }
+  .ams-storybook-color-palette__swatch:nth-of-type(2) {
+    background-color: var(--ams-swatch-2);
+  }
+  .ams-storybook-color-palette__swatch:nth-of-type(3) {
+    background-color: var(--ams-swatch-3);
+  }
+  .ams-storybook-color-palette__swatch:nth-of-type(4) {
+    background-color: var(--ams-swatch-4);
+  }
+  .ams-storybook-color-palette__swatch:nth-of-type(5) {
+    background-color: var(--ams-swatch-5);
+  }
+
+  &.ams-storybook-color-palette--blue {
+    --ams-color: var(--ams-color-primary-blue);
+  }
+
+  &.ams-storybook-color-palette--red {
+    --ams-color: var(--ams-color-primary-red);
+  }
+
+  &.ams-storybook-color-palette--green {
+    --ams-color: var(--ams-color-green);
+  }
+
+  &.ams-storybook-color-palette--yellow {
+    --ams-color: var(--ams-color-yellow);
+  }
+
+  &.ams-storybook-color-palette--orange {
+    --ams-color: var(--ams-color-orange);
+  }
+
+  &.ams-storybook-color-palette--magenta {
+    --ams-color: var(--ams-color-magenta);
+  }
+
+  &.ams-storybook-color-palette--grey {
+    --ams-color: var(--ams-color-neutral-grey3);
+  }
+}
diff --git a/storybook/src/foundation/design-tokens/colour.docs.mdx b/storybook/src/foundation/design-tokens/colour.docs.mdx
index cb031ec3b6..e4d1722935 100644
--- a/storybook/src/foundation/design-tokens/colour.docs.mdx
+++ b/storybook/src/foundation/design-tokens/colour.docs.mdx
@@ -69,3 +69,17 @@ We have 8 additional colours and 3 shades of grey.
     <ColorPalette.Swatches color="grey" type="hsl" />
   </ColorPalette.Section>
 </ColorPalette>
+
+## Color Mix
+
+<ColorPalette>
+  <ColorPalette.Section>
+    <ColorPalette.Swatches color="blue" type="color-mix" />
+    <ColorPalette.Swatches color="red" type="color-mix" />
+    <ColorPalette.Swatches color="green" type="color-mix" />
+    <ColorPalette.Swatches color="yellow" type="color-mix" />
+    <ColorPalette.Swatches color="orange" type="color-mix" />
+    <ColorPalette.Swatches color="magenta" type="color-mix" />
+    <ColorPalette.Swatches color="grey" type="color-mix" />
+  </ColorPalette.Section>
+</ColorPalette>