Repository: swisspost/design-system
Pull request #4608: feat(styles)!: rename entry points according to new appearance
Author: login: gfellerph
Created: 2025-02-05T13:18:39Z | Merged: 2025-03-11T13:29:01Z

Updated CSS and SCSS entry file names to better represent the styles contained. There is now the choice between compact and default appearance instead of internal and external styles. This change better represents the resulting look of the components.

- post-external.[s]css -> post-default.[s]css
- post-internal.[s]css -> post-compact.[s]css
- post-tokens-external.[s]css -> post-tokens-default.[s]css
- post-tokens-internal.[s]css -> post-tokens-compact.[s]css
- cargo-external.[s]css -> cargo-default.[s]css
- cargo-internal.[s]css -> cargo-compact.[s]css
- cargo-tokens-external.[s]css -> cargo-tokens-default.[s]css
- cargo-tokens-internal.[s]css -> cargo-tokens-compact.[s]css


Diff:
diff --git a/.changeset/slimy-items-happen.md b/.changeset/slimy-items-happen.md
new file mode 100644
index 0000000000..c78e3e6d1d
--- /dev/null
+++ b/.changeset/slimy-items-happen.md
@@ -0,0 +1,14 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Updated CSS and SCSS entry file names to better represent the styles contained. There is now the choice between compact and default appearance instead of internal and external styles. This change better represents the resulting look of the components.
+
+- post-external.[s]css -> post-default.[s]css
+- post-internal.[s]css -> post-compact.[s]css
+- post-tokens-external.[s]css -> post-tokens-default.[s]css
+- post-tokens-internal.[s]css -> post-tokens-compact.[s]css
+- cargo-external.[s]css -> cargo-default.[s]css
+- cargo-internal.[s]css -> cargo-compact.[s]css
+- cargo-tokens-external.[s]css -> cargo-tokens-default.[s]css
+- cargo-tokens-internal.[s]css -> cargo-tokens-compact.[s]css
diff --git a/packages/components-angular/projects/consumer-app/src/styles.scss b/packages/components-angular/projects/consumer-app/src/styles.scss
index 496f5a4f49..28612a51ef 100644
--- a/packages/components-angular/projects/consumer-app/src/styles.scss
+++ b/packages/components-angular/projects/consumer-app/src/styles.scss
@@ -1 +1 @@
-@use '@swisspost/design-system-styles/post-external.scss';
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/cypress/fixtures/post-card-control.form-association.test.html b/packages/components/cypress/fixtures/post-card-control.form-association.test.html
index b8f6997ec7..0830696333 100644
--- a/packages/components/cypress/fixtures/post-card-control.form-association.test.html
+++ b/packages/components/cypress/fixtures/post-card-control.form-association.test.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
     <link
-      href="../../node_modules/@swisspost/design-system-styles/post-external.css"
+      href="../../node_modules/@swisspost/design-system-styles/post-default.css"
       rel="stylesheet"
     />
     <script src="../../dist/post-components/post-components.esm.js" type="module"></script>
diff --git a/packages/components/cypress/fixtures/post-popover.test.html b/packages/components/cypress/fixtures/post-popover.test.html
index 94ba27b7be..8e7b648eb2 100644
--- a/packages/components/cypress/fixtures/post-popover.test.html
+++ b/packages/components/cypress/fixtures/post-popover.test.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
     <link
-      href="../../node_modules/@swisspost/design-system-styles/post-external.css"
+      href="../../node_modules/@swisspost/design-system-styles/post-default.css"
       rel="stylesheet"
     />
     <script src="../../dist/post-components/post-components.esm.js" type="module"></script>
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index becb9d931a..f64c03976c 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -9,7 +9,7 @@
     <meta name="design-system-settings" data-post-icon-base="/assets/icons" />
     <title>Stencil Component Starter</title>
 
-    <link id="tokens" rel="stylesheet" href="/assets/css/post-tokens-external.css" />
+    <link id="tokens" rel="stylesheet" href="/assets/css/post-tokens-default.css" />
     <link id="palette" rel="stylesheet" href="/assets/css/post-palettes.css" />
     <link rel="stylesheet" href="/assets/css/index.css" />
     <script type="module" src="/build/post-components.esm.js"></script>
