New shadow tokens

docs/src/components/Bookmarks/index.tsx

@@ -29,7 +29,7 @@ const tileMixin = css`
     border-radius: 16px;
     box-sizing: border-box;
     padding: ${theme.orbit.spaceXLarge};
-    box-shadow: ${theme.orbit.boxShadowAction};
+    box-shadow: ${theme.orbit.elevationLevel1BoxShadow};
     > div {
       height: 100%;
       margin-right: ${theme.orbit.spaceXSmall};

docs/src/components/DocLayout/TopBar.tsx

@@ -66,7 +66,7 @@ const TopBar = ({
           ? { top: "none", bottom: "XLarge", left: "XLarge", right: "XLarge" }
           : { top: "XLarge", bottom: "XXLarge", left: "XLarge", right: "XLarge" }
       }
-      elevation={noElevation ? undefined : "raised"}
+      elevation={noElevation ? undefined : "level3"}
     >
       {children}
     </StyledProse>

docs/src/components/ElevationLevel.tsx

@@ -22,40 +22,37 @@ export const LevelDiv = styled.div<LevelDivProps>`
 `;
 
 interface ElevationLevelProps {
-  level: 1 | 2 | 3 | 3.5 | 4 | 4.5 | 5 | 5.5 | 6;
+  level: "suppressed" | "flat" | 1 | 2 | 3 | "3Reverse" | 4 | "fixed" | "fixedReverse";
 }
 
 export default ({ level }: ElevationLevelProps) => {
   let backgroundColor = theme.orbit.paletteWhite;
   let border = "none";
   let boxShadow = "none";
   switch (level) {
-    case 1:
+    case "suppressed":
       backgroundColor = theme.orbit.paletteCloudLight;
       break;
-    case 2:
+    case "flat":
       border = `${theme.orbit.borderWidthCard} ${theme.orbit.borderStyleCard} ${theme.orbit.borderColorCard}`;
       break;
-    case 3:
-      boxShadow = theme.orbit.boxShadowAction;
-      break;
-    case 3.5:
-      boxShadow = theme.orbit.boxShadowActionActive;
+    case 1:
+      boxShadow = theme.orbit.elevationLevel1BoxShadow;
       break;
-    case 4:
-      boxShadow = theme.orbit.boxShadowFixed;
+    case 2:
+      boxShadow = theme.orbit.elevationLevel2BoxShadow;
       break;
-    case 4.5:
-      boxShadow = theme.orbit.boxShadowFixedReverse;
+    case 3:
+      boxShadow = theme.orbit.elevationLevel3BoxShadow;
       break;
-    case 5:
-      boxShadow = theme.orbit.boxShadowRaised;
+    case 4:
+      boxShadow = theme.orbit.elevationLevel4BoxShadow;
       break;
-    case 5.5:
-      boxShadow = theme.orbit.boxShadowRaisedReverse;
+    case "fixed":
+      boxShadow = theme.orbit.elevationFixedBoxShadow;
       break;
-    case 6:
-      boxShadow = theme.orbit.boxShadowOverlay;
+    case "fixedReverse":
+      boxShadow = theme.orbit.elevationFixedReverseBoxShadow;
       break;
     default:
       break;

docs/src/components/Palette/ColorContainer.tsx

@@ -63,7 +63,7 @@ export const StyledColorContainerWrapper = styled(({ className, children }) => (
     :focus,
     :active {
       transform: scale(1.01);
-      box-shadow: ${theme.orbit.boxShadowRaised};
+      box-shadow: ${theme.orbit.elevationLevel3BoxShadow};
 
       ${StyledCopyWrapper} {
         visibility: visible;

docs/src/components/ReactExample/components/ViewportsRuler.tsx

@@ -46,7 +46,7 @@ const StyledCell = styled.button.attrs({ type: "button" })<{
     }
     &:focus {
       outline: none;
-      box-shadow: ${theme.orbit.boxShadowFixed};
+      box-shadow: ${theme.orbit.elevationFixedBoxShadow};
     }
   `}
 `;

docs/src/components/Search/primitives/StyledInputContainer.ts

@@ -3,7 +3,7 @@ import styled from "styled-components";
 const StyledInputContainer = styled.div`
   display: flex;
   position: relative;
