feat(core)!: 💥 ✨ rework font-size CSS variables

To align with Codex tokens, the old --font-size-hN CSS variables are renamed. Introduced new font size variables (x-small, small)
StarCitizenTools · Feb 26, 2024 · a9acc08 · a9acc08
1 parent 23ec5e6
commit a9acc08
Show file tree

Hide file tree

Showing 13 changed files with 41 additions and 40 deletions.
diff --git a/resources/skins.citizen.styles/common/cssvariables.less b/resources/skins.citizen.styles/common/cssvariables.less
@@ -80,12 +80,13 @@
 	--font-family-language-serif: '';
 	--font-family-language-monospace: '';
 
-	--font-size-h1: 1.75rem;
-	--font-size-h2: 1.375rem;
-	--font-size-h3: 1.125rem;
-	--font-size-h4: 1rem;
-	--font-size-h5: 1rem;
-	--font-size-h6: 1rem;
+	--font-size-x-small: 0.75rem;
+	--font-size-small: 0.875rem;
+	--font-size-medium: 1rem;
+	--font-size-large: 1rem;
+	--font-size-x-large: 1.125rem;
+	--font-size-xx-large: 1.375rem;
+	--font-size-xxx-large: 1.75rem;
 
 	--font-weight-normal: 400;
 	--font-weight-medium: ~'calc( var( --font-weight-normal ) + 100)';
@@ -167,10 +168,10 @@ html {
 
 @media ( min-width: @min-width-breakpoint-tablet ) {
 	:root {
-		--font-size-h1: 2rem;
-		--font-size-h2: 1.5rem;
-		--font-size-h3: 1.25rem;
-		--font-size-h4: 1.125rem;
+		--font-size-large: 1.125rem;
+		--font-size-x-large: 1.25rem;
+		--font-size-xx-large: 1.5rem;
+		--font-size-xxx-large: 2rem;
 	}
 
 	html {

diff --git a/resources/skins.citizen.styles/components/ContentHeader.less b/resources/skins.citizen.styles/components/ContentHeader.less
@@ -15,7 +15,7 @@
 	}
 
 	&-parenthesis {
-		font-size: var( --font-size-h3 );
+		font-size: var( --font-size-x-large );
 		color: var( --color-base--subtle );
 	}
 }
diff --git a/resources/skins.citizen.styles/components/StickyHeader.less b/resources/skins.citizen.styles/components/StickyHeader.less
@@ -34,7 +34,7 @@
 
 	.firstHeading {
 		overflow: hidden;
-		font-size: var( --font-size-h3 );
+		font-size: var( --font-size-x-large );
 		text-overflow: ellipsis;
 	}
 

diff --git a/resources/skins.citizen.styles/skinning/elements.less b/resources/skins.citizen.styles/skinning/elements.less
@@ -81,27 +81,27 @@ h6 {
 }
 
 h1 {
-	font-size: var( --font-size-h1 );
+	font-size: var( --font-size-xxx-large );
 }
 
 h2 {
-	font-size: var( --font-size-h2 );
+	font-size: var( --font-size-xx-large );
 }
 
 h3 {
-	font-size: var( --font-size-h3 );
+	font-size: var( --font-size-x-large );
 }
 
 h4 {
-	font-size: var( --font-size-h4 );
+	font-size: var( --font-size-large );
 }
 
 h5 {
-	font-size: var( --font-size-h5 );
+	font-size: var( --font-size-medium );
 }
 
 h6 {
-	font-size: var( --font-size-h6 );
+	font-size: var( --font-size-medium );
 }
 
 p {

diff --git a/skinStyles/extensions/Cargo/ext.cargo.pagevalues.less b/skinStyles/extensions/Cargo/ext.cargo.pagevalues.less
@@ -26,6 +26,6 @@
 	// Tweak size to look more like other sticky header
 	h2 {
 		margin: 0;
-		font-size: var( --font-size-h3 );
+		font-size: var( --font-size-x-large );
 	}
 }
diff --git a/skinStyles/extensions/Echo/ext.echo.special.less b/skinStyles/extensions/Echo/ext.echo.special.less
@@ -135,7 +135,7 @@
 	border-radius: var( --border-radius--medium );
 
 	&-title {
-		font-size: var( --font-size-h3 );
+		font-size: var( --font-size-x-large );
 		font-weight: var( --font-weight-semibold );
 		color: var( --color-base--emphasized );
 	}

diff --git a/skinStyles/extensions/MediaSearch/mediasearch.styles.less b/skinStyles/extensions/MediaSearch/mediasearch.styles.less
@@ -869,18 +869,18 @@
 
 /* EmptyState.less */
 .sdms-empty-state {
-	font-size: var( --font-size-h3 );
+	font-size: var( --font-size-x-large );
 }
 
 /* NoResults.less */
 .sdms-no-results {
-	font-size: var( --font-size-h3 );
+	font-size: var( --font-size-x-large );
 	font-weight: var( --font-weight-semibold );
 }
 
 /* EndOfResults.less */
 .sdms-end-of-results {
-	font-size: var( --font-size-h6 );
+	font-size: var( --font-size-medium );
 	font-weight: var( --font-weight-semibold );
 	color: var( --color-base--emphasized );
 }
@@ -999,6 +999,6 @@
 
 /* SearchError.less */
 .sdms-error {
-	font-size: var( --font-size-h3 );
+	font-size: var( --font-size-x-large );
 	font-weight: var( --font-weight-semibold );
 }
diff --git a/skinStyles/extensions/UploadWizard/ext.uploadWizard.less b/skinStyles/extensions/UploadWizard/ext.uploadWizard.less
@@ -39,7 +39,7 @@
 
 /* uw.ui.Metadata.less */
 h3.mwe-upwiz-metadata-title {
-	font-size: var( --font-size-h3 );
+	font-size: var( --font-size-x-large );
 }
 
 .mwe-upwiz-metadata-booklet.oo-ui-bookletLayout {

diff --git a/skinStyles/extensions/VisualEditor/ext.visualEditor.mwformatting.less b/skinStyles/extensions/VisualEditor/ext.visualEditor.mwformatting.less
@@ -27,27 +27,27 @@
 	}
 
 	&-heading1 .oo-ui-tool-title {
-		font-size: var( --font-size-h1 );
+		font-size: var( --font-size-xxx-large );
 	}
 
 	&-heading2 .oo-ui-tool-title {
-		font-size: var( --font-size-h2 );
+		font-size: var( --font-size-xx-large );
 	}
 
 	&-heading3 .oo-ui-tool-title {
-		font-size: var( --font-size-h3 );
+		font-size: var( --font-size-x-large );
 	}
 
 	&-heading4 .oo-ui-tool-title {
-		font-size: var( --font-size-h4 );
+		font-size: var( --font-size-large );
 	}
 
 	&-heading5 .oo-ui-tool-title {
-		font-size: var( --font-size-h5 );
+		font-size: var( --font-size-medium );
 	}
 
 	&-heading6 .oo-ui-tool-title {
-		font-size: var( --font-size-h6 );
+		font-size: var( --font-size-medium );
 	}
 
 	&-preformatted .oo-ui-tool-title {

diff --git a/skinStyles/extensions/WikiEditor/ext.wikiEditor.less b/skinStyles/extensions/WikiEditor/ext.wikiEditor.less
@@ -169,22 +169,22 @@
 					}
 
 					&[ rel='heading-2' ] {
-						font-size: var( --font-size-h2 );
+						font-size: var( --font-size-xx-large );
 						font-weight: var( --font-weight-semibold );
 					}
 
 					&[ rel='heading-3' ] {
-						font-size: var( --font-size-h3 );
+						font-size: var( --font-size-x-large );
 						font-weight: var( --font-weight-semibold );
 					}
 
 					&[ rel='heading-4' ] {
-						font-size: var( --font-size-h4 );
+						font-size: var( --font-size-large );
 						font-weight: var( --font-weight-semibold );
 					}
 
 					&[ rel='heading-5' ] {
-						font-size: var( --font-size-h5 );
+						font-size: var( --font-size-medium );
 						font-weight: var( --font-weight-semibold );
 					}
 				}

