From 93803b534761c98f03b25d05a427900776c73377 Mon Sep 17 00:00:00 2001 From: Zhihao Cui <5257855+origami-z@users.noreply.github.com> Date: Thu, 9 May 2024 15:33:04 +0000 Subject: [PATCH] Move text token around --- .changeset/sour-experts-rest.md | 46 +++++++++++++++++++ .changeset/update-global-theme.md | 10 ++++ .storybook/styles.css | 4 +- .../stories/skip-link/skip-link.stories.css | 2 +- packages/theme/css/characteristics/text.css | 22 ++++----- packages/theme/css/deprecated/foundations.css | 4 ++ packages/theme/css/foundations/typography.css | 4 +- packages/theme/css/global.css | 2 +- packages/theme/css/palette/text.css | 5 ++ .../theme/stories/introduction.stories.mdx | 2 +- site/src/css/theme/theme.css | 5 +- .../src/CharacteristicUsage.css | 2 +- 12 files changed, 87 insertions(+), 21 deletions(-) create mode 100644 .changeset/sour-experts-rest.md create mode 100644 .changeset/update-global-theme.md create mode 100644 packages/theme/css/palette/text.css diff --git a/.changeset/sour-experts-rest.md b/.changeset/sour-experts-rest.md new file mode 100644 index 00000000000..fc47518ac61 --- /dev/null +++ b/.changeset/sour-experts-rest.md @@ -0,0 +1,46 @@ +--- +"@salt-ds/theme": minor +--- + +Added new tokens + +| Tier | Token | Value | +| Foundation | `--salt-typography-fontFamily-openSans` | "Open Sans" | +| Foundation | `--salt-typography-fontFamily-ptMono` | "PT Mono" | +| Palette | `--salt-palette-text-fontFamily` | `--salt-typography-fontFamily-openSans` | +| Palette | `--salt-palette-text-fontFamily-heading` | `--salt-typography-fontFamily-openSans` | +| Palette | `--salt-palette-text-fontFamily-code` | `--salt-typography-fontFamily-ptMono` | + +Updated existing token value mapping to use new tokens + +```diff +- --salt-text-fontFamily: var(--salt-typography-fontFamily); ++ --salt-text-fontFamily: var(--salt-palette-text-fontFamily); +- --salt-text-notation-fontFamily: var(--salt-typography-fontFamily); ++ --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily); +- --salt-text-h1-fontFamily: var(--salt-typography-fontFamily); ++ --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading); +- --salt-text-h2-fontFamily: var(--salt-typography-fontFamily); ++ --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading); +- --salt-text-h3-fontFamily: var(--salt-typography-fontFamily); ++ --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading); +- --salt-text-h4-fontFamily: var(--salt-typography-fontFamily); ++ --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading); +- --salt-text-label-fontFamily: var(--salt-typography-fontFamily); ++ --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily); +- --salt-text-display1-fontFamily: var(--salt-typography-fontFamily); ++ --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading); +- --salt-text-display2-fontFamily: var(--salt-typography-fontFamily); ++ --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading); +- --salt-text-display3-fontFamily: var(--salt-typography-fontFamily); ++ --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading); +- --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code); ++ --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code); +``` + +Deprecated below tokens, use replacement token instead + +``` + --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans); + --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono); +``` diff --git a/.changeset/update-global-theme.md b/.changeset/update-global-theme.md new file mode 100644 index 00000000000..6de38cc8202 --- /dev/null +++ b/.changeset/update-global-theme.md @@ -0,0 +1,10 @@ +--- +"@salt-ds/theme": minor +--- + +Updated global theme css font family pointing to text chractertics instead of foundation value + +```diff +- font-family: var(--salt-typography-fontFamily); ++ font-family: var(--salt-text-fontFamily); +``` diff --git a/.storybook/styles.css b/.storybook/styles.css index 19f07e08dfd..c1cd8c59308 100644 --- a/.storybook/styles.css +++ b/.storybook/styles.css @@ -1,5 +1,5 @@ .salt-theme .sbdocs { - font-family: var(--salt-typography-fontFamily); + font-family: var(--salt-palette-text-fontFamily); font-size: var(--salt-text-fontSize); letter-spacing: var(--salt-text-letterSpacing); line-height: var(--salt-text-lineHeight); @@ -41,7 +41,7 @@ color: var(--salt-color-gray-900); font-size: var(--salt-text-fontSize); line-height: var(--salt-text-lineHeight); - font-family: var(--salt-typography-fontFamily); + font-family: var(--salt-palette-text-fontFamily-code); font-size: var(--salt-text-fontSize); letter-spacing: var(--salt-text-letterSpacing); line-height: var(--salt-text-lineHeight); diff --git a/packages/lab/stories/skip-link/skip-link.stories.css b/packages/lab/stories/skip-link/skip-link.stories.css index 0f02c9d38b7..e895e0cf30c 100644 --- a/packages/lab/stories/skip-link/skip-link.stories.css +++ b/packages/lab/stories/skip-link/skip-link.stories.css @@ -4,6 +4,6 @@ .goalsList { font-size: var(--salt-text-fontSize); - font-family: var(--salt-typography-fontFamily); + font-family: var(--salt-palette-text-fontFamily); line-height: var(--salt-text-lineHeight); } diff --git a/packages/theme/css/characteristics/text.css b/packages/theme/css/characteristics/text.css index dfe6fb63190..6808cfd45a3 100644 --- a/packages/theme/css/characteristics/text.css +++ b/packages/theme/css/characteristics/text.css @@ -13,65 +13,65 @@ --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold); /* Body text (should be used as default) */ - --salt-text-fontFamily: var(--salt-typography-fontFamily); + --salt-text-fontFamily: var(--salt-palette-text-fontFamily); --salt-text-fontWeight: var(--salt-typography-fontWeight-regular); --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light); --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold); /* Notation */ - --salt-text-notation-fontFamily: var(--salt-typography-fontFamily); + --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily); --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold); --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular); --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold); /* H1 */ - --salt-text-h1-fontFamily: var(--salt-typography-fontFamily); + --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading); --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold); --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium); --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold); /* H2 */ - --salt-text-h2-fontFamily: var(--salt-typography-fontFamily); + --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading); --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold); --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular); --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold); /* H3 */ - --salt-text-h3-fontFamily: var(--salt-typography-fontFamily); + --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading); --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold); --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular); --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold); /* H4 */ - --salt-text-h4-fontFamily: var(--salt-typography-fontFamily); + --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading); --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold); --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular); --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold); /* Label */ - --salt-text-label-fontFamily: var(--salt-typography-fontFamily); + --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily); --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular); --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light); --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold); /* Display text */ - --salt-text-display1-fontFamily: var(--salt-typography-fontFamily); + --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading); --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold); --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold); --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular); - --salt-text-display2-fontFamily: var(--salt-typography-fontFamily); + --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading); --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold); --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold); --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular); - --salt-text-display3-fontFamily: var(--salt-typography-fontFamily); + --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading); --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold); --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold); --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular); /* Code */ - --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code); + --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code); } /* Sizes by density */ diff --git a/packages/theme/css/deprecated/foundations.css b/packages/theme/css/deprecated/foundations.css index ab8a8326dae..ef1a0f5f265 100644 --- a/packages/theme/css/deprecated/foundations.css +++ b/packages/theme/css/deprecated/foundations.css @@ -24,6 +24,10 @@ --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color); /* Use --salt-shadow-300 */ --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color); /* Use --salt-shadow-400 */ --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color); /* Use --salt-shadow-500 */ + + /* Typography */ + --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans); + --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono); } .salt-theme[data-mode="light"] { diff --git a/packages/theme/css/foundations/typography.css b/packages/theme/css/foundations/typography.css index d2e1ef72e61..cb1cd92f6ea 100644 --- a/packages/theme/css/foundations/typography.css +++ b/packages/theme/css/foundations/typography.css @@ -1,6 +1,6 @@ .salt-theme { - --salt-typography-fontFamily: "Open Sans"; - --salt-typography-fontFamily-code: "PT Mono"; + --salt-typography-fontFamily-openSans: "Open Sans"; + --salt-typography-fontFamily-ptMono: "PT Mono"; --salt-typography-fontWeight-light: 300; --salt-typography-fontWeight-regular: 400; diff --git a/packages/theme/css/global.css b/packages/theme/css/global.css index c3c802900d8..c7231b9ec62 100644 --- a/packages/theme/css/global.css +++ b/packages/theme/css/global.css @@ -4,7 +4,7 @@ .salt-theme { color: var(--salt-content-primary-foreground); - font-family: var(--salt-typography-fontFamily); + font-family: var(--salt-text-fontFamily); font-size: var(--salt-text-fontSize); letter-spacing: var(--salt-text-letterSpacing); line-height: var(--salt-text-lineHeight); diff --git a/packages/theme/css/palette/text.css b/packages/theme/css/palette/text.css new file mode 100644 index 00000000000..6ba41c84f91 --- /dev/null +++ b/packages/theme/css/palette/text.css @@ -0,0 +1,5 @@ +.salt-theme { + --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans); + --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans); + --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono); +} diff --git a/packages/theme/stories/introduction.stories.mdx b/packages/theme/stories/introduction.stories.mdx index 3ce45f9d864..2c30f9cd527 100644 --- a/packages/theme/stories/introduction.stories.mdx +++ b/packages/theme/stories/introduction.stories.mdx @@ -120,7 +120,7 @@ Characteristics semantically group both palette and foundational tokens to provi | Separable | Components, or elements within a component that divide content, functions or regions | `--salt-separable-primary-borderColor` | `--salt-palette-neutral-primary-border` | | Status | Components indicating an informational, warning, error or success state | `--salt-status-info-borderColor` | `--salt-palette-info-border` | | Target | Components that form a target for draggable elements | `--salt-target-borderStyle` | `dashed` | -| Text | All text components or HTML elements | `--salt-text-fontFamily` | `--salt-typography-fontFamily` | +| Text | All text components or HTML elements | `--salt-text-fontFamily` | `--salt-palette-text-fontFamily-heading` | | Track | Components that indicate a changeable value or progression | `--salt-track-borderStyle` | `solid` | | Content | Provides default color values for text and icon display | `--salt-content-primary-foreground` | `--salt-palette-neutral-primary-foreground` | | **Deprecated:** Differential | Replaced with Status | \* | \* | diff --git a/site/src/css/theme/theme.css b/site/src/css/theme/theme.css index d2b64d9aecc..3ba108f273e 100644 --- a/site/src/css/theme/theme.css +++ b/site/src/css/theme/theme.css @@ -19,6 +19,7 @@ .salt-theme[data-mode="light"], .salt-theme[data-mode="dark"] { - --salt-typography-fontFamily: var(--site-font-family); - --salt-typography-fontFamily-code: var(--site-font-family-code); + --salt-palette-text-fontFamily: var(--site-font-family); + --salt-palette-text-fontFamily-heading: var(--site-font-family); + --salt-palette-text-fontFamily-code: var(--site-font-family-code); } diff --git a/tooling/css-variable-docgen-components/src/CharacteristicUsage.css b/tooling/css-variable-docgen-components/src/CharacteristicUsage.css index af56ffead4a..d5fbf26117e 100644 --- a/tooling/css-variable-docgen-components/src/CharacteristicUsage.css +++ b/tooling/css-variable-docgen-components/src/CharacteristicUsage.css @@ -1,5 +1,5 @@ .characteristicTokenDoc { - font-family: var(--salt-typography-fontFamily-code); + font-family: var(--salt-palette-text-fontFamily-code); height: var(--salt-size-base); margin: var(--salt-size-unit); }