From 9260d35b4cf7aef22465afde5382f0d556633ba9 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Mon, 16 Dec 2024 06:55:01 -0500
Subject: [PATCH] Split Applied CSS out to make it easier to manage and share
 w/ components

As discussed with @lindsaym-fa
Still unsure about some of these (especially about whether blockquote & details should be separate) but I figured better go ahead and split and we can fine tune later

Co-Authored-By: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
---
 src/styles/applied.css            | 414 +-----------------------------
 src/styles/components/README.md   |   3 +
 src/styles/components/wa-page.css |  15 ++
 src/styles/native/blockquote.css  |  19 ++
 src/styles/native/code.css        |  59 +++++
 src/styles/native/content.css     | 190 ++++++++++++++
 src/styles/native/details.css     |  70 +++++
 src/styles/native/forms.css       |  20 ++
 src/styles/native/tables.css      |  40 +++
 9 files changed, 423 insertions(+), 407 deletions(-)
 create mode 100644 src/styles/components/README.md
 create mode 100644 src/styles/components/wa-page.css
 create mode 100644 src/styles/native/blockquote.css
 create mode 100644 src/styles/native/code.css
 create mode 100644 src/styles/native/content.css
 create mode 100644 src/styles/native/details.css
 create mode 100644 src/styles/native/forms.css
 create mode 100644 src/styles/native/tables.css

diff --git a/src/styles/applied.css b/src/styles/applied.css
index f0354e192..1ba84087e 100644
--- a/src/styles/applied.css
+++ b/src/styles/applied.css
@@ -1,4 +1,11 @@
 @import url('utilities/visually-hidden.css');
