From b4c45b480b6a49c279b5d4979c19169f5ed22ae8 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 31 Aug 2023 12:06:32 -0400
Subject: [PATCH] update docs and theme tokens to use wa

---
 docs/_includes/default.njk           |  44 +--
 docs/_includes/sidebar.njk           |  10 +-
 docs/_includes/workmark.njk          |   7 +
 docs/assets/images/logo.svg          |   2 +-
 docs/assets/images/wordmark.svg      |   2 +-
 docs/assets/scripts/code-previews.js |   8 +-
 docs/assets/scripts/docs.js          |  66 ----
 docs/assets/styles/code-previews.css |  62 ++--
 docs/assets/styles/docs.css          | 493 +++++++++----------------
 docs/assets/styles/search.css        |  53 ++-
 docs/pages/experimental/themer.md    |   7 +
 docs/pages/index.md                  |   2 +-
 docs/pages/tokens/border-radius.md   |  18 -
 docs/pages/tokens/borders.md         |  37 ++
 docs/pages/tokens/color.md           | 477 ++++--------------------
 docs/pages/tokens/elevation.md       |  17 -
 docs/pages/tokens/more.md            | 165 +--------
 docs/pages/tokens/shadows.md         |  16 +
 docs/pages/tokens/spacing.md         |  59 ++-
 docs/pages/tokens/transition.md      |  12 +-
 docs/pages/tokens/typography.md      |  68 ++--
 docs/pages/tokens/z-index.md         |  10 +-
 src/internal/scroll.ts               |   4 +-
 src/themes/_utility.css              |   2 +-
 src/themes/dark.css                  | 531 ---------------------------
 src/themes/default.css               | 273 ++++++++++++++
 src/themes/light.css                 | 531 ---------------------------
 27 files changed, 773 insertions(+), 2203 deletions(-)
 create mode 100644 docs/_includes/workmark.njk
 create mode 100644 docs/pages/experimental/themer.md
 delete mode 100644 docs/pages/tokens/border-radius.md
 create mode 100644 docs/pages/tokens/borders.md
 delete mode 100644 docs/pages/tokens/elevation.md
 create mode 100644 docs/pages/tokens/shadows.md
 delete mode 100644 src/themes/dark.css
 create mode 100644 src/themes/default.css
 delete mode 100644 src/themes/light.css

