From 50502ba65d127f96e5ed13286b8149e05019be99 Mon Sep 17 00:00:00 2001 From: masoudmanson Date: Wed, 9 Oct 2024 20:56:52 +0000 Subject: [PATCH 01/12] chore(release): publish - @czi-sds/components@21.5.0 --- packages/components/CHANGELOG.md | 6 ++++++ packages/components/package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 1412a64a7..25d4120a4 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [21.5.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.4.0...@czi-sds/components@21.5.0) (2024-10-09) + +### Features + +- **icons:** add new s and xs sizes for the Book icon ([#873](https://github.com/chanzuckerberg/sci-components/issues/873)) ([a256f8c](https://github.com/chanzuckerberg/sci-components/commit/a256f8cc45d7f895130d9b326bace180f6a717e9)) + # [21.4.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.3.0...@czi-sds/components@21.4.0) (2024-10-09) ### Features diff --git a/packages/components/package.json b/packages/components/package.json index 9d2b77e56..91e30d095 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@czi-sds/components", - "version": "21.4.0", + "version": "21.5.0", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", "types": "dist/index.cjs.d.ts", From 981104b08a380e93eedf3a208e59026a97b975e4 Mon Sep 17 00:00:00 2001 From: masoudmanson Date: Wed, 16 Oct 2024 18:21:59 +0000 Subject: [PATCH 02/12] chore(release): publish - @czi-sds/components@21.6.0 - @czi-sds/data-viz@0.10.2 --- packages/components/CHANGELOG.md | 10 ++++++++++ packages/components/package.json | 2 +- packages/data-viz/CHANGELOG.md | 4 ++++ packages/data-viz/package.json | 2 +- 4 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 25d4120a4..09f8c93a3 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [21.6.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.5.0...@czi-sds/components@21.6.0) (2024-10-16) + +### Bug Fixes + +- **tag:** fix custom coloring of Tag component ([#866](https://github.com/chanzuckerberg/sci-components/issues/866)) ([268cdda](https://github.com/chanzuckerberg/sci-components/commit/268cddab07a92acf446e53170528d18e03108b17)) + +### Features + +- **ButtonToggle:** implement new icon variant of toggle ([#860](https://github.com/chanzuckerberg/sci-components/issues/860)) ([3f532ad](https://github.com/chanzuckerberg/sci-components/commit/3f532ad20c6b872990c5122d93774ab6c87ee667)) + # [21.5.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.4.0...@czi-sds/components@21.5.0) (2024-10-09) ### Features diff --git a/packages/components/package.json b/packages/components/package.json index 91e30d095..9b410dd7f 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@czi-sds/components", - "version": "21.5.0", + "version": "21.6.0", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", "types": "dist/index.cjs.d.ts", diff --git a/packages/data-viz/CHANGELOG.md b/packages/data-viz/CHANGELOG.md index f604dc729..80ee52ce3 100644 --- a/packages/data-viz/CHANGELOG.md +++ b/packages/data-viz/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.10.2](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/data-viz@0.10.1...@czi-sds/data-viz@0.10.2) (2024-10-16) + +**Note:** Version bump only for package @czi-sds/data-viz + ## [0.10.1](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/data-viz@0.10.0...@czi-sds/data-viz@0.10.1) (2024-09-07) ### Bug Fixes diff --git a/packages/data-viz/package.json b/packages/data-viz/package.json index 1ca7f2ac9..201832131 100644 --- a/packages/data-viz/package.json +++ b/packages/data-viz/package.json @@ -1,6 +1,6 @@ { "name": "@czi-sds/data-viz", - "version": "0.10.1", + "version": "0.10.2", "main": "dist/index.cjs.js", "types": "dist/index.cjs.d.ts", "module": "dist/index.esm.js", From 42e39943fc8b8d9866ab6b0edd4d0e7b13b636c3 Mon Sep 17 00:00:00 2001 From: masoudmanson Date: Wed, 23 Oct 2024 19:23:33 +0000 Subject: [PATCH 03/12] chore(release): publish - @czi-sds/components@21.6.1 --- packages/components/CHANGELOG.md | 6 ++++++ packages/components/package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 09f8c93a3..4f7f412f3 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [21.6.1](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.6.0...@czi-sds/components@21.6.1) (2024-10-23) + +### Bug Fixes + +- **link:** fix multi-line link text-decorations ([#880](https://github.com/chanzuckerberg/sci-components/issues/880)) ([0f3ed1d](https://github.com/chanzuckerberg/sci-components/commit/0f3ed1da867df27408f16df4151139dfd913678b)) + # [21.6.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.5.0...@czi-sds/components@21.6.0) (2024-10-16) ### Bug Fixes diff --git a/packages/components/package.json b/packages/components/package.json index 9b410dd7f..153c2ad4a 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@czi-sds/components", - "version": "21.6.0", + "version": "21.6.1", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", "types": "dist/index.cjs.d.ts", From 350ff94073a1c29563feaf4b7c4fdea4d2336261 Mon Sep 17 00:00:00 2001 From: masoudmanson Date: Wed, 30 Oct 2024 19:29:17 +0000 Subject: [PATCH 04/12] chore(release): publish - @czi-sds/components@21.6.2 - @czi-sds/data-viz@0.10.3 --- packages/components/CHANGELOG.md | 4 ++++ packages/components/package.json | 2 +- packages/data-viz/CHANGELOG.md | 4 ++++ packages/data-viz/package.json | 2 +- 4 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 4f7f412f3..bbe2d3af5 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [21.6.2](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.6.1...@czi-sds/components@21.6.2) (2024-10-30) + +**Note:** Version bump only for package @czi-sds/components + ## [21.6.1](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.6.0...@czi-sds/components@21.6.1) (2024-10-23) ### Bug Fixes diff --git a/packages/components/package.json b/packages/components/package.json index 153c2ad4a..9cc3aa6dc 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@czi-sds/components", - "version": "21.6.1", + "version": "21.6.2", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", "types": "dist/index.cjs.d.ts", diff --git a/packages/data-viz/CHANGELOG.md b/packages/data-viz/CHANGELOG.md index 80ee52ce3..faab9a02b 100644 --- a/packages/data-viz/CHANGELOG.md +++ b/packages/data-viz/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.10.3](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/data-viz@0.10.2...@czi-sds/data-viz@0.10.3) (2024-10-30) + +**Note:** Version bump only for package @czi-sds/data-viz + ## [0.10.2](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/data-viz@0.10.1...@czi-sds/data-viz@0.10.2) (2024-10-16) **Note:** Version bump only for package @czi-sds/data-viz diff --git a/packages/data-viz/package.json b/packages/data-viz/package.json index 201832131..7d43af3f5 100644 --- a/packages/data-viz/package.json +++ b/packages/data-viz/package.json @@ -1,6 +1,6 @@ { "name": "@czi-sds/data-viz", - "version": "0.10.2", + "version": "0.10.3", "main": "dist/index.cjs.js", "types": "dist/index.cjs.d.ts", "module": "dist/index.esm.js", From b3c7021064390ef46a3f46ffd0b522695e4e9fed Mon Sep 17 00:00:00 2001 From: masoudmanson Date: Thu, 7 Nov 2024 19:07:29 +0000 Subject: [PATCH 05/12] chore(release): publish - @czi-sds/components@21.6.3 --- packages/components/CHANGELOG.md | 6 ++++++ packages/components/package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index bbe2d3af5..30b87db46 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [21.6.3](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.6.2...@czi-sds/components@21.6.3) (2024-11-07) + +### Bug Fixes + +- **segmentedcontrol:** allow all buttons to be deselected y removing a condition in handleActive ([#891](https://github.com/chanzuckerberg/sci-components/issues/891)) ([5ef9167](https://github.com/chanzuckerberg/sci-components/commit/5ef91677a230f408b9fba974e3b801e2f41fc581)) + ## [21.6.2](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.6.1...@czi-sds/components@21.6.2) (2024-10-30) **Note:** Version bump only for package @czi-sds/components diff --git a/packages/components/package.json b/packages/components/package.json index 9cc3aa6dc..a43fa7e61 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@czi-sds/components", - "version": "21.6.2", + "version": "21.6.3", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", "types": "dist/index.cjs.d.ts", From 91a3874230a836ed803dafc9138c9708e1b4f80f Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Thu, 14 Nov 2024 03:04:49 -0500 Subject: [PATCH 06/12] fix(build): build new css vvariables --- .../styles-dictionary/css/variables.css | 48 +++++++++---------- 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css index 5acf361f5..606bbcba5 100644 --- a/packages/components/src/common/styles-dictionary/css/variables.css +++ b/packages/components/src/common/styles-dictionary/css/variables.css @@ -197,10 +197,9 @@ --sds-corner-m: 4px; --sds-corner-s: 2px; --sds-corner-none: 0px; - --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3); - --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15), - 0px 2px 4px 0px rgba(0, 0, 0, 0.15); - --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); + --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); + --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); + --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); --sds-drop-shadow-none: none; --sds-font-font-family-body: "Inter", sans-serif; --sds-font-font-family-body-narrow: "Inter", sans-serif; @@ -394,9 +393,9 @@ --sds-border-info-thick: 2px solid #cde3ff; --sds-border-link-dashed: 1px dashed; --sds-border-link-solid: 1px solid; - --sds-border-negative-default: 1px solid #ffbdb3; - --sds-border-negative-extra-thick: 4px solid #ffbdb3; - --sds-border-negative-thick: 2px solid #ffbdb3; + --sds-border-negative-default: 1px solid #FFBDB3; + --sds-border-negative-extra-thick: 4px solid #FFBDB3; + --sds-border-negative-thick: 2px solid #FFBDB3; --sds-border-neutral-default: 1px solid #aaaaaa; --sds-border-neutral-extra-thick: 4px solid #aaaaaa; --sds-border-neutral-thick: 2px solid #aaaaaa; @@ -446,13 +445,13 @@ --sds-color-primitive-purple-700: #f0ebfe; --sds-color-primitive-purple-800: #fbf9ff; --sds-color-primitive-red-100: #630008; - --sds-color-primitive-red-200: #a30000; - --sds-color-primitive-red-300: #e52722; - --sds-color-primitive-red-400: #ff695b; - --sds-color-primitive-red-500: #ff9385; - --sds-color-primitive-red-600: #ffbdb3; - --sds-color-primitive-red-700: #ffd8d1; - --sds-color-primitive-red-800: #fff1ee; + --sds-color-primitive-red-200: #A30000; + --sds-color-primitive-red-300: #E52722; + --sds-color-primitive-red-400: #FF695B; + --sds-color-primitive-red-500: #FF9385; + --sds-color-primitive-red-600: #FFBDB3; + --sds-color-primitive-red-700: #FFD8D1; + --sds-color-primitive-red-800: #FFF1EE; --sds-color-primitive-yellow-100: #552300; --sds-color-primitive-yellow-200: #834500; --sds-color-primitive-yellow-300: #985a00; @@ -531,15 +530,15 @@ --sds-color-semantic-info-surface-primary: #002573; --sds-color-semantic-info-surface-secondary: #a2c9ff; --sds-color-semantic-info-text: #cde3ff; - --sds-color-semantic-negative-border: #ff9385; - --sds-color-semantic-negative-fill-hover: #ffbdb3; - --sds-color-semantic-negative-fill-pressed: #ffd8d1; - --sds-color-semantic-negative-fill-primary: #ff9385; + --sds-color-semantic-negative-border: #FF9385; + --sds-color-semantic-negative-fill-hover: #FFBDB3; + --sds-color-semantic-negative-fill-pressed: #FFD8D1; + --sds-color-semantic-negative-fill-primary: #FF9385; --sds-color-semantic-negative-fill-secondary: #630008; - --sds-color-semantic-negative-ornament: #ffbdb3; + --sds-color-semantic-negative-ornament: #FFBDB3; --sds-color-semantic-negative-surface-primary: #630008; - --sds-color-semantic-negative-surface-secondary: #ff9385; - --sds-color-semantic-negative-text: #ffbdb3; + --sds-color-semantic-negative-surface-secondary: #FF9385; + --sds-color-semantic-negative-text: #FFBDB3; --sds-color-semantic-neutral-border: #aaaaaa; --sds-color-semantic-neutral-fill-hover: #cdcdcd; --sds-color-semantic-neutral-fill-pressed: #ededed; @@ -571,10 +570,9 @@ --sds-corner-m: 4px; --sds-corner-s: 2px; --sds-corner-none: 0px; - --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3); - --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15), - 0px 2px 4px 0px rgba(0, 0, 0, 0.15); - --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); + --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); + --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); + --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); --sds-drop-shadow-none: none; --sds-font-font-family-body: "Inter", sans-serif; --sds-font-font-family-body-narrow: "Inter", sans-serif; From 44ad2b400e28b3572beabf1eaf43be590d8600ec Mon Sep 17 00:00:00 2001 From: masoudmanson Date: Thu, 14 Nov 2024 08:06:51 +0000 Subject: [PATCH 07/12] chore(release): publish - @czi-sds/components@21.7.0 --- packages/components/CHANGELOG.md | 13 +++++++++++++ packages/components/package.json | 2 +- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 30b87db46..0db417e89 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,19 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [21.7.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.6.3...@czi-sds/components@21.7.0) (2024-11-14) + +### Bug Fixes + +- **build:** build new css vvariables ([91a3874](https://github.com/chanzuckerberg/sci-components/commit/91a3874230a836ed803dafc9138c9708e1b4f80f)) +- **inputs:** fix border color of inputs based on intent prop ([#895](https://github.com/chanzuckerberg/sci-components/issues/895)) ([8810c07](https://github.com/chanzuckerberg/sci-components/commit/8810c07dc24560bb353e231a63c456d6acccc1a8)) + +### Features + +- **breakpoints:** added new SDS breakpoints ([#888](https://github.com/chanzuckerberg/sci-components/issues/888)) ([a809c01](https://github.com/chanzuckerberg/sci-components/commit/a809c018e3b7de62c457db6c21047b256ed6f959)) +- **designtokens:** add narrow fonts to design tokens ([#892](https://github.com/chanzuckerberg/sci-components/issues/892)) ([dcbe4f7](https://github.com/chanzuckerberg/sci-components/commit/dcbe4f7246fbd5f51af3de12e9b9ccc2978c2a05)) +- **styles/common:** mobile font styles ([#884](https://github.com/chanzuckerberg/sci-components/issues/884)) ([75375d3](https://github.com/chanzuckerberg/sci-components/commit/75375d3feb795a1bf1fbd24268e0a0a52fbb6bac)) + ## [21.6.3](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.6.2...@czi-sds/components@21.6.3) (2024-11-07) ### Bug Fixes diff --git a/packages/components/package.json b/packages/components/package.json index a43fa7e61..2a85f280e 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@czi-sds/components", - "version": "21.6.3", + "version": "21.7.0", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", "types": "dist/index.cjs.d.ts", From 9e6e6ff16480880bb63386263849514c7d9d2e7b Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Wed, 27 Nov 2024 17:05:21 -0500 Subject: [PATCH 08/12] refactor(navigationjumpto): refactor the onChange prop (#906) * refactor(navigationjumpto): refactor the onChange prop * chore(merge): merge latest changes from the main branch --- .../src/core/NavigationJumpTo/index.tsx | 37 ++++++++++++++----- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/packages/components/src/core/NavigationJumpTo/index.tsx b/packages/components/src/core/NavigationJumpTo/index.tsx index f3b86b898..3199a2ecf 100644 --- a/packages/components/src/core/NavigationJumpTo/index.tsx +++ b/packages/components/src/core/NavigationJumpTo/index.tsx @@ -4,13 +4,19 @@ import { toKebabCase } from "src/common/utils"; import { NavigationJumpToExtraProps, StyledTab, StyledTabs } from "./style"; import useInView from "./useIntersection"; +type Item = { + title: string; + elementRef: React.MutableRefObject; +}; + export interface NavigationJumpToProps extends NavigationJumpToExtraProps { - items: Array<{ - title: string; - elementRef: React.MutableRefObject; - }>; + items: Array; offsetTop?: number; - onChange?: (value: number) => void; + onChange?: ( + value: number, + event?: React.SyntheticEvent, + type?: "click" | "scroll" + ) => void; } const NavigationJumpTo = forwardRef( @@ -56,9 +62,13 @@ const NavigationJumpTo = forwardRef( // Emit changes only once const handleOnChange = useCallback( - (value: number) => { + ( + value: number, + event: React.SyntheticEvent, + type: "click" | "scroll" + ) => { if (value !== emittedValue) { - onChange?.(value); + onChange?.(value, event, type); setEmittedValue(value); } }, @@ -92,7 +102,7 @@ const NavigationJumpTo = forwardRef( setFirstTabIndexInview(newValue); // Invoke the custom onChange prop - handleOnChange(newValue); + handleOnChange(newValue, event, "click"); }; // Observe changes in the sectionIsInView object to update the tabs value @@ -110,9 +120,16 @@ const NavigationJumpTo = forwardRef( setFirstTabIndexInview(sectionInView); // Invoke the custom onChange prop - handleOnChange(sectionInView); + handleOnChange( + sectionInView, + { + target: items[sectionInView], + type: "scroll", + } as unknown as React.SyntheticEvent, + "scroll" + ); } - }, [handleOnChange, navItemClicked, sectionIsInView]); + }, [handleOnChange, items, navItemClicked, sectionIsInView]); // Set navItemClicked to false to re-enable the option // to update the tab value based on scroll. From 2c1aff5816484ca1a74fa09407044468324f0490 Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Wed, 27 Nov 2024 17:14:07 -0500 Subject: [PATCH 09/12] fix(variables): fix design token variables --- .../src/common/styles-dictionary/css/variables.css | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css index 0d543fe6e..e50645e81 100644 --- a/packages/components/src/common/styles-dictionary/css/variables.css +++ b/packages/components/src/common/styles-dictionary/css/variables.css @@ -202,10 +202,9 @@ --sds-corner-m: 4px; --sds-corner-s: 2px; --sds-corner-none: 0px; - --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3); - --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15), - 0px 2px 4px 0px rgba(0, 0, 0, 0.15); - --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); + --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); + --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); + --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); --sds-drop-shadow-none: none; --sds-font-font-family-body: "Inter", sans-serif; --sds-font-font-family-body-narrow: "Inter", sans-serif; @@ -581,10 +580,9 @@ --sds-corner-m: 4px; --sds-corner-s: 2px; --sds-corner-none: 0px; - --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3); - --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15), - 0px 2px 4px 0px rgba(0, 0, 0, 0.15); - --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); + --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); + --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); + --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); --sds-drop-shadow-none: none; --sds-font-font-family-body: "Inter", sans-serif; --sds-font-font-family-body-narrow: "Inter", sans-serif; From 61a68bb38b89ed989c5f7a5c102e74991b5432bd Mon Sep 17 00:00:00 2001 From: masoudmanson Date: Wed, 27 Nov 2024 22:15:56 +0000 Subject: [PATCH 10/12] chore(release): publish - @czi-sds/components@21.7.1 - @czi-sds/data-viz@0.10.4 --- packages/components/CHANGELOG.md | 7 +++++++ packages/components/package.json | 2 +- packages/data-viz/CHANGELOG.md | 4 ++++ packages/data-viz/package.json | 2 +- 4 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 0db417e89..a832689fb 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [21.7.1](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.7.0...@czi-sds/components@21.7.1) (2024-11-27) + +### Bug Fixes + +- **inputs:** fix intent prop type ([#899](https://github.com/chanzuckerberg/sci-components/issues/899)) ([064f1b4](https://github.com/chanzuckerberg/sci-components/commit/064f1b46072e26af7fd55af081e9f475d28cf053)) +- **variables:** fix design token variables ([2c1aff5](https://github.com/chanzuckerberg/sci-components/commit/2c1aff5816484ca1a74fa09407044468324f0490)) + # [21.7.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.6.3...@czi-sds/components@21.7.0) (2024-11-14) ### Bug Fixes diff --git a/packages/components/package.json b/packages/components/package.json index 2a85f280e..173a7fbfc 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@czi-sds/components", - "version": "21.7.0", + "version": "21.7.1", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", "types": "dist/index.cjs.d.ts", diff --git a/packages/data-viz/CHANGELOG.md b/packages/data-viz/CHANGELOG.md index faab9a02b..2a7f54c1b 100644 --- a/packages/data-viz/CHANGELOG.md +++ b/packages/data-viz/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.10.4](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/data-viz@0.10.3...@czi-sds/data-viz@0.10.4) (2024-11-27) + +**Note:** Version bump only for package @czi-sds/data-viz + ## [0.10.3](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/data-viz@0.10.2...@czi-sds/data-viz@0.10.3) (2024-10-30) **Note:** Version bump only for package @czi-sds/data-viz diff --git a/packages/data-viz/package.json b/packages/data-viz/package.json index 7d43af3f5..baa77902d 100644 --- a/packages/data-viz/package.json +++ b/packages/data-viz/package.json @@ -1,6 +1,6 @@ { "name": "@czi-sds/data-viz", - "version": "0.10.3", + "version": "0.10.4", "main": "dist/index.cjs.js", "types": "dist/index.cjs.d.ts", "module": "dist/index.esm.js", From 9fcc5256f5e12635416b5e0c42ebfc3771a1a920 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 27 Nov 2024 17:22:39 -0500 Subject: [PATCH 11/12] chore(release): Merge prod into main (#912) * chore(release): publish - @czi-sds/components@21.5.0 * chore(release): publish - @czi-sds/components@21.6.0 - @czi-sds/data-viz@0.10.2 * chore(release): publish - @czi-sds/components@21.6.1 * chore(release): publish - @czi-sds/components@21.6.2 - @czi-sds/data-viz@0.10.3 * chore(release): publish - @czi-sds/components@21.6.3 * fix(build): build new css vvariables * chore(release): publish - @czi-sds/components@21.7.0 * fix(variables): fix design token variables * chore(release): publish - @czi-sds/components@21.7.1 - @czi-sds/data-viz@0.10.4 --------- Co-authored-by: masoudmanson Co-authored-by: Masoud Amjadi --- packages/components/CHANGELOG.md | 7 +++++++ packages/components/package.json | 2 +- .../src/common/styles-dictionary/css/variables.css | 14 ++++++-------- packages/data-viz/CHANGELOG.md | 4 ++++ packages/data-viz/package.json | 2 +- 5 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 0db417e89..a832689fb 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [21.7.1](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.7.0...@czi-sds/components@21.7.1) (2024-11-27) + +### Bug Fixes + +- **inputs:** fix intent prop type ([#899](https://github.com/chanzuckerberg/sci-components/issues/899)) ([064f1b4](https://github.com/chanzuckerberg/sci-components/commit/064f1b46072e26af7fd55af081e9f475d28cf053)) +- **variables:** fix design token variables ([2c1aff5](https://github.com/chanzuckerberg/sci-components/commit/2c1aff5816484ca1a74fa09407044468324f0490)) + # [21.7.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.6.3...@czi-sds/components@21.7.0) (2024-11-14) ### Bug Fixes diff --git a/packages/components/package.json b/packages/components/package.json index 2a85f280e..173a7fbfc 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@czi-sds/components", - "version": "21.7.0", + "version": "21.7.1", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", "types": "dist/index.cjs.d.ts", diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css index 0d543fe6e..e50645e81 100644 --- a/packages/components/src/common/styles-dictionary/css/variables.css +++ b/packages/components/src/common/styles-dictionary/css/variables.css @@ -202,10 +202,9 @@ --sds-corner-m: 4px; --sds-corner-s: 2px; --sds-corner-none: 0px; - --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3); - --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15), - 0px 2px 4px 0px rgba(0, 0, 0, 0.15); - --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); + --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); + --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); + --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); --sds-drop-shadow-none: none; --sds-font-font-family-body: "Inter", sans-serif; --sds-font-font-family-body-narrow: "Inter", sans-serif; @@ -581,10 +580,9 @@ --sds-corner-m: 4px; --sds-corner-s: 2px; --sds-corner-none: 0px; - --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3); - --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15), - 0px 2px 4px 0px rgba(0, 0, 0, 0.15); - --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); + --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); + --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); + --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); --sds-drop-shadow-none: none; --sds-font-font-family-body: "Inter", sans-serif; --sds-font-font-family-body-narrow: "Inter", sans-serif; diff --git a/packages/data-viz/CHANGELOG.md b/packages/data-viz/CHANGELOG.md index faab9a02b..2a7f54c1b 100644 --- a/packages/data-viz/CHANGELOG.md +++ b/packages/data-viz/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.10.4](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/data-viz@0.10.3...@czi-sds/data-viz@0.10.4) (2024-11-27) + +**Note:** Version bump only for package @czi-sds/data-viz + ## [0.10.3](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/data-viz@0.10.2...@czi-sds/data-viz@0.10.3) (2024-10-30) **Note:** Version bump only for package @czi-sds/data-viz diff --git a/packages/data-viz/package.json b/packages/data-viz/package.json index 7d43af3f5..baa77902d 100644 --- a/packages/data-viz/package.json +++ b/packages/data-viz/package.json @@ -1,6 +1,6 @@ { "name": "@czi-sds/data-viz", - "version": "0.10.3", + "version": "0.10.4", "main": "dist/index.cjs.js", "types": "dist/index.cjs.d.ts", "module": "dist/index.esm.js", From cc895e8a8d3f625af05f4b6a32456282c90d1af5 Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Wed, 4 Dec 2024 16:00:47 -0500 Subject: [PATCH 12/12] fix(tailwind): new typography config for tailwind to use with typography plugin + fixed font vars (#914) BREAKING CHANGE: More info on this can be found in the ZeroHeight docs under Tailwind configuration. --- .../custom-formatters/tailwindFormatter.mjs | 123 +- .../styles-dictionary/json/tailwind.json | 1284 ++++++++++++++--- 2 files changed, 1131 insertions(+), 276 deletions(-) diff --git a/packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs b/packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs index 363f7f618..8f955703c 100644 --- a/packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs +++ b/packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs @@ -88,55 +88,84 @@ function transformIconSizes(tokens, options = {}) { } function transformFonts(tokens, keys, options = {}) { - const fontSize = { narrow: {}, wide: {} }; - const lineHeight = { narrow: {}, wide: {} }; - const letterSpacing = { narrow: {}, wide: {} }; - const fontVariantNumeric = { narrow: {}, wide: {} }; - const textTransform = { narrow: {}, wide: {} }; - - const TEXT_TRANSFORM = "text-transform"; - const FONT_VARIANT_NUMERIC = "font-variant-numeric"; - - function makeFontValue(fontValue, name) { - const parsedWideFont = cssFont.parse(fontValue.font.value); - const parsedNarrowFont = cssFont.parse(fontValue.font.narrowValue); - - // Wide Style Fonts - fontSize.wide[name] = parsedWideFont.size; - lineHeight.wide[name] = parsedWideFont.size; - letterSpacing.wide[name] = fontValue["letter-spacing"].value; - textTransform.wide[name] = fontValue[TEXT_TRANSFORM] - ? fontValue[TEXT_TRANSFORM].value - : "none"; - fontVariantNumeric.wide[name] = fontValue[FONT_VARIANT_NUMERIC] - ? fontValue[FONT_VARIANT_NUMERIC].value - : "normal"; - - // Narrow Style Fonts - fontSize.narrow[name] = parsedNarrowFont.size; - lineHeight.narrow[name] = parsedNarrowFont.size; - letterSpacing.narrow[name] = fontValue["letter-spacing"].narrowValue; - textTransform.narrow[name] = fontValue[TEXT_TRANSFORM] - ? fontValue[TEXT_TRANSFORM].narrowValue - : "none"; - fontVariantNumeric.narrow[name] = fontValue[FONT_VARIANT_NUMERIC] - ? fontValue[FONT_VARIANT_NUMERIC].narrowValue - : "normal"; - } + /** + * (masoudmanson): This will be used for generating the font + * specific tailwind config. + */ + const fontData = { + fontSize: {}, + fontVariantNumeric: {}, + letterSpacing: {}, + lineHeight: {}, + textTransform: {}, + }; - for (const key of keys) { - for (const [size, fonts] of Object.entries(tokens[key])) { - for (const [, fontValue] of Object.entries(fonts)) { - makeFontValue(fontValue, getName([key, size], options)); - } - } - } + /** + * (masoudmanson): Generates a typography object compatible with Tailwind's typography plugin. + * Example usage in a Tailwind config file: + * + * const typography = require('@tailwindcss/typography') + * const sdsTailwindConfig = require("@czi-sds/components/dist/tailwind.json"); + * + * module.exports = { + * mode: 'jit', + * content: [...], + * theme: { + * extend: { + * ...sdsTailwindConfig + * } + * }, + * plugins: [typography], + *} + * + * And it can be used in the html like: + * + *

