apac, seekBusiness: Use strong weight instead of medium for Thai …

…characters (#1331)

.changeset/afraid-birds-move.md

@@ -0,0 +1,12 @@
+---
+'braid-design-system': patch
+---
+**apac, seekBusiness:** Use `strong` weight instead of `medium` for Thai characters
+
+The unicode range of Thai characters is not satisfied by the preferred fonts specified for the `apac` theme, resulting in these characters falling through and being rendered by `sans-serif` — which applies a platform-specific font.
+On Mac this is `Thonburi`, on Windows it is `Tahoma`, neither of which have support for the semi-bold weight chosen for `medium`.
+The result is the visual weight of `medium` text being rounded down to `regular`, and hence having no differentiation against standard text in the UI.
+
+To work around this, we are creating a font alias that coerces the semi-bold weight to the bold weight of the previously mentioned platform-specific Thai fonts.
+
+This is only applied for themes that inherit the `apac` typography definition (currently `apac` and `seekBusiness`), and will only affect characters that fall through, i.e., characters that are unsatisfied by the preferred fonts in the specified `font-family`.

fixtures/consumer/__snapshots__/build.test.ts.snap

@@ -36,6 +36,8 @@ exports[`build side-effects from dist 1`] = `
   "dist/styles/lib/css/atoms/atoms.mjs",
   "dist/styles/lib/themes/apac/tokens.cjs",
   "dist/styles/lib/themes/apac/tokens.mjs",
+  "dist/styles/lib/themes/baseTokens/mediumWeightPatch.cjs",
+  "dist/styles/lib/themes/baseTokens/mediumWeightPatch.mjs",
   "dist/styles/lib/themes/docs/tokens.cjs",
   "dist/styles/lib/themes/docs/tokens.mjs",
   "dist/styles/lib/themes/makeBraidTheme.cjs",
@@ -78,6 +80,7 @@ exports[`build side-effects from src 1`] = `
   "src/lib/themes/apac/index.ts",
   "src/lib/themes/apac/tokens.ts",
   "src/lib/themes/baseTokens/apac.ts",
+  "src/lib/themes/baseTokens/mediumWeightPatch.ts",
   "src/lib/themes/docs/index.ts",
   "src/lib/themes/docs/tokens.ts",
   "src/lib/themes/index.ts",

package.json

@@ -70,6 +70,7 @@
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.0.0",
     "jest-watch-typeahead": "^2.1.0",
+    "js-yaml": "^4.1.0",
     "nx": "^15.6.3",
     "prettier": "^2.8.2",
     "renovate-config-seek": "0.4.0",

packages/braid-design-system/src/lib/themes/baseTokens/apac.ts

@@ -4,6 +4,9 @@ import { darken, lighten, rgba, saturate } from 'polished';
 import merge from 'lodash/merge';
 import { palette } from '../../color/palette';
 import { type BraidTokens, extractFontMetricsForTheme } from '../tokenType';
+import { semiBoldWeight, thaiPatchFamilyName } from './mediumWeightPatch';
+
+import './mediumWeightPatch.css';
 
 interface MakeTokensOptions {
   name: string;
@@ -55,13 +58,12 @@ export const makeTokens = ({
     displayName,
     legacy: true,
     typography: {
-      fontFamily:
-        'Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif',
+      fontFamily: `Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, ${thaiPatchFamilyName}, sans-serif`,
       webFont: null,
       fontMetrics: extractFontMetricsForTheme(robotoMetrics),
       fontWeight: {
         regular: 400,
-        medium: 500,
+        medium: semiBoldWeight,
         strong: 700,
       },
       heading: {

packages/braid-design-system/src/lib/themes/baseTokens/mediumWeightPatch.css.ts

@@ -0,0 +1,24 @@
+import { globalFontFace } from '@vanilla-extract/css';
+import { semiBoldWeight, thaiPatchFamilyName } from './mediumWeightPatch';
+
+/*
+  This patch is designed to coerce the semi-bold font weight
+  to bold for fonts that do not handle weights between regular
+  and bold.
+
+  This is relevant for Thai character ranges, which are not
+  available in the `apac` font stack, so we map the semi-bold
+  weight to the bold sans-serif system font — Thonburi on Mac,
+  Tahoma on Windows.
+*/
+
+globalFontFace(thaiPatchFamilyName, {
+  fontWeight: semiBoldWeight,
+  src: "local('Thonburi Bold'), local('Tahoma Bold')",
+  unicodeRange: 'U+0E01-0E5B, U+200C-200D, U+25CC',
+});
+
+globalFontFace(thaiPatchFamilyName, {
+  src: "local('Thonburi'), local('Tahoma')",
+  unicodeRange: 'U+0E01-0E5B, U+200C-200D, U+25CC',
+});

packages/braid-design-system/src/lib/themes/baseTokens/mediumWeightPatch.ts

@@ -0,0 +1,2 @@
+export const thaiPatchFamilyName = 'ThaiSemiBoldPatch';
+export const semiBoldWeight = 500;