diff --git a/docs/_includes/default.njk b/docs/_includes/default.njk
index e8c883ba9..d9754194a 100644
--- a/docs/_includes/default.njk
+++ b/docs/_includes/default.njk
@@ -34,18 +34,13 @@
     <meta property="og:image" content="{{ assetUrl(meta.image, true) }}" />
 
     {# Shoelace #}
-    <link rel="stylesheet" href="/dist/themes/light.css" />
-    <link rel="stylesheet" href="/dist/themes/dark.css" />
+    <link rel="stylesheet" href="/dist/themes/default.css" />
     <script type="module" src="/dist/shoelace-autoloader.js"></script>
 
-    {# Set the initial theme and menu states here to prevent flashing #}
-    <script>
-      (() => {
-        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const theme = localStorage.getItem('theme') || 'auto';
-        document.documentElement.classList.toggle('sl-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
-      })();
-    </script>
+    {# Web Fonts #}
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Noto+Sans+Mono&display=swap" rel="stylesheet">
 
     {# Turbo + Scroll positioning #}
     <script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>
@@ -68,37 +63,10 @@
       </svg>
     </button>
 
-    {# Icon toolbar #}
-    <div id="icon-toolbar">
-      {# GitHub #}
-      <a href="https://github.com/shoelace-style/shoelace" title="View Shoelace on GitHub">
-        <sl-icon name="github"></sl-icon>
-      </a>
-
-      {# Twitter #}
-      <a href="https://twitter.com/shoelace_style" title="Follow Shoelace on Twitter">
-        <sl-icon name="twitter"></sl-icon>
-      </a>
-
-      {# Theme selector #}
-      <sl-dropdown id="theme-selector" placement="bottom-end" distance="3">
-        <sl-button slot="trigger" size="small" variant="text" caret title="Press \ to toggle">
-          <sl-icon class="only-light" name="sun-fill"></sl-icon>
-          <sl-icon class="only-dark" name="moon-fill"></sl-icon>
-        </sl-button>
-        <sl-menu>
-          <sl-menu-item type="checkbox" value="light">Light</sl-menu-item>
-          <sl-menu-item type="checkbox" value="dark">Dark</sl-menu-item>
-          <sl-divider></sl-divider>
-          <sl-menu-item type="checkbox" value="auto">System</sl-menu-item>
-        </sl-menu>
-      </sl-dropdown>
-    </div>
-
     <aside id="sidebar" data-preserve-scroll>
       <header>
         <a href="/">
-          <img src="{{ assetUrl('images/wordmark.svg') }}" alt="Shoelace" />
+          {% include 'workmark.njk' %}
         </a>
         <div class="sidebar-version">
           {{ meta.version }}
diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk
index ed4a67109..b01d398b4 100644
--- a/docs/_includes/sidebar.njk
+++ b/docs/_includes/sidebar.njk
@@ -1,4 +1,10 @@
 <ul>
+  <li>
+    <h2>Experimental</h2>
+    <ul>
+      <li><a href="/experimental/themer">Themer</a></li>
+    </ul>
+  </li>
   <li>
     <h2>Getting Started</h2>
     <ul>
@@ -47,8 +53,8 @@
       <li><a href="/tokens/typography">Typography</a></li>
       <li><a href="/tokens/color">Color</a></li>
       <li><a href="/tokens/spacing">Spacing</a></li>
-      <li><a href="/tokens/elevation">Elevation</a></li>
-      <li><a href="/tokens/border-radius">Border Radius</a></li>
+      <li><a href="/tokens/borders">Borders</a></li>
+      <li><a href="/tokens/shadows">Shadows</a></li>
       <li><a href="/tokens/transition">Transition</a></li>
       <li><a href="/tokens/z-index">Z-index</a></li>
       <li><a href="/tokens/more">More Tokens</a></li>
diff --git a/docs/_includes/workmark.njk b/docs/_includes/workmark.njk
new file mode 100644
index 000000000..a69d30cd5
--- /dev/null
+++ b/docs/_includes/workmark.njk
@@ -0,0 +1,7 @@
+<svg class="wordmark" viewBox="0 0 516 154" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g fill-rule="nonzero" fill="currentColor">
+      <path d="M374.875,66.088 C375.012,65.987 375.153,65.896 375.3,65.813 C376.033,65.347 376.783,65.113 377.55,65.113 C378.35,65.113 379.166,65.446 380,66.113 C381.233,67.113 381.85,68.413 381.85,70.013 L381.85,70.563 C381.794,71.119 381.695,71.752 381.55,72.463 C381.261,73.907 380.794,75.673 380.15,77.763 L377.85,84.863 C375.317,94.13 373.951,101.513 373.75,107.013 L373.75,108.163 C373.75,111.362 374.116,113.812 374.85,115.513 C375.002,115.884 375.185,116.209 375.4,116.488 C376.03,117.331 376.93,117.789 378.1,117.863 L378.4,117.863 C379.468,117.863 380.56,117.572 381.675,116.988 C382.553,116.522 383.445,115.881 384.35,115.063 C385.05,114.397 385.883,113.48 386.85,112.313 L388.9,109.563 C390.534,107.363 392.217,104.763 393.951,101.763 L398.65,93.663 C398.717,93.562 398.784,93.463 398.85,93.362 C399.083,92.529 399.35,91.713 399.65,90.913 C401.751,85.18 404.633,80.213 408.3,76.013 C410.656,73.35 413.206,71.158 415.95,69.438 C417.976,68.173 420.11,67.165 422.349,66.413 C424.849,65.646 427.2,65.263 429.399,65.263 C432.233,65.263 434.899,65.88 437.399,67.113 C442.2,69.513 444.916,73.53 445.549,79.163 L445.549,79.763 L445.549,79.888 C445.523,80.862 445.172,81.654 444.499,82.263 C444.182,82.58 443.807,82.822 443.374,82.988 C442.887,83.172 442.328,83.263 441.699,83.263 C440.499,83.263 439.466,82.913 438.598,82.213 C437.631,81.446 437.081,80.43 436.949,79.163 C436.716,76.83 435.466,75.263 433.199,74.463 C432.098,74.063 430.898,73.863 429.598,73.863 C428.732,73.863 427.765,73.963 426.699,74.163 C424.532,74.622 422.448,75.489 420.449,76.763 C418.229,78.18 416.113,80.096 414.098,82.513 C410.965,86.246 408.648,90.43 407.148,95.063 C406.148,98.129 405.648,101.046 405.648,103.813 C405.648,105.68 405.881,107.497 406.348,109.263 C406.592,110.195 406.909,111.053 407.298,111.838 C408.751,114.684 411.218,116.526 414.698,117.362 C415.998,117.696 417.347,117.862 418.748,117.862 C421.481,117.862 424.215,117.213 426.948,115.913 C427.792,115.511 428.626,115.069 429.448,114.588 C436.582,110.466 443.032,103.49 448.798,93.663 C448.864,93.529 448.948,93.413 449.048,93.312 C449.081,93.146 449.131,92.979 449.198,92.812 C451.831,84.779 455.998,78.162 461.698,72.962 C463.338,71.459 465.005,70.176 466.698,69.112 C470.738,66.579 474.922,65.312 479.248,65.312 L481.448,65.412 C485.314,65.712 488.514,67.279 491.048,70.112 C493.449,72.77 494.699,75.92 494.798,79.562 L494.798,80.012 L494.798,80.262 C494.798,85.229 492.948,90.029 489.248,94.662 C487.043,97.449 484.526,99.649 481.698,101.262 C478.537,103.045 474.986,104.095 471.048,104.412 L468.548,104.512 C464.381,104.512 460.198,103.712 455.998,102.112 L455.948,103.062 L455.897,104.413 C455.897,107.527 456.439,110.119 457.522,112.187 C458.155,113.366 458.963,114.375 459.948,115.212 C461.781,116.679 464.048,117.562 466.748,117.861 L468.647,117.912 C470.547,117.912 472.364,117.628 474.097,117.061 C476.035,116.472 477.952,115.63 479.847,114.537 C482.768,112.86 485.634,110.585 488.448,107.712 C492.248,103.878 495.731,99.229 498.897,93.762 C498.998,93.628 499.097,93.495 499.198,93.362 C504.198,84.396 506.748,74.695 506.847,64.262 L506.847,63.712 C506.847,52.579 503.897,43.212 497.997,35.612 C492.063,28.045 483.547,23.379 472.447,21.612 C468.913,21.145 465.013,20.912 460.747,20.912 L448.947,21.312 C441.113,21.645 433.23,22.295 425.297,23.262 C414.264,24.529 400.897,26.945 385.197,30.512 L345.547,40.112 C337.413,41.979 329.714,43.495 322.447,44.662 C322.38,44.817 322.313,44.975 322.247,45.137 C321.759,46.246 321.209,47.471 320.597,48.812 L316.997,56.362 C311.497,67.762 304.181,81.412 295.047,97.312 C295.228,102.921 295.994,107.613 297.347,111.387 C297.492,111.792 297.642,112.184 297.797,112.562 C298.663,114.496 299.647,115.946 300.747,116.913 C301.113,117.213 301.514,117.446 301.947,117.612 C302.413,117.812 302.846,117.913 303.247,117.913 L303.747,117.862 C304.493,117.745 305.226,117.503 305.947,117.137 C307.061,116.561 308.144,115.686 309.197,114.512 L312.247,110.462 L313.097,109.111 C314.464,107.011 315.948,104.462 317.547,101.462 L321.847,93.662 C321.981,93.429 322.147,93.212 322.347,93.012 C324.681,86.512 328.33,80.696 333.297,75.562 C335.697,73.078 338.164,71.044 340.697,69.462 C345.171,66.662 349.854,65.262 354.747,65.262 L355.097,65.262 C361.985,65.325 367.001,68.517 370.147,74.837 C370.299,75.154 370.45,75.479 370.597,75.812 L372.797,69.412 L373.397,68.062 C373.804,67.201 374.296,66.542 374.875,66.088 Z M347.725,115.838 C350.551,114.257 353.26,111.748 355.85,108.313 C357.951,105.513 360.017,102.08 362.05,98.013 C362.984,95.98 363.75,94.246 364.35,92.813 L366.3,88.063 C366.9,86.664 367.5,85.013 368.1,83.113 L367.4,83.214 C366.8,83.214 366.184,83.08 365.55,82.814 C364.416,82.347 363.633,81.498 363.2,80.264 C362.066,77.031 360.033,75.014 357.099,74.214 C356.299,73.981 355.366,73.864 354.299,73.864 C352.399,73.864 350.365,74.331 348.199,75.264 C346.981,75.784 345.806,76.4 344.674,77.114 C340.27,79.898 336.479,84.164 333.299,89.914 C331.999,92.181 330.966,94.597 330.199,97.164 C329.232,100.197 328.716,103.03 328.648,105.664 L328.648,106.363 C328.648,109.139 329.182,111.415 330.249,113.188 C331.622,115.468 333.872,116.926 336.999,117.563 C338.065,117.763 339.132,117.863 340.199,117.863 C342.793,117.862 345.302,117.188 347.725,115.838 Z M397.325,112.987 C397.134,113.262 396.942,113.538 396.75,113.812 C393.337,118.703 389.771,122.195 386.05,124.288 C385.161,124.795 384.261,125.221 383.35,125.562 C381.75,126.163 380.184,126.462 378.65,126.462 C377.217,126.462 375.734,126.195 374.201,125.662 C371.1,124.561 368.817,122.578 367.35,119.712 C366.05,117.111 365.317,114.028 365.15,110.462 L365.15,109.512 C364.819,110.022 364.486,110.522 364.15,111.012 C360.909,115.717 357.475,119.384 353.85,122.012 C353.154,122.5 352.446,122.95 351.725,123.362 C348.097,125.429 344.222,126.463 340.1,126.463 C339.166,126.463 338.067,126.379 336.8,126.213 C330.067,125.346 325.283,122.23 322.45,116.862 C321.849,115.729 321.366,114.562 321,113.362 C320.729,113.783 320.463,114.183 320.2,114.562 C319.878,115.041 319.56,115.492 319.25,115.913 C316.431,120.016 313.48,122.924 310.399,124.638 C308.2,125.855 305.933,126.463 303.599,126.463 L303.2,126.463 C297.166,126.263 292.683,122.579 289.75,115.413 C288.85,113.079 288.116,110.562 287.55,107.862 C287.255,108.236 286.955,108.602 286.65,108.963 C283.646,112.628 280.446,115.795 277.05,118.463 C275.303,119.833 273.553,121.025 271.8,122.038 C266.728,124.987 261.627,126.463 256.5,126.463 C255.367,126.463 254.017,126.346 252.45,126.112 C244.384,124.845 239.083,120.812 236.55,114.012 C235.817,112.078 235.35,110.029 235.15,107.862 L236.1,99.612 L227.65,96.812 C227.565,97.093 227.473,97.376 227.375,97.663 C226.732,99.678 225.957,101.694 225.05,103.713 L219.55,113.413 C216.304,117.998 212.713,121.415 208.775,123.663 C208.305,123.928 207.83,124.178 207.35,124.413 C204.517,125.779 201.583,126.463 198.55,126.463 C197.15,126.463 195.583,126.296 193.85,125.963 C188.95,124.93 185.083,122.612 182.25,119.013 C180.65,117.046 179.466,114.813 178.7,112.313 C178.634,112.379 178.567,112.463 178.5,112.563 C178.296,112.884 178.096,113.201 177.9,113.513 C175.22,117.596 172.686,120.629 170.3,122.613 C169.314,123.421 168.322,124.104 167.325,124.664 C165.158,125.863 162.966,126.464 160.75,126.464 C160.017,126.464 159.183,126.38 158.25,126.214 C152.983,125.214 150.017,121.564 149.35,115.264 C149.25,114.364 149.2,113.414 149.2,112.414 C149.2,108.247 149.983,103.264 151.55,97.464 L154.05,88.613 C155.05,85.18 155.75,82.28 156.15,79.914 C156.35,78.68 156.45,77.43 156.45,76.164 L156.45,75.464 C156.45,74.43 156.35,73.864 156.15,73.764 C156.017,73.697 155.883,73.664 155.75,73.664 C155.45,73.664 154.966,73.881 154.3,74.314 L154.175,74.414 L152.35,76.014 C150.617,77.447 148.634,79.63 146.4,82.564 C142.833,87.13 138.9,93.064 134.6,100.364 C132.9,103.298 131.167,106.398 129.4,109.665 L122.9,121.665 C122.4,122.564 121.833,123.432 121.2,124.265 C120.498,125.123 119.748,125.732 118.95,126.09 C118.392,126.34 117.809,126.465 117.2,126.465 C116.767,126.465 116.35,126.399 115.95,126.265 C114.35,125.865 113.134,124.798 112.3,123.065 C111.7,121.798 111.25,120.166 110.95,118.166 C110.55,115.365 110.35,112.266 110.35,108.865 L110.35,108.515 C110.019,108.77 109.686,109.012 109.35,109.24 C108.792,109.629 108.225,109.987 107.65,110.315 C105.369,111.616 102.969,112.432 100.45,112.765 C100.432,112.915 100.415,113.066 100.4,113.215 C99.548,119.776 97.265,125.825 93.55,131.364 C89.782,136.912 84.924,141.421 78.975,144.889 C77.35,145.844 75.642,146.719 73.85,147.514 C65.55,151.214 56.567,153.064 46.9,153.064 C33.567,152.931 22.75,149.931 14.45,144.064 C4.816,137.263 0,128.213 0,116.913 L0,115.362 C0.333,107.663 2.6,100.362 6.8,93.463 C9.369,89.215 12.677,85.823 16.725,83.288 C19.194,81.746 21.935,80.52 24.95,79.612 C29.05,78.412 33.167,77.812 37.3,77.812 C41.567,77.812 45.967,78.596 50.5,80.163 C55.033,81.729 60.15,84.43 65.85,88.263 L80.7,98.213 C84.389,100.623 87.79,102.34 90.9,103.362 C91.268,103.492 91.635,103.609 92,103.713 C91.3,96.813 88.8,90.913 84.5,86.013 C80.2,81.046 74.716,77.413 68.05,75.113 L61.65,72.913 C55.783,70.847 51.417,68.813 48.55,66.813 C40.817,61.58 36.517,54.396 35.65,45.263 L35.5,42.563 C35.5,33.763 39.066,26.396 46.2,20.463 C47.443,19.428 48.735,18.495 50.075,17.663 C55.57,14.23 61.845,12.513 68.9,12.513 C75.5,12.513 81.417,14.413 86.65,18.213 C91.757,21.93 94.716,27.155 95.525,33.888 C95.554,34.093 95.579,34.301 95.6,34.513 L95.75,37.263 C95.75,42.363 94.433,46.73 91.8,50.363 C89.934,52.874 88.217,54.515 86.65,55.288 C85.955,55.638 85.289,55.813 84.65,55.813 C84.216,55.78 83.817,55.73 83.45,55.663 L82.75,56.313 L82,57.038 L74.1,64.413 C73.846,64.554 73.604,64.671 73.375,64.763 C72.268,65.171 71.493,64.904 71.05,63.963 C70.517,63.363 70.567,62.613 71.2,61.713 L71.25,61.663 C71.383,61.463 71.566,61.246 71.8,61.013 L80.5,52.813 C80.4,52.38 80.333,51.93 80.3,51.463 C80.3,50.33 80.75,49.38 81.65,48.613 C85.45,45.213 87.35,41.296 87.35,36.863 C87.35,32.463 85.683,28.763 82.35,25.763 C79.017,22.763 74.467,21.23 68.7,21.163 C63.18,21.163 58.413,22.438 54.4,24.988 C53.181,25.76 52.031,26.652 50.95,27.663 C46.317,31.996 44,37.196 44,43.263 C44,45.896 44.542,48.388 45.625,50.738 C46.565,52.768 47.907,54.693 49.65,56.513 C53.383,60.413 59.15,63.48 66.95,65.713 C69.078,66.329 71.111,67.029 73.05,67.813 C74.421,68.367 75.746,68.959 77.025,69.588 C83.161,72.667 88.152,76.708 92,81.713 C96.324,87.3 99.04,93.467 100.15,100.213 C100.355,101.476 100.505,102.759 100.6,104.063 C100.796,104.002 100.988,103.936 101.175,103.863 C101.811,103.633 102.436,103.349 103.05,103.013 C106.017,101.369 108.783,98.453 111.35,94.263 C111.384,93.93 111.417,93.579 111.45,93.213 L112.45,84.913 C114.65,68.479 117.7,54.179 121.6,42.013 L124,34.513 C125.1,31.58 126.2,28.98 127.3,26.713 C130.015,21.09 133.249,17.074 137,14.663 C137.168,14.562 137.334,14.462 137.5,14.363 C139.466,13.163 141.5,12.563 143.6,12.563 L144.6,12.663 C147.3,12.93 149.384,14.097 150.85,16.163 C152.15,18.03 152.8,20.347 152.8,23.113 L152.75,25.063 C152.583,26.63 152.316,28.213 151.95,29.813 L150.7,34.213 C148.433,41.546 144.267,51.196 138.2,63.163 C133.634,72.363 127.467,83.697 119.7,97.163 L119.5,100.463 C119.233,103.563 119.1,106.579 119.1,109.513 L119.1,110.763 C122.9,103.697 125.967,98.23 128.3,94.363 C132.533,87.297 136.433,81.464 140,76.863 C142.1,74.23 143.867,72.213 145.3,70.813 C146.595,69.519 147.895,68.452 149.2,67.613 C150.081,67.042 150.965,66.575 151.85,66.213 C153.217,65.58 154.634,65.263 156.1,65.263 C156.9,65.263 157.667,65.363 158.4,65.563 C160.733,66.13 162.483,67.413 163.65,69.413 C164.641,71.065 165.141,73.14 165.15,75.638 L165.15,75.713 L165.15,76.113 C165.15,77.246 165.033,78.413 164.8,79.613 L159.15,103.563 C158.85,104.73 158.583,105.98 158.35,107.313 C157.983,109.447 157.8,111.296 157.8,112.863 C157.8,113.763 157.833,114.414 157.9,114.813 C158.003,115.995 158.527,116.811 159.475,117.263 C159.766,117.394 160.091,117.494 160.45,117.563 L162.25,117.463 C162.605,117.397 162.914,117.305 163.175,117.188 C163.314,117.138 163.439,117.08 163.55,117.013 C165.083,116.079 166.683,114.546 168.35,112.413 L171.9,106.713 C173.167,104.579 174.4,102.413 175.6,100.213 L179.1,93.963 C179.733,91.696 180.567,89.413 181.6,87.112 C184.333,81.046 188.1,76.029 192.9,72.062 C194.009,71.16 195.143,70.351 196.3,69.637 C199.783,67.447 203.467,66.088 207.35,65.562 L209.3,65.262 C210.167,65.195 210.8,65.162 211.2,65.162 C214.233,65.162 217.217,65.895 220.15,67.362 C225.722,70.104 228.83,74.854 229.475,81.612 C229.558,82.494 229.6,83.411 229.6,84.362 L229.5,86.163 C229.466,86.829 229.417,87.496 229.35,88.163 L231.125,88.763 L237.05,90.788 L237.75,91.013 C240.35,83.813 244.283,77.796 249.55,72.963 C251.186,71.473 252.844,70.197 254.525,69.138 C258.601,66.588 262.809,65.313 267.15,65.313 L269.3,65.413 C273.166,65.713 276.366,67.28 278.9,70.113 C281.302,72.771 282.552,75.921 282.65,79.563 L282.65,80.013 L282.65,80.263 C282.65,85.23 280.8,90.03 277.1,94.663 C274.917,97.462 272.41,99.662 269.576,101.263 C266.433,103.047 262.892,104.098 258.951,104.413 L256.451,104.513 C252.951,104.513 249.434,103.947 245.901,102.813 C245.768,102.78 245.651,102.747 245.551,102.713 L244.951,102.513 C244.584,102.379 244.234,102.246 243.901,102.113 L243.901,102.164 C243.856,102.388 243.823,102.687 243.801,103.063 L243.801,103.664 L243.801,104.414 C243.801,107.528 244.343,110.12 245.426,112.188 C246.059,113.367 246.867,114.376 247.851,115.213 C249.684,116.68 251.951,117.563 254.651,117.862 L256.501,117.913 C258.435,117.913 260.268,117.629 262.001,117.062 C263.939,116.473 265.855,115.631 267.751,114.538 C270.671,112.861 273.538,110.586 276.351,107.713 C279.851,104.18 283.185,99.779 286.351,94.513 L286.351,92.663 C286.518,86.763 287.368,79.029 288.901,69.463 C290.268,61.296 291.918,53.913 293.851,47.313 L291.651,47.313 C282.252,47.313 274.551,46.347 268.551,44.413 C261.784,42.28 255.768,38.98 250.501,34.513 C244.668,29.58 240.684,24.03 238.551,17.863 C238.351,17.363 238.251,16.88 238.251,16.413 C238.251,15.746 238.434,15.146 238.801,14.613 C238.868,14.48 238.951,14.363 239.051,14.263 L238.551,13.138 L236.376,8.238 L235.851,7.063 L234.001,2.863 C233.956,2.606 233.93,2.364 233.926,2.138 C233.895,1.54 233.995,1.074 234.226,0.738 C234.469,0.38 234.86,0.172 235.401,0.113 C236.168,-0.187 236.868,0.113 237.501,1.013 L237.551,1.063 C237.684,1.263 237.818,1.513 237.951,1.813 L242.801,12.663 C243.468,12.696 244.034,12.83 244.501,13.063 C245.567,13.497 246.351,14.347 246.851,15.613 L246.901,15.863 C247.768,17.596 248.301,18.63 248.501,18.963 C250.168,21.863 252.368,24.58 255.101,27.113 C263.468,34.913 275.068,38.813 289.901,38.813 L290.252,38.813 C292.131,38.813 294.039,38.771 295.977,38.688 C296.232,38.684 296.49,38.675 296.752,38.663 C298.985,32.73 301.519,27.58 304.352,23.213 C306.052,20.546 307.769,18.429 309.502,16.863 C310.37,16.059 311.245,15.367 312.127,14.788 C313.55,13.867 314.991,13.242 316.452,12.913 C317.351,12.68 318.235,12.563 319.101,12.563 C321.601,12.563 323.685,13.48 325.351,15.313 C327.218,17.38 328.151,19.98 328.151,23.113 L328.151,23.313 L328.101,24.363 C327.834,27.763 327.101,31.413 325.901,35.313 C326.901,35.146 327.918,34.963 328.952,34.763 C329.035,34.746 329.118,34.73 329.202,34.713 C335.192,33.525 341.459,32.175 348.002,30.663 L366.852,26.013 C400.418,17.646 429.902,13.163 455.302,12.563 L458.952,12.513 C473.252,12.513 484.335,14.83 492.202,19.463 C500.835,24.463 507.151,31.846 511.151,41.613 C512.618,45.125 513.71,48.783 514.426,52.588 C515.11,56.23 515.451,60.005 515.451,63.913 C515.451,66.013 515.35,68.13 515.15,70.263 C514.184,80.129 511.3,89.329 506.501,97.863 C506.367,98.096 506.234,98.313 506.101,98.513 C501.134,106.879 495.485,113.53 489.151,118.463 C487.398,119.838 485.64,121.038 483.877,122.063 C478.823,124.997 473.748,126.463 468.651,126.463 C467.551,126.463 466.185,126.346 464.551,126.112 C456.485,124.845 451.185,120.812 448.651,114.012 C448.185,112.812 447.835,111.562 447.601,110.262 C447.297,110.615 446.99,110.964 446.676,111.312 C442.715,115.724 438.49,119.241 434.001,121.862 C432.434,122.768 430.833,123.568 429.201,124.262 C425.701,125.729 422.201,126.462 418.701,126.462 C417.301,126.462 415.834,126.328 414.301,126.062 C408.801,125.163 404.534,122.679 401.501,118.612 C399.968,116.612 398.851,114.329 398.15,111.762 C397.876,112.174 397.601,112.582 397.325,112.987 Z M461.6,94.963 C463.883,95.596 466.183,95.913 468.5,95.913 L470.6,95.862 C473.121,95.613 475.379,94.938 477.375,93.838 C479.926,92.438 482.051,90.346 483.75,87.563 C484.783,85.93 485.5,84.313 485.899,82.713 C486.132,81.879 486.25,80.996 486.25,80.063 C486.25,79.163 486.1,78.313 485.8,77.513 C484.866,75.18 482.95,73.963 480.05,73.863 L479.7,73.863 C477.5,73.863 475.217,74.429 472.849,75.563 C471.994,75.977 471.16,76.435 470.349,76.938 C466.551,79.349 463.318,82.824 460.649,87.363 C459.483,89.397 458.5,91.464 457.7,93.563 C458.992,94.131 460.292,94.597 461.6,94.963 Z M311.25,37.488 C312.597,37.331 313.964,37.156 315.35,36.963 C315.613,36.934 315.879,36.901 316.15,36.863 C316.35,36.363 316.534,35.863 316.701,35.363 L317.701,32.413 C318.1,31.113 318.384,30.097 318.551,29.363 C319.151,27.296 319.501,25.246 319.601,23.213 C319.601,22.146 319.185,21.613 318.351,21.613 L317.551,21.713 C317.041,21.849 316.508,22.124 315.951,22.538 C314.872,23.328 313.705,24.637 312.451,26.463 C310.951,28.663 309.534,31.163 308.201,33.963 C307.567,35.263 306.951,36.613 306.35,38.013 C307.958,37.86 309.592,37.686 311.25,37.488 Z M249.475,94.963 C251.756,95.596 254.048,95.913 256.35,95.913 L258.451,95.862 C260.999,95.627 263.282,94.952 265.301,93.838 C267.841,92.445 269.958,90.354 271.651,87.563 C272.718,85.897 273.418,84.28 273.752,82.713 C274.019,81.913 274.151,81.029 274.151,80.063 C274.151,79.163 274.002,78.313 273.702,77.513 C272.768,75.18 270.835,73.963 267.901,73.863 L267.601,73.863 C265.401,73.863 263.118,74.429 260.751,75.563 C259.895,75.977 259.062,76.435 258.251,76.938 C254.453,79.349 251.219,82.824 248.551,87.363 C247.351,89.397 246.368,91.464 245.601,93.563 C246.268,93.863 246.934,94.129 247.601,94.363 C248.223,94.585 248.848,94.785 249.475,94.963 Z M302.825,47.438 C300.111,55.747 298.053,65.122 296.649,75.563 L296.625,75.763 L296.399,77.413 C301.733,67.68 306.016,59.413 309.25,52.613 C310.35,50.346 311.366,48.163 312.3,46.063 C311.033,46.196 309.767,46.33 308.5,46.463 C306.6,46.63 304.767,46.779 303,46.913 C302.94,47.091 302.882,47.266 302.825,47.438 Z M208.85,81.263 C209.188,81.387 209.555,81.504 209.95,81.613 L220,85.013 L221,85.363 L221,84.863 C221,78.897 218.667,75.33 214,74.163 C212.867,73.896 211.9,73.763 211.1,73.763 C209.507,73.763 208.157,74.171 207.05,74.988 C206.487,75.41 205.987,75.936 205.55,76.563 C204.712,78.627 205.812,80.194 208.85,81.263 Z M236.775,6.538 L237.25,7.638 L239.45,12.663 C239.554,12.55 239.671,12.45 239.8,12.363 C240.103,12.154 240.47,12.037 240.9,12.013 L236.1,1.313 C235.7,1.213 235.4,1.213 235.2,1.313 C234.994,1.401 234.852,1.585 234.775,1.863 C234.766,1.891 234.758,1.924 234.75,1.963 L236.775,6.538 Z M236.6,1.213 L240.65,10.363 L241.25,10.013 L236.9,1.113 L236.6,1.213 Z M141.4,22.062 C139.741,23.318 138.025,25.484 136.25,28.562 C132.183,35.862 128.466,47.112 125.1,62.312 C124.55,64.888 123.884,68.222 123.1,72.312 C122.99,72.925 122.873,73.558 122.75,74.212 C128.383,63.879 132.933,54.862 136.4,47.162 L141.2,36.212 C142.8,31.912 143.75,28.062 144.05,24.662 L144.2,22.962 C144.2,22.462 144.15,22.012 144.05,21.612 L144,21.412 L143.85,21.162 L143.3,21.162 L143.2,21.262 L142.9,21.412 L142.5,21.462 L142.4,21.462 L142.4,21.412 C142.069,21.592 141.736,21.809 141.4,22.062 Z M80.35,57.863 C80.35,57.096 79.9,57.096 79,57.863 C78.566,58.263 78.017,58.83 77.35,59.563 C77.117,59.73 76.634,60.18 75.9,60.913 C75.133,61.713 74.75,62.196 74.75,62.363 L74.8,62.713 C75,62.779 75.133,62.813 75.2,62.813 C75.233,62.813 76.1,62.013 77.8,60.413 C79.5,58.813 80.35,57.963 80.35,57.863 Z M80.35,54.713 C80.35,54.046 78.95,54.963 76.15,57.463 C73.35,59.996 71.95,61.363 71.95,61.563 C71.95,61.863 72.117,62.013 72.45,62.013 C72.483,62.013 75.117,59.58 80.35,54.713 Z M74.15,63.312 C74.15,63.045 74.017,62.912 73.75,62.912 C73.45,62.912 73.183,63.062 72.95,63.362 C72.417,63.329 72.033,63.395 71.8,63.562 C71.7,63.629 71.65,63.695 71.65,63.762 C71.65,63.962 71.783,64.112 72.05,64.212 L72.95,64.212 C73.75,63.913 74.15,63.613 74.15,63.312 Z M10.25,126.312 C11.944,130.518 14.844,134.068 18.95,136.962 C25.917,141.929 35.467,144.412 47.6,144.412 C57.134,144.412 65.167,142.712 71.7,139.311 C72.35,138.971 72.984,138.621 73.6,138.261 C79.194,135 83.61,130.851 86.85,125.811 C89.55,121.544 91.217,117.078 91.85,112.412 C89.65,111.845 87.617,111.162 85.75,110.361 C81.55,108.662 76.333,105.695 70.1,101.462 L59.85,94.512 C55.517,91.745 51.567,89.679 48,88.312 C44.4,86.979 40.867,86.312 37.4,86.312 L35.9,86.312 C30.377,86.604 25.618,88.012 21.625,90.538 C19.244,92.043 17.136,93.952 15.3,96.263 C10.733,101.963 8.45,108.697 8.45,116.463 C8.45,120.073 9.05,123.356 10.25,126.312 Z M187.85,112.013 C189.172,114.555 191.272,116.272 194.15,117.163 C195.517,117.562 196.85,117.763 198.15,117.763 C200.362,117.763 202.538,117.171 204.675,115.988 C206.049,115.223 207.407,114.215 208.75,112.964 L210.25,111.464 L215.25,104.214 C215.783,103.214 216.25,102.28 216.65,101.414 C217.083,100.547 217.45,99.764 217.75,99.063 C218.417,97.33 218.983,95.68 219.45,94.113 L199.2,87.464 C197,86.13 195.55,84.297 194.85,81.964 C194.557,82.302 194.273,82.644 194,82.988 C191.13,86.559 188.997,90.668 187.6,95.313 C186.667,98.414 186.2,101.379 186.2,104.213 C186.2,105.513 186.3,106.779 186.5,108.013 C186.783,109.523 187.233,110.856 187.85,112.013 Z"></path>
+    </g>
+  </g>
+</svg>
diff --git a/docs/assets/images/logo.svg b/docs/assets/images/logo.svg
index 6d15ad28a..754b99989 100644
--- a/docs/assets/images/logo.svg
+++ b/docs/assets/images/logo.svg
@@ -1,6 +1,6 @@
 <svg viewBox="0 0 127 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-    <g fill-rule="nonzero" fill="#0ea5e9">
+    <g fill-rule="nonzero" fill="#0070f2">
       <path d="M102.375,90.85 C102.979,90.557 103.57,90.215 104.15,89.826 L106.425,88.501 C106.848,88.19 107.64,87.573 108.8,86.65 L108.95,86.501 C109.883,85.567 110.916,85.117 112.05,85.15 C112.55,85.15 113.133,85.284 113.8,85.55 L122.3,78 C122.533,77.8 122.767,77.633 123,77.5 L123.05,77.5 C123.95,76.967 124.7,77 125.3,77.6 C126.367,78.166 126.45,79.133 125.55,80.5 L116.65,88.399 C116.717,88.533 116.75,88.666 116.75,88.799 C116.883,89.399 116.833,89.999 116.6,90.599 C116.4,90.999 116.117,91.382 115.75,91.749 C115.379,92.145 114.996,92.528 114.6,92.898 L109.45,96.648 C108.99,96.97 108.523,97.27 108.05,97.548 C107.46,97.906 106.86,98.232 106.25,98.523 C105.985,98.644 105.718,98.76 105.45,98.874 C103.841,99.559 102.174,100.017 100.45,100.249 C99.65,106.982 97.35,113.183 93.55,118.849 C88.75,125.915 82.183,131.299 73.85,134.999 C65.55,138.699 56.567,140.549 46.9,140.549 C33.567,140.415 22.75,137.415 14.45,131.549 C4.817,124.75 0,115.7 0,104.399 L0,102.849 C0.333,95.149 2.6,87.849 6.8,80.95 C10.933,74.116 16.983,69.5 24.95,67.1 C29.05,65.9 33.166,65.3 37.3,65.3 C41.567,65.3 45.967,66.083 50.5,67.65 C55.033,69.216 60.15,71.916 65.85,75.75 L80.7,85.7 C84.833,88.399 88.6,90.233 92,91.2 C91.3,84.3 88.8,78.399 84.5,73.5 C80.2,68.533 74.717,64.9 68.05,62.6 L61.65,60.4 C55.783,58.333 51.417,56.3 48.55,54.3 C40.817,49.067 36.517,41.883 35.65,32.75 L35.5,30.05 C35.5,21.25 39.067,13.883 46.2,7.95 C52.567,2.65 60.133,0 68.9,0 C75.5,0 81.417,1.9 86.65,5.7 C91.917,9.533 94.9,14.967 95.6,22 L95.75,24.75 C95.75,29.85 94.433,34.216 91.8,37.85 C89.1,41.483 86.717,43.3 84.65,43.3 C84.21,43.269 83.802,43.21 83.425,43.125 L74.1,51.9 C72.6,52.733 71.583,52.583 71.05,51.45 C70.517,50.85 70.567,50.1 71.2,49.2 L71.25,49.15 C71.383,48.95 71.567,48.733 71.8,48.5 L80.475,40.275 C80.376,39.872 80.318,39.431 80.3,38.95 C80.3,37.817 80.75,36.867 81.65,36.1 C85.45,32.7 87.35,28.784 87.35,24.35 C87.35,19.95 85.683,16.25 82.35,13.25 C79.017,10.25 74.467,8.716 68.7,8.65 C61.5,8.65 55.583,10.817 50.95,15.15 C46.317,19.483 44,24.683 44,30.75 C44,35.65 45.883,40.066 49.65,44 C53.383,47.9 59.15,50.966 66.95,53.2 C77.883,56.367 86.233,61.7 92,69.2 C97.133,75.833 100,83.283 100.6,91.55 C101.199,91.365 101.791,91.132 102.375,90.85 Z M71.95,49.05 C71.95,49.35 72.117,49.5 72.45,49.5 C72.483,49.5 75.117,47.066 80.35,42.2 C80.35,41.533 78.95,42.45 76.15,44.95 C73.35,47.483 71.95,48.85 71.95,49.05 Z M74.15,50.8 C74.15,50.533 74.017,50.4 73.75,50.4 C73.45,50.4 73.183,50.55 72.95,50.85 C72.416,50.817 72.033,50.884 71.8,51.05 C71.7,51.117 71.65,51.183 71.65,51.25 C71.65,51.45 71.783,51.6 72.05,51.7 L72.95,51.7 C73.75,51.4 74.15,51.1 74.15,50.8 Z M80.35,45.35 C80.35,44.583 79.9,44.583 79,45.35 C78.567,45.75 78.017,46.317 77.35,47.05 C77.117,47.217 76.633,47.667 75.9,48.4 C75.133,49.2 74.75,49.683 74.75,49.85 L74.8,50.2 C75,50.267 75.133,50.3 75.2,50.3 C75.233,50.3 76.1,49.5 77.8,47.9 C79.5,46.3 80.35,45.45 80.35,45.35 Z M124.2,78.3 L115.8,85.7 C116.3,85.967 116.667,86.349 116.9,86.849 L125.2,79.45 C125.266,79.116 125.217,78.849 125.05,78.649 C124.883,78.517 124.6,78.399 124.2,78.3 Z M123.75,78.05 L123.55,77.85 L116.15,83.85 L116.6,84.4 L123.75,78.05 Z M91.85,99.899 C89.65,99.333 87.617,98.649 85.75,97.849 C81.55,96.149 76.333,93.183 70.1,88.95 L59.85,82 C55.517,79.233 51.567,77.166 48,75.8 C44.4,74.467 40.867,73.8 37.4,73.8 L35.9,73.8 C27.067,74.267 20.2,77.583 15.3,83.75 C10.734,89.45 8.45,96.184 8.45,103.95 C8.45,112.683 11.95,119.516 18.95,124.45 C25.916,129.416 35.467,131.899 47.6,131.899 C57.133,131.899 65.166,130.2 71.7,126.799 C78.2,123.399 83.25,118.899 86.85,113.299 C89.55,109.033 91.217,104.566 91.85,99.899 Z"></path>
     </g>
   </g>
diff --git a/docs/assets/images/wordmark.svg b/docs/assets/images/wordmark.svg
index f853ed3ea..723ec7a9a 100644
--- a/docs/assets/images/wordmark.svg
+++ b/docs/assets/images/wordmark.svg
@@ -1,6 +1,6 @@
 <svg viewBox="0 0 516 154" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-    <g fill-rule="nonzero" fill="#0ea5e9">
+    <g fill-rule="nonzero" fill="currentColor">
       <path d="M374.875,66.088 C375.012,65.987 375.153,65.896 375.3,65.813 C376.033,65.347 376.783,65.113 377.55,65.113 C378.35,65.113 379.166,65.446 380,66.113 C381.233,67.113 381.85,68.413 381.85,70.013 L381.85,70.563 C381.794,71.119 381.695,71.752 381.55,72.463 C381.261,73.907 380.794,75.673 380.15,77.763 L377.85,84.863 C375.317,94.13 373.951,101.513 373.75,107.013 L373.75,108.163 C373.75,111.362 374.116,113.812 374.85,115.513 C375.002,115.884 375.185,116.209 375.4,116.488 C376.03,117.331 376.93,117.789 378.1,117.863 L378.4,117.863 C379.468,117.863 380.56,117.572 381.675,116.988 C382.553,116.522 383.445,115.881 384.35,115.063 C385.05,114.397 385.883,113.48 386.85,112.313 L388.9,109.563 C390.534,107.363 392.217,104.763 393.951,101.763 L398.65,93.663 C398.717,93.562 398.784,93.463 398.85,93.362 C399.083,92.529 399.35,91.713 399.65,90.913 C401.751,85.18 404.633,80.213 408.3,76.013 C410.656,73.35 413.206,71.158 415.95,69.438 C417.976,68.173 420.11,67.165 422.349,66.413 C424.849,65.646 427.2,65.263 429.399,65.263 C432.233,65.263 434.899,65.88 437.399,67.113 C442.2,69.513 444.916,73.53 445.549,79.163 L445.549,79.763 L445.549,79.888 C445.523,80.862 445.172,81.654 444.499,82.263 C444.182,82.58 443.807,82.822 443.374,82.988 C442.887,83.172 442.328,83.263 441.699,83.263 C440.499,83.263 439.466,82.913 438.598,82.213 C437.631,81.446 437.081,80.43 436.949,79.163 C436.716,76.83 435.466,75.263 433.199,74.463 C432.098,74.063 430.898,73.863 429.598,73.863 C428.732,73.863 427.765,73.963 426.699,74.163 C424.532,74.622 422.448,75.489 420.449,76.763 C418.229,78.18 416.113,80.096 414.098,82.513 C410.965,86.246 408.648,90.43 407.148,95.063 C406.148,98.129 405.648,101.046 405.648,103.813 C405.648,105.68 405.881,107.497 406.348,109.263 C406.592,110.195 406.909,111.053 407.298,111.838 C408.751,114.684 411.218,116.526 414.698,117.362 C415.998,117.696 417.347,117.862 418.748,117.862 C421.481,117.862 424.215,117.213 426.948,115.913 C427.792,115.511 428.626,115.069 429.448,114.588 C436.582,110.466 443.032,103.49 448.798,93.663 C448.864,93.529 448.948,93.413 449.048,93.312 C449.081,93.146 449.131,92.979 449.198,92.812 C451.831,84.779 455.998,78.162 461.698,72.962 C463.338,71.459 465.005,70.176 466.698,69.112 C470.738,66.579 474.922,65.312 479.248,65.312 L481.448,65.412 C485.314,65.712 488.514,67.279 491.048,70.112 C493.449,72.77 494.699,75.92 494.798,79.562 L494.798,80.012 L494.798,80.262 C494.798,85.229 492.948,90.029 489.248,94.662 C487.043,97.449 484.526,99.649 481.698,101.262 C478.537,103.045 474.986,104.095 471.048,104.412 L468.548,104.512 C464.381,104.512 460.198,103.712 455.998,102.112 L455.948,103.062 L455.897,104.413 C455.897,107.527 456.439,110.119 457.522,112.187 C458.155,113.366 458.963,114.375 459.948,115.212 C461.781,116.679 464.048,117.562 466.748,117.861 L468.647,117.912 C470.547,117.912 472.364,117.628 474.097,117.061 C476.035,116.472 477.952,115.63 479.847,114.537 C482.768,112.86 485.634,110.585 488.448,107.712 C492.248,103.878 495.731,99.229 498.897,93.762 C498.998,93.628 499.097,93.495 499.198,93.362 C504.198,84.396 506.748,74.695 506.847,64.262 L506.847,63.712 C506.847,52.579 503.897,43.212 497.997,35.612 C492.063,28.045 483.547,23.379 472.447,21.612 C468.913,21.145 465.013,20.912 460.747,20.912 L448.947,21.312 C441.113,21.645 433.23,22.295 425.297,23.262 C414.264,24.529 400.897,26.945 385.197,30.512 L345.547,40.112 C337.413,41.979 329.714,43.495 322.447,44.662 C322.38,44.817 322.313,44.975 322.247,45.137 C321.759,46.246 321.209,47.471 320.597,48.812 L316.997,56.362 C311.497,67.762 304.181,81.412 295.047,97.312 C295.228,102.921 295.994,107.613 297.347,111.387 C297.492,111.792 297.642,112.184 297.797,112.562 C298.663,114.496 299.647,115.946 300.747,116.913 C301.113,117.213 301.514,117.446 301.947,117.612 C302.413,117.812 302.846,117.913 303.247,117.913 L303.747,117.862 C304.493,117.745 305.226,117.503 305.947,117.137 C307.061,116.561 308.144,115.686 309.197,114.512 L312.247,110.462 L313.097,109.111 C314.464,107.011 315.948,104.462 317.547,101.462 L321.847,93.662 C321.981,93.429 322.147,93.212 322.347,93.012 C324.681,86.512 328.33,80.696 333.297,75.562 C335.697,73.078 338.164,71.044 340.697,69.462 C345.171,66.662 349.854,65.262 354.747,65.262 L355.097,65.262 C361.985,65.325 367.001,68.517 370.147,74.837 C370.299,75.154 370.45,75.479 370.597,75.812 L372.797,69.412 L373.397,68.062 C373.804,67.201 374.296,66.542 374.875,66.088 Z M347.725,115.838 C350.551,114.257 353.26,111.748 355.85,108.313 C357.951,105.513 360.017,102.08 362.05,98.013 C362.984,95.98 363.75,94.246 364.35,92.813 L366.3,88.063 C366.9,86.664 367.5,85.013 368.1,83.113 L367.4,83.214 C366.8,83.214 366.184,83.08 365.55,82.814 C364.416,82.347 363.633,81.498 363.2,80.264 C362.066,77.031 360.033,75.014 357.099,74.214 C356.299,73.981 355.366,73.864 354.299,73.864 C352.399,73.864 350.365,74.331 348.199,75.264 C346.981,75.784 345.806,76.4 344.674,77.114 C340.27,79.898 336.479,84.164 333.299,89.914 C331.999,92.181 330.966,94.597 330.199,97.164 C329.232,100.197 328.716,103.03 328.648,105.664 L328.648,106.363 C328.648,109.139 329.182,111.415 330.249,113.188 C331.622,115.468 333.872,116.926 336.999,117.563 C338.065,117.763 339.132,117.863 340.199,117.863 C342.793,117.862 345.302,117.188 347.725,115.838 Z M397.325,112.987 C397.134,113.262 396.942,113.538 396.75,113.812 C393.337,118.703 389.771,122.195 386.05,124.288 C385.161,124.795 384.261,125.221 383.35,125.562 C381.75,126.163 380.184,126.462 378.65,126.462 C377.217,126.462 375.734,126.195 374.201,125.662 C371.1,124.561 368.817,122.578 367.35,119.712 C366.05,117.111 365.317,114.028 365.15,110.462 L365.15,109.512 C364.819,110.022 364.486,110.522 364.15,111.012 C360.909,115.717 357.475,119.384 353.85,122.012 C353.154,122.5 352.446,122.95 351.725,123.362 C348.097,125.429 344.222,126.463 340.1,126.463 C339.166,126.463 338.067,126.379 336.8,126.213 C330.067,125.346 325.283,122.23 322.45,116.862 C321.849,115.729 321.366,114.562 321,113.362 C320.729,113.783 320.463,114.183 320.2,114.562 C319.878,115.041 319.56,115.492 319.25,115.913 C316.431,120.016 313.48,122.924 310.399,124.638 C308.2,125.855 305.933,126.463 303.599,126.463 L303.2,126.463 C297.166,126.263 292.683,122.579 289.75,115.413 C288.85,113.079 288.116,110.562 287.55,107.862 C287.255,108.236 286.955,108.602 286.65,108.963 C283.646,112.628 280.446,115.795 277.05,118.463 C275.303,119.833 273.553,121.025 271.8,122.038 C266.728,124.987 261.627,126.463 256.5,126.463 C255.367,126.463 254.017,126.346 252.45,126.112 C244.384,124.845 239.083,120.812 236.55,114.012 C235.817,112.078 235.35,110.029 235.15,107.862 L236.1,99.612 L227.65,96.812 C227.565,97.093 227.473,97.376 227.375,97.663 C226.732,99.678 225.957,101.694 225.05,103.713 L219.55,113.413 C216.304,117.998 212.713,121.415 208.775,123.663 C208.305,123.928 207.83,124.178 207.35,124.413 C204.517,125.779 201.583,126.463 198.55,126.463 C197.15,126.463 195.583,126.296 193.85,125.963 C188.95,124.93 185.083,122.612 182.25,119.013 C180.65,117.046 179.466,114.813 178.7,112.313 C178.634,112.379 178.567,112.463 178.5,112.563 C178.296,112.884 178.096,113.201 177.9,113.513 C175.22,117.596 172.686,120.629 170.3,122.613 C169.314,123.421 168.322,124.104 167.325,124.664 C165.158,125.863 162.966,126.464 160.75,126.464 C160.017,126.464 159.183,126.38 158.25,126.214 C152.983,125.214 150.017,121.564 149.35,115.264 C149.25,114.364 149.2,113.414 149.2,112.414 C149.2,108.247 149.983,103.264 151.55,97.464 L154.05,88.613 C155.05,85.18 155.75,82.28 156.15,79.914 C156.35,78.68 156.45,77.43 156.45,76.164 L156.45,75.464 C156.45,74.43 156.35,73.864 156.15,73.764 C156.017,73.697 155.883,73.664 155.75,73.664 C155.45,73.664 154.966,73.881 154.3,74.314 L154.175,74.414 L152.35,76.014 C150.617,77.447 148.634,79.63 146.4,82.564 C142.833,87.13 138.9,93.064 134.6,100.364 C132.9,103.298 131.167,106.398 129.4,109.665 L122.9,121.665 C122.4,122.564 121.833,123.432 121.2,124.265 C120.498,125.123 119.748,125.732 118.95,126.09 C118.392,126.34 117.809,126.465 117.2,126.465 C116.767,126.465 116.35,126.399 115.95,126.265 C114.35,125.865 113.134,124.798 112.3,123.065 C111.7,121.798 111.25,120.166 110.95,118.166 C110.55,115.365 110.35,112.266 110.35,108.865 L110.35,108.515 C110.019,108.77 109.686,109.012 109.35,109.24 C108.792,109.629 108.225,109.987 107.65,110.315 C105.369,111.616 102.969,112.432 100.45,112.765 C100.432,112.915 100.415,113.066 100.4,113.215 C99.548,119.776 97.265,125.825 93.55,131.364 C89.782,136.912 84.924,141.421 78.975,144.889 C77.35,145.844 75.642,146.719 73.85,147.514 C65.55,151.214 56.567,153.064 46.9,153.064 C33.567,152.931 22.75,149.931 14.45,144.064 C4.816,137.263 0,128.213 0,116.913 L0,115.362 C0.333,107.663 2.6,100.362 6.8,93.463 C9.369,89.215 12.677,85.823 16.725,83.288 C19.194,81.746 21.935,80.52 24.95,79.612 C29.05,78.412 33.167,77.812 37.3,77.812 C41.567,77.812 45.967,78.596 50.5,80.163 C55.033,81.729 60.15,84.43 65.85,88.263 L80.7,98.213 C84.389,100.623 87.79,102.34 90.9,103.362 C91.268,103.492 91.635,103.609 92,103.713 C91.3,96.813 88.8,90.913 84.5,86.013 C80.2,81.046 74.716,77.413 68.05,75.113 L61.65,72.913 C55.783,70.847 51.417,68.813 48.55,66.813 C40.817,61.58 36.517,54.396 35.65,45.263 L35.5,42.563 C35.5,33.763 39.066,26.396 46.2,20.463 C47.443,19.428 48.735,18.495 50.075,17.663 C55.57,14.23 61.845,12.513 68.9,12.513 C75.5,12.513 81.417,14.413 86.65,18.213 C91.757,21.93 94.716,27.155 95.525,33.888 C95.554,34.093 95.579,34.301 95.6,34.513 L95.75,37.263 C95.75,42.363 94.433,46.73 91.8,50.363 C89.934,52.874 88.217,54.515 86.65,55.288 C85.955,55.638 85.289,55.813 84.65,55.813 C84.216,55.78 83.817,55.73 83.45,55.663 L82.75,56.313 L82,57.038 L74.1,64.413 C73.846,64.554 73.604,64.671 73.375,64.763 C72.268,65.171 71.493,64.904 71.05,63.963 C70.517,63.363 70.567,62.613 71.2,61.713 L71.25,61.663 C71.383,61.463 71.566,61.246 71.8,61.013 L80.5,52.813 C80.4,52.38 80.333,51.93 80.3,51.463 C80.3,50.33 80.75,49.38 81.65,48.613 C85.45,45.213 87.35,41.296 87.35,36.863 C87.35,32.463 85.683,28.763 82.35,25.763 C79.017,22.763 74.467,21.23 68.7,21.163 C63.18,21.163 58.413,22.438 54.4,24.988 C53.181,25.76 52.031,26.652 50.95,27.663 C46.317,31.996 44,37.196 44,43.263 C44,45.896 44.542,48.388 45.625,50.738 C46.565,52.768 47.907,54.693 49.65,56.513 C53.383,60.413 59.15,63.48 66.95,65.713 C69.078,66.329 71.111,67.029 73.05,67.813 C74.421,68.367 75.746,68.959 77.025,69.588 C83.161,72.667 88.152,76.708 92,81.713 C96.324,87.3 99.04,93.467 100.15,100.213 C100.355,101.476 100.505,102.759 100.6,104.063 C100.796,104.002 100.988,103.936 101.175,103.863 C101.811,103.633 102.436,103.349 103.05,103.013 C106.017,101.369 108.783,98.453 111.35,94.263 C111.384,93.93 111.417,93.579 111.45,93.213 L112.45,84.913 C114.65,68.479 117.7,54.179 121.6,42.013 L124,34.513 C125.1,31.58 126.2,28.98 127.3,26.713 C130.015,21.09 133.249,17.074 137,14.663 C137.168,14.562 137.334,14.462 137.5,14.363 C139.466,13.163 141.5,12.563 143.6,12.563 L144.6,12.663 C147.3,12.93 149.384,14.097 150.85,16.163 C152.15,18.03 152.8,20.347 152.8,23.113 L152.75,25.063 C152.583,26.63 152.316,28.213 151.95,29.813 L150.7,34.213 C148.433,41.546 144.267,51.196 138.2,63.163 C133.634,72.363 127.467,83.697 119.7,97.163 L119.5,100.463 C119.233,103.563 119.1,106.579 119.1,109.513 L119.1,110.763 C122.9,103.697 125.967,98.23 128.3,94.363 C132.533,87.297 136.433,81.464 140,76.863 C142.1,74.23 143.867,72.213 145.3,70.813 C146.595,69.519 147.895,68.452 149.2,67.613 C150.081,67.042 150.965,66.575 151.85,66.213 C153.217,65.58 154.634,65.263 156.1,65.263 C156.9,65.263 157.667,65.363 158.4,65.563 C160.733,66.13 162.483,67.413 163.65,69.413 C164.641,71.065 165.141,73.14 165.15,75.638 L165.15,75.713 L165.15,76.113 C165.15,77.246 165.033,78.413 164.8,79.613 L159.15,103.563 C158.85,104.73 158.583,105.98 158.35,107.313 C157.983,109.447 157.8,111.296 157.8,112.863 C157.8,113.763 157.833,114.414 157.9,114.813 C158.003,115.995 158.527,116.811 159.475,117.263 C159.766,117.394 160.091,117.494 160.45,117.563 L162.25,117.463 C162.605,117.397 162.914,117.305 163.175,117.188 C163.314,117.138 163.439,117.08 163.55,117.013 C165.083,116.079 166.683,114.546 168.35,112.413 L171.9,106.713 C173.167,104.579 174.4,102.413 175.6,100.213 L179.1,93.963 C179.733,91.696 180.567,89.413 181.6,87.112 C184.333,81.046 188.1,76.029 192.9,72.062 C194.009,71.16 195.143,70.351 196.3,69.637 C199.783,67.447 203.467,66.088 207.35,65.562 L209.3,65.262 C210.167,65.195 210.8,65.162 211.2,65.162 C214.233,65.162 217.217,65.895 220.15,67.362 C225.722,70.104 228.83,74.854 229.475,81.612 C229.558,82.494 229.6,83.411 229.6,84.362 L229.5,86.163 C229.466,86.829 229.417,87.496 229.35,88.163 L231.125,88.763 L237.05,90.788 L237.75,91.013 C240.35,83.813 244.283,77.796 249.55,72.963 C251.186,71.473 252.844,70.197 254.525,69.138 C258.601,66.588 262.809,65.313 267.15,65.313 L269.3,65.413 C273.166,65.713 276.366,67.28 278.9,70.113 C281.302,72.771 282.552,75.921 282.65,79.563 L282.65,80.013 L282.65,80.263 C282.65,85.23 280.8,90.03 277.1,94.663 C274.917,97.462 272.41,99.662 269.576,101.263 C266.433,103.047 262.892,104.098 258.951,104.413 L256.451,104.513 C252.951,104.513 249.434,103.947 245.901,102.813 C245.768,102.78 245.651,102.747 245.551,102.713 L244.951,102.513 C244.584,102.379 244.234,102.246 243.901,102.113 L243.901,102.164 C243.856,102.388 243.823,102.687 243.801,103.063 L243.801,103.664 L243.801,104.414 C243.801,107.528 244.343,110.12 245.426,112.188 C246.059,113.367 246.867,114.376 247.851,115.213 C249.684,116.68 251.951,117.563 254.651,117.862 L256.501,117.913 C258.435,117.913 260.268,117.629 262.001,117.062 C263.939,116.473 265.855,115.631 267.751,114.538 C270.671,112.861 273.538,110.586 276.351,107.713 C279.851,104.18 283.185,99.779 286.351,94.513 L286.351,92.663 C286.518,86.763 287.368,79.029 288.901,69.463 C290.268,61.296 291.918,53.913 293.851,47.313 L291.651,47.313 C282.252,47.313 274.551,46.347 268.551,44.413 C261.784,42.28 255.768,38.98 250.501,34.513 C244.668,29.58 240.684,24.03 238.551,17.863 C238.351,17.363 238.251,16.88 238.251,16.413 C238.251,15.746 238.434,15.146 238.801,14.613 C238.868,14.48 238.951,14.363 239.051,14.263 L238.551,13.138 L236.376,8.238 L235.851,7.063 L234.001,2.863 C233.956,2.606 233.93,2.364 233.926,2.138 C233.895,1.54 233.995,1.074 234.226,0.738 C234.469,0.38 234.86,0.172 235.401,0.113 C236.168,-0.187 236.868,0.113 237.501,1.013 L237.551,1.063 C237.684,1.263 237.818,1.513 237.951,1.813 L242.801,12.663 C243.468,12.696 244.034,12.83 244.501,13.063 C245.567,13.497 246.351,14.347 246.851,15.613 L246.901,15.863 C247.768,17.596 248.301,18.63 248.501,18.963 C250.168,21.863 252.368,24.58 255.101,27.113 C263.468,34.913 275.068,38.813 289.901,38.813 L290.252,38.813 C292.131,38.813 294.039,38.771 295.977,38.688 C296.232,38.684 296.49,38.675 296.752,38.663 C298.985,32.73 301.519,27.58 304.352,23.213 C306.052,20.546 307.769,18.429 309.502,16.863 C310.37,16.059 311.245,15.367 312.127,14.788 C313.55,13.867 314.991,13.242 316.452,12.913 C317.351,12.68 318.235,12.563 319.101,12.563 C321.601,12.563 323.685,13.48 325.351,15.313 C327.218,17.38 328.151,19.98 328.151,23.113 L328.151,23.313 L328.101,24.363 C327.834,27.763 327.101,31.413 325.901,35.313 C326.901,35.146 327.918,34.963 328.952,34.763 C329.035,34.746 329.118,34.73 329.202,34.713 C335.192,33.525 341.459,32.175 348.002,30.663 L366.852,26.013 C400.418,17.646 429.902,13.163 455.302,12.563 L458.952,12.513 C473.252,12.513 484.335,14.83 492.202,19.463 C500.835,24.463 507.151,31.846 511.151,41.613 C512.618,45.125 513.71,48.783 514.426,52.588 C515.11,56.23 515.451,60.005 515.451,63.913 C515.451,66.013 515.35,68.13 515.15,70.263 C514.184,80.129 511.3,89.329 506.501,97.863 C506.367,98.096 506.234,98.313 506.101,98.513 C501.134,106.879 495.485,113.53 489.151,118.463 C487.398,119.838 485.64,121.038 483.877,122.063 C478.823,124.997 473.748,126.463 468.651,126.463 C467.551,126.463 466.185,126.346 464.551,126.112 C456.485,124.845 451.185,120.812 448.651,114.012 C448.185,112.812 447.835,111.562 447.601,110.262 C447.297,110.615 446.99,110.964 446.676,111.312 C442.715,115.724 438.49,119.241 434.001,121.862 C432.434,122.768 430.833,123.568 429.201,124.262 C425.701,125.729 422.201,126.462 418.701,126.462 C417.301,126.462 415.834,126.328 414.301,126.062 C408.801,125.163 404.534,122.679 401.501,118.612 C399.968,116.612 398.851,114.329 398.15,111.762 C397.876,112.174 397.601,112.582 397.325,112.987 Z M461.6,94.963 C463.883,95.596 466.183,95.913 468.5,95.913 L470.6,95.862 C473.121,95.613 475.379,94.938 477.375,93.838 C479.926,92.438 482.051,90.346 483.75,87.563 C484.783,85.93 485.5,84.313 485.899,82.713 C486.132,81.879 486.25,80.996 486.25,80.063 C486.25,79.163 486.1,78.313 485.8,77.513 C484.866,75.18 482.95,73.963 480.05,73.863 L479.7,73.863 C477.5,73.863 475.217,74.429 472.849,75.563 C471.994,75.977 471.16,76.435 470.349,76.938 C466.551,79.349 463.318,82.824 460.649,87.363 C459.483,89.397 458.5,91.464 457.7,93.563 C458.992,94.131 460.292,94.597 461.6,94.963 Z M311.25,37.488 C312.597,37.331 313.964,37.156 315.35,36.963 C315.613,36.934 315.879,36.901 316.15,36.863 C316.35,36.363 316.534,35.863 316.701,35.363 L317.701,32.413 C318.1,31.113 318.384,30.097 318.551,29.363 C319.151,27.296 319.501,25.246 319.601,23.213 C319.601,22.146 319.185,21.613 318.351,21.613 L317.551,21.713 C317.041,21.849 316.508,22.124 315.951,22.538 C314.872,23.328 313.705,24.637 312.451,26.463 C310.951,28.663 309.534,31.163 308.201,33.963 C307.567,35.263 306.951,36.613 306.35,38.013 C307.958,37.86 309.592,37.686 311.25,37.488 Z M249.475,94.963 C251.756,95.596 254.048,95.913 256.35,95.913 L258.451,95.862 C260.999,95.627 263.282,94.952 265.301,93.838 C267.841,92.445 269.958,90.354 271.651,87.563 C272.718,85.897 273.418,84.28 273.752,82.713 C274.019,81.913 274.151,81.029 274.151,80.063 C274.151,79.163 274.002,78.313 273.702,77.513 C272.768,75.18 270.835,73.963 267.901,73.863 L267.601,73.863 C265.401,73.863 263.118,74.429 260.751,75.563 C259.895,75.977 259.062,76.435 258.251,76.938 C254.453,79.349 251.219,82.824 248.551,87.363 C247.351,89.397 246.368,91.464 245.601,93.563 C246.268,93.863 246.934,94.129 247.601,94.363 C248.223,94.585 248.848,94.785 249.475,94.963 Z M302.825,47.438 C300.111,55.747 298.053,65.122 296.649,75.563 L296.625,75.763 L296.399,77.413 C301.733,67.68 306.016,59.413 309.25,52.613 C310.35,50.346 311.366,48.163 312.3,46.063 C311.033,46.196 309.767,46.33 308.5,46.463 C306.6,46.63 304.767,46.779 303,46.913 C302.94,47.091 302.882,47.266 302.825,47.438 Z M208.85,81.263 C209.188,81.387 209.555,81.504 209.95,81.613 L220,85.013 L221,85.363 L221,84.863 C221,78.897 218.667,75.33 214,74.163 C212.867,73.896 211.9,73.763 211.1,73.763 C209.507,73.763 208.157,74.171 207.05,74.988 C206.487,75.41 205.987,75.936 205.55,76.563 C204.712,78.627 205.812,80.194 208.85,81.263 Z M236.775,6.538 L237.25,7.638 L239.45,12.663 C239.554,12.55 239.671,12.45 239.8,12.363 C240.103,12.154 240.47,12.037 240.9,12.013 L236.1,1.313 C235.7,1.213 235.4,1.213 235.2,1.313 C234.994,1.401 234.852,1.585 234.775,1.863 C234.766,1.891 234.758,1.924 234.75,1.963 L236.775,6.538 Z M236.6,1.213 L240.65,10.363 L241.25,10.013 L236.9,1.113 L236.6,1.213 Z M141.4,22.062 C139.741,23.318 138.025,25.484 136.25,28.562 C132.183,35.862 128.466,47.112 125.1,62.312 C124.55,64.888 123.884,68.222 123.1,72.312 C122.99,72.925 122.873,73.558 122.75,74.212 C128.383,63.879 132.933,54.862 136.4,47.162 L141.2,36.212 C142.8,31.912 143.75,28.062 144.05,24.662 L144.2,22.962 C144.2,22.462 144.15,22.012 144.05,21.612 L144,21.412 L143.85,21.162 L143.3,21.162 L143.2,21.262 L142.9,21.412 L142.5,21.462 L142.4,21.462 L142.4,21.412 C142.069,21.592 141.736,21.809 141.4,22.062 Z M80.35,57.863 C80.35,57.096 79.9,57.096 79,57.863 C78.566,58.263 78.017,58.83 77.35,59.563 C77.117,59.73 76.634,60.18 75.9,60.913 C75.133,61.713 74.75,62.196 74.75,62.363 L74.8,62.713 C75,62.779 75.133,62.813 75.2,62.813 C75.233,62.813 76.1,62.013 77.8,60.413 C79.5,58.813 80.35,57.963 80.35,57.863 Z M80.35,54.713 C80.35,54.046 78.95,54.963 76.15,57.463 C73.35,59.996 71.95,61.363 71.95,61.563 C71.95,61.863 72.117,62.013 72.45,62.013 C72.483,62.013 75.117,59.58 80.35,54.713 Z M74.15,63.312 C74.15,63.045 74.017,62.912 73.75,62.912 C73.45,62.912 73.183,63.062 72.95,63.362 C72.417,63.329 72.033,63.395 71.8,63.562 C71.7,63.629 71.65,63.695 71.65,63.762 C71.65,63.962 71.783,64.112 72.05,64.212 L72.95,64.212 C73.75,63.913 74.15,63.613 74.15,63.312 Z M10.25,126.312 C11.944,130.518 14.844,134.068 18.95,136.962 C25.917,141.929 35.467,144.412 47.6,144.412 C57.134,144.412 65.167,142.712 71.7,139.311 C72.35,138.971 72.984,138.621 73.6,138.261 C79.194,135 83.61,130.851 86.85,125.811 C89.55,121.544 91.217,117.078 91.85,112.412 C89.65,111.845 87.617,111.162 85.75,110.361 C81.55,108.662 76.333,105.695 70.1,101.462 L59.85,94.512 C55.517,91.745 51.567,89.679 48,88.312 C44.4,86.979 40.867,86.312 37.4,86.312 L35.9,86.312 C30.377,86.604 25.618,88.012 21.625,90.538 C19.244,92.043 17.136,93.952 15.3,96.263 C10.733,101.963 8.45,108.697 8.45,116.463 C8.45,120.073 9.05,123.356 10.25,126.312 Z M187.85,112.013 C189.172,114.555 191.272,116.272 194.15,117.163 C195.517,117.562 196.85,117.763 198.15,117.763 C200.362,117.763 202.538,117.171 204.675,115.988 C206.049,115.223 207.407,114.215 208.75,112.964 L210.25,111.464 L215.25,104.214 C215.783,103.214 216.25,102.28 216.65,101.414 C217.083,100.547 217.45,99.764 217.75,99.063 C218.417,97.33 218.983,95.68 219.45,94.113 L199.2,87.464 C197,86.13 195.55,84.297 194.85,81.964 C194.557,82.302 194.273,82.644 194,82.988 C191.13,86.559 188.997,90.668 187.6,95.313 C186.667,98.414 186.2,101.379 186.2,104.213 C186.2,105.513 186.3,106.779 186.5,108.013 C186.783,109.523 187.233,110.856 187.85,112.013 Z"></path>
     </g>
   </g>
diff --git a/docs/assets/scripts/code-previews.js b/docs/assets/scripts/code-previews.js
index 8963f564f..256f5018f 100644
--- a/docs/assets/scripts/code-previews.js
+++ b/docs/assets/scripts/code-previews.js
@@ -209,10 +209,10 @@
         }.css';\n` +
         '\n' +
         'body {\n' +
-        '  font: 16px sans-serif;\n' +
-        '  background-color: var(--sl-color-neutral-0);\n' +
-        '  color: var(--sl-color-neutral-900);\n' +
-        '  padding: 1rem;\n' +
+        '  font: var(--wa-font-size-root) sans-serif;\n' +
+        '  background-color: var(--wa-color-surface-default);\n' +
+        '  color: var(--wa-color-text-normal);\n' +
+        '  padding: var(--wa-space-m);\n' +
         '}';
 
       // Docs: https://blog.codepen.io/documentation/prefill/
diff --git a/docs/assets/scripts/docs.js b/docs/assets/scripts/docs.js
index a98bc0b31..9c3ae3099 100644
--- a/docs/assets/scripts/docs.js
+++ b/docs/assets/scripts/docs.js
@@ -73,72 +73,6 @@
   updateInert();
 })();
 
-//
-// Theme selector
-//
-(() => {
-  function getTheme() {
-    return localStorage.getItem('theme') || 'auto';
-  }
-
-  function isDark() {
-    if (theme === 'auto') {
-      return window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
-    return theme === 'dark';
-  }
-
-  function setTheme(newTheme) {
-    theme = newTheme;
-    localStorage.setItem('theme', theme);
-
-    // Update the UI
-    updateSelection();
-
-    // Toggle the dark mode class
-    document.documentElement.classList.toggle('sl-theme-dark', isDark());
-  }
-
-  function updateSelection() {
-    const menu = document.querySelector('#theme-selector sl-menu');
-    if (!menu) return;
-    [...menu.querySelectorAll('sl-menu-item')].map(item => (item.checked = item.getAttribute('value') === theme));
-  }
-
-  let theme = getTheme();
-
-  // Selection is not preserved when changing page, so update when opening dropdown
-  document.addEventListener('sl-show', event => {
-    const themeSelector = event.target.closest('#theme-selector');
-    if (!themeSelector) return;
-    updateSelection();
-  });
-
-  // Listen for selections
-  document.addEventListener('sl-select', event => {
-    const menu = event.target.closest('#theme-selector sl-menu');
-    if (!menu) return;
-    setTheme(event.detail.item.value);
-  });
-
-  // Update the theme when the preference changes
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setTheme(theme));
-
-  // Toggle with backslash
-  document.addEventListener('keydown', event => {
-    if (
-      event.key === '\\' &&
-      !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
-    ) {
-      event.preventDefault();
-      setTheme(isDark() ? 'light' : 'dark');
-    }
-  });
-
-  // Set the initial theme and sync the UI
-  setTheme(theme);
-})();
-
 //
 // Open details when printing
 //
diff --git a/docs/assets/styles/code-previews.css b/docs/assets/styles/code-previews.css
index 0fa5efacc..2a428efb6 100644
--- a/docs/assets/styles/code-previews.css
+++ b/docs/assets/styles/code-previews.css
@@ -1,21 +1,21 @@
 /* Interactive code blocks */
 .code-preview {
   position: relative;
-  border-radius: 3px;
-  background-color: var(--sl-color-neutral-50);
-  margin-bottom: 1.5rem;
+  border-radius: var(--wa-corners-1x);
+  background-color: var(--wa-color-surface-lowered);
+  margin-bottom: var(--wa-space-xl);
 }
 
 .code-preview__preview {
   position: relative;
-  border: solid 1px var(--sl-color-neutral-200);
+  border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
   border-bottom: none;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-  background-color: var(--sl-color-neutral-0);
+  border-top-left-radius: var(--wa-corners-1x);
+  border-top-right-radius: var(--wa-corners-1x);
+  background-color: var(--wa-color-surface-default);
   min-width: 20rem;
   max-width: 100%;
-  padding: 1.5rem 3.25rem 1.5rem 1.5rem;
+  padding: var(--wa-space-xl) var(--wa-space-3xl) var(--wa-space-xl) var(--wa-space-xl);
 }
 
 /* Block the preview while dragging to prevent iframes from intercepting drag events */
@@ -40,16 +40,16 @@
   bottom: 0;
   width: 1.75rem;
   font-size: 20px;
-  color: var(--sl-color-neutral-600);
-  background-color: var(--sl-color-neutral-0);
-  border-left: solid 1px var(--sl-color-neutral-200);
-  border-top-right-radius: 3px;
+  color: var(--wa-color-text-quiet);
+  background-color: var(--wa-color-surface-default);
+  border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  border-top-right-radius: var(--wa-corners-1x);
   cursor: ew-resize;
 }
 
 @media screen and (max-width: 600px) {
   .code-preview__preview {
-    padding-right: 1.5rem;
+    padding-right: var(--wa-space-xl);
   }
 
   .code-preview__resizer {
@@ -58,7 +58,7 @@
 }
 
 .code-preview__source {
-  border: solid 1px var(--sl-color-neutral-200);
+  border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
   border-bottom: none;
   border-radius: 0 !important;
   display: none;
@@ -74,9 +74,9 @@
 
 .code-preview__buttons {
   position: relative;
-  border: solid 1px var(--sl-color-neutral-200);
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
+  border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  border-bottom-left-radius: var(--wa-corners-1x);
+  border-bottom-right-radius: var(--wa-corners-1x);
   display: flex;
 }
 
@@ -86,18 +86,18 @@
   min-width: 2.5rem;
   border: none;
   border-radius: 0;
-  background: var(--sl-color-neutral-0);
+  background: var(--wa-color-surface-default);
   font: inherit;
-  font-size: 0.7rem;
-  font-weight: 500;
+  font-size: var(--wa-font-size-xs);
+  font-weight: var(--wa-font-weight-normal);
   text-transform: uppercase;
-  color: var(--sl-color-neutral-600);
+  color: var(--wa-color-text-quiet);
   padding: 0 1rem;
   cursor: pointer;
 }
 
 .code-preview__button:not(:last-of-type) {
-  border-right: solid 1px var(--sl-color-neutral-200);
+  border-right: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
 }
 
 .code-preview__button--html,
@@ -109,8 +109,8 @@
 }
 
 .code-preview__button--selected {
-  font-weight: 700;
-  color: var(--sl-color-primary-600);
+  font-weight: var(--wa-font-weight-heavy);
+  color: var(--wa-color-brand-text-on-surface);
 }
 
 .code-preview__button--codepen {
@@ -120,25 +120,25 @@
 }
 
 .code-preview__button:first-of-type {
-  border-bottom-left-radius: 3px;
+  border-bottom-left-radius: var(--wa-corners-1x);
 }
 
 .code-preview__button:last-of-type {
-  border-bottom-right-radius: 3px;
+  border-bottom-right-radius: var(--wa-corners-1x);
 }
 
 .code-preview__button:hover,
 .code-preview__button:active {
-  box-shadow: 0 0 0 1px var(--sl-color-primary-400);
+  box-shadow: 0 0 0 var(--wa-border-width-thin) var(--wa-color-brand-container-outline-muted);
   border-right-color: transparent;
-  background-color: var(--sl-color-primary-50);
-  color: var(--sl-color-primary-600);
+  background-color: var(--wa-color-brand-container-fill-muted);
+  color: var(--wa-color-brand-text-on-surface);
   z-index: 1;
 }
 
 .code-preview__button:focus-visible {
   outline: none;
-  outline: var(--sl-focus-ring);
+  outline: var(--wa-focus-ring);
   z-index: 2;
 }
 
@@ -149,7 +149,7 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  color: var(--sl-color-neutral-600);
+  color: var(--wa-color-text-quiet);
   cursor: pointer;
 }
 
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 7d1caaaa5..bd3ec2ce1 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -1,8 +1,5 @@
 :root {
-  --docs-background-color: var(--sl-color-neutral-0);
-  --docs-border-color: var(--sl-color-neutral-200);
-  --docs-border-width: 1px;
-  --docs-border-radius: var(--sl-border-radius-medium);
+  --docs-background-color: var(--wa-color-surface-raised);
   --docs-content-max-width: 860px;
   --docs-sidebar-width: 320px;
   --docs-sidebar-transition-speed: 250ms;
@@ -17,18 +14,6 @@
 :root {
   color-scheme: normal;
 
-  --sl-color-primary-50: var(--sl-color-sky-50);
-  --sl-color-primary-100: var(--sl-color-sky-100);
-  --sl-color-primary-200: var(--sl-color-sky-200);
-  --sl-color-primary-300: var(--sl-color-sky-300);
-  --sl-color-primary-400: var(--sl-color-sky-400);
-  --sl-color-primary-500: var(--sl-color-sky-500);
-  --sl-color-primary-600: var(--sl-color-sky-600);
-  --sl-color-primary-700: var(--sl-color-sky-700);
-  --sl-color-primary-800: var(--sl-color-sky-800);
-  --sl-color-primary-900: var(--sl-color-sky-900);
-  --sl-color-primary-950: var(--sl-color-sky-950);
-
   --docs-overlay-color: hsl(240 3.8% 46.1% / 33%);
   --docs-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
   --docs-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 24%);
@@ -37,21 +22,9 @@
   --docs-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 24%);
 }
 
-/* Dark theme */
-.sl-theme-dark {
-  color-scheme: dark;
-
-  --docs-overlay-color: hsl(0 0% 0% / 66%);
-  --docs-shadow-x-small: 0 1px 2px rgb(0 0 0 / 36%);
-  --docs-shadow-small: 0 1px 2px rgb(0 0 0 / 48%);
-  --docs-shadow-medium: 0 2px 4px rgb(0 0 0 / 48%);
-  --docs-shadow-large: 0 2px 8px rgb(0 0 0 / 48%);
-  --docs-shadow-x-large: 0 4px 16px rgb(0 0 0 / 48%);
-}
-
 /* Utils */
-html.sl-theme-dark .only-light,
-html:not(.sl-theme-dark) .only-dark {
+html.wa-theme-dark .only-light,
+html:not(.wa-theme-dark) .only-dark {
   display: none !important;
 }
 
@@ -91,13 +64,13 @@ button:focus {
 
 a:focus-visible,
 button:focus-visible {
-  outline: var(--sl-focus-ring);
-  outline-offset: var(--sl-focus-ring-offset);
+  outline: var(--wa-focus-ring);
+  outline-offset: var(--wa-focus-ring-offset);
 }
 
 ::selection {
-  background-color: var(--sl-color-primary-200);
-  color: var(--sl-color-neutral-900);
+  background-color: var(--wa-color-selection-background);
+  color: var(--wa-color-selection-text);
 }
 
 /* Show custom elements only after they're registered */
@@ -114,18 +87,18 @@ button:focus-visible {
 html {
   height: 100%;
   box-sizing: border-box;
-  line-height: var(--sl-line-height-normal);
+  line-height: var(--wa-font-line-height-regular);
   padding: 0;
   margin: 0;
 }
 
 body {
   height: 100%;
-  font: 16px var(--sl-font-sans);
-  font-weight: var(--sl-font-weight-normal);
+  font: 16px var(--wa-font-family-body);
+  font-weight: var(--wa-font-weight-normal);
   background-color: var(--docs-background-color);
-  line-height: var(--sl-line-height-normal);
-  color: var(--sl-color-neutral-900);
+  line-height: var(--wa-font-line-height-regular);
+  color: var(--wa-color-text-normal);
   padding: 0;
   margin: 0;
   overflow-x: hidden;
@@ -140,8 +113,8 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--sl-font-sans);
-  font-weight: var(--sl-font-weight-semibold);
+  font-family: var(--wa-font-family-body);
+  font-weight: var(--wa-font-weight-medium);
   margin: 3rem 0 1.5rem 0;
 }
 
@@ -150,12 +123,12 @@ h1:first-of-type {
 }
 
 h1 {
-  font-size: 2.5rem;
+  font-size: var(--wa-font-size-2xl);
 }
 
 h2 {
   font-size: 1.875rem;
-  border-bottom: solid var(--docs-border-width) var(--docs-border-color);
+  border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
 }
 
 h3 {
@@ -183,7 +156,7 @@ img {
 }
 
 .badges img {
-  border-radius: var(--sl-border-radius-medium);
+  border-radius: var(--wa-corners-1x);
 }
 
 .callout img,
@@ -194,20 +167,20 @@ details img {
 }
 
 details pre {
-  border: solid var(--docs-border-width) var(--docs-border-color);
+  border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
 }
 
 a {
-  color: var(--sl-color-primary-700);
+  color: var(--wa-color-text-link);
 }
 
 a:hover {
-  color: var(--sl-color-primary-800);
+  color: color-mix(in oklch, var(--wa-color-text-link) 100%, black 12%);
 }
 
 abbr[title] {
   text-decoration: none;
-  border-bottom: dashed 1px var(--sl-color-primary-700);
+  border-bottom: dashed 1px var(--wa-color-text-link);
   cursor: help;
 }
 
@@ -216,73 +189,70 @@ em {
 }
 
 strong {
-  font-weight: var(--sl-font-weight-bold);
+  font-weight: var(--wa-font-weight-heavy);
 }
 
 code {
-  font-family: var(--sl-font-mono);
+  font-family: var(--wa-font-family-code);
   font-size: 0.9125em;
   background-color: rgba(0 0 0 / 0.025);
   background-blend-mode: darken;
-  border-radius: var(--docs-border-radius);
+  border-radius: var(--wa-corners-1x);
   padding: 0.125em 0.25em;
 }
 
-.sl-theme-dark code {
-  background-color: rgba(255 255 255 / 0.03);
-}
-
 kbd {
-  background: var(--sl-color-neutral-100);
-  border: solid 1px var(--sl-color-neutral-200);
-  box-shadow: inset 0 1px 0 0 var(--sl-color-neutral-0), inset 0 -1px 0 0 var(--sl-color-neutral-200);
-  font-family: var(--sl-font-mono);
+  background: var(--wa-color-neutral-container-fill-muted);
+  border: solid 1px var(--wa-color-neutral-container-outline-muted);
+  box-shadow: inset 0 1px 0 1px var(--wa-color-tint-white), 0 1px 0 0 var(--wa-color-tint-black);
+  font-family: var(--wa-font-family-code);
   font-size: 0.9125em;
-  border-radius: var(--docs-border-radius);
-  color: var(--sl-color-neutral-800);
+  border-radius: var(--wa-corners-1x);
+  color: var(--wa-color-neutral-text-on-muted);
   padding: 0.125em 0.4em;
 }
 
 ins {
-  background-color: var(--sl-color-green-200);
-  color: var(--sl-color-green-900);
-  border-radius: var(--docs-border-radius);
+  background-color: var(--wa-color-success-container-fill-muted);
+  color: var(--wa-color-success-text-on-muted);
+  border-radius: var(--wa-corners-1x);
   text-decoration: none;
   padding: 0.125em 0.25em;
 }
 
 s {
-  background-color: var(--sl-color-red-200);
-  color: var(--sl-color-red-900);
-  border-radius: var(--docs-border-radius);
+  background-color: var(--wa-color-danger-container-fill-muted);
+  color: var(--wa-color-danger-text-on-muted);
+  border-radius: var(--wa-corners-1x);
   text-decoration: none;
   padding: 0.125em 0.25em;
 }
 
 mark {
-  background-color: var(--sl-color-yellow-200);
-  border-radius: var(--docs-border-radius);
+  background-color: var(--wa-color-warning-container-fill-muted);
+  color: inherit;
+  border-radius: var(--wa-corners-1x);
   padding: 0.125em 0.25em;
 }
 
 hr {
   border: none;
-  border-bottom: solid var(--docs-border-width) var(--docs-border-color);
+  border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
   margin: calc(var(--docs-content-vertical-spacing) * 2) 0;
 }
 
 /* Block quotes */
 blockquote {
   position: relative;
-  font-family: var(--sl-font-serif);
-  font-size: 1.33rem;
+  font-family: var(--wa-font-family-longform);
+  font-size: var(--wa-font-size-l);
   font-style: italic;
-  color: var(--sl-color-neutral-700);
-  background-color: var(--sl-color-neutral-100);
-  border-radius: var(--docs-border-radius);
-  border-left: solid 6px var(--sl-color-neutral-300);
-  padding: 1.5rem;
-  margin: 0 0 1.5rem 0;
+  color: var(--wa-color-text-normal);
+  background-color: var(--wa-color-surface-lowered);
+  border-radius: var(--wa-corners-1x);
+  border-left: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  padding: var(--wa-space-xl);
+  margin: 0 0 var(--wa-space-xl) 0;
 }
 
 blockquote > :first-child {
@@ -297,7 +267,7 @@ blockquote > :last-child {
 ul,
 ol {
   padding: 0;
-  margin: 0 0 var(--docs-content-vertical-spacing) 2rem;
+  margin: 0 0 var(--docs-content-vertical-spacing) var(--wa-space-2xl);
 }
 
 ul {
@@ -306,12 +276,12 @@ ul {
 
 li {
   padding: 0;
-  margin: 0 0 0.25rem 0;
+  margin: 0 0 var(--wa-space-2xs) 0;
 }
 
 li ul,
 li ol {
-  margin-top: 0.25rem;
+  margin-top: var(--wa-space-2xs);
 }
 
 ul ul:last-child,
@@ -321,6 +291,11 @@ ol ol:last-child {
   margin-bottom: 0;
 }
 
+/* Color matching logos */
+svg.wordmark {
+  color: var(--wa-color-brand-text-on-surface);
+}
+
 /* Anchor headings */
 .anchor-heading {
   position: relative;
@@ -335,7 +310,7 @@ ol ol:last-child {
 
 .anchor-heading a::after {
   content: '#';
-  color: var(--sl-color-primary-700);
+  color: color-mix(in oklch, var(--wa-color-text-link) 100%, black 12%);
   margin-inline: 0.5rem;
   opacity: 0;
   transition: 100ms opacity;
@@ -365,17 +340,17 @@ table {
 }
 
 table tr {
-  border-bottom: solid var(--docs-border-width) var(--docs-border-color);
+  border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
 }
 
 table th {
-  font-weight: var(--sl-font-weight-semibold);
+  font-weight: var(--wa-font-weight-medium);
   text-align: left;
 }
 
 table td,
 table th {
-  line-height: var(--sl-line-height-normal);
+  line-height: var(--wa-font-line-height-regular);
   padding: 1rem 1rem;
 }
 
@@ -411,18 +386,14 @@ th.table-description {
 /* Code blocks */
 pre {
   position: relative;
-  background-color: var(--sl-color-neutral-50);
-  font-family: var(--sl-font-mono);
-  color: var(--sl-color-neutral-900);
-  border-radius: var(--docs-border-radius);
+  background-color: var(--wa-color-surface-lowered);
+  font-family: var(--wa-font-family-code);
+  color: var(--wa-color-text-normal);
+  border-radius: var(--wa-corners-1x);
   padding: 1rem;
   white-space: pre;
 }
 
-.sl-theme-dark pre {
-  background-color: var(--sl-color-neutral-50);
-}
-
 pre:not(:last-child) {
   margin-bottom: 1.5rem;
 }
@@ -440,7 +411,7 @@ pre > code {
 }
 
 pre .token.comment {
-  color: var(--sl-color-neutral-600);
+  color: var(--wa-color-neutral-40);
 }
 
 pre .token.prolog,
@@ -448,7 +419,7 @@ pre .token.doctype,
 pre .token.cdata,
 pre .token.operator,
 pre .token.punctuation {
-  color: var(--sl-color-neutral-700);
+  color: var(--wa-color-neutral-40);
 }
 
 .namespace {
@@ -459,12 +430,12 @@ pre .token.property,
 pre .token.keyword,
 pre .token.tag,
 pre .token.url {
-  color: var(--sl-color-blue-700);
+  color: var(--wa-color-blue-40);
 }
 
 pre .token.symbol,
 pre .token.deleted {
-  color: var(--sl-color-red-700);
+  color: var(--wa-color-red-40);
 }
 
 pre .token.boolean,
@@ -475,24 +446,24 @@ pre .token.string,
 pre .token.char,
 pre .token.builtin,
 pre .token.inserted {
-  color: var(--sl-color-emerald-700);
+  color: var(--wa-color-green-40);
 }
 
 pre .token.atrule,
 pre .token.attr-value,
 pre .token.number,
 pre .token.variable {
-  color: var(--sl-color-violet-700);
+  color: #5c47ae; /* purple-40 */
 }
 
 pre .token.function,
 pre .token.class-name,
 pre .token.regex {
-  color: var(--sl-color-orange-700);
+  color: #c86d2c; /* orange-40 */
 }
 
 pre .token.important {
-  color: var(--sl-color-red-700);
+  color: var(--wa-color-red-40);
 }
 
 pre .token.important,
@@ -510,22 +481,22 @@ pre .token.italic {
   top: 0;
   right: 0;
   white-space: normal;
-  color: var(--sl-color-neutral-800);
+  color: var(--wa-color-neutral-text-on-vivid);
   transition: 150ms opacity, 150ms scale;
 }
 
 .copy-code-button::part(button) {
-  background-color: var(--sl-color-neutral-50);
-  border-radius: 0 var(--docs-border-radius) 0 var(--docs-border-radius);
+  background-color: var(--wa-color-neutral-element-fill-vivid);
+  border-radius: 0 var(--wa-corners-1x) 0 var(--wa-corners-1x);
   padding: 0.75rem;
 }
 
 .copy-code-button::part(button):hover {
-  background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 3%);
+  background-color: color-mix(in oklch, var(--wa-color-neutral-element-fill-vivid), black 4%);
 }
 
 .copy-code-button::part(button):active {
-  background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 6%);
+  background-color: color-mix(in oklch, var(--wa-color-neutral-element-fill-vivid), black 8%);
 }
 
 pre .copy-code-button {
@@ -542,11 +513,11 @@ pre:hover .copy-code-button,
 /* Callouts */
 .callout {
   position: relative;
-  background-color: var(--sl-color-neutral-100);
-  border-left: solid 4px var(--sl-color-neutral-500);
-  border-radius: var(--docs-border-radius);
-  color: var(--sl-color-neutral-800);
-  padding: 1.5rem 1.5rem 1.5rem 2rem;
+  background-color: var(--wa-color-neutral-container-fill-muted);
+  border-left: solid 4px var(--wa-color-neutral-container-outline-muted);
+  border-radius: var(--wa-corners-1x);
+  color: var(--wa-color-neutral-text-on-muted);
+  padding: var(--wa-space-xl) var(--wa-space-xl) var(--wa-space-xl) var(--wa-space-2xl);
   margin-bottom: var(--docs-content-vertical-spacing);
 }
 
@@ -559,9 +530,9 @@ pre:hover .copy-code-button,
 }
 
 .callout--tip {
-  background-color: var(--sl-color-primary-100);
-  border-left-color: var(--sl-color-primary-600);
-  color: var(--sl-color-primary-800);
+  background-color: var(--wa-color-brand-container-fill-muted);
+  border-left-color: var(--wa-color-brand-element-outline-muted);
+  color: var(--wa-color-brand-text-on-muted);
 }
 
 .callout::before {
@@ -574,38 +545,40 @@ pre:hover .copy-code-button,
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: var(--sl-font-serif);
-  font-weight: var(--sl-font-weight-bold);
-  color: var(--sl-color-neutral-0);
+  font-family: var(--wa-font-family-longform);
+  font-weight: var(--wa-font-weight-heavy);
   clip-path: circle(50% at 50% 50%);
 }
 
 .callout--tip::before {
   content: 'i';
   font-style: italic;
-  background-color: var(--sl-color-primary-600);
+  background-color: var(--wa-color-brand-element-outline-muted);
+  color: var(--wa-color-brand-text-on-muted);
 }
 
 .callout--warning {
-  background-color: var(--sl-color-warning-100);
-  border-left-color: var(--sl-color-warning-600);
-  color: var(--sl-color-warning-800);
+  background-color: var(--wa-color-warning-container-fill-muted);
+  border-left-color: var(--wa-color-warning-element-outline-muted);
+  color: var(--wa-color-warning-text-on-muted);
 }
 
 .callout--warning::before {
   content: '!';
-  background-color: var(--sl-color-warning-600);
+  background-color: var(--wa-color-warning-element-outline-muted);
+  color: var(--wa-color-warning-text-on-muted);
 }
 
 .callout--danger {
-  background-color: var(--sl-color-danger-100);
-  border-left-color: var(--sl-color-danger-600);
-  color: var(--sl-color-danger-800);
+  background-color: var(--wa-color-danger-container-fill-muted);
+  border-left-color: var(--wa-color-danger-element-outline-muted);
+  color: var(--wa-color-danger-text-on-muted);
 }
 
 .callout--danger::before {
   content: '‼';
-  background-color: var(--sl-color-danger-600);
+  background-color: var(--wa-color-danger-element-outline-muted);
+  color: var(--wa-color-danger-text-on-muted);
 }
 
 .callout + .callout {
@@ -621,10 +594,10 @@ pre:hover .copy-code-button,
   float: right;
   min-width: 300px;
   max-width: 50%;
-  background: var(--sl-color-neutral-100);
-  border-radius: var(--docs-border-radius);
-  padding: 1rem;
-  margin-left: 1rem;
+  background: var(--wa-color-surface-lowered);
+  border-radius: var(--wa-corners-1x);
+  padding: var(--wa-space-m);
+  margin-left: var(--wa-space-m);
 }
 
 .content aside > :first-child {
@@ -646,23 +619,23 @@ pre:hover .copy-code-button,
 
 /* Details */
 .content details {
-  background-color: var(--sl-color-neutral-100);
-  border-radius: var(--docs-border-radius);
-  padding: 1rem;
+  background-color: var(--wa-color-surface-lowered);
+  border-radius: var(--wa-corners-1x);
+  padding: var(--wa-space-m);
   margin: 0 0 var(--docs-content-vertical-spacing) 0;
 }
 
 .content details summary {
-  font-weight: var(--sl-font-weight-semibold);
-  border-radius: var(--docs-border-radius);
-  padding: 1rem;
-  margin: -1rem;
+  font-weight: var(--wa-font-weight-medium);
+  border-radius: var(--wa-corners-1x);
+  padding: var(--wa-space-m);
+  margin: calc(-1 * var(--wa-space-m));
   cursor: pointer;
   user-select: none;
 }
 
 .content details summary span {
-  padding-left: 0.5rem;
+  padding-left: var(--wa-space-xs);
 }
 
 .content details[open] summary {
@@ -672,7 +645,7 @@ pre:hover .copy-code-button,
 }
 
 .content details[open] summary:focus-visible {
-  border-radius: var(--docs-border-radius);
+  border-radius: var(--wa-corners-1x);
 }
 
 .content details > :last-child {
@@ -684,7 +657,7 @@ pre:hover .copy-code-button,
 }
 
 .content details + details {
-  margin-top: calc(-1 * var(--docs-content-vertical-spacing) + (2 * var(--docs-border-width)));
+  margin-top: calc(-1 * var(--docs-content-vertical-spacing) + (2 * var(--wa-border-width-thin)));
 }
 
 /* Sidebar */
@@ -697,7 +670,7 @@ pre:hover .copy-code-button,
   z-index: 20;
   width: var(--docs-sidebar-width);
   background-color: var(--docs-background-color);
-  border-right: solid var(--docs-border-width) var(--docs-border-color);
+  border-right: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
   border-radius: 0;
   padding: 2rem;
   margin: 0;
@@ -716,11 +689,11 @@ pre:hover .copy-code-button,
 }
 
 #sidebar:hover::-webkit-scrollbar-thumb {
-  background: var(--sl-color-neutral-400);
+  background: var(--wa-color-neutral-60);
 }
 
 #sidebar:hover::-webkit-scrollbar-track {
-  background: var(--sl-color-neutral-100);
+  background: var(--wa-color-neutral-95);
 }
 
 #sidebar > header {
@@ -740,10 +713,10 @@ pre:hover .copy-code-button,
 }
 
 #sidebar nav h2 {
-  font-size: var(--sl-font-size-medium);
-  font-weight: var(--sl-font-weight-semibold);
-  border-bottom: solid var(--docs-border-width) var(--docs-border-color);
-  margin: 1.5rem 0 0.5rem 0;
+  font-size: var(--wa-font-size-m);
+  font-weight: var(--wa-font-weight-medium);
+  border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  margin: var(--wa-space-xl) 0 var(--wa-space-xs) 0;
 }
 
 #sidebar ul {
@@ -769,12 +742,12 @@ pre:hover .copy-code-button,
 }
 
 #sidebar ul li a:not(.active-link):hover {
-  color: var(--sl-color-primary-700);
+  color: var(--wa-color-text-link);
 }
 
 #sidebar nav .active-link {
-  color: var(--sl-color-primary-700);
-  border-bottom: dashed 1px var(--sl-color-primary-700);
+  color: var(--wa-color-text-link);
+  border-bottom: dashed 1px var(--wa-color-text-link);
 }
 
 #sidebar > header img {
@@ -795,8 +768,8 @@ pre:hover .copy-code-button,
 }
 
 .sidebar-version {
-  font-size: var(--sl-font-size-x-small);
-  color: var(--sl-color-neutral-500);
+  font-size: var(--wa-font-size-s);
+  color: var(--wa-color-text-quiet);
   text-align: right;
   margin-top: -0.5rem;
   margin-right: 1rem;
@@ -866,9 +839,9 @@ main {
   position: sticky;
   top: 5rem;
   max-height: calc(100vh - 6rem);
-  font-size: var(--sl-font-size-small);
+  font-size: var(--wa-font-size-s);
   line-height: 1.33;
-  border-left: solid 1px var(--sl-color-neutral-200);
+  border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
   list-style: none;
   padding: 1rem 0;
   margin: 0;
@@ -897,22 +870,22 @@ main {
 }
 
 .content__toc a {
-  color: var(--sl-color-neutral-700);
+  color: var(--wa-color-text-normal);
   text-decoration: none;
 }
 
 .content__toc a:hover {
-  color: var(--sl-color-primary-700);
+  color: var(--wa-color-text-link);
 }
 
 .content__toc a.active {
-  color: var(--sl-color-primary-700);
-  border-bottom: dashed 1px var(--sl-color-primary-700);
+  color: var(--wa-color-brand-text-on-surface);
+  border-bottom: dashed 1px var(--wa-color-brand-text-on-surface);
 }
 
 .content__toc .top a {
-  font-weight: var(--sl-font-weight-semibold);
-  color: var(--sl-color-neutral-500);
+  font-weight: var(--wa-font-weight-medium);
+  color: var(--wa-color-text-quiet);
 }
 
 @media screen and (max-width: 1024px) {
@@ -932,7 +905,7 @@ main {
     gap: 1rem 1.5rem;
     position: static;
     border: none;
-    border-bottom: solid 1px var(--sl-color-neutral-200);
+    border-bottom: solid 1px var(--wa-color-surface-outline);
     border-radius: 0;
     padding: 1rem 1.5rem 1rem 0.5rem; /* extra right padding to hide the fade effect */
     margin-top: 1rem;
@@ -946,7 +919,7 @@ main {
     bottom: 1rem; /* don't cover the scrollbar */
     right: 0;
     width: 2rem;
-    background: linear-gradient(90deg, rgba(0 0 0 / 0) 0%, var(--sl-color-neutral-0) 100%);
+    background: linear-gradient(90deg, rgba(0 0 0 / 0) 0%, var(--wa-color-surface-default) 100%);
   }
 
   .content__toc li {
@@ -975,14 +948,14 @@ main {
   left: 0.25rem;
   height: auto;
   width: auto;
-  color: black;
+  color: var(--wa-color-neutral-container-fill-vivid);
   border: none;
   border-radius: 50%;
-  background: var(--sl-color-neutral-0);
+  background: var(--wa-color-surface-default);
   padding: 0.5rem;
   margin: 0;
   cursor: pointer;
-  transition: 250ms scale ease, 250ms rotate ease;
+  transition: 250ms rotate ease;
 }
 
 @media screen and (max-width: 900px) {
@@ -991,14 +964,6 @@ main {
   }
 }
 
-.sl-theme-dark #menu-toggle {
-  color: white;
-}
-
-#menu-toggle:hover {
-  scale: 1.1;
-}
-
 #menu-toggle svg {
   width: 1.25rem;
   height: 1.25rem;
@@ -1018,116 +983,11 @@ html.sidebar-open #menu-toggle {
   text-align: center;
   text-decoration: none;
   border-radius: 9999px;
-  background: var(--sl-color-neutral-0);
-  color: var(--sl-color-neutral-1000);
+  background: var(--wa-color-surface-default);
+  color: var(--wa-color-text-normal);
   padding: 0.5rem;
 }
 
-/* Icon toolbar */
-#icon-toolbar {
-  display: flex;
-  position: fixed;
-  top: 0;
-  right: 1rem;
-  z-index: 10;
-  background: var(--sl-color-neutral-800);
-  border-bottom-left-radius: calc(var(--docs-border-radius) * 2);
-  border-bottom-right-radius: calc(var(--docs-border-radius) * 2);
-  padding: 0.125rem 0.25rem;
-}
-
-#icon-toolbar button,
-#icon-toolbar a {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  width: auto;
-  height: auto;
-  background: transparent;
-  border: none;
-  border-radius: var(--docs-border-radius);
-  font-size: 1.25rem;
-  color: var(--sl-color-neutral-0);
-  text-decoration: none;
-  padding: 0.5rem;
-  margin: 0;
-  cursor: pointer;
-  transition: 250ms scale ease;
-}
-
-#theme-selector:not(:defined) {
-  /* Hide when not defined to prevent extra wide icon toolbar while loading */
-  display: none;
-}
-
-#theme-selector sl-menu {
-  /* Set an initial size to prevent width being too small when first opening on small screen width */
-  width: 140px;
-}
-
-#theme-selector sl-button {
-  transition: 250ms scale ease;
-}
-
-#theme-selector sl-button::part(base) {
-  color: var(--sl-color-neutral-0);
-}
-
-#theme-selector sl-button::part(label) {
-  display: flex;
-  padding: 0.5rem;
-}
-
-#theme-selector sl-icon {
-  font-size: 1.25rem;
-}
-
-.sl-theme-dark #theme-selector sl-button::part(base) {
-  color: var(--sl-color-neutral-1000);
-}
-
-.sl-theme-dark #icon-toolbar {
-  background: var(--sl-color-neutral-200);
-}
-
-.sl-theme-dark #icon-toolbar button,
-.sl-theme-dark #icon-toolbar a {
-  color: var(--sl-color-neutral-1000);
-}
-
-#icon-toolbar button:hover,
-#icon-toolbar a:hover,
-#theme-selector sl-button:hover {
-  scale: 1.1;
-}
-
-#icon-toolbar a:not(:last-child),
-#icon-toolbar button:not(:last-child) {
-  margin-right: 0.25rem;
-}
-
-@media screen and (max-width: 900px) {
-  #icon-toolbar {
-    right: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  #icon-toolbar button,
-  #icon-toolbar a {
-    font-size: 1rem;
-    padding: 0.5rem;
-  }
-
-  #theme-selector sl-icon {
-    font-size: 1rem;
-  }
-}
-
-/* Sidebar addons */
-#sidebar-addons:not(:empty) {
-  margin-bottom: var(--docs-content-vertical-spacing);
-}
-
 /* Print styles */
 @media print {
   a:not(.anchor-heading)[href]::after {
@@ -1137,7 +997,7 @@ html.sidebar-open #menu-toggle {
   details,
   pre,
   .callout {
-    border: solid var(--docs-border-width) var(--docs-border-color);
+    border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
   }
 
   details summary {
@@ -1154,7 +1014,7 @@ html.sidebar-open #menu-toggle {
   }
 
   .callout::before {
-    border: solid var(--docs-border-width) var(--docs-border-color);
+    border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
   }
 
   .component-page__navigation,
@@ -1175,9 +1035,9 @@ html.sidebar-open #menu-toggle {
   }
 
   .code-preview__source-group {
-    border-bottom: solid 1px var(--sl-color-neutral-200);
-    border-bottom-left-radius: var(--sl-border-radius-medium);
-    border-bottom-right-radius: var(--sl-border-radius-medium);
+    border-bottom: solid 1px var(--wa-border-width-thin);
+    border-bottom-left-radius: var(--wa-corners-1x);
+    border-bottom-right-radius: var(--wa-corners-1x);
   }
 
   #sidebar {
@@ -1202,12 +1062,7 @@ html.sidebar-open #menu-toggle {
 }
 
 .splash-start {
-  min-width: 420px;
-}
-
-.splash-start h1 {
-  font-size: var(--sl-font-size-large);
-  font-weight: var(--sl-font-weight-normal);
+  min-width: 440px;
 }
 
 .splash li img {
@@ -1228,12 +1083,13 @@ html.sidebar-open #menu-toggle {
   height: auto;
 }
 