...

+ */ + const typography = {}; + + keys.forEach((key) => { + Object.entries(tokens[key]).forEach(([size, fontVariants]) => { + Object.entries(fontVariants).forEach(([_, fontValue]) => { + const name = getName([key, size], options); + addFontData(typography, fontData, fontValue, name); + }); + }); + }); return { - fontSize, - fontVariantNumeric, - letterSpacing, - lineHeight, - textTransform, + ...fontData, + typography, }; } + +function addFontData(typography, data, fontValue, name) { + const fontTypes = { + narrow: cssFont.parse(fontValue.font.narrowValue), + wide: cssFont.parse(fontValue.font.value), + }; + + Object.entries(fontTypes).forEach(([type, parsedFont]) => { + const key = `${name}-${parsedFont.weight}-${type}`; + const sharedStyles = { + fontFamily: parsedFont.family.join(", "), + fontSize: parsedFont.size, + fontStyle: parsedFont.style, + fontVariantNumeric: fontValue["font-variant-numeric"]?.value || "normal", + fontWeight: parsedFont.weight, + letterSpacing: fontValue["letter-spacing"].value || "0px", + lineHeight: parsedFont.lineHeight, + textTransform: fontValue["text-transform"]?.value || "none", + }; + + // Add to typography + typography[key] = { css: sharedStyles }; + + // Add to font data + data.fontSize[key] = parsedFont.size; + data.lineHeight[key] = parsedFont.lineHeight; + data.letterSpacing[key] = sharedStyles.letterSpacing; + data.textTransform[key] = sharedStyles.textTransform; + data.fontVariantNumeric[key] = sharedStyles.fontVariantNumeric; + }); +} diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json index 7b0d7bea7..78ea0a0d4 100644 --- a/packages/components/src/common/styles-dictionary/json/tailwind.json +++ b/packages/components/src/common/styles-dictionary/json/tailwind.json @@ -7,243 +7,1069 @@ "sds-tabular": "\"Inter\", sans-serif" }, "fontSize": { - "narrow": { - "sds-body-xxxs": "12px", - "sds-body-xxs": "12px", - "sds-body-xs": "13px", - "sds-body-s": "14px", - "sds-body-m": "14px", - "sds-body-l": "16px", - "sds-caps-xxxxs": "11px", - "sds-caps-xxxs": "11px", - "sds-caps-xxs": "12px", - "sds-header-xxxs": "12px", - "sds-header-xxs": "12px", - "sds-header-xs": "13px", - "sds-header-s": "14px", - "sds-header-m": "14px", - "sds-header-l": "16px", - "sds-header-xl": "18px", - "sds-header-xxl": "22px", - "sds-tabular-xs": "13px", - "sds-tabular-s": "14px", - "sds-code-xs": "13px", - "sds-code-s": "14px" - }, - "wide": { - "sds-body-xxxs": "11px", - "sds-body-xxs": "12px", - "sds-body-xs": "13px", - "sds-body-s": "14px", - "sds-body-m": "16px", - "sds-body-l": "18px", - "sds-caps-xxxxs": "10px", - "sds-caps-xxxs": "11px", - "sds-caps-xxs": "12px", - "sds-header-xxxs": "11px", - "sds-header-xxs": "12px", - "sds-header-xs": "13px", - "sds-header-s": "14px", - "sds-header-m": "16px", - "sds-header-l": "18px", - "sds-header-xl": "22px", - "sds-header-xxl": "26px", - "sds-tabular-xs": "13px", - "sds-tabular-s": "14px", - "sds-code-xs": "13px", - "sds-code-s": "14px" - } + "sds-body-xxxs-400-narrow": "12px", + "sds-body-xxxs-400-wide": "11px", + "sds-body-xxxs-600-narrow": "12px", + "sds-body-xxxs-600-wide": "11px", + "sds-body-xxs-400-narrow": "12px", + "sds-body-xxs-400-wide": "12px", + "sds-body-xxs-600-narrow": "12px", + "sds-body-xxs-600-wide": "12px", + "sds-body-xs-400-narrow": "13px", + "sds-body-xs-400-wide": "13px", + "sds-body-xs-600-narrow": "13px", + "sds-body-xs-600-wide": "13px", + "sds-body-s-400-narrow": "14px", + "sds-body-s-400-wide": "14px", + "sds-body-s-600-narrow": "14px", + "sds-body-s-600-wide": "14px", + "sds-body-m-400-narrow": "14px", + "sds-body-m-400-wide": "16px", + "sds-body-m-600-narrow": "14px", + "sds-body-m-600-wide": "16px", + "sds-body-l-400-narrow": "16px", + "sds-body-l-400-wide": "18px", + "sds-body-l-600-narrow": "16px", + "sds-body-l-600-wide": "18px", + "sds-caps-xxxxs-600-narrow": "11px", + "sds-caps-xxxxs-600-wide": "10px", + "sds-caps-xxxs-600-narrow": "11px", + "sds-caps-xxxs-600-wide": "11px", + "sds-caps-xxs-600-narrow": "12px", + "sds-caps-xxs-600-wide": "12px", + "sds-header-xxxs-600-narrow": "12px", + "sds-header-xxxs-600-wide": "11px", + "sds-header-xxs-600-narrow": "12px", + "sds-header-xxs-600-wide": "12px", + "sds-header-xs-600-narrow": "13px", + "sds-header-xs-600-wide": "13px", + "sds-header-s-600-narrow": "14px", + "sds-header-s-600-wide": "14px", + "sds-header-m-600-narrow": "14px", + "sds-header-m-600-wide": "16px", + "sds-header-l-600-narrow": "16px", + "sds-header-l-600-wide": "18px", + "sds-header-xl-600-narrow": "18px", + "sds-header-xl-600-wide": "22px", + "sds-header-xxl-600-narrow": "22px", + "sds-header-xxl-600-wide": "26px", + "sds-tabular-xs-400-narrow": "13px", + "sds-tabular-xs-400-wide": "13px", + "sds-tabular-xs-600-narrow": "13px", + "sds-tabular-xs-600-wide": "13px", + "sds-tabular-s-400-narrow": "14px", + "sds-tabular-s-400-wide": "14px", + "sds-tabular-s-600-narrow": "14px", + "sds-tabular-s-600-wide": "14px", + "sds-code-xs-400-narrow": "13px", + "sds-code-xs-400-wide": "13px", + "sds-code-xs-600-narrow": "13px", + "sds-code-xs-600-wide": "13px", + "sds-code-s-400-narrow": "14px", + "sds-code-s-400-wide": "14px", + "sds-code-s-600-narrow": "14px", + "sds-code-s-600-wide": "14px" }, "fontVariantNumeric": { - "narrow": { - "sds-body-xxxs": "normal", - "sds-body-xxs": "normal", - "sds-body-xs": "normal", - "sds-body-s": "normal", - "sds-body-m": "normal", - "sds-body-l": "normal", - "sds-caps-xxxxs": "normal", - "sds-caps-xxxs": "normal", - "sds-caps-xxs": "normal", - "sds-header-xxxs": "normal", - "sds-header-xxs": "normal", - "sds-header-xs": "normal", - "sds-header-s": "normal", - "sds-header-m": "normal", - "sds-header-l": "normal", - "sds-header-xl": "normal", - "sds-header-xxl": "normal", - "sds-tabular-xs": "tabular-nums", - "sds-tabular-s": "tabular-nums", - "sds-code-xs": "normal", - "sds-code-s": "normal" - }, - "wide": { - "sds-body-xxxs": "normal", - "sds-body-xxs": "normal", - "sds-body-xs": "normal", - "sds-body-s": "normal", - "sds-body-m": "normal", - "sds-body-l": "normal", - "sds-caps-xxxxs": "normal", - "sds-caps-xxxs": "normal", - "sds-caps-xxs": "normal", - "sds-header-xxxs": "normal", - "sds-header-xxs": "normal", - "sds-header-xs": "normal", - "sds-header-s": "normal", - "sds-header-m": "normal", - "sds-header-l": "normal", - "sds-header-xl": "normal", - "sds-header-xxl": "normal", - "sds-tabular-xs": "tabular-nums", - "sds-tabular-s": "tabular-nums", - "sds-code-xs": "normal", - "sds-code-s": "normal" - } + "sds-body-xxxs-400-narrow": "normal", + "sds-body-xxxs-400-wide": "normal", + "sds-body-xxxs-600-narrow": "normal", + "sds-body-xxxs-600-wide": "normal", + "sds-body-xxs-400-narrow": "normal", + "sds-body-xxs-400-wide": "normal", + "sds-body-xxs-600-narrow": "normal", + "sds-body-xxs-600-wide": "normal", + "sds-body-xs-400-narrow": "normal", + "sds-body-xs-400-wide": "normal", + "sds-body-xs-600-narrow": "normal", + "sds-body-xs-600-wide": "normal", + "sds-body-s-400-narrow": "normal", + "sds-body-s-400-wide": "normal", + "sds-body-s-600-narrow": "normal", + "sds-body-s-600-wide": "normal", + "sds-body-m-400-narrow": "normal", + "sds-body-m-400-wide": "normal", + "sds-body-m-600-narrow": "normal", + "sds-body-m-600-wide": "normal", + "sds-body-l-400-narrow": "normal", + "sds-body-l-400-wide": "normal", + "sds-body-l-600-narrow": "normal", + "sds-body-l-600-wide": "normal", + "sds-caps-xxxxs-600-narrow": "normal", + "sds-caps-xxxxs-600-wide": "normal", + "sds-caps-xxxs-600-narrow": "normal", + "sds-caps-xxxs-600-wide": "normal", + "sds-caps-xxs-600-narrow": "normal", + "sds-caps-xxs-600-wide": "normal", + "sds-header-xxxs-600-narrow": "normal", + "sds-header-xxxs-600-wide": "normal", + "sds-header-xxs-600-narrow": "normal", + "sds-header-xxs-600-wide": "normal", + "sds-header-xs-600-narrow": "normal", + "sds-header-xs-600-wide": "normal", + "sds-header-s-600-narrow": "normal", + "sds-header-s-600-wide": "normal", + "sds-header-m-600-narrow": "normal", + "sds-header-m-600-wide": "normal", + "sds-header-l-600-narrow": "normal", + "sds-header-l-600-wide": "normal", + "sds-header-xl-600-narrow": "normal", + "sds-header-xl-600-wide": "normal", + "sds-header-xxl-600-narrow": "normal", + "sds-header-xxl-600-wide": "normal", + "sds-tabular-xs-400-narrow": "tabular-nums", + "sds-tabular-xs-400-wide": "tabular-nums", + "sds-tabular-xs-600-narrow": "tabular-nums", + "sds-tabular-xs-600-wide": "tabular-nums", + "sds-tabular-s-400-narrow": "tabular-nums", + "sds-tabular-s-400-wide": "tabular-nums", + "sds-tabular-s-600-narrow": "tabular-nums", + "sds-tabular-s-600-wide": "tabular-nums", + "sds-code-xs-400-narrow": "normal", + "sds-code-xs-400-wide": "normal", + "sds-code-xs-600-narrow": "normal", + "sds-code-xs-600-wide": "normal", + "sds-code-s-400-narrow": "normal", + "sds-code-s-400-wide": "normal", + "sds-code-s-600-narrow": "normal", + "sds-code-s-600-wide": "normal" }, "letterSpacing": { - "narrow": { - "sds-body-xxxs": "0.1px", - "sds-body-xxs": "0.1px", - "sds-body-xs": "0.08px", - "sds-body-s": "0.08px", - "sds-body-m": "0px", - "sds-body-l": "0px", - "sds-caps-xxxxs": "0.5px", - "sds-caps-xxxs": "0.5px", - "sds-caps-xxs": "0.5px", - "sds-header-xxxs": "0.1px", - "sds-header-xxs": "0.1px", - "sds-header-xs": "0.08px", - "sds-header-s": "0.08px", - "sds-header-m": "0.08px", - "sds-header-l": "0px", - "sds-header-xl": "0px", - "sds-header-xxl": "0px", - "sds-tabular-xs": "0px", - "sds-tabular-s": "0px", - "sds-code-xs": "0px", - "sds-code-s": "0px" - }, - "wide": { - "sds-body-xxxs": "0.1px", - "sds-body-xxs": "0.1px", - "sds-body-xs": "0.08px", - "sds-body-s": "0.08px", - "sds-body-m": "0px", - "sds-body-l": "0px", - "sds-caps-xxxxs": "0.5px", - "sds-caps-xxxs": "0.5px", - "sds-caps-xxs": "0.5px", - "sds-header-xxxs": "0.1px", - "sds-header-xxs": "0.1px", - "sds-header-xs": "0.08px", - "sds-header-s": "0.08px", - "sds-header-m": "0px", - "sds-header-l": "0px", - "sds-header-xl": "0px", - "sds-header-xxl": "0px", - "sds-tabular-xs": "0px", - "sds-tabular-s": "0px", - "sds-code-xs": "0px", - "sds-code-s": "0px" - } + "sds-body-xxxs-400-narrow": "0.1px", + "sds-body-xxxs-400-wide": "0.1px", + "sds-body-xxxs-600-narrow": "0.1px", + "sds-body-xxxs-600-wide": "0.1px", + "sds-body-xxs-400-narrow": "0.1px", + "sds-body-xxs-400-wide": "0.1px", + "sds-body-xxs-600-narrow": "0.1px", + "sds-body-xxs-600-wide": "0.1px", + "sds-body-xs-400-narrow": "0.08px", + "sds-body-xs-400-wide": "0.08px", + "sds-body-xs-600-narrow": "0.08px", + "sds-body-xs-600-wide": "0.08px", + "sds-body-s-400-narrow": "0.08px", + "sds-body-s-400-wide": "0.08px", + "sds-body-s-600-narrow": "0.08px", + "sds-body-s-600-wide": "0.08px", + "sds-body-m-400-narrow": "0px", + "sds-body-m-400-wide": "0px", + "sds-body-m-600-narrow": "0px", + "sds-body-m-600-wide": "0px", + "sds-body-l-400-narrow": "0px", + "sds-body-l-400-wide": "0px", + "sds-body-l-600-narrow": "0px", + "sds-body-l-600-wide": "0px", + "sds-caps-xxxxs-600-narrow": "0.5px", + "sds-caps-xxxxs-600-wide": "0.5px", + "sds-caps-xxxs-600-narrow": "0.5px", + "sds-caps-xxxs-600-wide": "0.5px", + "sds-caps-xxs-600-narrow": "0.5px", + "sds-caps-xxs-600-wide": "0.5px", + "sds-header-xxxs-600-narrow": "0.1px", + "sds-header-xxxs-600-wide": "0.1px", + "sds-header-xxs-600-narrow": "0.1px", + "sds-header-xxs-600-wide": "0.1px", + "sds-header-xs-600-narrow": "0.08px", + "sds-header-xs-600-wide": "0.08px", + "sds-header-s-600-narrow": "0.08px", + "sds-header-s-600-wide": "0.08px", + "sds-header-m-600-narrow": "0px", + "sds-header-m-600-wide": "0px", + "sds-header-l-600-narrow": "0px", + "sds-header-l-600-wide": "0px", + "sds-header-xl-600-narrow": "0px", + "sds-header-xl-600-wide": "0px", + "sds-header-xxl-600-narrow": "0px", + "sds-header-xxl-600-wide": "0px", + "sds-tabular-xs-400-narrow": "0px", + "sds-tabular-xs-400-wide": "0px", + "sds-tabular-xs-600-narrow": "0px", + "sds-tabular-xs-600-wide": "0px", + "sds-tabular-s-400-narrow": "0px", + "sds-tabular-s-400-wide": "0px", + "sds-tabular-s-600-narrow": "0px", + "sds-tabular-s-600-wide": "0px", + "sds-code-xs-400-narrow": "0px", + "sds-code-xs-400-wide": "0px", + "sds-code-xs-600-narrow": "0px", + "sds-code-xs-600-wide": "0px", + "sds-code-s-400-narrow": "0px", + "sds-code-s-400-wide": "0px", + "sds-code-s-600-narrow": "0px", + "sds-code-s-600-wide": "0px" }, "lineHeight": { - "narrow": { - "sds-body-xxxs": "12px", - "sds-body-xxs": "12px", - "sds-body-xs": "13px", - "sds-body-s": "14px", - "sds-body-m": "14px", - "sds-body-l": "16px", - "sds-caps-xxxxs": "11px", - "sds-caps-xxxs": "11px", - "sds-caps-xxs": "12px", - "sds-header-xxxs": "12px", - "sds-header-xxs": "12px", - "sds-header-xs": "13px", - "sds-header-s": "14px", - "sds-header-m": "14px", - "sds-header-l": "16px", - "sds-header-xl": "18px", - "sds-header-xxl": "22px", - "sds-tabular-xs": "13px", - "sds-tabular-s": "14px", - "sds-code-xs": "13px", - "sds-code-s": "14px" - }, - "wide": { - "sds-body-xxxs": "11px", - "sds-body-xxs": "12px", - "sds-body-xs": "13px", - "sds-body-s": "14px", - "sds-body-m": "16px", - "sds-body-l": "18px", - "sds-caps-xxxxs": "10px", - "sds-caps-xxxs": "11px", - "sds-caps-xxs": "12px", - "sds-header-xxxs": "11px", - "sds-header-xxs": "12px", - "sds-header-xs": "13px", - "sds-header-s": "14px", - "sds-header-m": "16px", - "sds-header-l": "18px", - "sds-header-xl": "22px", - "sds-header-xxl": "26px", - "sds-tabular-xs": "13px", - "sds-tabular-s": "14px", - "sds-code-xs": "13px", - "sds-code-s": "14px" - } + "sds-body-xxxs-400-narrow": "18px", + "sds-body-xxxs-400-wide": "16px", + "sds-body-xxxs-600-narrow": "18px", + "sds-body-xxxs-600-wide": "16px", + "sds-body-xxs-400-narrow": "18px", + "sds-body-xxs-400-wide": "18px", + "sds-body-xxs-600-narrow": "18px", + "sds-body-xxs-600-wide": "18px", + "sds-body-xs-400-narrow": "20px", + "sds-body-xs-400-wide": "20px", + "sds-body-xs-600-narrow": "20px", + "sds-body-xs-600-wide": "20px", + "sds-body-s-400-narrow": "24px", + "sds-body-s-400-wide": "24px", + "sds-body-s-600-narrow": "24px", + "sds-body-s-600-wide": "24px", + "sds-body-m-400-narrow": "24px", + "sds-body-m-400-wide": "26px", + "sds-body-m-600-narrow": "24px", + "sds-body-m-600-wide": "26px", + "sds-body-l-400-narrow": "26px", + "sds-body-l-400-wide": "28px", + "sds-body-l-600-narrow": "26px", + "sds-body-l-600-wide": "28px", + "sds-caps-xxxxs-600-narrow": "16px", + "sds-caps-xxxxs-600-wide": "14px", + "sds-caps-xxxs-600-narrow": "16px", + "sds-caps-xxxs-600-wide": "16px", + "sds-caps-xxs-600-narrow": "18px", + "sds-caps-xxs-600-wide": "18px", + "sds-header-xxxs-600-narrow": "18px", + "sds-header-xxxs-600-wide": "16px", + "sds-header-xxs-600-narrow": "18px", + "sds-header-xxs-600-wide": "18px", + "sds-header-xs-600-narrow": "18px", + "sds-header-xs-600-wide": "18px", + "sds-header-s-600-narrow": "20px", + "sds-header-s-600-wide": "20px", + "sds-header-m-600-narrow": "20px", + "sds-header-m-600-wide": "22px", + "sds-header-l-600-narrow": "22px", + "sds-header-l-600-wide": "24px", + "sds-header-xl-600-narrow": "24px", + "sds-header-xl-600-wide": "30px", + "sds-header-xxl-600-narrow": "30px", + "sds-header-xxl-600-wide": "34px", + "sds-tabular-xs-400-narrow": "20px", + "sds-tabular-xs-400-wide": "20px", + "sds-tabular-xs-600-narrow": "20px", + "sds-tabular-xs-600-wide": "20px", + "sds-tabular-s-400-narrow": "24px", + "sds-tabular-s-400-wide": "24px", + "sds-tabular-s-600-narrow": "24px", + "sds-tabular-s-600-wide": "24px", + "sds-code-xs-400-narrow": "20px", + "sds-code-xs-400-wide": "20px", + "sds-code-xs-600-narrow": "20px", + "sds-code-xs-600-wide": "20px", + "sds-code-s-400-narrow": "24px", + "sds-code-s-400-wide": "24px", + "sds-code-s-600-narrow": "24px", + "sds-code-s-600-wide": "24px" }, "textTransform": { - "narrow": { - "sds-body-xxxs": "none", - "sds-body-xxs": "none", - "sds-body-xs": "none", - "sds-body-s": "none", - "sds-body-m": "none", - "sds-body-l": "none", - "sds-caps-xxxxs": "uppercase", - "sds-caps-xxxs": "uppercase", - "sds-caps-xxs": "uppercase", - "sds-header-xxxs": "none", - "sds-header-xxs": "none", - "sds-header-xs": "none", - "sds-header-s": "none", - "sds-header-m": "none", - "sds-header-l": "none", - "sds-header-xl": "none", - "sds-header-xxl": "none", - "sds-tabular-xs": "none", - "sds-tabular-s": "none", - "sds-code-xs": "none", - "sds-code-s": "none" - }, - "wide": { - "sds-body-xxxs": "none", - "sds-body-xxs": "none", - "sds-body-xs": "none", - "sds-body-s": "none", - "sds-body-m": "none", - "sds-body-l": "none", - "sds-caps-xxxxs": "uppercase", - "sds-caps-xxxs": "uppercase", - "sds-caps-xxs": "uppercase", - "sds-header-xxxs": "none", - "sds-header-xxs": "none", - "sds-header-xs": "none", - "sds-header-s": "none", - "sds-header-m": "none", - "sds-header-l": "none", - "sds-header-xl": "none", - "sds-header-xxl": "none", - "sds-tabular-xs": "none", - "sds-tabular-s": "none", - "sds-code-xs": "none", - "sds-code-s": "none" + "sds-body-xxxs-400-narrow": "none", + "sds-body-xxxs-400-wide": "none", + "sds-body-xxxs-600-narrow": "none", + "sds-body-xxxs-600-wide": "none", + "sds-body-xxs-400-narrow": "none", + "sds-body-xxs-400-wide": "none", + "sds-body-xxs-600-narrow": "none", + "sds-body-xxs-600-wide": "none", + "sds-body-xs-400-narrow": "none", + "sds-body-xs-400-wide": "none", + "sds-body-xs-600-narrow": "none", + "sds-body-xs-600-wide": "none", + "sds-body-s-400-narrow": "none", + "sds-body-s-400-wide": "none", + "sds-body-s-600-narrow": "none", + "sds-body-s-600-wide": "none", + "sds-body-m-400-narrow": "none", + "sds-body-m-400-wide": "none", + "sds-body-m-600-narrow": "none", + "sds-body-m-600-wide": "none", + "sds-body-l-400-narrow": "none", + "sds-body-l-400-wide": "none", + "sds-body-l-600-narrow": "none", + "sds-body-l-600-wide": "none", + "sds-caps-xxxxs-600-narrow": "uppercase", + "sds-caps-xxxxs-600-wide": "uppercase", + "sds-caps-xxxs-600-narrow": "uppercase", + "sds-caps-xxxs-600-wide": "uppercase", + "sds-caps-xxs-600-narrow": "uppercase", + "sds-caps-xxs-600-wide": "uppercase", + "sds-header-xxxs-600-narrow": "none", + "sds-header-xxxs-600-wide": "none", + "sds-header-xxs-600-narrow": "none", + "sds-header-xxs-600-wide": "none", + "sds-header-xs-600-narrow": "none", + "sds-header-xs-600-wide": "none", + "sds-header-s-600-narrow": "none", + "sds-header-s-600-wide": "none", + "sds-header-m-600-narrow": "none", + "sds-header-m-600-wide": "none", + "sds-header-l-600-narrow": "none", + "sds-header-l-600-wide": "none", + "sds-header-xl-600-narrow": "none", + "sds-header-xl-600-wide": "none", + "sds-header-xxl-600-narrow": "none", + "sds-header-xxl-600-wide": "none", + "sds-tabular-xs-400-narrow": "none", + "sds-tabular-xs-400-wide": "none", + "sds-tabular-xs-600-narrow": "none", + "sds-tabular-xs-600-wide": "none", + "sds-tabular-s-400-narrow": "none", + "sds-tabular-s-400-wide": "none", + "sds-tabular-s-600-narrow": "none", + "sds-tabular-s-600-wide": "none", + "sds-code-xs-400-narrow": "none", + "sds-code-xs-400-wide": "none", + "sds-code-xs-600-narrow": "none", + "sds-code-xs-600-wide": "none", + "sds-code-s-400-narrow": "none", + "sds-code-s-400-wide": "none", + "sds-code-s-600-narrow": "none", + "sds-code-s-600-wide": "none" + }, + "typography": { + "sds-body-xxxs-400-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "12px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "400", + "letterSpacing": "0.1px", + "lineHeight": "18px", + "textTransform": "none" + } + }, + "sds-body-xxxs-400-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "11px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "400", + "letterSpacing": "0.1px", + "lineHeight": "16px", + "textTransform": "none" + } + }, + "sds-body-xxxs-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "12px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.1px", + "lineHeight": "18px", + "textTransform": "none" + } + }, + "sds-body-xxxs-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "11px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.1px", + "lineHeight": "16px", + "textTransform": "none" + } + }, + "sds-body-xxs-400-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "12px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "400", + "letterSpacing": "0.1px", + "lineHeight": "18px", + "textTransform": "none" + } + }, + "sds-body-xxs-400-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "12px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "400", + "letterSpacing": "0.1px", + "lineHeight": "18px", + "textTransform": "none" + } + }, + "sds-body-xxs-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "12px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.1px", + "lineHeight": "18px", + "textTransform": "none" + } + }, + "sds-body-xxs-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "12px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.1px", + "lineHeight": "18px", + "textTransform": "none" + } + }, + "sds-body-xs-400-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "13px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "400", + "letterSpacing": "0.08px", + "lineHeight": "20px", + "textTransform": "none" + } + }, + "sds-body-xs-400-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "13px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "400", + "letterSpacing": "0.08px", + "lineHeight": "20px", + "textTransform": "none" + } + }, + "sds-body-xs-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "13px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.08px", + "lineHeight": "20px", + "textTransform": "none" + } + }, + "sds-body-xs-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "13px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.08px", + "lineHeight": "20px", + "textTransform": "none" + } + }, + "sds-body-s-400-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "400", + "letterSpacing": "0.08px", + "lineHeight": "24px", + "textTransform": "none" + } + }, + "sds-body-s-400-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "400", + "letterSpacing": "0.08px", + "lineHeight": "24px", + "textTransform": "none" + } + }, + "sds-body-s-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.08px", + "lineHeight": "24px", + "textTransform": "none" + } + }, + "sds-body-s-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.08px", + "lineHeight": "24px", + "textTransform": "none" + } + }, + "sds-body-m-400-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "400", + "letterSpacing": "0px", + "lineHeight": "24px", + "textTransform": "none" + } + }, + "sds-body-m-400-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "16px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "400", + "letterSpacing": "0px", + "lineHeight": "26px", + "textTransform": "none" + } + }, + "sds-body-m-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "24px", + "textTransform": "none" + } + }, + "sds-body-m-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "16px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "26px", + "textTransform": "none" + } + }, + "sds-body-l-400-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "16px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "400", + "letterSpacing": "0px", + "lineHeight": "26px", + "textTransform": "none" + } + }, + "sds-body-l-400-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "18px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "400", + "letterSpacing": "0px", + "lineHeight": "28px", + "textTransform": "none" + } + }, + "sds-body-l-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "16px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "26px", + "textTransform": "none" + } + }, + "sds-body-l-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "18px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "28px", + "textTransform": "none" + } + }, + "sds-caps-xxxxs-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "11px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.5px", + "lineHeight": "16px", + "textTransform": "uppercase" + } + }, + "sds-caps-xxxxs-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "10px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.5px", + "lineHeight": "14px", + "textTransform": "uppercase" + } + }, + "sds-caps-xxxs-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "11px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.5px", + "lineHeight": "16px", + "textTransform": "uppercase" + } + }, + "sds-caps-xxxs-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "11px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.5px", + "lineHeight": "16px", + "textTransform": "uppercase" + } + }, + "sds-caps-xxs-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "12px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.5px", + "lineHeight": "18px", + "textTransform": "uppercase" + } + }, + "sds-caps-xxs-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "12px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.5px", + "lineHeight": "18px", + "textTransform": "uppercase" + } + }, + "sds-header-xxxs-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "12px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.1px", + "lineHeight": "18px", + "textTransform": "none" + } + }, + "sds-header-xxxs-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "11px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.1px", + "lineHeight": "16px", + "textTransform": "none" + } + }, + "sds-header-xxs-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "12px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.1px", + "lineHeight": "18px", + "textTransform": "none" + } + }, + "sds-header-xxs-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "12px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.1px", + "lineHeight": "18px", + "textTransform": "none" + } + }, + "sds-header-xs-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "13px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.08px", + "lineHeight": "18px", + "textTransform": "none" + } + }, + "sds-header-xs-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "13px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.08px", + "lineHeight": "18px", + "textTransform": "none" + } + }, + "sds-header-s-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.08px", + "lineHeight": "20px", + "textTransform": "none" + } + }, + "sds-header-s-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0.08px", + "lineHeight": "20px", + "textTransform": "none" + } + }, + "sds-header-m-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "20px", + "textTransform": "none" + } + }, + "sds-header-m-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "16px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "22px", + "textTransform": "none" + } + }, + "sds-header-l-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "16px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "22px", + "textTransform": "none" + } + }, + "sds-header-l-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "18px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "24px", + "textTransform": "none" + } + }, + "sds-header-xl-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "18px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "24px", + "textTransform": "none" + } + }, + "sds-header-xl-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "22px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "30px", + "textTransform": "none" + } + }, + "sds-header-xxl-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "22px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "30px", + "textTransform": "none" + } + }, + "sds-header-xxl-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "26px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "34px", + "textTransform": "none" + } + }, + "sds-tabular-xs-400-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "13px", + "fontStyle": "normal", + "fontVariantNumeric": "tabular-nums", + "fontWeight": "400", + "letterSpacing": "0px", + "lineHeight": "20px", + "textTransform": "none" + } + }, + "sds-tabular-xs-400-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "13px", + "fontStyle": "normal", + "fontVariantNumeric": "tabular-nums", + "fontWeight": "400", + "letterSpacing": "0px", + "lineHeight": "20px", + "textTransform": "none" + } + }, + "sds-tabular-xs-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "13px", + "fontStyle": "normal", + "fontVariantNumeric": "tabular-nums", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "20px", + "textTransform": "none" + } + }, + "sds-tabular-xs-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "13px", + "fontStyle": "normal", + "fontVariantNumeric": "tabular-nums", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "20px", + "textTransform": "none" + } + }, + "sds-tabular-s-400-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "tabular-nums", + "fontWeight": "400", + "letterSpacing": "0px", + "lineHeight": "24px", + "textTransform": "none" + } + }, + "sds-tabular-s-400-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "tabular-nums", + "fontWeight": "400", + "letterSpacing": "0px", + "lineHeight": "24px", + "textTransform": "none" + } + }, + "sds-tabular-s-600-narrow": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "tabular-nums", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "24px", + "textTransform": "none" + } + }, + "sds-tabular-s-600-wide": { + "css": { + "fontFamily": "Inter, sans-serif", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "tabular-nums", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "24px", + "textTransform": "none" + } + }, + "sds-code-xs-400-narrow": { + "css": { + "fontFamily": "IBM Plex Mono, monospace", + "fontSize": "13px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "400", + "letterSpacing": "0px", + "lineHeight": "20px", + "textTransform": "none" + } + }, + "sds-code-xs-400-wide": { + "css": { + "fontFamily": "IBM Plex Mono, monospace", + "fontSize": "13px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "400", + "letterSpacing": "0px", + "lineHeight": "20px", + "textTransform": "none" + } + }, + "sds-code-xs-600-narrow": { + "css": { + "fontFamily": "IBM Plex Mono, monospace", + "fontSize": "13px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "20px", + "textTransform": "none" + } + }, + "sds-code-xs-600-wide": { + "css": { + "fontFamily": "IBM Plex Mono, monospace", + "fontSize": "13px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "20px", + "textTransform": "none" + } + }, + "sds-code-s-400-narrow": { + "css": { + "fontFamily": "IBM Plex Mono, monospace", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "400", + "letterSpacing": "0px", + "lineHeight": "24px", + "textTransform": "none" + } + }, + "sds-code-s-400-wide": { + "css": { + "fontFamily": "IBM Plex Mono, monospace", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "400", + "letterSpacing": "0px", + "lineHeight": "24px", + "textTransform": "none" + } + }, + "sds-code-s-600-narrow": { + "css": { + "fontFamily": "IBM Plex Mono, monospace", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "24px", + "textTransform": "none" + } + }, + "sds-code-s-600-wide": { + "css": { + "fontFamily": "IBM Plex Mono, monospace", + "fontSize": "14px", + "fontStyle": "normal", + "fontVariantNumeric": "normal", + "fontWeight": "600", + "letterSpacing": "0px", + "lineHeight": "24px", + "textTransform": "none" + } } }, "height": {