feat: add semantic layer token machinery (#3349)

This PR introduces the core and semantic layer tokens into the styles
package. With this, a couple of new entry files become available as well
as mixins to generate token maps.

New entry files:
```
post-external.scss
post-internal.scss
post-tokens-external.scss
post-tokens-internal.scss
```

New mixins:
```
_media.scss (for min, max, between media queries)
_tokens.scss (for creating token maps from the scss list outputs)
```

- [x] Implementation in documentation is missing due to
pnpm/pnpm#8338
- [x] Use component layer tokens like it's intended

---------

Co-authored-by: Alizé Debray <[email protected]>

.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

packages/documentation/.storybook/styles/preview.scss

@@ -1,6 +1,5 @@
 // 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';

packages/styles/.gitignore

@@ -13,3 +13,6 @@ storybook-static
 # Mac OSX Finder files.
 **/.DS_Store
 .DS_Store
+
+# Temporary files
+src/tokens/temp/

packages/styles/gulpfile.js

@@ -20,6 +20,15 @@ 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('temporarily-copy-token-files', () => {
+  return gulp.src(['../tokens/dist/*.scss']).pipe(gulp.dest('./src/tokens/temp'));
+});
+
 /**
  * Autoprefix SCSS files
  */
@@ -168,9 +177,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('temporarily-copy-token-files', () => {
+    return gulp.watch('./src/**/*.scss', 'copy');
+  }),
+);
 
 /**
  * Run copy and sass task in parallel per default
@@ -179,7 +191,7 @@ exports.default = gulp.task(
   'build',
   gulp.parallel(
     gulp.series('map-icons', 'copy', 'autoprefixer', 'transform-package-json'),
-    gulp.series('sass'),
+    gulp.series('temporarily-copy-token-files', 'sass'),
     gulp.series('build-components'),
   ),
 );

packages/styles/package.json

@@ -47,6 +47,7 @@
     "bootstrap": "5.3.3"
   },
   "devDependencies": {
+    "@swisspost/design-system-tokens": "workspace:*",
     "@swisspost/design-system-icons": "workspace:8.1.0",
     "@types/node": "20.14.14",
     "autoprefixer": "10.4.19",

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.01)) {
+    @content;
+  }
+}
+
+@mixin between($min-size, $max-size) {
+  @media screen and (min-width: $min-size) and (max-width: ($max-size - 0.01)) {
+    @content;
+  }
+}

packages/styles/src/mixins/_tokens.scss

@@ -0,0 +1,5 @@
+@mixin from($map) {
+  @each $key, $value in $map {
+    --#{$key}: #{$value};
+  }
+}

packages/styles/src/placeholders/_modes.scss

@@ -0,0 +1,10 @@
+@use '../tokens/temp/mode' as mode;
+@use './../mixins/tokens';
+
+%color-mode-light {
+  @include tokens.from(mode.$post-light);
+}
+
+%color-mode-dark {
+  @include tokens.from(mode.$post-dark);
+}

packages/styles/src/post-external.scss

@@ -0,0 +1,2 @@
+@use './post-tokens-external';
+@use './components';

packages/styles/src/post-internal.scss

@@ -0,0 +1,2 @@
+@use './post-tokens-internal';
+@use './components';

packages/styles/src/post-tokens-external.scss

@@ -0,0 +1,4 @@
+@use './tokens/modes';
+@use './tokens/device';
+@use './tokens/external';
+@use './tokens/post-theme';

packages/styles/src/post-tokens-internal.scss

@@ -0,0 +1,4 @@
+@use './tokens/modes';
+@use './tokens/device';
+@use './tokens/internal';
+@use './tokens/post-theme';

packages/styles/src/tokens/_core.scss

@@ -0,0 +1 @@
+@use './temp/core';

packages/styles/src/tokens/_device.scss

@@ -0,0 +1,19 @@
+@use './temp/device' as device;
+
+@use './core';
+@use './../mixins/tokens';
+@use './../mixins/media';
+
+:root {
+  @include media.max(600px) {
+    @include tokens.from(device.$post-mobile);
+  }
+
+  @include media.between(600px, 1024px) {
+    @include tokens.from(device.$post-tablet);
+  }
+
+  @include media.min(1024px) {
+    @include tokens.from(device.$post-desktop);
+  }
+}

packages/styles/src/tokens/_external.scss

@@ -0,0 +1,8 @@
+@use './temp/channel' as channel;
+
+@use './core';
+@use './../mixins/tokens';
+
+:root {
+  @include tokens.from(channel.$post-edk);
+}

packages/styles/src/tokens/_internal.scss

@@ -0,0 +1,8 @@
+@use './temp/channel' as channel;
+
+@use './core';
+@use './../mixins/tokens';
+
+:root {
+  @include tokens.from(channel.$post-idk);
+}

packages/styles/src/tokens/_modes.scss

@@ -0,0 +1,11 @@
+@use './core';
+@use './../placeholders/modes';
+
+:root,
+[data-color-mode='light'] {
+  @extend %color-mode-light;
+}
+
+[data-color-mode='dark'] {
+  @extend %color-mode-dark;
+}

packages/styles/src/tokens/_post-theme.scss

@@ -0,0 +1,8 @@
+@use './temp/theme' as themes;
+
+@use './core';
+@use './../mixins/tokens';
+
+:root {
+  @include tokens.from(themes.$post-theme);
+}