-.splash-logo {
+.splash .wordmark {
   max-width: 22rem;
 }
 
 .splash-start h1:first-of-type {
-  font-size: var(--sl-font-size-large);
+  font-size: var(--wa-font-size-l);
+  font-weight: var(--wa-font-weight-normal);
   margin: 0 0 0.5rem 0;
 }
 
@@ -1274,18 +1130,18 @@ html.sidebar-open #menu-toggle {
 
 .component-header__tag code {
   background: none;
-  color: var(--sl-color-neutral-600);
-  font-size: var(--sl-font-size-large);
+  color: var(--wa-color-text-quiet);
+  font-size: var(--wa-font-size-l);
   padding: 0;
   margin: 0;
 }
 
 .component-header__info {
-  margin-bottom: var(--sl-spacing-x-large);
+  margin-bottom: var(--wa-space-2xl);
 }
 
 .component-summary {
-  font-size: var(--sl-font-size-large);
+  font-size: var(--wa-font-size-l);
   line-height: 1.6;
   margin: 2rem 0;
 }
@@ -1302,15 +1158,15 @@ html.sidebar-open #menu-toggle {
 }
 
 .repo-button--github sl-icon {
-  color: var(--sl-color-neutral-700);
+  color: var(--wa-color-neutral-40);
 }
 
 .repo-button--star sl-icon {
-  color: var(--sl-color-yellow-500);
+  color: var(--wa-color-yellow-80);
 }
 
 .repo-button--twitter sl-icon {
-  color: var(--sl-color-sky-500);
+  color: var(--wa-color-blue-70);
 }
 
 @media screen and (max-width: 400px) {
@@ -1325,17 +1181,22 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
   white-space: nowrap;
 }
 
