From 8800cade542c2c0ba70e90a47dd713c204590f72 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Wed, 24 Jul 2024 16:13:20 +0200 Subject: [PATCH 01/27] feat: add device tokens Added device token mappings, intended to be used in output files. --- packages/styles/package.json | 1 + .../styles/src/tokens/semantic/_device.scss | 19 ++++++++++++++ pnpm-lock.yaml | 25 ++++--------------- 3 files changed, 25 insertions(+), 20 deletions(-) create mode 100644 packages/styles/src/tokens/semantic/_device.scss diff --git a/packages/styles/package.json b/packages/styles/package.json index ac9b88df1a..2e376f0027 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -44,6 +44,7 @@ }, "dependencies": { "@popperjs/core": "2.11.8", + "@swisspost/design-system-tokens": "workspace:0.1.0", "bootstrap": "5.3.3" }, "devDependencies": { diff --git a/packages/styles/src/tokens/semantic/_device.scss b/packages/styles/src/tokens/semantic/_device.scss new file mode 100644 index 0000000000..f24cb51b01 --- /dev/null +++ b/packages/styles/src/tokens/semantic/_device.scss @@ -0,0 +1,19 @@ +@use '@swisspost/design-system-tokens/device' as device; + +:root { + @each $key, $value in device.$post-mobile { + --#{$key}: #{$value}; + } + + @media (min-width: 600px) { + @each $key, $value in device.$post-tablet { + --#{$key}: #{$value}; + } + } + + @media (min-width: 1024px) { + @each $key, $value in device.$post-desktop { + --#{$key}: #{$value}; + } + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ec4ee95a8e..0bc2bba69b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -787,7 +787,7 @@ importers: version: 2.0.4 ts-jest: specifier: 29.2.3 - version: 29.2.3(@babel/core@7.24.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.9))(jest@29.7.0(@types/node@20.14.12))(typescript@5.5.4) + version: 29.2.3(@babel/core@7.24.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.9))(jest@29.7.0(@types/node@20.14.12)(ts-node@10.9.2(@types/node@20.14.12)(typescript@5.5.4)))(typescript@5.5.4) typescript: specifier: 5.5.4 version: 5.5.4 @@ -1036,6 +1036,9 @@ importers: '@popperjs/core': specifier: 2.11.8 version: 2.11.8 + '@swisspost/design-system-tokens': + specifier: workspace:* + version: link:../tokens/dist bootstrap: specifier: 5.3.3 version: 5.3.3(@popperjs/core@2.11.8) @@ -19439,6 +19442,7 @@ snapshots: - babel-plugin-macros - supports-color - ts-node + optional: true jest@29.7.0(@types/node@20.14.12)(ts-node@10.9.2(@types/node@20.14.12)(typescript@5.5.4)): dependencies: @@ -23150,25 +23154,6 @@ snapshots: '@jest/types': 29.6.3 babel-jest: 29.7.0(@babel/core@7.24.9) - ts-jest@29.2.3(@babel/core@7.24.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.9))(jest@29.7.0(@types/node@20.14.12))(typescript@5.5.4): - dependencies: - bs-logger: 0.2.6 - ejs: 3.1.10 - fast-json-stable-stringify: 2.1.0 - jest: 29.7.0(@types/node@20.14.12) - jest-util: 29.7.0 - json5: 2.2.3 - lodash.memoize: 4.1.2 - make-error: 1.3.6 - semver: 7.6.2 - typescript: 5.5.4 - yargs-parser: 21.1.1 - optionalDependencies: - '@babel/core': 7.24.9 - '@jest/transform': 29.7.0 - '@jest/types': 29.6.3 - babel-jest: 29.7.0(@babel/core@7.24.9) - ts-node@10.9.2(@types/node@20.12.7)(typescript@5.5.4): dependencies: '@cspotcode/source-map-support': 0.8.1 From 1d4ac31f629837a56ca4cedb1fb2834a17b952e4 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Wed, 24 Jul 2024 16:34:40 +0200 Subject: [PATCH 02/27] feat: add color mode styles --- packages/styles/src/placeholders/_modes.scss | 13 +++++++++++++ .../styles/src/tokens/semantic/_device.scss | 19 ------------------- .../styles/src/tokens/semantic/_modes.scss | 10 ++++++++++ 3 files changed, 23 insertions(+), 19 deletions(-) create mode 100644 packages/styles/src/placeholders/_modes.scss delete mode 100644 packages/styles/src/tokens/semantic/_device.scss create mode 100644 packages/styles/src/tokens/semantic/_modes.scss diff --git a/packages/styles/src/placeholders/_modes.scss b/packages/styles/src/placeholders/_modes.scss new file mode 100644 index 0000000000..a5ff2593e7 --- /dev/null +++ b/packages/styles/src/placeholders/_modes.scss @@ -0,0 +1,13 @@ +@use '@swisspost/design-system-tokens/mode' as mode; + +%post-light { + @each $key, $value in mode.$post-light { + --#{$key}: #{$value}; + } +} + +%post-dark { + @each $key, $value in mode.$post-dark { + --#{$key}: #{$value}; + } +} diff --git a/packages/styles/src/tokens/semantic/_device.scss b/packages/styles/src/tokens/semantic/_device.scss deleted file mode 100644 index f24cb51b01..0000000000 --- a/packages/styles/src/tokens/semantic/_device.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use '@swisspost/design-system-tokens/device' as device; - -:root { - @each $key, $value in device.$post-mobile { - --#{$key}: #{$value}; - } - - @media (min-width: 600px) { - @each $key, $value in device.$post-tablet { - --#{$key}: #{$value}; - } - } - - @media (min-width: 1024px) { - @each $key, $value in device.$post-desktop { - --#{$key}: #{$value}; - } - } -} diff --git a/packages/styles/src/tokens/semantic/_modes.scss b/packages/styles/src/tokens/semantic/_modes.scss new file mode 100644 index 0000000000..ef91f4765e --- /dev/null +++ b/packages/styles/src/tokens/semantic/_modes.scss @@ -0,0 +1,10 @@ +@use '../../placeholders/modes'; + +:root, +[data-color-mode='light'] { + @extend %post-light; +} + +[data-color-mode='dark'] { + @extend %post-dark; +} From 8c98caac627864dfa81a6e7ad60899157e7c4f47 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Wed, 24 Jul 2024 16:59:59 +0200 Subject: [PATCH 03/27] feat: add the rest of the semantic layer --- packages/styles/src/mixins/_tokens.scss | 5 +++++ packages/styles/src/placeholders/_modes.scss | 9 +++------ packages/styles/src/post-external.scss | 6 ++++++ packages/styles/src/post-internal.scss | 6 ++++++ packages/styles/src/tokens/semantic/_device.scss | 14 ++++++++++++++ packages/styles/src/tokens/semantic/_external.scss | 6 ++++++ packages/styles/src/tokens/semantic/_internal.scss | 6 ++++++ .../styles/src/tokens/semantic/_post-theme.scss | 6 ++++++ 8 files changed, 52 insertions(+), 6 deletions(-) create mode 100644 packages/styles/src/mixins/_tokens.scss create mode 100644 packages/styles/src/post-external.scss create mode 100644 packages/styles/src/post-internal.scss create mode 100644 packages/styles/src/tokens/semantic/_device.scss create mode 100644 packages/styles/src/tokens/semantic/_external.scss create mode 100644 packages/styles/src/tokens/semantic/_internal.scss create mode 100644 packages/styles/src/tokens/semantic/_post-theme.scss diff --git a/packages/styles/src/mixins/_tokens.scss b/packages/styles/src/mixins/_tokens.scss new file mode 100644 index 0000000000..31a3cf8c69 --- /dev/null +++ b/packages/styles/src/mixins/_tokens.scss @@ -0,0 +1,5 @@ +@mixin from($list) { + @each $key, $value in $list { + --#{$key}: #{$value}; + } +} diff --git a/packages/styles/src/placeholders/_modes.scss b/packages/styles/src/placeholders/_modes.scss index a5ff2593e7..7295368277 100644 --- a/packages/styles/src/placeholders/_modes.scss +++ b/packages/styles/src/placeholders/_modes.scss @@ -1,13 +1,10 @@ @use '@swisspost/design-system-tokens/mode' as mode; +@use '../mixins/tokens'; %post-light { - @each $key, $value in mode.$post-light { - --#{$key}: #{$value}; - } + @include tokens.from(mode.$post-light); } %post-dark { - @each $key, $value in mode.$post-dark { - --#{$key}: #{$value}; - } + @include tokens.from(mode.$post-dark); } diff --git a/packages/styles/src/post-external.scss b/packages/styles/src/post-external.scss new file mode 100644 index 0000000000..6c670c2d63 --- /dev/null +++ b/packages/styles/src/post-external.scss @@ -0,0 +1,6 @@ +@use './tokens/semantic/modes'; +@use './tokens/semantic/device'; +@use './tokens/semantic/external'; +@use './tokens/semantic/post-theme'; + +@use './components'; diff --git a/packages/styles/src/post-internal.scss b/packages/styles/src/post-internal.scss new file mode 100644 index 0000000000..ccc031e8fa --- /dev/null +++ b/packages/styles/src/post-internal.scss @@ -0,0 +1,6 @@ +@use './tokens/semantic/modes'; +@use './tokens/semantic/device'; +@use './tokens/semantic/internal'; +@use './tokens/semantic/post-theme'; + +@use './components'; diff --git a/packages/styles/src/tokens/semantic/_device.scss b/packages/styles/src/tokens/semantic/_device.scss new file mode 100644 index 0000000000..32cd36d8db --- /dev/null +++ b/packages/styles/src/tokens/semantic/_device.scss @@ -0,0 +1,14 @@ +@use '@swisspost/design-system-tokens/device' as device; +@use '../../mixins/tokens'; + +:root { + @include tokens.from(device.$post-mobile); + + @media (min-width: 600px) { + @include tokens.from(device.$post-tablet); + } + + @media (min-width: 1024px) { + @include tokens.from(device.$post-desktop); + } +} diff --git a/packages/styles/src/tokens/semantic/_external.scss b/packages/styles/src/tokens/semantic/_external.scss new file mode 100644 index 0000000000..fd7664cded --- /dev/null +++ b/packages/styles/src/tokens/semantic/_external.scss @@ -0,0 +1,6 @@ +@use '@swisspost/design-system-tokens/channel' as channel; +@use '../../mixins/tokens'; + +:root { + @include tokens.from(channel.$post-edk); +} diff --git a/packages/styles/src/tokens/semantic/_internal.scss b/packages/styles/src/tokens/semantic/_internal.scss new file mode 100644 index 0000000000..3946e0de7f --- /dev/null +++ b/packages/styles/src/tokens/semantic/_internal.scss @@ -0,0 +1,6 @@ +@use '@swisspost/design-system-tokens/channel' as channel; +@use '../../mixins/tokens'; + +:root { + @include tokens.from(channel.$post-idk); +} diff --git a/packages/styles/src/tokens/semantic/_post-theme.scss b/packages/styles/src/tokens/semantic/_post-theme.scss new file mode 100644 index 0000000000..4f8ec722fb --- /dev/null +++ b/packages/styles/src/tokens/semantic/_post-theme.scss @@ -0,0 +1,6 @@ +@use '@swisspost/design-system-tokens/theme' as themes; +@use '../../mixins/tokens'; + +:root { + @include tokens.from(themes.$post-theme); +} From e84b51e0ac2f31c631f2712c05c0b7291d16d386 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Wed, 24 Jul 2024 18:16:23 +0200 Subject: [PATCH 04/27] feat: add semantic layer token machinery --- .../.storybook/styles/preview.scss | 2 +- packages/documentation/package.json | 12 +++---- packages/styles/package.json | 2 +- packages/styles/src/placeholders/_modes.scss | 2 +- packages/styles/src/post-external.scss | 2 +- packages/styles/src/post-internal.scss | 2 +- .../styles/src/tokens/semantic/_device.scss | 2 +- .../styles/src/tokens/semantic/_external.scss | 2 +- .../styles/src/tokens/semantic/_internal.scss | 2 +- .../styles/src/tokens/semantic/_modes.scss | 2 +- .../src/tokens/semantic/_post-theme.scss | 2 +- packages/tokens/package.json | 2 +- pnpm-lock.yaml | 34 ++++++++++++++----- 13 files changed, 43 insertions(+), 25 deletions(-) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 17ac5c0106..5a1f5cbe93 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -1,6 +1,6 @@ // importing the complete styles package scss // TODO: replace intranet.scss with index.scss as soon as the issues in the portal.scss are fixed -@use '@swisspost/design-system-styles/intranet.scss'; +@use '@swisspost/design-system-styles/post-external.scss'; @use '@swisspost/design-system-styles/core.scss' as post; @use '@swisspost/design-system-styles/mixins/utilities'; @use '@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.css'; diff --git a/packages/documentation/package.json b/packages/documentation/package.json index 549ca73209..d7d65ddcc4 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -28,10 +28,10 @@ "lint": "eslint **/*.{js,ts,tsx,mdx}" }, "dependencies": { - "@swisspost/design-system-components": "workspace:8.0.0", - "@swisspost/design-system-components-react": "workspace:8.0.0", - "@swisspost/design-system-icons": "workspace:8.0.0", - "@swisspost/design-system-styles": "workspace:8.0.0", + "@swisspost/design-system-components": "workspace:*", + "@swisspost/design-system-components-react": "workspace:*", + "@swisspost/design-system-icons": "workspace:*", + "@swisspost/design-system-styles": "workspace:*", "@swisspost/internet-header": "workspace:1.14.3", "bootstrap": "5.3.3" }, @@ -53,8 +53,8 @@ "@storybook/types": "8.2.5", "@storybook/web-components": "8.2.5", "@storybook/web-components-vite": "8.2.5", - "@swisspost/design-system-components-angular": "workspace:8.0.0", - "@swisspost/design-system-intranet-header": "workspace:8.0.0", + "@swisspost/design-system-components-angular": "workspace:*", + "@swisspost/design-system-intranet-header": "workspace:*", "@types/css-modules": "1.0.5", "@types/mdx": "2.0.13", "@types/react": "18.3.3", diff --git a/packages/styles/package.json b/packages/styles/package.json index 2e376f0027..7b06fa2996 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -44,7 +44,7 @@ }, "dependencies": { "@popperjs/core": "2.11.8", - "@swisspost/design-system-tokens": "workspace:0.1.0", + "@swisspost/design-system-tokens": "workspace:*", "bootstrap": "5.3.3" }, "devDependencies": { diff --git a/packages/styles/src/placeholders/_modes.scss b/packages/styles/src/placeholders/_modes.scss index 7295368277..01d3cb6be0 100644 --- a/packages/styles/src/placeholders/_modes.scss +++ b/packages/styles/src/placeholders/_modes.scss @@ -1,5 +1,5 @@ @use '@swisspost/design-system-tokens/mode' as mode; -@use '../mixins/tokens'; +@use './../mixins/tokens'; %post-light { @include tokens.from(mode.$post-light); diff --git a/packages/styles/src/post-external.scss b/packages/styles/src/post-external.scss index 6c670c2d63..005f73e0ae 100644 --- a/packages/styles/src/post-external.scss +++ b/packages/styles/src/post-external.scss @@ -3,4 +3,4 @@ @use './tokens/semantic/external'; @use './tokens/semantic/post-theme'; -@use './components'; +@use 'components'; diff --git a/packages/styles/src/post-internal.scss b/packages/styles/src/post-internal.scss index ccc031e8fa..aac9a0ac11 100644 --- a/packages/styles/src/post-internal.scss +++ b/packages/styles/src/post-internal.scss @@ -3,4 +3,4 @@ @use './tokens/semantic/internal'; @use './tokens/semantic/post-theme'; -@use './components'; +@use 'components'; diff --git a/packages/styles/src/tokens/semantic/_device.scss b/packages/styles/src/tokens/semantic/_device.scss index 32cd36d8db..c5e5485150 100644 --- a/packages/styles/src/tokens/semantic/_device.scss +++ b/packages/styles/src/tokens/semantic/_device.scss @@ -1,5 +1,5 @@ @use '@swisspost/design-system-tokens/device' as device; -@use '../../mixins/tokens'; +@use './../../mixins/tokens'; :root { @include tokens.from(device.$post-mobile); diff --git a/packages/styles/src/tokens/semantic/_external.scss b/packages/styles/src/tokens/semantic/_external.scss index fd7664cded..8ab03b4a6f 100644 --- a/packages/styles/src/tokens/semantic/_external.scss +++ b/packages/styles/src/tokens/semantic/_external.scss @@ -1,5 +1,5 @@ @use '@swisspost/design-system-tokens/channel' as channel; -@use '../../mixins/tokens'; +@use './../../mixins/tokens'; :root { @include tokens.from(channel.$post-edk); diff --git a/packages/styles/src/tokens/semantic/_internal.scss b/packages/styles/src/tokens/semantic/_internal.scss index 3946e0de7f..8442a64853 100644 --- a/packages/styles/src/tokens/semantic/_internal.scss +++ b/packages/styles/src/tokens/semantic/_internal.scss @@ -1,5 +1,5 @@ @use '@swisspost/design-system-tokens/channel' as channel; -@use '../../mixins/tokens'; +@use './../../mixins/tokens'; :root { @include tokens.from(channel.$post-idk); diff --git a/packages/styles/src/tokens/semantic/_modes.scss b/packages/styles/src/tokens/semantic/_modes.scss index ef91f4765e..f9189dd726 100644 --- a/packages/styles/src/tokens/semantic/_modes.scss +++ b/packages/styles/src/tokens/semantic/_modes.scss @@ -1,4 +1,4 @@ -@use '../../placeholders/modes'; +@use './../../placeholders/modes'; :root, [data-color-mode='light'] { diff --git a/packages/styles/src/tokens/semantic/_post-theme.scss b/packages/styles/src/tokens/semantic/_post-theme.scss index 4f8ec722fb..b0c3c12aca 100644 --- a/packages/styles/src/tokens/semantic/_post-theme.scss +++ b/packages/styles/src/tokens/semantic/_post-theme.scss @@ -1,5 +1,5 @@ @use '@swisspost/design-system-tokens/theme' as themes; -@use '../../mixins/tokens'; +@use './../../mixins/tokens'; :root { @include tokens.from(themes.$post-theme); diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 19f7ca005c..5d553eb579 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -27,7 +27,7 @@ ], "publishConfig": { "directory": "./dist", - "access": "restricted", + "access": "public", "linkDirectory": true }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0bc2bba69b..2296452ab4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -469,16 +469,16 @@ importers: packages/documentation: dependencies: '@swisspost/design-system-components': - specifier: workspace:8.0.0 + specifier: workspace:* version: link:../components '@swisspost/design-system-components-react': - specifier: workspace:8.0.0 + specifier: workspace:* version: link:../components-react '@swisspost/design-system-icons': - specifier: workspace:8.0.0 + specifier: workspace:* version: link:../icons '@swisspost/design-system-styles': - specifier: workspace:8.0.0 + specifier: workspace:* version: link:../styles/dist '@swisspost/internet-header': specifier: workspace:1.14.3 @@ -539,10 +539,10 @@ importers: specifier: 8.2.5 version: 8.2.5(lit@3.1.4)(storybook@8.2.5(@babel/preset-env@7.24.7(@babel/core@7.24.9)))(typescript@5.5.4)(vite@5.3.2(@types/node@20.14.12)(less@4.2.0)(sass@1.77.8)(terser@5.29.2)) '@swisspost/design-system-components-angular': - specifier: workspace:8.0.0 + specifier: workspace:* version: link:../components-angular/dist/components '@swisspost/design-system-intranet-header': - specifier: workspace:8.0.0 + specifier: workspace:* version: link:../intranet-header-workspace/dist/intranet-header '@types/css-modules': specifier: 1.0.5 @@ -787,7 +787,7 @@ importers: version: 2.0.4 ts-jest: specifier: 29.2.3 - version: 29.2.3(@babel/core@7.24.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.9))(jest@29.7.0(@types/node@20.14.12)(ts-node@10.9.2(@types/node@20.14.12)(typescript@5.5.4)))(typescript@5.5.4) + version: 29.2.3(@babel/core@7.24.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.9))(jest@29.7.0(@types/node@20.14.12))(typescript@5.5.4) typescript: specifier: 5.5.4 version: 5.5.4 @@ -19442,7 +19442,6 @@ snapshots: - babel-plugin-macros - supports-color - ts-node - optional: true jest@29.7.0(@types/node@20.14.12)(ts-node@10.9.2(@types/node@20.14.12)(typescript@5.5.4)): dependencies: @@ -23154,6 +23153,25 @@ snapshots: '@jest/types': 29.6.3 babel-jest: 29.7.0(@babel/core@7.24.9) + ts-jest@29.2.3(@babel/core@7.24.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.9))(jest@29.7.0(@types/node@20.14.12))(typescript@5.5.4): + dependencies: + bs-logger: 0.2.6 + ejs: 3.1.10 + fast-json-stable-stringify: 2.1.0 + jest: 29.7.0(@types/node@20.14.12) + jest-util: 29.7.0 + json5: 2.2.3 + lodash.memoize: 4.1.2 + make-error: 1.3.6 + semver: 7.6.2 + typescript: 5.5.4 + yargs-parser: 21.1.1 + optionalDependencies: + '@babel/core': 7.24.9 + '@jest/transform': 29.7.0 + '@jest/types': 29.6.3 + babel-jest: 29.7.0(@babel/core@7.24.9) + ts-node@10.9.2(@types/node@20.12.7)(typescript@5.5.4): dependencies: '@cspotcode/source-map-support': 0.8.1 From 4798c4a179484d512ac0e3bb2ff1fbf26f938545 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Wed, 24 Jul 2024 21:18:51 +0200 Subject: [PATCH 05/27] Revert "feat: add semantic layer token machinery" This reverts commit e84b51e0ac2f31c631f2712c05c0b7291d16d386. --- .../documentation/.storybook/styles/preview.scss | 2 +- packages/documentation/package.json | 12 ++++++------ packages/styles/src/post-external.scss | 2 +- packages/styles/src/post-internal.scss | 2 +- packages/tokens/package.json | 2 +- pnpm-lock.yaml | 12 ++++++------ 6 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 5a1f5cbe93..17ac5c0106 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -1,6 +1,6 @@ // importing the complete styles package scss // TODO: replace intranet.scss with index.scss as soon as the issues in the portal.scss are fixed -@use '@swisspost/design-system-styles/post-external.scss'; +@use '@swisspost/design-system-styles/intranet.scss'; @use '@swisspost/design-system-styles/core.scss' as post; @use '@swisspost/design-system-styles/mixins/utilities'; @use '@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.css'; diff --git a/packages/documentation/package.json b/packages/documentation/package.json index d7d65ddcc4..549ca73209 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -28,10 +28,10 @@ "lint": "eslint **/*.{js,ts,tsx,mdx}" }, "dependencies": { - "@swisspost/design-system-components": "workspace:*", - "@swisspost/design-system-components-react": "workspace:*", - "@swisspost/design-system-icons": "workspace:*", - "@swisspost/design-system-styles": "workspace:*", + "@swisspost/design-system-components": "workspace:8.0.0", + "@swisspost/design-system-components-react": "workspace:8.0.0", + "@swisspost/design-system-icons": "workspace:8.0.0", + "@swisspost/design-system-styles": "workspace:8.0.0", "@swisspost/internet-header": "workspace:1.14.3", "bootstrap": "5.3.3" }, @@ -53,8 +53,8 @@ "@storybook/types": "8.2.5", "@storybook/web-components": "8.2.5", "@storybook/web-components-vite": "8.2.5", - "@swisspost/design-system-components-angular": "workspace:*", - "@swisspost/design-system-intranet-header": "workspace:*", + "@swisspost/design-system-components-angular": "workspace:8.0.0", + "@swisspost/design-system-intranet-header": "workspace:8.0.0", "@types/css-modules": "1.0.5", "@types/mdx": "2.0.13", "@types/react": "18.3.3", diff --git a/packages/styles/src/post-external.scss b/packages/styles/src/post-external.scss index 005f73e0ae..6c670c2d63 100644 --- a/packages/styles/src/post-external.scss +++ b/packages/styles/src/post-external.scss @@ -3,4 +3,4 @@ @use './tokens/semantic/external'; @use './tokens/semantic/post-theme'; -@use 'components'; +@use './components'; diff --git a/packages/styles/src/post-internal.scss b/packages/styles/src/post-internal.scss index aac9a0ac11..ccc031e8fa 100644 --- a/packages/styles/src/post-internal.scss +++ b/packages/styles/src/post-internal.scss @@ -3,4 +3,4 @@ @use './tokens/semantic/internal'; @use './tokens/semantic/post-theme'; -@use 'components'; +@use './components'; diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 5d553eb579..19f7ca005c 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -27,7 +27,7 @@ ], "publishConfig": { "directory": "./dist", - "access": "public", + "access": "restricted", "linkDirectory": true }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2296452ab4..264b92bfb6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -469,16 +469,16 @@ importers: packages/documentation: dependencies: '@swisspost/design-system-components': - specifier: workspace:* + specifier: workspace:8.0.0 version: link:../components '@swisspost/design-system-components-react': - specifier: workspace:* + specifier: workspace:8.0.0 version: link:../components-react '@swisspost/design-system-icons': - specifier: workspace:* + specifier: workspace:8.0.0 version: link:../icons '@swisspost/design-system-styles': - specifier: workspace:* + specifier: workspace:8.0.0 version: link:../styles/dist '@swisspost/internet-header': specifier: workspace:1.14.3 @@ -539,10 +539,10 @@ importers: specifier: 8.2.5 version: 8.2.5(lit@3.1.4)(storybook@8.2.5(@babel/preset-env@7.24.7(@babel/core@7.24.9)))(typescript@5.5.4)(vite@5.3.2(@types/node@20.14.12)(less@4.2.0)(sass@1.77.8)(terser@5.29.2)) '@swisspost/design-system-components-angular': - specifier: workspace:* + specifier: workspace:8.0.0 version: link:../components-angular/dist/components '@swisspost/design-system-intranet-header': - specifier: workspace:* + specifier: workspace:8.0.0 version: link:../intranet-header-workspace/dist/intranet-header '@types/css-modules': specifier: 1.0.5 From 310e044a597671e17a127262ea2156f23171c4cd Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Wed, 24 Jul 2024 23:09:27 +0200 Subject: [PATCH 06/27] feat: add token only output targets --- packages/styles/src/post-external.scss | 6 +----- packages/styles/src/post-internal.scss | 6 +----- packages/styles/src/post-tokens-external.scss | 4 ++++ packages/styles/src/post-tokens-internal.scss | 4 ++++ 4 files changed, 10 insertions(+), 10 deletions(-) create mode 100644 packages/styles/src/post-tokens-external.scss create mode 100644 packages/styles/src/post-tokens-internal.scss diff --git a/packages/styles/src/post-external.scss b/packages/styles/src/post-external.scss index 6c670c2d63..f989a86310 100644 --- a/packages/styles/src/post-external.scss +++ b/packages/styles/src/post-external.scss @@ -1,6 +1,2 @@ -@use './tokens/semantic/modes'; -@use './tokens/semantic/device'; -@use './tokens/semantic/external'; -@use './tokens/semantic/post-theme'; - +@use './post-tokens-external'; @use './components'; diff --git a/packages/styles/src/post-internal.scss b/packages/styles/src/post-internal.scss index ccc031e8fa..e00158f349 100644 --- a/packages/styles/src/post-internal.scss +++ b/packages/styles/src/post-internal.scss @@ -1,6 +1,2 @@ -@use './tokens/semantic/modes'; -@use './tokens/semantic/device'; -@use './tokens/semantic/internal'; -@use './tokens/semantic/post-theme'; - +@use './post-tokens-internal'; @use './components'; diff --git a/packages/styles/src/post-tokens-external.scss b/packages/styles/src/post-tokens-external.scss new file mode 100644 index 0000000000..a36e7317fc --- /dev/null +++ b/packages/styles/src/post-tokens-external.scss @@ -0,0 +1,4 @@ +@use './tokens/semantic/modes'; +@use './tokens/semantic/device'; +@use './tokens/semantic/external'; +@use './tokens/semantic/post-theme'; diff --git a/packages/styles/src/post-tokens-internal.scss b/packages/styles/src/post-tokens-internal.scss new file mode 100644 index 0000000000..07fe5e6e51 --- /dev/null +++ b/packages/styles/src/post-tokens-internal.scss @@ -0,0 +1,4 @@ +@use './tokens/semantic/modes'; +@use './tokens/semantic/device'; +@use './tokens/semantic/internal'; +@use './tokens/semantic/post-theme'; From 305ff06e23b940866f7f171f8441d3dcbde149d4 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Wed, 24 Jul 2024 23:36:09 +0200 Subject: [PATCH 07/27] feat: add missing core tokens --- packages/styles/src/tokens/semantic/_core.scss | 1 + packages/styles/src/tokens/semantic/_device.scss | 6 +++++- packages/styles/src/tokens/semantic/_external.scss | 2 ++ packages/styles/src/tokens/semantic/_internal.scss | 2 ++ packages/styles/src/tokens/semantic/_modes.scss | 1 + packages/styles/src/tokens/semantic/_post-theme.scss | 2 ++ 6 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 packages/styles/src/tokens/semantic/_core.scss diff --git a/packages/styles/src/tokens/semantic/_core.scss b/packages/styles/src/tokens/semantic/_core.scss new file mode 100644 index 0000000000..cb60b40e0a --- /dev/null +++ b/packages/styles/src/tokens/semantic/_core.scss @@ -0,0 +1 @@ +@use '@swisspost/design-system-tokens/core'; diff --git a/packages/styles/src/tokens/semantic/_device.scss b/packages/styles/src/tokens/semantic/_device.scss index c5e5485150..3cb1025cca 100644 --- a/packages/styles/src/tokens/semantic/_device.scss +++ b/packages/styles/src/tokens/semantic/_device.scss @@ -1,8 +1,12 @@ @use '@swisspost/design-system-tokens/device' as device; + +@use './core'; @use './../../mixins/tokens'; :root { - @include tokens.from(device.$post-mobile); + @media (max-width: 599.9px) { + @include tokens.from(device.$post-mobile); + } @media (min-width: 600px) { @include tokens.from(device.$post-tablet); diff --git a/packages/styles/src/tokens/semantic/_external.scss b/packages/styles/src/tokens/semantic/_external.scss index 8ab03b4a6f..f7cc6cc391 100644 --- a/packages/styles/src/tokens/semantic/_external.scss +++ b/packages/styles/src/tokens/semantic/_external.scss @@ -1,4 +1,6 @@ @use '@swisspost/design-system-tokens/channel' as channel; + +@use './core'; @use './../../mixins/tokens'; :root { diff --git a/packages/styles/src/tokens/semantic/_internal.scss b/packages/styles/src/tokens/semantic/_internal.scss index 8442a64853..fd73e8df59 100644 --- a/packages/styles/src/tokens/semantic/_internal.scss +++ b/packages/styles/src/tokens/semantic/_internal.scss @@ -1,4 +1,6 @@ @use '@swisspost/design-system-tokens/channel' as channel; + +@use './core'; @use './../../mixins/tokens'; :root { diff --git a/packages/styles/src/tokens/semantic/_modes.scss b/packages/styles/src/tokens/semantic/_modes.scss index f9189dd726..780d03e898 100644 --- a/packages/styles/src/tokens/semantic/_modes.scss +++ b/packages/styles/src/tokens/semantic/_modes.scss @@ -1,3 +1,4 @@ +@use './core'; @use './../../placeholders/modes'; :root, diff --git a/packages/styles/src/tokens/semantic/_post-theme.scss b/packages/styles/src/tokens/semantic/_post-theme.scss index b0c3c12aca..2f66a08730 100644 --- a/packages/styles/src/tokens/semantic/_post-theme.scss +++ b/packages/styles/src/tokens/semantic/_post-theme.scss @@ -1,4 +1,6 @@ @use '@swisspost/design-system-tokens/theme' as themes; + +@use './core'; @use './../../mixins/tokens'; :root { From 684693c562032b35fb8f68c387ff8246bcd27f1b Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Wed, 24 Jul 2024 23:40:07 +0200 Subject: [PATCH 08/27] chore: add changeset --- .changeset/large-weeks-tap.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 .changeset/large-weeks-tap.md diff --git a/.changeset/large-weeks-tap.md b/.changeset/large-weeks-tap.md new file mode 100644 index 0000000000..8f053dbfd8 --- /dev/null +++ b/.changeset/large-weeks-tap.md @@ -0,0 +1,10 @@ +--- +'@swisspost/design-system-styles': minor +--- + +Added four new entry files that enable working with Design Tokens. + +- post-external.(s)css: For portal and other external pages +- post-internal.(s)css: For applications and other internal pages +- post-tokens-external.(s)css: External tokens only +- post-tokens-internal.(s)css: Internal tokens only From 21b2718bfa0eed49e4f6a511bce548b0cfc189d3 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Wed, 24 Jul 2024 23:48:16 +0200 Subject: [PATCH 09/27] fix: use more specific media queries --- packages/styles/src/mixins/_media.scss | 17 +++++++++++++++++ .../styles/src/tokens/semantic/_device.scss | 7 ++++--- 2 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 packages/styles/src/mixins/_media.scss diff --git a/packages/styles/src/mixins/_media.scss b/packages/styles/src/mixins/_media.scss new file mode 100644 index 0000000000..0a67821ffc --- /dev/null +++ b/packages/styles/src/mixins/_media.scss @@ -0,0 +1,17 @@ +@mixin min($device-size) { + @media screen and (min-width: $device-size) { + @content; + } +} + +@mixin max($device-size) { + @media screen and (max-width: ($device-size - 0.1)) { + @content; + } +} + +@mixin between($min-size, $max-size) { + @media screen and (min-width: $min-size) and (max-width: ($max-size - 0.1)) { + @content; + } +} diff --git a/packages/styles/src/tokens/semantic/_device.scss b/packages/styles/src/tokens/semantic/_device.scss index 3cb1025cca..242d1dcc2d 100644 --- a/packages/styles/src/tokens/semantic/_device.scss +++ b/packages/styles/src/tokens/semantic/_device.scss @@ -2,17 +2,18 @@ @use './core'; @use './../../mixins/tokens'; +@use './../../mixins/media'; :root { - @media (max-width: 599.9px) { + @include media.max(600px) { @include tokens.from(device.$post-mobile); } - @media (min-width: 600px) { + @include media.between(600px, 1024px) { @include tokens.from(device.$post-tablet); } - @media (min-width: 1024px) { + @include media.min(1024px) { @include tokens.from(device.$post-desktop); } } From f2621eb8becf44cc935793a7d79537b770fb9ee6 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Wed, 24 Jul 2024 23:54:13 +0200 Subject: [PATCH 10/27] hoist token definitions --- packages/styles/src/post-tokens-external.scss | 8 ++++---- packages/styles/src/post-tokens-internal.scss | 8 ++++---- packages/styles/src/tokens/{semantic => }/_core.scss | 0 packages/styles/src/tokens/{semantic => }/_device.scss | 4 ++-- packages/styles/src/tokens/{semantic => }/_external.scss | 2 +- packages/styles/src/tokens/{semantic => }/_internal.scss | 2 +- packages/styles/src/tokens/{semantic => }/_modes.scss | 2 +- .../styles/src/tokens/{semantic => }/_post-theme.scss | 2 +- 8 files changed, 14 insertions(+), 14 deletions(-) rename packages/styles/src/tokens/{semantic => }/_core.scss (100%) rename packages/styles/src/tokens/{semantic => }/_device.scss (85%) rename packages/styles/src/tokens/{semantic => }/_external.scss (81%) rename packages/styles/src/tokens/{semantic => }/_internal.scss (81%) rename packages/styles/src/tokens/{semantic => }/_modes.scss (78%) rename packages/styles/src/tokens/{semantic => }/_post-theme.scss (80%) diff --git a/packages/styles/src/post-tokens-external.scss b/packages/styles/src/post-tokens-external.scss index a36e7317fc..83413253b6 100644 --- a/packages/styles/src/post-tokens-external.scss +++ b/packages/styles/src/post-tokens-external.scss @@ -1,4 +1,4 @@ -@use './tokens/semantic/modes'; -@use './tokens/semantic/device'; -@use './tokens/semantic/external'; -@use './tokens/semantic/post-theme'; +@use './tokens/modes'; +@use './tokens/device'; +@use './tokens/external'; +@use './tokens/post-theme'; diff --git a/packages/styles/src/post-tokens-internal.scss b/packages/styles/src/post-tokens-internal.scss index 07fe5e6e51..f025362bc0 100644 --- a/packages/styles/src/post-tokens-internal.scss +++ b/packages/styles/src/post-tokens-internal.scss @@ -1,4 +1,4 @@ -@use './tokens/semantic/modes'; -@use './tokens/semantic/device'; -@use './tokens/semantic/internal'; -@use './tokens/semantic/post-theme'; +@use './tokens/modes'; +@use './tokens/device'; +@use './tokens/internal'; +@use './tokens/post-theme'; diff --git a/packages/styles/src/tokens/semantic/_core.scss b/packages/styles/src/tokens/_core.scss similarity index 100% rename from packages/styles/src/tokens/semantic/_core.scss rename to packages/styles/src/tokens/_core.scss diff --git a/packages/styles/src/tokens/semantic/_device.scss b/packages/styles/src/tokens/_device.scss similarity index 85% rename from packages/styles/src/tokens/semantic/_device.scss rename to packages/styles/src/tokens/_device.scss index 242d1dcc2d..aea2ae6e84 100644 --- a/packages/styles/src/tokens/semantic/_device.scss +++ b/packages/styles/src/tokens/_device.scss @@ -1,8 +1,8 @@ @use '@swisspost/design-system-tokens/device' as device; @use './core'; -@use './../../mixins/tokens'; -@use './../../mixins/media'; +@use './../mixins/tokens'; +@use './../mixins/media'; :root { @include media.max(600px) { diff --git a/packages/styles/src/tokens/semantic/_external.scss b/packages/styles/src/tokens/_external.scss similarity index 81% rename from packages/styles/src/tokens/semantic/_external.scss rename to packages/styles/src/tokens/_external.scss index f7cc6cc391..8e115183f2 100644 --- a/packages/styles/src/tokens/semantic/_external.scss +++ b/packages/styles/src/tokens/_external.scss @@ -1,7 +1,7 @@ @use '@swisspost/design-system-tokens/channel' as channel; @use './core'; -@use './../../mixins/tokens'; +@use './../mixins/tokens'; :root { @include tokens.from(channel.$post-edk); diff --git a/packages/styles/src/tokens/semantic/_internal.scss b/packages/styles/src/tokens/_internal.scss similarity index 81% rename from packages/styles/src/tokens/semantic/_internal.scss rename to packages/styles/src/tokens/_internal.scss index fd73e8df59..339f45c5d9 100644 --- a/packages/styles/src/tokens/semantic/_internal.scss +++ b/packages/styles/src/tokens/_internal.scss @@ -1,7 +1,7 @@ @use '@swisspost/design-system-tokens/channel' as channel; @use './core'; -@use './../../mixins/tokens'; +@use './../mixins/tokens'; :root { @include tokens.from(channel.$post-idk); diff --git a/packages/styles/src/tokens/semantic/_modes.scss b/packages/styles/src/tokens/_modes.scss similarity index 78% rename from packages/styles/src/tokens/semantic/_modes.scss rename to packages/styles/src/tokens/_modes.scss index 780d03e898..ac6d53b1df 100644 --- a/packages/styles/src/tokens/semantic/_modes.scss +++ b/packages/styles/src/tokens/_modes.scss @@ -1,5 +1,5 @@ @use './core'; -@use './../../placeholders/modes'; +@use './../placeholders/modes'; :root, [data-color-mode='light'] { diff --git a/packages/styles/src/tokens/semantic/_post-theme.scss b/packages/styles/src/tokens/_post-theme.scss similarity index 80% rename from packages/styles/src/tokens/semantic/_post-theme.scss rename to packages/styles/src/tokens/_post-theme.scss index 2f66a08730..ab35d5a20b 100644 --- a/packages/styles/src/tokens/semantic/_post-theme.scss +++ b/packages/styles/src/tokens/_post-theme.scss @@ -1,7 +1,7 @@ @use '@swisspost/design-system-tokens/theme' as themes; @use './core'; -@use './../../mixins/tokens'; +@use './../mixins/tokens'; :root { @include tokens.from(themes.$post-theme); From ef0b1c189248412ab256b3ade4ec3e4dbe17d867 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Thu, 25 Jul 2024 17:42:58 +0200 Subject: [PATCH 11/27] add temporary copy workaround --- packages/styles/.gitignore | 3 +++ packages/styles/gulpfile.js | 15 +++++++++++---- packages/styles/package.json | 2 +- packages/styles/src/placeholders/_modes.scss | 2 +- packages/styles/src/tokens/_core.scss | 2 +- packages/styles/src/tokens/_device.scss | 2 +- packages/styles/src/tokens/_external.scss | 2 +- packages/styles/src/tokens/_internal.scss | 2 +- packages/styles/src/tokens/_post-theme.scss | 2 +- pnpm-lock.yaml | 6 +++--- 10 files changed, 24 insertions(+), 14 deletions(-) diff --git a/packages/styles/.gitignore b/packages/styles/.gitignore index cde4a4d891..f6ed3a2011 100644 --- a/packages/styles/.gitignore +++ b/packages/styles/.gitignore @@ -13,3 +13,6 @@ storybook-static # Mac OSX Finder files. **/.DS_Store .DS_Store + +# Temporary files +src/tokens/temp/ diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js index 6151f05e7c..631e7c210a 100644 --- a/packages/styles/gulpfile.js +++ b/packages/styles/gulpfile.js @@ -20,6 +20,10 @@ gulp.task('copy', () => { .pipe(gulp.dest(options.outputDir)); }); +gulp.task('temprarily-copy-token-files', () => { + return gulp.src(['../tokens/dist/*.scss']).pipe(gulp.dest('./src/tokens/temp')); +}); + /** * Autoprefix SCSS files */ @@ -168,9 +172,12 @@ gulp.task('sass:tests', () => { /** * Watch task for scss development */ -gulp.task('watch', () => { - return gulp.watch('./src/**/*.scss', gulp.series('copy')); -}); +gulp.task( + 'watch', + gulp.series('temprarily-copy-token-files', () => { + return gulp.watch('./src/**/*.scss', 'copy'); + }), +); /** * Run copy and sass task in parallel per default @@ -179,7 +186,7 @@ exports.default = gulp.task( 'build', gulp.parallel( gulp.series('map-icons', 'copy', 'autoprefixer', 'transform-package-json'), - gulp.series('sass'), + gulp.series('temprarily-copy-token-files', 'sass'), gulp.series('build-components'), ), ); diff --git a/packages/styles/package.json b/packages/styles/package.json index 7b06fa2996..e50d81fe4a 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -44,10 +44,10 @@ }, "dependencies": { "@popperjs/core": "2.11.8", - "@swisspost/design-system-tokens": "workspace:*", "bootstrap": "5.3.3" }, "devDependencies": { + "@swisspost/design-system-tokens": "workspace:*", "@swisspost/design-system-icons": "workspace:8.0.0", "@types/node": "20.14.12", "autoprefixer": "10.4.19", diff --git a/packages/styles/src/placeholders/_modes.scss b/packages/styles/src/placeholders/_modes.scss index 01d3cb6be0..4dcdbf2145 100644 --- a/packages/styles/src/placeholders/_modes.scss +++ b/packages/styles/src/placeholders/_modes.scss @@ -1,4 +1,4 @@ -@use '@swisspost/design-system-tokens/mode' as mode; +@use '../tokens/temp/mode' as mode; @use './../mixins/tokens'; %post-light { diff --git a/packages/styles/src/tokens/_core.scss b/packages/styles/src/tokens/_core.scss index cb60b40e0a..d983e599e1 100644 --- a/packages/styles/src/tokens/_core.scss +++ b/packages/styles/src/tokens/_core.scss @@ -1 +1 @@ -@use '@swisspost/design-system-tokens/core'; +@use './temp/core'; diff --git a/packages/styles/src/tokens/_device.scss b/packages/styles/src/tokens/_device.scss index aea2ae6e84..8a21eecbc8 100644 --- a/packages/styles/src/tokens/_device.scss +++ b/packages/styles/src/tokens/_device.scss @@ -1,4 +1,4 @@ -@use '@swisspost/design-system-tokens/device' as device; +@use './temp/device' as device; @use './core'; @use './../mixins/tokens'; diff --git a/packages/styles/src/tokens/_external.scss b/packages/styles/src/tokens/_external.scss index 8e115183f2..d625768535 100644 --- a/packages/styles/src/tokens/_external.scss +++ b/packages/styles/src/tokens/_external.scss @@ -1,4 +1,4 @@ -@use '@swisspost/design-system-tokens/channel' as channel; +@use './temp/channel' as channel; @use './core'; @use './../mixins/tokens'; diff --git a/packages/styles/src/tokens/_internal.scss b/packages/styles/src/tokens/_internal.scss index 339f45c5d9..415249cb2a 100644 --- a/packages/styles/src/tokens/_internal.scss +++ b/packages/styles/src/tokens/_internal.scss @@ -1,4 +1,4 @@ -@use '@swisspost/design-system-tokens/channel' as channel; +@use './temp/channel' as channel; @use './core'; @use './../mixins/tokens'; diff --git a/packages/styles/src/tokens/_post-theme.scss b/packages/styles/src/tokens/_post-theme.scss index ab35d5a20b..ee7ab8a77d 100644 --- a/packages/styles/src/tokens/_post-theme.scss +++ b/packages/styles/src/tokens/_post-theme.scss @@ -1,4 +1,4 @@ -@use '@swisspost/design-system-tokens/theme' as themes; +@use './temp/theme' as themes; @use './core'; @use './../mixins/tokens'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 264b92bfb6..e75eb7f2a8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1036,9 +1036,6 @@ importers: '@popperjs/core': specifier: 2.11.8 version: 2.11.8 - '@swisspost/design-system-tokens': - specifier: workspace:* - version: link:../tokens/dist bootstrap: specifier: 5.3.3 version: 5.3.3(@popperjs/core@2.11.8) @@ -1046,6 +1043,9 @@ importers: '@swisspost/design-system-icons': specifier: workspace:8.0.0 version: link:../icons + '@swisspost/design-system-tokens': + specifier: workspace:* + version: link:../tokens/dist '@types/node': specifier: 20.14.12 version: 20.14.12 From bb199610fb4237a60f4aa09cc85f781bbac71c92 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Thu, 25 Jul 2024 17:43:15 +0200 Subject: [PATCH 12/27] import tokens into docs --- packages/documentation/.storybook/styles/preview.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 17ac5c0106..5a1f5cbe93 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -1,6 +1,6 @@ // importing the complete styles package scss // TODO: replace intranet.scss with index.scss as soon as the issues in the portal.scss are fixed -@use '@swisspost/design-system-styles/intranet.scss'; +@use '@swisspost/design-system-styles/post-external.scss'; @use '@swisspost/design-system-styles/core.scss' as post; @use '@swisspost/design-system-styles/mixins/utilities'; @use '@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.css'; From cbafb2ee24461c959c53cc381463e4964b39f49c Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Thu, 25 Jul 2024 22:48:41 +0200 Subject: [PATCH 13/27] set button primary fore- and background with tokens --- packages/styles/gulpfile.js | 11 +++++------ packages/styles/src/components/button.scss | 7 +++++-- packages/styles/src/mixins/_tokens.scss | 7 +++++++ 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js index 631e7c210a..542c462e57 100644 --- a/packages/styles/gulpfile.js +++ b/packages/styles/gulpfile.js @@ -169,15 +169,14 @@ gulp.task('sass:tests', () => { ); }); +gulp.task('watchfiles', () => { + return gulp.watch('./src/**/*.scss', gulp.series('copy')); +}); + /** * Watch task for scss development */ -gulp.task( - 'watch', - gulp.series('temprarily-copy-token-files', () => { - return gulp.watch('./src/**/*.scss', 'copy'); - }), -); +gulp.task('watch', gulp.series('temprarily-copy-token-files', 'watchfiles')); /** * Run copy and sass task in parallel per default diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss index 425a25309a..4af48cfb11 100644 --- a/packages/styles/src/components/button.scss +++ b/packages/styles/src/components/button.scss @@ -3,6 +3,9 @@ @use 'sass:map'; @use 'sass:math'; +@use './../tokens/temp/components'; +@use './../mixins/tokens'; + @use './../variables/components/button'; @use './../variables/color'; @use './../variables/commons'; @@ -98,8 +101,8 @@ // Primary .btn-primary { border-color: transparent; - background-color: var(--post-gray-80); - color: var(--post-contrast-color-inverted); + background-color: tokens.component('post-comp-interactive-button-primary-color-bg-enabled'); + color: tokens.component('post-comp-interactive-button-primary-color-fg-enabled'); &:disabled { background-color: color.$gray-10; diff --git a/packages/styles/src/mixins/_tokens.scss b/packages/styles/src/mixins/_tokens.scss index 31a3cf8c69..8624580cb0 100644 --- a/packages/styles/src/mixins/_tokens.scss +++ b/packages/styles/src/mixins/_tokens.scss @@ -1,5 +1,12 @@ +@use './../tokens/temp/components'; +@use 'sass:map'; + @mixin from($list) { @each $key, $value in $list { --#{$key}: #{$value}; } } + +@function component($name) { + @return #{map.get(components.$post-interactives, $name)}; +} From 1d7ba3af35dee3108466a7a6b9bf123639801525 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Fri, 26 Jul 2024 09:09:08 +0200 Subject: [PATCH 14/27] implement light-dark (with a workaround) --- packages/styles/src/components/button.scss | 8 ++++++++ packages/styles/src/tokens/_modes.scss | 9 +++++++++ 2 files changed, 17 insertions(+) diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss index 4af48cfb11..b62e06638a 100644 --- a/packages/styles/src/components/button.scss +++ b/packages/styles/src/components/button.scss @@ -2,8 +2,10 @@ @use 'sass:map'; @use 'sass:math'; +@use 'sass:string'; @use './../tokens/temp/components'; +@use './../tokens/temp/mode'; @use './../mixins/tokens'; @use './../variables/components/button'; @@ -103,6 +105,12 @@ border-color: transparent; background-color: tokens.component('post-comp-interactive-button-primary-color-bg-enabled'); color: tokens.component('post-comp-interactive-button-primary-color-fg-enabled'); + $color-key: string.slice( + tokens.component('post-comp-interactive-button-primary-color-fg-enabled'), + 7, + -2 + ); + color: light-dark(map.get(mode.$post-light, $color-key), map.get(mode.$post-dark, $color-key)); &:disabled { background-color: color.$gray-10; diff --git a/packages/styles/src/tokens/_modes.scss b/packages/styles/src/tokens/_modes.scss index ac6d53b1df..610b1ffe2e 100644 --- a/packages/styles/src/tokens/_modes.scss +++ b/packages/styles/src/tokens/_modes.scss @@ -1,6 +1,14 @@ @use './core'; @use './../placeholders/modes'; +:root { + color-scheme: light dark; +} + +[data-color-mode='light'] { + color-scheme: light; +} + :root, [data-color-mode='light'] { @extend %post-light; @@ -8,4 +16,5 @@ [data-color-mode='dark'] { @extend %post-dark; + color-scheme: dark; } From 8b9c45473c100fa2bed69fa26926c5456c88af1a Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Fri, 26 Jul 2024 09:10:51 +0200 Subject: [PATCH 15/27] rename mode placeholders --- packages/styles/src/placeholders/_modes.scss | 4 ++-- packages/styles/src/tokens/_modes.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/styles/src/placeholders/_modes.scss b/packages/styles/src/placeholders/_modes.scss index 4dcdbf2145..2bb8abd34f 100644 --- a/packages/styles/src/placeholders/_modes.scss +++ b/packages/styles/src/placeholders/_modes.scss @@ -1,10 +1,10 @@ @use '../tokens/temp/mode' as mode; @use './../mixins/tokens'; -%post-light { +%color-mode-light { @include tokens.from(mode.$post-light); } -%post-dark { +%color-mode-dark { @include tokens.from(mode.$post-dark); } diff --git a/packages/styles/src/tokens/_modes.scss b/packages/styles/src/tokens/_modes.scss index 610b1ffe2e..acbce91f5c 100644 --- a/packages/styles/src/tokens/_modes.scss +++ b/packages/styles/src/tokens/_modes.scss @@ -11,10 +11,10 @@ :root, [data-color-mode='light'] { - @extend %post-light; + @extend %color-mode-light; } [data-color-mode='dark'] { - @extend %post-dark; + @extend %color-mode-dark; color-scheme: dark; } From aba68d55a79eae9276368647d93c366c6523b57c Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Wed, 7 Aug 2024 10:14:02 +0200 Subject: [PATCH 16/27] Revert light-dark experiment --- packages/styles/src/components/button.scss | 8 -------- packages/styles/src/tokens/_modes.scss | 9 --------- 2 files changed, 17 deletions(-) diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss index b62e06638a..4af48cfb11 100644 --- a/packages/styles/src/components/button.scss +++ b/packages/styles/src/components/button.scss @@ -2,10 +2,8 @@ @use 'sass:map'; @use 'sass:math'; -@use 'sass:string'; @use './../tokens/temp/components'; -@use './../tokens/temp/mode'; @use './../mixins/tokens'; @use './../variables/components/button'; @@ -105,12 +103,6 @@ border-color: transparent; background-color: tokens.component('post-comp-interactive-button-primary-color-bg-enabled'); color: tokens.component('post-comp-interactive-button-primary-color-fg-enabled'); - $color-key: string.slice( - tokens.component('post-comp-interactive-button-primary-color-fg-enabled'), - 7, - -2 - ); - color: light-dark(map.get(mode.$post-light, $color-key), map.get(mode.$post-dark, $color-key)); &:disabled { background-color: color.$gray-10; diff --git a/packages/styles/src/tokens/_modes.scss b/packages/styles/src/tokens/_modes.scss index acbce91f5c..500b9a423a 100644 --- a/packages/styles/src/tokens/_modes.scss +++ b/packages/styles/src/tokens/_modes.scss @@ -1,14 +1,6 @@ @use './core'; @use './../placeholders/modes'; -:root { - color-scheme: light dark; -} - -[data-color-mode='light'] { - color-scheme: light; -} - :root, [data-color-mode='light'] { @extend %color-mode-light; @@ -16,5 +8,4 @@ [data-color-mode='dark'] { @extend %color-mode-dark; - color-scheme: dark; } From ffea852bae5040f824a0043572447441d811eb79 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Wed, 7 Aug 2024 10:14:11 +0200 Subject: [PATCH 17/27] Revert "set button primary fore- and background with tokens" This reverts commit cbafb2ee24461c959c53cc381463e4964b39f49c. --- packages/styles/gulpfile.js | 11 ++++++----- packages/styles/src/components/button.scss | 7 ++----- packages/styles/src/mixins/_tokens.scss | 7 ------- 3 files changed, 8 insertions(+), 17 deletions(-) diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js index 542c462e57..631e7c210a 100644 --- a/packages/styles/gulpfile.js +++ b/packages/styles/gulpfile.js @@ -169,14 +169,15 @@ gulp.task('sass:tests', () => { ); }); -gulp.task('watchfiles', () => { - return gulp.watch('./src/**/*.scss', gulp.series('copy')); -}); - /** * Watch task for scss development */ -gulp.task('watch', gulp.series('temprarily-copy-token-files', 'watchfiles')); +gulp.task( + 'watch', + gulp.series('temprarily-copy-token-files', () => { + return gulp.watch('./src/**/*.scss', 'copy'); + }), +); /** * Run copy and sass task in parallel per default diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss index 4af48cfb11..425a25309a 100644 --- a/packages/styles/src/components/button.scss +++ b/packages/styles/src/components/button.scss @@ -3,9 +3,6 @@ @use 'sass:map'; @use 'sass:math'; -@use './../tokens/temp/components'; -@use './../mixins/tokens'; - @use './../variables/components/button'; @use './../variables/color'; @use './../variables/commons'; @@ -101,8 +98,8 @@ // Primary .btn-primary { border-color: transparent; - background-color: tokens.component('post-comp-interactive-button-primary-color-bg-enabled'); - color: tokens.component('post-comp-interactive-button-primary-color-fg-enabled'); + background-color: var(--post-gray-80); + color: var(--post-contrast-color-inverted); &:disabled { background-color: color.$gray-10; diff --git a/packages/styles/src/mixins/_tokens.scss b/packages/styles/src/mixins/_tokens.scss index 8624580cb0..31a3cf8c69 100644 --- a/packages/styles/src/mixins/_tokens.scss +++ b/packages/styles/src/mixins/_tokens.scss @@ -1,12 +1,5 @@ -@use './../tokens/temp/components'; -@use 'sass:map'; - @mixin from($list) { @each $key, $value in $list { --#{$key}: #{$value}; } } - -@function component($name) { - @return #{map.get(components.$post-interactives, $name)}; -} From b8369139392f0c4dd0a9fdb6d8a56dd5ac23df23 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Mon, 12 Aug 2024 11:23:57 +0200 Subject: [PATCH 18/27] Update packages/documentation/.storybook/styles/preview.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- packages/documentation/.storybook/styles/preview.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 5a1f5cbe93..8858bc1f13 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -1,5 +1,4 @@ // importing the complete styles package scss -// TODO: replace intranet.scss with index.scss as soon as the issues in the portal.scss are fixed @use '@swisspost/design-system-styles/post-external.scss'; @use '@swisspost/design-system-styles/core.scss' as post; @use '@swisspost/design-system-styles/mixins/utilities'; From 97ffe7fdb35845bb51cca91ab2398d34e2052ec0 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Mon, 12 Aug 2024 11:24:14 +0200 Subject: [PATCH 19/27] Update packages/styles/gulpfile.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- packages/styles/gulpfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js index 631e7c210a..ee6eae60be 100644 --- a/packages/styles/gulpfile.js +++ b/packages/styles/gulpfile.js @@ -20,7 +20,7 @@ gulp.task('copy', () => { .pipe(gulp.dest(options.outputDir)); }); -gulp.task('temprarily-copy-token-files', () => { +gulp.task('temporarily-copy-token-files', () => { return gulp.src(['../tokens/dist/*.scss']).pipe(gulp.dest('./src/tokens/temp')); }); From fcf60fc789c46e3be593dbcb33bf476f4a50011f Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Mon, 12 Aug 2024 11:24:23 +0200 Subject: [PATCH 20/27] Update packages/styles/gulpfile.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- packages/styles/gulpfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js index ee6eae60be..907023e2a7 100644 --- a/packages/styles/gulpfile.js +++ b/packages/styles/gulpfile.js @@ -174,7 +174,7 @@ gulp.task('sass:tests', () => { */ gulp.task( 'watch', - gulp.series('temprarily-copy-token-files', () => { + gulp.series('temporarily-copy-token-files', () => { return gulp.watch('./src/**/*.scss', 'copy'); }), ); From a047516f1600352294bbb63a76c44be57080d882 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Mon, 12 Aug 2024 11:24:39 +0200 Subject: [PATCH 21/27] Update packages/styles/gulpfile.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- packages/styles/gulpfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js index 907023e2a7..31e4f304f8 100644 --- a/packages/styles/gulpfile.js +++ b/packages/styles/gulpfile.js @@ -186,7 +186,7 @@ exports.default = gulp.task( 'build', gulp.parallel( gulp.series('map-icons', 'copy', 'autoprefixer', 'transform-package-json'), - gulp.series('temprarily-copy-token-files', 'sass'), + gulp.series('temporarily-copy-token-files', 'sass'), gulp.series('build-components'), ), ); From 0c8613229c80fb8cd35051640974ce49681a7994 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Mon, 12 Aug 2024 11:24:59 +0200 Subject: [PATCH 22/27] Update .changeset/large-weeks-tap.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .changeset/large-weeks-tap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/large-weeks-tap.md b/.changeset/large-weeks-tap.md index 8f053dbfd8..71d9ec754d 100644 --- a/.changeset/large-weeks-tap.md +++ b/.changeset/large-weeks-tap.md @@ -2,7 +2,7 @@ '@swisspost/design-system-styles': minor --- -Added four new entry files that enable working with Design Tokens. +Added four new entry files that enable working with Design Tokens: - post-external.(s)css: For portal and other external pages - post-internal.(s)css: For applications and other internal pages From b2e646209c3420f11f76a3f3b1400f766a9fc8d7 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Mon, 12 Aug 2024 11:25:19 +0200 Subject: [PATCH 23/27] Update packages/styles/src/mixins/_media.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- packages/styles/src/mixins/_media.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/mixins/_media.scss b/packages/styles/src/mixins/_media.scss index 0a67821ffc..3f6f873ae6 100644 --- a/packages/styles/src/mixins/_media.scss +++ b/packages/styles/src/mixins/_media.scss @@ -5,7 +5,7 @@ } @mixin max($device-size) { - @media screen and (max-width: ($device-size - 0.1)) { + @media screen and (max-width: ($device-size - 0.01)) { @content; } } From c3acc68659aff69a60c8633c52e87d125d2cf71d Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Mon, 12 Aug 2024 11:25:34 +0200 Subject: [PATCH 24/27] Update packages/styles/src/mixins/_media.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- packages/styles/src/mixins/_media.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/mixins/_media.scss b/packages/styles/src/mixins/_media.scss index 3f6f873ae6..2744a83c39 100644 --- a/packages/styles/src/mixins/_media.scss +++ b/packages/styles/src/mixins/_media.scss @@ -11,7 +11,7 @@ } @mixin between($min-size, $max-size) { - @media screen and (min-width: $min-size) and (max-width: ($max-size - 0.1)) { + @media screen and (min-width: $min-size) and (max-width: ($max-size - 0.01)) { @content; } } From 2afbe7fed0adbc8fbed29e697acdb29c21de50d5 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Mon, 12 Aug 2024 11:25:55 +0200 Subject: [PATCH 25/27] Update packages/styles/src/mixins/_tokens.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- packages/styles/src/mixins/_tokens.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/mixins/_tokens.scss b/packages/styles/src/mixins/_tokens.scss index 31a3cf8c69..d2f309031a 100644 --- a/packages/styles/src/mixins/_tokens.scss +++ b/packages/styles/src/mixins/_tokens.scss @@ -1,4 +1,4 @@ -@mixin from($list) { +@mixin from($map) { @each $key, $value in $list { --#{$key}: #{$value}; } From f0ed82a108331cbdcfbea306039852b697514074 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Mon, 12 Aug 2024 11:26:04 +0200 Subject: [PATCH 26/27] Update packages/styles/src/mixins/_tokens.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- packages/styles/src/mixins/_tokens.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/mixins/_tokens.scss b/packages/styles/src/mixins/_tokens.scss index d2f309031a..0b24145f94 100644 --- a/packages/styles/src/mixins/_tokens.scss +++ b/packages/styles/src/mixins/_tokens.scss @@ -1,5 +1,5 @@ @mixin from($map) { - @each $key, $value in $list { + @each $key, $value in $map { --#{$key}: #{$value}; } } From 68fdfd1e4b2a62c154700662f299926fc9495769 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Mon, 12 Aug 2024 11:30:51 +0200 Subject: [PATCH 27/27] chore: add comment to gulpfile about temporary fix --- packages/styles/gulpfile.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js index 631e7c210a..c895e9df61 100644 --- a/packages/styles/gulpfile.js +++ b/packages/styles/gulpfile.js @@ -20,6 +20,11 @@ gulp.task('copy', () => { .pipe(gulp.dest(options.outputDir)); }); +/** + * Temporary task to copy token files from tokens package to the styles package since + * pnpm does not correctly install dependencies of dependencies for workspace packages. + * See https://github.com/pnpm/pnpm/issues/8338 for more information and reproduction + */ gulp.task('temprarily-copy-token-files', () => { return gulp.src(['../tokens/dist/*.scss']).pipe(gulp.dest('./src/tokens/temp')); });