Split typography out, rename groups to overrides

LeaVerou · LeaVerou · commit c5e31f539499 · 2025-01-15T11:35:12.000-05:00
diff --git a/src/styles/themes/active.css b/src/styles/themes/active.css
@@ -1,24 +1,16 @@
 @import url('active/color.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
-@import url('default/typography.css');
+@import url('active/typography.css');
 @import url('default/rounding.css');
 @import url('default/shadows.css');
 @import url('default/transitions.css');
-@import url('active/groups.css');
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+@import url('default/groups.css');
+@import url('active/overrides.css');
 
 :where(:root),
 :host,
 .wa-theme-active {
-  /**
-   * Typography
-   */
-  --wa-font-family-body: 'Inter', sans-serif;
-
-  --wa-font-weight-semibold: 550;
-  --wa-font-weight-bold: 650;
-
   /**
    * Rounding
    */
diff --git a/src/styles/themes/active/overrides.css b/src/styles/themes/active/overrides.css
@@ -1,8 +1,3 @@
-@import url('../default/groups.css');
-
-/**
- * Component Styles
- */
 :where(:root),
 :host,
 .wa-theme-active {
diff --git a/src/styles/themes/active/typography.css b/src/styles/themes/active/typography.css
@@ -0,0 +1,11 @@
+@import url('../default/typography.css');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+:where(:root),
+:host,
+.wa-theme-active {
+  --wa-font-family-body: 'Inter', sans-serif;
+
+  --wa-font-weight-semibold: 550;
+  --wa-font-weight-bold: 650;
+}
diff --git a/src/styles/themes/awesome.css b/src/styles/themes/awesome.css
@@ -1,33 +1,16 @@
 @import url('awesome/color.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
-@import url('default/typography.css');
+@import url('awesome/typography.css');
 @import url('default/rounding.css');
 @import url('default/shadows.css');
 @import url('default/transitions.css');
-@import url('awesome/groups.css');
-@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
+@import url('default/groups.css');
+@import url('awesome/overrides.css');
 
 :where(:root),
 :host,
 .wa-theme-awesome {
-  /**
-   * 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);
-
   /**
    * Spacing
    */
@@ -58,7 +41,6 @@
   /**
    * Component Groups
    */
-
   /* Form controls */
   --wa-form-control-activated-color: var(--wa-color-neutral-border-loud);
   --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
@@ -69,11 +51,8 @@
 
   /* Tooltips */
   --wa-tooltip-arrow-size: 0.375rem;
-
   --wa-tooltip-background-color: var(--wa-color-text-normal);
-
   --wa-tooltip-border-radius: var(--wa-border-radius-s);
-
   --wa-tooltip-content-color: var(--wa-color-surface-default);
   --wa-tooltip-font-size: var(--wa-font-size-s);
   --wa-tooltip-line-height: var(--wa-line-height-normal);
diff --git a/src/styles/themes/awesome/overrides.css b/src/styles/themes/awesome/overrides.css
@@ -1,5 +1,3 @@
-@import url('../default/groups.css');
-
 :where(:root),
 :host,
 .wa-theme-awesome {
diff --git a/src/styles/themes/awesome/typography.css b/src/styles/themes/awesome/typography.css
@@ -0,0 +1,23 @@
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
+@import url('../default/typography.css');
+
+:where(:root),
+:host,
+.wa-theme-awesome {
+  /**
+   * 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.css b/src/styles/themes/brutalist.css
@@ -1,12 +1,12 @@
 @import url('brutalist/color.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
-@import url('default/typography.css');
+@import url('brutalist/typography.css');
 @import url('default/rounding.css');
 @import url('default/shadows.css');
 @import url('default/transitions.css');
-@import url('brutalist/groups.css');
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap');
+@import url('default/groups.css');
+@import url('brutalist/overrides.css');
 
 :where(:root),
 :host,
diff --git a/src/styles/themes/brutalist/overrides.css b/src/styles/themes/brutalist/overrides.css
@@ -1,8 +1,3 @@
-@import url('../default/groups.css');
-
-/**
- * Component Styles
- */
 :where(:root),
 :host,
 .wa-theme-brutalist {
diff --git a/src/styles/themes/brutalist/typography.css b/src/styles/themes/brutalist/typography.css
@@ -0,0 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap');
+@import url('../default/typography.css');
+
+:where(:root),
+:host,
+.wa-theme-brutalist {
+  --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;
+
+  --wa-font-weight-heading: var(--wa-font-weight-semibold);
+}
diff --git a/src/styles/themes/classic.css b/src/styles/themes/classic.css
@@ -1,26 +1,16 @@
 @import url('classic/color.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
-@import url('default/typography.css');
+@import url('classic/typography.css');
 @import url('default/rounding.css');
 @import url('default/shadows.css');
 @import url('default/transitions.css');
-@import url('classic/groups.css');
+@import url('default/groups.css');
+@import url('classic/overrides.css');
 
 :where(:root),
 :host,
 .wa-theme-classic {
-  /**
-   * Typography
-   */
-  --wa-font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --wa-font-family-heading: var(--wa-font-family-body);
-  --wa-font-family-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-  --wa-font-family-longform: Georgia, 'Times New Roman', serif;
-
-  --wa-link-decoration-default: underline;
-
   /**
    * Focus
    */
@@ -48,7 +38,6 @@
   /**
    * Component Groups
    */
-
   /* Form controls */
   --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
 
diff --git a/src/styles/themes/classic/overrides.css b/src/styles/themes/classic/overrides.css
@@ -1,8 +1,3 @@
-@import url('../default/groups.css');
-
-/**
- * Component Styles
- */
 :where(:root),
 :host,
 .wa-theme-classic {
diff --git a/src/styles/themes/classic/typography.css b/src/styles/themes/classic/typography.css
@@ -0,0 +1,13 @@
+@import url('../default/typography.css');
+
+:where(:root),
+:host,
+.wa-theme-classic {
+  --wa-font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --wa-font-family-heading: var(--wa-font-family-body);
+  --wa-font-family-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  --wa-font-family-longform: Georgia, 'Times New Roman', serif;
+
+  --wa-link-decoration-default: underline;
+}
diff --git a/src/styles/themes/mellow.css b/src/styles/themes/mellow.css
@@ -1,27 +1,16 @@
 @import url('mellow/color.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
-@import url('default/typography.css');
+@import url('mellow/typography.css');
 @import url('default/rounding.css');
 @import url('default/shadows.css');
 @import url('default/transitions.css');
-@import url('mellow/groups.css');
-@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
+@import url('default/groups.css');
+@import url('mellow/overrides.css');
 
 :where(:root),
 :host,
 .wa-theme-mellow {
-  /**
-   * Typography
-   */
-  --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;
-  --wa-font-weight-bold: 700;
-
   /**
    * Spacing
    */
diff --git a/src/styles/themes/mellow/overrides.css b/src/styles/themes/mellow/overrides.css
@@ -1,5 +1,3 @@
-@import url('../default/groups.css');
-
 /**
  * Component Styles
  */
diff --git a/src/styles/themes/mellow/typography.css b/src/styles/themes/mellow/typography.css
@@ -0,0 +1,14 @@
+@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
+@import url('../default/typography.css');
+
+:where(:root),
+:host,
+.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;
+  --wa-font-weight-bold: 700;
+}
diff --git a/src/styles/themes/premium.css b/src/styles/themes/premium.css
@@ -1,35 +1,18 @@
 @import url('premium/color.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
-@import url('default/typography.css');
+@import url('premium/typography.css');
 @import url('default/rounding.css');
 @import url('default/shadows.css');
 @import url('default/transitions.css');
-@import url('premium/groups.css');
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');
+@import url('default/groups.css');
+@import url('premium/overrides.css');
 
 :where(:root),
 :host,
 .wa-theme-premium,
 .wa-light,
 .wa-dark .wa-invert {
-  /**
-   * Typography
-   */
-  --wa-font-family-heading: 'Playfair Display', serif;
-  --wa-font-family-body: 'DM Sans', sans-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;
-  --wa-line-height-expanded: 2;
-
-  --wa-link-decoration-default: underline color-mix(in oklab, currentColor 40%, transparent);
-
   /**
    * Borders
    */
@@ -44,8 +27,6 @@
    * Component Groups
    */
   --wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
-
   --wa-form-control-background-color: transparent;
-
   --wa-form-control-value-line-height: var(--wa-line-height-normal);
 }
diff --git a/src/styles/themes/premium/overrides.css b/src/styles/themes/premium/overrides.css
@@ -1,8 +1,3 @@
-@import url('../default/groups.css');
-
-/**
- * Component Styles
- */
 :where(:root),
 :host,
 .wa-theme-premium {
@@ -18,7 +13,8 @@
     text-transform: uppercase;
   }
 
-  wa-callout {
+  wa-callout,
+  .wa-callout {
     font-size: var(--wa-size-smaller);
   }
 
@@ -28,7 +24,9 @@
   }
 
   wa-badge,
-  wa-tag {
+  .wa-badge,
+  wa-tag,
+  .wa-tag {
     text-transform: uppercase;
   }
 
diff --git a/src/styles/themes/premium/typography.css b/src/styles/themes/premium/typography.css
@@ -0,0 +1,22 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');
+@import url('../default/typography.css');
+
+:where(:root),
+:host,
+.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-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;
+  --wa-line-height-expanded: 2;
+
+  --wa-link-decoration-default: underline color-mix(in oklab, currentColor 40%, transparent);
+}
diff --git a/src/styles/themes/tailspin.css b/src/styles/themes/tailspin.css
diff --git a/src/styles/themes/tailspin/color.css b/src/styles/themes/tailspin/color.css
diff --git a/src/styles/themes/tailspin/overrides.css b/src/styles/themes/tailspin/overrides.css
diff --git a/src/styles/themes/tailspin/typography.css b/src/styles/themes/tailspin/typography.css

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-@import url('../default/groups.css');`
`2`		`-`
`3`	`1`	`:where(:root),`
`4`	`2`	`:host,`
`5`	`3`	`.wa-theme-awesome {`