-/* Border radius demo */
-.border-radius-demo {
+/* Border demos */
+.border-demo {
+  height: 60px;
+  border-left: solid 1px var(--wa-color-brand-element-fill-vivid);
+}
+
+.corner-demo {
   width: 3rem;
   height: 3rem;
-  background: var(--sl-color-primary-600);
+  background: var(--wa-color-brand-element-fill-vivid);
 }
 
 /* Transition demo */
 .transition-demo {
   position: relative;
-  background: var(--sl-color-neutral-200);
+  background: var(--wa-color-neutral-container-fill-muted);
   width: 8rem;
   height: 2rem;
 }
@@ -1343,7 +1204,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
 .transition-demo:after {
   content: '';
   position: absolute;
-  background-color: var(--sl-color-primary-600);
+  background-color: var(--wa-color-brand-element-fill-vivid);
   top: 0;
   left: 0;
   width: 0;
@@ -1358,12 +1219,11 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
 
 /* Spacing demo */
 .spacing-demo {
-  width: 100px;
-  background: var(--sl-color-primary-600);
+  background: var(--wa-color-brand-element-fill-vivid);
 }
 
-/* Elevation demo */
-.elevation-demo {
+/* Shadow demo */
+.shadow-demo {
   background: transparent;
   border-radius: 3px;
   width: 4rem;
@@ -1375,33 +1235,32 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
 .color-palette {
   display: grid;
   grid-template-columns: 200px repeat(11, 1fr);
-  gap: 1rem var(--sl-spacing-2x-small);
-  margin: 2rem 0;
+  gap: var(--wa-space-m) 1px;
+  margin: var(--wa-space-2xl) 0;
 }
 
 .color-palette__name {
-  font-size: var(--sl-font-size-medium);
-  font-weight: var(--sl-font-weight-semibold);
+  font-weight: var(--wa-font-weight-medium);
   grid-template-columns: repeat(11, 1fr);
 }
 
 .color-palette__name code {
   background: none;
-  font-size: var(--sl-font-size-x-small);
+  font-size: var(--wa-font-size-s);
 }
 
 .color-palette__example {
-  font-size: var(--sl-font-size-x-small);
+  font-size: var(--wa-font-size-s);
   text-align: center;
 }
 
 .color-palette__swatch {
   height: 3rem;
-  border-radius: var(--sl-border-radius-small);
+  border-radius: var(--wa-corners-half);
 }
 
 .color-palette__swatch--border {
-  box-shadow: inset 0 0 0 1px var(--sl-color-neutral-300);
+  box-shadow: inset 0 0 0 1px var(--wa-color-surface-outline);
 }
 
 @media screen and (max-width: 1200px) {
diff --git a/docs/assets/styles/search.css b/docs/assets/styles/search.css
index c5a7d17e5..ba8660492 100644
--- a/docs/assets/styles/search.css
+++ b/docs/assets/styles/search.css
@@ -1,32 +1,29 @@
 /* Search plugin */
-:root,
-:root.sl-theme-dark {
-  --docs-search-box-background: var(--sl-color-neutral-0);
-  --docs-search-box-border-width: 1px;
-  --docs-search-box-border-color: var(--sl-color-neutral-300);
-  --docs-search-box-color: var(--sl-color-neutral-600);
-  --docs-search-dialog-background: var(--sl-color-neutral-0);
-  --docs-search-border-width: var(--docs-border-width);
-  --docs-search-border-color: var(--docs-border-color);
-  --docs-search-text-color: var(--sl-color-neutral-900);
-  --docs-search-text-color-muted: var(--sl-color-neutral-500);
-  --docs-search-font-weight-normal: var(--sl-font-weight-normal);
-  --docs-search-font-weight-semibold: var(--sl-font-weight-semibold);
-  --docs-search-border-radius: calc(2 * var(--docs-border-radius));
-  --docs-search-accent-color: var(--sl-color-primary-600);
-  --docs-search-icon-color: var(--sl-color-neutral-500);
-  --docs-search-icon-color-active: var(--sl-color-neutral-600);
-  --docs-search-shadow: var(--docs-shadow-x-large);
-  --docs-search-result-background-hover: var(--sl-color-neutral-100);
-  --docs-search-result-color-hover: var(--sl-color-neutral-900);
-  --docs-search-result-background-active: var(--sl-color-primary-600);
-  --docs-search-result-color-active: var(--sl-color-neutral-0);
-  --docs-search-focus-ring: var(--sl-focus-ring);
-  --docs-search-overlay-background: rgb(0 0 0 / 0.33);
-}
+:root {
+  --docs-search-box-background: var(--wa-form-controls-background);
+  --docs-search-box-border-width: var(--wa-form-controls-border-width);
+  --docs-search-box-border-color: var(--wa-form-controls-color-resting);
+  --docs-search-box-color: var(--wa-form-controls-placeholder-color);
 
-:root.sl-theme-dark {
-  --docs-search-overlay-background: rgb(71 71 71 / 0.33);
+  --docs-search-dialog-background: var(--wa-color-surface-raised);
+  --docs-search-border-width: var(--wa-border-width-thin);
+  --docs-search-border-color: var(--wa-color-surface-outline);
+  --docs-search-text-color: var(--wa-color-text-normal);
+  --docs-search-text-color-muted: var(--wa-color-text-quiet);
+  --docs-search-font-weight-normal: var(--wa-font-weight-normal);
+  --docs-search-font-weight-semibold: var(--wa-font-weight-medium);
+  --docs-search-border-radius: calc(2 * var(--wa-corners-1x));
+
+  --docs-search-accent-color: var(--wa-color-brand-text-on-surface);
+  --docs-search-icon-color: var(--wa-color-neutral-element-fill-vivid);
+  --docs-search-icon-color-active: color-mix(in lch, var(--wa-color-neutral-element-fill-vivid), 8% black);
+  --docs-search-shadow: var(--wa-shadow-level-3);
+  --docs-search-result-background-hover: var(--wa-color-neutral-element-fill-muted);
+  --docs-search-result-color-hover: var(--wa-color-neutral-text-on-muted);
+  --docs-search-result-background-active: var(--wa-color-brand-element-fill-vivid);
+  --docs-search-result-color-active: var(--wa-color-brand-text-on-vivid);
+  --docs-search-focus-ring: var(--wa-focus-ring);
+  --docs-search-overlay-background: rgb(0 0 0 / 0.33);
 }
 
 body.search-visible {
@@ -47,7 +44,7 @@ body.search-visible {
   font: inherit;
   color: var(--docs-search-box-color);
   padding: 0.75rem 1rem;
-  margin: var(--sl-spacing-large) 0;
+  margin: var(--wa-spacing-l) 0;
   cursor: pointer;
 }
 
diff --git a/docs/pages/experimental/themer.md b/docs/pages/experimental/themer.md
new file mode 100644
index 000000000..42d28de61
--- /dev/null
+++ b/docs/pages/experimental/themer.md
@@ -0,0 +1,7 @@
+---
+meta:
+  title: Themer
+  description: TODO
+---
+
+# Themer Goes Here
diff --git a/docs/pages/index.md b/docs/pages/index.md
index 53dad4e2e..1e8e13b6d 100644
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -7,7 +7,7 @@ toc: false
 
 <div class="splash">
 <div class="splash-start">
-<img class="splash-logo" src="/assets/images/wordmark.svg" alt="Shoelace">
+{% include 'workmark.njk' %}
 
 # <sl-visually-hidden>Shoelace:</sl-visually-hidden> A forward-thinking library of web components.
 
diff --git a/docs/pages/tokens/border-radius.md b/docs/pages/tokens/border-radius.md
deleted file mode 100644
index 67a37977b..000000000
--- a/docs/pages/tokens/border-radius.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-meta:
-  title: Border Radius
-  description: Border radius tokens are used to give sharp edges a more subtle, rounded effect.
----
-
-# Border Radius Tokens
-
-Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
-
-| Token                        | Value           | Example                                                                                                  |
-| ---------------------------- | --------------- | -------------------------------------------------------------------------------------------------------- |
-| `--sl-border-radius-small`   | 0.1875rem (3px) | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-small);"></div>             |
-| `--sl-border-radius-medium`  | 0.25rem (4px)   | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-medium);"></div>            |
-| `--sl-border-radius-large`   | 0.5rem (8px)    | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-large);"></div>             |
-| `--sl-border-radius-x-large` | 1rem (16px)     | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-x-large);"></div>           |
-| `--sl-border-radius-circle`  | 50%             | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-circle);"></div>            |
-| `--sl-border-radius-pill`    | 9999px          | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-pill); width: 6rem;"></div> |
diff --git a/docs/pages/tokens/borders.md b/docs/pages/tokens/borders.md
new file mode 100644
index 000000000..5e98c8ccb
--- /dev/null
+++ b/docs/pages/tokens/borders.md
@@ -0,0 +1,37 @@
+---
+meta:
+  title: Border Tokens
+  description: Border tokens are used to control borders and corners.
+---
+
+# Border Tokens
+
+Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
+
+| Token                      | Value                                         | Example                                                                              |
+| -------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
+| `--wa-border-style`        | `solid`                                       |                                                                                      |
+| `--sl-border-width-thin`   | 0.0625rem (1px)                               | <div class="border-demo" style="border-width: var(--wa-border-width-thin);"></div>   |
+| `--sl-border-width-medium` | `calc(var(--wa-border-width-thin) * 2)` (2px) | <div class="border-demo" style="border-width: var(--wa-border-width-medium);"></div> |
+| `--sl-border-width-thick`  | `calc(var(--wa-border-width-thin) * 3)` (3px) | <div class="border-demo" style="border-width: var(--wa-border-width-thick);"></div>  |
+
+## Corners
+
+TODO
+
+| Token               | Value                              | Example                                                                        |
+| ------------------- | ---------------------------------- | ------------------------------------------------------------------------------ |
+| `--wa-corners-half` | `calc(var(--wa-corners-1x) * 0.5)` | <div class="corner-demo" style="border-radius: var(--wa-corners-half);"></div> |
+| `--wa-corners-1x`   | `0.25rem`                          | <div class="corner-demo" style="border-radius: var(--wa-corners-1x);"></div>   |
+| `--wa-corners-2x`   | `calc(var(--wa-corners-1x) * 2)`   | <div class="corner-demo" style="border-radius: var(--wa-corners-2x);"></div>   |
+| `--wa-corners-3x`   | `calc(var(--wa-corners-1x) * 3)`   | <div class="corner-demo" style="border-radius: var(--wa-corners-3x);"></div>   |
+
+## Special Corners
+
+TODO
+
+| Token                 | Value    | Example                                                                                     |
+| --------------------- | -------- | ------------------------------------------------------------------------------------------- |
+| `--wa-corners-pill`   | `9999px` | <div class="corner-demo" style="width: 6rem; border-radius: var(--wa-corners-pill);"></div> |
+| `--wa-corners-circle` | `50%`    | <div class="corner-demo" style="border-radius: var(--wa-corners-circle);"></div>            |
+| `--wa-corners-sharp`  | `0`      | <div class="corner-demo" style="border-radius: var(--wa-corners-sharp);"></div>             |
diff --git a/docs/pages/tokens/color.md b/docs/pages/tokens/color.md
index f6c259535..311eaf6a2 100644
--- a/docs/pages/tokens/color.md
+++ b/docs/pages/tokens/color.md
@@ -8,439 +8,110 @@ meta:
 
 Color tokens help maintain consistent use of color throughout your app. Shoelace provides palettes for theme colors and primitives that you can use as a foundation for your design system.
 
-Color tokens are referenced using the `--sl-color-{name}-{n}` CSS custom property, where `{name}` is the name of the palette and `{n}` is the numeric value of the desired swatch.
+Color tokens are referenced using the `--wa-color-{name}-{n}` CSS custom property, where `{name}` is the name of the palette and `{n}` is the numeric value of the desired swatch.
 
-## Theme Tokens
+## App / Surface Tokens
 
-Theme tokens give you a semantic way to reference colors in your app. The primary palette is typically based on a brand color, whereas success, neutral, warning, and danger are used to visualize actions that correspond to their respective meanings.
+TODO
+
+## Semantic Color Variants
+
+TODO
+
+## Color Primitives
+
+Additional color palettes are provided in the form of color primitives. Use these when you need arbitrary colors that don't have semantic meaning.
 
 <div class="color-palette">
   <div class="color-palette__name">
-    Primary<br>
-    <code>--sl-color-primary-<em>{n}</em></code>
+    Blue<br>
+    <code>--wa-color-blue-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-950);"></div>950</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Success<br>
-    <code>--sl-color-success-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-950);"></div>950</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Warning<br>
-    <code>--sl-color-warning-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-950);"></div>950</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Danger<br>
-    <code>--sl-color-danger-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-950);"></div>950</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Neutral<br>
-    <code>--sl-color-neutral-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-950);"></div>950</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Black & White<br>
-    <code>--sl-color-neutral-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: var(--sl-color-neutral-0);"></div>0</div>
-  <div class="color-palette__example"><div class="color-palette__swatch " style="background-color: var(--sl-color-neutral-1000);"></div>1000</div>
-</div>
-
-:::tip
-Looking for an easy way to customize your theme? [Try the color token generator!](https://codepen.io/claviska/full/QWveRgL)
-:::
-
-## Primitives
-
-Additional palettes are provided in the form of color primitives. Use these when you need arbitrary colors that don't have semantic meaning. Color primitives are derived from the fantastic [Tailwind color palette](https://tailwindcss.com/docs/customizing-colors).
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Gray<br>
-    <code>--sl-color-gray-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-900);"></div>900</div>  
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-950);"></div>950</div>  
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Red<br>
-    <code>--sl-color-red-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-950);"></div>950</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Orange<br>
-    <code>--sl-color-orange-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-950);"></div>950</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Amber<br>
-    <code>--sl-color-amber-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-950);"></div>950</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Yellow<br>
-    <code>--sl-color-yellow-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-950);"></div>950</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Lime<br>
-    <code>--sl-color-lime-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-950);"></div>950</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-10);"></div>10</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-20);"></div>20</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-30);"></div>30</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-40);"></div>40</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-50);"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-60);"></div>60</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-70);"></div>70</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-80);"></div>80</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-90);"></div>90</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-95);"></div>95</div>
 </div>
 
 <div class="color-palette">
   <div class="color-palette__name">
     Green<br>
