--wa-card-* CSS properties PoC

* Initial glassy theme progress

* Add fallback to slider thumb box shadow

* Remove redundant `wa-dark` styles and refactor shadows

* Rename to 'Glossy' since it fits the vibe better

docs/_includes/palette.njk

@@ -1,41 +0,0 @@
-<div class="color-palette">
-  <template shadowrootmode="open">
-    <link href="/assets/styles/docs.css" rel="stylesheet" />
-    <link id="theme" href="/dist/styles/themes/{{ themeId }}.css" rel="stylesheet" />
-    <link id="palette" href="/dist/styles/color/{{ palette }}.css" rel="stylesheet" />
-    <ul class="color-group">
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div>
-      </li>
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div>
-      </li>
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-success-fill-loud)"></div>
-      </li>
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div>
-      </li>
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div>
-      </li>
-    </ul>
-    <ul class="color-group">
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div>
-      </li>
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div>
-      </li>
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-success-fill-normal)"></div>
-      </li>
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div>
-      </li>
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div>
-      </li>
-    </ul>
-  </template>
-</div>

docs/_layouts/theme.njk

@@ -4,25 +4,8 @@
 
 {% extends '../_includes/base.njk' %}
 
-{% set themeId = page.fileSlug %}
-{% set palette = defaultPalette %}
-{% set palettes = ['default', 'classic', 'rudimentary', 'bright', 'anodized', 'elegant', 'vogue'] %}
-
 {% block header %}
-
-<iframe id="theme-demo" src='{{ page.url }}demo.html'></iframe>
-
-<p>
-  <wa-select label="Color palette:" value="{{ defaultPalette }}" id="palette-picker">
-  {% for p in palettes -%}
-    <wa-option value="{{ p }}">{{ p | capitalize }}</wa-option>
-  {%- endfor %}
-  </wa-select>
-  <script type="module" src="/docs/themes/palette-picker.js"></script>
-</p>
-{% include 'palette.njk' %}
-
-<br>
+<iframe src='{{ page.url }}demo.html'></iframe>
 {% endblock %}
 
 {% block afterContent %}

docs/assets/styles/docs.css