-  box-shadow: ${({ theme }) => theme.orbit.boxShadowAction};
+  box-shadow: ${({ theme }) => theme.orbit.elevationLevel1BoxShadow};
   padding: 10px 1.5em;
   border-radius: 100px;
   flex-direction: row;

docs/src/components/Tabs/consts.ts

@@ -2,5 +2,5 @@ import mediaQueries from "../MediaQueries";
 
 export const TAB_HEIGHT = "64px";
 export const BORDER_RADIUS = "12px";
-export const TAB_ACTIVE_SHADOW_TOKEN = "boxShadowRaised";
+export const TAB_ACTIVE_SHADOW_TOKEN = "elevationLevel3BoxShadow";
 export const FULL_WIDTH_BREAKPOINT: keyof typeof mediaQueries = "largeMobile";

docs/src/documentation/02-foundation/06-elevation.mdx

@@ -11,24 +11,25 @@ We have six main elevation levels:
 
 1.  Suppressed
 2.  Flat
-3.  Action
-4.  Fixed
-5.  Raised
-6.  Overlay
+3.  Level 1
+4.  Level 2
+5.  Level 3
+6.  Level 4
+7.  Fixed
 
 Elevations represent levels of importance differently according to specific components.
 
 Elevation levels with higher numbers are usually visually closer to the user
 and have typically larger and more spread shadow.
 
