From 2b72e6b278032769c5a7971f473b51a236f2e4e7 Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Mon, 4 Nov 2024 08:32:03 +0100 Subject: [PATCH] feat: add fluid font-size scale to voorbeeld-theme --- packages/storybook/config/preview.ts | 1 + .../figma/voorbeeld.tokens.json | 57 ++++++++++--- .../voorbeeld-design-tokens/src/fluid.scss | 80 +++++++++++++++++++ 3 files changed, 128 insertions(+), 10 deletions(-) create mode 100644 packages/voorbeeld-design-tokens/src/fluid.scss diff --git a/packages/storybook/config/preview.ts b/packages/storybook/config/preview.ts index 48333a8e8..0f830c0f9 100644 --- a/packages/storybook/config/preview.ts +++ b/packages/storybook/config/preview.ts @@ -45,6 +45,7 @@ import '@nl-design-system-unstable/tubbergen-design-tokens/dist/index.css'; import '@nl-design-system-unstable/tubbergen-design-tokens/src/font'; import '@nl-design-system-unstable/venray-design-tokens/dist/index.css'; import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/theme.css'; +import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/fluid.css'; import '@nl-design-system-unstable/voorbeeld-design-tokens/src/custom.scss'; import '@nl-design-system-unstable/voorbeeld-design-tokens/src/font'; import '@nl-design-system-unstable/vught-design-tokens/dist/index.css'; diff --git a/packages/voorbeeld-design-tokens/figma/voorbeeld.tokens.json b/packages/voorbeeld-design-tokens/figma/voorbeeld.tokens.json index 3edd71502..c66492737 100644 --- a/packages/voorbeeld-design-tokens/figma/voorbeeld.tokens.json +++ b/packages/voorbeeld-design-tokens/figma/voorbeeld.tokens.json @@ -916,17 +916,54 @@ "common": { "basis": { "typography": { + "min": { + "small": { "font-size": { "$value": "0.9643rem" } }, + "medium": { "font-size": { "$value": "1.125rem" } }, + "large": { "font-size": { "$value": "1.3125rem" } }, + "x-large": { "font-size": { "$value": "1.5313rem" } }, + "xx-large": { "font-size": { "$value": "1.7865rem" } }, + "xxx-large": { "font-size": { "$value": "2.0842rem" } }, + "xxxx-large": { "font-size": { "$value": "2.4316rem" } } + }, "scale": { - "xx-small": { "font-size": { "$value": "8px", "comment": "8px" } }, - "x-small": { "font-size": { "$value": "12px", "comment": "12px" } }, - "small": { "font-size": { "$value": "14px", "comment": "14px" } }, - "medium": { "font-size": { "$value": "16px", "comment": "16px" } }, - "large": { "font-size": { "$value": "20px", "comment": "20px" } }, - "x-large": { "font-size": { "$value": "24px", "comment": "24px" } }, - "xx-large": { "font-size": { "$value": "32px", "comment": "32px" } }, - "xxx-large": { "font-size": { "$value": "40px", "comment": "40px" } }, - "xxxx-large": { "font-size": { "$value": "48px", "comment": "48px" } } - } + "small": { + "font-size": { "$value": "14px" }, + "line-height": { "$value": "1.6" } + }, + "medium": { + "font-size": { "$value": "16px" }, + "line-height": { "$value": "1.6" } + }, + "large": { + "font-size": { "$value": "20px" }, + "line-height": { "$value": "1.5" } + }, + "x-large": { + "font-size": { "$value": "24px" }, + "line-height": { "$value": "1.3" } + }, + "xx-large": { + "font-size": { "$value": "32px" }, + "line-height": { "$value": "1.25" } + }, + "xxx-large": { + "font-size": { "$value": "40px" }, + "line-height": { "$value": "1.2" } + }, + "xxxx-large": { + "font-size": { "$value": "48px" }, + "line-height": { "$value": "1.15" } + } + }, + "max": { + "small": { "font-size": { "$value": "1.2rem" } }, + "medium": { "font-size": { "$value": "1.5rem" } }, + "large": { "font-size": { "$value": "1.875rem" } }, + "x-large": { "font-size": { "$value": "2.3438rem" } }, + "xx-large": { "font-size": { "$value": "2.9297rem" } }, + "xxx-large": { "font-size": { "$value": "3.6621rem" } }, + "xxxx-large": { "font-size": { "$value": "4.5776rem" } } + }, } }, "utrecht": { diff --git a/packages/voorbeeld-design-tokens/src/fluid.scss b/packages/voorbeeld-design-tokens/src/fluid.scss new file mode 100644 index 000000000..34c2eb3c2 --- /dev/null +++ b/packages/voorbeeld-design-tokens/src/fluid.scss @@ -0,0 +1,80 @@ +/* + * Prefer `vi` over `vw` when available. + * Like `inline-size` and other logical properties, `vi` is based on the `inline` axis, + * instead of making assumptions about the text direction. + * The `vi` unit is unfortunately not yet implemented by all evergreen browsers. + */ + +@property --100vw { + syntax: ""; + initial-value: 0px; + inherits: true; +} + +@property --100vi { + syntax: ""; + initial-value: 0px; + inherits: true; +} + +.voorbeeld-theme { + --100vw: 100vw; + --100vi: 100vi; + + --viewport-small-inline-size: 320; + --viewport-large-inline-size: 1600; + --viewport-size: tan(atan2(var(--100vi, var(--100vw)), 1px)); + --font-size-scale: calc( + ( + clamp(var(--viewport-small-inline-size), var(--viewport-size), var(--viewport-large-inline-size)) - + var(--viewport-small-inline-size) + ) / (var(--viewport-large-inline-size) - var(--viewport-small-inline-size)) + ); + + /* + --basis-typography-min-xxxx-large-font-size: 2.4316rem; + --basis-typography-max-xxxx-large-font-size: 4.5776rem; + */ + + --basis-typography-scale-small-font-size: calc( + var(--basis-typography-min-small-font-size) + + (var(--basis-typography-max-small-font-size) - var(--basis-typography-min-small-font-size)) * + var(--font-size-scale) + ); + + --basis-typography-scale-medium-font-size: calc( + var(--basis-typography-min-medium-font-size) + + (var(--basis-typography-max-medium-font-size) - var(--basis-typography-min-medium-font-size)) * + var(--font-size-scale) + ); + + --basis-typography-scale-large-font-size: calc( + var(--basis-typography-min-large-font-size) + + (var(--basis-typography-max-large-font-size) - var(--basis-typography-min-large-font-size)) * + var(--font-size-scale) + ); + + --basis-typography-scale-x-large-font-size: calc( + var(--basis-typography-min-x-large-font-size) + + (var(--basis-typography-max-x-large-font-size) - var(--basis-typography-min-x-large-font-size)) * + var(--font-size-scale) + ); + + --basis-typography-scale-xx-large-font-size: calc( + var(--basis-typography-min-xx-large-font-size) + + (var(--basis-typography-max-xx-large-font-size) - var(--basis-typography-min-xx-large-font-size)) * + var(--font-size-scale) + ); + + --basis-typography-scale-xxx-large-font-size: calc( + var(--basis-typography-min-xxx-large-font-size) + + (var(--basis-typography-max-xxx-large-font-size) - var(--basis-typography-min-xxx-large-font-size)) * + var(--font-size-scale) + ); + + --basis-typography-scale-xxxx-large-font-size: calc( + var(--basis-typography-min-xxxx-large-font-size) + + (var(--basis-typography-max-xxxx-large-font-size) - var(--basis-typography-min-xxxx-large-font-size)) * + var(--font-size-scale) + ); +}