+@import url('components/wa-page.css');
+@import url('native/content.css');
+@import url('native/code.css');
+@import url('native/forms.css');
+@import url('native/details.css');
+@import url('native/tables.css');
+@import url('native/blockquote.css');
 
 /**
  * Applied styles are used to "reset" a page and provide defaults for typography and native HTML elements based on
@@ -12,24 +19,12 @@ html {
   tab-size: 4;
 }
 
-:is(html, body):has(wa-page) {
-  min-height: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-}
-
 *,
 *::before,
 *::after {
   box-sizing: inherit;
 }
 
-/** Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible. IE: `<a href="#id-for-h2">` anchors. */
-wa-page :is(*, *:after, *:before) {
-  scroll-margin-top: var(--scroll-margin-top);
-}
-
 body {
   min-height: 100vh;
   font-family: var(--wa-font-family-body);
@@ -90,398 +85,3 @@ body {
   ):has(+ *) {
   margin: 0 0 var(--wa-space-xl) 0;
 }
-
-/* Headings & text */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--wa-font-family-heading);
-  font-weight: var(--wa-font-weight-heading);
-  line-height: var(--wa-line-height-condensed);
-  text-wrap: balance;
-}
-
-h1 {
-  font-size: var(--wa-font-size-3xl);
-}
-
-h2 {
-  font-size: var(--wa-font-size-2xl);
-}
-
-h3 {
-  font-size: var(--wa-font-size-xl);
-}
-
-h4 {
-  font-size: var(--wa-font-size-l);
-}
-
-h5 {
-  font-size: var(--wa-font-size-m);
-}
-
-h6 {
-  font-size: var(--wa-font-size-s);
-}
-
-hr {
-  border: none;
-  border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
-  margin: var(--wa-space-xl) 0;
-}
-
-em,
-i {
-  font-style: italic;
-}
-
-strong,
-b {
-  font-weight: var(--wa-font-weight-bold);
-}
-
-s {
-  text-decoration: line-through;
-}
-
-del,
-ins,
-mark {
-  padding: 0.125em 0.25em;
-}
-
-ins {
-  background-color: var(--wa-color-success-fill-quiet);
-  color: var(--wa-color-success-on-normal);
-  border-radius: var(--wa-border-radius-s);
-  text-decoration: none;
-}
-
-del {
-  background-color: var(--wa-color-danger-fill-quiet);
-  color: var(--wa-color-danger-on-normal);
-  border-radius: var(--wa-border-radius-s);
-  text-decoration: none;
-  padding: 0.125em 0.25em;
-}
-
-mark {
-  background-color: var(--wa-color-warning-fill-quiet);
-  color: inherit;
-  border-radius: var(--wa-border-radius-s);
-  padding: 0.125em 0.25em;
-}
-
-small {
-  font-size: 0.875em; /* relative */
-}
-
-sub,
-sup {
-  position: relative;
-  font-size: 0.875em; /* relative */
-  line-height: 0;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-abbr[title] {
-  text-decoration: none;
-  border-bottom: dashed 1px currentColor;
-  cursor: help;
-}
-
-/* Code and similar */
-code,
-pre,
-kbd,
-samp,
-var {
-  font-family: var(--wa-font-family-code);
-  font-size: 0.875em;
-  background-color: var(--wa-color-overlay-inline);
-  border-radius: var(--wa-border-radius-s);
-  padding: 0.25em 0.5em;
-}
-
-code {
-  white-space: normal;
-}
-
-pre {
-  color: var(--wa-color-text-normal);
-  border-radius: var(--wa-border-radius-s);
-  padding: var(--wa-space-m);
-  white-space: pre;
-}
-
-pre:has(code) {
-  position: relative;
-  padding: 0;
-  white-space: normal;
-
-  code {
-    display: block;
-    font-size: 1em;
-    background-color: transparent;
-    padding: var(--wa-space-m);
-    white-space: pre;
-    overflow-x: auto;
-  }
-}
-
-kbd {
-  border: solid var(--wa-border-width-s) var(--wa-color-neutral-border-quiet);
-  border-bottom-width: var(--wa-border-width-m);
-  font-family: var(--wa-font-family-code);
-  border-radius: var(--wa-border-radius-s);
-  color: var(--wa-color-neutral-on-normal);
-  padding: 0.25em 0.5em;
-}
-
-kbd wa-icon {
-  vertical-align: -2px;
-}
-
-/* Block quotes */
-blockquote {
-  position: relative;
-  font-family: var(--wa-font-family-longform);
-  font-size: var(--wa-font-size-l);
-  font-style: italic;
-  background-color: var(--wa-color-neutral-fill-quiet);
-  border-radius: var(--wa-border-radius-s);
-  padding: var(--wa-space-xl);
-  margin: 0 0 var(--wa-space-xl) 0;
-}
-
-blockquote > :first-child {
-  margin-block-start: 0;
-}
-
-blockquote > :last-child {
-  margin-block-end: 0;
-}
-
-/* Lists */
-ul,
-ol {
-  padding: 0;
-  margin: 0 0 var(--wa-space-xl) var(--wa-space-xl);
-}
-
-ul {
-  list-style: disc;
-}
-
-li {
-  padding: 0;
-}
-
-li > ul,
-li > ol {
-  margin-block-end: 0;
-}
-
-/* Details */
-details {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  border-radius: var(--wa-panel-border-radius);
-  padding: 0;
-  margin: 0;
-  padding-inline: var(--wa-space-m);
-  margin-block-end: var(--wa-space-xl);
-}
-
-details :last-child {
-  margin-block-end: 0;
-}
-
-summary {
-  position: relative;
-  display: block;
-  cursor: pointer;
-  text-indent: calc(0.4em + 1em);
-  padding: 0;
-  padding-block: var(--wa-space-m);
-  margin: 0;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-summary::-webkit-details-marker {
-  display: none;
-}
-
-summary::before {
-  content: '';
-  border-width: 0.4em;
-  border-style: solid;
-  border-color: transparent transparent transparent currentColor;
-  position: absolute;
-  top: calc(50% - 0.4em);
-  left: calc(0.4em / 2);
-  rotate: 0;
-  transform-origin: calc(0.4em / 2) 50%;
-}
-
-details[open] {
-  padding-block-end: var(--wa-space-m);
-}
-
-details[open] > summary::before {
-  rotate: 90deg;
-}
-
-details + details {
-  margin-top: calc(-1 * var(--wa-space-xl) + var(--wa-border-width-s));
-}
-
-/* Tables */
-table {
-  width: 100%;
-  border: none;
-  border-collapse: collapse;
-}
-
-caption {
-  color: var(--wa-color-text-quiet);
-}
-
-tbody tr {
-  border-top: solid var(--wa-border-width-s) var(--wa-color-surface-border);
-}
-
-tbody tr:hover {
-  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-quiet), transparent 50%);
-  border-top-color: var(--wa-color-neutral-border-quiet);
-}
-
-tbody tr:hover + tr {
-  border-top-color: var(--wa-color-neutral-border-quiet);
-}
-
-th {
-  font-size: var(--wa-font-size-s);
-  font-weight: var(--wa-font-weight-bold);
-}
-
-td,
-th {
-  text-align: start;
-  padding: var(--wa-space-l) var(--wa-space-s);
-  vertical-align: top;
-}
-
-/* Definition lists */
-dt {
-  font-weight: var(--wa-font-weight-semibold);
-}
-
-dd {
-  margin-inline-start: var(--wa-space-m);
-}
-
-/* Fieldsets */
-fieldset {
-  border: solid 1px var(--wa-color-surface-border);
-  border-radius: var(--wa-border-radius-s);
-  padding: var(--wa-space-m);
-  padding-block-end: var(--wa-space-xl);
-}
-
-legend {
-  padding: 0;
-  padding-inline: var(--wa-space-2xs);
-}
-
-/* Images, videos, iframes, etc. */
-img,
-svg,
-picture,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-embed,
-iframe,
-object {
-  max-width: 100%;
-}
-
-iframe {
-  border: none;
-}
-
-/* Links */
-a {
-  color: var(--wa-color-text-link);
-  text-decoration: var(--wa-link-decoration-default);
-  -webkit-text-decoration: var(--wa-link-decoration-default);
-}
-
-a:hover {
-  color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
-  text-decoration: var(--wa-link-decoration-hover);
-  -webkit-text-decoration: var(--wa-link-decoration-hover);
-}
-
-a:focus,
-button:focus {
-  outline: none;
-}
-
-a:focus-visible,
-button:focus-visible {
-  outline: var(--wa-focus-ring);
-  outline-offset: var(--wa-focus-ring-offset);
-}
-
-/* Native form controls */
-button,
-input,
-select,
-textarea {
-  font: inherit;
-}
-
-/* Utilities */
-
-table.wa-alternating-row-colors tbody tr:nth-child(2n + 1) {
-  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 80%);
-}
-
-/* Print styles */
-@media print {
-  /* Show URLs for printed links */
-  a:not(.anchor-heading)[href]::after {
-    content: ' (' attr(href) ')';
-  }
-
-  details,
-  pre {
-    background: none;
-    border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
-  }
-
-  summary {
-    list-style: none;
-  }
-
-  summary::marker,
-  summary::-webkit-details-marker {
-    display: none;
-  }
-}
diff --git a/src/styles/components/README.md b/src/styles/components/README.md
new file mode 100644
index 000000000..ace08c517
--- /dev/null
+++ b/src/styles/components/README.md
@@ -0,0 +1,3 @@
+# Styles for specific WA components
+
+These should move to the components own light DOM styles once this is possible, see #301
diff --git a/src/styles/components/wa-page.css b/src/styles/components/wa-page.css
new file mode 100644
index 000000000..ff3c5e45f
--- /dev/null
+++ b/src/styles/components/wa-page.css
@@ -0,0 +1,15 @@
+/* Should move to wa-page's light DOM styles once this is possible */
+:is(html, body):has(wa-page) {
+  min-height: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+/**
+ Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible.
+ IE: `<a href="#id-for-h2">` anchors.
+ */
+wa-page :is(*, *:after, *:before) {
+  scroll-margin-top: var(--scroll-margin-top);
+}
diff --git a/src/styles/native/blockquote.css b/src/styles/native/blockquote.css
new file mode 100644
index 000000000..fde260f32
--- /dev/null
+++ b/src/styles/native/blockquote.css
@@ -0,0 +1,19 @@
+/* Block quotes, callouts etc */
+blockquote {
+  position: relative;
+  font-family: var(--wa-font-family-longform);
+  font-size: var(--wa-font-size-l);
+  font-style: italic;
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border-radius: var(--wa-border-radius-s);
+  padding: var(--wa-space-xl);
+  margin: 0 0 var(--wa-space-xl) 0;
+
+  > :first-child {
+    margin-block-start: 0;
+  }
+
+  > :last-child {
+    margin-block-end: 0;
+  }
+}
diff --git a/src/styles/native/code.css b/src/styles/native/code.css
new file mode 100644
index 000000000..fb25fe04f
--- /dev/null
+++ b/src/styles/native/code.css
@@ -0,0 +1,59 @@
+/* Code and similar */
+code,
+pre,
+kbd,
+samp,
+var {
+  font-family: var(--wa-font-family-code);
+  font-size: 0.875em;
+  background-color: var(--wa-color-overlay-inline);
+  border-radius: var(--wa-border-radius-s);
+  padding: 0.25em 0.5em;
+}
+
+code {
+  white-space: normal;
+}
+
+pre {
+  color: var(--wa-color-text-normal);
+  border-radius: var(--wa-border-radius-s);
+  padding: var(--wa-space-m);
+  white-space: pre;
+}
+
+pre:has(code) {
+  position: relative;
+  padding: 0;
+  white-space: normal;
+
+  code {
+    display: block;
+    font-size: 1em;
+    background-color: transparent;
+    padding: var(--wa-space-m);
+    white-space: pre;
+    overflow-x: auto;
+  }
+}
+
+kbd {
+  border: solid var(--wa-border-width-s) var(--wa-color-neutral-border-quiet);
+  border-bottom-width: var(--wa-border-width-m);
+  font-family: var(--wa-font-family-code);
+  border-radius: var(--wa-border-radius-s);
+  color: var(--wa-color-neutral-on-normal);
+  padding: 0.25em 0.5em;
+
+  wa-icon {
+    vertical-align: -2px;
+  }
+}
+
+/* Print styles */
+@media print {
+  pre {
+    background: none;
+    border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
+  }
+}
diff --git a/src/styles/native/content.css b/src/styles/native/content.css
new file mode 100644
index 000000000..93df67670
--- /dev/null
+++ b/src/styles/native/content.css
@@ -0,0 +1,190 @@
+/* Content: headings, text, links media */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--wa-font-family-heading);
+  font-weight: var(--wa-font-weight-heading);
+  line-height: var(--wa-line-height-condensed);
+  text-wrap: balance;
+}
+
+h1 {
+  font-size: var(--wa-font-size-3xl);
+}
+
+h2 {
+  font-size: var(--wa-font-size-2xl);
+}
+
+h3 {
+  font-size: var(--wa-font-size-xl);
+}
+
+h4 {
+  font-size: var(--wa-font-size-l);
+}
+
+h5 {
+  font-size: var(--wa-font-size-m);
+}
+
+h6 {
+  font-size: var(--wa-font-size-s);
+}
+
+hr {
+  border: none;
+  border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
+  margin: var(--wa-space-xl) 0;
+}
+
+em,
+i {
+  font-style: italic;
+}
+
+strong,
+b {
+  font-weight: var(--wa-font-weight-bold);
+}
+
+s {
+  text-decoration: line-through;
+}
+
+del,
+ins,
+mark {
+  padding: 0.125em 0.25em;
+}
+
+ins {
+  background-color: var(--wa-color-success-fill-quiet);
+  color: var(--wa-color-success-on-normal);
+  border-radius: var(--wa-border-radius-s);
+  text-decoration: none;
+}
+
+del {
+  background-color: var(--wa-color-danger-fill-quiet);
+  color: var(--wa-color-danger-on-normal);
+  border-radius: var(--wa-border-radius-s);
+  text-decoration: none;
+  padding: 0.125em 0.25em;
+}
+
+mark {
+  background-color: var(--wa-color-warning-fill-quiet);
+  color: inherit;
+  border-radius: var(--wa-border-radius-s);
+  padding: 0.125em 0.25em;
+}
+
+small {
+  font-size: 0.875em; /* relative */
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.875em; /* relative */
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+abbr[title] {
+  text-decoration: none;
+  border-bottom: dashed 1px currentColor;
+  cursor: help;
+}
+
+/* Links */
+a {
+  color: var(--wa-color-text-link);
+  text-decoration: var(--wa-link-decoration-default);
+  -webkit-text-decoration: var(--wa-link-decoration-default);
+}
+
+a:hover {
+  color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
+  text-decoration: var(--wa-link-decoration-hover);
+  -webkit-text-decoration: var(--wa-link-decoration-hover);
+}
+
+a:focus,
+button:focus {
+  outline: none;
+}
+
+a:focus-visible,
+button:focus-visible {
+  outline: var(--wa-focus-ring);
+  outline-offset: var(--wa-focus-ring-offset);
+}
+
+/* Lists */
+ul,
+ol {
+  padding: 0;
+  margin: 0 0 var(--wa-space-xl) var(--wa-space-xl);
+}
+
+ul {
+  list-style: disc;
+}
+
+li {
+  padding: 0;
+}
+
+li > ul,
+li > ol {
+  margin-block-end: 0;
+}
+
+/* Definition lists */
+dt {
+  font-weight: var(--wa-font-weight-semibold);
+}
+
+dd {
+  margin-inline-start: var(--wa-space-m);
+}
+
+/* Images, videos, iframes, etc. */
+img,
+svg,
+picture,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+embed,
+iframe,
+object {
+  max-width: 100%;
+}
+
+iframe {
+  border: none;
+}
+
+/* Print styles */
+@media print {
+  /* Show URLs for printed links */
+  a:not(.anchor-heading)[href]::after {
+    content: ' (' attr(href) ')';
+  }
+}
diff --git a/src/styles/native/details.css b/src/styles/native/details.css
new file mode 100644
index 000000000..bf84af599
--- /dev/null
+++ b/src/styles/native/details.css
@@ -0,0 +1,70 @@
+/* Details */
+details {
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border-radius: var(--wa-panel-border-radius);
+  padding: 0;
+  margin: 0;
+  padding-inline: var(--wa-space-m);
+  margin-block-end: var(--wa-space-xl);
+
+  :last-child {
+    margin-block-end: 0;
+  }
+}
+
+summary {
+  position: relative;
+  display: block;
+  cursor: pointer;
+  text-indent: calc(0.4em + 1em);
+  padding: 0;
+  padding-block: var(--wa-space-m);
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &::before {
+    content: '';
+    border-width: 0.4em;
+    border-style: solid;
+    border-color: transparent transparent transparent currentColor;
+    position: absolute;
+    top: calc(50% - 0.4em);
+    left: calc(0.4em / 2);
+    rotate: 0;
+    transform-origin: calc(0.4em / 2) 50%;
+  }
+}
+
+details[open] {
+  padding-block-end: var(--wa-space-m);
+
+  > summary::before {
+    rotate: 90deg;
+  }
+}
+
+details + details {
+  margin-top: calc(-1 * var(--wa-space-xl) + var(--wa-border-width-s));
+}
+
+/* Print styles */
+@media print {
+  details {
+    background: none;
+    border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
+  }
+
+  summary {
+    list-style: none;
+  }
+
+  summary::marker,
+  summary::-webkit-details-marker {
+    display: none;
+  }
+}
diff --git a/src/styles/native/forms.css b/src/styles/native/forms.css
new file mode 100644
index 000000000..984ff2963
--- /dev/null
+++ b/src/styles/native/forms.css
@@ -0,0 +1,20 @@
+/* Fieldsets */
+fieldset {
+  border: solid 1px var(--wa-color-surface-border);
+  border-radius: var(--wa-border-radius-s);
+  padding: var(--wa-space-m);
+  padding-block-end: var(--wa-space-xl);
+}
+
+legend {
+  padding: 0;
+  padding-inline: var(--wa-space-2xs);
+}
+
+/* Native form controls */
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
diff --git a/src/styles/native/tables.css b/src/styles/native/tables.css
new file mode 100644
index 000000000..63736fd58
--- /dev/null
+++ b/src/styles/native/tables.css
@@ -0,0 +1,40 @@
+/* Tables */
+table {
+  width: 100%;
+  border: none;
+  border-collapse: collapse;
+}
+
+caption {
+  color: var(--wa-color-text-quiet);
+}
+
+tbody tr {
+  border-top: solid var(--wa-border-width-s) var(--wa-color-surface-border);
+}
+
+tbody tr:hover {
+  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-quiet), transparent 50%);
+  border-top-color: var(--wa-color-neutral-border-quiet);
+}
+
+tbody tr:hover + tr {
+  border-top-color: var(--wa-color-neutral-border-quiet);
+}
+
+th {
+  font-size: var(--wa-font-size-s);
+  font-weight: var(--wa-font-weight-bold);
+}
+
+td,
+th {
+  text-align: start;
+  padding: var(--wa-space-l) var(--wa-space-s);
+  vertical-align: top;
+}
+
+/* Utilities */
+table.wa-alternating-row-colors tbody tr:nth-child(2n + 1) {
+  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 80%);
+}