-| Visual style                   | Elevation levels                                                                                                                                                                                                                                                                                                                                                             | Token                                         |
-| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
-| <ElevationLevel level={1} />   | **Suppressed (Level 1)** <br />This level should be used for cases where you want to suppress content that isn’t so important or draw attention to components (such as Tiles) that should have better visibility on a Cloud background.<br />Usage:<br />Suppressed [Modal section](/components/overlay/modal/)                                                              | none                                          |
-| <ElevationLevel level={2} />   | **Flat (Level 2)** <br />This level is used for elements on a suppressed or white background. These elements have no action, so the level has a 1 px border instead of an actionable shadow.<br />Usage:<br />[Card](/components/structure/card/)                                                                                                                            | none                                          |
-| <ElevationLevel level={3} />   | **Action (Level 3)** <br />This level is applied to elements that are actionable so it’s visually clear that you can click on the element.<br />Usage:<br />[Tile](/components/structure/tile/)                                                                                                                                                                              | <InlineToken name="boxShadowAction" />        |
-| <ElevationLevel level={3.5} /> | **Action active (Level 3.5)** <br />This level is applied to actionable elements after interacting with them but not taking the action (such as hovering).<br />Usage:<br />[Tile](/components/structure/tile/) on hover/active                                                                                                                                              | <InlineToken name="boxShadowActionActive" />  |
-| <ElevationLevel level={4} />   | **Fixed (Level 4)** <br />This level is applied only to elements that are fixed in position at the top while the page is scrolled.<br />Usage:<br />Fixed header in [Modal](/components/overlay/modal/)<br />[NavigationBar](/components/navigation/navigationbar/)                                                                                                          | <InlineToken name="boxShadowFixed" />         |
-| <ElevationLevel level={4.5} /> | **Fixed reverse (Level 4)** <br />This level is applied only to elements that are fixed in position at the bottom while the page is scrolled.<br />Usage:<br />Fixed footer in [Modal](/components/overlay/modal/)                                                                                                                                                           | <InlineToken name="boxShadowFixedReverse" />  |
-| <ElevationLevel level={5} />   | **Raised (Level 5)** <br />This level is used on components that need attention. The shadow raises the component and users can spot that the element has greater importance because it seems to be visually closer to them.<br />Usage:<br />[Drawer](/components/overlay/drawer/)<br />[Popover](/components/overlay/popover/)<br />[Tooltip](/components/overlay/tooltip/) | <InlineToken name="boxShadowRaised" />        |
-| <ElevationLevel level={5.5} /> | **Raised reverse (Level 5)** <br />This level is applied to elements that are like those in Raised but are stuck to the bottom of the page.<br />Usage:<br /> [Popover](/components/overlay/popover/) on mobile<br />[Tooltip](/components/overlay/tooltip/) on mobile                                                                                                       | <InlineToken name="boxShadowRaisedReverse" /> |
-| <ElevationLevel level={6} />   | **Overlay (Level 6)** <br />This level is used basically only in connection with the Modal component, which also has a background overlay with opacity. The elevation communicates to users that they should focus on only one element.<br />Usage:<br />[Modal](/components/overlay/modal/)                                                                                 | <InlineToken name="boxShadowOverlay" />       |
+| Visual style                            | Elevation levels                                                                                                                                                                                                                                                                                                                                                    | Token                                                  |
+| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| <ElevationLevel level="suppressed" />   | **Suppressed (Level 1)** <br />This level should be used for cases where you want to suppress content that isn’t so important or draw attention to components (such as Tiles) that should have better visibility on a Cloud background.<br />Usage:<br />Suppressed [Modal section](/components/overlay/modal/)                                                     | none                                                   |
+| <ElevationLevel level="flat" />         | **Flat (Level 2)** <br />This level is used for elements on a suppressed or white background. These elements have no action, so the level has a 1 px border instead of an actionable shadow.<br />Usage:<br />[Card](/components/structure/card/)                                                                                                                   | none                                                   |
+| <ElevationLevel level={1} />            | **Level 1** <br />This level is applied to elements that are actionable so it’s visually clear that you can click on the element.<br />Usage:<br />[Tile](/components/structure/tile/)                                                                                                                                                                              | <InlineToken name="elevationLevel1BoxShadow" />        |
+| <ElevationLevel level={2} />            | **Level 2** <br />This level is applied to actionable elements after interacting with them but not taking the action (such as hovering).<br />Usage:<br />[Tile](/components/structure/tile/) on hover/active                                                                                                                                                       | <InlineToken name="elevationLevel2BoxShadow" />        |
+| <ElevationLevel level={3} />            | **Level 3** <br />This level is used on components that need attention. The shadow raises the component and users can spot that the element has greater importance because it seems to be visually closer to them.<br />Usage:<br />[Drawer](/components/overlay/drawer/)<br />[Popover](/components/overlay/popover/)<br />[Tooltip](/components/overlay/tooltip/) | <InlineToken name="elevationLevel3BoxShadow" />        |
+| <ElevationLevel level="3Reverse" />     | **Level 3 reverse** <br />This level is applied to elements that are like those in Raised but are stuck to the bottom of the page.<br />Usage:<br /> [Popover](/components/overlay/popover/) on mobile<br />[Tooltip](/components/overlay/tooltip/) on mobile                                                                                                       | <InlineToken name="elevationLevel3ReverseBoxShadow" /> |
+| <ElevationLevel level={4} />            | **Level 4** <br />This level is used basically only in connection with the Modal component, which also has a background overlay with opacity. The elevation communicates to users that they should focus on only one element.<br />Usage:<br />[Modal](/components/overlay/modal/)                                                                                  | <InlineToken name="elevationLevel4BoxShadow" />        |
+| <ElevationLevel level="fixed" />        | **Fixed (Level 4)** <br />This level is applied only to elements that are fixed in position at the top while the page is scrolled.<br />Usage:<br />Fixed header in [Modal](/components/overlay/modal/)<br />[NavigationBar](/components/navigation/navigationbar/)                                                                                                 | <InlineToken name="elevationFixedBoxShadow" />         |
+| <ElevationLevel level="fixedReverse" /> | **Fixed reverse (Level 4)** <br />This level is applied only to elements that are fixed in position at the bottom while the page is scrolled.<br />Usage:<br />Fixed footer in [Modal](/components/overlay/modal/)                                                                                                                                                  | <InlineToken name="elevationFixedReverseBoxShadow" />  |

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

