From db371bab2237b82035a227af3d9227926448cb99 Mon Sep 17 00:00:00 2001 From: Carlos Cortizas <97907068+CarlosCortizasCT@users.noreply.github.com> Date: Mon, 12 Feb 2024 18:32:26 +0100 Subject: [PATCH] Remove design legacy plain tokens (#2718) * refactor(design-system): remove legacy plain tokens * chore: changeset added * refactor: remove legacy design tokens usage * refactor: include a new temporary design tokens for inputs height * fix: fix vrts font family styles * refactor: adjust fonts in stories --- .changeset/yellow-ears-remember.md | 5 ++++ design-system/materials/custom-properties.css | 11 +------- .../materials/custom-properties.json | 12 ++------- .../materials/internals/definition.yaml | 26 +++---------------- .../materials/internals/tokens.story.js | 2 +- .../scripts/generate-design-tokens.js | 8 ------ design-system/src/design-tokens.ts | 22 ++-------------- .../src/calendar-menu/calendar-menu.tsx | 2 +- .../components/avatar/src/avatar.styles.ts | 2 +- .../src/collapsible-panel.styles.tsx | 4 +-- .../components/grid/src/grid.visualroute.jsx | 2 +- packages/components/icons/src/icon.story.js | 2 +- .../inputs/date-time-input/src/time-input.tsx | 2 +- .../src/editor.styles.ts | 2 +- .../src/rich-text-body/dropdown.styles.tsx | 4 +-- .../rich-text-body/rich-text-body.styles.ts | 4 +-- .../select-utils/src/create-select-styles.ts | 4 +-- .../src/primary-action-dropdown.tsx | 6 +++-- .../view-switcher/src/view-switcher.styles.ts | 2 +- test/percy/spec.jsx | 6 ++--- visual-testing-app/index.html | 5 ++++ 21 files changed, 42 insertions(+), 91 deletions(-) create mode 100644 .changeset/yellow-ears-remember.md diff --git a/.changeset/yellow-ears-remember.md b/.changeset/yellow-ears-remember.md new file mode 100644 index 0000000000..b8130a8586 --- /dev/null +++ b/.changeset/yellow-ears-remember.md @@ -0,0 +1,5 @@ +--- +'@commercetools-uikit/design-system': major +--- + +Removed deprecated legacy design tokens. diff --git a/design-system/materials/custom-properties.css b/design-system/materials/custom-properties.css index d298577343..23720293e5 100644 --- a/design-system/materials/custom-properties.css +++ b/design-system/materials/custom-properties.css @@ -235,6 +235,7 @@ --height-for-button-as-medium: 32px; --height-for-button-as-small: 16px; --height-for-input: 40px; + --height-for-input-as-small: 32px; --placeholder-font-color-for-input: hsl(232, 18%, 60%); --font-size-for-button: 0.875rem; --font-size-for-input: 1rem; @@ -245,14 +246,4 @@ --shadow-for-input-when-focused: inset 0 0 0 1px var(--color-primary); --shadow-for-input-when-error: inset 0 0 0 1px var(--color-error); --shadow-for-input-when-warning: inset 0 0 0 1px var(--color-warning); - --font-size-m: 1rem; - --big-button-height: 32px; - --small-button-height: 24px; - --size-height-input: 32px; - --font-family-default: 'Open Sans', sans-serif; - --font-size-default: 1rem; - --font-size-small: 0.9231rem; - --shadow-box-tag-hover: 0 1px 3px rgba(0, 0, 0, 0.12), - 0 1px 2px rgba(0, 0, 0, 0.24); - --size-height-tag: 26px; } diff --git a/design-system/materials/custom-properties.json b/design-system/materials/custom-properties.json index 29102c625b..c54ffb5bb3 100644 --- a/design-system/materials/custom-properties.json +++ b/design-system/materials/custom-properties.json @@ -211,6 +211,7 @@ "--height-for-button-as-medium": "32px", "--height-for-button-as-small": "16px", "--height-for-input": "40px", + "--height-for-input-as-small": "32px", "--placeholder-font-color-for-input": "hsl(232, 18%, 60%)", "--font-size-for-button": "0.875rem", "--font-size-for-input": "1rem", @@ -220,14 +221,5 @@ "--shadow-for-input": "none", "--shadow-for-input-when-focused": "inset 0 0 0 1px var(--color-primary)", "--shadow-for-input-when-error": "inset 0 0 0 1px var(--color-error)", - "--shadow-for-input-when-warning": "inset 0 0 0 1px var(--color-warning)", - "--font-size-m": "1rem", - "--big-button-height": "32px", - "--small-button-height": "24px", - "--size-height-input": "32px", - "--font-family-default": "'Open Sans', sans-serif", - "--font-size-default": "1rem", - "--font-size-small": "0.9231rem", - "--shadow-box-tag-hover": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)", - "--size-height-tag": "26px" + "--shadow-for-input-when-warning": "inset 0 0 0 1px var(--color-warning)" } diff --git a/design-system/materials/internals/definition.yaml b/design-system/materials/internals/definition.yaml index e9f3dab6f9..593ed0d93a 100644 --- a/design-system/materials/internals/definition.yaml +++ b/design-system/materials/internals/definition.yaml @@ -413,6 +413,10 @@ decisionGroupsByTheme: choice: '16px' height-for-input: choice: '40px' + # This is a temporary one to be able to remove the legay 'size-height-for-input' + height-for-input-as-small: + choice: '32px' + description: 'Legacy token to be removed' placeholderFontColors: label: Placeholder font colors @@ -454,25 +458,3 @@ decisionGroupsByTheme: choice: 'inset 0 0 0 1px var(--color-error)' shadow-for-input-when-warning: choice: 'inset 0 0 0 1px var(--color-warning)' - -# These tokens are deprecated as they don't follow our naming patterns. -# Ideally they should be replaced with new tokens and not be used anymore. -# But since we have not yet introduced alternatives for them it's still okay to -# use them. -# -# We aim to remove each token from here as soon as we introduce an alternative, -# but sometimes that's not possible because the usage of the tokens is invalid -# as well (e.g. the shadows are being combined in invalid ways by ui-kit -# consumers. We already have new shadow tokens, but those invalid useages would -# break. Upgrading those parts is not something the ui-kit teams can do on their -# own so we kept the old tokens around even though proper shadow tokens exist). -plainTokens: - font-size-m: '1rem' - big-button-height: 32px - small-button-height: 24px - size-height-input: 32px - font-family-default: "'Open Sans', sans-serif" - font-size-default: 1rem - font-size-small: 0.9231rem - shadow-box-tag-hover: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)' - size-height-tag: 26px diff --git a/design-system/materials/internals/tokens.story.js b/design-system/materials/internals/tokens.story.js index 92be78ce18..81712c7a23 100644 --- a/design-system/materials/internals/tokens.story.js +++ b/design-system/materials/internals/tokens.story.js @@ -24,7 +24,7 @@ const findChoiceValue = (theme, choiceName) => { const Background = styled.div` background-color: rgba(0, 0, 0, 0.01); - font-family: ${designTokens.fontFamilyDefault}; + font-family: ${designTokens.fontFamily}; color: ${designTokens.colorSolid} margin: 10px; > * + * { diff --git a/design-system/scripts/generate-design-tokens.js b/design-system/scripts/generate-design-tokens.js index 8284eb3df2..635bddcfd7 100644 --- a/design-system/scripts/generate-design-tokens.js +++ b/design-system/scripts/generate-design-tokens.js @@ -214,14 +214,6 @@ Object.entries(definitions.decisionGroupsByTheme).forEach( } ); -// Copy over plain tokens (only needed in default theme) -Object.entries(definitions.plainTokens).forEach(([key, value]) => { - if (designTokens.default[key]) - endProgram(`Token called "${key} already exists!"`); - - designTokens.default[key] = value; -}); - // Write files const printJson = (data) => JSON.stringify( diff --git a/design-system/src/design-tokens.ts b/design-system/src/design-tokens.ts index 14b28d9dc0..741e2fde0d 100644 --- a/design-system/src/design-tokens.ts +++ b/design-system/src/design-tokens.ts @@ -223,6 +223,7 @@ export const themes = { heightForButtonAsMedium: '32px', heightForButtonAsSmall: '16px', heightForInput: '40px', + heightForInputAsSmall: '32px', placeholderFontColorForInput: 'hsl(232, 18%, 60%)', fontSizeForButton: '0.875rem', fontSizeForInput: '1rem', @@ -233,16 +234,6 @@ export const themes = { shadowForInputWhenFocused: 'inset 0 0 0 1px var(--color-primary)', shadowForInputWhenError: 'inset 0 0 0 1px var(--color-error)', shadowForInputWhenWarning: 'inset 0 0 0 1px var(--color-warning)', - fontSizeM: '1rem', - bigButtonHeight: '32px', - smallButtonHeight: '24px', - sizeHeightInput: '32px', - fontFamilyDefault: "'Open Sans', sans-serif", - fontSizeDefault: '1rem', - fontSizeSmall: '0.9231rem', - shadowBoxTagHover: - '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)', - sizeHeightTag: '26px', }, } as const; @@ -505,6 +496,7 @@ const designTokens = { heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)', heightForButtonAsSmall: 'var(--height-for-button-as-small, 16px)', heightForInput: 'var(--height-for-input, 40px)', + heightForInputAsSmall: 'var(--height-for-input-as-small, 32px)', placeholderFontColorForInput: 'var(--placeholder-font-color-for-input, hsl(232, 18%, 60%))', fontSizeForButton: 'var(--font-size-for-button, 0.875rem)', @@ -520,16 +512,6 @@ const designTokens = { 'var(--shadow-for-input-when-error, inset 0 0 0 1px var(--color-error))', shadowForInputWhenWarning: 'var(--shadow-for-input-when-warning, inset 0 0 0 1px var(--color-warning))', - fontSizeM: 'var(--font-size-m, 1rem)', - bigButtonHeight: 'var(--big-button-height, 32px)', - smallButtonHeight: 'var(--small-button-height, 24px)', - sizeHeightInput: 'var(--size-height-input, 32px)', - fontFamilyDefault: "var(--font-family-default, 'Open Sans', sans-serif)", - fontSizeDefault: 'var(--font-size-default, 1rem)', - fontSizeSmall: 'var(--font-size-small, 0.9231rem)', - shadowBoxTagHover: - 'var(--shadow-box-tag-hover, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))', - sizeHeightTag: 'var(--size-height-tag, 26px)', } as const; export default designTokens; diff --git a/packages/calendar-utils/src/calendar-menu/calendar-menu.tsx b/packages/calendar-utils/src/calendar-menu/calendar-menu.tsx index 7548ba858e..00e3dcc9bc 100644 --- a/packages/calendar-utils/src/calendar-menu/calendar-menu.tsx +++ b/packages/calendar-utils/src/calendar-menu/calendar-menu.tsx @@ -27,7 +27,7 @@ export default class CalendarMenu extends Component { box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.15); border-radius: ${designTokens.borderRadiusForInput}; margin-top: ${designTokens.spacing10}; - font-size: ${designTokens.fontSizeDefault}; + font-size: ${designTokens.fontSize30}; position: absolute; box-sizing: border-box; width: 100%; diff --git a/packages/components/avatar/src/avatar.styles.ts b/packages/components/avatar/src/avatar.styles.ts index d74f6ac8f4..b4464d8321 100644 --- a/packages/components/avatar/src/avatar.styles.ts +++ b/packages/components/avatar/src/avatar.styles.ts @@ -78,7 +78,7 @@ export const getAvatarStyles = (avatarProps: TAvatarProps) => { align-items: center; background-color: ${backgroundColor}; border-radius: 100%; - font-size: ${designTokens.fontSizeDefault}; + font-size: ${designTokens.fontSize30}; font-weight: ${designTokens.fontWeight600}; color: ${foregroundColor}; display: flex; diff --git a/packages/components/collapsible-panel/src/collapsible-panel.styles.tsx b/packages/components/collapsible-panel/src/collapsible-panel.styles.tsx index 076f09f827..6d7ec8ae89 100644 --- a/packages/components/collapsible-panel/src/collapsible-panel.styles.tsx +++ b/packages/components/collapsible-panel/src/collapsible-panel.styles.tsx @@ -57,7 +57,7 @@ const getHeaderContainerStyles = ( !props.condensed && // To understand why this min-height see: https://github.com/commercetools/ui-kit/pull/616 css` - min-height: ${designTokens.bigButtonHeight}; + min-height: ${designTokens.heightForButtonAsMedium}; box-sizing: content-box; /* makes the padding extend beyond the min-height */ `, ]; @@ -71,7 +71,7 @@ const baseContainerStyles = css` flex-direction: column; color: ${designTokens.colorSolid}; font-family: inherit; - font-size: ${designTokens.fontSizeDefault}; + font-size: ${designTokens.fontSize30}; `; const HeaderControlsWrapper = styled.div` diff --git a/packages/components/grid/src/grid.visualroute.jsx b/packages/components/grid/src/grid.visualroute.jsx index 0e45ad76c6..8744dcd7b3 100644 --- a/packages/components/grid/src/grid.visualroute.jsx +++ b/packages/components/grid/src/grid.visualroute.jsx @@ -15,7 +15,7 @@ const Placeholder = styled.div` background-color: pink; padding: 16px; font-size: 16px; - font-family: ${designTokens.fontFamilyDefault}; + font-family: ${designTokens.fontFamily}; `; export const component = () => ( diff --git a/packages/components/icons/src/icon.story.js b/packages/components/icons/src/icon.story.js index cba12d030e..1698acc0cb 100644 --- a/packages/components/icons/src/icon.story.js +++ b/packages/components/icons/src/icon.story.js @@ -53,7 +53,7 @@ const LegacyBadge = () => ( background-color: ${designTokens.colorWarning95}; border: 1px solid ${designTokens.colorWarning}; border-radius: ${designTokens.borderRadius2}; - font-size: ${designTokens.fontSizeSmall}; + font-size: ${designTokens.fontSize10}; margin-top: ${designTokens.spacing10}; padding: 0 ${designTokens.spacing10}; `} diff --git a/packages/components/inputs/date-time-input/src/time-input.tsx b/packages/components/inputs/date-time-input/src/time-input.tsx index ef9cc3497b..6d53cd5ddc 100644 --- a/packages/components/inputs/date-time-input/src/time-input.tsx +++ b/packages/components/inputs/date-time-input/src/time-input.tsx @@ -11,7 +11,7 @@ const getInputStyles = () => css` border-top: 1px solid ${designTokens.colorNeutral90}; padding: 10px 0; outline: 0; - font-size: ${designTokens.fontSizeDefault}; + font-size: ${designTokens.fontSize30}; margin-top: ${designTokens.spacing20}; color: ${designTokens.colorSolid}; diff --git a/packages/components/inputs/localized-rich-text-input/src/editor.styles.ts b/packages/components/inputs/localized-rich-text-input/src/editor.styles.ts index d977f61452..3ee2d7dc32 100644 --- a/packages/components/inputs/localized-rich-text-input/src/editor.styles.ts +++ b/packages/components/inputs/localized-rich-text-input/src/editor.styles.ts @@ -35,7 +35,7 @@ const EditorLanguageLabel = styled.label` flex: 0; color: ${designTokens.fontColorForInputWhenDisabled}; line-height: calc( - ${designTokens.sizeHeightInput} - 2 * ${designTokens.borderRadius1} + ${designTokens.heightForInputAsSmall} - 2 * ${designTokens.borderRadius1} ); background-color: ${(props) => getBackgroundColor(props)}; border-top-left-radius: ${designTokens.borderRadiusForInput}; diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/dropdown.styles.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/dropdown.styles.tsx index 9ee511d811..9042abb232 100644 --- a/packages/components/inputs/rich-text-utils/src/rich-text-body/dropdown.styles.tsx +++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/dropdown.styles.tsx @@ -17,7 +17,7 @@ const DropdownItem = styled.button` font-size: 1rem; cursor: pointer; padding: ${designTokens.spacing20} ${designTokens.spacing30}; - font-family: ${designTokens.fontFamilyDefault}; + font-family: ${designTokens.fontFamily}; display: block; background-color: ${(props) => props.isSelected @@ -34,7 +34,7 @@ const DropdownItem = styled.button` const getButtonStyles = (props: TDropdownStylesProps) => [ css` border: 0; - font-family: ${designTokens.fontFamilyDefault}; + font-family: ${designTokens.fontFamily}; border-radius: ${designTokens.borderRadius4}; cursor: pointer; font-size: ${designTokens.fontSize30}; diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/rich-text-body.styles.ts b/packages/components/inputs/rich-text-utils/src/rich-text-body/rich-text-body.styles.ts index ee5dc8337b..e107d2f110 100644 --- a/packages/components/inputs/rich-text-utils/src/rich-text-body/rich-text-body.styles.ts +++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/rich-text-body.styles.ts @@ -93,7 +93,7 @@ export const ToolbarRightControls = styled.div``; export const Toolbar = styled.div` display: flex; flex-wrap: wrap; - font-family: ${designTokens.fontFamilyDefault}; + font-family: ${designTokens.fontFamily}; border-radius: ${designTokens.borderRadiusForInput}; border-bottom: 0; padding: none; @@ -148,7 +148,7 @@ const reset = (props: TRichTextBodyStylesProps) => [ export const EditorContainer = styled.div` padding: ${designTokens.spacing20} 0 0; border-radius: ${designTokens.borderRadiusForInput}; - font-family: ${designTokens.fontFamilyDefault}; + font-family: ${designTokens.fontFamily}; border-color: ${(props) => getBorderColor(props)}; overflow-y: scroll; ${reset} diff --git a/packages/components/inputs/select-utils/src/create-select-styles.ts b/packages/components/inputs/select-utils/src/create-select-styles.ts index a3a1843c98..f09c33eae3 100644 --- a/packages/components/inputs/select-utils/src/create-select-styles.ts +++ b/packages/components/inputs/select-utils/src/create-select-styles.ts @@ -411,7 +411,7 @@ const groupHeadingStyles = () => (base: TBase) => { return { ...base, color: designTokens.fontColorForInputWhenReadonly, - fontSize: designTokens.fontSizeSmall, + fontSize: designTokens.fontSize30, borderBottom: `1px solid ${designTokens.colorNeutral90}`, textTransform: 'none', fontWeight: designTokens.fontWeight500, @@ -426,7 +426,7 @@ const containerStyles = () => (base: TBase, state: TState) => { return { ...base, fontFamily: 'inherit', - minHeight: designTokens.sizeHeightInput, + minHeight: designTokens.heightForInputAsSmall, borderRadius: designTokens.borderRadiusForInput, borderColor: state.isFocused ? designTokens.borderColorForInputWhenFocused diff --git a/packages/components/primary-action-dropdown/src/primary-action-dropdown.tsx b/packages/components/primary-action-dropdown/src/primary-action-dropdown.tsx index 6fd2430852..acc2c4e978 100644 --- a/packages/components/primary-action-dropdown/src/primary-action-dropdown.tsx +++ b/packages/components/primary-action-dropdown/src/primary-action-dropdown.tsx @@ -24,7 +24,7 @@ const getButtonStyles = (isDisabled: boolean) => { const baseButtonStyles = css` display: flex; align-items: center; - height: ${designTokens.bigButtonHeight}; + height: ${designTokens.heightForButtonAsMedium}; `; if (isDisabled) { return [ @@ -177,7 +177,9 @@ const Options = styled.div` position: absolute; z-index: 5; width: 100%; - top: calc(${designTokens.spacing20} + ${designTokens.bigButtonHeight}); + top: calc( + ${designTokens.spacing20} + ${designTokens.heightForButtonAsMedium} + ); border: 1px solid ${designTokens.colorSurface}; border-radius: ${designTokens.borderRadius4}; box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.15); diff --git a/packages/components/view-switcher/src/view-switcher.styles.ts b/packages/components/view-switcher/src/view-switcher.styles.ts index 0ab702eeea..bd9a3d993c 100644 --- a/packages/components/view-switcher/src/view-switcher.styles.ts +++ b/packages/components/view-switcher/src/view-switcher.styles.ts @@ -43,7 +43,7 @@ export const getButtonStyles = ( color: ${fontColor}; fill: ${fontColor}; transition: background-color ${designTokens.transitionLinear80Ms}; - font-size: ${designTokens.fontSizeDefault}; + font-size: ${designTokens.fontSize30}; border: 1px solid ${designTokens.colorNeutral}; border-left: ${isFirstButton ? `1px solid ${designTokens.colorNeutral}` diff --git a/test/percy/spec.jsx b/test/percy/spec.jsx index 2566c37713..c0007d3b4e 100644 --- a/test/percy/spec.jsx +++ b/test/percy/spec.jsx @@ -16,17 +16,17 @@ const SpecContainer = styled.div` `; const Label = styled.div` - font-family: ${designTokens.fontFamilyDefault}; + font-family: var(--font-family-vrt); font-weight: bold; box-sizing: border-box; background-color: #774caf; padding: 5px; color: ${designTokens.colorSurface}; - font-size: ${designTokens.fontSizeDefault}; + font-size: ${designTokens.fontSize30}; `; const PropList = styled.div` - font-family: ${designTokens.fontFamilyDefault}; + font-family: var(--font-family-vrt); background-color: #894ac3; padding: 5px; box-sizing: border-box; diff --git a/visual-testing-app/index.html b/visual-testing-app/index.html index c02ae2984d..9153759a3e 100644 --- a/visual-testing-app/index.html +++ b/visual-testing-app/index.html @@ -10,6 +10,11 @@ UI-Kit | Visual testing app +