feat(core): ✨ use CSS variable for language-specific fonts

StarCitizenTools · Dec 13, 2023 · eee044d · eee044d
1 parent a9d2bd9
commit eee044d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/resources/skins.citizen.scripts/inline.js b/resources/skins.citizen.scripts/inline.js
@@ -91,7 +91,7 @@ window.applyPref = () => {
 		apply();
 
 		// Attach listener for future changes
-		prefersDark.addListener( () => {
+		prefersDark.addEventListener( 'change', () => {
 			apply();
 		} );
 

diff --git a/resources/skins.citizen.styles.fonts.cjk/index.less b/resources/skins.citizen.styles.fonts.cjk/index.less
@@ -1,9 +1,9 @@
-/*
+/*
  * Name: Noto Sans CJK VF
  * Version: a99a435
  * Link: https://github.com/googlefonts/noto-cjk/tree/main/Sans
  * Subset: Google Fonts Slicing Patterns: https://github.com/black7375/font-range
- * Axis: wght
+ * Axis: wght
 */
 
 /* Japanese */
@@ -20,3 +20,7 @@
 
 /* Traditional Chinese - Hong Kong */
 @import 'cjk-hk.less';
+
+:root {
+	--font-family-language-base: 'Noto Sans CJK';
+}
diff --git a/resources/skins.citizen.styles/common/cssvariables.less b/resources/skins.citizen.styles/common/cssvariables.less
@@ -73,6 +73,9 @@
 	--font-family-base: @font-family-base;
 	--font-family-serif: @font-family-serif;
 	--font-family-monospace: @font-family-monospace;
+	--font-family-language-base: '';
+	--font-family-language-serif: '';
+	--font-family-language-monospace: '';
 
 	--font-size-h1: 1.75rem;
 	--font-size-h2: 1.375rem;

diff --git a/resources/variables.less b/resources/variables.less
@@ -31,18 +31,16 @@
 @line-height-md: 1.6;
 
 /* == Fonts == */
-/**
- * Citizen sans-serif fonts
- */
-@font-family-base: 'Roboto', 'Noto Sans CJK', system-ui, -apple-system, sans-serif;
-/**
- * Citizen serif fonts
+/*
+ * --font-family-language-xx are language-specific fonts from language RL module.
+ * It is empty by default but populated by Citizen language modules such as the CJK one.
  */
-@font-family-serif: 'Roboto Serif', 'Noto Serif CJK', 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
-/**
-  * Citizen monospace fonts
-  */
-@font-family-monospace: 'Roboto Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace;
+// Citizen sans-serif fonts
+@font-family-base: var( --font-family-language-base ), 'Roboto', system-ui, -apple-system, sans-serif;
+// Citizen serif fonts
+@font-family-serif: var( --font-family-language-serif ), 'Roboto Serif', 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
+// Citizen monospace fonts
+@font-family-monospace: var( --font-family-language-monospace ), 'Roboto Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace;
 
 /* == Colors == */
 /* Base theme */