From 7ebaa32f1015ef99e65a6d7a92ff522d0a3798a8 Mon Sep 17 00:00:00 2001
From: Daniel Sil <daniel.sil@kiwi.com>
Date: Thu, 19 Dec 2024 18:00:59 +0100
Subject: [PATCH] docs: update docs with new tokens

---
 docs/src/__examples__/ButtonPrimitive/DEFAULT.tsx | 4 ++--
 docs/src/__examples__/Grid/DEFAULT.tsx            | 2 +-
 docs/src/__examples__/Illustration/SIZES.tsx      | 4 ++--
 docs/src/__examples__/Layout/BOOKING.tsx          | 4 ++--
 docs/src/__examples__/Layout/CUSTOM.tsx           | 4 ++--
 docs/src/__examples__/Layout/MMB.tsx              | 4 ++--
 docs/src/__examples__/Layout/SEARCH.tsx           | 4 ++--
 docs/src/components/BrandedTile.tsx               | 2 +-
 docs/src/components/Breadcrumbs.tsx               | 4 +++-
 docs/src/components/DocLayout/TopBar.tsx          | 2 +-
 docs/src/components/ElevationLevel.tsx            | 2 +-
 docs/src/components/Github/TeamMember.tsx         | 4 ++--
 docs/src/components/ImageContainer.tsx            | 2 +-
 docs/src/components/ImagesDownloadList.tsx        | 6 +++---
 docs/src/components/Palette/CopyButton.tsx        | 2 +-
 docs/src/components/Switch.tsx                    | 2 +-
 docs/src/components/Tile.tsx                      | 8 ++++----
 docs/src/components/Usage/index.tsx               | 4 ++--
 docs/src/docs-table.tsx                           | 6 +++---
 docs/src/theme.tsx                                | 2 +-
 docs/src/utils/dark-button.ts                     | 2 +-
 21 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/docs/src/__examples__/ButtonPrimitive/DEFAULT.tsx b/docs/src/__examples__/ButtonPrimitive/DEFAULT.tsx
index c5a2e8739d..6cf13a06b2 100644
--- a/docs/src/__examples__/ButtonPrimitive/DEFAULT.tsx
+++ b/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>
diff --git a/docs/src/__examples__/Grid/DEFAULT.tsx b/docs/src/__examples__/Grid/DEFAULT.tsx
index 8dc48396fa..11f8b76259 100644
--- a/docs/src/__examples__/Grid/DEFAULT.tsx
+++ b/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 (
diff --git a/docs/src/__examples__/Illustration/SIZES.tsx b/docs/src/__examples__/Illustration/SIZES.tsx
index 529c952d3e..8f26bfd8ca 100644
--- a/docs/src/__examples__/Illustration/SIZES.tsx
+++ b/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"
diff --git a/docs/src/__examples__/Layout/BOOKING.tsx b/docs/src/__examples__/Layout/BOOKING.tsx
index 0f87632593..57acb0170a 100644
--- a/docs/src/__examples__/Layout/BOOKING.tsx
+++ b/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 (
diff --git a/docs/src/__examples__/Layout/CUSTOM.tsx b/docs/src/__examples__/Layout/CUSTOM.tsx
index fcadc20eaf..4b6d6e5849 100644
--- a/docs/src/__examples__/Layout/CUSTOM.tsx
+++ b/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 (
diff --git a/docs/src/__examples__/Layout/MMB.tsx b/docs/src/__examples__/Layout/MMB.tsx
index 3399f4c7bc..524b06b1cd 100644
--- a/docs/src/__examples__/Layout/MMB.tsx
+++ b/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">
diff --git a/docs/src/__examples__/Layout/SEARCH.tsx b/docs/src/__examples__/Layout/SEARCH.tsx
index 35fccc3459..0ab96ffbd6 100644
--- a/docs/src/__examples__/Layout/SEARCH.tsx
+++ b/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">
diff --git a/docs/src/components/BrandedTile.tsx b/docs/src/components/BrandedTile.tsx
index c32ce78b55..46e5dc8c2f 100644
--- a/docs/src/components/BrandedTile.tsx
+++ b/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;
diff --git a/docs/src/components/Breadcrumbs.tsx b/docs/src/components/Breadcrumbs.tsx
index d2eccb62d2..30342de1c4 100644
--- a/docs/src/components/Breadcrumbs.tsx
+++ b/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};
     }
   `}
diff --git a/docs/src/components/DocLayout/TopBar.tsx b/docs/src/components/DocLayout/TopBar.tsx
index 459f0d04ba..03d1830a9b 100644
--- a/docs/src/components/DocLayout/TopBar.tsx
+++ b/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
diff --git a/docs/src/components/ElevationLevel.tsx b/docs/src/components/ElevationLevel.tsx
index 56bbff2931..03db98b3b0 100644
--- a/docs/src/components/ElevationLevel.tsx
+++ b/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;
diff --git a/docs/src/components/Github/TeamMember.tsx b/docs/src/components/Github/TeamMember.tsx
index c07fb40421..dc9de959c4 100644
--- a/docs/src/components/Github/TeamMember.tsx
+++ b/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 {
diff --git a/docs/src/components/ImageContainer.tsx b/docs/src/components/ImageContainer.tsx
index 9c3e7b7f58..f781e8f4a4 100644
--- a/docs/src/components/ImageContainer.tsx
+++ b/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}
diff --git a/docs/src/components/ImagesDownloadList.tsx b/docs/src/components/ImagesDownloadList.tsx
index 8dcbe47cd3..446f0d1164 100644
--- a/docs/src/components/ImagesDownloadList.tsx
+++ b/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};
diff --git a/docs/src/components/Palette/CopyButton.tsx b/docs/src/components/Palette/CopyButton.tsx
index fd8ba19613..29c7b79aad 100644
--- a/docs/src/components/Palette/CopyButton.tsx
+++ b/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;
 
diff --git a/docs/src/components/Switch.tsx b/docs/src/components/Switch.tsx
index 142f972e8e..bc145abdfc 100644
--- a/docs/src/components/Switch.tsx
+++ b/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 {
diff --git a/docs/src/components/Tile.tsx b/docs/src/components/Tile.tsx
index 7ec4b2cfc6..348d5a14a2 100644
--- a/docs/src/components/Tile.tsx
+++ b/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};
     }
   `};
 `;
diff --git a/docs/src/components/Usage/index.tsx b/docs/src/components/Usage/index.tsx
index 00ce5987ab..5162899932 100644
--- a/docs/src/components/Usage/index.tsx
+++ b/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;
diff --git a/docs/src/docs-table.tsx b/docs/src/docs-table.tsx
index f8d6de9d2b..4dc1e769ec 100644
--- a/docs/src/docs-table.tsx
+++ b/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 {
diff --git a/docs/src/theme.tsx b/docs/src/theme.tsx
index ad5dadd5c2..1fc4b6c7cb 100644
--- a/docs/src/theme.tsx
+++ b/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",
diff --git a/docs/src/utils/dark-button.ts b/docs/src/utils/dark-button.ts
index e0dd5a2e4d..0eb92d5637 100644
--- a/docs/src/utils/dark-button.ts
+++ b/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: