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