Skip to content

feat: advanced typography configuration #4450

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
unekinn wants to merge 14 commits into
base: main
Choose a base branch
from
Draft

feat: advanced typography configuration #4450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
54a7f60
feat(tokens): use a modular font size scale which is easier to implem…
unekinn Jan 21, 2026
1e9a161
fix: overriding font-size tokens didn't actually change css values
unekinn Jan 21, 2026
962c19a
fix reference to build config in overrides description
unekinn Jan 21, 2026
105e864
adjust ratios and one step in the scale formula to better match exist…
unekinn Jan 21, 2026
4a3d73b
wip: advanced theme-specific font configuration
unekinn Jan 22, 2026
b74153d
wip: try generating a backward compatibility layer.
unekinn Jan 23, 2026
8ec2445
remove unnecessary reduce / as const
unekinn Jan 23, 2026
970acd9
no need to keep only 10 fontsize steps now that the tokens are restru…
unekinn Jan 23, 2026
2827def
fix so themes can have different font names
unekinn Jan 23, 2026
7282d85
simplify folder structure for new fonts/<theme>/<font> and modes/<siz…
unekinn Jan 23, 2026
68b55bb
remove outdated TODO
unekinn Jan 23, 2026
a8500c2
add font- prefix to font size mode json file
unekinn Jan 23, 2026
f9c4ddd
remove unnecessary tokens layer that also tripped up Figma backward-c…
unekinn Jan 23, 2026
15f4b1d
update config schema to 13 font-size steps
unekinn Jan 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions apps/www/app/_components/tokens/design-tokens/size-mode.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,22 @@
],
"variable": "--ds-size-mode-font-size",
"value": "1.125"
},
{
"path": [
"font-scale",
"_base"
],
"variable": "--ds-font-scale-base",
"value": "1.125"
},
{
"path": [
"font-scale",
"_ratio"
],
"variable": "--ds-font-scale-ratio",
"value": "1.143136"
}
],
"large": [
Expand All @@ -17,6 +33,22 @@
],
"variable": "--ds-size-mode-font-size",
"value": "1.3125"
},
{
"path": [
"font-scale",
"_base"
],
"variable": "--ds-font-scale-base",
"value": "1.3125"
},
{
"path": [
"font-scale",
"_ratio"
],
"variable": "--ds-font-scale-ratio",
"value": "1.143136"
}
],
"small": [
Expand All @@ -27,6 +59,22 @@
],
"variable": "--ds-size-mode-font-size",
"value": "1"
},
{
"path": [
"font-scale",
"_base"
],
"variable": "--ds-font-scale-base",
"value": "1"
},
{
"path": [
"font-scale",
"_ratio"
],
"variable": "--ds-font-scale-ratio",
"value": "1.14234"
}
]
}
44 changes: 34 additions & 10 deletions apps/www/app/_components/tokens/design-tokens/type-scale.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,79 +5,103 @@
"1"
],
"variable": "--ds-font-size-1",
"value": "round(calc(0.75rem * var(--_ds-font-size-factor)), 1px)"
"value": "round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 3)), 1px)"
},
{
"path": [
"font-size",
"2"
],
"variable": "--ds-font-size-2",
"value": "round(calc(0.875rem * var(--_ds-font-size-factor)), 1px)"
"value": "round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 2)), 1px)"
},
{
"path": [
"font-size",
"3"
],
"variable": "--ds-font-size-3",
"value": "round(calc(1rem * var(--_ds-font-size-factor)), 1px)"
"value": "round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 1)), 1px)"
},
{
"path": [
"font-size",
"4"
],
"variable": "--ds-font-size-4",
"value": "round(calc(1.125rem * var(--_ds-font-size-factor)), 1px)"
"value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 0)), 1px)"
},
{
"path": [
"font-size",
"5"
],
"variable": "--ds-font-size-5",
"value": "round(calc(1.3125rem * var(--_ds-font-size-factor)), 1px)"
"value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 1)), 1px)"
},
{
"path": [
"font-size",
"6"
],
"variable": "--ds-font-size-6",
"value": "round(calc(1.5rem * var(--_ds-font-size-factor)), 1px)"
"value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 2)), 1px)"
},
{
"path": [
"font-size",
"7"
],
"variable": "--ds-font-size-7",
"value": "round(calc(1.875rem * var(--_ds-font-size-factor)), 1px)"
"value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 4)), 1px)"
},
{
"path": [
"font-size",
"8"
],
"variable": "--ds-font-size-8",
"value": "round(calc(2.25rem * var(--_ds-font-size-factor)), 1px)"
"value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 5)), 1px)"
},
{
"path": [
"font-size",
"9"
],
"variable": "--ds-font-size-9",
"value": "round(calc(3rem * var(--_ds-font-size-factor)), 1px)"
"value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 7)), 1px)"
},
{
"path": [
"font-size",
"10"
],
"variable": "--ds-font-size-10",
"value": "round(calc(3.75rem * var(--_ds-font-size-factor)), 1px)"
"value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 9)), 1px)"
},
{
"path": [
"font-size",
"6-half"
],
"variable": "--ds-font-size-6-half",
"value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)), 1px)"
},
{
"path": [
"font-size",
"8-half"
],
"variable": "--ds-font-size-8-half",
"value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 6)), 1px)"
},
{
"path": [
"font-size",
"9-half"
],
"variable": "--ds-font-size-9-half",
"value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 8)), 1px)"
},
{
"path": [
Expand Down
32 changes: 25 additions & 7 deletions design-tokens/$metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,36 @@
{
"tokenSetOrder": [
"primitives/globals",
"primitives/modes/size/global",
"primitives/modes/size/small",
"primitives/modes/size/medium",
"primitives/modes/size/large",
"primitives/modes/size/global",
"primitives/modes/typography/size/small",
"primitives/modes/typography/size/medium",
"primitives/modes/typography/size/large",
"primitives/modes/typography/primary/designsystemet",
"primitives/modes/typography/secondary/designsystemet",
"primitives/modes/color-scheme/dark/designsystemet",
"primitives/modes/size/global/designsystemet/font-primary",
"primitives/modes/size/global/designsystemet/font-secondary",
"primitives/modes/size/global/different-fonts/font-main",
"primitives/modes/size/global/different-fonts/font-headings",
"primitives/modes/size/small/designsystemet/font-primary",
"primitives/modes/size/small/designsystemet/font-secondary",
"primitives/modes/size/small/different-fonts/font-main",
"primitives/modes/size/small/different-fonts/font-headings",
"primitives/modes/size/medium/designsystemet/font-primary",
"primitives/modes/size/medium/designsystemet/font-secondary",
"primitives/modes/size/medium/different-fonts/font-main",
"primitives/modes/size/medium/different-fonts/font-headings",
"primitives/modes/size/large/designsystemet/font-primary",
"primitives/modes/size/large/designsystemet/font-secondary",
"primitives/modes/size/large/different-fonts/font-main",
"primitives/modes/size/large/different-fonts/font-headings",
"primitives/fonts/designsystemet/primary",
"primitives/fonts/designsystemet/secondary",
"primitives/fonts/different-fonts/main",
"primitives/fonts/different-fonts/headings",
"primitives/modes/color-scheme/light/designsystemet",
"primitives/modes/color-scheme/light/different-fonts",
"primitives/modes/color-scheme/dark/designsystemet",
"primitives/modes/color-scheme/dark/different-fonts",
"themes/designsystemet",
"themes/different-fonts",
"semantic/color",
"semantic/modes/main-color/accent",
"semantic/modes/support-color/brand1",
Expand Down
103 changes: 62 additions & 41 deletions design-tokens/$themes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,93 +1,114 @@
[
{
"id": "8b2c8cc86611a34b135cb22948666779361fd729",
"name": "medium",
"$figmaStyleReferences": {},
"group": "Size",
"selectedTokenSets": {
"primitives/modes/size/medium": "source",
"primitives/modes/size/global": "enabled",
"primitives/modes/typography/size/medium": "enabled"
"primitives/modes/size/global/designsystemet/font-primary": "enabled",
"primitives/modes/size/medium/designsystemet/font-primary": "enabled",
"primitives/modes/size/global/designsystemet/font-secondary": "enabled",
"primitives/modes/size/medium/designsystemet/font-secondary": "enabled",
"primitives/modes/size/global/different-fonts/font-main": "enabled",
"primitives/modes/size/medium/different-fonts/font-main": "enabled",
"primitives/modes/size/global/different-fonts/font-headings": "enabled",
"primitives/modes/size/medium/different-fonts/font-headings": "enabled"
},
"id": "fb11567729c298ca37c9da4e3a27716a23480824",
"$figmaCollectionId": "VariableCollectionId:36248:20757",
"$figmaModeId": "41630:1",
"group": "Size"
"$figmaStyleReferences": {}
},
{
"id": "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
"name": "large",
"$figmaStyleReferences": {},
"name": "small",
"group": "Size",
"selectedTokenSets": {
"primitives/modes/size/large": "source",
"primitives/modes/size/small": "source",
"primitives/modes/size/global": "enabled",
"primitives/modes/typography/size/large": "enabled"
"primitives/modes/size/global/designsystemet/font-primary": "enabled",
"primitives/modes/size/small/designsystemet/font-primary": "enabled",
"primitives/modes/size/global/designsystemet/font-secondary": "enabled",
"primitives/modes/size/small/designsystemet/font-secondary": "enabled",
"primitives/modes/size/global/different-fonts/font-main": "enabled",
"primitives/modes/size/small/different-fonts/font-main": "enabled",
"primitives/modes/size/global/different-fonts/font-headings": "enabled",
"primitives/modes/size/small/different-fonts/font-headings": "enabled"
},
"id": "8b2c8cc86611a34b135cb22948666779361fd729",
"$figmaCollectionId": "VariableCollectionId:36248:20757",
"$figmaModeId": "41630:2",
"group": "Size"
"$figmaModeId": "41630:3",
"$figmaStyleReferences": {}
},
{
"id": "fb11567729c298ca37c9da4e3a27716a23480824",
"name": "small",
"$figmaStyleReferences": {},
"name": "large",
"group": "Size",
"selectedTokenSets": {
"primitives/modes/size/small": "source",
"primitives/modes/size/large": "source",
"primitives/modes/size/global": "enabled",
"primitives/modes/typography/size/small": "enabled"
"primitives/modes/size/global/designsystemet/font-primary": "enabled",
"primitives/modes/size/large/designsystemet/font-primary": "enabled",
"primitives/modes/size/global/designsystemet/font-secondary": "enabled",
"primitives/modes/size/large/designsystemet/font-secondary": "enabled",
"primitives/modes/size/global/different-fonts/font-main": "enabled",
"primitives/modes/size/large/different-fonts/font-main": "enabled",
"primitives/modes/size/global/different-fonts/font-headings": "enabled",
"primitives/modes/size/large/different-fonts/font-headings": "enabled"
},
"id": "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
"$figmaCollectionId": "VariableCollectionId:36248:20757",
"$figmaModeId": "41630:3",
"group": "Size"
"$figmaModeId": "41630:2",
"$figmaStyleReferences": {}
},
{
"id": "6e7211ed13edfcf516a49254b01d234434716dee",
"$figmaCollectionId": "VariableCollectionId:36528:61712",
"$figmaModeId": "40960:6",
"name": "designsystemet",
"selectedTokenSets": {
"primitives/fonts/designsystemet/primary": "enabled",
"primitives/fonts/designsystemet/secondary": "enabled",
"primitives/fonts/different-fonts/main": "enabled",
"primitives/fonts/different-fonts/headings": "enabled",
"themes/designsystemet": "enabled"
},
"group": "Theme"
},
{
"id": "368d753fcac4455f289500eaa42e70dc0a03522f",
"$figmaCollectionId": "VariableCollectionId:36248:20769",
"$figmaModeId": "36248:2",
"name": "Primary",
"id": "09715dbe582ff86550de42b1783bfaa1d1a17813",
"$figmaCollectionId": "VariableCollectionId:36528:61712",
"$figmaModeId": "40960:7",
"name": "different-fonts",
"selectedTokenSets": {
"primitives/modes/typography/primary/designsystemet": "enabled"
"primitives/fonts/designsystemet/primary": "enabled",
"primitives/fonts/designsystemet/secondary": "enabled",
"primitives/fonts/different-fonts/main": "enabled",
"primitives/fonts/different-fonts/headings": "enabled",
"themes/different-fonts": "enabled"
},
"group": "Typography"
"group": "Theme"
},
{
"id": "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
"$figmaCollectionId": "VariableCollectionId:36248:20769",
"$figmaModeId": "36248:3",
"name": "Secondary",
"name": "Light",
"selectedTokenSets": {
"primitives/modes/typography/secondary/designsystemet": "enabled"
"primitives/modes/color-scheme/light/designsystemet": "enabled",
"primitives/modes/color-scheme/light/different-fonts": "enabled"
},
"group": "Typography"
"id": "0daa3ca0b427b9349da7e7dc00101b5668972926",
"$figmaCollectionId": "VariableCollectionId:34811:5472",
"$figmaModeId": "34811:0",
"group": "Color scheme"
},
{
"name": "Dark",
"selectedTokenSets": {
"primitives/modes/color-scheme/dark/designsystemet": "enabled"
"primitives/modes/color-scheme/dark/designsystemet": "enabled",
"primitives/modes/color-scheme/dark/different-fonts": "enabled"
},
"id": "9ebd8aed52afbffc17e2666e8b4653a53498b257",
"$figmaCollectionId": "VariableCollectionId:34811:5472",
"$figmaModeId": "34811:1",
"group": "Color scheme"
},
{
"name": "Light",
"selectedTokenSets": {
"primitives/modes/color-scheme/light/designsystemet": "enabled"
},
"id": "0daa3ca0b427b9349da7e7dc00101b5668972926",
"$figmaCollectionId": "VariableCollectionId:34811:5472",
"$figmaModeId": "34811:0",
"group": "Color scheme"
},
{
"id": "541629445ef90ad5363f9e88f52a1ccb617e6f84",
"name": "Semantic",
Expand Down
Loading
Loading