docs: update docs with new tokens

kiwicom · Dec 20, 2024 · 7ebaa32 · 7ebaa32
1 parent ef8236b
commit 7ebaa32
Show file tree

Hide file tree

Showing 21 changed files with 38 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: