chore: use layers for token entry files

Wrapping tokens into a layer allows consuming projects to easily define the cascade order of the tokens, no matter at what position they get imported.

.changeset/lovely-mirrors-travel.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Wrapped new token only entry files in a CSS layer called 'design-system'. The two files affected are 'post-tokens-external.scss' and 'post-tokens-internal.scss' as well as their compiled CSS counterparts.

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

@@ -1,4 +1,8 @@
-@use './tokens/modes';
-@use './tokens/device';
-@use './tokens/external';
-@use './tokens/post-theme';
+@use 'sass:meta';
+
+@layer design-system {
+  @include meta.load-css('./tokens/modes');
+  @include meta.load-css('./tokens/device');
+  @include meta.load-css('./tokens/external');
+  @include meta.load-css('./tokens/post-theme');
+}

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

@@ -1,4 +1,8 @@
-@use './tokens/modes';
-@use './tokens/device';
-@use './tokens/internal';
-@use './tokens/post-theme';
+@use 'sass:meta';
+
+@layer design-system {
+  @include meta.load-css('./tokens/modes');
+  @include meta.load-css('./tokens/device');
+  @include meta.load-css('./tokens/internal');
+  @include meta.load-css('./tokens/post-theme');
+}