@@ -170,12 +170,12 @@ <h1>Components package playground</h1>
     <select
       name="tokens"
       id="tokens-select"
-      value="external"
+      value="default"
       class="mb-4"
-      onchange="if (['external', 'internal'].includes(this.value)) { document.getElementById('tokens').setAttribute('href', `/assets/css/post-tokens-${encodeURIComponent(this.value)}.css`); }"
+      onchange="if (['default', 'compact'].includes(this.value)) { document.getElementById('tokens').setAttribute('href', `/assets/css/post-tokens-${encodeURIComponent(this.value)}.css`); }"
     >
-      <option value="external">Post external</option>
-      <option value="internal">Post internal</option>
+      <option value="default">Post default</option>
+      <option value="compact">Post compact</option>
     </select>
     <hr />
   </body>
diff --git a/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx b/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx
index bd5b0954c6..3d54126a47 100644
--- a/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx
+++ b/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx
@@ -2,17 +2,17 @@ import React, { useEffect, useState } from 'react';
 import { IconButton, WithTooltip } from '@storybook/components';
 
 const THEMES = ['Post', 'Cargo'] as const;
-const CHANNELS = ['External', 'Internal'] as const;
+const APPEARANCE = ['Default', 'Compact'] as const;
 const SCHEMES = ['Light', 'Dark'] as const;
 
 /*
  * Stylesheets
  */
-const getStylesheetUrl = (theme: string, channel: string) => {
-  return `/styles/${theme.toLowerCase()}-${channel.toLowerCase()}.css`;
+const getStylesheetUrl = (theme: string, appearance: string) => {
+  return `/styles/${theme.toLowerCase()}-${appearance.toLowerCase()}.css`;
 };
 const possibleStylesheets = THEMES.flatMap(theme => {
-  return CHANNELS.map(channel => getStylesheetUrl(theme, channel));
+  return APPEARANCE.map(appearance => getStylesheetUrl(theme, appearance));
 });
 
 /*
@@ -43,7 +43,9 @@ function StylesSwitcher() {
   let observer: MutationObserver;
 
   const [currentTheme, setCurrentTheme] = useState<string>(stored('theme') || THEMES[0]);
-  const [currentChannel, setCurrentChannel] = useState<string>(stored('channel') || CHANNELS[0]);
+  const [currentAppearance, setCurrentAppearance] = useState<string>(
+    stored('appearance') || APPEARANCE[0],
+  );
   const [currentScheme, setCurrentScheme] = useState<string>(stored('scheme') || SCHEMES[0]);
 
   const [preview, setPreview] = useState<Document>();
@@ -80,7 +82,7 @@ function StylesSwitcher() {
   }, [preview]);
 
   /**
-   * Sets the expected stylesheet in the preview head when the theme or channel changes
+   * Sets the expected stylesheet in the preview head when the theme or appearance changes
    */
   useEffect(() => {
     if (!preview) return;
@@ -92,18 +94,18 @@ function StylesSwitcher() {
 
     preview.head.insertAdjacentHTML(
       'beforeend',
-      `<link rel="stylesheet" href="${getStylesheetUrl(currentTheme, currentChannel)}" />`,
+      `<link rel="stylesheet" href="${getStylesheetUrl(currentTheme, currentAppearance)}" />`,
     );
-  }, [preview, currentTheme, currentChannel]);
+  }, [preview, currentTheme, currentAppearance]);
 
   /**
-   * Sets the design system styles import SCSS file to the correct theme and channel file
+   * Sets the design system styles import SCSS file to the correct theme and appearance file
    */
   useEffect(() => {
     if (!stylesCodeBlocks) return;
 
     const t = currentTheme.toLowerCase();
-    const c = currentChannel.toLowerCase();
+    const c = currentAppearance.toLowerCase();
     const packageName = "'@swisspost/design-system-styles/";
 
     stylesCodeBlocks.forEach(stylesCodeBlock => {
@@ -113,28 +115,28 @@ function StylesSwitcher() {
         // Remove the packageName from the source to make sure we don't override it
         source = source.replace(packageName, '');
 
-        // Check if one of the themes or channels are in the scss path
+        // Check if one of the themes or appearances are in the scss path
         const theme = THEMES.find(tItem => source.indexOf(tItem.toLowerCase()) > -1);
-        const channel = CHANNELS.find(cItem => source.indexOf(cItem.toLowerCase()) > -1);
+        const appearance = APPEARANCE.find(cItem => source.indexOf(cItem.toLowerCase()) > -1);
 
         const updateTheme = theme && theme.toLowerCase() !== t;
-        const updateChannel = channel && channel.toLowerCase() !== c;
+        const updateAppearance = appearance && appearance.toLowerCase() !== c;
 
-        // Only change the source if theme or channel needs to be changed
-        if (source && (updateTheme || updateChannel)) {
+        // Only change the source if theme or appearance needs to be changed
+        if (source && (updateTheme || updateAppearance)) {
           if (updateTheme) {
             source = source.replace((theme as string).toLowerCase(), t);
           }
 
-          if (updateChannel) {
-            source = source.replace((channel as string).toLowerCase(), c);
+          if (updateAppearance) {
+            source = source.replace((appearance as string).toLowerCase(), c);
           }
 
           sourceArray[i].innerHTML = packageName + source;
         }
       });
     });
-  }, [stylesCodeBlocks, currentTheme, currentChannel]);
+  }, [stylesCodeBlocks, currentTheme, currentAppearance]);
 
   /**
    * Sets the expected 'data-color-scheme' attribute on all story containers when the scheme changes
@@ -157,11 +159,11 @@ function StylesSwitcher() {
   };
 
   /**
-   * Applies selected channel and registers it to the local storage
+   * Applies selected appearance and registers it to the local storage
    */