-    <code>--sl-color-green-<em>{n}</em></code>
+    <code>--wa-color-green-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-950);"></div>950</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-10);"></div>10</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-20);"></div>20</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-30);"></div>30</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-40);"></div>40</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-50);"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-60);"></div>60</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-70);"></div>70</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-80);"></div>80</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-90);"></div>90</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-95);"></div>95</div>
 </div>
 
 <div class="color-palette">
   <div class="color-palette__name">
-    Emerald<br>
-    <code>--sl-color-emerald-<em>{n}</em></code>
+    Yellow<br>
+    <code>--wa-color-red-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-950);"></div>950</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-10);"></div>10</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-20);"></div>20</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-30);"></div>30</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-40);"></div>40</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-50);"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-60);"></div>60</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-70);"></div>70</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-80);"></div>80</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-90);"></div>90</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-95);"></div>95</div>
 </div>
 
 <div class="color-palette">
   <div class="color-palette__name">
-    Teal<br>
-    <code>--sl-color-teal-<em>{n}</em></code>
+    Red<br>
+    <code>--wa-color-red-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-950);"></div>950</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-10);"></div>10</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-20);"></div>20</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-30);"></div>30</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-40);"></div>40</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-50);"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-60);"></div>60</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-70);"></div>70</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-80);"></div>80</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-90);"></div>90</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-95);"></div>95</div>
 </div>
 
 <div class="color-palette">
   <div class="color-palette__name">
-    Cyan<br>
-    <code>--sl-color-cyan-<em>{n}</em></code>
+    Neutral<br>
+    <code>--wa-color-neutral-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-950);"></div>950</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-10);"></div>10</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-20);"></div>20</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-30);"></div>30</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-40);"></div>40</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-50);"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-60);"></div>60</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-70);"></div>70</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-80);"></div>80</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-90);"></div>90</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-95);"></div>95</div>
 </div>
 
 <div class="color-palette">
   <div class="color-palette__name">
-    Sky<br>
-    <code>--sl-color-sky-<em>{n}</em></code>
+    Black & White<br>
+    <code>--wa-color-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-950);"></div>950</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Blue<br>
-    <code>--sl-color-blue-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-950);"></div>950</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Indigo<br>
-    <code>--sl-color-indigo-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-950);"></div>950</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Violet<br>
-    <code>--sl-color-violet-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-950);"></div>950</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Purple<br>
-    <code>--sl-color-purple-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-950);"></div>950</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Fuchsia<br>
-    <code>--sl-color-fuchsia-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-950);"></div>950</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Pink<br>
-    <code>--sl-color-pink-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-950);"></div>950</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Rose<br>
-    <code>--sl-color-rose-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-950);"></div>950</div>
+  <div class="color-palette__example"><div class="color-palette__swatch " style="background-color: var(--wa-color-black);"></div>black</div>
+  <div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: var(--wa-color-white);"></div>white</div>
 </div>
diff --git a/docs/pages/tokens/elevation.md b/docs/pages/tokens/elevation.md
deleted file mode 100644
index db77aa366..000000000
--- a/docs/pages/tokens/elevation.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-meta:
-  title: Elevation
-  description: Elevation tokens are used to give elements the appearance of being raised off the page.
----
-
-# Elevation Tokens
-
-Elevation tokens are used to give elements the appearance of being raised off the page. Use them with the `box-shadow` property. These are especially useful for menus, popovers, and dialogs.
-
-| Token                 | Example                                                                          |
-| --------------------- | -------------------------------------------------------------------------------- |
-| `--sl-shadow-x-small` | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-x-small);"></div> |
-| `--sl-shadow-small`   | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-small);"></div>   |
-| `--sl-shadow-medium`  | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-medium);"></div>  |
-| `--sl-shadow-large`   | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-large);"></div>   |
-| `--sl-shadow-x-large` | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-x-large);"></div> |
diff --git a/docs/pages/tokens/more.md b/docs/pages/tokens/more.md
index 66d716ea5..93bb34b14 100644
--- a/docs/pages/tokens/more.md
+++ b/docs/pages/tokens/more.md
@@ -6,158 +6,27 @@ meta:
 
 # More Design Tokens
 
-All of the design tokens described herein are considered relatively stable. However, some changes might occur in future versions to address mission critical bugs or improvements. If such changes occur, they _will not_ be considered breaking changes and will be clearly documented in the [changelog](/resources/changelog).
-
-Most design tokens are consistent across the light and dark theme. Those that vary will show both values.
-
-:::tip
-Currently, the source of design tokens is considered to be [`light.css`](https://github.com/shoelace-style/shoelace/blob/next/src/themes/light.css). The dark theme, [dark.css](https://github.com/shoelace-style/shoelace/blob/next/src/themes/dark.css), mirrors all of the same tokens with dark mode-specific values where appropriate. Work is planned to move all design tokens to a single file, perhaps JSON or YAML, in the near future.
-:::
-
 ## Focus Rings
 
 Focus ring tokens control the appearance of focus rings. Note that form inputs use `--sl-input-focus-ring-*` tokens instead.
 
-| Token                    | Value                                                                                     |
-| ------------------------ | ----------------------------------------------------------------------------------------- |
-| `--sl-focus-ring-color`  | `var(--sl-color-primary-600)` (light theme)<br>`var(--sl-color-primary-700)` (dark theme) |
-| `--sl-focus-ring-style`  | `solid`                                                                                   |
-| `--sl-focus-ring-width`  | `3px`                                                                                     |
-| `--sl-focus-ring`        | `var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color)`        |
-| `--sl-focus-ring-offset` | `1px`                                                                                     |
+| Token                    | Value                                                      |
+| ------------------------ | ---------------------------------------------------------- |
+| `--wa-focus-ring`        | `solid var(--wa-border-width-thick) var(--wa-color-focus)` |
+| `--wa-focus-ring-offset` | `0.0625rem` (1px)                                          |
 
-## Buttons
+## Form Controls
 
-Button tokens control the appearance of buttons. In addition, buttons also currently use some form input tokens such as `--sl-input-height-*` and `--sl-input-border-*`. More button tokens may be added in the future to make it easier to style them more independently.
+Form control tokens control the appearance of form controls such as [input](/components/input), [select](/components/select), [textarea](/components/textarea), etc.
 
-| Token                          | Value                         |
-| ------------------------------ | ----------------------------- |
-| `--sl-button-font-size-small`  | `var(--sl-font-size-x-small)` |
-| `--sl-button-font-size-medium` | `var(--sl-font-size-small)`   |
-| `--sl-button-font-size-large`  | `var(--sl-font-size-medium)`  |
-
-## Form Inputs
-
-Form input tokens control the appearance of form controls such as [input](/components/input), [select](/components/select), [textarea](/components/textarea), etc.
-
-| Token                                   | Value                              |
-| --------------------------------------- | ---------------------------------- |
-| `--sl-input-height-small`               | `1.875rem` (30px @ 16px base)      |
-| `--sl-input-height-medium`              | `2.5rem` (40px @ 16px base)        |
-| `--sl-input-height-large`               | `3.125rem` (50px @ 16px base)      |
-| `--sl-input-background-color`           | `var(--sl-color-neutral-0)`        |
-| `--sl-input-background-color-hover`     | `var(--sl-input-background-color)` |
-| `--sl-input-background-color-focus`     | `var(--sl-input-background-color)` |
-| `--sl-input-background-color-disabled`  | `var(--sl-color-neutral-100)`      |
-| `--sl-input-border-color`               | `var(--sl-color-neutral-300)`      |
-| `--sl-input-border-color-hover`         | `var(--sl-color-neutral-400)`      |
-| `--sl-input-border-color-focus`         | `var(--sl-color-primary-500)`      |
-| `--sl-input-border-color-disabled`      | `var(--sl-color-neutral-300)`      |
-| `--sl-input-border-width`               | `1px`                              |
-| `--sl-input-required-content`           | `*`                                |
-| `--sl-input-required-content-offset`    | `-2px`                             |
-| `--sl-input-required-content-color`     | `var(--sl-input-label-color)`      |
-| `--sl-input-border-radius-small`        | `var(--sl-border-radius-medium)`   |
-| `--sl-input-border-radius-medium`       | `var(--sl-border-radius-medium)`   |
-| `--sl-input-border-radius-large`        | `var(--sl-border-radius-medium)`   |
-| `--sl-input-font-family`                | `var(--sl-font-sans)`              |
-| `--sl-input-font-weight`                | `var(--sl-font-weight-normal)`     |
-| `--sl-input-font-size-small`            | `var(--sl-font-size-small)`        |
-| `--sl-input-font-size-medium`           | `var(--sl-font-size-medium)`       |
-| `--sl-input-font-size-large`            | `var(--sl-font-size-large)`        |
-| `--sl-input-letter-spacing`             | `var(--sl-letter-spacing-normal)`  |
-| `--sl-input-color`                      | `var(--sl-color-neutral-700)`      |
-| `--sl-input-color-hover`                | `var(--sl-color-neutral-700)`      |
-| `--sl-input-color-focus`                | `var(--sl-color-neutral-700)`      |
-| `--sl-input-color-disabled`             | `var(--sl-color-neutral-900)`      |
-| `--sl-input-icon-color`                 | `var(--sl-color-neutral-500)`      |
-| `--sl-input-icon-color-hover`           | `var(--sl-color-neutral-600)`      |
-| `--sl-input-icon-color-focus`           | `var(--sl-color-neutral-600)`      |
-| `--sl-input-placeholder-color`          | `var(--sl-color-neutral-500)`      |
-| `--sl-input-placeholder-color-disabled` | `var(--sl-color-neutral-600)`      |
-| `--sl-input-spacing-small`              | `var(--sl-spacing-small)`          |
-| `--sl-input-spacing-medium`             | `var(--sl-spacing-medium)`         |
-| `--sl-input-spacing-large`              | `var(--sl-spacing-large)`          |
-| `--sl-input-focus-ring-color`           | `hsl(198.6 88.7% 48.4% / 40%)`     |
-| `--sl-input-focus-ring-offset`          | `0`                                |
-
-## Filled Form Inputs
-
-Filled form input tokens control the appearance of form controls using the `filled` variant.
-
-| Token                                         | Value                         |
-| --------------------------------------------- | ----------------------------- |
-| `--sl-input-filled-background-color`          | `var(--sl-color-neutral-100)` |
-| `--sl-input-filled-background-color-hover`    | `var(--sl-color-neutral-100)` |
-| `--sl-input-filled-background-color-focus`    | `var(--sl-color-neutral-100)` |
-| `--sl-input-filled-background-color-disabled` | `var(--sl-color-neutral-100)` |
-| `--sl-input-filled-color`                     | `var(--sl-color-neutral-800)` |
-| `--sl-input-filled-color-hover`               | `var(--sl-color-neutral-800)` |
-| `--sl-input-filled-color-focus`               | `var(--sl-color-neutral-700)` |
-| `--sl-input-filled-color-disabled`            | `var(--sl-color-neutral-800)` |
-
-## Form Labels
-
-Form label tokens control the appearance of labels in form controls.
-
-| Token                               | Value                        |
-| ----------------------------------- | ---------------------------- |
-| `--sl-input-label-font-size-small`  | `var(--sl-font-size-small)`  |
-| `--sl-input-label-font-size-medium` | `var(--sl-font-size-medium`) |
-| `--sl-input-label-font-size-large`  | `var(--sl-font-size-large)`  |
-| `--sl-input-label-color`            | `inherit`                    |
-
-## Help Text
-
-Help text tokens control the appearance of help text in form controls.
-
-| Token                                   | Value                         |
-| --------------------------------------- | ----------------------------- |
-| `--sl-input-help-text-font-size-small`  | `var(--sl-font-size-x-small)` |
-| `--sl-input-help-text-font-size-medium` | `var(--sl-font-size-small)`   |
-| `--sl-input-help-text-font-size-large`  | `var(--sl-font-size-medium)`  |
-| `--sl-input-help-text-color`            | `var(--sl-color-neutral-500)` |
-
-## Toggles
-
-Toggle tokens control the appearance of toggles such as [checkbox](/components/checkbox), [radio](/components/radio), [switch](/components/switch), etc.
-
-| Token                     | Value                         |
-| ------------------------- | ----------------------------- |
-| `--sl-toggle-size-small`  | `0.875rem` (14px @ 16px base) |
-| `--sl-toggle-size-medium` | `1.125rem` (18px @ 16px base) |
-| `--sl-toggle-size-large`  | `1.375rem` (22px @ 16px base) |
-
-## Overlays
-
-Overlay tokens control the appearance of overlays as used in [dialog](/components/dialog), [drawer](/components/drawer), etc.
-
-| Token                           | Value                       |
-| ------------------------------- | --------------------------- |
-| `--sl-overlay-background-color` | `hsl(240 3.8% 46.1% / 33%)` |
-
-## Panels
-
-Panel tokens control the appearance of panels such as those used in [dialog](/components/dialog), [drawer](/components/drawer), [menu](/components/menu), etc.
-
-| Token                         | Value                         |
-| ----------------------------- | ----------------------------- |
-| `--sl-panel-background-color` | `var(--sl-color-neutral-0)`   |
-| `--sl-panel-border-color`     | `var(--sl-color-neutral-200)` |
-| `--sl-panel-border-width`     | `1px`                         |
-
-## Tooltips
-
-Tooltip tokens control the appearance of tooltips. This includes the [tooltip](/components/tooltip) component as well as other implementations, such [range tooltips](/components/range).
-
-| Token                           | Value                                                  |
-| ------------------------------- | ------------------------------------------------------ |
-| `--sl-tooltip-border-radius`    | `var(--sl-border-radius-medium)`                       |
-| `--sl-tooltip-background-color` | `var(--sl-color-neutral-800)`                          |
-| `--sl-tooltip-color`            | `var(--sl-color-neutral-0)`                            |
-| `--sl-tooltip-font-family`      | `var(--sl-font-sans)`                                  |
-| `--sl-tooltip-font-weight`      | `var(--sl-font-weight-normal)`                         |
-| `--sl-tooltip-font-size`        | `var(--sl-font-size-small)`                            |
-| `--sl-tooltip-line-height`      | `var(--sl-line-height-dense)`                          |
-| `--sl-tooltip-padding`          | `var(--sl-spacing-2x-small) var(--sl-spacing-x-small)` |
-| `--sl-tooltip-arrow-size`       | `6px`                                                  |
+| Token                                  | Value                                           |
+| -------------------------------------- | ----------------------------------------------- |
+| `--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-color-resting`     | `var(--wa-color-neutral-element-outline-muted)` |
+| `--wa-form-controls-color-activated`   | `var(--wa-color-brand-action-vivid)`            |
+| `--wa-form-controls-font-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)`                    |
diff --git a/docs/pages/tokens/shadows.md b/docs/pages/tokens/shadows.md
new file mode 100644
index 000000000..620e9a5c6
--- /dev/null
+++ b/docs/pages/tokens/shadows.md
@@ -0,0 +1,16 @@
+---
+meta:
+  title: Shadows
+  description: Shadow tokens are used to give elements the appearance of being raised off the page.
+---
+
+# Shadow Tokens
+
+Shadow tokens are used to give elements the appearance of being raised off the page. Use them with the `box-shadow` property. These are especially useful for menus, popovers, and dialogs.
+
+| Token                 | Example                                                                       |
+| --------------------- | ----------------------------------------------------------------------------- |
+| `--wa-shadow-level-0` | <div class="shadow-demo" style="box-shadow: var(--wa-shadow-level-0);"></div> |
+| `--wa-shadow-level-1` | <div class="shadow-demo" style="box-shadow: var(--wa-shadow-level-1);"></div> |
+| `--wa-shadow-level-2` | <div class="shadow-demo" style="box-shadow: var(--wa-shadow-level-2);"></div> |
+| `--wa-shadow-level-3` | <div class="shadow-demo" style="box-shadow: var(--wa-shadow-level-3);"></div> |
diff --git a/docs/pages/tokens/spacing.md b/docs/pages/tokens/spacing.md
index a5151e4f1..c70ac196d 100644
--- a/docs/pages/tokens/spacing.md
+++ b/docs/pages/tokens/spacing.md
@@ -8,15 +8,50 @@ meta:
 
 Spacing tokens are used to provide consistent spacing between content in your app.
 