@@ -90,26 +90,48 @@ And their respective tailwind classes:
 
 We recommend to start adopting the new tokens and classes as soon as possible.
 
+### Elevation
+
+Five elevation (box shadow) tokens were deprecated (to be released in the next major version) and five new ones were added.
+
+Here's the mapping for the new tokens:
+
+- `elevationActionBoxShadow` -> `elevationLevel1BoxShadow`
+- `elevationActionActiveBoxShadow` -> `elevationLevel2BoxShadow`
+- `elevationRaisedBoxShadow` -> `elevationLevel3BoxShadow`
+- `elevationRaisedReverseBoxShadow` -> `elevationLevel3ReverseBoxShadow`
+- `elevationOverlayBoxShadow` -> `elevationLevel4BoxShadow`
+
+And their respective tailwind classes:
+
+- `shadow-action` -> `shadow-level1`
+- `shadow-action-active` -> `shadow-level2`
+- `shadow-raised` -> `shadow-level3`
+- `shadow-raised-reverse` -> `shadow-level3-reverse`
+- `shadow-overlay` -> `shadow-level4`
+
+We recommend to start adopting the new tokens and classes as soon as possible.
+
 ## Box component
 
 Because the Box component props rely heavily on design tokens and their values, some of the prop values have been updated to reflect the changes in the design tokens.
 
 **Before:**
 
 ```jsx
-<Box borderRadius="small">"small" borderRadius</Box>
-<Box borderRadius="normal">"normal" borderRadius</Box>
-<Box borderRadius="large">"large" borderRadius</Box>
-<Box borderRadius="circle">"circle" borderRadius</Box>
+<Box borderRadius="small" elevation="action">…</Box>
+<Box borderRadius="normal" elevation="raised">…</Box>
+<Box borderRadius="large" elevation="raisedReverse">…</Box>
+<Box borderRadius="circle" elevation="overlay">…</Box>
 ```
 
 **Now:**
 
 ```jsx
-<Box borderRadius="50">"50" borderRadius</Box>
-<Box borderRadius="100">"100" borderRadius</Box>
-<Box borderRadius="150">"150" borderRadius</Box>
-<Box borderRadius="full">"full" borderRadius</Box>
+<Box borderRadius="50" elevation="level1">…</Box>
+<Box borderRadius="100" elevation="level3">…</Box>
+<Box borderRadius="150" elevation="level3Reverse">…</Box>
+<Box borderRadius="full" elevation="level4">…</Box>
 ```
 
 ## Codemod

packages/orbit-components/src/Accordion/AccordionSection/components/SectionFooter.tsx