@@ -384,8 +384,7 @@ wa-page > main:has(> .index-grid) {
 .swatch {
   position: relative;
   background-color: transparent;
-  /* border-color: var(--wa-color-neutral-border-normal); */
-  border-color: transparent;
+  border-color: var(--wa-color-neutral-border-normal);
   border-style: var(--wa-border-style);
   border-width: var(--wa-border-width-s);
   border-radius: var(--wa-border-radius-m);
@@ -422,35 +421,6 @@ wa-page > main:has(> .index-grid) {
   }
 }
 
-.color-name {
-  font-weight: var(--wa-font-weight-semibold);
-  margin-block-end: var(--wa-space-2xs);
-}
-
-.color-group {
-  align-items: start;
-  display: flex;
-  flex-wrap: nowrap;
-  gap: 0.25em;
-
-  &:where(ul) {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  + * {
-    margin-block-start: var(--wa-space-xl);
-  }
-
-  + & {
-    margin-block-start: var(--wa-space-2xs);
-  }
-}
-.color-preview {
-  flex: 1 1 auto;
-}
-
 /* Layout Examples */
 .layout-example-boundary {
   border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);

docs/docs/experimental/themer.md

@@ -506,7 +506,7 @@ hasOutline: false
       <wa-option data-alpha="remove" value="playful">Playful</wa-option>
       <wa-option data-alpha="remove" value="brutalist">Brutalist</wa-option>
       <wa-option data-alpha="remove" value="tailspin">Tailspin</wa-option>
-      <wa-option data-alpha="remove" value="glassy">Glassy</wa-option>
+      <wa-option data-alpha="remove" value="glossy">Glossy</wa-option>
       <wa-option data-alpha="remove" value="active">Active</wa-option>
       <wa-option value="classic">Classic</wa-option>
     </wa-select>
@@ -886,7 +886,7 @@ hasOutline: false
       case 'active':
         colorPalette = 'rudimentary';
         break;
-      case 'glassy':
+      case 'glossy':
         colorPalette = 'elegant';
         break;
       case 'premium':
@@ -1049,7 +1049,7 @@ hasOutline: false
       case 'brutalist':
       case 'classic':
       case 'awesome':
-      case 'glassy':
+      case 'glossy':
       case 'active':
         assetFolder = themeSelect.value;
         break;
@@ -1259,7 +1259,7 @@ hasOutline: false
       case 'tailspin':
         presetLogoIcons = ['wind', 'feather', 'lemon', 'wind-turbine'];
         break;
-      case 'glassy':
+      case 'glossy':
         presetLogoIcons = ['raindrops', 'citrus-slice', 'lighthouse', 'kiwi-bird'];
         break;
       case 'active':

docs/docs/resources/changelog.md

@@ -17,6 +17,7 @@ During the alpha period, things might break! We take breaking changes very serio
 
 - Added `.wa-callout` utility class
 - Added new themes:
+  - Glossy
   - Premium
 
 ## 3.0.0-alpha.8

docs/docs/themes/demo.njk

@@ -17,7 +17,7 @@ eleventyComputed:
   document.getElementById('theme-stylesheet').href = '/dist/styles/themes/{{ theme.fileSlug }}.css';
 </script>
 
-<link id="theme" rel="stylesheet" href="/dist/styles/themes/{{ theme.fileSlug }}.css" />
+<link rel="stylesheet" href="/dist/styles/themes/{{ theme.fileSlug }}.css" />
 <link rel="stylesheet" href="/docs/themes/showcase.css" />
 
 {% set content %}

docs/docs/themes/glassy.md

@@ -1,8 +0,0 @@
----
-title: Glassy
-description: Smooth, sleek, and reflective.
-isPro: true
-tags: pro
-noAlpha: true
-defaultPalette: elegant
----

docs/docs/themes/glossy.md

@@ -0,0 +1,7 @@
+---
+title: Glossy
+description: Bustling with plenty of luster and shine.
+isPro: true
+tags: pro
+defaultPalette: elegant
+---

docs/docs/themes/palette-picker.js

@@ -1,18 +0,0 @@
-let palettePicker = document.getElementById('palette-picker');
-let paletteDisplay = palettePicker.parentNode.nextElementSibling;
-let themeDemo = document.getElementById('theme-demo');
-
-palettePicker.addEventListener('wa-change', function () {
-  let palette = palettePicker.value;
-  let paletteStylesheet = paletteDisplay.shadowRoot.getElementById('palette');
-  paletteStylesheet.href = paletteStylesheet.href.replace(/[a-z-]+.css/, palette + '.css');
-  let demoPaletteStylesheet = themeDemo.contentDocument.getElementById('palette');
-  let paletteUrl = `/dist/styles/color/${palette}.css`;
-
-  if (demoPaletteStylesheet) {
-    demoPaletteStylesheet.href = paletteUrl;
-  } else {
-    let themeStylesheet = themeDemo.contentDocument.getElementById('theme');
-    themeStylesheet.insertAdjacentHTML('afterend', `<link id="palette" rel="stylesheet" href="${paletteUrl}">`);
-  }
-});

docs/docs/tokens/color.md

@@ -6,6 +6,30 @@ description: Ensure consistent use of color and readable contrast with Web Aweso
 <style>
   td { vertical-align: middle; }
 
+  .color-name {
+    font-weight: var(--wa-font-weight-semibold);
+    margin-block-end: var(--wa-space-2xs);
+  }
+  ul.color-group {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .color-group {
+    align-items: start;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 0.25em;
+  }
+  .color-group + * {
+    margin-block-start: var(--wa-space-xl);
+  }
+  .color-preview {
+    flex: 1 1 auto;
+  }
+  .swatch {
+    border-color: transparent;
+  }
   .color-mix-example {
     background-image:
       linear-gradient(to right,

scripts/build.js

@@ -126,7 +126,9 @@ async function generateStyles() {
         file.includes('themes/default') ||
         file.includes('themes/awesome') ||
         file.includes('themes/active') ||
+        file.includes('themes/glossy') ||
         file.includes('themes/mellow') ||
+        file.includes('themes/premium') ||
         file.includes('themes/tailspin') ||
         file.includes('themes/brutalist')
       ) {

src/components/card/card.css

@@ -1,29 +1,36 @@
 :host {
   --spacing: var(--wa-space-xl);
+  --border-width: var(--wa-card-border-width, var(--wa-panel-border-width));
+  --border-radius: var(--wa-card-border-radius, var(--wa-panel-border-radius));
+
+  --inner-border-radius: calc(var(--border-radius) - var(--border-width));
 
   display: flex;
   flex-direction: column;
-  background-color: var(--wa-color-surface-default);
-  border-color: var(--wa-color-surface-border);
-  border-radius: var(--wa-panel-border-radius);
+  background-color: var(--wa-card-background-color, var(--wa-color-surface-default));
+  border-color: var(--wa-card-border-color, var(--wa-color-surface-border));
+  border-radius: var(--border-radius);
   border-style: var(--wa-panel-border-style);
-  border-width: var(--wa-panel-border-width);
-  box-shadow: var(--wa-shadow-s);
+  border-width: var(--border-width);
+  box-shadow: var(--wa-card-shadow, var(--wa-shadow-s));
   color: var(--wa-color-text-normal);
 }
 
+.image,
+:host(:not([with-image])) .header {
+  border-start-start-radius: var(--inner-border-radius);
+  border-start-end-radius: var(--inner-border-radius);
+}
+
 .image {
   display: flex;
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-  margin: calc(-1 * var(--border-width));
-  overflow: hidden;
+  background-color: var(--wa-card-image-background-color, transparent);
 
   &::slotted(img) {
     display: block;
     width: 100%;
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
+    border-start-start-radius: inherit !important;
+    border-start-end-radius: inherit !important;
   }
 }
 
@@ -31,11 +38,7 @@
   display: block;
   border-bottom: inherit;
   padding: calc(var(--spacing) / 2) var(--spacing);
-}
-
-:host(:not([with-image])) .header {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
+  background-color: var(--wa-card-header-background-color, transparent);
 }
 
 .body {
@@ -46,9 +49,10 @@
 .footer {
   display: block;
   border-top: inherit;
-  border-bottom-left-radius: inherit;
-  border-bottom-right-radius: inherit;
+  border-end-start-radius: var(--inner-border-radius);
+  border-end-end-radius: var(--inner-border-radius);
   padding: var(--spacing);
+  background-color: var(--wa-card-footer-background-color, transparent);
 }
 
 :host(:not([with-header])) .header,

src/components/card/card.ts

@@ -19,7 +19,17 @@ import styles from './card.css';
  * @csspart body - The container that wraps the card's main content.
  * @csspart footer - The container that wraps the card's footer.
  *
+ * @cssproperty --border-radius - The radius for the card's corners. Expects a single value. Defaults to `var(--wa-panel-border-radius)`.
+ * @cssproperty --border-width - The width of the card's borders. Expects a single value. Defaults to `var(--wa-panel-border-width)`.
  * @cssproperty --spacing - The amount of space around and between sections of the card. Expects a single value.
+ * @cssproperty --wa-card-border-radius - The default radius for all cards, typically set on an ancestor element (e.g. by a theme). Expects a single value.
+ * @cssproperty --wa-card-border-color - The default border color for all cards, typically set on an ancestor element (e.g. by a theme). Expects a single color.
+ * @cssproperty --wa-card-border-width - The default border width for all cards, typically set on an ancestor element (e.g. by a theme). Expects a single value.
+ * @cssproperty --wa-card-background-color - The default background color for all cards, typically set on an ancestor element (e.g. by a theme).
+ * @cssproperty --wa-card-shadow - The default shadow for all cards, typically set on an ancestor element (e.g. by a theme).
+ * @cssproperty --wa-card-header-background-color - The default background color for card headers, typically set on an ancestor element (e.g. by a theme).
+ * @cssproperty --wa-card-footer-background-color - The default background color for card footers, typically set on an ancestor element (e.g. by a theme).
+ * @cssproperty --wa-card-image-background-color - The default background color for card images, typically set on an ancestor element (e.g. by a theme).
  */
 @customElement('wa-card')
 export default class WaCard extends WebAwesomeElement {

src/styles/native/slider.css

@@ -96,7 +96,7 @@ input[type='range'] {
     border-radius: 50%;
     background-color: var(--thumb-color);
     box-shadow:
-      var(--thumb-shadow),
+      var(--thumb-shadow, 0 0 transparent),
       0 0 0 var(--thumb-gap) var(--wa-color-surface-default);
     transition-property: background-color, border-color, box-shadow, color;
     transition-duration: var(--wa-transition-normal);

src/styles/themes/glassy.css

@@ -1,206 +0,0 @@
-@import url('../color/elegant.css');
-@import url('default/color.css');
-@import url('default/space.css');
-@import url('default/outlines.css');
-@import url('default/typography.css');
-@import url('default/rounding.css');
-@import url('default/shadows.css');
-@import url('default/transitions.css');
-@import url('default/groups.css');
-
-:where(:root),
-:host,
-.wa-theme-glassy,
-.wa-light,
-.wa-dark .wa-invert {
-  color-scheme: light;
-  color: var(--wa-color-text-normal);
-
-  /**
-   * Semantic Colors
-   */
-  --wa-color-brand-fill-quiet: var(--wa-color-teal-95);
-  --wa-color-brand-fill-normal: var(--wa-color-teal-90);
-  --wa-color-brand-fill-loud: var(--wa-color-teal-50);
-  --wa-color-brand-border-quiet: var(--wa-color-teal-90);
-  --wa-color-brand-border-normal: var(--wa-color-teal-80);
-  --wa-color-brand-border-loud: var(--wa-color-teal-60);
-  --wa-color-brand-on-quiet: var(--wa-color-teal-40);
-  --wa-color-brand-on-normal: var(--wa-color-teal-30);
-  --wa-color-brand-on-loud: white;
-
-  /**
-   * Shadows
-   */
-  --wa-shadow-blur-scale: 3;
-}
-
-.wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
-  color-scheme: dark;
-  color: var(--wa-color-text-normal);
-
-  /**
-   * Foundational Colors
-   */
-  --wa-color-surface-raised: var(--wa-color-gray-10);
-  --wa-color-surface-default: var(--wa-color-gray-05);
-  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
-  --wa-color-surface-border: var(--wa-color-gray-20);
-
-  --wa-color-text-normal: var(--wa-color-gray-95);
-  --wa-color-text-quiet: var(--wa-color-gray-60);
-  --wa-color-text-link: var(--wa-color-teal-70);
-
-  --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
-
-  --wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
-
-  --wa-color-focus: var(--wa-color-teal-60);
-
-  --wa-color-mix-hover: black 8%;
-  --wa-color-mix-active: black 16%;
-
-  /**
-   * Semantic Colors
-   */
-  --wa-color-brand-fill-quiet: var(--wa-color-teal-10);
-  --wa-color-brand-fill-normal: var(--wa-color-teal-20);
-  --wa-color-brand-fill-loud: var(--wa-color-teal-50);
-  --wa-color-brand-border-quiet: var(--wa-color-teal-20);
-  --wa-color-brand-border-normal: var(--wa-color-teal-30);
-  --wa-color-brand-border-loud: var(--wa-color-teal-40);
-  --wa-color-brand-on-quiet: var(--wa-color-teal-60);
-  --wa-color-brand-on-normal: var(--wa-color-teal-70);
-  --wa-color-brand-on-loud: white;
-
-  --wa-color-success-fill-quiet: var(--wa-color-green-10);
-  --wa-color-success-fill-normal: var(--wa-color-green-20);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-20);
-  --wa-color-success-border-normal: var(--wa-color-green-30);
-  --wa-color-success-border-loud: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-60);
-  --wa-color-success-on-normal: var(--wa-color-green-70);
-  --wa-color-success-on-loud: white;
-
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-40);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-60);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
-  --wa-color-warning-on-loud: white;
-
-  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
-  --wa-color-danger-fill-normal: var(--wa-color-red-20);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-20);
-  --wa-color-danger-border-normal: var(--wa-color-red-30);
-  --wa-color-danger-border-loud: var(--wa-color-red-40);
-  --wa-color-danger-on-quiet: var(--wa-color-red-60);
-  --wa-color-danger-on-normal: var(--wa-color-red-70);
-  --wa-color-danger-on-loud: white;
-
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-90);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-40);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-60);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-05);
-}
-
-/**
- * Component Styles
- */
-:where(:root),
-:host,
-.wa-theme-glassy {
-  wa-button:not([appearance='plain']) {
-    box-shadow:
-      inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
-      inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
-      inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
-      var(--wa-shadow-s) /* outer shadow */;
-
-    margin-bottom: var(--wa-shadow-offset-y-s);
-    transition: transform var(--wa-transition-fast);
-
-    &:not([disabled]) {
-      &:hover {
-        box-shadow:
-          inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-          inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
-          inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
-          inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-          inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */,
-          var(--wa-shadow-m) /* outer shadow */;
-      }
-
-      &:active {
-        box-shadow:
-          inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
-          inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
-          inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
-          inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-          inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */,
-          0 0 0 0 transparent /* outer shadow */;
-
-        transform: translateY(var(--wa-shadow-offset-y-s));
-      }
-    }
-  }
-
-  wa-checkbox,
-  wa-input:not(:focus),
-  wa-radio,
-  wa-select {
-    --box-shadow: inset var(--wa-shadow-s), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
-      inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
-  }
-
-  wa-checkbox:state(checked),
-  wa-radio:state(checked) {
-    --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
-      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
-  }
-
-  wa-textarea:not(:focus) {
-    &:not([appearance='filled']):not([disabled]) {
-      --box-shadow: var(--wa-shadow-s);
-    }
-  }
-
-  wa-switch {
-    --box-shadow: inset var(--wa-shadow-s);
-    --thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
-      inset 0 calc(var(--height) * 0.25) 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
-      inset 0 calc(var(--height) * -0.25) 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
-  }
-
-  wa-progress-bar {
-    box-shadow: inset var(--wa-shadow-s);
-
-    &::part(indicator) {
-      box-shadow:
-        inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-        inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
-        inset 0 0.625rem 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
-        inset 0 -0.5rem 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-        inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
-        var(--wa-shadow-s) /* outer shadow */;
-    }
-  }
-}