-| Token                   | Value          | Example                                                                                                         |
-| ----------------------- | -------------- | --------------------------------------------------------------------------------------------------------------- |
-| `--sl-spacing-3x-small` | 0.125rem (2px) | <div class="spacing-demo" style="width: var(--sl-spacing-3x-small); height: var(--sl-spacing-3x-small);"></div> |
-| `--sl-spacing-2x-small` | 0.25rem (4px)  | <div class="spacing-demo" style="width: var(--sl-spacing-2x-small); height: var(--sl-spacing-2x-small);"></div> |
-| `--sl-spacing-x-small`  | 0.5rem (8px)   | <div class="spacing-demo" style="width: var(--sl-spacing-x-small); height: var(--sl-spacing-x-small);"></div>   |
-| `--sl-spacing-small`    | 0.75rem (12px) | <div class="spacing-demo" style="width: var(--sl-spacing-small); height: var(--sl-spacing-small);"></div>       |
-| `--sl-spacing-medium`   | 1rem (16px)    | <div class="spacing-demo" style="width: var(--sl-spacing-medium); height: var(--sl-spacing-medium);"></div>     |
-| `--sl-spacing-large`    | 1.25rem (20px) | <div class="spacing-demo" style="width: var(--sl-spacing-large); height: var(--sl-spacing-large);"></div>       |
-| `--sl-spacing-x-large`  | 1.75rem (28px) | <div class="spacing-demo" style="width: var(--sl-spacing-x-large); height: var(--sl-spacing-x-large);"></div>   |
-| `--sl-spacing-2x-large` | 2.25rem (36px) | <div class="spacing-demo" style="width: var(--sl-spacing-2x-large); height: var(--sl-spacing-2x-large);"></div> |
-| `--sl-spacing-3x-large` | 3rem (48px)    | <div class="spacing-demo" style="width: var(--sl-spacing-3x-large); height: var(--sl-spacing-3x-large);"></div> |
-| `--sl-spacing-4x-large` | 4.5rem (72px)  | <div class="spacing-demo" style="width: var(--sl-spacing-4x-large); height: var(--sl-spacing-4x-large);"></div> |
+| Token            | Value          | Example                                                                               |
+| ---------------- | -------------- | ------------------------------------------------------------------------------------- |
+| `--wa-space-3xs` | 0.125rem (2px) | <div class="spacing-demo" style="width: var(--wa-space-3xs); height: 0.25rem;"></div> |
+| `--wa-space-2xs` | 0.25rem (4px)  | <div class="spacing-demo" style="width: var(--wa-space-2xs); height: 0.25rem;"></div> |
+| `--wa-space-xs`  | 0.5rem (8px)   | <div class="spacing-demo" style="width: var(--wa-space-xs); height: 0.25rem;"></div>  |
+| `--wa-space-s`   | 0.75rem (12px) | <div class="spacing-demo" style="width: var(--wa-space-s); height: 0.25rem;"></div>   |
+| `--wa-space-m`   | 1rem (16px)    | <div class="spacing-demo" style="width: var(--wa-space-m); height: 0.25rem;"></div>   |
+| `--wa-space-l`   | 1.25rem (20px) | <div class="spacing-demo" style="width: var(--wa-space-l); height: 0.25rem;"></div>   |
+| `--wa-space-xl`  | 1.5rem (24px)  | <div class="spacing-demo" style="width: var(--wa-space-xl); height: 0.25rem;"></div>  |
+| `--wa-space-2xl` | 2rem (32px)    | <div class="spacing-demo" style="width: var(--wa-space-2xl); height: 0.25rem;"></div> |
+| `--wa-space-3xl` | 3rem (48px)    | <div class="spacing-demo" style="width: var(--wa-space-3xl); height: 0.25rem;"></div> |
+
+## Square Tokens
+
+TODO
+
+| Token                  | Value                | Example                                                                                             |
+| ---------------------- | -------------------- | --------------------------------------------------------------------------------------------------- |
+| `--wa-space-square-xs` | `var(--wa-space-xs)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-xs);"></div> |
+| `--wa-space-square-s`  | `var(--wa-space-s)`  | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-s);"></div>  |
+| `--wa-space-square-m`  | `var(--wa-space-m)`  | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-m);"></div>  |
+| `--wa-space-square-l`  | `var(--wa-space-l)`  | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-l);"></div>  |
+| `--wa-space-square-xl` | `var(--wa-space-xl)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-xl);"></div> |
+
+## Stretch Tokens
+
+TODO
+
+| Token                   | Value                                    | Example                                                                                              |
+| ----------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| `--wa-space-stretch-xs` | `var(--wa-space-xs) var(--wa-space-m)`   | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-xs);"></div> |
+| `--wa-space-stretch-s`  | `var(--wa-space-s) var(--wa-space-l)`    | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-s);"></div>  |
+| `--wa-space-stretch-m`  | `var(--wa-space-m) var(--wa-space-xl)`   | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-m);"></div>  |
+| `--wa-space-stretch-l`  | `var(--wa-space-l) var(--wa-space-2xl)`  | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-l);"></div>  |
+| `--wa-space-stretch-xl` | `var(--wa-space-xl) var(--wa-space-3xl)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-xl);"></div> |
+
+## Squish Tokens
+
+TODO
+
+| Token                  | Value                                    | Example                                                                                             |
+| ---------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `--wa-space-squish-xs` | `var(--wa-space-xs) var(--wa-space-3xs)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-xs);"></div> |
+| `--wa-space-squish-s`  | `var(--wa-space-s) var(--wa-space-2xs)`  | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-s);"></div>  |
+| `--wa-space-squish-m`  | `var(--wa-space-m) var(--wa-space-xs)`   | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-m);"></div>  |
+| `--wa-space-squish-l`  | `var(--wa-space-l) var(--wa-space-s)`    | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-l);"></div>  |
+| `--wa-space-squish-xl` | `var(--wa-space-xl) var(--wa-space-m)`   | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-xl);"></div> |
diff --git a/docs/pages/tokens/transition.md b/docs/pages/tokens/transition.md
index 1e7c46687..677e66704 100644
--- a/docs/pages/tokens/transition.md
+++ b/docs/pages/tokens/transition.md
@@ -8,10 +8,8 @@ meta:
 
 Transition tokens are used to provide consistent transitions throughout your app.
 
-| Token                    | Value  | Example                                                                                       |
-| ------------------------ | ------ | --------------------------------------------------------------------------------------------- |
-| `--sl-transition-x-slow` | 1000ms | <div class="transition-demo" style="transition-duration: var(--sl-transition-x-slow);"></div> |
-| `--sl-transition-slow`   | 500ms  | <div class="transition-demo" style="transition-duration: var(--sl-transition-slow);"></div>   |
-| `--sl-transition-medium` | 250ms  | <div class="transition-demo" style="transition-duration: var(--sl-transition-medium);"></div> |
-| `--sl-transition-fast`   | 150ms  | <div class="transition-demo" style="transition-duration: var(--sl-transition-fast);"></div>   |
-| `--sl-transition-x-fast` | 50ms   | <div class="transition-demo" style="transition-duration: var(--sl-transition-x-fast);"></div> |
+| Token                    | Value | Example                                                                                       |
+| ------------------------ | ----- | --------------------------------------------------------------------------------------------- |
+| `--wa-transition-normal` | 250ms | <div class="transition-demo" style="transition-duration: var(--wa-transition-normal);"></div> |
+| `--wa-transition-fast`   | 150ms | <div class="transition-demo" style="transition-duration: var(--wa-transition-fast);"></div>   |
+| `--wa-transition-faster` | 50ms  | <div class="transition-demo" style="transition-duration: var(--wa-transition-faster);"></div> |
diff --git a/docs/pages/tokens/typography.md b/docs/pages/tokens/typography.md
index f45a43d84..d412c81e8 100644
--- a/docs/pages/tokens/typography.md
+++ b/docs/pages/tokens/typography.md
@@ -12,53 +12,43 @@ Typography tokens are used to maintain a consistent set of font styles throughou
 
 The default font stack is designed to be simple and highly available on as many devices as possible.
 
-| Token             | Value                                                                                                                                         | Example                                                                                              |
-| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `--sl-font-sans`  | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' | <span style="font-family: var(--sl-font-sans)">The quick brown fox jumped over the lazy dog.</span>  |
-| `--sl-font-serif` | Georgia, 'Times New Roman', serif                                                                                                             | <span style="font-family: var(--sl-font-serif)">The quick brown fox jumped over the lazy dog.</span> |
-| `--sl-font-mono`  | SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;                                                                                | <span style="font-family: var(--sl-font-mono)">The quick brown fox jumped over the lazy dog.</span>  |
+| Token                       | Value                                                                              | Example                                                                                                        |
+| --------------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `--wa-font-family-heading`  | system-ui                                                                          | <span style="font-family: var(--wa-font-family-heading)">The quick brown fox jumped over the lazy dog.</span>  |
+| `--wa-font-family-body`     | system-ui                                                                          | <span style="font-family: var(--wa-font-family-body)">The quick brown fox jumped over the lazy dog.</span>     |
+| `--wa-font-family-code`     | 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; | <span style="font-family: var(--wa-font-family-code)">The quick brown fox jumped over the lazy dog.</span>     |
+| `--wa-font-family-longform` | 'Lora', serif;                                                                     | <span style="font-family: var(--wa-font-family-longform)">The quick brown fox jumped over the lazy dog.</span> |
 
 ## Font Size
 
 Font sizes use `rem` units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
 
-| Token                     | Value           | Example                                                         |
-| ------------------------- | --------------- | --------------------------------------------------------------- |
-| `--sl-font-size-2x-small` | 0.625rem (10px) | <span style="font-size: var(--sl-font-size-2x-small)">Aa</span> |
-| `--sl-font-size-x-small`  | 0.75rem (12px)  | <span style="font-size: var(--sl-font-size-x-small)">Aa</span>  |
-| `--sl-font-size-small`    | 0.875rem (14px) | <span style="font-size: var(--sl-font-size-small)">Aa</span>    |
-| `--sl-font-size-medium`   | 1rem (16px)     | <span style="font-size: var(--sl-font-size-medium)">Aa</span>   |
-| `--sl-font-size-large`    | 1.25rem (20px)  | <span style="font-size: var(--sl-font-size-large)">Aa</span>    |
-| `--sl-font-size-x-large`  | 1.5rem (24px)   | <span style="font-size: var(--sl-font-size-x-large)">Aa</span>  |
-| `--sl-font-size-2x-large` | 2.25rem (36px)  | <span style="font-size: var(--sl-font-size-2x-large)">Aa</span> |
-| `--sl-font-size-3x-large` | 3rem (48px)     | <span style="font-size: var(--sl-font-size-3x-large)">Aa</span> |
-| `--sl-font-size-4x-large` | 4.5rem (72px)   | <span style="font-size: var(--sl-font-size-4x-large)">Aa</span> |
+| Token                 | Value           | Example                                                     |
+| --------------------- | --------------- | ----------------------------------------------------------- |
+| `--wa-font-size-root` | 16px            | <span style="font-size: var(--wa-font-size-root)">Aa</span> |
+| `--wa-font-size-2xs`  | 0.625rem (10px) | <span style="font-size: var(--wa-font-size-2xs)">Aa</span>  |
+| `--wa-font-size-xs`   | 0.75rem (12px)  | <span style="font-size: var(--wa-font-size-xs)">Aa</span>   |
+| `--wa-font-size-s`    | 0.875rem (14px) | <span style="font-size: var(--wa-font-size-s)">Aa</span>    |
+| `--wa-font-size-m`    | 1rem (16px)     | <span style="font-size: var(--wa-font-size-m)">Aa</span>    |
+| `--wa-font-size-l`    | 1.375rem (22px) | <span style="font-size: var(--wa-font-size-l)">Aa</span>    |
+| `--wa-font-size-xl`   | 1.875rem (30px) | <span style="font-size: var(--wa-font-size-xl)">Aa</span>   |
+| `--wa-font-size-2xl`  | 2.625rem (42px) | <span style="font-size: var(--wa-font-size-2xl)">Aa</span>  |
 
 ## Font Weight
 
-| Token                       | Value | Example                                                                                                         |
-| --------------------------- | ----- | --------------------------------------------------------------------------------------------------------------- |
-| `--sl-font-weight-light`    | 300   | <span style="font-weight: var(--sl-font-weight-light);">The quick brown fox jumped over the lazy dog.</span>    |
-| `--sl-font-weight-normal`   | 400   | <span style="font-weight: var(--sl-font-weight-normal);">The quick brown fox jumped over the lazy dog.</span>   |
-| `--sl-font-weight-semibold` | 500   | <span style="font-weight: var(--sl-font-weight-semibold);">The quick brown fox jumped over the lazy dog.</span> |
-| `--sl-font-weight-bold`     | 700   | <span style="font-weight: var(--sl-font-weight-bold);">The quick brown fox jumped over the lazy dog.</span>     |
-
-## Letter Spacing
-
-| Token                        | Value    | Example                                                                                                             |
-| ---------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
-| `--sl-letter-spacing-denser` | -0.03em  | <span style="letter-spacing: var(--sl-letter-spacing-denser);">The quick brown fox jumped over the lazy dog.</span> |
-| `--sl-letter-spacing-dense`  | -0.015em | <span style="letter-spacing: var(--sl-letter-spacing-dense);">The quick brown fox jumped over the lazy dog.</span>  |
-| `--sl-letter-spacing-normal` | normal   | <span style="letter-spacing: var(--sl-letter-spacing-normal);">The quick brown fox jumped over the lazy dog.</span> |
-| `--sl-letter-spacing-loose`  | 0.075em  | <span style="letter-spacing: var(--sl-letter-spacing-loose);">The quick brown fox jumped over the lazy dog.</span>  |
-| `--sl-letter-spacing-looser` | 0.15em   | <span style="letter-spacing: var(--sl-letter-spacing-looser);">The quick brown fox jumped over the lazy dog.</span> |
+| Token                      | Value                          | Example                                                                                                        |
+| -------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------- |
+| `--wa-font-weight-light`   | 300                            | <span style="font-weight: var(--wa-font-weight-light);">The quick brown fox jumped over the lazy dog.</span>   |
+| `--wa-font-weight-normal`  | 400                            | <span style="font-weight: var(--wa-font-weight-normal);">The quick brown fox jumped over the lazy dog.</span>  |
+| `--wa-font-weight-medium`  | 500                            | <span style="font-weight: var(--wa-font-weight-medium);">The quick brown fox jumped over the lazy dog.</span>  |
+| `--wa-font-weight-heavy`   | 600                            | <span style="font-weight: var(--wa-font-weight-heavy);">The quick brown fox jumped over the lazy dog.</span>   |
+| `--wa-font-weight-heading` | `var(--wa-font-weight-medium)` | <span style="font-weight: var(--wa-font-weight-heading);">The quick brown fox jumped over the lazy dog.</span> |
+| `--wa-font-weight-body`    | `var(--wa-font-weight-normal)` | <span style="font-weight: var(--wa-font-weight-body);">The quick brown fox jumped over the lazy dog.</span>    |
 
 ## Line Height
 
-| Token                     | Value | Example                                                                                                                                                                                                       |
-| ------------------------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sl-line-height-denser` | 1     | <div style="line-height: var(--sl-line-height-denser);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
-| `--sl-line-height-dense`  | 1.4   | <div style="line-height: var(--sl-line-height-dense);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>  |
-| `--sl-line-height-normal` | 1.8   | <div style="line-height: var(--sl-line-height-normal);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
-| `--sl-line-height-loose`  | 2.2   | <div style="line-height: var(--sl-line-height-loose);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>  |
-| `--sl-line-height-looser` | 2.6   | <div style="line-height: var(--sl-line-height-looser);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
+| Token                          | Value | Example                                                                                                                                                                                                            |
+| ------------------------------ | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `--wa-line-height-compact`     | 1.25  | <div style="line-height: var(--wa-line-height-compact);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>     |
+| `--wa-line-height-regular`     | 1.625 | <div style="line-height: var(--wa-line-height-regular);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>     |
+| `--wa-line-height-comfortable` | 2     | <div style="line-height: var(--wa-line-height-comfortable);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
diff --git a/docs/pages/tokens/z-index.md b/docs/pages/tokens/z-index.md
index 83516cdd2..62d36e3f0 100644
--- a/docs/pages/tokens/z-index.md
+++ b/docs/pages/tokens/z-index.md
@@ -10,8 +10,8 @@ Z-indexes are used to stack components in a logical manner.
 
 | Token                      | Value |
 | -------------------------- | ----- |
-| `--sl-z-index-drawer`      | 700   |
-| `--sl-z-index-dialog`      | 800   |
-| `--sl-z-index-dropdown`    | 900   |
-| `--sl-z-index-alert-group` | 950   |
-| `--sl-z-index-tooltip`     | 1000  |
+| `--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  |
diff --git a/src/internal/scroll.ts b/src/internal/scroll.ts
index 81460e2e1..c6820e338 100644
--- a/src/internal/scroll.ts
+++ b/src/internal/scroll.ts
@@ -20,7 +20,7 @@ export function lockBodyScrolling(lockingEl: HTMLElement) {
   if (!document.body.classList.contains('sl-scroll-lock')) {
     const scrollbarWidth = getScrollbarWidth(); // must be measured before the `sl-scroll-lock` class is applied
     document.body.classList.add('sl-scroll-lock');
-    document.body.style.setProperty('--sl-scroll-lock-size', `${scrollbarWidth}px`);
+    document.body.style.setProperty('--wa-scroll-lock-size', `${scrollbarWidth}px`);
   }
 }
 
@@ -32,7 +32,7 @@ export function unlockBodyScrolling(lockingEl: HTMLElement) {
 
   if (locks.size === 0) {
     document.body.classList.remove('sl-scroll-lock');
-    document.body.style.removeProperty('--sl-scroll-lock-size');
+    document.body.style.removeProperty('--wa-scroll-lock-size');
   }
 }
 
diff --git a/src/themes/_utility.css b/src/themes/_utility.css
index eab968349..1d43f5a4d 100644
--- a/src/themes/_utility.css
+++ b/src/themes/_utility.css
@@ -5,7 +5,7 @@
  */
 
 .sl-scroll-lock {
-  padding-right: var(--sl-scroll-lock-size) !important;
+  padding-right: var(--wa-scroll-lock-size) !important;
   overflow: hidden !important;
 }
 
