From b5c89a78fee7ddd34ca514a5bcff053cca4dbb85 Mon Sep 17 00:00:00 2001 From: MeesoPost <100311542+MeesoPost@users.noreply.github.com> Date: Fri, 13 Sep 2024 18:00:58 +0200 Subject: [PATCH 1/6] feat: :sparkles: added first color palette to the colorsdocumentation --- packages/storybook/src/documentation/color.mdx | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 packages/storybook/src/documentation/color.mdx diff --git a/packages/storybook/src/documentation/color.mdx b/packages/storybook/src/documentation/color.mdx new file mode 100644 index 00000000..43b3c37e --- /dev/null +++ b/packages/storybook/src/documentation/color.mdx @@ -0,0 +1,12 @@ +import { ColorItem, ColorPalette, Meta } from "@storybook/blocks"; +import tokens from "../../../../proprietary/design-tokens/figma/figma.tokens.json"; + +export const baseColors = tokens["brand"]["frameless"]["color"]; + + + + + {Object.entries(baseColors).map(([key, token]) => ( + + ))} + From 84a6e389c4251c2d5562ce6265e2b919f0a3dae9 Mon Sep 17 00:00:00 2001 From: MeesoPost <100311542+MeesoPost@users.noreply.github.com> Date: Fri, 27 Sep 2024 12:02:37 +0200 Subject: [PATCH 2/6] =?UTF-8?q?=E2=9C=A8=20feat(added=20color=20palette)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../storybook/src/documentation/color.mdx | 23 ++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/packages/storybook/src/documentation/color.mdx b/packages/storybook/src/documentation/color.mdx index 43b3c37e..4749b5f2 100644 --- a/packages/storybook/src/documentation/color.mdx +++ b/packages/storybook/src/documentation/color.mdx @@ -6,7 +6,24 @@ export const baseColors = tokens["brand"]["frameless"]["color"]; - {Object.entries(baseColors).map(([key, token]) => ( - - ))} + {Object.entries(baseColors).map(([key, token]) => { + + const colorValues = typeof token === 'object' && token !== null + ? Object.entries(token).reduce((acc, [shade, colorData]) => { + const value = typeof colorData === 'object' && colorData.value ? colorData.value : colorData; + acc[`${key}-${shade}`] = value; + return acc; + }, {}) + : { [key]: typeof token === 'object' && token.value ? token.value : token }; + + return ( + + ); + +})} + From 415da43258c2a93181ef0dc8d2a744e2522b3ce5 Mon Sep 17 00:00:00 2001 From: MeesoPost <100311542+MeesoPost@users.noreply.github.com> Date: Fri, 18 Oct 2024 14:44:50 +0200 Subject: [PATCH 3/6] added color palette story with brand tokens --- .../storybook/src/documentation/color.mdx | 39 ++++++++++--------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/packages/storybook/src/documentation/color.mdx b/packages/storybook/src/documentation/color.mdx index 4749b5f2..d4b65f46 100644 --- a/packages/storybook/src/documentation/color.mdx +++ b/packages/storybook/src/documentation/color.mdx @@ -1,29 +1,30 @@ import { ColorItem, ColorPalette, Meta } from "@storybook/blocks"; import tokens from "../../../../proprietary/design-tokens/figma/figma.tokens.json"; - export const baseColors = tokens["brand"]["frameless"]["color"]; - +# Color - - {Object.entries(baseColors).map(([key, token]) => { +## Color Palette - const colorValues = typeof token === 'object' && token !== null - ? Object.entries(token).reduce((acc, [shade, colorData]) => { - const value = typeof colorData === 'object' && colorData.value ? colorData.value : colorData; - acc[`${key}-${shade}`] = value; - return acc; - }, {}) - : { [key]: typeof token === 'object' && token.value ? token.value : token }; + - return ( - - ); + + value)} /> + value)} /> + value)} /> + value)} /> + value)} /> + value)} /> + value)} /> + value)} /> + value)} /> + value)} /> + -})} + + {[baseColors.petrol[1], + baseColors.green[1] + + ]} From 5d57f7d16a8c11e2b0fd7029a13c590686d52920 Mon Sep 17 00:00:00 2001 From: MeesoPost <100311542+MeesoPost@users.noreply.github.com> Date: Fri, 18 Oct 2024 14:51:42 +0200 Subject: [PATCH 4/6] refactor: :coffin: removed unused color palette --- packages/storybook/src/documentation/color.mdx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/storybook/src/documentation/color.mdx b/packages/storybook/src/documentation/color.mdx index d4b65f46..46e5fbcf 100644 --- a/packages/storybook/src/documentation/color.mdx +++ b/packages/storybook/src/documentation/color.mdx @@ -20,11 +20,3 @@ export const baseColors = tokens["brand"]["frameless"]["color"]; value)} /> value)} /> - - - {[baseColors.petrol[1], - baseColors.green[1] - - ]} - - From 85eb78e82ddede068a251f9c689c2b13b83d8899 Mon Sep 17 00:00:00 2001 From: MeesoPost <100311542+MeesoPost@users.noreply.github.com> Date: Fri, 25 Oct 2024 11:54:31 +0200 Subject: [PATCH 5/6] refactor: :recycle: changed the order of the colors to match figma --- packages/storybook/src/documentation/color.mdx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/storybook/src/documentation/color.mdx b/packages/storybook/src/documentation/color.mdx index 46e5fbcf..1687b70e 100644 --- a/packages/storybook/src/documentation/color.mdx +++ b/packages/storybook/src/documentation/color.mdx @@ -1,22 +1,24 @@ import { ColorItem, ColorPalette, Meta } from "@storybook/blocks"; import tokens from "../../../../proprietary/design-tokens/figma/figma.tokens.json"; -export const baseColors = tokens["brand"]["frameless"]["color"]; +export const baseColors = tokens.brand.frameless.color; -# Color +# Colors ## Color Palette - value)} /> + + value)} /> value)} /> - value)} /> + value)} /> value)} /> - value)} /> + value)} /> value)} /> value)} /> + From 7d77b73304a7b3c3dd40529e79d3d03619ce819f Mon Sep 17 00:00:00 2001 From: MeesoPost <100311542+MeesoPost@users.noreply.github.com> Date: Fri, 25 Oct 2024 11:55:28 +0200 Subject: [PATCH 6/6] feat: :sparkles: added link to figma --- packages/storybook/src/documentation/color.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/storybook/src/documentation/color.mdx b/packages/storybook/src/documentation/color.mdx index 1687b70e..5ba565ad 100644 --- a/packages/storybook/src/documentation/color.mdx +++ b/packages/storybook/src/documentation/color.mdx @@ -22,3 +22,5 @@ export const baseColors = tokens.brand.frameless.color; value)} /> + +[Figma: Brand Identity / Color](https://www.figma.com/design/0x30NahtGzQlvdAjiPhwFn/NLDS---Frameless---Bibliotheek?node-id=3-314&node-type=canvas&t=ruJU2nnEfLTYXggb-0)