From a35a8fd2adf5037694aab092903826f193663597 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Tue, 29 Apr 2025 11:50:47 -0400 Subject: [PATCH] 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 | 5 ----- src/styles/themes/brutalist/typography.css | 1 - src/styles/themes/default/typography.css | 1 + src/styles/themes/glossy/typography.css | 5 ----- src/styles/themes/matter/typography.css | 4 ---- src/styles/themes/mellow/typography.css | 1 - src/styles/themes/playful/typography.css | 3 +-- src/styles/themes/premium/typography.css | 4 +--- src/styles/themes/tailspin/typography.css | 4 ---- 9 files changed, 3 insertions(+), 25 deletions(-) diff --git a/src/styles/themes/awesome/typography.css b/src/styles/themes/awesome/typography.css index fb665061c..d4dcf13c4 100644 --- a/src/styles/themes/awesome/typography.css +++ b/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); } diff --git a/src/styles/themes/brutalist/typography.css b/src/styles/themes/brutalist/typography.css index 8def28669..b1ec4fc26 100644 --- a/src/styles/themes/brutalist/typography.css +++ b/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; diff --git a/src/styles/themes/default/typography.css b/src/styles/themes/default/typography.css index 3edbccd7b..8c9777f22 100644 --- a/src/styles/themes/default/typography.css +++ b/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); diff --git a/src/styles/themes/glossy/typography.css b/src/styles/themes/glossy/typography.css index 0ba8cc5d7..dd7c0ce37 100644 --- a/src/styles/themes/glossy/typography.css +++ b/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; diff --git a/src/styles/themes/matter/typography.css b/src/styles/themes/matter/typography.css index 34966299c..2e9d60ed6 100644 --- a/src/styles/themes/matter/typography.css +++ b/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; diff --git a/src/styles/themes/mellow/typography.css b/src/styles/themes/mellow/typography.css index 43454ea7f..a91b3237d 100644 --- a/src/styles/themes/mellow/typography.css +++ b/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; diff --git a/src/styles/themes/playful/typography.css b/src/styles/themes/playful/typography.css index 1586ab6f1..968ea03a4 100644 --- a/src/styles/themes/playful/typography.css +++ b/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; diff --git a/src/styles/themes/premium/typography.css b/src/styles/themes/premium/typography.css index 2a310dc3b..d88745760 100644 --- a/src/styles/themes/premium/typography.css +++ b/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; diff --git a/src/styles/themes/tailspin/typography.css b/src/styles/themes/tailspin/typography.css index 53aa39658..9aa11725f 100644 --- a/src/styles/themes/tailspin/typography.css +++ b/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;