From 5db3011653369f35092925956921bd0f06ae386a Mon Sep 17 00:00:00 2001 From: RGRMdesign <166487037+RGRMdesign@users.noreply.github.com> Date: Fri, 25 Oct 2024 13:55:27 +0200 Subject: [PATCH 1/5] feat: change and add tokens set underline tokens to none change utrecht-heading tokens add nora-page-layout tokens add nora-page-section tokens --- .../figma/figma.tokens.json | 159 ++++++++++++++++-- 1 file changed, 142 insertions(+), 17 deletions(-) diff --git a/proprietary/nora-design-tokens/figma/figma.tokens.json b/proprietary/nora-design-tokens/figma/figma.tokens.json index 70b145b12..537b61b67 100644 --- a/proprietary/nora-design-tokens/figma/figma.tokens.json +++ b/proprietary/nora-design-tokens/figma/figma.tokens.json @@ -539,6 +539,18 @@ "$type": "fontFamilies", "$value": "\"Fira Code\", Tahoma, Verdana, sans-serif" } + }, + "heading": { + "scale": { + "$type": "number", + "$value": "1.15" + }, + "large-vw": { + "scale": { + "$type": "number", + "$value": "1.2" + } + } } }, "border-radius": { @@ -607,6 +619,14 @@ "type": "dropShadow" } } + }, + "breakpoint": { + "large-vw": { + "min-width": { + "$type": "dimension", + "$value": "64rem" + } + } } } }, @@ -677,7 +697,7 @@ }, "color": { "$type": "color", - "$value": "{nora.color.black}" + "$value": "{nora.document.color}" } }, "form-control": { @@ -1069,6 +1089,10 @@ "$type": "sizing", "$value": "45.25rem" } + }, + "no-text-decoration": { + "$type": "textDecoration", + "$value": "none" } } }, @@ -1121,7 +1145,7 @@ }, "text-decoration": { "$type": "textDecoration", - "$value": "None" + "$value": "{nora.no-text-decoration}" } }, "focus": { @@ -1135,7 +1159,7 @@ }, "text-decoration": { "$type": "textDecoration", - "$value": "None" + "$value": "{nora.no-text-decoration}" } }, "hover": { @@ -1145,7 +1169,7 @@ }, "text-decoration": { "$type": "textDecoration", - "$value": "None" + "$value": "{nora.no-text-decoration}" } }, "current": { @@ -1156,7 +1180,7 @@ }, "text-decoration": { "$type": "textDecoration", - "$value": "none" + "$value": "{nora.no-text-decoration}" } }, "separator": { @@ -1441,12 +1465,12 @@ }, "font-size": { "$type": "fontSizes", - "$value": "{nora.typography.font-size.2xl}" + "$value": "{utrecht.heading-2.font-size} * {nora.typography.heading.scale}" }, "large-vw": { "font-size": { "$type": "fontSizes", - "$value": "{nora.typography.font-size.3xl}" + "$value": "{utrecht.heading-2.large-vw.font-size} * {nora.typography.heading.large-vw.scale}" } } }, @@ -1469,12 +1493,12 @@ }, "font-size": { "$type": "fontSizes", - "$value": "{nora.typography.font-size.xl}" + "$value": "{utrecht.heading-3.font-size} * {nora.typography.heading.scale}" }, "large-vw": { "font-size": { "$type": "fontSizes", - "$value": "{nora.typography.font-size.2xl}" + "$value": "{utrecht.heading-3.large-vw.font-size} * {nora.typography.heading.large-vw.scale}" } } }, @@ -1497,12 +1521,12 @@ }, "font-size": { "$type": "fontSizes", - "$value": "{nora.typography.font-size.lg}" + "$value": "{utrecht.heading-4.font-size} * {nora.typography.heading.scale}" }, "large-vw": { "font-size": { "$type": "fontSizes", - "$value": "{nora.typography.font-size.xl}" + "$value": "{utrecht.heading-4.large-vw.font-size} * {nora.typography.heading.large-vw.scale}" } } }, @@ -1525,12 +1549,12 @@ }, "font-size": { "$type": "fontSizes", - "$value": "{nora.typography.font-size.md}" + "$value": "{utrecht.heading-5.font-size} * {nora.typography.heading.scale}" }, "large-vw": { "font-size": { "$type": "fontSizes", - "$value": "{nora.typography.font-size.lg}" + "$value": "{utrecht.heading-5.large-vw.font-size} * {nora.typography.heading.large-vw.scale}" } } }, @@ -1553,12 +1577,12 @@ }, "font-size": { "$type": "fontSizes", - "$value": "{nora.typography.font-size.sm}" + "$value": "{nora.document.font-size}" }, "large-vw": { "font-size": { "$type": "fontSizes", - "$value": "{nora.typography.font-size.md}" + "$value": "{nora.document.large-vw.font-size}" } } }, @@ -1581,12 +1605,12 @@ }, "font-size": { "$type": "fontSizes", - "$value": "{nora.typography.font-size.sm}" + "$value": "{nora.document.font-size}" }, "large-vw": { "font-size": { "$type": "fontSizes", - "$value": "{nora.typography.font-size.md}" + "$value": "{nora.document.large-vw.font-size}" } } } @@ -2166,6 +2190,105 @@ } } }, + "components/page-section": { + "nora": { + "page-section": { + "article": { + "padding-block-start": { + "$type": "dimension", + "$value": "{nora.space.300}" + }, + "padding-block-end": { + "$type": "dimension", + "$value": "{nora.space.300}" + }, + "padding-inline-start": { + "$type": "dimension", + "$value": "{nora.space.200}" + }, + "padding-inline-end": { + "$type": "dimension", + "$value": "{nora.space.200}" + }, + "container": { + "gap": { + "$type": "dimension", + "$value": "{nora.space.300}" + }, + "large-vw": { + "gap": { + "$type": "dimension", + "$value": "4rem" + }, + "min-width": { + "$type": "dimension", + "$value": "61.5rem" + }, + "max-width": { + "$type": "dimension", + "$value": "72rem" + } + } + }, + "large-vw": { + "padding-block-start": { + "$type": "dimension", + "$value": "{nora.space.600}" + }, + "padding-block-end": { + "$type": "dimension", + "$value": "{nora.space.600}" + }, + "padding-inline-start": { + "$type": "dimension", + "$value": "{nora.space.250}" + }, + "padding-inline-end": { + "$type": "dimension", + "$value": "{nora.space.250}" + } + }, + "content": { + "large-vw": { + "min-width": { + "$type": "dimension", + "$value": "40rem", + "$description": "640px" + }, + "max-width": { + "$type": "dimension", + "$value": "46rem", + "$description": "736px" + } + } + }, + "navigation": { + "large-vw": { + "max-width": { + "$type": "dimension", + "$value": "22rem", + "$description": "352px" + } + } + } + } + } + } + }, + "components/page-layout": { + "nora": { + "page-layout": { + "scrolled": { + "header-container": { + "box-shadow": { + "$type": "boxShadow", + "$value": "{nora.box-shadow.sm}" + } + } + } + } + } + }, "components/unordered-list": { "utrecht": { "unordered-list": { @@ -2403,6 +2526,8 @@ "components/navigation-bar", "components/ordered-list", "components/paragraph", + "components/page-section", + "components/page-layout", "components/unordered-list", "drafts/breadcrumbs-tools-bar", "drafts/link-overview", From 025c546558297f2580a01fa8e474173dcba650e3 Mon Sep 17 00:00:00 2001 From: RGRMdesign <166487037+RGRMdesign@users.noreply.github.com> Date: Fri, 25 Oct 2024 13:58:42 +0200 Subject: [PATCH 2/5] Create update-nora-design-tokens.md --- .changeset/update-nora-design-tokens.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/update-nora-design-tokens.md diff --git a/.changeset/update-nora-design-tokens.md b/.changeset/update-nora-design-tokens.md new file mode 100644 index 000000000..c85876838 --- /dev/null +++ b/.changeset/update-nora-design-tokens.md @@ -0,0 +1,8 @@ +--- +"@nl-design-system-community/nora-design-tokens": minor +--- + +set underline tokens to none +change utrecht-heading tokens +add nora-page-layout tokens +add nora-page-section tokens From d808658f78fb02c9b1edd5ef4ea8cf78d69427a4 Mon Sep 17 00:00:00 2001 From: Rogier Mechielsen Date: Mon, 28 Oct 2024 11:36:24 +0100 Subject: [PATCH 3/5] fix: include theme.css --- proprietary/nora-design-tokens/src/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/proprietary/nora-design-tokens/src/index.scss b/proprietary/nora-design-tokens/src/index.scss index 59ac9e2b4..5dacb8bdd 100644 --- a/proprietary/nora-design-tokens/src/index.scss +++ b/proprietary/nora-design-tokens/src/index.scss @@ -4,4 +4,4 @@ * All rights reserved */ -@import "./design-tokens.css"; +@import "./theme.css"; From 0d11d15a2f23863721d84c07c3dd641b4259bfa9 Mon Sep 17 00:00:00 2001 From: Rogier Mechielsen Date: Mon, 28 Oct 2024 11:49:23 +0100 Subject: [PATCH 4/5] feat: generate large-vw css variables --- .../style-dictionary.config.mjs | 48 ++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/proprietary/nora-design-tokens/style-dictionary.config.mjs b/proprietary/nora-design-tokens/style-dictionary.config.mjs index 73236aae0..80e1c67b4 100644 --- a/proprietary/nora-design-tokens/style-dictionary.config.mjs +++ b/proprietary/nora-design-tokens/style-dictionary.config.mjs @@ -4,6 +4,10 @@ import { typeDtcgDelegate } from 'style-dictionary/utils'; import { readFile } from 'node:fs/promises'; import { createConfig } from '../../style-dictionary-config.js'; +const isLargeVwToken = (token) => { + return token.path && token.path.includes('large-vw'); +}; + const build = async () => { const themeConfig = JSON.parse(await readFile('./src/config.json', 'utf-8')); StyleDictionary.registerPreprocessor({ @@ -15,14 +19,56 @@ const build = async () => { excludeParentKeys: true, }); + const themeSelector = `.${themeConfig.prefix}-theme`; + const sd = new StyleDictionary({ ...createConfig({ - selector: `.${themeConfig.prefix}-theme`, + selector: themeSelector, }), preprocessors: ['tokens-studio', 'dtcg-delegate'], source: ['figma/**/*.tokens.json'], }); + sd.registerFilter({ + name: 'filter-large-vw', + filter: isLargeVwToken, + }); + + sd.registerTransform({ + name: 'name/remove-large-vw', + type: 'name', + filter: isLargeVwToken, + transform: (token) => { + return token.name.replace(/-large-vw/g, ''); + }, + }); + + sd.platforms.largeCss = { + transformGroup: 'tokens-studio', + transforms: ['name/kebab', 'name/remove-large-vw'], + buildPath: 'dist/', + files: [ + { + destination: 'theme-large-vw.css', + format: 'css/variables', + filter: 'filter-large-vw', + options: { + selector: themeSelector, + outputReferences: true, + }, + }, + { + destination: 'variables-large-vw.css', + format: 'css/variables', + filter: 'filter-large-vw', + options: { + selector: `:root`, + outputReferences: true, + }, + }, + ], + }; + await sd.cleanAllPlatforms(); await sd.buildAllPlatforms(); }; From fddd244ea48dbaf767c15bedc2350b9fb06ed6b4 Mon Sep 17 00:00:00 2001 From: Rogier Mechielsen Date: Mon, 28 Oct 2024 12:05:36 +0100 Subject: [PATCH 5/5] update changeset --- .changeset/update-nora-design-tokens.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/.changeset/update-nora-design-tokens.md b/.changeset/update-nora-design-tokens.md index c85876838..177d9f1a9 100644 --- a/.changeset/update-nora-design-tokens.md +++ b/.changeset/update-nora-design-tokens.md @@ -2,7 +2,9 @@ "@nl-design-system-community/nora-design-tokens": minor --- -set underline tokens to none -change utrecht-heading tokens -add nora-page-layout tokens -add nora-page-section tokens +feat: set underline tokens to none +feat: change utrecht-heading tokens +feat: add nora-page-layout tokens +feat: add nora-page-section tokens +feat: add large-vw tokens to separate files +fix: change link in index.scss