@elasticias/ui 1.0.24 → 1.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/styles/_comptoir.scss +22 -4
package/package.json
CHANGED
package/styles/_comptoir.scss
CHANGED
|
@@ -60,10 +60,28 @@
|
|
|
60
60
|
different components — so a render without the webfont looked
|
|
61
61
|
different depending on which component drew it. Stacks match
|
|
62
62
|
libs/tokens/typography.json, which is the contract that ships to
|
|
63
|
-
web, iOS and Android.
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
63
|
+
web, iOS and Android.
|
|
64
|
+
|
|
65
|
+
Arabic sits inside each stack rather than in a `[dir='rtl']` override,
|
|
66
|
+
because a browser picks a face per glyph, not per element: Bricolage and
|
|
67
|
+
Manrope carry no Arabic, so Arabic characters fall through to Noto Sans
|
|
68
|
+
Arabic wherever they appear, and Latin characters keep their Latin face
|
|
69
|
+
wherever *they* appear. Overriding the stack under RTL would get the
|
|
70
|
+
common case wrong in both directions — a product code inside an Arabic
|
|
71
|
+
screen, an Arabic customer name inside a French one.
|
|
72
|
+
|
|
73
|
+
Noto Sans Arabic leads: it is the widest-covering of the two and is a
|
|
74
|
+
variable face, so it matches the weight range the Latin stacks already
|
|
75
|
+
use. Tajawal backs it up. Neither is downloaded by a session that renders
|
|
76
|
+
no Arabic — Google serves both with `unicode-range`, so the subset is
|
|
77
|
+
fetched only once a matching glyph is on the page. */
|
|
78
|
+
--font-display: 'Bricolage Grotesque', 'Noto Sans Arabic', 'Tajawal', system-ui, sans-serif;
|
|
79
|
+
--font-ui: 'Manrope', 'Noto Sans Arabic', 'Tajawal', system-ui, sans-serif;
|
|
80
|
+
/* Arabic is listed last here too. It cannot disturb figure alignment —
|
|
81
|
+
JetBrains Mono answers every digit — but it keeps Arabic text that lands
|
|
82
|
+
in a mono cell looking like the rest of the product rather than like
|
|
83
|
+
whatever the OS happened to pick. */
|
|
84
|
+
--font-mono: 'JetBrains Mono', ui-monospace, 'Noto Sans Arabic', monospace;
|
|
67
85
|
|
|
68
86
|
/* ── Radii ───────────────────────────────────────────────────── */
|
|
69
87
|
--r-sm: 8px;
|