Theme typography.css fixes

- Add `:where([class^='wa-theme-'], [class*=' wa-theme-'])` to default `typography.css` since we declare mappings that need to be inherited by other themes.
- Remove declarations that redeclare defaults
- Ensure consistent order
- [Awesome] Switch code font to ui-monospace

src/styles/themes/awesome/typography.css

@@ -8,16 +8,11 @@
    * Typography
    */
   --wa-font-family-body: Quicksand, sans-serif;
-  --wa-font-family-heading: var(--wa-font-family-body);
-  --wa-font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  --wa-font-family-longform: ui-serif, serif;
 
   --wa-font-weight-light: 400;
   --wa-font-weight-normal: 500;
   --wa-font-weight-semibold: 600;
   --wa-font-weight-bold: 700;
 
-  --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-heading: var(--wa-font-weight-bold);
   --wa-font-weight-action: var(--wa-font-weight-bold);
 }

src/styles/themes/brutalist/typography.css

@@ -7,7 +7,6 @@
   --wa-font-family-body: 'Space Grotesk', sans-serif;
   --wa-font-family-heading: 'IBM Plex Sans Condensed', sans-serif;
   --wa-font-family-code: 'Space Mono', monospace;
-  --wa-font-family-longform: ui-serif, serif;
 
   --wa-font-weight-bold: 700;
 

src/styles/themes/default/typography.css

@@ -2,6 +2,7 @@
  * Typography
  */
 :where(:root),
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
 :host {
   --wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
   --wa-font-family-heading: var(--wa-font-family-body);

src/styles/themes/glossy/typography.css

@@ -5,12 +5,7 @@
 :host,
 .wa-theme-glossy {
   --wa-font-family-body: 'Figtree', sans-serif;
-  --wa-font-family-heading: var(--wa-font-family-body);
-  --wa-font-family-code: ui-monospace, monospace;
-  --wa-font-family-longform: ui-serif, serif;
 
-  --wa-font-weight-light: 300;
-  --wa-font-weight-normal: 400;
   --wa-font-weight-semibold: 600;
   --wa-font-weight-bold: 800;
 

src/styles/themes/matter/typography.css

@@ -8,11 +8,7 @@
   --wa-font-family-code: 'Roboto Mono', monospace;
   --wa-font-family-longform: 'Roboto Serif', serif;
 
-  --wa-font-weight-light: 300;
-  --wa-font-weight-normal: 400;
-  --wa-font-weight-semibold: 500;
   --wa-font-weight-bold: 700;
-
   --wa-font-weight-heading: var(--wa-font-weight-semibold);
 
   --wa-link-decoration-default: underline;

src/styles/themes/mellow/typography.css

@@ -6,7 +6,6 @@
 .wa-theme-mellow {
   --wa-font-family-body: 'Mulish', sans-serif;
   --wa-font-family-heading: 'Lora', serif;
-  --wa-font-family-code: ui-monospace, monospace;
   --wa-font-family-longform: 'Lora', serif;
 
   --wa-font-weight-semibold: 600;

src/styles/themes/playful/typography.css

@@ -6,8 +6,7 @@
 .wa-theme-playful {
   --wa-font-family-body: 'Nunito', sans-serif;
   --wa-font-family-heading: 'Fredoka', sans-serif;
-  --wa-font-family-code: 'Azeret Mono', monospace;
-  --wa-font-family-longform: ui-serif, serif;
+  --wa-font-family-code: 'Azeret Mono', ui-monospace, monospace;
 
   --wa-font-size-scale: 1.125;
 

src/styles/themes/premium/typography.css

@@ -6,13 +6,11 @@
 .wa-theme-premium,
 .wa-light,
 .wa-dark .wa-invert {
-  --wa-font-family-heading: 'Playfair Display', serif;
   --wa-font-family-body: 'DM Sans', sans-serif;
+  --wa-font-family-heading: 'Playfair Display', serif;
   --wa-font-family-longform: 'Playfair', serif;
 
   --wa-font-weight-heading: var(--wa-font-weight-semibold);
-  --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-action: var(--wa-font-weight-semibold);
 
   --wa-line-height-condensed: 1.1;
   --wa-line-height-normal: 1.5;

src/styles/themes/tailspin/typography.css

@@ -5,11 +5,7 @@
 :host,
 .wa-theme-tailspin {
   --wa-font-family-body: 'Inter', sans-serif;
-  --wa-font-family-heading: var(--wa-font-family-body);
 
-  --wa-font-weight-light: 300;
-  --wa-font-weight-normal: 400;
-  --wa-font-weight-semibold: 500;
   --wa-font-weight-bold: 700;
 
   --wa-font-size-scale: 0.875;