src/styles/themes/glossy.css

@@ -0,0 +1,229 @@
+@import url('../color/elegant.css');
+@import url('default/color.css');
+@import url('default/space.css');
+@import url('default/outlines.css');
+@import url('default/typography.css');
+@import url('default/rounding.css');
+@import url('default/shadows.css');
+@import url('default/transitions.css');
+@import url('default/groups.css');
+@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
+
+:where(:root),
+:host,
+.wa-theme-glossy,
+.wa-light,
+.wa-dark .wa-invert {
+  color-scheme: light;
+  color: var(--wa-color-text-normal);
+
+  /**
+   * Foundational Colors
+   */
+  --wa-color-text-link: var(--wa-color-indigo-40);
+
+  --wa-color-focus: var(--wa-color-indigo-60);
+
+  /**
+   * Semantic Colors
+   */
+  --wa-color-brand-fill-quiet: var(--wa-color-indigo-95);
+  --wa-color-brand-fill-normal: var(--wa-color-indigo-90);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
+  --wa-color-brand-border-quiet: var(--wa-color-indigo-90);
+  --wa-color-brand-border-normal: var(--wa-color-indigo-80);
+  --wa-color-brand-border-loud: var(--wa-color-indigo-60);
+  --wa-color-brand-on-quiet: var(--wa-color-indigo-40);
+  --wa-color-brand-on-normal: var(--wa-color-indigo-30);
+  --wa-color-brand-on-loud: white;
+
+  --wa-color-success-fill-loud: var(--wa-color-green-40);
+
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
+
+  --wa-color-danger-fill-loud: var(--wa-color-red-40);
+
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-10);
+
+  /**
+   * Typography
+   */
+  --wa-font-family-body: 'Figtree', sans-serif;
+  --wa-font-family-heading: var(--wa-font-family-body);
+  --wa-font-family-code: ui-monospace, monospace;
+  --wa-font-family-longform: ui-serif, serif;
+
+  --wa-font-weight-light: 300;
+  --wa-font-weight-normal: 400;
+  --wa-font-weight-semibold: 600;
+  --wa-font-weight-bold: 800;
+
+  --wa-line-height-condensed: 1.35;
+  --wa-line-height-normal: 1.8;
+  --wa-line-height-expanded: 2.25;
+
+  /**
+   * Spacing
+   */
+  --wa-space-scale: 1.125;
+
+  /**
+   * Rounding
+   */
+  --wa-border-radius-scale: 1.33;
+
+  /**
+   * Shadows
+   */
+  --wa-shadow-blur-scale: 3;
+}
+
+.wa-dark,
+.wa-invert,
+:is(:host-context(.wa-dark)) {
+  color-scheme: dark;
+  color: var(--wa-color-text-normal);
+
+  /**
+   * Foundational Colors
+   */
+  --wa-color-text-link: var(--wa-color-indigo-70);
+
+  --wa-color-focus: var(--wa-color-indigo-60);
+
+  /**
+   * Semantic Colors
+   */
+  --wa-color-brand-fill-quiet: var(--wa-color-indigo-10);
+  --wa-color-brand-fill-normal: var(--wa-color-indigo-20);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
+  --wa-color-brand-border-quiet: var(--wa-color-indigo-20);
+  --wa-color-brand-border-normal: var(--wa-color-indigo-30);
+  --wa-color-brand-border-loud: var(--wa-color-indigo-40);
+  --wa-color-brand-on-quiet: var(--wa-color-indigo-60);
+  --wa-color-brand-on-normal: var(--wa-color-indigo-70);
+  --wa-color-brand-on-loud: white;
+
+  --wa-color-success-fill-loud: var(--wa-color-green-40);
+
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
+
+  --wa-color-danger-fill-loud: var(--wa-color-red-40);
+}
+
+/**
+ * Component Styles
+ */
+:where(:root),
+:host,
+.wa-theme-glossy {
+  --wa-theme-glossy-inner-shine: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.4);
+  --wa-theme-glossy-top-highlight: inset 0 0.125rem 0 0 rgb(255 255 255 / 0.2);
+  --wa-theme-glossy-upper-tint: inset 0 1.25em 0 0 rgb(255 255 255 / 0.1);
+  --wa-theme-glossy-lower-shade: inset 0 -1.125em 0 0 rgb(0 0 0 / 0.03);
+  --wa-theme-glossy-bottom-shadow: inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.15);
+
+  --wa-theme-glossy-inner-shine-active: inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1);
+  --wa-theme-glossy-top-highlight-active: inset 0 0.125rem 0 0 rgb(0 0 0 / 0.04);
+  --wa-theme-glossy-upper-tint-active: inset 0 1.25em 0 0 rgb(0 0 0 / 0.04);
+  --wa-theme-glossy-lower-shade-active: inset 0 -1.125em 0 0 rgb(0 0 0 / 0.02);
+  --wa-theme-glossy-bottom-shadow-active: inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04);
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    letter-spacing: -0.02em;
+  }
+  :is(
+      button,
+      input:where([type='button'], [type='reset'], [type='submit']),
+      wa-button,
+      wa-radio-button,
+      .wa-button
+    ):not([appearance='plain'], .wa-plain) {
+    box-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
+      var(--wa-theme-glossy-upper-tint), var(--wa-theme-glossy-lower-shade), var(--wa-theme-glossy-bottom-shadow);
+
+    margin-bottom: var(--wa-shadow-offset-y-s);
+    transition: all var(--wa-transition-fast);
+
+    &:not([disabled]):active {
+      box-shadow: var(--wa-theme-glossy-inner-shine-active), var(--wa-theme-glossy-top-highlight-active),
+        var(--wa-theme-glossy-upper-tint-active), var(--wa-theme-glossy-lower-shade-active),
+        var(--wa-theme-glossy-bottom-shadow-active);
+
+      transform: scale(0.98);
+    }
+  }
+
+  input:where(
+      :not(
+        [type='button'],
+        [type='checkbox'],
+        [type='color'],
+        [type='file'],
+        [type='hidden'],
+        [type='image'],
+        [type='radio'],
+        [type='range'],
+        [type='reset'],
+        [type='submit']
+      )
+    ),
+  select,
+  textarea,
+  wa-input,
+  wa-select,
+  wa-textarea,
+  .wa-text-field {
+    --box-shadow: var(--wa-theme-glossy-upper-tint), var(--wa-theme-glossy-lower-shade);
+    transition: all var(--wa-transition-fast);
+
+    &:focus {
+      --box-shadow: 0 0 transparent, 0 0 transparent;
+    }
+  }
+
+  input:is([type='checkbox'], [type='radio']):is(:checked, :indeterminate),
+  wa-checkbox:is(:state(checked), :state(indeterminate)),
+  wa-radio:state(checked) {
+    --box-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
+      var(--wa-theme-glossy-bottom-shadow);
+
+    &:active {
+      --box-shadow: var(--wa-theme-glossy-inner-shine-active), var(--wa-theme-glossy-top-highlight-active),
+        var(--wa-theme-glossy-bottom-shadow-active);
+    }
+  }
+
+  input[type='radio'],
+  wa-radio {
+    --background-color-checked: var(--border-color-checked);
+    --checked-icon-color: var(--wa-color-surface-default);
+    --checked-icon-scale: 0.4;
+  }
+
+  input[type='range'],
+  wa-slider,
+  wa-switch {
+    --thumb-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
+      var(--wa-theme-glossy-bottom-shadow);
+  }
+
+  progress,
+  wa-progress-bar {
+    box-shadow: inset var(--wa-shadow-s);
+
+    &::part(indicator) {
+      box-shadow:
+        var(--wa-theme-glossy-inner-shine),
+        var(--wa-theme-glossy-top-highlight),
+        inset 0 0.625rem 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
+        inset 0 -0.5rem 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+        var(--wa-theme-glossy-bottom-shadow);
+    }
+  }
+}