Colormix test

Amsterdam · Nov 7, 2024 · b400415 · b400415
1 parent 55bd674
commit b400415
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 0 deletions.
diff --git 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
@@ -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>