diff --git a/.changeset/twenty-bags-pump.md b/.changeset/twenty-bags-pump.md new file mode 100644 index 00000000000..3a26e401486 --- /dev/null +++ b/.changeset/twenty-bags-pump.md @@ -0,0 +1,5 @@ +--- +"@utrecht/design-tokens": patch +--- + +Convert all `px` `font-size` design tokens to `rem`. diff --git a/proprietary/design-tokens/src/brand/utrecht/typography.tokens.json b/proprietary/design-tokens/src/brand/utrecht/typography.tokens.json index 6234fc04275..d8811afd036 100644 --- a/proprietary/design-tokens/src/brand/utrecht/typography.tokens.json +++ b/proprietary/design-tokens/src/brand/utrecht/typography.tokens.json @@ -5,15 +5,15 @@ "font-family": { "value": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif" } }, "scale": { - "2xs": { "font-size": { "value": "0.5rem", "comment": "8px" } }, - "xs": { "font-size": { "value": "0.75rem", "comment": "12px" } }, - "sm": { "font-size": { "value": "0.875rem", "comment": "14px" } }, - "md": { "font-size": { "value": "1rem", "comment": "16px" } }, - "lg": { "font-size": { "value": "1.125rem", "comment": "18px" } }, - "xl": { "font-size": { "value": "1.25rem", "comment": "20px" } }, - "2xl": { "font-size": { "value": "1.375rem", "comment": "22px" } }, - "3xl": { "font-size": { "value": "1.5rem", "comment": "24px" } }, - "4xl": { "font-size": { "value": "2rem", "comment": "32px" } } + "2xs": { "font-size": { "value": "8px", "comment": "8px" } }, + "xs": { "font-size": { "value": "12px", "comment": "12px" } }, + "sm": { "font-size": { "value": "14px", "comment": "14px" } }, + "md": { "font-size": { "value": "16px", "comment": "16px" } }, + "lg": { "font-size": { "value": "18px", "comment": "18px" } }, + "xl": { "font-size": { "value": "20px", "comment": "20px" } }, + "2xl": { "font-size": { "value": "22px", "comment": "22px" } }, + "3xl": { "font-size": { "value": "24px", "comment": "24px" } }, + "4xl": { "font-size": { "value": "32px", "comment": "32px" } } }, "weight-scale": { "bold": { "font-weight": { "value": "700" } }, diff --git a/proprietary/design-tokens/src/component/utrecht/blockquote.tokens.json b/proprietary/design-tokens/src/component/utrecht/blockquote.tokens.json index 4a3b7f02882..9c017fffe85 100644 --- a/proprietary/design-tokens/src/component/utrecht/blockquote.tokens.json +++ b/proprietary/design-tokens/src/component/utrecht/blockquote.tokens.json @@ -14,11 +14,11 @@ "font-size": {}, "caption": { "color": {}, - "font-size": { "value": "0.75rem" } + "font-size": { "value": "{utrecht.typography.scale.xs.font-size}" } }, "content": { "color": { "value": "{utrecht.color.red.40}" }, - "font-size": { "value": "1.125rem" } + "font-size": { "value": "{utrecht.typography.scale.lg.font-size}" } } } } diff --git a/proprietary/design-tokens/src/component/utrecht/code-block.tokens.json b/proprietary/design-tokens/src/component/utrecht/code-block.tokens.json index 235e1e4672b..66b42f937ca 100644 --- a/proprietary/design-tokens/src/component/utrecht/code-block.tokens.json +++ b/proprietary/design-tokens/src/component/utrecht/code-block.tokens.json @@ -4,8 +4,8 @@ "background-color": { "value": "{utrecht.color.grey.95}" }, "color": { "value": "{utrecht.color.black}" }, "font-family": {}, - "font-size": { "value": "16px" }, - "line-height": { "value": "24px" }, + "font-size": { "value": "{utrecht.typography.scale.md.font-size}" }, + "line-height": { "value": "{utrecht.typography.line-height.md}" }, "margin-block-end": { "value": "{utrecht.space.block.lg}" }, "margin-block-start": { "value": "{utrecht.space.block.lg}" }, "margin-inline-end": {}, diff --git a/proprietary/design-tokens/src/component/utrecht/figure.tokens.json b/proprietary/design-tokens/src/component/utrecht/figure.tokens.json index 4504c2ee6ea..8af8e5d4dc8 100644 --- a/proprietary/design-tokens/src/component/utrecht/figure.tokens.json +++ b/proprietary/design-tokens/src/component/utrecht/figure.tokens.json @@ -5,8 +5,8 @@ "margin-block-start": {}, "caption": { "color": { "value": "#727272" }, - "font-size": { "value": "14px" }, - "line-height": { "value": "20px" } + "font-size": { "value": "{utrecht.typography.scale.sm.font-size}" }, + "line-height": { "value": "{utrecht.typography.line-height.md}" } } } } diff --git a/proprietary/design-tokens/src/component/utrecht/form-fieldset.tokens.json b/proprietary/design-tokens/src/component/utrecht/form-fieldset.tokens.json index 3c55d38503c..19d52c4e99b 100644 --- a/proprietary/design-tokens/src/component/utrecht/form-fieldset.tokens.json +++ b/proprietary/design-tokens/src/component/utrecht/form-fieldset.tokens.json @@ -10,9 +10,9 @@ "legend": { "color": {}, "font-family": {}, - "font-size": { "value": "1rem" }, + "font-size": { "value": "{utrecht.typography.scale.md.font-size}" }, "font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight}" }, - "line-height": { "value": "1.4" }, + "line-height": { "value": "{utrecht.typography.line-height.md}" }, "margin-block-end": { "value": "{utrecht.space.block.sm}" }, "margin-block-start": { "value": "{utrecht.space.block.xl}" }, "disabled": { diff --git a/proprietary/design-tokens/src/component/utrecht/pagination.tokens.json b/proprietary/design-tokens/src/component/utrecht/pagination.tokens.json index 47f1f2b9043..cc5b62d2a09 100644 --- a/proprietary/design-tokens/src/component/utrecht/pagination.tokens.json +++ b/proprietary/design-tokens/src/component/utrecht/pagination.tokens.json @@ -1,7 +1,7 @@ { "utrecht": { "pagination": { - "font-size": { "value": "14px" }, + "font-size": { "value": "{utrecht.typography.scale.sm.font-size}" }, "font-family": {}, "margin-block-start": { "value": "0" }, "margin-block-end": { "value": "1em" }, diff --git a/proprietary/design-tokens/src/component/utrecht/table.tokens.json b/proprietary/design-tokens/src/component/utrecht/table.tokens.json index 0ae1ba1e403..599b8172038 100644 --- a/proprietary/design-tokens/src/component/utrecht/table.tokens.json +++ b/proprietary/design-tokens/src/component/utrecht/table.tokens.json @@ -4,7 +4,7 @@ "margin-block-start": { "value": "{utrecht.space.block.md}" }, "margin-block-end": { "value": "0" }, "caption": { - "font-size": { "value": "1.125em" }, + "font-size": { "value": "{utrecht.typography.scale.lg.font-size}" }, "font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight}" }, "font-family": {}, "color": {}, diff --git a/proprietary/design-tokens/src/component/utrecht/toptask-link.tokens.json b/proprietary/design-tokens/src/component/utrecht/toptask-link.tokens.json index d5163012fc0..5dbdf46f83d 100644 --- a/proprietary/design-tokens/src/component/utrecht/toptask-link.tokens.json +++ b/proprietary/design-tokens/src/component/utrecht/toptask-link.tokens.json @@ -3,7 +3,7 @@ "toptask-link": { "background-color": { "value": "{utrecht.button.primary-action.background-color}" }, "color": { "value": "{utrecht.button.primary-action.color}" }, - "font-size": { "value": "1rem" }, + "font-size": { "value": "{utrecht.typography.scale.md.font-size}" }, "line-height": { "value": "1.2" }, "min-block-size": { "value": "8.25rem" }, "min-inline-size": { "value": "15rem" },