diff --git a/src/themes/dark.css b/src/themes/dark.css
deleted file mode 100644
index d95776fd0..000000000
--- a/src/themes/dark.css
+++ /dev/null
@@ -1,531 +0,0 @@
-:host,
-.sl-theme-dark {
-  color-scheme: dark;
-
-  /*
-   * Color Primitives
-   */
-
-  /* Gray */
-  --sl-color-gray-50: hsl(240 5.1% 15%);
-  --sl-color-gray-100: hsl(240 5.7% 18.2%);
-  --sl-color-gray-200: hsl(240 4.6% 22%);
-  --sl-color-gray-300: hsl(240 5% 27.6%);
-  --sl-color-gray-400: hsl(240 5% 35.5%);
-  --sl-color-gray-500: hsl(240 3.7% 44%);
-  --sl-color-gray-600: hsl(240 5.3% 58%);
-  --sl-color-gray-700: hsl(240 5.6% 73%);
-  --sl-color-gray-800: hsl(240 7.3% 84%);
-  --sl-color-gray-900: hsl(240 9.1% 91.8%);
-  --sl-color-gray-950: hsl(0 0% 95%);
-
-  /* Red */
-  --sl-color-red-50: hsl(0 56% 23.9%);
-  --sl-color-red-100: hsl(0.6 60% 33.9%);
-  --sl-color-red-200: hsl(0.9 67.2% 37.1%);
-  --sl-color-red-300: hsl(1.1 71.3% 43.7%);
-  --sl-color-red-400: hsl(1 76% 52.5%);
-  --sl-color-red-500: hsl(0.7 89.6% 57.2%);
-  --sl-color-red-600: hsl(0 98.6% 67.9%);
-  --sl-color-red-700: hsl(0 100% 72.3%);
-  --sl-color-red-800: hsl(0 100% 85.6%);
-  --sl-color-red-900: hsl(0 100% 90.3%);
-  --sl-color-red-950: hsl(0 100% 95.9%);
-
-  /* Orange */
-  --sl-color-orange-50: hsl(15 64.2% 23.3%);
-  --sl-color-orange-100: hsl(15.1 70.9% 31.1%);
-  --sl-color-orange-200: hsl(15.3 75.7% 35.5%);
-  --sl-color-orange-300: hsl(17.1 83.5% 42.7%);
-  --sl-color-orange-400: hsl(20.1 88% 50.8%);
-  --sl-color-orange-500: hsl(24.3 100% 50.5%);
-  --sl-color-orange-600: hsl(27.2 100% 57.7%);
-  --sl-color-orange-700: hsl(31.3 100% 68.7%);
-  --sl-color-orange-800: hsl(33.8 100% 79.3%);
-  --sl-color-orange-900: hsl(38.9 100% 87.7%);
-  --sl-color-orange-950: hsl(46.2 100% 95%);
-
-  /* Amber */
-  --sl-color-amber-50: hsl(21.9 66.3% 21.1%);
-  --sl-color-amber-100: hsl(21.5 73.6% 29.7%);
-  --sl-color-amber-200: hsl(22.3 77.6% 33.3%);
-  --sl-color-amber-300: hsl(25.4 84.2% 39.6%);
-  --sl-color-amber-400: hsl(31.4 87.4% 46.7%);
-  --sl-color-amber-500: hsl(37 96.6% 48.3%);
-  --sl-color-amber-600: hsl(43.3 100% 53.4%);
-  --sl-color-amber-700: hsl(46.5 100% 61.1%);
-  --sl-color-amber-800: hsl(49.3 100% 73%);
-  --sl-color-amber-900: hsl(51.8 100% 85%);
-  --sl-color-amber-950: hsl(60 100% 94.6%);
-
-  /* Yellow */
-  --sl-color-yellow-50: hsl(32.5 60% 18.2%);
-  --sl-color-yellow-100: hsl(28.1 68.6% 29%);
-  --sl-color-yellow-200: hsl(31.3 75.8% 30.8%);
-  --sl-color-yellow-300: hsl(34.7 84.4% 35.3%);
-  --sl-color-yellow-400: hsl(40.1 87.3% 43.3%);
-  --sl-color-yellow-500: hsl(44.7 88% 46%);
-  --sl-color-yellow-600: hsl(47.7 100% 50.9%);
-  --sl-color-yellow-700: hsl(51.3 100% 59.9%);
-  --sl-color-yellow-800: hsl(54.6 100% 73%);
-  --sl-color-yellow-900: hsl(58.9 100% 84.2%);
-  --sl-color-yellow-950: hsl(60 100% 94%);
-
-  /* Lime */
-  --sl-color-lime-50: hsl(86.5 54.4% 18%);
-  --sl-color-lime-100: hsl(87.6 56.8% 23.3%);
-  --sl-color-lime-200: hsl(85.8 63.2% 24.5%);
-  --sl-color-lime-300: hsl(86.1 72% 29.4%);
-  --sl-color-lime-400: hsl(85.5 76.8% 37.3%);
-  --sl-color-lime-500: hsl(84.3 74.2% 42.1%);
-  --sl-color-lime-600: hsl(82.8 81.5% 52.6%);
-  --sl-color-lime-700: hsl(82 89.9% 64%);
-  --sl-color-lime-800: hsl(80.9 97.9% 76.6%);
-  --sl-color-lime-900: hsl(77.9 100% 85.8%);
-  --sl-color-lime-950: hsl(69.5 100% 93.8%);
-
-  /* Green */
-  --sl-color-green-50: hsl(144.3 53.6% 16%);
-  --sl-color-green-100: hsl(143.2 55.4% 23.5%);
-  --sl-color-green-200: hsl(141.5 58.2% 26.3%);
-  --sl-color-green-300: hsl(140.8 64.2% 31.8%);
-  --sl-color-green-400: hsl(140.3 68% 39.2%);
-  --sl-color-green-500: hsl(141.1 64.9% 43%);
-  --sl-color-green-600: hsl(141.6 72.4% 55.2%);
-  --sl-color-green-700: hsl(141.7 82.7% 70.1%);
-  --sl-color-green-800: hsl(141 90.9% 82.1%);
-  --sl-color-green-900: hsl(142 100% 89.1%);
-  --sl-color-green-950: hsl(144 100% 95.5%);
-
-  /* Emerald */
-  --sl-color-emerald-50: hsl(164.3 75% 13.5%);
-  --sl-color-emerald-100: hsl(163.5 72.6% 20.1%);
-  --sl-color-emerald-200: hsl(162.1 73.7% 22.4%);
-  --sl-color-emerald-300: hsl(161.3 77.3% 27.6%);
-  --sl-color-emerald-400: hsl(159.6 77.1% 34.3%);
-  --sl-color-emerald-500: hsl(159.1 73.5% 37.9%);
-  --sl-color-emerald-600: hsl(157.8 66.8% 48.9%);
-  --sl-color-emerald-700: hsl(156.2 76.1% 63.8%);
-  --sl-color-emerald-800: hsl(152.4 84.4% 77.4%);
-  --sl-color-emerald-900: hsl(149.3 100% 87%);
-  --sl-color-emerald-950: hsl(158.6 100% 94.8%);
-
-  /* Teal */
-  --sl-color-teal-50: hsl(176.5 51.5% 15.4%);
-  --sl-color-teal-100: hsl(175.9 54.7% 22.3%);
-  --sl-color-teal-200: hsl(175.9 60.7% 23.9%);
-  --sl-color-teal-300: hsl(174.5 67.3% 28.8%);
-  --sl-color-teal-400: hsl(174.4 71.9% 34.9%);
-  --sl-color-teal-500: hsl(173.1 71% 38.3%);
-  --sl-color-teal-600: hsl(172.3 68.2% 48.1%);
-  --sl-color-teal-700: hsl(170.5 81.3% 61.5%);
-  --sl-color-teal-800: hsl(168.4 92.1% 75.2%);
-  --sl-color-teal-900: hsl(168.3 100% 86%);
-  --sl-color-teal-950: hsl(180 100% 95.5%);
-
-  /* Cyan */
-  --sl-color-cyan-50: hsl(197.1 53.8% 20.3%);
-  --sl-color-cyan-100: hsl(196.8 57.3% 27.2%);
-  --sl-color-cyan-200: hsl(195.3 62.7% 29.4%);
-  --sl-color-cyan-300: hsl(193.5 71.3% 34.1%);
-  --sl-color-cyan-400: hsl(192.5 76.8% 40.6%);
-  --sl-color-cyan-500: hsl(189.4 78.6% 42.6%);
-  --sl-color-cyan-600: hsl(188.2 89.1% 51.7%);
-  --sl-color-cyan-700: hsl(187 98.6% 66.2%);
-  --sl-color-cyan-800: hsl(184.9 100% 78.3%);
-  --sl-color-cyan-900: hsl(180 100% 86.6%);
-  --sl-color-cyan-950: hsl(180 100% 94.8%);
-
-  /* Sky */
-  --sl-color-sky-50: hsl(203 63.8% 20.9%);
-  --sl-color-sky-100: hsl(203.4 70.4% 28%);
-  --sl-color-sky-200: hsl(202.7 75.8% 30.8%);
-  --sl-color-sky-300: hsl(203.1 80.4% 36.1%);
-  --sl-color-sky-400: hsl(202.1 80.5% 44.3%);
-  --sl-color-sky-500: hsl(199.7 85.9% 47.7%);
-  --sl-color-sky-600: hsl(198.7 97.9% 57.2%);
-  --sl-color-sky-700: hsl(198.7 100% 70.5%);
-  --sl-color-sky-800: hsl(198.8 100% 82.5%);
-  --sl-color-sky-900: hsl(198.5 100% 89.9%);
-  --sl-color-sky-950: hsl(186 100% 95.5%);
-
-  /* Blue */
-  --sl-color-blue-50: hsl(227.1 49.5% 22.7%);
-  --sl-color-blue-100: hsl(225.8 58.9% 36.8%);
-  --sl-color-blue-200: hsl(227.7 64.4% 42.9%);
-  --sl-color-blue-300: hsl(226.1 72.7% 51.2%);
-  --sl-color-blue-400: hsl(222.6 86.5% 56.3%);
-  --sl-color-blue-500: hsl(217.8 95.8% 57.4%);
-  --sl-color-blue-600: hsl(213.3 100% 65%);
-  --sl-color-blue-700: hsl(210.9 100% 74.8%);
-  --sl-color-blue-800: hsl(211.5 100% 83.4%);
-  --sl-color-blue-900: hsl(211 100% 88.9%);
-  --sl-color-blue-950: hsl(201.8 100% 95.3%);
-
-  /* Indigo */
-  --sl-color-indigo-50: hsl(243.5 40.8% 27%);
-  --sl-color-indigo-100: hsl(242.9 45.7% 37.6%);
-  --sl-color-indigo-200: hsl(244.7 52.7% 43.1%);
-  --sl-color-indigo-300: hsl(245.3 60.5% 52.4%);
-  --sl-color-indigo-400: hsl(244.1 79.2% 60.4%);
-  --sl-color-indigo-500: hsl(239.6 88.7% 63.8%);
-  --sl-color-indigo-600: hsl(234.5 96.7% 70.9%);
-  --sl-color-indigo-700: hsl(229.4 100% 78.3%);
-  --sl-color-indigo-800: hsl(227.1 100% 85%);
-  --sl-color-indigo-900: hsl(223.8 100% 89.9%);
-  --sl-color-indigo-950: hsl(220 100% 95.1%);
-
-  /* Violet */
-  --sl-color-violet-50: hsl(265.1 57.3% 25.4%);
-  --sl-color-violet-100: hsl(263.5 63.8% 39.4%);
-  --sl-color-violet-200: hsl(263.4 66.2% 44.1%);
-  --sl-color-violet-300: hsl(263.7 72.8% 52.4%);
-  --sl-color-violet-400: hsl(262.5 87.3% 59.8%);
-  --sl-color-violet-500: hsl(258.3 95.1% 63.2%);
-  --sl-color-violet-600: hsl(255.1 100% 67.2%);
-  --sl-color-violet-700: hsl(253 100% 81.5%);
-  --sl-color-violet-800: hsl(251.7 100% 87.9%);
-  --sl-color-violet-900: hsl(254.1 100% 91.7%);
-  --sl-color-violet-950: hsl(257.1 100% 96.1%);
-
-  /* Purple */
-  --sl-color-purple-50: hsl(276 54.3% 20.5%);
-  --sl-color-purple-100: hsl(273.6 61.8% 35.4%);
-  --sl-color-purple-200: hsl(272.9 64% 41.4%);
-  --sl-color-purple-300: hsl(271.9 68.1% 49.2%);
-  --sl-color-purple-400: hsl(271.5 85.1% 57.8%);
-  --sl-color-purple-500: hsl(270.7 96.4% 62.1%);
-  --sl-color-purple-600: hsl(270.5 100% 71.9%);
-  --sl-color-purple-700: hsl(270.9 100% 81.3%);
-  --sl-color-purple-800: hsl(272.4 100% 87.7%);
-  --sl-color-purple-900: hsl(276.7 100% 91.5%);
-  --sl-color-purple-950: hsl(300 100% 96.5%);
-
-  /* Fuchsia */
-
-  --sl-color-fuchsia-50: hsl(297.1 51.2% 18.6%);
-  --sl-color-fuchsia-100: hsl(296.7 59.5% 31.5%);
-  --sl-color-fuchsia-200: hsl(295.4 65.4% 35.1%);
-  --sl-color-fuchsia-300: hsl(294.6 67.4% 42.2%);
-  --sl-color-fuchsia-400: hsl(293.3 68.7% 51.2%);
-  --sl-color-fuchsia-500: hsl(292.1 88.4% 57.7%);
-  --sl-color-fuchsia-600: hsl(292 98.5% 59.5%);
-  --sl-color-fuchsia-700: hsl(292.4 100% 79.5%);
-  --sl-color-fuchsia-800: hsl(292.9 100% 86.8%);
-  --sl-color-fuchsia-900: hsl(300 100% 91.5%);
-  --sl-color-fuchsia-950: hsl(300 100% 96.3%);
-
-  /* Pink */
-  --sl-color-pink-50: hsl(336.2 59.6% 20%);
-  --sl-color-pink-100: hsl(336.8 63.9% 34%);
-  --sl-color-pink-200: hsl(336.8 68.7% 37.6%);
-  --sl-color-pink-300: hsl(336.1 71.8% 44.5%);
-  --sl-color-pink-400: hsl(333.9 74.9% 53.1%);
-  --sl-color-pink-500: hsl(330.7 86.3% 57.7%);
-  --sl-color-pink-600: hsl(328.6 91.5% 67.2%);
-  --sl-color-pink-700: hsl(327.4 97.6% 78.7%);
-  --sl-color-pink-800: hsl(325.1 100% 86.6%);
-  --sl-color-pink-900: hsl(322.1 100% 91.3%);
-  --sl-color-pink-950: hsl(315 100% 95.9%);
-
-  /* Rose */
-  --sl-color-rose-50: hsl(342.3 62.9% 21.5%);
-  --sl-color-rose-100: hsl(342.8 68.9% 34.2%);
-  --sl-color-rose-200: hsl(344.8 72.6% 37.3%);
-  --sl-color-rose-300: hsl(346.9 75.8% 43.7%);
-  --sl-color-rose-400: hsl(348.2 80.1% 52.7%);
-  --sl-color-rose-500: hsl(350.4 94.8% 57.5%);
-  --sl-color-rose-600: hsl(351.2 100% 58.1%);
-  --sl-color-rose-700: hsl(352.3 100% 78.1%);
-  --sl-color-rose-800: hsl(352 100% 86.2%);
-  --sl-color-rose-900: hsl(354.5 100% 90.7%);
-  --sl-color-rose-950: hsl(353.3 100% 95.7%);
-
-  /*
-   * Theme Tokens
-   */
-
-  /* Primary */
-  --sl-color-primary-50: var(--sl-color-sky-50);
-  --sl-color-primary-100: var(--sl-color-sky-100);
-  --sl-color-primary-200: var(--sl-color-sky-200);
-  --sl-color-primary-300: var(--sl-color-sky-300);
-  --sl-color-primary-400: var(--sl-color-sky-400);
-  --sl-color-primary-500: var(--sl-color-sky-500);
-  --sl-color-primary-600: var(--sl-color-sky-600);
-  --sl-color-primary-700: var(--sl-color-sky-700);
-  --sl-color-primary-800: var(--sl-color-sky-800);
-  --sl-color-primary-900: var(--sl-color-sky-900);
-  --sl-color-primary-950: var(--sl-color-sky-950);
-
-  /* Success */
-  --sl-color-success-50: var(--sl-color-green-50);
-  --sl-color-success-100: var(--sl-color-green-100);
-  --sl-color-success-200: var(--sl-color-green-200);
-  --sl-color-success-300: var(--sl-color-green-300);
-  --sl-color-success-400: var(--sl-color-green-400);
-  --sl-color-success-500: var(--sl-color-green-500);
-  --sl-color-success-600: var(--sl-color-green-600);
-  --sl-color-success-700: var(--sl-color-green-700);
-  --sl-color-success-800: var(--sl-color-green-800);
-  --sl-color-success-900: var(--sl-color-green-900);
-  --sl-color-success-950: var(--sl-color-green-950);
-
-  /* Warning */
-  --sl-color-warning-50: var(--sl-color-amber-50);
-  --sl-color-warning-100: var(--sl-color-amber-100);
-  --sl-color-warning-200: var(--sl-color-amber-200);
-  --sl-color-warning-300: var(--sl-color-amber-300);
-  --sl-color-warning-400: var(--sl-color-amber-400);
-  --sl-color-warning-500: var(--sl-color-amber-500);
-  --sl-color-warning-600: var(--sl-color-amber-600);
-  --sl-color-warning-700: var(--sl-color-amber-700);
-  --sl-color-warning-800: var(--sl-color-amber-800);
-  --sl-color-warning-900: var(--sl-color-amber-900);
-  --sl-color-warning-950: var(--sl-color-amber-950);
-
-  /* Danger */
-  --sl-color-danger-50: var(--sl-color-red-50);
-  --sl-color-danger-100: var(--sl-color-red-100);
-  --sl-color-danger-200: var(--sl-color-red-200);
-  --sl-color-danger-300: var(--sl-color-red-300);
-  --sl-color-danger-400: var(--sl-color-red-400);
-  --sl-color-danger-500: var(--sl-color-red-500);
-  --sl-color-danger-600: var(--sl-color-red-600);
-  --sl-color-danger-700: var(--sl-color-red-700);
-  --sl-color-danger-800: var(--sl-color-red-800);
-  --sl-color-danger-900: var(--sl-color-red-900);
-  --sl-color-danger-950: var(--sl-color-red-950);
-
-  /* Neutral */
-  --sl-color-neutral-50: var(--sl-color-gray-50);
-  --sl-color-neutral-100: var(--sl-color-gray-100);
-  --sl-color-neutral-200: var(--sl-color-gray-200);
-  --sl-color-neutral-300: var(--sl-color-gray-300);
-  --sl-color-neutral-400: var(--sl-color-gray-400);
-  --sl-color-neutral-500: var(--sl-color-gray-500);
-  --sl-color-neutral-600: var(--sl-color-gray-600);
-  --sl-color-neutral-700: var(--sl-color-gray-700);
-  --sl-color-neutral-800: var(--sl-color-gray-800);
-  --sl-color-neutral-900: var(--sl-color-gray-900);
-  --sl-color-neutral-950: var(--sl-color-gray-950);
-
-  /* Neutral one-offs */
-  --sl-color-neutral-0: hsl(240, 5.9%, 11%);
-  --sl-color-neutral-1000: hsl(0, 0%, 100%);
-
-  /*
-   * Border radii
-   */
-
-  --sl-border-radius-small: 0.1875rem; /* 3px */
-  --sl-border-radius-medium: 0.25rem; /* 4px */
-  --sl-border-radius-large: 0.5rem; /* 8px */
-  --sl-border-radius-x-large: 1rem; /* 16px */
-
-  --sl-border-radius-circle: 50%;
-  --sl-border-radius-pill: 9999px;
-
-  /*
-   * Elevations
-   */
-
-  --sl-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
-  --sl-shadow-small: 0 1px 2px rgb(0 0 0 / 24%);
-  --sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 24%);
-  --sl-shadow-large: 0 2px 8px rgb(0 0 0 / 24%);
-  --sl-shadow-x-large: 0 4px 16px rgb(0 0 0 / 24%);
-
-  /*
-   * Spacings
-   */
-
-  --sl-spacing-3x-small: 0.125rem; /* 2px */
-  --sl-spacing-2x-small: 0.25rem; /* 4px */
-  --sl-spacing-x-small: 0.5rem; /* 8px */
-  --sl-spacing-small: 0.75rem; /* 12px */
-  --sl-spacing-medium: 1rem; /* 16px */
-  --sl-spacing-large: 1.25rem; /* 20px */
-  --sl-spacing-x-large: 1.75rem; /* 28px */
-  --sl-spacing-2x-large: 2.25rem; /* 36px */
-  --sl-spacing-3x-large: 3rem; /* 48px */
-  --sl-spacing-4x-large: 4.5rem; /* 72px */
-
-  /*
-   * Transitions
-   */
-
-  --sl-transition-x-slow: 1000ms;
-  --sl-transition-slow: 500ms;
-  --sl-transition-medium: 250ms;
-  --sl-transition-fast: 150ms;
-  --sl-transition-x-fast: 50ms;
-
-  /*
-   * Typography
-   */
-
-  /* Fonts */
-  --sl-font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-  --sl-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --sl-font-serif: Georgia, 'Times New Roman', serif;
-
-  /* Font sizes */
-  --sl-font-size-2x-small: 0.625rem; /* 10px */
-  --sl-font-size-x-small: 0.75rem; /* 12px */
-  --sl-font-size-small: 0.875rem; /* 14px */
-  --sl-font-size-medium: 1rem; /* 16px */
-  --sl-font-size-large: 1.25rem; /* 20px */
-  --sl-font-size-x-large: 1.5rem; /* 24px */
-  --sl-font-size-2x-large: 2.25rem; /* 36px */
-  --sl-font-size-3x-large: 3rem; /* 48px */
-  --sl-font-size-4x-large: 4.5rem; /* 72px */
-
-  /* Font weights */
-  --sl-font-weight-light: 300;
-  --sl-font-weight-normal: 400;
-  --sl-font-weight-semibold: 500;
-  --sl-font-weight-bold: 700;
-
-  /* Letter spacings */
-  --sl-letter-spacing-denser: -0.03em;
-  --sl-letter-spacing-dense: -0.015em;
-  --sl-letter-spacing-normal: normal;
-  --sl-letter-spacing-loose: 0.075em;
-  --sl-letter-spacing-looser: 0.15em;
-
-  /* Line heights */
-  --sl-line-height-denser: 1;
-  --sl-line-height-dense: 1.4;
-  --sl-line-height-normal: 1.8;
-  --sl-line-height-loose: 2.2;
-  --sl-line-height-looser: 2.6;
-
-  /* Focus rings */
-  --sl-focus-ring-color: var(--sl-color-primary-700);
-  --sl-focus-ring-style: solid;
-  --sl-focus-ring-width: 3px;
-  --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);
-  --sl-focus-ring-offset: 1px;
-
-  /*
-   * Forms
-   */
-
-  /* Buttons */
-  --sl-button-font-size-small: var(--sl-font-size-x-small);
-  --sl-button-font-size-medium: var(--sl-font-size-small);
-  --sl-button-font-size-large: var(--sl-font-size-medium);
-
-  /* Inputs */
-  --sl-input-height-small: 1.875rem; /* 30px */
-  --sl-input-height-medium: 2.5rem; /* 40px */
-  --sl-input-height-large: 3.125rem; /* 50px */
-
-  --sl-input-background-color: var(--sl-color-neutral-0);
-  --sl-input-background-color-hover: var(--sl-input-background-color);
-  --sl-input-background-color-focus: var(--sl-input-background-color);
-  --sl-input-background-color-disabled: var(--sl-color-neutral-100);
-  --sl-input-border-color: var(--sl-color-neutral-300);
-  --sl-input-border-color-hover: var(--sl-color-neutral-400);
-  --sl-input-border-color-focus: var(--sl-color-primary-500);
-  --sl-input-border-color-disabled: var(--sl-color-neutral-300);
-  --sl-input-border-width: 1px;
-  --sl-input-required-content: '*';
-  --sl-input-required-content-offset: -2px;
-  --sl-input-required-content-color: var(--sl-input-label-color);
-
-  --sl-input-border-radius-small: var(--sl-border-radius-medium);
-  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
-  --sl-input-border-radius-large: var(--sl-border-radius-medium);
-
-  --sl-input-font-family: var(--sl-font-sans);
-  --sl-input-font-weight: var(--sl-font-weight-normal);
-  --sl-input-font-size-small: var(--sl-font-size-small);
-  --sl-input-font-size-medium: var(--sl-font-size-medium);
-  --sl-input-font-size-large: var(--sl-font-size-large);
-  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
-
-  --sl-input-color: var(--sl-color-neutral-700);
-  --sl-input-color-hover: var(--sl-color-neutral-700);
-  --sl-input-color-focus: var(--sl-color-neutral-700);
-  --sl-input-color-disabled: var(--sl-color-neutral-900);
-  --sl-input-icon-color: var(--sl-color-neutral-500);
-  --sl-input-icon-color-hover: var(--sl-color-neutral-600);
-  --sl-input-icon-color-focus: var(--sl-color-neutral-600);
-  --sl-input-placeholder-color: var(--sl-color-neutral-500);
-  --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
-  --sl-input-spacing-small: var(--sl-spacing-small);
-  --sl-input-spacing-medium: var(--sl-spacing-medium);
-  --sl-input-spacing-large: var(--sl-spacing-large);
-
-  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
-  --sl-input-focus-ring-offset: 0;
-
-  --sl-input-filled-background-color: var(--sl-color-neutral-100);
-  --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
-  --sl-input-filled-background-color-focus: var(--sl-color-neutral-100);
-  --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
-  --sl-input-filled-color: var(--sl-color-neutral-800);
-  --sl-input-filled-color-hover: var(--sl-color-neutral-800);
-  --sl-input-filled-color-focus: var(--sl-color-neutral-700);
-  --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
-
-  /* Labels */
-  --sl-input-label-font-size-small: var(--sl-font-size-small);
-  --sl-input-label-font-size-medium: var(--sl-font-size-medium);
-  --sl-input-label-font-size-large: var(--sl-font-size-large);
-  --sl-input-label-color: inherit;
-
-  /* Help text */
-  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
-  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
-  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
-  --sl-input-help-text-color: var(--sl-color-neutral-500);
-
-  /* Toggles (checkboxes, radios, switches) */
-  --sl-toggle-size-small: 0.875rem; /* 14px */
-  --sl-toggle-size-medium: 1.125rem; /* 18px */
-  --sl-toggle-size-large: 1.375rem; /* 22px */
-
-  /*
-   * Overlays
-   */
-
-  --sl-overlay-background-color: hsl(0 0% 0% / 43%);
-
-  /*
-   * Panels
-   */
-
-  --sl-panel-background-color: var(--sl-color-neutral-50);
-  --sl-panel-border-color: var(--sl-color-neutral-200);
-  --sl-panel-border-width: 1px;
-
-  /*
-   * Tooltips
-   */
-
-  --sl-tooltip-border-radius: var(--sl-border-radius-medium);
-  --sl-tooltip-background-color: var(--sl-color-neutral-800);
-  --sl-tooltip-color: var(--sl-color-neutral-0);
-  --sl-tooltip-font-family: var(--sl-font-sans);
-  --sl-tooltip-font-weight: var(--sl-font-weight-normal);
-  --sl-tooltip-font-size: var(--sl-font-size-small);
-  --sl-tooltip-line-height: var(--sl-line-height-dense);
-  --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
-  --sl-tooltip-arrow-size: 6px;
-
-  /*
-   * Z-indexes
-   */
-
-  --sl-z-index-drawer: 700;
-  --sl-z-index-dialog: 800;
-  --sl-z-index-dropdown: 900;
-  --sl-z-index-toast: 950;
-  --sl-z-index-tooltip: 1000;
-}
-
-/* _utility.css */
diff --git a/src/themes/default.css b/src/themes/default.css
new file mode 100644
index 000000000..a597050be
--- /dev/null
+++ b/src/themes/default.css
@@ -0,0 +1,273 @@
+:root,
+:host,
+.sl-theme-default {
+  color-scheme: light;
+
+  /**
+   * Primitives
+   */
+  --wa-color-red-95: #ffefef;
+  --wa-color-red-90: #ffdedf;
+  --wa-color-red-80: #ffb7bb;
+  --wa-color-red-70: #fb9098;
+  --wa-color-red-60: #f36677;
+  --wa-color-red-50: #e41c51;
+  --wa-color-red-40: #ab203e;
+  --wa-color-red-30: #831f31;
+  --wa-color-red-20: #5d1b25;
+  --wa-color-red-10: #331417;
+
+  --wa-color-yellow-95: #f9f2db;
+  --wa-color-yellow-90: #f4e5b6;
+  --wa-color-yellow-80: #e8c762;
+  --wa-color-yellow-70: #d6a927;
+  --wa-color-yellow-60: #b78f21;
+  --wa-color-yellow-50: #92701b;
+  --wa-color-yellow-40: #705514;
+  --wa-color-yellow-30: #584210;
+  --wa-color-yellow-20: #41300c;
+  --wa-color-yellow-10: #261c07;
+
+  --wa-color-green-95: #e6f7ea;
+  --wa-color-green-90: #cceed4;
+  --wa-color-green-80: #91daa2;
+  --wa-color-green-70: #51c56c;
+  --wa-color-green-60: #3da856;
+  --wa-color-green-50: #308544;
+  --wa-color-green-40: #256534;
+  --wa-color-green-30: #1d4f29;
+  --wa-color-green-20: #15391d;
+  --wa-color-green-10: #0c2211;
+
+  --wa-color-blue-95: #eaf3fe;
+  --wa-color-blue-90: #d5e8fd;
+  --wa-color-blue-80: #a6cdfb;
+  --wa-color-blue-70: #76b2f9;
+  --wa-color-blue-60: #4496f6;
+  --wa-color-blue-50: #0070f2;
+  --wa-color-blue-40: #0055b9;
+  --wa-color-blue-30: #004390;
+  --wa-color-blue-20: #00316a;
+  --wa-color-blue-10: #001d40;
+
+  --wa-color-neutral-95: #f2f2f4;
+  --wa-color-neutral-90: #e5e5ea;
+  --wa-color-neutral-80: #c8c9d3;
+  --wa-color-neutral-70: #acaebc;
+  --wa-color-neutral-60: #9193a6;
+  --wa-color-neutral-50: #71748c;
+  --wa-color-neutral-40: #56586a;
+  --wa-color-neutral-30: #434453;
+  --wa-color-neutral-20: #30323c;
+  --wa-color-neutral-10: #1c1d23;
+
+  --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-link: var(--wa-color-brand-text-on-surface);
+
+  --wa-color-selection-background: var(--wa-color-blue-80);
+  --wa-color-selection-text: var(--wa-color-black);
+
+  --wa-color-focus: var(--wa-color-blue-60); /* semantic variants? */
+
+  --wa-color-tint-white: rgb(255 255 255 / 0.2);
+  --wa-color-tint-black: rgb(0 0 0 / 0.2);
+
+  /**
+   * Semantic color variants
+   */
+  --wa-color-brand-container-fill-vivid: var(--wa-color-blue-40);
+  --wa-color-brand-container-fill-muted: var(--wa-color-blue-95);
+  --wa-color-brand-container-outline-vivid: var(--wa-color-blue-30);
+  --wa-color-brand-container-outline-muted: var(--wa-color-blue-90);
+  --wa-color-brand-element-fill-vivid: var(--wa-color-blue-50);
+  --wa-color-brand-element-fill-muted: var(--wa-color-blue-90);
+  --wa-color-brand-element-outline-vivid: var(--wa-color-blue-50);
+  --wa-color-brand-element-outline-muted: var(--wa-color-blue-80);
+  --wa-color-brand-text-on-vivid: var(--wa-color-white);
+  --wa-color-brand-text-on-muted: var(--wa-color-blue-40);
+  --wa-color-brand-text-on-surface: var(--wa-color-blue-50);
+
+  --wa-color-success-container-fill-vivid: var(--wa-color-green-40);
+  --wa-color-success-container-fill-muted: var(--wa-color-green-95);
+  --wa-color-success-container-outline-vivid: var(--wa-color-green-30);
+  --wa-color-success-container-outline-muted: var(--wa-color-green-90);
+  --wa-color-success-element-fill-vivid: var(--wa-color-green-50);
+  --wa-color-success-element-fill-muted: var(--wa-color-green-90);
+  --wa-color-success-element-outline-vivid: var(--wa-color-green-50);
+  --wa-color-success-element-outline-muted: var(--wa-color-green-80);
+  --wa-color-success-text-on-vivid: var(--wa-color-white);
+  --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-container-fill-vivid: var(--wa-color-yellow-40);
+  --wa-color-warning-container-fill-muted: var(--wa-color-yellow-95);
+  --wa-color-warning-container-outline-vivid: var(--wa-color-yellow-30);
+  --wa-color-warning-container-outline-muted: var(--wa-color-yellow-90);
+  --wa-color-warning-element-fill-vivid: var(--wa-color-yellow-50);
+  --wa-color-warning-element-fill-muted: var(--wa-color-yellow-90);
+  --wa-color-warning-element-outline-vivid: var(--wa-color-yellow-50);
+  --wa-color-warning-element-outline-muted: var(--wa-color-yellow-80);
+  --wa-color-warning-text-on-vivid: var(--wa-color-white);
+  --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-container-fill-vivid: var(--wa-color-red-40);
+  --wa-color-danger-container-fill-muted: var(--wa-color-red-95);
+  --wa-color-danger-container-outline-vivid: var(--wa-color-red-30);
+  --wa-color-danger-container-outline-muted: var(--wa-color-red-90);
+  --wa-color-danger-element-fill-vivid: var(--wa-color-red-50);
+  --wa-color-danger-element-fill-muted: var(--wa-color-red-90);
+  --wa-color-danger-element-outline-vivid: var(--wa-color-red-50);
+  --wa-color-danger-element-outline-muted: var(--wa-color-red-80);
+  --wa-color-danger-text-on-vivid: var(--wa-color-white);
+  --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-container-fill-vivid: var(--wa-color-neutral-40);
+  --wa-color-neutral-container-fill-muted: var(--wa-color-neutral-95);
+  --wa-color-neutral-container-outline-vivid: var(--wa-color-neutral-30);
+  --wa-color-neutral-container-outline-muted: var(--wa-color-neutral-90);
+  --wa-color-neutral-element-fill-vivid: var(--wa-color-neutral-50);
+  --wa-color-neutral-element-fill-muted: var(--wa-color-neutral-90);
+  --wa-color-neutral-element-outline-vivid: var(--wa-color-neutral-50);
+  --wa-color-neutral-element-outline-muted: var(--wa-color-neutral-80);
+  --wa-color-neutral-text-on-vivid: var(--wa-color-white);
+  --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: system-ui;
+  --wa-font-family-body: system-ui;
+  --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-medium);
+  --wa-font-weight-body: var(--wa-font-weight-normal);
+
+  --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-3xs: 0.125rem; /* 2 */
+  --wa-space-2xs: 0.25rem; /* 4 */
+  --wa-space-xs: 0.5rem; /* 8 */
+  --wa-space-s: 0.75rem; /* 12 */
+  --wa-space-m: 1rem; /* 16 */
+  --wa-space-l: 1.25rem; /* 20 */
+  --wa-space-xl: 1.5rem; /* 24 */
+  --wa-space-2xl: 2rem; /* 32 */
+  --wa-space-3xl: 3rem; /* 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-thin: 0.0625rem; /* 1px*/
+  --wa-border-width-medium: calc(var(--wa-border-width-thin) * 2);
+  --wa-border-width-thick: calc(var(--wa-border-width-thin) * 3);
+
+  --wa-border-style: solid;
+
+  --wa-corners-half: calc(var(--wa-corners-1x) * 0.5);
+  --wa-corners-1x: 0.25rem;
+  --wa-corners-2x: calc(var(--wa-corners-1x) * 2);
+  --wa-corners-3x: calc(var(--wa-corners-1x) * 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-level-0: none;
+  --wa-shadow-level-1: 0 0.0625rem 0.125rem rgb(0 0 0 / 0.2);
+  --wa-shadow-level-2: 0 0.125rem 0.25rem rgb(0 0 0 / 0.18);
+  --wa-shadow-level-3: 0 0.25rem 0.5rem rgb(0 0 0 / 0.16);
+
+  /**
+   * 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: 50ms;
+
+  /**
+   * 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-color-resting: var(--wa-color-neutral-element-outline-muted);
+  --wa-form-controls-color-activated: var(--wa-color-brand-action-vivid);
+  --wa-form-controls-font-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);
+}
+
+/* _utility.css */
diff --git a/src/themes/light.css b/src/themes/light.css
deleted file mode 100644
index 8c1640006..000000000
--- a/src/themes/light.css
+++ /dev/null
@@ -1,531 +0,0 @@
-:root,
-:host,
-.sl-theme-light {
-  color-scheme: light;
-
-  /*
-   * Color Primitives
-   */
-
-  /* Gray */
-  --sl-color-gray-50: hsl(0 0% 97.5%);
-  --sl-color-gray-100: hsl(240 4.8% 95.9%);
-  --sl-color-gray-200: hsl(240 5.9% 90%);
-  --sl-color-gray-300: hsl(240 4.9% 83.9%);
-  --sl-color-gray-400: hsl(240 5% 64.9%);
-  --sl-color-gray-500: hsl(240 3.8% 46.1%);
-  --sl-color-gray-600: hsl(240 5.2% 33.9%);
-  --sl-color-gray-700: hsl(240 5.3% 26.1%);
-  --sl-color-gray-800: hsl(240 3.7% 15.9%);
-  --sl-color-gray-900: hsl(240 5.9% 10%);
-  --sl-color-gray-950: hsl(240 7.3% 8%);
-
-  /* Red */
-  --sl-color-red-50: hsl(0 85.7% 97.3%);
-  --sl-color-red-100: hsl(0 93.3% 94.1%);
-  --sl-color-red-200: hsl(0 96.3% 89.4%);
-  --sl-color-red-300: hsl(0 93.5% 81.8%);
-  --sl-color-red-400: hsl(0 90.6% 70.8%);
-  --sl-color-red-500: hsl(0 84.2% 60.2%);
-  --sl-color-red-600: hsl(0 72.2% 50.6%);
-  --sl-color-red-700: hsl(0 73.7% 41.8%);
-  --sl-color-red-800: hsl(0 70% 35.3%);
-  --sl-color-red-900: hsl(0 62.8% 30.6%);
-  --sl-color-red-950: hsl(0 60% 19.6%);
-
-  /* Orange */
-  --sl-color-orange-50: hsl(33.3 100% 96.5%);
-  --sl-color-orange-100: hsl(34.3 100% 91.8%);
-  --sl-color-orange-200: hsl(32.1 97.7% 83.1%);
-  --sl-color-orange-300: hsl(30.7 97.2% 72.4%);
-  --sl-color-orange-400: hsl(27 96% 61%);
-  --sl-color-orange-500: hsl(24.6 95% 53.1%);
-  --sl-color-orange-600: hsl(20.5 90.2% 48.2%);
-  --sl-color-orange-700: hsl(17.5 88.3% 40.4%);
-  --sl-color-orange-800: hsl(15 79.1% 33.7%);
-  --sl-color-orange-900: hsl(15.3 74.6% 27.8%);
-  --sl-color-orange-950: hsl(15.2 69.1% 19%);
-
-  /* Amber */
-  --sl-color-amber-50: hsl(48 100% 96.1%);
-  --sl-color-amber-100: hsl(48 96.5% 88.8%);
-  --sl-color-amber-200: hsl(48 96.6% 76.7%);
-  --sl-color-amber-300: hsl(45.9 96.7% 64.5%);
-  --sl-color-amber-400: hsl(43.3 96.4% 56.3%);
-  --sl-color-amber-500: hsl(37.7 92.1% 50.2%);
-  --sl-color-amber-600: hsl(32.1 94.6% 43.7%);
-  --sl-color-amber-700: hsl(26 90.5% 37.1%);
-  --sl-color-amber-800: hsl(22.7 82.5% 31.4%);
-  --sl-color-amber-900: hsl(21.7 77.8% 26.5%);
-  --sl-color-amber-950: hsl(22.9 74.1% 16.7%);
-
-  /* Yellow */
-  --sl-color-yellow-50: hsl(54.5 91.7% 95.3%);
-  --sl-color-yellow-100: hsl(54.9 96.7% 88%);
-  --sl-color-yellow-200: hsl(52.8 98.3% 76.9%);
-  --sl-color-yellow-300: hsl(50.4 97.8% 63.5%);
-  --sl-color-yellow-400: hsl(47.9 95.8% 53.1%);
-  --sl-color-yellow-500: hsl(45.4 93.4% 47.5%);
-  --sl-color-yellow-600: hsl(40.6 96.1% 40.4%);
-  --sl-color-yellow-700: hsl(35.5 91.7% 32.9%);
-  --sl-color-yellow-800: hsl(31.8 81% 28.8%);
-  --sl-color-yellow-900: hsl(28.4 72.5% 25.7%);
-  --sl-color-yellow-950: hsl(33.1 69% 13.9%);
-
-  /* Lime */
-  --sl-color-lime-50: hsl(78.3 92% 95.1%);
-  --sl-color-lime-100: hsl(79.6 89.1% 89.2%);
-  --sl-color-lime-200: hsl(80.9 88.5% 79.6%);
-  --sl-color-lime-300: hsl(82 84.5% 67.1%);
-  --sl-color-lime-400: hsl(82.7 78% 55.5%);
-  --sl-color-lime-500: hsl(83.7 80.5% 44.3%);
-  --sl-color-lime-600: hsl(84.8 85.2% 34.5%);
-  --sl-color-lime-700: hsl(85.9 78.4% 27.3%);
-  --sl-color-lime-800: hsl(86.3 69% 22.7%);
-  --sl-color-lime-900: hsl(87.6 61.2% 20.2%);
-  --sl-color-lime-950: hsl(86.5 60.6% 13.9%);
-
-  /* Green */
-  --sl-color-green-50: hsl(138.5 76.5% 96.7%);
-  --sl-color-green-100: hsl(140.6 84.2% 92.5%);
-  --sl-color-green-200: hsl(141 78.9% 85.1%);
-  --sl-color-green-300: hsl(141.7 76.6% 73.1%);
-  --sl-color-green-400: hsl(141.9 69.2% 58%);
-  --sl-color-green-500: hsl(142.1 70.6% 45.3%);
-  --sl-color-green-600: hsl(142.1 76.2% 36.3%);
-  --sl-color-green-700: hsl(142.4 71.8% 29.2%);
-  --sl-color-green-800: hsl(142.8 64.2% 24.1%);
-  --sl-color-green-900: hsl(143.8 61.2% 20.2%);
-  --sl-color-green-950: hsl(144.3 60.7% 12%);
-
-  /* Emerald */
-  --sl-color-emerald-50: hsl(151.8 81% 95.9%);
-  --sl-color-emerald-100: hsl(149.3 80.4% 90%);
-  --sl-color-emerald-200: hsl(152.4 76% 80.4%);
-  --sl-color-emerald-300: hsl(156.2 71.6% 66.9%);
-  --sl-color-emerald-400: hsl(158.1 64.4% 51.6%);
-  --sl-color-emerald-500: hsl(160.1 84.1% 39.4%);
-  --sl-color-emerald-600: hsl(161.4 93.5% 30.4%);
-  --sl-color-emerald-700: hsl(162.9 93.5% 24.3%);
-  --sl-color-emerald-800: hsl(163.1 88.1% 19.8%);
-  --sl-color-emerald-900: hsl(164.2 85.7% 16.5%);
-  --sl-color-emerald-950: hsl(164.3 87.5% 9.4%);
-
-  /* Teal */
-  --sl-color-teal-50: hsl(166.2 76.5% 96.7%);
-  --sl-color-teal-100: hsl(167.2 85.5% 89.2%);
-  --sl-color-teal-200: hsl(168.4 83.8% 78.2%);
-  --sl-color-teal-300: hsl(170.6 76.9% 64.3%);
-  --sl-color-teal-400: hsl(172.5 66% 50.4%);
-  --sl-color-teal-500: hsl(173.4 80.4% 40%);
-  --sl-color-teal-600: hsl(174.7 83.9% 31.6%);
-  --sl-color-teal-700: hsl(175.3 77.4% 26.1%);
-  --sl-color-teal-800: hsl(176.1 69.4% 21.8%);
-  --sl-color-teal-900: hsl(175.9 60.8% 19%);
-  --sl-color-teal-950: hsl(176.5 58.6% 11.4%);
-
-  /* Cyan */
-  --sl-color-cyan-50: hsl(183.2 100% 96.3%);
-  --sl-color-cyan-100: hsl(185.1 95.9% 90.4%);
-  --sl-color-cyan-200: hsl(186.2 93.5% 81.8%);
-  --sl-color-cyan-300: hsl(187 92.4% 69%);
-  --sl-color-cyan-400: hsl(187.9 85.7% 53.3%);
-  --sl-color-cyan-500: hsl(188.7 94.5% 42.7%);
-  --sl-color-cyan-600: hsl(191.6 91.4% 36.5%);
-  --sl-color-cyan-700: hsl(192.9 82.3% 31%);
-  --sl-color-cyan-800: hsl(194.4 69.6% 27.1%);
-  --sl-color-cyan-900: hsl(196.4 63.6% 23.7%);
-  --sl-color-cyan-950: hsl(196.8 61% 16.1%);
-
-  /* Sky */
-  --sl-color-sky-50: hsl(204 100% 97.1%);
-  --sl-color-sky-100: hsl(204 93.8% 93.7%);
-  --sl-color-sky-200: hsl(200.6 94.4% 86.1%);
-  --sl-color-sky-300: hsl(199.4 95.5% 73.9%);
-  --sl-color-sky-400: hsl(198.4 93.2% 59.6%);
-  --sl-color-sky-500: hsl(198.6 88.7% 48.4%);
-  --sl-color-sky-600: hsl(200.4 98% 39.4%);
-  --sl-color-sky-700: hsl(201.3 96.3% 32.2%);
-  --sl-color-sky-800: hsl(201 90% 27.5%);
-  --sl-color-sky-900: hsl(202 80.3% 23.9%);
-  --sl-color-sky-950: hsl(202.3 73.8% 16.5%);
-
-  /* Blue */
-  --sl-color-blue-50: hsl(213.8 100% 96.9%);
-  --sl-color-blue-100: hsl(214.3 94.6% 92.7%);
-  --sl-color-blue-200: hsl(213.3 96.9% 87.3%);
-  --sl-color-blue-300: hsl(211.7 96.4% 78.4%);
-  --sl-color-blue-400: hsl(213.1 93.9% 67.8%);
-  --sl-color-blue-500: hsl(217.2 91.2% 59.8%);
-  --sl-color-blue-600: hsl(221.2 83.2% 53.3%);
-  --sl-color-blue-700: hsl(224.3 76.3% 48%);
-  --sl-color-blue-800: hsl(225.9 70.7% 40.2%);
-  --sl-color-blue-900: hsl(224.4 64.3% 32.9%);
-  --sl-color-blue-950: hsl(226.2 55.3% 18.4%);
-
-  /* Indigo */
-  --sl-color-indigo-50: hsl(225.9 100% 96.7%);
-  --sl-color-indigo-100: hsl(226.5 100% 93.9%);
-  --sl-color-indigo-200: hsl(228 96.5% 88.8%);
-  --sl-color-indigo-300: hsl(229.7 93.5% 81.8%);
-  --sl-color-indigo-400: hsl(234.5 89.5% 73.9%);
-  --sl-color-indigo-500: hsl(238.7 83.5% 66.7%);
-  --sl-color-indigo-600: hsl(243.4 75.4% 58.6%);
-  --sl-color-indigo-700: hsl(244.5 57.9% 50.6%);
-  --sl-color-indigo-800: hsl(243.7 54.5% 41.4%);
-  --sl-color-indigo-900: hsl(242.2 47.4% 34.3%);
-  --sl-color-indigo-950: hsl(243.5 43.6% 22.9%);
-
-  /* Violet */
-  --sl-color-violet-50: hsl(250 100% 97.6%);
-  --sl-color-violet-100: hsl(251.4 91.3% 95.5%);
-  --sl-color-violet-200: hsl(250.5 95.2% 91.8%);
-  --sl-color-violet-300: hsl(252.5 94.7% 85.1%);
-  --sl-color-violet-400: hsl(255.1 91.7% 76.3%);
-  --sl-color-violet-500: hsl(258.3 89.5% 66.3%);
-  --sl-color-violet-600: hsl(262.1 83.3% 57.8%);
-  --sl-color-violet-700: hsl(263.4 70% 50.4%);
-  --sl-color-violet-800: hsl(263.4 69.3% 42.2%);
-  --sl-color-violet-900: hsl(263.5 67.4% 34.9%);
-  --sl-color-violet-950: hsl(265.1 61.5% 21.4%);
-
-  /* Purple */
-  --sl-color-purple-50: hsl(270 100% 98%);
-  --sl-color-purple-100: hsl(268.7 100% 95.5%);
-  --sl-color-purple-200: hsl(268.6 100% 91.8%);
-  --sl-color-purple-300: hsl(269.2 97.4% 85.1%);
-  --sl-color-purple-400: hsl(270 95.2% 75.3%);
-  --sl-color-purple-500: hsl(270.7 91% 65.1%);
-  --sl-color-purple-600: hsl(271.5 81.3% 55.9%);
-  --sl-color-purple-700: hsl(272.1 71.7% 47.1%);
-  --sl-color-purple-800: hsl(272.9 67.2% 39.4%);
-  --sl-color-purple-900: hsl(273.6 65.6% 32%);
-  --sl-color-purple-950: hsl(276 59.5% 16.5%);
-
-  /* Fuchsia */
-  --sl-color-fuchsia-50: hsl(289.1 100% 97.8%);
-  --sl-color-fuchsia-100: hsl(287 100% 95.5%);
-  --sl-color-fuchsia-200: hsl(288.3 95.8% 90.6%);
-  --sl-color-fuchsia-300: hsl(291.1 93.1% 82.9%);
-  --sl-color-fuchsia-400: hsl(292 91.4% 72.5%);
-  --sl-color-fuchsia-500: hsl(292.2 84.1% 60.6%);
-  --sl-color-fuchsia-600: hsl(293.4 69.5% 48.8%);
-  --sl-color-fuchsia-700: hsl(294.7 72.4% 39.8%);
-  --sl-color-fuchsia-800: hsl(295.4 70.2% 32.9%);
-  --sl-color-fuchsia-900: hsl(296.7 63.6% 28%);
-  --sl-color-fuchsia-950: hsl(297.1 56.8% 14.5%);
-
-  /* Pink */
-  --sl-color-pink-50: hsl(327.3 73.3% 97.1%);
-  --sl-color-pink-100: hsl(325.7 77.8% 94.7%);
-  --sl-color-pink-200: hsl(325.9 84.6% 89.8%);
-  --sl-color-pink-300: hsl(327.4 87.1% 81.8%);
-  --sl-color-pink-400: hsl(328.6 85.5% 70.2%);
-  --sl-color-pink-500: hsl(330.4 81.2% 60.4%);
-  --sl-color-pink-600: hsl(333.3 71.4% 50.6%);
-  --sl-color-pink-700: hsl(335.1 77.6% 42%);
-  --sl-color-pink-800: hsl(335.8 74.4% 35.3%);
-  --sl-color-pink-900: hsl(335.9 69% 30.4%);
-  --sl-color-pink-950: hsl(336.2 65.4% 15.9%);
-
-  /* Rose */
-  --sl-color-rose-50: hsl(355.7 100% 97.3%);
-  --sl-color-rose-100: hsl(355.6 100% 94.7%);
-  --sl-color-rose-200: hsl(352.7 96.1% 90%);
-  --sl-color-rose-300: hsl(352.6 95.7% 81.8%);
-  --sl-color-rose-400: hsl(351.3 94.5% 71.4%);
-  --sl-color-rose-500: hsl(349.7 89.2% 60.2%);
-  --sl-color-rose-600: hsl(346.8 77.2% 49.8%);
-  --sl-color-rose-700: hsl(345.3 82.7% 40.8%);
-  --sl-color-rose-800: hsl(343.4 79.7% 34.7%);
-  --sl-color-rose-900: hsl(341.5 75.5% 30.4%);
-  --sl-color-rose-950: hsl(341.3 70.1% 17.1%);
-
-  /*
-   * Theme Tokens
-   */
-
-  /* Primary */
-  --sl-color-primary-50: var(--sl-color-sky-50);
-  --sl-color-primary-100: var(--sl-color-sky-100);
-  --sl-color-primary-200: var(--sl-color-sky-200);
-  --sl-color-primary-300: var(--sl-color-sky-300);
-  --sl-color-primary-400: var(--sl-color-sky-400);
-  --sl-color-primary-500: var(--sl-color-sky-500);
-  --sl-color-primary-600: var(--sl-color-sky-600);
-  --sl-color-primary-700: var(--sl-color-sky-700);
-  --sl-color-primary-800: var(--sl-color-sky-800);
-  --sl-color-primary-900: var(--sl-color-sky-900);
-  --sl-color-primary-950: var(--sl-color-sky-950);
-
-  /* Success */
-  --sl-color-success-50: var(--sl-color-green-50);
-  --sl-color-success-100: var(--sl-color-green-100);
-  --sl-color-success-200: var(--sl-color-green-200);
-  --sl-color-success-300: var(--sl-color-green-300);
-  --sl-color-success-400: var(--sl-color-green-400);
-  --sl-color-success-500: var(--sl-color-green-500);
-  --sl-color-success-600: var(--sl-color-green-600);
-  --sl-color-success-700: var(--sl-color-green-700);
-  --sl-color-success-800: var(--sl-color-green-800);
-  --sl-color-success-900: var(--sl-color-green-900);
-  --sl-color-success-950: var(--sl-color-green-950);
-
-  /* Warning */
-  --sl-color-warning-50: var(--sl-color-amber-50);
-  --sl-color-warning-100: var(--sl-color-amber-100);
-  --sl-color-warning-200: var(--sl-color-amber-200);
-  --sl-color-warning-300: var(--sl-color-amber-300);
-  --sl-color-warning-400: var(--sl-color-amber-400);
-  --sl-color-warning-500: var(--sl-color-amber-500);
-  --sl-color-warning-600: var(--sl-color-amber-600);
-  --sl-color-warning-700: var(--sl-color-amber-700);
-  --sl-color-warning-800: var(--sl-color-amber-800);
-  --sl-color-warning-900: var(--sl-color-amber-900);
-  --sl-color-warning-950: var(--sl-color-amber-950);
-
-  /* Danger */
-  --sl-color-danger-50: var(--sl-color-red-50);
-  --sl-color-danger-100: var(--sl-color-red-100);
-  --sl-color-danger-200: var(--sl-color-red-200);
-  --sl-color-danger-300: var(--sl-color-red-300);
-  --sl-color-danger-400: var(--sl-color-red-400);
-  --sl-color-danger-500: var(--sl-color-red-500);
-  --sl-color-danger-600: var(--sl-color-red-600);
-  --sl-color-danger-700: var(--sl-color-red-700);
-  --sl-color-danger-800: var(--sl-color-red-800);
-  --sl-color-danger-900: var(--sl-color-red-900);
-  --sl-color-danger-950: var(--sl-color-red-950);
-
-  /* Neutral */
-  --sl-color-neutral-50: var(--sl-color-gray-50);
-  --sl-color-neutral-100: var(--sl-color-gray-100);
-  --sl-color-neutral-200: var(--sl-color-gray-200);
-  --sl-color-neutral-300: var(--sl-color-gray-300);
-  --sl-color-neutral-400: var(--sl-color-gray-400);
-  --sl-color-neutral-500: var(--sl-color-gray-500);
-  --sl-color-neutral-600: var(--sl-color-gray-600);
-  --sl-color-neutral-700: var(--sl-color-gray-700);
-  --sl-color-neutral-800: var(--sl-color-gray-800);
-  --sl-color-neutral-900: var(--sl-color-gray-900);
-  --sl-color-neutral-950: var(--sl-color-gray-950);
-
-  /* Neutral one-offs */
-  --sl-color-neutral-0: hsl(0, 0%, 100%);
-  --sl-color-neutral-1000: hsl(0, 0%, 0%);
-
-  /*
-   * Border radii
-   */
-
-  --sl-border-radius-small: 0.1875rem; /* 3px */
-  --sl-border-radius-medium: 0.25rem; /* 4px */
-  --sl-border-radius-large: 0.5rem; /* 8px */
-  --sl-border-radius-x-large: 1rem; /* 16px */
-
-  --sl-border-radius-circle: 50%;
-  --sl-border-radius-pill: 9999px;
-
-  /*
-   * Elevations
-   */
-
-  --sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
-  --sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
-  --sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
-  --sl-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
-  --sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
-
-  /*
-   * Spacings
-   */
-
-  --sl-spacing-3x-small: 0.125rem; /* 2px */
-  --sl-spacing-2x-small: 0.25rem; /* 4px */
-  --sl-spacing-x-small: 0.5rem; /* 8px */
-  --sl-spacing-small: 0.75rem; /* 12px */
-  --sl-spacing-medium: 1rem; /* 16px */
-  --sl-spacing-large: 1.25rem; /* 20px */
-  --sl-spacing-x-large: 1.75rem; /* 28px */
-  --sl-spacing-2x-large: 2.25rem; /* 36px */
-  --sl-spacing-3x-large: 3rem; /* 48px */
-  --sl-spacing-4x-large: 4.5rem; /* 72px */
-
-  /*
-   * Transitions
-   */
-
-  --sl-transition-x-slow: 1000ms;
-  --sl-transition-slow: 500ms;
-  --sl-transition-medium: 250ms;
-  --sl-transition-fast: 150ms;
-  --sl-transition-x-fast: 50ms;
-
-  /*
-   * Typography
-   */
-
-  /* Fonts */
-  --sl-font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-  --sl-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --sl-font-serif: Georgia, 'Times New Roman', serif;
-
-  /* Font sizes */
-  --sl-font-size-2x-small: 0.625rem; /* 10px */
-  --sl-font-size-x-small: 0.75rem; /* 12px */
-  --sl-font-size-small: 0.875rem; /* 14px */
-  --sl-font-size-medium: 1rem; /* 16px */
-  --sl-font-size-large: 1.25rem; /* 20px */
-  --sl-font-size-x-large: 1.5rem; /* 24px */
-  --sl-font-size-2x-large: 2.25rem; /* 36px */
-  --sl-font-size-3x-large: 3rem; /* 48px */
-  --sl-font-size-4x-large: 4.5rem; /* 72px */
-
-  /* Font weights */
-  --sl-font-weight-light: 300;
-  --sl-font-weight-normal: 400;
-  --sl-font-weight-semibold: 500;
-  --sl-font-weight-bold: 700;
-
-  /* Letter spacings */
-  --sl-letter-spacing-denser: -0.03em;
-  --sl-letter-spacing-dense: -0.015em;
-  --sl-letter-spacing-normal: normal;
-  --sl-letter-spacing-loose: 0.075em;
-  --sl-letter-spacing-looser: 0.15em;
-
-  /* Line heights */
-  --sl-line-height-denser: 1;
-  --sl-line-height-dense: 1.4;
-  --sl-line-height-normal: 1.8;
-  --sl-line-height-loose: 2.2;
-  --sl-line-height-looser: 2.6;
-
-  /* Focus rings */
-  --sl-focus-ring-color: var(--sl-color-primary-600);
-  --sl-focus-ring-style: solid;
-  --sl-focus-ring-width: 3px;
-  --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);
-  --sl-focus-ring-offset: 1px;
-
-  /*
-   * Forms
-   */
-
-  /* Buttons */
-  --sl-button-font-size-small: var(--sl-font-size-x-small);
-  --sl-button-font-size-medium: var(--sl-font-size-small);
-  --sl-button-font-size-large: var(--sl-font-size-medium);
-
-  /* Inputs */
-  --sl-input-height-small: 1.875rem; /* 30px */
-  --sl-input-height-medium: 2.5rem; /* 40px */
-  --sl-input-height-large: 3.125rem; /* 50px */
-
-  --sl-input-background-color: var(--sl-color-neutral-0);
-  --sl-input-background-color-hover: var(--sl-input-background-color);
-  --sl-input-background-color-focus: var(--sl-input-background-color);
-  --sl-input-background-color-disabled: var(--sl-color-neutral-100);
-  --sl-input-border-color: var(--sl-color-neutral-300);
-  --sl-input-border-color-hover: var(--sl-color-neutral-400);
-  --sl-input-border-color-focus: var(--sl-color-primary-500);
-  --sl-input-border-color-disabled: var(--sl-color-neutral-300);
-  --sl-input-border-width: 1px;
-  --sl-input-required-content: '*';
-  --sl-input-required-content-offset: -2px;
-  --sl-input-required-content-color: var(--sl-input-label-color);
-
-  --sl-input-border-radius-small: var(--sl-border-radius-medium);
-  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
-  --sl-input-border-radius-large: var(--sl-border-radius-medium);
-
-  --sl-input-font-family: var(--sl-font-sans);
-  --sl-input-font-weight: var(--sl-font-weight-normal);
-  --sl-input-font-size-small: var(--sl-font-size-small);
-  --sl-input-font-size-medium: var(--sl-font-size-medium);
-  --sl-input-font-size-large: var(--sl-font-size-large);
-  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
-
-  --sl-input-color: var(--sl-color-neutral-700);
-  --sl-input-color-hover: var(--sl-color-neutral-700);
-  --sl-input-color-focus: var(--sl-color-neutral-700);
-  --sl-input-color-disabled: var(--sl-color-neutral-900);
-  --sl-input-icon-color: var(--sl-color-neutral-500);
-  --sl-input-icon-color-hover: var(--sl-color-neutral-600);
-  --sl-input-icon-color-focus: var(--sl-color-neutral-600);
-  --sl-input-placeholder-color: var(--sl-color-neutral-500);
-  --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
-  --sl-input-spacing-small: var(--sl-spacing-small);
-  --sl-input-spacing-medium: var(--sl-spacing-medium);
-  --sl-input-spacing-large: var(--sl-spacing-large);
-
-  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
-  --sl-input-focus-ring-offset: 0;
-
-  --sl-input-filled-background-color: var(--sl-color-neutral-100);
-  --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
-  --sl-input-filled-background-color-focus: var(--sl-color-neutral-100);
-  --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
-  --sl-input-filled-color: var(--sl-color-neutral-800);
-  --sl-input-filled-color-hover: var(--sl-color-neutral-800);
-  --sl-input-filled-color-focus: var(--sl-color-neutral-700);
-  --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
-
-  /* Labels */
-  --sl-input-label-font-size-small: var(--sl-font-size-small);
-  --sl-input-label-font-size-medium: var(--sl-font-size-medium);
-  --sl-input-label-font-size-large: var(--sl-font-size-large);
-  --sl-input-label-color: inherit;
-
-  /* Help text */
-  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
-  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
-  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
-  --sl-input-help-text-color: var(--sl-color-neutral-500);
-
-  /* Toggles (checkboxes, radios, switches) */
-  --sl-toggle-size-small: 0.875rem; /* 14px */
-  --sl-toggle-size-medium: 1.125rem; /* 18px */
-  --sl-toggle-size-large: 1.375rem; /* 22px */
-
-  /*
-   * Overlays
-   */
-
-  --sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
-
-  /*
-   * Panels
-   */
-
-  --sl-panel-background-color: var(--sl-color-neutral-0);
-  --sl-panel-border-color: var(--sl-color-neutral-200);
-  --sl-panel-border-width: 1px;
-
-  /*
-   * Tooltips
-   */
-
-  --sl-tooltip-border-radius: var(--sl-border-radius-medium);
-  --sl-tooltip-background-color: var(--sl-color-neutral-800);
-  --sl-tooltip-color: var(--sl-color-neutral-0);
-  --sl-tooltip-font-family: var(--sl-font-sans);
-  --sl-tooltip-font-weight: var(--sl-font-weight-normal);
-  --sl-tooltip-font-size: var(--sl-font-size-small);
-  --sl-tooltip-line-height: var(--sl-line-height-dense);
-  --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
-  --sl-tooltip-arrow-size: 6px;
-
-  /*
-   * Z-indexes
-   */
-
-  --sl-z-index-drawer: 700;
-  --sl-z-index-dialog: 800;
-  --sl-z-index-dropdown: 900;
-  --sl-z-index-toast: 950;
-  --sl-z-index-tooltip: 1000;
-}
-
-/* _utility.css */