diff --git a/skinStyles/extensions/WikiHiero/ext.wikihiero.less b/skinStyles/extensions/WikiHiero/ext.wikihiero.less
@@ -55,7 +55,7 @@
 		background: var( --color-surface-0 );
 
 		@media screen and ( min-width: @min-width-breakpoint-tablet ) {
-			top: ~'calc( var( --line-height-xs ) * var( --font-size-h3 ) + 2 * var( --space-md ) )';
+			top: ~'calc( var( --line-height-xs ) * var( --font-size-x-large ) + 2 * var( --space-md ) )';
 		}
 	}
 

diff --git a/skinStyles/mediawiki/special/mediawiki.special.search.styles.less b/skinStyles/mediawiki/special/mediawiki.special.search.styles.less
@@ -110,7 +110,7 @@
 		padding: var( --space-md ) 0;
 
 		a {
-			font-size: var( --font-size-h3 );
+			font-size: var( --font-size-x-large );
 		}
 	}
 }
@@ -121,7 +121,7 @@
 
 	&-heading {
 		a {
-			// font-size: var( --font-size-h3 );
+			// font-size: var( --font-size-x-large );
 			font-weight: var( --font-weight-semibold );
 		}
 	}

diff --git a/skinStyles/mediawiki/special/mediawiki.special.userlogin.signup.styles.less b/skinStyles/mediawiki/special/mediawiki.special.userlogin.signup.styles.less
@@ -97,7 +97,7 @@
 
 			h2 {
 				max-width: 20rem;
-				font-size: var( --font-size-h1 );
+				font-size: var( --font-size-xxx-large );
 			}
 		}
 
@@ -110,7 +110,7 @@
 				background-size: 4rem;
 
 				h3 {
-					font-size: var( --font-size-h1 );
+					font-size: var( --font-size-xxx-large );
 				}
 			}
 		}