From 4b0ee8907fd549020135a966bebc6b4ef462cebc Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 27 Sep 2023 14:16:25 -0400
Subject: [PATCH] more themes for the demo

---
 docs/pages/experimental/themer.md |   5 +-
 src/themes/glassy.css             | 493 ++++++++++++++++++++++++++++++
 src/themes/playful.css            | 359 ++++++++++++++++++++++
 3 files changed, 856 insertions(+), 1 deletion(-)
 create mode 100644 src/themes/glassy.css
 create mode 100644 src/themes/playful.css

diff --git a/docs/pages/experimental/themer.md b/docs/pages/experimental/themer.md
index 048d5fbab..c05156b31 100644
--- a/docs/pages/experimental/themer.md
+++ b/docs/pages/experimental/themer.md
@@ -11,7 +11,9 @@ toc: false
     <h3>Make it awesome</h3>
     <wa-select name="theme" label="Theme" value="default">
       <wa-option value="default">Default</wa-option>
+      <wa-option value="glassy">Glassy</wa-option>
       <wa-option value="mellow">Mellow</wa-option>
+      <wa-option value="playful">Playful</wa-option>
     </wa-select> 
     <wa-select name="heading-text" label="Heading" value="sans-serif">
       <wa-option value="serif">Serif</wa-option>
@@ -488,6 +490,7 @@ export function thing() {
   }
 
   #style-guide wa-card {
-    padding: var(--wa-space-xl);
+    padding-block: var(--wa-space-xl);
+    padding-inline: var(--wa-space-2xl);
   }
 </style>
