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
commercetools · Feb 12, 2024 · db371ba · db371ba
1 parent d5ae8ef
commit db371ba
Show file tree

Hide file tree

Showing 21 changed files with 42 additions and 91 deletions.
diff --git a/.changeset/yellow-ears-remember.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -27,7 +27,7 @@ export default class CalendarMenu extends Component<TCalendarMenu> {
             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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -35,7 +35,7 @@ const EditorLanguageLabel = styled.label<TEditorLanguageLabelProps>`
   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
@@ -17,7 +17,7 @@ const DropdownItem = styled.button<TDropdownStylesProps>`
   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<TDropdownStylesProps>`
 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
@@ -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<TRichTextBodyStylesProps>`
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -10,6 +10,11 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
     <title>UI-Kit | Visual testing app</title>
+    <style>
+      :root {
+        --font-family-vrt: 'Open Sans', sans-serif;
+      }
+    </style>
   </head>
   <body>
     <div id="app"></div>