feat: add semantic layer token machinery

.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/styles/package.json

@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.8",
+    "@swisspost/design-system-tokens": "workspace:*",
     "bootstrap": "5.3.3"
   },
   "devDependencies": {

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;
+  }
+}

packages/styles/src/mixins/_tokens.scss

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

packages/styles/src/placeholders/_modes.scss

@@ -0,0 +1,10 @@
+@use '@swisspost/design-system-tokens/mode' as mode;
+@use './../mixins/tokens';
+
+%post-light {
+  @include tokens.from(mode.$post-light);
+}
+
+%post-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 '@swisspost/design-system-tokens/core';

packages/styles/src/tokens/_device.scss

@@ -0,0 +1,19 @@
+@use '@swisspost/design-system-tokens/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 '@swisspost/design-system-tokens/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 '@swisspost/design-system-tokens/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 %post-light;
+}
+
+[data-color-mode='dark'] {
+  @extend %post-dark;
+}

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

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