@@ -8,7 +8,7 @@ interface Props extends Common.Globals {
 
 const AccordionSectionFooter = ({ children, dataTest }: Props) => (
   <div
-    className="p-lg bg-white-normal shadow-action-active sticky bottom-0 flex"
+    className="p-lg bg-white-normal shadow-level2 sticky bottom-0 flex"
     data-test={dataTest && `${dataTest}Footer`}
   >
     {children}

packages/orbit-components/src/Box/Box.stories.tsx

@@ -60,12 +60,13 @@ enum TEXT_ALIGN {
 }
 
 enum ELEVATION {
-  ACTION = "action",
   FIXED = "fixed",
-  RAISED = "raised",
-  OVERLAY = "overlay",
   FIXEDREVERSE = "fixedReverse",
-  RAISEDREVERSE = "raisedReverse",
+  LEVEL_1 = "level1",
+  LEVEL_2 = "level2",
+  LEVEL_3 = "level3",
+  LEVEL_3REVERSE = "level3Reverse",
+  LEVEL_4 = "level4",
 }
 
 enum BORDER_RADIUS {
@@ -416,7 +417,7 @@ export const Elevation = ({ elevation }) => {
 };
 
 Elevation.args = {
-  elevation: ELEVATION.ACTION,
+  elevation: ELEVATION.LEVEL_1,
 };
 
 Elevation.argTypes = {
@@ -570,7 +571,7 @@ Playground.args = {
   maxWidth: "300px",
   height: "auto",
   maxHeight: "100px",
-  elevation: ELEVATION.ACTION,
+  elevation: ELEVATION.LEVEL_1,
   borderRadius: BORDER_RADIUS.ONE_HUNDRED,
   position: POSITION.RELATIVE,
   top: "10px",

packages/orbit-components/src/Box/README.md

@@ -143,12 +143,19 @@ All this properties - objects have the some own properties and none is required.
 
 ### elevation
 
-| elevation   |
-| :---------- |
-| `"action"`  |
-| `"fixed"`   |
-| `"overlay"` |
-| `"raised"`  |
+| elevation                                                  |
+| :--------------------------------------------------------- |
+| `"action"` – **deprecated (use `"level1"`)**               |
+| `"fixed"`                                                  |
+| `"fixedReverse"`                                           |
+| `"overlay"` – **deprecated (use `"level4"`)**              |
+| `"raised"` – **deprecated (use `"level3"`)**               |
+| `"raisedReverse"` – **deprecated (use `"level3Reverse"`)** |
+| `"level1"`                                                 |
+| `"level2"`                                                 |
+| `"level3"`                                                 |
+| `"level3Reverse"`                                          |
+| `"level4"`                                                 |
 
 ### spacingObject
 

packages/orbit-components/src/Box/TYPESCRIPT_TEMPLATE.template

@@ -10,7 +10,12 @@ export type Elevation =
   | "raised"
   | "overlay"
   | "fixedReverse"
-  | "raisedReverse";
+  | "raisedReverse"
+  | "level1"
+  | "level2"
+  | "level3"
+  | "level3Reverse"
+  | "level4";
 
 export type ColorTokens =%TOKENS%
 

packages/orbit-components/src/Box/__tests__/index.test.tsx

@@ -274,11 +274,17 @@ describe("#Box", () => {
     const testEl = (idx: number) => render(test[idx]).getByTestId(`${dataTest}-${idx}`);
 
     expect(testEl(0)).toHaveStyle({
-      "--tw-shadow": theme.orbit.boxShadowAction,
+      "--tw-shadow": theme.orbit.elevationActionBoxShadow,
     });
-    expect(testEl(1)).toHaveStyle({ "--tw-shadow": theme.orbit.boxShadowFixed });
-    expect(testEl(2)).toHaveStyle({ "--tw-shadow": theme.orbit.boxShadowRaised });
-    expect(testEl(3)).toHaveStyle({ "--tw-shadow": theme.orbit.boxShadowOverlay });
-    expect(testEl(4)).toHaveStyle({ "--tw-shadow": theme.orbit.boxShadowFixedReverse });
+    expect(testEl(1)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationFixedBoxShadow });
+    expect(testEl(2)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationRaisedBoxShadow });
+    expect(testEl(3)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationOverlayBoxShadow });
+    expect(testEl(4)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationFixedReverseBoxShadow });
+    expect(testEl(5)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationRaisedReverseBoxShadow });
+    expect(testEl(6)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel1BoxShadow });
+    expect(testEl(7)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel2BoxShadow });
+    expect(testEl(8)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel3BoxShadow });
+    expect(testEl(9)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel3ReverseBoxShadow });
+    expect(testEl(10)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel4BoxShadow });
   });
 });