Remove deprecated tokens

docs/src/__examples__/ButtonPrimitive/DEFAULT.tsx

@@ -6,8 +6,8 @@ export default {
   Example: () => (
     <ButtonPrimitive
       background="linear-gradient(264.15deg, #FC8D3E 0%, #F16E5B 100%)"
-      foreground={defaultTheme.orbit.colorTextWhite}
-      padding={defaultTheme.orbit.paddingButtonNormal}
+      foreground={defaultTheme.orbit.textWhiteForeground}
+      padding={`0 ${defaultTheme.orbit.space400}`}
     >
       Click me
     </ButtonPrimitive>

docs/src/__examples__/Grid/DEFAULT.tsx

@@ -8,7 +8,7 @@ export default {
       background: `${defaultTheme.orbit.paletteCloudNormal}`,
       border: `1px solid ${defaultTheme.orbit.paletteProductDark}`,
       "box-sizing": "border-box",
-      padding: `${defaultTheme.orbit.paddingButtonSmall}`,
+      padding: `0 ${defaultTheme.orbit.space300}`,
     };
 
     return (

docs/src/__examples__/Illustration/SIZES.tsx

@@ -9,7 +9,7 @@ export default {
         <Heading as="h3" type="title3">
           Extra small
         </Heading>
-        <Text>Height: {defaultTheme.orbit.heightIllustrationSmall}</Text>
+        <Text>Height: {defaultTheme.orbit.illustrationExtraSmallHeight}</Text>
         <Illustration
           size="extraSmall"
           alt="Jump to the front of the line when boarding"
@@ -31,7 +31,7 @@ export default {
         <Heading as="h3" type="title3">
           Medium
         </Heading>
-        <Text>Height: {defaultTheme.orbit.heightIllustrationMedium}</Text>
+        <Text>Height: {defaultTheme.orbit.illustrationMediumHeight}</Text>
         <Illustration
           size="medium"
           alt="Jump to the front of the line when boarding"

docs/src/__examples__/Layout/BOOKING.tsx

@@ -5,8 +5,8 @@ import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";
 export default {
   Example: () => {
     const divStyle = {
-      minHeight: `${defaultTheme.orbit.heightIllustrationMedium}`,
-      background: `${defaultTheme.orbit.backgroundBody}`,
+      minHeight: `${defaultTheme.orbit.illustrationMediumHeight}`,
+      background: `${defaultTheme.orbit.elevationSuppressedBackground}`,
     };
 
     return (

docs/src/__examples__/Layout/CUSTOM.tsx

@@ -5,8 +5,8 @@ import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";
 export default {
   Example: () => {
     const divStyle = {
-      minHeight: defaultTheme.orbit.heightIllustrationMedium,
-      background: defaultTheme.orbit.backgroundBody,
+      minHeight: defaultTheme.orbit.illustrationMediumHeight,
+      background: defaultTheme.orbit.elevationSuppressedBackground,
     };
 
     return (

docs/src/__examples__/Layout/MMB.tsx

@@ -5,8 +5,8 @@ import { Layout, LayoutColumn, Text } from "@kiwicom/orbit-components";
 export default {
   Example: () => {
     const style = {
-      minHeight: defaultTheme.orbit.heightIllustrationMedium,
-      background: defaultTheme.orbit.backgroundBody,
+      minHeight: defaultTheme.orbit.illustrationMediumHeight,
+      background: defaultTheme.orbit.elevationSuppressedBackground,
     };
     return (
       <Layout type="MMB">

docs/src/__examples__/Layout/SEARCH.tsx

@@ -5,8 +5,8 @@ import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";
 export default {
   Example: () => {
     const divStyle = {
-      minHeight: `${defaultTheme.orbit.heightIllustrationMedium}`,
-      background: `${defaultTheme.orbit.backgroundBody}`,
+      minHeight: `${defaultTheme.orbit.illustrationMediumHeight}`,
+      background: `${defaultTheme.orbit.elevationSuppressedBackground}`,
     };
     return (
       <Layout type="Search">

docs/src/components/BrandedTile.tsx

@@ -29,7 +29,7 @@ const StyledWrapper = styled.a<{ primary: string; type?: "primary" | "secondary"
     padding: 2rem;
     border-radius: 1rem;
     background: ${primary};
-    color: ${theme.orbit.colorTextWhite};
+    color: ${theme.orbit.textWhiteForeground};
     transition: box-shadow ${theme.orbit.durationFast};
     display: flex;
     overflow: hidden;

docs/src/components/Breadcrumbs.tsx

@@ -15,7 +15,9 @@ const StyledListItem = styled.li<{ current: boolean }>`
   ${({ theme, current }) => css`
     a,
     span {
-      color: ${current ? theme.orbit.colorTextLinkPrimary : theme.orbit.colorTextSecondary};
+      color: ${current
+        ? theme.orbit.textLinkPrimaryForeground
+        : theme.orbit.textLinkSecondaryForeground};
       margin-right: ${theme.orbit.space200};
     }
   `}

docs/src/components/DocLayout/TopBar.tsx

@@ -81,7 +81,7 @@ const TopBar = ({
         }}
       >
         {breadcrumbs && <Breadcrumbs breadcrumbs={breadcrumbs} />}
-        <Box padding={{ bottom: hasLowerLayer ? "medium" : "none" }}>
+        <Box padding={{ bottom: hasLowerLayer ? "400" : "none" }}>
           <Stack inline align="center" spaceAfter="small">
             <AddBookmark title={title} description={description} />
             <div

docs/src/components/ElevationLevel.tsx

@@ -34,7 +34,7 @@ export default ({ level }: ElevationLevelProps) => {
       backgroundColor = theme.orbit.paletteCloudLight;
       break;
     case "flat":
-      border = `${theme.orbit.borderWidthCard} ${theme.orbit.borderStyleCard} ${theme.orbit.borderColorCard}`;
+      border = `${theme.orbit.elevationFlatBorderSize} solid ${theme.orbit.elevationFlatBorderColor}`;
       break;
     case 1:
       boxShadow = theme.orbit.elevationLevel1BoxShadow;

docs/src/components/Github/TeamMember.tsx

@@ -7,7 +7,7 @@ import { SiDribbble as Dribbble, SiGithub as Github } from "@icons-pack/react-si
 import { Contributor } from ".";
 
 const StyledHeading = styled.h4`
-  color: ${({ theme }) => theme.orbit.colorHeading};
+  color: ${({ theme }) => theme.orbit.headingForeground};
   font-size: calc(1em + 2px);
   font-weight: ${({ theme }) => theme.orbit.fontWeightBold};
   width: 100%;
@@ -26,7 +26,7 @@ const StyledLink = styled.a.attrs(() => ({
 
 const StyledInfo = styled.div`
   height: 100%;
-  color: ${({ theme }) => theme.orbit.colorTextPrimary};
+  color: ${({ theme }) => theme.orbit.textPrimaryForeground};
 `;
 
 interface Props extends Contributor {

docs/src/components/ImageContainer.tsx

@@ -27,7 +27,7 @@ const ImageContainer = ({ align = "center", border, size = "large", children }:
         margin: ${getContainerMargin()};
         width: 100%;
         max-width: ${getContainerWidth()};
-        ${border && `border: 1px solid ${defaultTheme.orbit.borderColorTableCell};`}
+        ${border && `border: 1px solid ${defaultTheme.orbit.paletteCloudDark};`}
       `}
     >
       {children}

docs/src/components/ImagesDownloadList.tsx

@@ -13,9 +13,9 @@ const StyledAnchor = styled.a`
   ${({ theme }) => css`
     background-color: ${theme.orbit.paletteProductLight};
     color: ${theme.orbit.paletteProductNormal};
-    padding: ${theme.orbit.paddingButtonSmallWithLeftIcon};
+    padding: 0 ${theme.orbit.space300} 0 ${theme.orbit.space200};
     padding-top: ${theme.orbit.space100};
-    height: ${theme.orbit.heightButtonSmall};
+    height: ${theme.orbit.formBoxSmallHeight};
     border-radius: ${theme.orbit.borderRadius100};
     transition: all ${theme.orbit.durationFast} ease-in;
 
@@ -41,7 +41,7 @@ interface ImageWrapProps {
 const ImageWrap = styled.div<ImageWrapProps>`
   ${({ theme, width }) => css`
     padding: ${theme.orbit.space300};
-    border: 1px solid ${theme.orbit.borderColorCard};
+    border: 1px solid ${theme.orbit.elevationFlatBorderColor};
     border-radius: ${theme.orbit.borderRadius100};
     margin-top: ${theme.orbit.space400};
     width: ${width};

docs/src/components/Palette/CopyButton.tsx

@@ -18,7 +18,7 @@ const StyledButton = styled.button<{ colorValue?: string }>`
       ? theme.orbit.paletteInkDark
       : theme.orbit.paletteWhite};
     padding: 0 ${theme.orbit.space200};
-    border-radius: ${theme.orbit.borderRadiusBadge};
+    border-radius: ${theme.orbit.badgeBorderRadius};
     text-transform: uppercase;
     transition: transform ${theme.orbit.durationFast} ease-in;
 

docs/src/components/Switch.tsx

@@ -83,7 +83,7 @@ const StyledInput = styled.input`
 `;
 
 const StyledContent = styled.span`
-  color: ${({ theme }) => theme.orbit.colorTextSecondary};
+  color: ${({ theme }) => theme.orbit.textSecondaryForeground};
 `;
 
 interface Props {

docs/src/components/Tile.tsx

@@ -124,8 +124,8 @@ const StyledEndLinkWrapper = styled.span`
 
 const StyledTextLink = styled.span`
   ${({ theme }) => `
-    font-weight: ${theme.orbit.fontWeightLinks};
-    color: ${theme.orbit.colorTextLinkPrimary};
+    font-weight: ${theme.orbit.fontWeightMedium};
+    color: ${theme.orbit.textLinkPrimaryForeground};
     text-decoration: underline;
     ${StyledWrapper}:hover & {
       color: ${theme.orbit.paletteProductNormalHover};
@@ -148,9 +148,9 @@ const StyledLinkText = styled(StyledTextLink)`
 
 const StyledLinkNode = styled.span`
   ${({ theme }) => `
-    color: ${theme.orbit.colorTextLinkPrimary};
+    color: ${theme.orbit.textLinkPrimaryForeground};
     ${StyledWrapper}:hover & {
-      color: ${theme.orbit.colorTextLinkPrimaryHover};
+      color: ${theme.orbit.textLinkPrimaryForegroundHover};
     }
   `};
 `;

docs/src/components/Usage/index.tsx

@@ -67,8 +67,8 @@ const StyledHeadingIcon = styled.div<{ $color: string }>`
   ${({ theme, $color }) => css`
     display: grid;
     place-content: center;
-    width: ${theme.orbit.widthIconMedium};
-    height: ${theme.orbit.heightIconMedium};
+    width: ${theme.orbit.iconMediumSize};
+    height: ${theme.orbit.iconMediumSize};
     background-color: ${$color};
     border-radius: ${theme.orbit.borderRadiusFull};
     padding: 2px;

docs/src/docs-table.tsx

@@ -40,7 +40,7 @@ const TableWrap = styled.div`
       }
 
       thead {
-        box-shadow: 0 0 0 1px ${theme.orbit.borderColorTable};
+        box-shadow: 0 0 0 1px ${theme.orbit.paletteCloudDark};
         border-top-left-radius: 6px;
         border-top-right-radius: 6px;
         border: none;
@@ -57,7 +57,7 @@ const TableWrap = styled.div`
       }
 
       tbody {
-        box-shadow: 0 0 0 1px ${theme.orbit.borderColorTable};
+        box-shadow: 0 0 0 1px ${theme.orbit.paletteCloudDark};
         border-bottom-left-radius: 6px;
         border-bottom-right-radius: 6px;
         border: none;
@@ -72,7 +72,7 @@ const TableWrap = styled.div`
               border-radius: 6px;
               transform: scale(1.025);
               box-shadow: 0px 4px 8px 0px #252a311f, 0px 1px 4px 0px #252a3129,
-                0 0 0 1px ${theme.orbit.borderColorTable};
+                0 0 0 1px ${theme.orbit.paletteCloudDark};
 
               td {
                 &:first-child {

docs/src/documentation/05-development/04-migration-guides/01-v19.mdx

@@ -16,31 +16,63 @@ With this guide, we aim to walk through all the breaking changes and how they ca
 
 The `UserSingle` icon has been renamed to `UserSingleLight`. No changes have been made to the icon itself, only the name has been changed to better suit its visual aspect.
 
-```diff
-- import UserSingle from "@kiwicom/orbit-components/lib/icons/UserSingle";
-+ import UserSingleLight from "@kiwicom/orbit-components/lib/icons/UserSingleLight";
+**Before:**
 
-...
+```jsx
+import UserSingle from "@kiwicom/orbit-components/lib/icons/UserSingle";
 
-- <UserSingle />
-+ <UserSingleLight />
+<UserSingle />;
+```
+
+**Now:**
+
+```jsx
+import UserSingleLight from "@kiwicom/orbit-components/lib/icons/UserSingleLight";
+
+<UserSingleLight />;
 ```
 
 ### Removal of `size` prop in InputGroup
 
 Following the removal of the `size` prop from the `InputField` and `Select` components in version 7, the `size` prop in the `InputGroup` component was having no effect at all.
 Therefore, it has now been removed.
 
-```diff
-- <InputGroup size="small">
-+ <InputGroup>
-```
-
 ### Removal of `inputSize` prop in ErrorFormTooltip
 
 The `inputSize` prop in the `ErrorFormTooltip` component has been removed as it was not being used at all, for the same reason mentioned above.
 
-```diff
-- <ErrorFormTooltip inputSize="small" />
-+ <ErrorFormTooltip />
-```
+### Removal of `left` and `right` functions from RTL utils
+
+Deprecated since version 17.1.0, the `left` and `right` functions from the RTL utils have now been removed.
+
+### Removal of deprecated props and tokens
+
+Component props, tokens and tailwind classes deprecated in version 16 have been removed.
+
+Refer to the [migration guide for version 16](/migration-guides/v16/) for an extensive list of removed tokens and classes and their replacements.
+
+Besides the ones mentioned, some other tokens (and classes) were affected, namely component-specific tokens and breakpoint tokens.
+
+The component-specific tokens and classes were not documented and were not expected to be used.
+Therefore, the full set of removed tokens and classes is not listed in this migration guide.
+The full diff, available on the repository, can provide insights on the replacements for these tokens and classes.
+
+#### Breakpoint tokens renaming
+
+The breakpoint tokens, exported via the `mediaQuery` util and from the `theme` object, have been renamed.
+The prefix `width` was removed from their names. Their values did not change.
+
+- `widthBreakpointMediumMobile` -> `breakpointMediumMobile`
+- `widthBreakpointLargeMobile` -> `breakpointLargeMobile`
+- `widthBreakpointTablet` -> `breakpointTablet`
+- `widthBreakpointDesktop` -> `breakpointDesktop`
+- `widthBreakpointLargeDesktop` -> `breakpointLargeDesktop`
+
+#### New spacing tokens
+
+Two new spacing tokens were added. One replaces the deprecated `spaceXXXLarge` and the other introduces a new value.
+These tokens are available in the `theme` object and the corresponding tailwind classes are also available.
+For now, no component props are available for these tokens.
+
+- _(new token)_ -> `space700` (28px)
+- `spaceXXXLarge` -> `space1300` (52px)

docs/src/theme.tsx

@@ -3,7 +3,7 @@ import { defaultTokens } from "@kiwicom/orbit-design-tokens";
 export default {
   orbit: {
     ...defaultTokens,
-    widthBreakpointDesktop: 1024,
+    breakpointDesktop: 1024,
     fontFamily: '"DM Sans", sans-serif',
     fontSizeTextLarge: "18px",
     fontSizeTextNormal: "16px",

docs/src/utils/dark-button.ts

@@ -16,7 +16,7 @@ export function getBgColor({
 }: { theme: ThemeShape } & Pick<Params, "type" | "color">): string {
   switch (type) {
     case "primary":
-      return theme.orbit.backgroundButtonPrimary;
+      return theme.orbit.buttonPrimaryBackground;
     case "secondary":
       return theme.orbit.paletteProductLight;
     default:

packages/orbit-components/.storybook/preview.ts

@@ -7,11 +7,11 @@ import theme from "../src/defaultTheme";
 
 const tokens = {
   smallMobile: 320,
-  [QUERIES.MEDIUMMOBILE]: theme.orbit.widthBreakpointMediumMobile,
-  [QUERIES.LARGEMOBILE]: theme.orbit.widthBreakpointLargeMobile,
-  [QUERIES.TABLET]: theme.orbit.widthBreakpointTablet,
-  [QUERIES.DESKTOP]: theme.orbit.widthBreakpointDesktop,
-  [QUERIES.LARGEDESKTOP]: theme.orbit.widthBreakpointLargeDesktop,
+  [QUERIES.MEDIUMMOBILE]: theme.orbit.breakpointMediumMobile,
+  [QUERIES.LARGEMOBILE]: theme.orbit.breakpointLargeMobile,
+  [QUERIES.TABLET]: theme.orbit.breakpointTablet,
+  [QUERIES.DESKTOP]: theme.orbit.breakpointDesktop,
+  [QUERIES.LARGEDESKTOP]: theme.orbit.breakpointLargeDesktop,
 };
 
 const viewports = Object.entries(tokens).reduce((acc, [viewport, width]) => {

packages/orbit-components/config/generateEmailIcons.mts

@@ -8,9 +8,9 @@ const DIR = path.join(__dirname, "../orbit-email-icons");
 const sizesToGenerate = [32, 48];
 const colors = [
   ["white", defaultTokens.paletteWhite],
-  ["secondary", defaultTokens.colorIconSecondary],
-  ["tertiary", defaultTokens.colorIconTertiary],
-  ["primary", defaultTokens.colorIconPrimary],
+  ["secondary", defaultTokens.iconSecondaryForeground],
+  ["tertiary", defaultTokens.iconTertiaryForeground],
+  ["primary", defaultTokens.iconPrimaryForeground],
   ["warning", defaultTokens.paletteOrangeNormal],
   ["error", defaultTokens.paletteRedNormal],
   ["success", defaultTokens.paletteGreenNormal],