-  const applyChannel = (channel: string) => {
-    store('channel', channel);
-    setCurrentChannel(channel);
+  const applyAppearance = (appearance: string) => {
+    store('appearance', appearance);
+    setCurrentAppearance(appearance);
   };
 
   /**
@@ -198,27 +200,29 @@ function StylesSwitcher() {
         </IconButton>
       </WithTooltip>
 
-      {/* Channel dropdown */}
+      {/* Appearance dropdown */}
       <WithTooltip
         placement="bottom-end"
         trigger="click"
         closeOnOutsideClick
         tooltip={
           <div className="addon-dropdown">
-            {CHANNELS.map(channel => (
+            {APPEARANCE.map(appearance => (
               <IconButton
-                className={'addon-dropdown__item' + (channel === currentChannel ? ' active' : '')}
-                key={channel}
-                onClick={() => applyChannel(channel)}
+                className={
+                  'addon-dropdown__item' + (appearance === currentAppearance ? ' active' : '')
+                }
+                key={appearance}
+                onClick={() => applyAppearance(appearance)}
               >
-                {channel}
+                {appearance}
               </IconButton>
             ))}
           </div>
         }
       >
         <IconButton className="addon-label" size="medium">
-          Channel: {currentChannel}
+          Appearance: {currentAppearance}
         </IconButton>
       </WithTooltip>
 
diff --git a/packages/documentation/.storybook/preview-head.html b/packages/documentation/.storybook/preview-head.html
index 4499ef2eed..ac53a04d85 100644
--- a/packages/documentation/.storybook/preview-head.html
+++ b/packages/documentation/.storybook/preview-head.html
@@ -8,7 +8,7 @@
 <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
 <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 <link rel="manifest" href="/site.webmanifest" />
-<link rel="stylesheet" href="/styles/post-external.css" />
+<link rel="stylesheet" href="/styles/post-default.css" />
 
 <meta name="design-system-settings" data-post-icon-base="/post-icons" />
 <meta
diff --git a/packages/documentation/src/shared/styles-package-import.mdx b/packages/documentation/src/shared/styles-package-import.mdx
index 5c3efac229..612e9f185c 100644
--- a/packages/documentation/src/shared/styles-package-import.mdx
+++ b/packages/documentation/src/shared/styles-package-import.mdx
@@ -10,7 +10,7 @@ import { getComponentStyleImports } from './styles-package-import-individual.sam
 To import all Design System styles:
 
 <div className="docblock-source-all-design">
-  <Source code={`@use '@swisspost/design-system-styles/post-internal.scss';`} language="scss" />
+  <Source code={`@use '@swisspost/design-system-styles/post-compact.scss';`} language="scss" />
 </div>
 
 To import only the styles required for this component:
diff --git a/packages/styles/index.html b/packages/styles/index.html
index 2833a4f15a..da62f9932e 100644
--- a/packages/styles/index.html
+++ b/packages/styles/index.html
@@ -1,24 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Styles playground</title>
 
-    <!-- Token imports -->
-    <link rel="stylesheet" href="src/tokens/_core.scss" />
-    <link id="channel" rel="stylesheet" href="src/tokens/_external.scss" />
-    <link id="palettes" rel="stylesheet" href="src/palettes/post-palettes.scss" />
-    <link id="theme" rel="stylesheet" href="src/tokens/_post-theme.scss" />
-    <link rel="stylesheet" href="src/tokens/_device.scss" />
-    <link rel="stylesheet" href="src/tokens/_components.scss" />
-    <link rel="stylesheet" href="src/tokens/_schemes.scss" />
-
     <!-- Styles -->
-    <link rel="stylesheet" href="src/layout/index.scss" />
-    <link rel="stylesheet" href="src/utilities/index.scss" />
-    <link rel="stylesheet" href="src/elements/_index.scss" />
-    <link rel="stylesheet" href="src/components/_index.scss" />
+    <link rel="stylesheet" id="styles" href="src/post-default.scss" />
+
     <script src="playground.js" defer></script>
   </head>
   <body>
@@ -31,10 +20,10 @@ <h1>Styles package playground</h1>
           <option value="post">Post</option>
           <option value="cargo">Cargo</option>
         </select>
-        <label for="tokens-select">Channel</label>
-        <select name="channel" id="channel-select" value="external" class="mb-4 me-8">
-          <option value="external">Post external</option>
-          <option value="internal">Post internal</option>
+        <label for="tokens-select">Appearance</label>
+        <select name="appearance" id="appearance-select" value="default" class="mb-4 me-8">
+          <option value="default">Default</option>
+          <option value="compact">Compact</option>
         </select>
         <label for="scheme-select">Color scheme</label>
         <select name="scheme" id="scheme-select" value="light" class="mb-4">
diff --git a/packages/styles/playground.js b/packages/styles/playground.js
index 56e1529141..26b3d592ff 100644
--- a/packages/styles/playground.js
+++ b/packages/styles/playground.js
@@ -1,14 +1,22 @@
-// Change tokens
-document.getElementById('channel-select').addEventListener('change', e => {
-  document.getElementById('channel').setAttribute('href', `src/tokens/_${e.target.value}.scss`);
-});
+const handleThemeAppearanceChange = () => {
+  const theme = getTheme();
+  const appearance = getAppearance();
+  document.getElementById('styles').setAttribute('href', `src/${theme}-${appearance}.scss`);
+};
 
-document.getElementById('theme-select').addEventListener('change', e => {
-  document.getElementById('theme').setAttribute('href', `src/tokens/_${e.target.value}-theme.scss`);
-  document
-    .getElementById('palettes')
-    .setAttribute('href', `src/palettes/${e.target.value}-palettes.scss`);
-});
+const getAppearance = () => {
+  return document.querySelector('#appearance-select').value;
+};
+
+const getTheme = () => {
+  return document.querySelector('#theme-select').value;
+};
+
+// Change tokens
+document
+  .getElementById('appearance-select')
+  .addEventListener('change', handleThemeAppearanceChange);
+document.getElementById('theme-select').addEventListener('change', handleThemeAppearanceChange);
 
 document.getElementById('scheme-select').addEventListener('change', e => {
   document.body.setAttribute('data-color-scheme', e.target.value);
diff --git a/packages/styles/src/cargo-external.scss b/packages/styles/src/cargo-compact.scss
similarity index 72%
rename from packages/styles/src/cargo-external.scss
rename to packages/styles/src/cargo-compact.scss
index e318623147..d2e230505d 100644
--- a/packages/styles/src/cargo-external.scss
+++ b/packages/styles/src/cargo-compact.scss
@@ -1,6 +1,6 @@
 @use './tokens/schemes';
-@use './tokens/device';
-@use './tokens/external';
+@use './tokens/device-compact';
+@use './tokens/appearance-compact';
 @use './tokens/cargo-theme';
 @use './palettes/cargo-palettes';
 @use './layout';
diff --git a/packages/styles/src/cargo-internal.scss b/packages/styles/src/cargo-default.scss
similarity index 72%
rename from packages/styles/src/cargo-internal.scss
rename to packages/styles/src/cargo-default.scss
index eaeafb6dee..f7688329d9 100644
--- a/packages/styles/src/cargo-internal.scss
+++ b/packages/styles/src/cargo-default.scss
@@ -1,6 +1,6 @@
 @use './tokens/schemes';
-@use './tokens/device';
-@use './tokens/internal';
+@use './tokens/device-default';
+@use './tokens/appearance-default';
 @use './tokens/cargo-theme';
 @use './palettes/cargo-palettes';
 @use './layout';
diff --git a/packages/styles/src/cargo-tokens-external.scss b/packages/styles/src/cargo-tokens-compact.scss
similarity index 56%
rename from packages/styles/src/cargo-tokens-external.scss
rename to packages/styles/src/cargo-tokens-compact.scss
index 4e4f2e9932..bfa22c0dae 100644
--- a/packages/styles/src/cargo-tokens-external.scss
+++ b/packages/styles/src/cargo-tokens-compact.scss
@@ -2,7 +2,7 @@
 
 @layer design-system {
   @include meta.load-css('./tokens/schemes');
-  @include meta.load-css('./tokens/device');
-  @include meta.load-css('./tokens/external');
+  @include meta.load-css('./tokens/device-compact');
+  @include meta.load-css('./tokens/appearance-compact');
   @include meta.load-css('./tokens/cargo-theme');
 }
diff --git a/packages/styles/src/cargo-tokens-internal.scss b/packages/styles/src/cargo-tokens-default.scss
similarity index 56%
rename from packages/styles/src/cargo-tokens-internal.scss
rename to packages/styles/src/cargo-tokens-default.scss
index 481b7091aa..97dca4a77d 100644
--- a/packages/styles/src/cargo-tokens-internal.scss
+++ b/packages/styles/src/cargo-tokens-default.scss
@@ -2,7 +2,7 @@
 
 @layer design-system {
   @include meta.load-css('./tokens/schemes');
-  @include meta.load-css('./tokens/device');
-  @include meta.load-css('./tokens/internal');
+  @include meta.load-css('./tokens/device-default');
+  @include meta.load-css('./tokens/appearance-default');
   @include meta.load-css('./tokens/cargo-theme');
 }
diff --git a/packages/styles/src/post-external.scss b/packages/styles/src/post-compact.scss
similarity index 72%
rename from packages/styles/src/post-external.scss
rename to packages/styles/src/post-compact.scss
index a7c0bf352d..f046c7f1a1 100644
--- a/packages/styles/src/post-external.scss
+++ b/packages/styles/src/post-compact.scss
@@ -1,6 +1,6 @@
 @use './tokens/schemes';
-@use './tokens/device';
-@use './tokens/external';
+@use './tokens/device-compact';
+@use './tokens/appearance-compact';
 @use './tokens/post-theme';
 @use './palettes/post-palettes';
 @use './layout';
diff --git a/packages/styles/src/post-internal.scss b/packages/styles/src/post-default.scss
similarity index 72%
rename from packages/styles/src/post-internal.scss
rename to packages/styles/src/post-default.scss
index b04ac38e7f..cbd1770d71 100644
--- a/packages/styles/src/post-internal.scss
+++ b/packages/styles/src/post-default.scss
@@ -1,6 +1,6 @@
 @use './tokens/schemes';
-@use './tokens/device';
-@use './tokens/internal';
+@use './tokens/device-default';
+@use './tokens/appearance-default';
 @use './tokens/post-theme';
 @use './palettes/post-palettes';
 @use './layout';
diff --git a/packages/styles/src/post-tokens-external.scss b/packages/styles/src/post-tokens-compact.scss
similarity index 55%
rename from packages/styles/src/post-tokens-external.scss
rename to packages/styles/src/post-tokens-compact.scss
index db96e9186c..53f41c12b6 100644
--- a/packages/styles/src/post-tokens-external.scss
+++ b/packages/styles/src/post-tokens-compact.scss
@@ -2,7 +2,7 @@
 
 @layer design-system {
   @include meta.load-css('./tokens/schemes');
-  @include meta.load-css('./tokens/device');
-  @include meta.load-css('./tokens/external');
+  @include meta.load-css('./tokens/device-compact');
+  @include meta.load-css('./tokens/appearance-compact');
   @include meta.load-css('./tokens/post-theme');
 }
diff --git a/packages/styles/src/post-tokens-internal.scss b/packages/styles/src/post-tokens-default.scss
similarity index 55%
rename from packages/styles/src/post-tokens-internal.scss
rename to packages/styles/src/post-tokens-default.scss
index 337b221902..2bdca42916 100644
--- a/packages/styles/src/post-tokens-internal.scss
+++ b/packages/styles/src/post-tokens-default.scss
@@ -2,7 +2,7 @@
 
 @layer design-system {
   @include meta.load-css('./tokens/schemes');
-  @include meta.load-css('./tokens/device');
-  @include meta.load-css('./tokens/internal');
+  @include meta.load-css('./tokens/device-default');
+  @include meta.load-css('./tokens/appearance-default');
   @include meta.load-css('./tokens/post-theme');
 }
diff --git a/packages/styles/src/tokens/_internal.scss b/packages/styles/src/tokens/_appearance-compact.scss
similarity index 100%
rename from packages/styles/src/tokens/_internal.scss
rename to packages/styles/src/tokens/_appearance-compact.scss
diff --git a/packages/styles/src/tokens/_external.scss b/packages/styles/src/tokens/_appearance-default.scss
similarity index 100%
rename from packages/styles/src/tokens/_external.scss
rename to packages/styles/src/tokens/_appearance-default.scss
diff --git a/packages/styles/src/tokens/_device-compact.scss b/packages/styles/src/tokens/_device-compact.scss
new file mode 100644
index 0000000000..4308f5978e
--- /dev/null
+++ b/packages/styles/src/tokens/_device-compact.scss
@@ -0,0 +1,15 @@
+@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.min(600px) {
+    @include tokens.from(device.$post-tablet);
+  }
+}
diff --git a/packages/styles/src/tokens/_device.scss b/packages/styles/src/tokens/_device-default.scss
similarity index 100%
rename from packages/styles/src/tokens/_device.scss
rename to packages/styles/src/tokens/_device-default.scss


Reviews:
user: login: leagrdv
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-06T07:29:36Z
user: login: alizedebray
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-06T17:20:52Z
user: login: gfellerph
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T13:36:54Z
user: login: gfellerph
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T13:37:52Z
user: login: gfellerph
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-10T08:29:39Z
user: login: gfellerph
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-10T08:45:36Z
user: login: alizedebray
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T12:53:32Z
user: login: alizedebray
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T12:53:50Z
user: login: leagrdv
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T08:06:46Z

Review comments:
diff_hunk: @@ -0,0 +1,15 @@
+@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.min(600px) {
+    @include tokens.from(device.$post-tablet);
+  }
path: packages/styles/src/tokens/_device-compact.scss
user: login: leagrdv
body: How come the compact appearance does not use the desktop tokens?
created_at: 2025-03-06T07:28:50Z
author_association: CONTRIBUTOR
path: pnpm-lock.yaml
user: login: leagrdv
body: Why are there changes on that file?
created_at: 2025-03-06T07:29:32Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,14 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Updated CSS and SCSS entry file names to better represent the styles contained. There is now the choice between compact and default appearance instead of internal and external styles. This change better represents the resulting look of the components.
+
+- post-external.[s]css -> post-default.[s]css
path: .changeset/slimy-items-happen.md
user: login: alizedebray
body: Didn't we define that we would simply use `post.[s]css` for the entry file?
created_at: 2025-03-06T17:16:09Z
author_association: CONTRIBUTOR
path: packages/styles/src/tokens/_appearance-compact.scss
user: login: alizedebray
body: Do we still need these files? I understood we would completely drop this layer in favor of simply using tablet tokens on desktop for the application.
created_at: 2025-03-06T17:20:48Z
author_association: CONTRIBUTOR
path: packages/styles/src/tokens/_appearance-compact.scss
user: login: gfellerph
body: This is a temporary measure to test if we can really do that. We still need to rename the tokens and the tokens package and apply the measure to the token system in order for it to work in figma. Otherwise we'd just have appearance: compact styles in code.
created_at: 2025-03-07T13:36:53Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,15 @@
+@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.min(600px) {
+    @include tokens.from(device.$post-tablet);
+  }
path: packages/styles/src/tokens/_device-compact.scss
user: login: gfellerph
body: This is a temporary measure to test if this really holds true. We still have to rename the tokens and adapt the system to work like this from token studio.
created_at: 2025-03-07T13:37:52Z
author_association: MEMBER
path: pnpm-lock.yaml
user: login: gfellerph
body: Updated the branch from main and they're gone^^. Possibly some system differences that produced different lockfile content.
created_at: 2025-03-10T08:29:39Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,14 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Updated CSS and SCSS entry file names to better represent the styles contained. There is now the choice between compact and default appearance instead of internal and external styles. This change better represents the resulting look of the components.
+
+- post-external.[s]css -> post-default.[s]css
path: .changeset/slimy-items-happen.md
user: login: gfellerph
body: I tried to apply this naming pattern, but I found it leads to more confusion than it saves on typing or cleanlyness. For example in the imports:

```scss
@layer design-system {
  @include meta.load-css('./tokens/schemes');
  @include meta.load-css('./tokens/device-default');
  @include meta.load-css('./tokens/appearance-default');
  @include meta.load-css('./tokens/post-theme');
}
```

If the device and appearance imports are not named "default", it looks like we're importing all device and appearance tokens and not only the default set. As a consequence of this, also the main import files have the default postfix. What do you think?
created_at: 2025-03-10T08:45:36Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,14 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Updated CSS and SCSS entry file names to better represent the styles contained. There is now the choice between compact and default appearance instead of internal and external styles. This change better represents the resulting look of the components.
+
+- post-external.[s]css -> post-default.[s]css
path: .changeset/slimy-items-happen.md
user: login: alizedebray
body: That make sense
created_at: 2025-03-10T12:53:32Z
author_association: CONTRIBUTOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-02-05T13:18:43Z
body: ###  🦋  Changeset detected

Latest commit: e6e723d485b8871e427558f1dce6293c3a47ae5f

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 12 packages</summary>

  | Name                                                  | Type  |
| ----------------------------------------------------- | ----- |
| @swisspost/design-system-styles                       | Major |
| @swisspost/design-system-components-angular-workspace | Patch |
| @swisspost/design-system-components                   | Major |
| @swisspost/design-system-documentation                | Patch |
| @swisspost/internet-header                            | Patch |
| @swisspost/design-system-nextjs-integration           | Patch |
| @swisspost/design-system-styles-primeng-workspace     | Patch |
| @swisspost/design-system-styles-primeng               | Major |
| @swisspost/design-system-components-react             | Major |
| @swisspost/design-system-components-angular           | Major |
| @swisspost/design-system-tokens                       | Major |
| @swisspost/design-system-icons                        | Major |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/swisspost/design-system/new/applicatorical-device-export?filename=.changeset/healthy-apricots-admire.md&value=---%0A%22%40swisspost%2Fdesign-system-components-angular-workspace%22%3A%20patch%0A%22%40swisspost%2Fdesign-system-components%22%3A%20patch%0A%22%40swisspost%2Fdesign-system-documentation%22%3A%20patch%0A%22%40swisspost%2Fdesign-system-styles%22%3A%20patch%0A---%0A%0Afeat(styles)!%3A%20rename%20entry%20points%20according%20to%20new%20appearance%0A)


author_association: NONE
user: login: swisspost-bot
created_at: 2025-02-05T14:10:38Z
body: **Related Previews**
- https://preview-4608--swisspost-design-system-next.netlify.app

author_association: CONTRIBUTOR
user: login: sonarqubecloud[bot]
created_at: 2025-03-10T14:41:45Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=swisspost_common-web-frontend&pullRequest=4608) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=swisspost_common-web-frontend&pullRequest=4608&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=swisspost_common-web-frontend&pullRequest=4608&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=swisspost_common-web-frontend&pullRequest=4608&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=swisspost_common-web-frontend&pullRequest=4608&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=swisspost_common-web-frontend&pullRequest=4608&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=swisspost_common-web-frontend&pullRequest=4608)


author_association: NONE