chore(styles): fixes playground (#4119)

Adds more specific token selects and fixes the preview, also adds compatibility for the `sass-embedded` package. --------- Co-authored-by: Alizé Debray <[email protected]>
swisspost · Dec 2, 2024 · b6a6e7a · b6a6e7a
1 parent 4c46ac8
commit b6a6e7a
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 24 deletions.
diff --git a/packages/styles/index.html b/packages/styles/index.html
@@ -4,33 +4,48 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Styles playground</title>
-    <link id="tokens" rel="stylesheet" href="src/post-tokens-external.scss" />
+
+    <!-- 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" />
+    <script src="playground.js" defer></script>
   </head>
-  <body class="p-4">
-    <h1>Styles package playground</h1>
-    <p class="mb-4">
-      Use this playground for quickly developing HTML/CSS components. Run
-      <code style="background-color: lightgrey; padding: 0.125rem 0.25rem; border-radius: 0.25rem"
-        >pnpm styles:start</code
-      >
-      to get going.
-    </p>
-    <label for="tokens-select">Select tokens package: </label>
-    <select
-      name="tokens"
-      id="tokens-select"
-      value="external"
-      class="mb-4"
-      onchange="document.getElementById('tokens').setAttribute('href', `/src/post-tokens-${this.value}.scss`)"
-    >
-      <option value="external">Post external</option>
-      <option value="internal">Post internal</option>
-    </select>
-    <hr />
+  <body>
+    <aside class="palette-brand p-16">
+      <h1>Styles package playground</h1>
+      <fieldset id="token-selects" class="mt-16">
+        <legend class="my-8">Select tokens</legend>
+        <label for="theme-select">Theme</label>
+        <select name="theme" id="theme-select" value="post" class="mb-4 me-8">
+          <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>
+        </select>
+        <label for="scheme-select">Color scheme</label>
+        <select name="scheme" id="scheme-select" value="light" class="mb-4">
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+        </select>
+      </fieldset>
+    </aside>
 
-    <!-- Place your component markup here -->
-    <button class="btn btn-primary">Primary button</button>
+    <main class="p-16">
+      <!-- Place your component markup here -->
+    </main>
   </body>
 </html>
diff --git a/packages/styles/playground.js b/packages/styles/playground.js
@@ -0,0 +1,15 @@
+// Change tokens
+document.getElementById('channel-select').addEventListener('change', e => {
+  document.getElementById('channel').setAttribute('href', `src/tokens/_${e.target.value}.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`);
+});
+
+document.getElementById('scheme-select').addEventListener('change', e => {
+  document.body.setAttribute('data-color-scheme', e.target.value);
+});
diff --git a/packages/styles/src/elements/body.scss b/packages/styles/src/elements/body.scss
@@ -23,4 +23,5 @@ body {
   line-height: tokens.get('body-line-height');
   letter-spacing: tokens.get('body-letter-spacing');
   color: tokens.get('body-color');
+  min-height: 100vh;
 }
diff --git a/packages/styles/vite.config.js b/packages/styles/vite.config.js
@@ -0,0 +1,10 @@
+export default {
+  // https://www.oddbird.net/2024/08/14/sass-compiler/
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
+};