diff --git a/src/themes/glassy.css b/src/themes/glassy.css
new file mode 100644
index 000000000..43ced9855
--- /dev/null
+++ b/src/themes/glassy.css
@@ -0,0 +1,493 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Quicksand:wght@100..900&display=swap');
+
+/* copied from depth.css */
+:root {
+  --wa-shadow-inset-highlight: inset 0 0.125rem 0 0 rgb(255 255 255 / 0.2);
+}
+
+wa-button:not([outline]) {
+  --shadow: var(--wa-shadow-inset-highlight), var(--wa-shadow-level-1);
+  --shadow: var(--wa-shadow-inset-highlight), var(--wa-shadow-level-2);
+}
+wa-button:active {
+  --wa-shadow-inset-highlight: inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.05);
+  --shadow: inset 0 0.125rem 0 0 rgb(0 0 0 / 0.2), var(--wa-shadow-inset-highlight);
+}
+wa-button[outline] {
+  --shadow: var(--wa-shadow-level-1);
+}
+wa-button[outline]:hover {
+  --shadow: var(--wa-shadow-level-2);
+}
+wa-button[outline]:active {
+  --shadow: inset 0 0.125rem 0 0 rgb(0 0 0 / 0.05), var(--wa-shadow-inset-highlight);
+}
+wa-button:not([variant='text']) {
+  transition: transform var(--wa-transition-faster);
+}
+wa-button:active:not([variant='text']) {
+  transform: translateY(var(--wa-shadow-offset-x-level-2));
+}
+
+wa-button[variant='brand'] {
+  --background: linear-gradient(var(--wa-color-brand-fill-vivid) 25%, var(--wa-color-brand-fill-vivid-alt));
+  --background-hover: linear-gradient(
+    color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover)) 25%,
+    color-mix(in oklab, var(--wa-color-brand-fill-vivid-alt), var(--wa-color-tint-hover))
+  );
+  --background-active: linear-gradient(
+    var(--wa-color-brand-fill-vivid-alt),
+    color-mix(in oklab, var(--wa-color-brand-fill-vivid-alt), var(--wa-color-tint-active))
+  );
+  --border-color: var(--wa-color-brand-fill-vivid)
+    color-mix(in oklab, var(--wa-color-brand-fill-vivid-alt), var(--wa-color-brand-fill-vivid))
+    var(--wa-color-brand-fill-vivid-alt);
+  --border-color-hover: var(--border-color);
+  --border-color-active: var(--wa-color-brand-fill-vivid-alt);
+}
+
+wa-button[variant='success'] {
+  --background: linear-gradient(var(--wa-color-success-fill-vivid) 25%, var(--wa-color-success-fill-vivid-alt));
+  --background-hover: linear-gradient(
+    color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-hover)) 25%,
+    color-mix(in oklab, var(--wa-color-success-fill-vivid-alt), var(--wa-color-tint-hover))
+  );
+  --background-active: linear-gradient(
+    var(--wa-color-success-fill-vivid-alt),
+    color-mix(in oklab, var(--wa-color-success-fill-vivid-alt), var(--wa-color-tint-active))
+  );
+  --border-color: var(--wa-color-success-fill-vivid)
+    color-mix(in oklab, var(--wa-color-success-fill-vivid-alt), var(--wa-color-success-fill-vivid))
+    var(--wa-color-success-fill-vivid-alt);
+  --border-color-hover: var(--border-color);
+  --border-color-active: var(--wa-color-success-fill-vivid-alt);
+}
+
+wa-button[variant='neutral'] {
+  --background: linear-gradient(var(--wa-color-neutral-fill-vivid) 25%, var(--wa-color-neutral-fill-vivid-alt));
+  --background-hover: linear-gradient(
+    color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover)) 25%,
+    color-mix(in oklab, var(--wa-color-neutral-fill-vivid-alt), var(--wa-color-tint-hover))
+  );
+  --background-active: linear-gradient(
+    var(--wa-color-neutral-fill-vivid-alt),
+    color-mix(in oklab, var(--wa-color-neutral-fill-vivid-alt), var(--wa-color-tint-active))
+  );
+  --border-color: var(--wa-color-neutral-fill-vivid)
+    color-mix(in oklab, var(--wa-color-neutral-fill-vivid-alt), var(--wa-color-neutral-fill-vivid))
+    var(--wa-color-neutral-fill-vivid-alt);
+  --border-color-hover: var(--border-color);
+  --border-color-active: var(--wa-color-neutral-fill-vivid-alt);
+}
+
+wa-button[variant='warning'] {
+  --background: linear-gradient(var(--wa-color-warning-fill-vivid) 25%, var(--wa-color-warning-fill-vivid-alt));
+  --background-hover: linear-gradient(
+    color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-hover)) 25%,
+    color-mix(in oklab, var(--wa-color-warning-fill-vivid-alt), var(--wa-color-tint-hover))
+  );
+  --background-active: linear-gradient(
+    var(--wa-color-warning-fill-vivid-alt),
+    color-mix(in oklab, var(--wa-color-warning-fill-vivid-alt), var(--wa-color-tint-active))
+  );
+  --border-color: var(--wa-color-warning-fill-vivid)
+    color-mix(in oklab, var(--wa-color-warning-fill-vivid-alt), var(--wa-color-warning-fill-vivid))
+    var(--wa-color-warning-fill-vivid-alt);
+  --border-color-hover: var(--border-color);
+  --border-color-active: var(--wa-color-warning-fill-vivid-alt);
+}
+
+wa-button[variant='danger'] {
+  --background: linear-gradient(var(--wa-color-danger-fill-vivid) 25%, var(--wa-color-danger-fill-vivid-alt));
+  --background-hover: linear-gradient(
+    color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-hover)) 25%,
+    color-mix(in oklab, var(--wa-color-danger-fill-vivid-alt), var(--wa-color-tint-hover))
+  );
+  --background-active: linear-gradient(
+    var(--wa-color-danger-fill-vivid-alt),
+    color-mix(in oklab, var(--wa-color-danger-fill-vivid-alt), var(--wa-color-tint-active))
+  );
+  --border-color: var(--wa-color-danger-fill-vivid)
+    color-mix(in oklab, var(--wa-color-danger-fill-vivid-alt), var(--wa-color-danger-fill-vivid))
+    var(--wa-color-danger-fill-vivid-alt);
+  --border-color-hover: var(--border-color);
+  --border-color-active: var(--wa-color-danger-fill-vivid-alt);
+}
+
+wa-button[variant='brand'][outline] {
+  --background-hover: linear-gradient(var(--wa-color-brand-fill-muted) 25%, var(--wa-color-brand-fill-muted-alt));
+  --background-active: linear-gradient(
+    color-mix(in oklab, var(--wa-color-brand-fill-muted), var(--wa-color-surface-default) 30%),
+    color-mix(in oklab, var(--wa-color-brand-fill-muted-alt), var(--wa-color-surface-default) 30%)
+  );
+  --border-color: var(--wa-color-brand-outline-vivid);
+  --border-color-hover: var(--border-color);
+  --border-color-active: var(--border-color);
+}
+
+wa-button[variant='success'][outline] {
+  --background-hover: linear-gradient(var(--wa-color-success-fill-muted) 25%, var(--wa-color-success-fill-muted-alt));
+  --background-active: linear-gradient(
+    color-mix(in oklab, var(--wa-color-success-fill-muted), var(--wa-color-surface-default) 30%),
+    color-mix(in oklab, var(--wa-color-success-fill-muted-alt), var(--wa-color-surface-default) 30%)
+  );
+  --border-color: var(--wa-color-success-outline-vivid);
+  --border-color-hover: var(--border-color);
+  --border-color-active: var(--border-color);
+}
+
+wa-button[variant='neutral'][outline] {
+  --background-hover: linear-gradient(var(--wa-color-neutral-fill-muted) 25%, var(--wa-color-neutral-fill-muted-alt));
+  --background-active: linear-gradient(
+    color-mix(in oklab, var(--wa-color-neutral-fill-muted), var(--wa-color-surface-default) 30%),
+    color-mix(in oklab, var(--wa-color-neutral-fill-muted-alt), var(--wa-color-surface-default) 30%)
+  );
+  --border-color: var(--wa-color-neutral-outline-vivid);
+  --border-color-hover: var(--border-color);
+  --border-color-active: var(--border-color);
+}
+
+wa-button[variant='warning'][outline] {
+  --background-hover: linear-gradient(var(--wa-color-warning-fill-muted) 25%, var(--wa-color-warning-fill-muted-alt));
+  --background-active: linear-gradient(
+    color-mix(in oklab, var(--wa-color-warning-fill-muted), var(--wa-color-surface-default) 25%),
+    color-mix(in oklab, var(--wa-color-warning-fill-muted-alt), var(--wa-color-surface-default) 25%)
+  );
+  --border-color: var(--wa-color-warning-outline-vivid);
+  --border-color-hover: var(--border-color);
+  --border-color-active: var(--border-color);
+}
+
+wa-button[variant='danger'][outline] {
+  --background-hover: linear-gradient(var(--wa-color-danger-fill-muted) 25%, var(--wa-color-danger-fill-muted-alt));
+  --background-active: linear-gradient(
+    color-mix(in oklab, var(--wa-color-danger-fill-muted), var(--wa-color-surface-default) 25%),
+    color-mix(in oklab, var(--wa-color-danger-fill-muted-alt), var(--wa-color-surface-default) 25%)
+  );
+  --border-color: var(--wa-color-danger-outline-vivid);
+  --border-color-hover: var(--border-color);
+  --border-color-active: var(--border-color);
+}
+
+:root,
+:host,
+.wa-theme-default {
+  color-scheme: light;
+
+  /**
+   * Primitives
+   */
+  --wa-color-red-95: #fbeff3;
+  --wa-color-red-90: #f6e0e7;
+  --wa-color-red-80: #ecbdcc;
+  --wa-color-red-70: #e39bb2;
+  --wa-color-red-60: #d87797;
+  --wa-color-red-50: #ca4570;
+  --wa-color-red-40: #b2003b;
+  --wa-color-red-30: #8e002f;
+  --wa-color-red-20: #6b0023;
+  --wa-color-red-10: #430016;
+
+  --wa-color-yellow-95: #f5f2e5;
+  --wa-color-yellow-90: #ece6cc;
+  --wa-color-yellow-80: #dac992;
+  --wa-color-yellow-70: #c9ac5c;
+  --wa-color-yellow-60: #b98f27;
+  --wa-color-yellow-50: #9b6d09;
+  --wa-color-yellow-40: #785007;
+  --wa-color-yellow-30: #613e06;
+  --wa-color-yellow-20: #492c05;
+  --wa-color-yellow-10: #2b1a02;
+
+  --wa-color-green-95: #ecf4f1;
+  --wa-color-green-90: #dae9e3;
+  --wa-color-green-80: #b0d1c4;
+  --wa-color-green-70: #88b9a6;
+  --wa-color-green-60: #5fa288;
+  --wa-color-green-50: #2d8462;
+  --wa-color-green-40: #00663e;
+  --wa-color-green-30: #005031;
+  --wa-color-green-20: #003b24;
+  --wa-color-green-10: #002316;
+
+  --wa-color-orchid-95: #f8eff8;
+  --wa-color-orchid-90: #f2e1f1;
+  --wa-color-orchid-80: #e2bee1;
+  --wa-color-orchid-70: #d49dd2;
+  --wa-color-orchid-60: #c57bc3;
+  --wa-color-orchid-50: #b14fae;
+  --wa-color-orchid-40: #9a1a96;
+  --wa-color-orchid-30: #7c0e79;
+  --wa-color-orchid-20: #5c0a5a;
+  --wa-color-orchid-10: #380637;
+
+  --wa-color-neutral-95: #f2f2f3;
+  --wa-color-neutral-90: #e6e5e8;
+  --wa-color-neutral-80: #cbc8ce;
+  --wa-color-neutral-70: #b1adb6;
+  --wa-color-neutral-60: #98939f;
+  --wa-color-neutral-50: #7a7382;
+  --wa-color-neutral-40: #5d5568;
+  --wa-color-neutral-30: #494352;
+  --wa-color-neutral-20: #35313c;
+  --wa-color-neutral-10: #1f1c23;
+
+  --wa-color-white: white;
+  --wa-color-black: black;
+
+  /**
+   * App
+   */
+  --wa-color-surface-raised: var(--wa-color-white);
+  --wa-color-surface-default: var(--wa-color-white);
+  --wa-color-surface-lowered: var(--wa-color-neutral-95);
+  --wa-color-surface-outline: var(--wa-color-neutral-90);
+
+  --wa-color-text-normal: var(--wa-color-neutral-10);
+  --wa-color-text-quiet: var(--wa-color-neutral-40);
+  --wa-color-text-inverse: var(--wa-color-white);
+  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+
+  --wa-color-selection-background: var(--wa-color-orchid-80);
+  --wa-color-selection-text: var(--wa-color-black);
+
+  --wa-color-focus: var(--wa-color-orchid-60); /* semantic variants? */
+
+  --wa-color-tint-white: rgb(255 255 255 / 0.2);
+  --wa-color-tint-black: rgb(0 0 0 / 0.2);
+
+  --wa-color-tint-hover: white 4%;
+  --wa-color-tint-active: black 16%;
+
+  --wa-color-overlay: color-mix(in oklab, var(--wa-color-neutral-10) 25%, transparent);
+
+  --wa-color-shadow: color-mix(in oklab, var(--wa-color-neutral-10) 20%, transparent);
+
+  /**
+   * Semantic color variants
+   */
+  /* TODO: Add comments for semantic color tokens and usage expectations */
+  /* CONSIDER: Change -alt naming to -tint or -shade? */
+  --wa-color-brand-fill-vivid: var(--wa-color-orchid-50);
+  --wa-color-brand-fill-vivid-alt: var(--wa-color-orchid-40);
+  --wa-color-brand-fill-muted: var(--wa-color-orchid-95);
+  --wa-color-brand-fill-muted-alt: var(--wa-color-orchid-90);
+  --wa-color-brand-outline-vivid: var(--wa-color-orchid-50);
+  --wa-color-brand-outline-vivid-alt: var(--wa-color-orchid-40);
+  --wa-color-brand-outline-muted: var(--wa-color-orchid-90);
+  --wa-color-brand-outline-muted-alt: var(--wa-color-orchid-80);
+  --wa-color-brand-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-brand-text-on-muted: var(--wa-color-orchid-40);
+  --wa-color-brand-text-on-surface: var(--wa-color-orchid-50);
+
+  --wa-color-success-fill-vivid: var(--wa-color-green-50);
+  --wa-color-success-fill-vivid-alt: var(--wa-color-green-40);
+  --wa-color-success-fill-muted: var(--wa-color-green-95);
+  --wa-color-success-fill-muted-alt: var(--wa-color-green-90);
+  --wa-color-success-outline-vivid: var(--wa-color-green-50);
+  --wa-color-success-outline-vivid-alt: var(--wa-color-green-40);
+  --wa-color-success-outline-muted: var(--wa-color-green-90);
+  --wa-color-success-outline-muted-alt: var(--wa-color-green-80);
+  --wa-color-success-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-success-text-on-muted: var(--wa-color-green-40);
+  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+
+  --wa-color-warning-fill-vivid: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-vivid-alt: var(--wa-color-yellow-40);
+  --wa-color-warning-fill-muted: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-muted-alt: var(--wa-color-yellow-90);
+  --wa-color-warning-outline-vivid: var(--wa-color-yellow-50);
+  --wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-40);
+  --wa-color-warning-outline-muted: var(--wa-color-yellow-90);
+  --wa-color-warning-outline-muted-alt: var(--wa-color-yellow-80);
+  --wa-color-warning-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-warning-text-on-muted: var(--wa-color-yellow-40);
+  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+
+  --wa-color-danger-fill-vivid: var(--wa-color-red-50);
+  --wa-color-danger-fill-vivid-alt: var(--wa-color-red-40);
+  --wa-color-danger-fill-muted: var(--wa-color-red-95);
+  --wa-color-danger-fill-muted-alt: var(--wa-color-red-90);
+  --wa-color-danger-outline-vivid: var(--wa-color-red-50);
+  --wa-color-danger-outline-vivid-alt: var(--wa-color-red-40);
+  --wa-color-danger-outline-muted: var(--wa-color-red-90);
+  --wa-color-danger-outline-muted-alt: var(--wa-color-red-80);
+  --wa-color-danger-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-danger-text-on-muted: var(--wa-color-red-40);
+  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+
+  --wa-color-neutral-fill-vivid: var(--wa-color-neutral-50);
+  --wa-color-neutral-fill-vivid-alt: var(--wa-color-neutral-40);
+  --wa-color-neutral-fill-muted: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-muted-alt: var(--wa-color-neutral-90);
+  --wa-color-neutral-outline-vivid: var(--wa-color-neutral-50);
+  --wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-40);
+  --wa-color-neutral-outline-muted: var(--wa-color-neutral-90);
+  --wa-color-neutral-outline-muted-alt: var(--wa-color-neutral-80);
+  --wa-color-neutral-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-neutral-text-on-muted: var(--wa-color-neutral-40);
+  --wa-color-neutral-text-on-surface: var(--wa-color-neutral-50);
+
+  /**
+   * Typography
+   */
+  --wa-font-family-heading: 'Quicksand', sans-serif;
+  --wa-font-family-body: 'Inter', sans-serif;
+  --wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  --wa-font-family-longform: 'Lora', serif;
+
+  --wa-font-weight-light: 300;
+  --wa-font-weight-normal: 400;
+  --wa-font-weight-medium: 500;
+  --wa-font-weight-heavy: 600;
+
+  --wa-font-weight-heading: var(--wa-font-weight-heavy);
+  --wa-font-weight-body: var(--wa-font-weight-normal);
+  --wa-font-weight-action: var(--wa-font-weight-medium);
+
+  --wa-font-size-root: 16px;
+  --wa-font-size-2xs: 0.625rem; /* 10 */
+  --wa-font-size-xs: 0.75rem; /* 12 */
+  --wa-font-size-s: 0.875rem; /* 14 */
+  --wa-font-size-m: 1rem; /* 16 */
+  --wa-font-size-l: 1.375rem; /* 22 */
+  --wa-font-size-xl: 1.875rem; /* 30 */
+  --wa-font-size-2xl: 2.625rem; /* 42 */
+
+  --wa-font-line-height-compact: 1.25;
+  --wa-font-line-height-regular: 1.625;
+  --wa-font-line-height-comfortable: 2;
+
+  /**
+   * Spacing
+   */
+  --wa-space-base: 1rem;
+  --wa-space-3xs: calc(var(--wa-space-base) * 0.125); /* 2 */
+  --wa-space-2xs: calc(var(--wa-space-base) * 0.25); /* 4 */
+  --wa-space-xs: calc(var(--wa-space-base) * 0.5); /* 8 */
+  --wa-space-s: calc(var(--wa-space-base) * 0.75); /* 12 */
+  --wa-space-m: var(--wa-space-base); /* 16 */
+  --wa-space-l: calc(var(--wa-space-base) * 1.25); /* 20 */
+  --wa-space-xl: calc(var(--wa-space-base) * 1.5); /* 24 */
+  --wa-space-2xl: calc(var(--wa-space-base) * 2); /* 32 */
+  --wa-space-3xl: calc(var(--wa-space-base) * 3); /* 48 */
+
+  --wa-space-square-xs: var(--wa-space-xs);
+  --wa-space-square-s: var(--wa-space-s);
+  --wa-space-square-m: var(--wa-space-m);
+  --wa-space-square-l: var(--wa-space-l);
+  --wa-space-square-xl: var(--wa-space-xl);
+
+  --wa-space-stretch-xs: var(--wa-space-xs) var(--wa-space-m);
+  --wa-space-stretch-s: var(--wa-space-s) var(--wa-space-l);
+  --wa-space-stretch-m: var(--wa-space-m) var(--wa-space-xl);
+  --wa-space-stretch-l: var(--wa-space-l) var(--wa-space-2xl);
+  --wa-space-stretch-xl: var(--wa-space-xl) var(--wa-space-3xl);
+
+  --wa-space-squish-xs: var(--wa-space-xs) var(--wa-space-3xs);
+  --wa-space-squish-s: var(--wa-space-s) var(--wa-space-2xs);
+  --wa-space-squish-m: var(--wa-space-m) var(--wa-space-xs);
+  --wa-space-squish-l: var(--wa-space-l) var(--wa-space-s);
+  --wa-space-squish-xl: var(--wa-space-xl) var(--wa-space-m);
+
+  /**
+   * Borders & corners
+   */
+  --wa-border-width-base: 0.0625rem; /* 1px */
+  --wa-border-width-thin: var(--wa-border-width-base);
+  --wa-border-width-medium: calc(var(--wa-border-width-base) * 2);
+  --wa-border-width-thick: calc(var(--wa-border-width-base) * 3);
+
+  --wa-border-style: solid;
+
+  --wa-corners-base: 0.375rem;
+  --wa-corners-half: calc(var(--wa-corners-base) * 0.5);
+  --wa-corners-1x: var(--wa-corners-base);
+  --wa-corners-2x: calc(var(--wa-corners-base) * 2);
+  --wa-corners-3x: calc(var(--wa-corners-base) * 3);
+
+  --wa-corners-pill: 9999px;
+  --wa-corners-circle: 50%;
+  --wa-corners-sharp: 0;
+
+  /**
+   * Focus
+   */
+  --wa-focus-ring: solid var(--wa-border-width-thick) var(--wa-color-focus);
+  --wa-focus-ring-offset: 0.0625rem; /* 1px */
+
+  /**
+   * Shadows
+   */
+  --wa-shadow-offset-x-inset: 0.0625rem;
+  --wa-shadow-offset-x-level-1: 0.125rem;
+  --wa-shadow-offset-x-level-2: 0.25rem;
+  --wa-shadow-offset-x-level-3: 0.5rem;
+
+  --wa-shadow-blur-base: 0.25rem;
+
+  --wa-shadow-inset: inset 0 var(--wa-shadow-offset-x-inset) calc(var(--wa-shadow-blur-base) * 0.5)
+    var(--wa-color-shadow);
+  --wa-shadow-level-0: none;
+  --wa-shadow-level-1: 0 var(--wa-shadow-offset-x-level-1) var(--wa-shadow-blur-base) var(--wa-color-shadow);
+  --wa-shadow-level-2: 0 var(--wa-shadow-offset-x-level-2) calc(var(--wa-shadow-blur-base) * 2)
+    color-mix(in oklab, var(--wa-color-shadow), transparent 20%);
+  --wa-shadow-level-3: 0 var(--wa-shadow-offset-x-level-3) calc(var(--wa-shadow-blur-base) * 4)
+    color-mix(in oklab, var(--wa-color-shadow), transparent 40%);
+
+  /**
+   * Z-index
+   */
+  --wa-z-index-drawer: 700;
+  --wa-z-index-dialog: 800;
+  --wa-z-index-dropdown: 900;
+  --wa-z-index-alert-group: 950;
+  --wa-z-index-tooltip: 1000;
+
+  /**
+   * Transitions
+   */
+  --wa-transition-normal: 275ms;
+  --wa-transition-fast: 175ms;
+  --wa-transition-faster: 75ms;
+
+  /**
+   * Form controls
+   */
+  --wa-form-controls-background: var(--wa-color-surface-raised);
+  --wa-form-controls-border-style: var(--wa-border-style);
+  --wa-form-controls-border-width: var(--wa-border-width-thin);
+  --wa-form-controls-corners: var(--wa-corners-1x);
+  --wa-form-controls-border-color-resting: var(--wa-color-neutral-outline-muted-alt);
+  --wa-form-controls-border-color-activated: var(--wa-color-brand-outline-vivid);
+  --wa-form-controls-text-color: var(--wa-color-text-normal);
+  --wa-form-controls-value-line-height: var(--wa-font-height-compact);
+  --wa-form-controls-padding: var(--wa-space-square-s);
+  --wa-form-controls-placeholder-color: var(--wa-color-neutral-60);
+
+  /**
+   * Panels
+   */
+  --wa-panel-border-width: var(--wa-border-width-thin);
+  --wa-panel-corners: var(--wa-corners-2x);
+
+  /**
+  * From 2.x
+  */
+  --wa-form-controls-height-s: 2rem;
+  --wa-form-controls-height-m: 2.75rem;
+  --wa-form-controls-height-l: 3.5rem;
+  --wa-form-control-toggle-size-s: 0.875rem;
+  --wa-form-control-toggle-size-m: 1.125rem;
+  --wa-form-control-toggle-size-l: 1.375rem;
+  --wa-form-controls-required-content: '*';
+  --wa-form-controls-required-content-color: inherit;
+  --wa-form-controls-required-content-offset: -0.1em;
+
+  --wa-overlay-color: hsl(240 3.8% 46.1% / 33%);
+
+  --wa-tooltip-arrow-size: 0.375rem;
+  --wa-flow-spacing: 1.5rem;
+}
+
+/* _utility.css */
diff --git a/src/themes/playful.css b/src/themes/playful.css
new file mode 100644
index 000000000..ad02104ca
--- /dev/null
+++ b/src/themes/playful.css
@@ -0,0 +1,359 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@300..700&family=Roboto+Slab:wght@300..700&display=swap');
+@import 'depth_flat.css';
+@import 'borders.css';
+
+/* copied from depth_flat.css */
+wa-button:not([variant='text']) {
+  --shadow: 0 var(--wa-shadow-offset-x-level-1) var(--wa-shadow-blur-base) var(--border-color);
+}
+wa-button:active:not([variant='text']) {
+  --shadow: none;
+  transform: translateY(var(--wa-shadow-offset-x-level-1));
+}
+
+/* copied from borders.css */
+wa-button:not([outline]) {
+  --border-color-hover: var(--border-color);
+  --border-color-active: var(--border-color);
+  --background-active: var(--border-color);
+}
+wa-button[variant='brand'] {
+  --border-color: var(--wa-color-brand-outline-vivid);
+}
+wa-button[variant='success'] {
+  --border-color: var(--wa-color-success-outline-vivid);
+}
+wa-button[variant='neutral'] {
+  --border-color: var(--wa-color-neutral-outline-vivid);
+}
+wa-button[variant='warning'] {
+  --border-color: var(--wa-color-warning-outline-vivid);
+}
+wa-button[variant='danger'] {
+  --border-color: var(--wa-color-danger-outline-vivid);
+}
+
+:root,
+:host,
+.wa-theme-default {
+  color-scheme: light;
+
+  /**
+   * Primitives
+   */
+  --wa-color-red-95: #fcf0ed;
+  --wa-color-red-90: #f8e0dc;
+  --wa-color-red-80: #f1beb4;
+  --wa-color-red-70: #ea9b8c;
+  --wa-color-red-60: #e27662;
+  --wa-color-red-50: #d63f23;
+  --wa-color-red-40: #a2301a;
+  --wa-color-red-30: #802615;
+  --wa-color-red-20: #5e1c0f;
+  --wa-color-red-10: #381109;
+
+  --wa-color-yellow-95: #fbf1da;
+  --wa-color-yellow-90: #f8e4b5;
+  --wa-color-yellow-80: #f0c45e;
+  --wa-color-yellow-70: #dfa525;
+  --wa-color-yellow-60: #bf8c20;
+  --wa-color-yellow-50: #986f19;
+  --wa-color-yellow-40: #725313;
+  --wa-color-yellow-30: #5a410f;
+  --wa-color-yellow-20: #422f0b;
+  --wa-color-yellow-10: #271c06;
+
+  --wa-color-green-95: #e9f5ee;
+  --wa-color-green-90: #d3ebdd;
+  --wa-color-green-80: #a1d5b5;
+  --wa-color-green-70: #70bf8e;
+  --wa-color-green-60: #3da866;
+  --wa-color-green-50: #008934;
+  --wa-color-green-40: #006727;
+  --wa-color-green-30: #00511f;
+  --wa-color-green-20: #003c17;
+  --wa-color-green-10: #00230e;
+
+  --wa-color-rose-95: #fdeff2;
+  --wa-color-rose-90: #fbdfe6;
+  --wa-color-rose-80: #f7b9c9;
+  --wa-color-rose-70: #f293ac;
+  --wa-color-rose-60: #ed698c;
+  --wa-color-rose-50: #e41e52;
+  --wa-color-rose-40: #ad173e;
+  --wa-color-rose-30: #891231;
+  --wa-color-rose-20: #660d25;
+  --wa-color-rose-10: #3e0816;
+
+  --wa-color-neutral-95: #f2f2f4;
+  --wa-color-neutral-90: #e5e5e9;
+  --wa-color-neutral-80: #c8c9d0;
+  --wa-color-neutral-70: #adaeb8;
+  --wa-color-neutral-60: #9394a1;
+  --wa-color-neutral-50: #737586;
+  --wa-color-neutral-40: #565864;
+  --wa-color-neutral-30: #44454f;
+  --wa-color-neutral-20: #313239;
+  --wa-color-neutral-10: #1d1d21;
+
+  --wa-color-white: white;
+  --wa-color-black: black;
+
+  /**
+   * App
+   */
+  --wa-color-surface-raised: var(--wa-color-white);
+  --wa-color-surface-default: var(--wa-color-white);
+  --wa-color-surface-lowered: repeating-linear-gradient(
+    45deg,
+    var(--wa-color-neutral-95),
+    var(--wa-color-neutral-95) 0.5rem,
+    color-mix(in oklab, var(--wa-color-neutral-95), var(--wa-color-white) 40%) 0.5rem,
+    color-mix(in oklab, var(--wa-color-neutral-95), var(--wa-color-white) 40%) 1rem
+  );
+  --wa-color-surface-outline: var(--wa-color-neutral-90);
+
+  --wa-color-text-normal: var(--wa-color-neutral-10);
+  --wa-color-text-quiet: var(--wa-color-neutral-40);
+  --wa-color-text-inverse: var(--wa-color-white);
+  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+
+  --wa-color-selection-background: var(--wa-color-rose-80);
+  --wa-color-selection-text: var(--wa-color-black);
+
+  --wa-color-focus: color-mix(in oklab, var(--wa-color-rose-60) 96%, transparent);
+
+  --wa-color-tint-white: rgb(255 255 255 / 0.2);
+  --wa-color-tint-black: rgb(0 0 0 / 0.1);
+
+  --wa-color-tint-hover: black 8%;
+  --wa-color-tint-active: black 16%;
+
+  --wa-color-overlay: color-mix(in oklab, var(--wa-color-neutral-10) 25%, transparent);
+
+  --wa-color-shadow: color-mix(in oklab, var(--wa-color-neutral-10) 8%, transparent);
+
+  /**
+   * Semantic color variants
+   */
+  --wa-color-brand-fill-vivid: var(--wa-color-rose-50);
+  --wa-color-brand-fill-vivid-alt: var(--wa-color-rose-40);
+  --wa-color-brand-fill-muted: var(--wa-color-rose-95);
+  --wa-color-brand-fill-muted-alt: var(--wa-color-rose-90);
+  --wa-color-brand-outline-vivid: var(--wa-color-rose-40);
+  --wa-color-brand-outline-vivid-alt: var(--wa-color-rose-30);
+  --wa-color-brand-outline-muted: var(--wa-color-rose-90);
+  --wa-color-brand-outline-muted-alt: var(--wa-color-rose-80);
+  --wa-color-brand-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-brand-text-on-muted: var(--wa-color-rose-40);
+  --wa-color-brand-text-on-surface: var(--wa-color-rose-50);
+
+  --wa-color-success-fill-vivid: var(--wa-color-green-50);
+  --wa-color-success-fill-vivid-alt: var(--wa-color-green-40);
+  --wa-color-success-fill-muted: var(--wa-color-green-95);
+  --wa-color-success-fill-muted-alt: var(--wa-color-green-90);
+  --wa-color-success-outline-vivid: var(--wa-color-green-40);
+  --wa-color-success-outline-vivid-alt: var(--wa-color-green-30);
+  --wa-color-success-outline-muted: var(--wa-color-green-90);
+  --wa-color-success-outline-muted-alt: var(--wa-color-green-80);
+  --wa-color-success-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-success-text-on-muted: var(--wa-color-green-40);
+  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+
+  --wa-color-warning-fill-vivid: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-vivid-alt: var(--wa-color-yellow-40);
+  --wa-color-warning-fill-muted: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-muted-alt: var(--wa-color-yellow-90);
+  --wa-color-warning-outline-vivid: var(--wa-color-yellow-40);
+  --wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-30);
+  --wa-color-warning-outline-muted: var(--wa-color-yellow-90);
+  --wa-color-warning-outline-muted-alt: var(--wa-color-yellow-80);
+  --wa-color-warning-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-warning-text-on-muted: var(--wa-color-yellow-40);
+  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+
+  --wa-color-danger-fill-vivid: var(--wa-color-red-50);
+  --wa-color-danger-fill-vivid-alt: var(--wa-color-red-40);
+  --wa-color-danger-fill-muted: var(--wa-color-red-95);
+  --wa-color-danger-fill-muted-alt: var(--wa-color-red-90);
+  --wa-color-danger-outline-vivid: var(--wa-color-red-40);
+  --wa-color-danger-outline-vivid-alt: var(--wa-color-red-30);
+  --wa-color-danger-outline-muted: var(--wa-color-red-90);
+  --wa-color-danger-outline-muted-alt: var(--wa-color-red-80);
+  --wa-color-danger-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-danger-text-on-muted: var(--wa-color-red-40);
+  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+
+  --wa-color-neutral-fill-vivid: var(--wa-color-neutral-50);
+  --wa-color-neutral-fill-vivid-alt: var(--wa-color-neutral-40);
+  --wa-color-neutral-fill-muted: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-muted-alt: var(--wa-color-neutral-90);
+  --wa-color-neutral-outline-vivid: var(--wa-color-neutral-40);
+  --wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-30);
+  --wa-color-neutral-outline-muted: var(--wa-color-neutral-90);
+  --wa-color-neutral-outline-muted-alt: var(--wa-color-neutral-80);
+  --wa-color-neutral-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-neutral-text-on-muted: var(--wa-color-neutral-40);
+  --wa-color-neutral-text-on-surface: var(--wa-color-neutral-50);
+
+  /**
+   * Typography
+   */
+  --wa-font-family-heading: 'Roboto Slab', sans-serif;
+  --wa-font-family-body: 'Roboto Flex', sans-serif;
+  --wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  --wa-font-family-longform: 'Lora', serif;
+
+  --wa-font-weight-light: 300;
+  --wa-font-weight-normal: 400;
+  --wa-font-weight-medium: 500;
+  --wa-font-weight-heavy: 600;
+
+  --wa-font-weight-heading: var(--wa-font-weight-heavy);
+  --wa-font-weight-body: var(--wa-font-weight-normal);
+  --wa-font-weight-action: var(--wa-font-weight-heavy);
+
+  --wa-font-size-root: 16px;
+  --wa-font-size-2xs: 0.625rem; /* 10 */
+  --wa-font-size-xs: 0.75rem; /* 12 */
+  --wa-font-size-s: 0.875rem; /* 14 */
+  --wa-font-size-m: 1rem; /* 16 */
+  --wa-font-size-l: 1.375rem; /* 22 */
+  --wa-font-size-xl: 1.875rem; /* 30 */
+  --wa-font-size-2xl: 2.625rem; /* 42 */
+
+  --wa-font-line-height-compact: 1.25;
+  --wa-font-line-height-regular: 1.625;
+  --wa-font-line-height-comfortable: 2;
+
+  /**
+   * Spacing
+   */
+  --wa-space-base: 1rem;
+  --wa-space-3xs: calc(var(--wa-space-base) * 0.125); /* 2 */
+  --wa-space-2xs: calc(var(--wa-space-base) * 0.25); /* 4 */
+  --wa-space-xs: calc(var(--wa-space-base) * 0.5); /* 8 */
+  --wa-space-s: calc(var(--wa-space-base) * 0.75); /* 12 */
+  --wa-space-m: var(--wa-space-base); /* 16 */
+  --wa-space-l: calc(var(--wa-space-base) * 1.25); /* 20 */
+  --wa-space-xl: calc(var(--wa-space-base) * 1.5); /* 24 */
+  --wa-space-2xl: calc(var(--wa-space-base) * 2); /* 32 */
+  --wa-space-3xl: calc(var(--wa-space-base) * 3); /* 48 */
+
+  --wa-space-square-xs: var(--wa-space-xs);
+  --wa-space-square-s: var(--wa-space-s);
+  --wa-space-square-m: var(--wa-space-m);
+  --wa-space-square-l: var(--wa-space-l);
+  --wa-space-square-xl: var(--wa-space-xl);
+
+  --wa-space-stretch-xs: var(--wa-space-xs) var(--wa-space-m);
+  --wa-space-stretch-s: var(--wa-space-s) var(--wa-space-l);
+  --wa-space-stretch-m: var(--wa-space-m) var(--wa-space-xl);
+  --wa-space-stretch-l: var(--wa-space-l) var(--wa-space-2xl);
+  --wa-space-stretch-xl: var(--wa-space-xl) var(--wa-space-3xl);
+
+  --wa-space-squish-xs: var(--wa-space-xs) var(--wa-space-3xs);
+  --wa-space-squish-s: var(--wa-space-s) var(--wa-space-2xs);
+  --wa-space-squish-m: var(--wa-space-m) var(--wa-space-xs);
+  --wa-space-squish-l: var(--wa-space-l) var(--wa-space-s);
+  --wa-space-squish-xl: var(--wa-space-xl) var(--wa-space-m);
+
+  /**
+   * Borders & corners
+   */
+  --wa-border-width-base: 0.125rem; /* 1px */
+  --wa-border-width-thin: var(--wa-border-width-base);
+  --wa-border-width-medium: calc(var(--wa-border-width-base) * 2);
+  --wa-border-width-thick: calc(var(--wa-border-width-base) * 3);
+
+  --wa-border-style: solid;
+
+  --wa-corners-base: 0.375rem;
+  --wa-corners-half: calc(var(--wa-corners-base) * 0.5);
+  --wa-corners-1x: var(--wa-corners-base);
+  --wa-corners-2x: calc(var(--wa-corners-base) * 2);
+  --wa-corners-3x: calc(var(--wa-corners-base) * 3);
+
+  --wa-corners-pill: 9999px;
+  --wa-corners-circle: 50%;
+  --wa-corners-sharp: 0;
+
+  /**
+   * Focus
+   */
+  --wa-focus-ring: solid var(--wa-border-width-medium) var(--wa-color-focus);
+  --wa-focus-ring-offset: 0.0625rem; /* 1px */
+
+  /**
+   * Shadows
+   */
+  --wa-shadow-offset-x-inset: 0.125rem; /* inset (optional) | offset-y | offset-x */
+  --wa-shadow-offset-x-level-1: 0.25rem;
+  --wa-shadow-offset-x-level-2: 0.375rem;
+  --wa-shadow-offset-x-level-3: 0.5rem;
+
+  --wa-shadow-blur-base: 0rem;
+
+  --wa-shadow-inset: inset 0 var(--wa-shadow-offset-x-inset) calc(var(--wa-shadow-blur-base) * 0.5)
+    var(--wa-color-shadow);
+  --wa-shadow-level-0: none;
+  --wa-shadow-level-1: 0 var(--wa-shadow-offset-x-level-1) var(--wa-shadow-blur-base) var(--wa-color-shadow);
+  --wa-shadow-level-2: 0 var(--wa-shadow-offset-x-level-2) calc(var(--wa-shadow-blur-base) * 2) var(--wa-color-shadow);
+  --wa-shadow-level-3: 0 var(--wa-shadow-offset-x-level-3) calc(var(--wa-shadow-blur-base) * 4) var(--wa-color-shadow);
+
+  /**
+   * Z-index
+   */
+  --wa-z-index-drawer: 700;
+  --wa-z-index-dialog: 800;
+  --wa-z-index-dropdown: 900;
+  --wa-z-index-alert-group: 950;
+  --wa-z-index-tooltip: 1000;
+
+  /**
+   * Transitions
+   */
+  --wa-transition-normal: 250ms;
+  --wa-transition-fast: 150ms;
+  --wa-transition-faster: 0ms;
+
+  /**
+   * Form controls
+   */
+  --wa-form-controls-background: var(--wa-color-surface-raised);
+  --wa-form-controls-border-style: var(--wa-border-style);
+  --wa-form-controls-border-width: var(--wa-border-width-thin);
+  --wa-form-controls-corners: var(--wa-corners-1x);
+  --wa-form-controls-border-color-resting: var(--wa-color-neutral-outline-muted-alt);
+  --wa-form-controls-border-color-activated: var(--wa-color-brand-outline-vivid);
+  --wa-form-controls-text-color: var(--wa-color-text-normal);
+  --wa-form-controls-value-line-height: var(--wa-font-height-compact);
+  --wa-form-controls-padding: var(--wa-space-square-s);
+  --wa-form-controls-placeholder-color: var(--wa-color-neutral-60);
+
+  /**
+   * Panels
+   */
+  --wa-panel-border-width: var(--wa-border-width-thin);
+  --wa-panel-corners: var(--wa-corners-2x);
+
+  /**
+  * From 2.x
+  */
+  --wa-form-controls-height-s: 2rem;
+  --wa-form-controls-height-m: 2.75rem;
+  --wa-form-controls-height-l: 3.5rem;
+  --wa-form-control-toggle-size-s: 0.875rem;
+  --wa-form-control-toggle-size-m: 1.125rem;
+  --wa-form-control-toggle-size-l: 1.375rem;
+  --wa-form-controls-required-content: '*';
+  --wa-form-controls-required-content-color: inherit;
+  --wa-form-controls-required-content-offset: -0.1em;
+
+  --wa-overlay-color: hsl(240 3.8% 46.1% / 33%);
+
+  --wa-tooltip-arrow-size: 0.375rem;
+  --wa-flow-spacing: 1.5rem;
+}
+
+/* _utility.css */