From b6a6e7a21453b83d853a247abb27fadd77eef815 Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Mon, 2 Dec 2024 13:53:24 +0100
Subject: [PATCH] chore(styles): fixes playground (#4119)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Adds more specific token selects and fixes the preview, also adds
compatibility for the `sass-embedded` package.
---------
Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
packages/styles/index.html | 63 ++++++++++++++++----------
packages/styles/playground.js | 15 ++++++
packages/styles/src/elements/body.scss | 1 +
packages/styles/vite.config.js | 10 ++++
4 files changed, 65 insertions(+), 24 deletions(-)
create mode 100644 packages/styles/playground.js
create mode 100644 packages/styles/vite.config.js
diff --git a/packages/styles/index.html b/packages/styles/index.html
index 53ef398d94..30e62cfd8b 100644
--- a/packages/styles/index.html
+++ b/packages/styles/index.html
@@ -4,33 +4,48 @@
Styles playground
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- Styles package playground
-
- Use this playground for quickly developing HTML/CSS components. Run
- pnpm styles:start
- to get going.
-
-
-
-
+
+
-
-
+
+
+
diff --git a/packages/styles/playground.js b/packages/styles/playground.js
new file mode 100644
index 0000000000..56e1529141
--- /dev/null
+++ 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
index a9c902088a..f2101f43bd 100644
--- 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
new file mode 100644
index 0000000000..6ac65ee310
--- /dev/null
+++ 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',
+ },
+ },
+ },
+};