[BpkStylesheets] Add locale-specific font-family overrides for non-Latin languages

package.json

@@ -123,7 +123,7 @@
     "@figma/code-connect": "^1.4.3",
     "@percy/cli": "^1.31.0",
     "@percy/storybook": "^9.1.0",
-    "@skyscanner/bpk-foundations-web": "^24.4.0",
+    "@skyscanner/bpk-foundations-web": "^24.4.1",
     "@skyscanner/bpk-svgs": "^20.11.0",
     "@skyscanner/eslint-config-skyscanner": "^22.6.0",
     "@skyscanner/stylelint-config-skyscanner": "^14.2.0",

packages/bpk-stylesheets/font.scss

@@ -426,6 +426,10 @@ $bpk-fonts: (
   }
 }
 
+// Language-specific font stacks applied to any element whose `lang` matches
+// the given locale. Each stack prefers the locale's primary Noto Sans face,
+// then related CJK and other non-Latin Noto families as fallbacks, then system fonts.
+
 [lang='ja-JP'],
 :lang(ja-JP) {
   --bpk-base-font-stack:
@@ -437,7 +441,9 @@ $bpk-fonts: (
 }
 
 [lang='zh-TW'],
-:lang(zh-TW) {
+:lang(zh-TW),
+[lang='zh-HK'],
+:lang(zh-HK) {
   --bpk-base-font-stack:
     'Skyscanner Relative', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans JP',
     'Noto Sans KR', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans',
@@ -446,6 +452,79 @@ $bpk-fonts: (
     'Helvetica Neue', sans-serif;
 }
 
+[lang='zh-CN'],
+:lang(zh-CN) {
+  --bpk-base-font-stack:
+    'Skyscanner Relative', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP',
+    'Noto Sans KR', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans',
+    'Noto Sans Devanagari', 'Noto Sans Thai', -apple-system, blinkmacsystemfont,
+    roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
+}
+
+[lang='ko-KR'],
+:lang(ko-KR) {
+  --bpk-base-font-stack:
+    'Skyscanner Relative', 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC',
+    'Noto Sans TC', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans',
+    'Noto Sans Devanagari', 'Noto Sans Thai', -apple-system, blinkmacsystemfont,
+    roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
+}
+
+[lang='th-TH'],
+:lang(th-TH) {
+  --bpk-base-font-stack:
+    'Skyscanner Relative', 'Noto Sans Thai', 'Noto Sans Arabic',
+    'Noto Sans Hebrew', 'Noto Sans', 'Noto Sans Devanagari', -apple-system,
+    blinkmacsystemfont, roboto, oxygen, ubuntu, cantarell, 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+}
+
+[lang='hi-IN'],
+:lang(hi-IN) {
+  --bpk-base-font-stack:
+    'Skyscanner Relative', 'Noto Sans Devanagari', 'Noto Sans Arabic',
+    'Noto Sans Hebrew', 'Noto Sans', 'Noto Sans Thai', -apple-system,
+    blinkmacsystemfont, roboto, oxygen, ubuntu, cantarell, 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+}
+
+[lang='ar'],
+:lang(ar) {
+  --bpk-base-font-stack:
+    'Skyscanner Relative', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans',
+    'Noto Sans Devanagari', 'Noto Sans Thai', -apple-system, blinkmacsystemfont,
+    roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
+}
+
+[lang='he'],
+:lang(he) {
+  --bpk-base-font-stack:
+    'Skyscanner Relative', 'Noto Sans Hebrew', 'Noto Sans Arabic', 'Noto Sans',
+    'Noto Sans Devanagari', 'Noto Sans Thai', -apple-system, blinkmacsystemfont,
+    roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
+}
+
+[lang='el-GR'],
+:lang(el-GR),
+[lang='ru-RU'],
+:lang(ru-RU),
+[lang='uk-UA'],
+:lang(uk-UA),
+[lang='bg-BG'],
+:lang(bg-BG),
+[lang='vi-VN'],
+:lang(vi-VN) {
+  --bpk-base-font-stack:
+    'Skyscanner Relative', 'Noto Sans', 'Noto Sans Arabic', 'Noto Sans Hebrew',
+    'Noto Sans Devanagari', 'Noto Sans Thai', -apple-system, blinkmacsystemfont,
+    roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
+}
+
 // Using :where([lang]) ensures that we trigger a re-evaluation of the font-stack
 // variable for any element with a lang attribute, but with ZERO specificity.
 // This means any component with its own class (like BpkBubble or Editorial text)