hold

docs/_includes/default.njk

@@ -34,6 +34,7 @@
     <meta property="og:image" content="{{ assetUrl(meta.image, true) }}" />
 
     {# Web Awesome #}
+    <link rel="stylesheet" href="/dist/themes/applied.css" />
     <link rel="stylesheet" href="/dist/themes/default.css" />
     <script type="module" src="/dist/autoloader.js"></script>
 

docs/_includes/sidebar.njk

@@ -2,6 +2,7 @@
   <li>
     <h2>Experimental</h2>
     <ul>
+      <li><a href="/experimental/style-guide">Style Guide</a></li>
       <li><a href="/experimental/themer">Themer</a></li>
     </ul>
   </li>

docs/assets/styles/docs.css

@@ -57,22 +57,6 @@ html:not(.wa-theme-dark) .only-dark {
   box-sizing: inherit;
 }
 
-a:focus,
-button:focus {
-  outline: none;
-}
-
-a:focus-visible,
-button:focus-visible {
-  outline: var(--wa-focus-ring);
-  outline-offset: var(--wa-focus-ring-offset);
-}
-
-::selection {
-  background-color: var(--wa-color-selection-background);
-  color: var(--wa-color-selection-text);
-}
-
 /* Show custom elements only after they're registered */
 :not(:defined),
 :not(:defined) * {
@@ -94,11 +78,6 @@ html {
 
 body {
   height: 100%;
-  font: 16px var(--wa-font-family-body);
-  font-weight: var(--wa-font-weight-normal);
-  background-color: var(--docs-background-color);
-  line-height: var(--wa-font-line-height-regular);
-  color: var(--wa-color-text-normal);
   padding: 0;
   margin: 0;
   overflow-x: hidden;
@@ -113,8 +92,6 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--wa-font-family-body);
-  font-weight: var(--wa-font-weight-medium);
   margin: 3rem 0 1.5rem 0;
 }
 
@@ -122,39 +99,15 @@ h1:first-of-type {
   margin-top: 1rem;
 }
 
-h1 {
-  font-size: var(--wa-font-size-2xl);
-}
-
 h2 {
   font-size: 1.875rem;
-  border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
-}
-
-h3 {
-  font-size: 1.625rem;
-}
-
-h4 {
-  font-size: 1.375rem;
-}
-
-h5 {
-  font-size: 1.125rem;
-}
-
-h6 {
-  font-size: 0.875rem;
+  border-bottom: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
 }
 
 p {
   margin-block-end: 1.5em;
 }
 
-img {
-  max-width: 100%;
-}
-
 .badges img {
   border-radius: var(--wa-corners-1x);
 }
@@ -170,77 +123,12 @@ details pre {
   border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
 }
 
-a {
-  color: var(--wa-color-text-link);
-}
-
-a:hover {
-  color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-tint-hover));
-}
-
-abbr[title] {
-  text-decoration: none;
-  border-bottom: dashed 1px var(--wa-color-text-link);
-  cursor: help;
-}
-
-em {
-  font-style: italic;
-}
-
-strong {
-  font-weight: var(--wa-font-weight-heavy);
-}
-
 code {
-  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(--wa-corners-1x);
   padding: 0.125em 0.25em;
 }
 
-kbd {
-  background: var(--wa-color-neutral-fill-muted);
-  border: solid 1px var(--wa-color-neutral-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(--wa-corners-1x);
-  color: var(--wa-color-neutral-text-on-muted);
-  padding: 0.125em 0.4em;
-}
-
-ins {
-  background-color: var(--wa-color-success-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(--wa-color-danger-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(--wa-color-warning-fill-muted);
-  color: inherit;
-  border-radius: var(--wa-corners-1x);
-  padding: 0.125em 0.25em;
-}
-
-hr {
-  border: none;
-  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;

docs/pages/experimental/style-guide.md

@@ -0,0 +1,19 @@
+---
+meta:
+  title: Style Guide
+  description: TODO
+---
+
+# Style Guide
+
+## Headings
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+Lorem ipsum dolor sit amet, [consectetur adipiscing elit](#), sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.