From fca2bb8e48f738ac2f2d20d80c07923a657a6f15 Mon Sep 17 00:00:00 2001
From: Marco Vidal Garcia <marco.vidal@kiwi.com>
Date: Fri, 2 Aug 2024 16:25:45 +0200
Subject: [PATCH 1/9] feat(tokens): add new elevation tokens and deprecate
 others

- New tokens: level1, level2, level3, level3-reverse, level4
- Deprecated tokens: action, action-active, raised, raised-reverse, overlay
---
 .../output/deprecated-tokens.json             |  50 +++++
 .../output/docs-tokens.json                   | 160 ++++++++++++++--
 .../orbit-design-tokens/output/tokens.css     |   5 +
 .../orbit-design-tokens/output/tokens.less    |   5 +
 .../orbit-design-tokens/output/tokens.scss    |   9 +
 .../orbit-design-tokens/output/tokens.styl    |   5 +
 .../orbit-design-tokens/output/tokens.xml     |  20 ++
 .../__snapshots__/index.test.ts.snap          |   5 +
 .../definitions/global/elevations.json        | 175 +++++++++++++++++-
 .../src/js/createTokens.ts                    |  65 +++++++
 10 files changed, 474 insertions(+), 25 deletions(-)

diff --git a/packages/orbit-design-tokens/output/deprecated-tokens.json b/packages/orbit-design-tokens/output/deprecated-tokens.json
index 3b219ac52d..1a05e96828 100644
--- a/packages/orbit-design-tokens/output/deprecated-tokens.json
+++ b/packages/orbit-design-tokens/output/deprecated-tokens.json
@@ -1947,6 +1947,56 @@
     "category": "Breakpoints",
     "version": "6.0.0"
   },
+  "elevationActionBackground": {
+    "replacement": "paletteWhiteNormal",
+    "category": "Colors",
+    "version": "9.0.0"
+  },
+  "elevationActionBoxShadow": {
+    "replacement": "elevationLevel1BoxShadow",
+    "category": "Box shadow",
+    "version": "9.0.0"
+  },
+  "elevationActionActiveBackground": {
+    "replacement": "paletteWhiteNormal",
+    "category": "Colors",
+    "version": "9.0.0"
+  },
+  "elevationActionActiveBoxShadow": {
+    "replacement": "elevationLevel2BoxShadow",
+    "category": "Box shadow",
+    "version": "9.0.0"
+  },
+  "elevationRaisedBackground": {
+    "replacement": "paletteWhiteNormal",
+    "category": "Colors",
+    "version": "9.0.0"
+  },
+  "elevationRaisedBoxShadow": {
+    "replacement": "elevationLevel3BoxShadow",
+    "category": "Box shadow",
+    "version": "9.0.0"
+  },
+  "elevationRaisedReverseBackground": {
+    "replacement": "paletteWhiteNormal",
+    "category": "Colors",
+    "version": "9.0.0"
+  },
+  "elevationRaisedReverseBoxShadow": {
+    "replacement": "elevationLevel3ReverseBoxShadow",
+    "category": "Box shadow",
+    "version": "9.0.0"
+  },
+  "elevationOverlayBackground": {
+    "replacement": "paletteWhiteNormal",
+    "category": "Colors",
+    "version": "9.0.0"
+  },
+  "elevationOverlayBoxShadow": {
+    "replacement": "elevationLevel4BoxShadow",
+    "category": "Box shadow",
+    "version": "9.0.0"
+  },
   "backgroundBody": {
     "replacement": "elevationSuppressedBackground",
     "category": "Background colors",
diff --git a/packages/orbit-design-tokens/output/docs-tokens.json b/packages/orbit-design-tokens/output/docs-tokens.json
index 9280bd2544..b2bfcb936c 100644
--- a/packages/orbit-design-tokens/output/docs-tokens.json
+++ b/packages/orbit-design-tokens/output/docs-tokens.json
@@ -16543,8 +16543,8 @@
   "elevationActionBackground": {
     "type": "color",
     "category": "elevation",
-    "deprecated": false,
-    "replacement": null,
+    "deprecated": true,
+    "replacement": "paletteWhiteNormal",
     "schema": {
       "namespace": "global",
       "object": "elevation",
@@ -16567,8 +16567,8 @@
   "elevationActionBoxShadow": {
     "type": "box-shadow",
     "category": "elevation",
-    "deprecated": false,
-    "replacement": null,
+    "deprecated": true,
+    "replacement": "elevationLevel1BoxShadow",
     "schema": {
       "namespace": "global",
       "object": "elevation",
@@ -16588,11 +16588,35 @@
       "value": "0 0 2px 0 rgba(37, 42, 49, 0.16), 0 1px 4px 0 rgba(37, 42, 49, 0.12)"
     }
   },
-  "elevationActionActiveBackground": {
-    "type": "color",
+  "elevationLevel1BoxShadow": {
+    "type": "box-shadow",
     "category": "elevation",
     "deprecated": false,
     "replacement": null,
+    "schema": {
+      "namespace": "global",
+      "object": "elevation",
+      "variant": "level1",
+      "subVariant": "box-shadow"
+    },
+    "javascript": {
+      "name": "elevationLevel1BoxShadow",
+      "value": "0 0 2px 0 rgba(37, 42, 49, 0.16), 0 1px 4px 0 rgba(37, 42, 49, 0.12)"
+    },
+    "foundation": {
+      "name": "elevationLevel1BoxShadow",
+      "value": "0 0 2px 0 color(#252A31, opacity: 16), 0 1px 4px 0 color(#252A31, opacity: 12)"
+    },
+    "scss": {
+      "name": "elevationLevel1BoxShadow",
+      "value": "0 0 2px 0 rgba(37, 42, 49, 0.16), 0 1px 4px 0 rgba(37, 42, 49, 0.12)"
+    }
+  },
+  "elevationActionActiveBackground": {
+    "type": "color",
+    "category": "elevation",
+    "deprecated": true,
+    "replacement": "paletteWhiteNormal",
     "schema": {
       "namespace": "global",
       "object": "elevation",
@@ -16615,8 +16639,8 @@
   "elevationActionActiveBoxShadow": {
     "type": "box-shadow",
     "category": "elevation",
-    "deprecated": false,
-    "replacement": null,
+    "deprecated": true,
+    "replacement": "elevationLevel2BoxShadow",
     "schema": {
       "namespace": "global",
       "object": "elevation",
@@ -16636,6 +16660,30 @@
       "value": "0 1px 4px 0 rgba(37, 42, 49, 0.16), 0 4px 8px 0 rgba(37, 42, 49, 0.12)"
     }
   },
+  "elevationLevel2BoxShadow": {
+    "type": "box-shadow",
+    "category": "elevation",
+    "deprecated": false,
+    "replacement": null,
+    "schema": {
+      "namespace": "global",
+      "object": "elevation",
+      "variant": "level2",
+      "subVariant": "box-shadow"
+    },
+    "javascript": {
+      "name": "elevationLevel2BoxShadow",
+      "value": "0 1px 4px 0 rgba(37, 42, 49, 0.16), 0 4px 8px 0 rgba(37, 42, 49, 0.12)"
+    },
+    "foundation": {
+      "name": "elevationLevel2BoxShadow",
+      "value": "0 1px 4px 0 color(#252A31, opacity: 16), 0 4px 8px 0 color(#252A31, opacity: 12)"
+    },
+    "scss": {
+      "name": "elevationLevel2BoxShadow",
+      "value": "0 1px 4px 0 rgba(37, 42, 49, 0.16), 0 4px 8px 0 rgba(37, 42, 49, 0.12)"
+    }
+  },
   "elevationFixedBackground": {
     "type": "color",
     "category": "elevation",
@@ -16735,8 +16783,8 @@
   "elevationRaisedBackground": {
     "type": "color",
     "category": "elevation",
-    "deprecated": false,
-    "replacement": null,
+    "deprecated": true,
+    "replacement": "paletteWhiteNormal",
     "schema": {
       "namespace": "global",
       "object": "elevation",
@@ -16759,8 +16807,8 @@
   "elevationRaisedBoxShadow": {
     "type": "box-shadow",
     "category": "elevation",
-    "deprecated": false,
-    "replacement": null,
+    "deprecated": true,
+    "replacement": "elevationLevel3BoxShadow",
     "schema": {
       "namespace": "global",
       "object": "elevation",
@@ -16780,11 +16828,35 @@
       "value": "0 4px 8px 0 rgba(37, 42, 49, 0.16), 0 8px 24px 0 rgba(37, 42, 49, 0.24)"
     }
   },
-  "elevationRaisedReverseBackground": {
-    "type": "color",
+  "elevationLevel3BoxShadow": {
+    "type": "box-shadow",
     "category": "elevation",
     "deprecated": false,
     "replacement": null,
+    "schema": {
+      "namespace": "global",
+      "object": "elevation",
+      "variant": "level3",
+      "subVariant": "box-shadow"
+    },
+    "javascript": {
+      "name": "elevationLevel3BoxShadow",
+      "value": "0 4px 8px 0 rgba(37, 42, 49, 0.16), 0 8px 24px 0 rgba(37, 42, 49, 0.24)"
+    },
+    "foundation": {
+      "name": "elevationLevel3BoxShadow",
+      "value": "0 4px 8px 0 color(#252A31, opacity: 16), 0 8px 24px 0 color(#252A31, opacity: 24)"
+    },
+    "scss": {
+      "name": "elevationLevel3BoxShadow",
+      "value": "0 4px 8px 0 rgba(37, 42, 49, 0.16), 0 8px 24px 0 rgba(37, 42, 49, 0.24)"
+    }
+  },
+  "elevationRaisedReverseBackground": {
+    "type": "color",
+    "category": "elevation",
+    "deprecated": true,
+    "replacement": "paletteWhiteNormal",
     "schema": {
       "namespace": "global",
       "object": "elevation",
@@ -16807,8 +16879,8 @@
   "elevationRaisedReverseBoxShadow": {
     "type": "box-shadow",
     "category": "elevation",
-    "deprecated": false,
-    "replacement": null,
+    "deprecated": true,
+    "replacement": "elevationLevel3ReverseBoxShadow",
     "schema": {
       "namespace": "global",
       "object": "elevation",
@@ -16828,11 +16900,35 @@
       "value": "0 -4px 8px 0 rgba(37, 42, 49, 0.16), 0 -8px 24px 0 rgba(37, 42, 49, 0.24)"
     }
   },
-  "elevationOverlayBackground": {
-    "type": "color",
+  "elevationLevel3ReverseBoxShadow": {
+    "type": "box-shadow",
     "category": "elevation",
     "deprecated": false,
     "replacement": null,
+    "schema": {
+      "namespace": "global",
+      "object": "elevation",
+      "variant": "level3-reverse",
+      "subVariant": "box-shadow"
+    },
+    "javascript": {
+      "name": "elevationLevel3ReverseBoxShadow",
+      "value": "0 -4px 8px 0 rgba(37, 42, 49, 0.16), 0 -8px 24px 0 rgba(37, 42, 49, 0.24)"
+    },
+    "foundation": {
+      "name": "elevationLevel3ReverseBoxShadow",
+      "value": "0 -4px 8px 0 color(#252A31, opacity: 16), 0 -8px 24px 0 color(#252A31, opacity: 24)"
+    },
+    "scss": {
+      "name": "elevationLevel3ReverseBoxShadow",
+      "value": "0 -4px 8px 0 rgba(37, 42, 49, 0.16), 0 -8px 24px 0 rgba(37, 42, 49, 0.24)"
+    }
+  },
+  "elevationOverlayBackground": {
+    "type": "color",
+    "category": "elevation",
+    "deprecated": true,
+    "replacement": "paletteWhiteNormal",
     "schema": {
       "namespace": "global",
       "object": "elevation",
@@ -16855,8 +16951,8 @@
   "elevationOverlayBoxShadow": {
     "type": "box-shadow",
     "category": "elevation",
-    "deprecated": false,
-    "replacement": null,
+    "deprecated": true,
+    "replacement": "elevationLevel4BoxShadow",
     "schema": {
       "namespace": "global",
       "object": "elevation",
@@ -16876,6 +16972,30 @@
       "value": "0 12px 24px -4px rgba(37, 42, 49, 0.24), 0 8px 60px 0 rgba(37, 42, 49, 0.32)"
     }
   },
+  "elevationLevel4BoxShadow": {
+    "type": "box-shadow",
+    "category": "elevation",
+    "deprecated": false,
+    "replacement": null,
+    "schema": {
+      "namespace": "global",
+      "object": "elevation",
+      "variant": "level4",
+      "subVariant": "box-shadow"
+    },
+    "javascript": {
+      "name": "elevationLevel4BoxShadow",
+      "value": "0 12px 24px -4px rgba(37, 42, 49, 0.24), 0 8px 60px 0 rgba(37, 42, 49, 0.32)"
+    },
+    "foundation": {
+      "name": "elevationLevel4BoxShadow",
+      "value": "0 12px 24px -4px color(#252A31, opacity: 24), 0 8px 60px 0 color(#252A31, opacity: 32)"
+    },
+    "scss": {
+      "name": "elevationLevel4BoxShadow",
+      "value": "0 12px 24px -4px rgba(37, 42, 49, 0.24), 0 8px 60px 0 rgba(37, 42, 49, 0.32)"
+    }
+  },
   "backgroundBody": {
     "type": "color",
     "deprecated": true,
diff --git a/packages/orbit-design-tokens/output/tokens.css b/packages/orbit-design-tokens/output/tokens.css
index c16a5dcb82..0e297c1c8f 100644
--- a/packages/orbit-design-tokens/output/tokens.css
+++ b/packages/orbit-design-tokens/output/tokens.css
@@ -719,18 +719,23 @@
   --elevation-flat-border-size: 1;
   --elevation-action-background: rgb(255, 255, 255);
   --elevation-action-box-shadow: rgb(37, 42, 49);
+  --elevation-level-1-box-shadow: rgb(37, 42, 49);
   --elevation-action-active-background: rgb(255, 255, 255);
   --elevation-action-active-box-shadow: rgb(37, 42, 49);
+  --elevation-level-2-box-shadow: rgb(37, 42, 49);
   --elevation-fixed-background: rgb(255, 255, 255);
   --elevation-fixed-box-shadow: rgb(37, 42, 49);
   --elevation-fixed-reverse-background: rgb(255, 255, 255);
   --elevation-fixed-reverse-box-shadow: rgb(37, 42, 49);
   --elevation-raised-background: rgb(255, 255, 255);
   --elevation-raised-box-shadow: rgb(37, 42, 49);
+  --elevation-level-3-box-shadow: rgb(37, 42, 49);
   --elevation-raised-reverse-background: rgb(255, 255, 255);
   --elevation-raised-reverse-box-shadow: rgb(37, 42, 49);
+  --elevation-level-3-reverse-box-shadow: rgb(37, 42, 49);
   --elevation-overlay-background: rgb(255, 255, 255);
   --elevation-overlay-box-shadow: rgb(37, 42, 49);
+  --elevation-level-4-box-shadow: rgb(37, 42, 49);
   --background-body: rgb(245, 247, 249);
   --box-shadow-action: rgb(37, 42, 49);
   --box-shadow-action-active: rgb(37, 42, 49);
diff --git a/packages/orbit-design-tokens/output/tokens.less b/packages/orbit-design-tokens/output/tokens.less
index a31afa5666..554eb98209 100644
--- a/packages/orbit-design-tokens/output/tokens.less
+++ b/packages/orbit-design-tokens/output/tokens.less
@@ -718,18 +718,23 @@
 @elevation-flat-border-size: 1;
 @elevation-action-background: rgb(255, 255, 255);
 @elevation-action-box-shadow: rgb(37, 42, 49);
+@elevation-level-1-box-shadow: rgb(37, 42, 49);
 @elevation-action-active-background: rgb(255, 255, 255);
 @elevation-action-active-box-shadow: rgb(37, 42, 49);
+@elevation-level-2-box-shadow: rgb(37, 42, 49);
 @elevation-fixed-background: rgb(255, 255, 255);
 @elevation-fixed-box-shadow: rgb(37, 42, 49);
 @elevation-fixed-reverse-background: rgb(255, 255, 255);
 @elevation-fixed-reverse-box-shadow: rgb(37, 42, 49);
 @elevation-raised-background: rgb(255, 255, 255);
 @elevation-raised-box-shadow: rgb(37, 42, 49);
+@elevation-level-3-box-shadow: rgb(37, 42, 49);
 @elevation-raised-reverse-background: rgb(255, 255, 255);
 @elevation-raised-reverse-box-shadow: rgb(37, 42, 49);
+@elevation-level-3-reverse-box-shadow: rgb(37, 42, 49);
 @elevation-overlay-background: rgb(255, 255, 255);
 @elevation-overlay-box-shadow: rgb(37, 42, 49);
+@elevation-level-4-box-shadow: rgb(37, 42, 49);
 @background-body: rgb(245, 247, 249);
 @box-shadow-action: rgb(37, 42, 49);
 @box-shadow-action-active: rgb(37, 42, 49);
diff --git a/packages/orbit-design-tokens/output/tokens.scss b/packages/orbit-design-tokens/output/tokens.scss
index d99f578766..25334fd443 100644
--- a/packages/orbit-design-tokens/output/tokens.scss
+++ b/packages/orbit-design-tokens/output/tokens.scss
@@ -731,9 +731,12 @@ $elevation-flat-border-color: rgb(232, 237, 241);
 $elevation-flat-border-size: 1px;
 $elevation-action-background: rgb(255, 255, 255);
 $elevation-action-box-shadow: 0 0 2px 0 rgba(37, 42, 49, 0.16), 0 1px 4px 0 rgba(37, 42, 49, 0.12);
+$elevation-level-1-box-shadow: 0 0 2px 0 rgba(37, 42, 49, 0.16), 0 1px 4px 0 rgba(37, 42, 49, 0.12);
 $elevation-action-active-background: rgb(255, 255, 255);
 $elevation-action-active-box-shadow: 0 1px 4px 0 rgba(37, 42, 49, 0.16),
   0 4px 8px 0 rgba(37, 42, 49, 0.12);
+$elevation-level-2-box-shadow: 0 1px 4px 0 rgba(37, 42, 49, 0.16),
+  0 4px 8px 0 rgba(37, 42, 49, 0.12);
 $elevation-fixed-background: rgb(255, 255, 255);
 $elevation-fixed-box-shadow: 0 0 2px 0 rgba(37, 42, 49, 0.16), 0 2px 4px 0 rgba(37, 42, 49, 0.12);
 $elevation-fixed-reverse-background: rgb(255, 255, 255);
@@ -742,12 +745,18 @@ $elevation-fixed-reverse-box-shadow: 0 0 2px 0 rgba(37, 42, 49, 0.16),
 $elevation-raised-background: rgb(255, 255, 255);
 $elevation-raised-box-shadow: 0 4px 8px 0 rgba(37, 42, 49, 0.16),
   0 8px 24px 0 rgba(37, 42, 49, 0.24);
+$elevation-level-3-box-shadow: 0 4px 8px 0 rgba(37, 42, 49, 0.16),
+  0 8px 24px 0 rgba(37, 42, 49, 0.24);
 $elevation-raised-reverse-background: rgb(255, 255, 255);
 $elevation-raised-reverse-box-shadow: 0 -4px 8px 0 rgba(37, 42, 49, 0.16),
   0 -8px 24px 0 rgba(37, 42, 49, 0.24);
+$elevation-level-3-reverse-box-shadow: 0 -4px 8px 0 rgba(37, 42, 49, 0.16),
+  0 -8px 24px 0 rgba(37, 42, 49, 0.24);
 $elevation-overlay-background: rgb(255, 255, 255);
 $elevation-overlay-box-shadow: 0 12px 24px -4px rgba(37, 42, 49, 0.24),
   0 8px 60px 0 rgba(37, 42, 49, 0.32);
+$elevation-level-4-box-shadow: 0 12px 24px -4px rgba(37, 42, 49, 0.24),
+  0 8px 60px 0 rgba(37, 42, 49, 0.32);
 $background-body: rgb(245, 247, 249);
 $box-shadow-action: 0 0 2px 0 rgba(37, 42, 49, 0.16), 0 1px 4px 0 rgba(37, 42, 49, 0.12);
 $box-shadow-action-active: 0 1px 4px 0 rgba(37, 42, 49, 0.16), 0 4px 8px 0 rgba(37, 42, 49, 0.12);
diff --git a/packages/orbit-design-tokens/output/tokens.styl b/packages/orbit-design-tokens/output/tokens.styl
index 7961ce0e7f..4d48f0a002 100644
--- a/packages/orbit-design-tokens/output/tokens.styl
+++ b/packages/orbit-design-tokens/output/tokens.styl
@@ -718,18 +718,23 @@ $elevation-flat-border-color= rgb(232, 237, 241);
 $elevation-flat-border-size= 1;
 $elevation-action-background= rgb(255, 255, 255);
 $elevation-action-box-shadow= rgb(37, 42, 49);
+$elevation-level-1-box-shadow= rgb(37, 42, 49);
 $elevation-action-active-background= rgb(255, 255, 255);
 $elevation-action-active-box-shadow= rgb(37, 42, 49);
+$elevation-level-2-box-shadow= rgb(37, 42, 49);
 $elevation-fixed-background= rgb(255, 255, 255);
 $elevation-fixed-box-shadow= rgb(37, 42, 49);
 $elevation-fixed-reverse-background= rgb(255, 255, 255);
 $elevation-fixed-reverse-box-shadow= rgb(37, 42, 49);
 $elevation-raised-background= rgb(255, 255, 255);
 $elevation-raised-box-shadow= rgb(37, 42, 49);
+$elevation-level-3-box-shadow= rgb(37, 42, 49);
 $elevation-raised-reverse-background= rgb(255, 255, 255);
 $elevation-raised-reverse-box-shadow= rgb(37, 42, 49);
+$elevation-level-3-reverse-box-shadow= rgb(37, 42, 49);
 $elevation-overlay-background= rgb(255, 255, 255);
 $elevation-overlay-box-shadow= rgb(37, 42, 49);
+$elevation-level-4-box-shadow= rgb(37, 42, 49);
 $background-body= rgb(245, 247, 249);
 $box-shadow-action= rgb(37, 42, 49);
 $box-shadow-action-active= rgb(37, 42, 49);
diff --git a/packages/orbit-design-tokens/output/tokens.xml b/packages/orbit-design-tokens/output/tokens.xml
index fe8dafb8d2..d190e76ed2 100644
--- a/packages/orbit-design-tokens/output/tokens.xml
+++ b/packages/orbit-design-tokens/output/tokens.xml
@@ -2879,6 +2879,10 @@
     <name>elevationActionBoxShadow</name>
     <value>#252A31</value>
   </token>
+  <token>
+    <name>elevationLevel1BoxShadow</name>
+    <value>#252A31</value>
+  </token>
   <token>
     <name>elevationActionActiveBackground</name>
     <value>#FFFFFF</value>
@@ -2887,6 +2891,10 @@
     <name>elevationActionActiveBoxShadow</name>
     <value>#252A31</value>
   </token>
+  <token>
+    <name>elevationLevel2BoxShadow</name>
+    <value>#252A31</value>
+  </token>
   <token>
     <name>elevationFixedBackground</name>
     <value>#FFFFFF</value>
@@ -2911,6 +2919,10 @@
     <name>elevationRaisedBoxShadow</name>
     <value>#252A31</value>
   </token>
+  <token>
+    <name>elevationLevel3BoxShadow</name>
+    <value>#252A31</value>
+  </token>
   <token>
     <name>elevationRaisedReverseBackground</name>
     <value>#FFFFFF</value>
@@ -2919,6 +2931,10 @@
     <name>elevationRaisedReverseBoxShadow</name>
     <value>#252A31</value>
   </token>
+  <token>
+    <name>elevationLevel3ReverseBoxShadow</name>
+    <value>#252A31</value>
+  </token>
   <token>
     <name>elevationOverlayBackground</name>
     <value>#FFFFFF</value>
@@ -2927,6 +2943,10 @@
     <name>elevationOverlayBoxShadow</name>
     <value>#252A31</value>
   </token>
+  <token>
+    <name>elevationLevel4BoxShadow</name>
+    <value>#252A31</value>
+  </token>
   <token>
     <name>backgroundBody</name>
     <value>#F5F7F9</value>
diff --git a/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.ts.snap b/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.ts.snap
index d68b68dd91..17d6681618 100644
--- a/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.ts.snap
@@ -477,6 +477,11 @@ exports[`defaultTokens should match snapshot 1`] = `
   "elevationFlatBackground": "#FFFFFF",
   "elevationFlatBorderColor": "#E8EDF1",
   "elevationFlatBorderSize": "1px",
+  "elevationLevel1BoxShadow": "0 0 2px 0 rgba(37, 42, 49, 0.16),0 1px 4px 0 rgba(37, 42, 49, 0.12)",
+  "elevationLevel2BoxShadow": "0 1px 4px 0 rgba(37, 42, 49, 0.16),0 4px 8px 0 rgba(37, 42, 49, 0.12)",
+  "elevationLevel3BoxShadow": "0 4px 8px 0 rgba(37, 42, 49, 0.16),0 8px 24px 0 rgba(37, 42, 49, 0.24)",
+  "elevationLevel3ReverseBoxShadow": "0 -4px 8px 0 rgba(37, 42, 49, 0.16),0 -8px 24px 0 rgba(37, 42, 49, 0.24)",
+  "elevationLevel4BoxShadow": "0 12px 24px -4px rgba(37, 42, 49, 0.24),0 8px 60px 0 rgba(37, 42, 49, 0.32)",
   "elevationOverlayBackground": "#FFFFFF",
   "elevationOverlayBoxShadow": "0 12px 24px -4px rgba(37, 42, 49, 0.24),0 8px 60px 0 rgba(37, 42, 49, 0.32)",
   "elevationRaisedBackground": "#FFFFFF",
diff --git a/packages/orbit-design-tokens/src/dictionary/definitions/global/elevations.json b/packages/orbit-design-tokens/src/dictionary/definitions/global/elevations.json
index 0b82ddc574..b5c017ace2 100644
--- a/packages/orbit-design-tokens/src/dictionary/definitions/global/elevations.json
+++ b/packages/orbit-design-tokens/src/dictionary/definitions/global/elevations.json
@@ -29,8 +29,41 @@
         "background": {
           "type": "color",
           "category": "elevation",
-          "value": "{foundation.palette.white.normal}"
+          "value": "{foundation.palette.white.normal}",
+          "deprecated": true,
+          "deprecated-replace": "{foundation.palette.white.normal}",
+          "deprecated-version": "9.0.0"
         },
+        "box-shadow": {
+          "type": "box-shadow",
+          "category": "elevation",
+          "value": "{foundation.palette.ink.dark}",
+          "attributes": {
+            "box-shadow": [
+              {
+                "x": 0,
+                "y": 0,
+                "blur": 2,
+                "spread": 0,
+                "color": "{foundation.palette.ink.dark}",
+                "opacity": 16
+              },
+              {
+                "x": 0,
+                "y": 1,
+                "blur": 4,
+                "spread": 0,
+                "color": "{foundation.palette.ink.dark}",
+                "opacity": 12
+              }
+            ]
+          },
+          "deprecated": true,
+          "deprecated-replace": "{global.elevation.level1.box-shadow}",
+          "deprecated-version": "9.0.0"
+        }
+      },
+      "level1": {
         "box-shadow": {
           "type": "box-shadow",
           "category": "elevation",
@@ -61,8 +94,41 @@
         "background": {
           "type": "color",
           "category": "elevation",
-          "value": "{foundation.palette.white.normal}"
+          "value": "{foundation.palette.white.normal}",
+          "deprecated": true,
+          "deprecated-replace": "{foundation.palette.white.normal}",
+          "deprecated-version": "9.0.0"
         },
+        "box-shadow": {
+          "type": "box-shadow",
+          "category": "elevation",
+          "value": "{foundation.palette.ink.dark}",
+          "attributes": {
+            "box-shadow": [
+              {
+                "x": 0,
+                "y": 1,
+                "blur": 4,
+                "spread": 0,
+                "color": "{foundation.palette.ink.dark}",
+                "opacity": 16
+              },
+              {
+                "x": 0,
+                "y": 4,
+                "blur": 8,
+                "spread": 0,
+                "color": "{foundation.palette.ink.dark}",
+                "opacity": 12
+              }
+            ]
+          },
+          "deprecated": true,
+          "deprecated-replace": "{global.elevation.level2.box-shadow}",
+          "deprecated-version": "9.0.0"
+        }
+      },
+      "level2": {
         "box-shadow": {
           "type": "box-shadow",
           "category": "elevation",
@@ -157,8 +223,41 @@
         "background": {
           "type": "color",
           "category": "elevation",
-          "value": "{foundation.palette.white.normal}"
+          "value": "{foundation.palette.white.normal}",
+          "deprecated": true,
+          "deprecated-replace": "{foundation.palette.white.normal}",
+          "deprecated-version": "9.0.0"
         },
+        "box-shadow": {
+          "type": "box-shadow",
+          "category": "elevation",
+          "value": "{foundation.palette.ink.dark}",
+          "attributes": {
+            "box-shadow": [
+              {
+                "x": 0,
+                "y": 4,
+                "blur": 8,
+                "spread": 0,
+                "color": "{foundation.palette.ink.dark}",
+                "opacity": 16
+              },
+              {
+                "x": 0,
+                "y": 8,
+                "blur": 24,
+                "spread": 0,
+                "color": "{foundation.palette.ink.dark}",
+                "opacity": 24
+              }
+            ]
+          },
+          "deprecated": true,
+          "deprecated-replace": "{global.elevation.level3.box-shadow}",
+          "deprecated-version": "9.0.0"
+        }
+      },
+      "level3": {
         "box-shadow": {
           "type": "box-shadow",
           "category": "elevation",
@@ -189,8 +288,41 @@
         "background": {
           "type": "color",
           "category": "elevation",
-          "value": "{foundation.palette.white.normal}"
+          "value": "{foundation.palette.white.normal}",
+          "deprecated": true,
+          "deprecated-replace": "{foundation.palette.white.normal}",
+          "deprecated-version": "9.0.0"
         },
+        "box-shadow": {
+          "type": "box-shadow",
+          "category": "elevation",
+          "value": "{foundation.palette.ink.dark}",
+          "attributes": {
+            "box-shadow": [
+              {
+                "x": 0,
+                "y": -4,
+                "blur": 8,
+                "spread": 0,
+                "color": "{foundation.palette.ink.dark}",
+                "opacity": 16
+              },
+              {
+                "x": 0,
+                "y": -8,
+                "blur": 24,
+                "spread": 0,
+                "color": "{foundation.palette.ink.dark}",
+                "opacity": 24
+              }
+            ]
+          },
+          "deprecated": true,
+          "deprecated-replace": "{global.elevation.level3-reverse.box-shadow}",
+          "deprecated-version": "9.0.0"
+        }
+      },
+      "level3-reverse": {
         "box-shadow": {
           "type": "box-shadow",
           "category": "elevation",
@@ -221,8 +353,41 @@
         "background": {
           "type": "color",
           "category": "elevation",
-          "value": "{foundation.palette.white.normal}"
+          "value": "{foundation.palette.white.normal}",
+          "deprecated": true,
+          "deprecated-replace": "{foundation.palette.white.normal}",
+          "deprecated-version": "9.0.0"
         },
+        "box-shadow": {
+          "type": "box-shadow",
+          "category": "elevation",
+          "value": "{foundation.palette.ink.dark}",
+          "attributes": {
+            "box-shadow": [
+              {
+                "x": 0,
+                "y": 12,
+                "blur": 24,
+                "spread": -4,
+                "color": "{foundation.palette.ink.dark}",
+                "opacity": 24
+              },
+              {
+                "x": 0,
+                "y": 8,
+                "blur": 60,
+                "spread": 0,
+                "color": "{foundation.palette.ink.dark}",
+                "opacity": 32
+              }
+            ]
+          },
+          "deprecated": true,
+          "deprecated-replace": "{global.elevation.level4.box-shadow}",
+          "deprecated-version": "9.0.0"
+        }
+      },
+      "level4": {
         "box-shadow": {
           "type": "box-shadow",
           "category": "elevation",
diff --git a/packages/orbit-design-tokens/src/js/createTokens.ts b/packages/orbit-design-tokens/src/js/createTokens.ts
index df368fedc0..5b655251a9 100644
--- a/packages/orbit-design-tokens/src/js/createTokens.ts
+++ b/packages/orbit-design-tokens/src/js/createTokens.ts
@@ -734,18 +734,23 @@ export interface Tokens {
   elevationFlatBorderSize: string;
   elevationActionBackground: string;
   elevationActionBoxShadow: string;
+  elevationLevel1BoxShadow: string;
   elevationActionActiveBackground: string;
   elevationActionActiveBoxShadow: string;
+  elevationLevel2BoxShadow: string;
   elevationFixedBackground: string;
   elevationFixedBoxShadow: string;
   elevationFixedReverseBackground: string;
   elevationFixedReverseBoxShadow: string;
   elevationRaisedBackground: string;
   elevationRaisedBoxShadow: string;
+  elevationLevel3BoxShadow: string;
   elevationRaisedReverseBackground: string;
   elevationRaisedReverseBoxShadow: string;
+  elevationLevel3ReverseBoxShadow: string;
   elevationOverlayBackground: string;
   elevationOverlayBoxShadow: string;
+  elevationLevel4BoxShadow: string;
   backgroundBody: string;
   boxShadowAction: string;
   boxShadowActionActive: string;
@@ -1657,6 +1662,18 @@ const createTokens: CreateTokens = foundation => ({
       inset: false,
     },
   ]),
+  elevationLevel1BoxShadow: boxShadow([
+    {
+      def: ["0", "0", "2px", "0"],
+      color: transparentColor(foundation.palette.ink.dark, 16),
+      inset: false,
+    },
+    {
+      def: ["0", "1px", "4px", "0"],
+      color: transparentColor(foundation.palette.ink.dark, 12),
+      inset: false,
+    },
+  ]),
   elevationActionActiveBackground: foundation.palette.white.normal,
   elevationActionActiveBoxShadow: boxShadow([
     {
@@ -1670,6 +1687,18 @@ const createTokens: CreateTokens = foundation => ({
       inset: false,
     },
   ]),
+  elevationLevel2BoxShadow: boxShadow([
+    {
+      def: ["0", "1px", "4px", "0"],
+      color: transparentColor(foundation.palette.ink.dark, 16),
+      inset: false,
+    },
+    {
+      def: ["0", "4px", "8px", "0"],
+      color: transparentColor(foundation.palette.ink.dark, 12),
+      inset: false,
+    },
+  ]),
   elevationFixedBackground: foundation.palette.white.normal,
   elevationFixedBoxShadow: boxShadow([
     {
@@ -1709,6 +1738,18 @@ const createTokens: CreateTokens = foundation => ({
       inset: false,
     },
   ]),
+  elevationLevel3BoxShadow: boxShadow([
+    {
+      def: ["0", "4px", "8px", "0"],
+      color: transparentColor(foundation.palette.ink.dark, 16),
+      inset: false,
+    },
+    {
+      def: ["0", "8px", "24px", "0"],
+      color: transparentColor(foundation.palette.ink.dark, 24),
+      inset: false,
+    },
+  ]),
   elevationRaisedReverseBackground: foundation.palette.white.normal,
   elevationRaisedReverseBoxShadow: boxShadow([
     {
@@ -1722,6 +1763,18 @@ const createTokens: CreateTokens = foundation => ({
       inset: false,
     },
   ]),
+  elevationLevel3ReverseBoxShadow: boxShadow([
+    {
+      def: ["0", "-4px", "8px", "0"],
+      color: transparentColor(foundation.palette.ink.dark, 16),
+      inset: false,
+    },
+    {
+      def: ["0", "-8px", "24px", "0"],
+      color: transparentColor(foundation.palette.ink.dark, 24),
+      inset: false,
+    },
+  ]),
   elevationOverlayBackground: foundation.palette.white.normal,
   elevationOverlayBoxShadow: boxShadow([
     {
@@ -1735,6 +1788,18 @@ const createTokens: CreateTokens = foundation => ({
       inset: false,
     },
   ]),
+  elevationLevel4BoxShadow: boxShadow([
+    {
+      def: ["0", "12px", "24px", "-4px"],
+      color: transparentColor(foundation.palette.ink.dark, 24),
+      inset: false,
+    },
+    {
+      def: ["0", "8px", "60px", "0"],
+      color: transparentColor(foundation.palette.ink.dark, 32),
+      inset: false,
+    },
+  ]),
   backgroundBody: foundation.palette.cloud.light,
   boxShadowAction: boxShadow([
     {

From ed96575f88aefc8d0b7631a721ecefc4e3f77119 Mon Sep 17 00:00:00 2001
From: Marco Vidal Garcia <marco.vidal@kiwi.com>
Date: Fri, 2 Aug 2024 16:44:09 +0200
Subject: [PATCH 2/9] feat(tailwind): add new shadow- classes and deprecate
 some others

New classes:
- shadow-level1, shadow-level2, shadow-level3, shadow-level3-reverse, shadow-level4

Deprecated:
- shadow-action, shadow-action-active, shadow-raised, shadow-raised-reverse, shadow-overlay
- bg-elevation-action, bg-elevation-action-active, bg-elevation-raised, bg-elevation-raised-reverse,
  bg-elevation-overlay
---
 .../__tests__/__snapshots__/configs.test.ts.snap | 10 ++++++++++
 .../src/foundation/index.ts                      | 15 ++++++++++-----
 packages/orbit-tailwind-preset/src/index.ts      | 16 ++++++++--------
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/orbit-tailwind-preset/src/__tests__/__snapshots__/configs.test.ts.snap b/packages/orbit-tailwind-preset/src/__tests__/__snapshots__/configs.test.ts.snap
index 156ad64253..0f70487e77 100644
--- a/packages/orbit-tailwind-preset/src/__tests__/__snapshots__/configs.test.ts.snap
+++ b/packages/orbit-tailwind-preset/src/__tests__/__snapshots__/configs.test.ts.snap
@@ -227,6 +227,11 @@ exports[`orbitPreset should have preflight disabled 1`] = `
           "action-active": "0 1px 4px 0 rgba(37, 42, 49, 0.16),0 4px 8px 0 rgba(37, 42, 49, 0.12)",
           "fixed": "0 0 2px 0 rgba(37, 42, 49, 0.16),0 2px 4px 0 rgba(37, 42, 49, 0.12)",
           "fixed-reverse": "0 0 2px 0 rgba(37, 42, 49, 0.16),0 -2px 4px 0 rgba(37, 42, 49, 0.12)",
+          "level1": "0 0 2px 0 rgba(37, 42, 49, 0.16),0 1px 4px 0 rgba(37, 42, 49, 0.12)",
+          "level2": "0 1px 4px 0 rgba(37, 42, 49, 0.16),0 4px 8px 0 rgba(37, 42, 49, 0.12)",
+          "level3": "0 4px 8px 0 rgba(37, 42, 49, 0.16),0 8px 24px 0 rgba(37, 42, 49, 0.24)",
+          "level3-reverse": "0 -4px 8px 0 rgba(37, 42, 49, 0.16),0 -8px 24px 0 rgba(37, 42, 49, 0.24)",
+          "level4": "0 12px 24px -4px rgba(37, 42, 49, 0.24),0 8px 60px 0 rgba(37, 42, 49, 0.32)",
           "none": "none",
           "overlay": "0 12px 24px -4px rgba(37, 42, 49, 0.24),0 8px 60px 0 rgba(37, 42, 49, 0.32)",
           "raised": "0 4px 8px 0 rgba(37, 42, 49, 0.16),0 8px 24px 0 rgba(37, 42, 49, 0.24)",
@@ -1113,6 +1118,11 @@ exports[`orbitPreset should have preflight disabled 1`] = `
       "form-element-error-hover": "inset 0 0 0 1px rgba(185, 25, 25, 1)",
       "form-element-focus": "inset 0 0 0 1px rgba(1, 114, 203, 1),inset 0 0 0 3px rgba(1, 114, 203, 0.15)",
       "form-element-hover": "inset 0 0 0 1px rgba(166, 182, 200, 1)",
+      "level1": "0 0 2px 0 rgba(37, 42, 49, 0.16),0 1px 4px 0 rgba(37, 42, 49, 0.12)",
+      "level2": "0 1px 4px 0 rgba(37, 42, 49, 0.16),0 4px 8px 0 rgba(37, 42, 49, 0.12)",
+      "level3": "0 4px 8px 0 rgba(37, 42, 49, 0.16),0 8px 24px 0 rgba(37, 42, 49, 0.24)",
+      "level3-reverse": "0 -4px 8px 0 rgba(37, 42, 49, 0.16),0 -8px 24px 0 rgba(37, 42, 49, 0.24)",
+      "level4": "0 12px 24px -4px rgba(37, 42, 49, 0.24),0 8px 60px 0 rgba(37, 42, 49, 0.32)",
       "modal": "inset 0 0 0 transparent, 0 0 2px 0 rgba(37, 42, 49, 0.16),0 -2px 4px 0 rgba(37, 42, 49, 0.12)",
       "modal-scrolled": "inset 0 1px 0 rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>), 0 0 2px 0 rgba(37, 42, 49, 0.16),0 -2px 4px 0 rgba(37, 42, 49, 0.12)",
       "none": "none",
diff --git a/packages/orbit-tailwind-preset/src/foundation/index.ts b/packages/orbit-tailwind-preset/src/foundation/index.ts
index 8cc32ff852..19157056e5 100644
--- a/packages/orbit-tailwind-preset/src/foundation/index.ts
+++ b/packages/orbit-tailwind-preset/src/foundation/index.ts
@@ -17,11 +17,16 @@ const config = (tokens: typeof defaultTokens): Config => {
         none: "none",
         fixed: tokens.elevationFixedBoxShadow,
         "fixed-reverse": tokens.elevationFixedReverseBoxShadow,
-        raised: tokens.elevationRaisedBoxShadow,
-        "raised-reverse": tokens.elevationRaisedReverseBoxShadow,
-        action: tokens.elevationActionBoxShadow,
-        "action-active": tokens.elevationActionActiveBoxShadow,
-        overlay: tokens.elevationOverlayBoxShadow,
+        raised: tokens.elevationRaisedBoxShadow, // deprecated
+        "raised-reverse": tokens.elevationRaisedReverseBoxShadow, // deprecated
+        action: tokens.elevationActionBoxShadow, // deprecated
+        "action-active": tokens.elevationActionActiveBoxShadow, // deprecated
+        overlay: tokens.elevationOverlayBoxShadow, // deprecated
+        level1: tokens.elevationLevel1BoxShadow,
+        level2: tokens.elevationLevel2BoxShadow,
+        level3: tokens.elevationLevel3BoxShadow,
+        "level3-reverse": tokens.elevationLevel3ReverseBoxShadow,
+        level4: tokens.elevationLevel4BoxShadow,
       },
       transitionDuration: {
         fast: tokens.durationFast,
diff --git a/packages/orbit-tailwind-preset/src/index.ts b/packages/orbit-tailwind-preset/src/index.ts
index a0bcf8e716..166c368463 100644
--- a/packages/orbit-tailwind-preset/src/index.ts
+++ b/packages/orbit-tailwind-preset/src/index.ts
@@ -61,14 +61,14 @@ const getBackgroundColors = (tokens: typeof defaultTokens) => {
     {
       "elevation-flat": tokens.elevationFlatBackground,
       "elevation-suppressed": tokens.elevationSuppressedBackground,
-      "elevation-action": tokens.elevationActionBackground,
-      "elevation-action-active": tokens.elevationActionActiveBackground,
+      "elevation-action": tokens.elevationActionBackground, // deprecated
+      "elevation-action-active": tokens.elevationActionActiveBackground, // deprecated
       "elevation-fixed": tokens.elevationFixedBackground,
       "elevation-fixed-reverse": tokens.elevationFixedReverseBackground,
       "elevation-flat-border-color": tokens.elevationFlatBorderColor,
-      "elevation-raised": tokens.elevationRaisedBackground,
-      "elevation-raised-reverse": tokens.elevationRaisedReverseBackground,
-      "elevation-overlay": tokens.elevationOverlayBackground,
+      "elevation-raised": tokens.elevationRaisedBackground, // deprecated
+      "elevation-raised-reverse": tokens.elevationRaisedReverseBackground, // deprecated
+      "elevation-overlay": tokens.elevationOverlayBackground, // deprecated
     },
   );
 };
@@ -248,9 +248,9 @@ export default function orbitTailwindPreset(options?: Options): Config {
           "form-element-error-hover": tokens.formElementBoxShadowErrorHover,
           "form-element-hover": tokens.formElementBoxShadowHover,
           "form-element-focus": tokens.formElementFocusBoxShadow,
-          switch: `inset 0 0 1px 0 rgba(7, 64, 92, 0.1),${tokens.boxShadowAction}`,
-          "modal-scrolled": `inset 0 1px 0 ${tokens.paletteCloudNormal}, ${tokens.boxShadowFixedReverse}`,
-          modal: `inset 0 0 0 transparent, ${tokens.boxShadowFixedReverse}`,
+          switch: `inset 0 0 1px 0 rgba(7, 64, 92, 0.1),${tokens.elevationLevel1BoxShadow}`,
+          "modal-scrolled": `inset 0 1px 0 ${tokens.paletteCloudNormal}, ${tokens.elevationFixedReverseBoxShadow}`,
+          modal: `inset 0 0 0 transparent, ${tokens.elevationFixedReverseBoxShadow}`,
           "wizard-step-icon-hover": `0 0 0 6px ${convertHexToRgba(
             tokens.paletteProductNormal,
             20,

From 2adf8b6695af62516deb4d5fffaa499b4bf2196c Mon Sep 17 00:00:00 2001
From: Marco Vidal Garcia <marco.vidal@kiwi.com>
Date: Tue, 6 Aug 2024 11:42:39 +0200
Subject: [PATCH 3/9] feat: add shadow transformations to codemod

---
 .../transforms/tokens-v16.mjs                 | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/orbit-components/transforms/tokens-v16.mjs b/packages/orbit-components/transforms/tokens-v16.mjs
index d61590cde8..8a39db59bb 100644
--- a/packages/orbit-components/transforms/tokens-v16.mjs
+++ b/packages/orbit-components/transforms/tokens-v16.mjs
@@ -44,7 +44,33 @@ const headingTransformations = [
   { from: "font-heading-title1", to: "font-heading-title0" },
 ];
 
-const transformations = [...borderRadiusTransformations, ...headingTransformations];
+const elevationTransformations = [
+  // old deprecated tokens
+  { from: "boxShadowAction", to: "elevationActionBoxShadow" },
+  { from: "boxShadowActionActive", to: "elevationActionActiveBoxShadow" },
+  { from: "boxShadowFixed", to: "elevationFixedBoxShadow" },
+  { from: "boxShadowFixedReverse", to: "elevationFixedReverseBoxShadow" },
+  { from: "boxShadowOverlay", to: "elevationOverlayBoxShadow" },
+  { from: "boxShadowRaised", to: "elevationRaisedBoxShadow" },
+  { from: "boxShadowRaisedReverse", to: "elevationRaisedReverseBoxShadow" },
+  // new tokens
+  { from: "elevationActionBoxShadow", to: "elevationLevel1BoxShadow" },
+  { from: "elevationActionActiveBoxShadow", to: "elevationLevel2BoxShadow" },
+  { from: "elevationRaisedBoxShadow", to: "elevationLevel3BoxShadow" },
+  { from: "elevationRaisedReverseBoxShadow", to: "elevationLevel3ReverseBoxShadow" },
+  { from: "elevationOverlayBoxShadow", to: "elevationLevel4BoxShadow" },
+  { from: "shadow-action-active", to: "shadow-level2" },
+  { from: "shadow-action", to: "shadow-level1" },
+  { from: "shadow-raised-reverse", to: "shadow-level3-reverse" },
+  { from: "shadow-raised", to: "shadow-level3" },
+  { from: "shadow-overlay", to: "shadow-level4" },
+];
+
+const transformations = [
+  ...borderRadiusTransformations,
+  ...headingTransformations,
+  ...elevationTransformations,
+];
 
 const ignoredFiles = [
   "/orbit-components/src/Heading/*",

From c4aeecb40938504b4cee7d2882eabd296f62e879 Mon Sep 17 00:00:00 2001
From: Marco Vidal Garcia <marco.vidal@kiwi.com>
Date: Tue, 6 Aug 2024 12:37:02 +0200
Subject: [PATCH 4/9] chore: adapt components to new tokens

---
 .../AccordionSection/components/SectionFooter.tsx         | 2 +-
 packages/orbit-components/src/CallOutBanner/index.tsx     | 2 +-
 packages/orbit-components/src/Card/CardSection/index.tsx  | 2 +-
 packages/orbit-components/src/Dialog/index.tsx            | 2 +-
 packages/orbit-components/src/Drawer/index.tsx            | 2 +-
 packages/orbit-components/src/InputSelect/index.tsx       | 2 +-
 .../src/Itinerary/ItinerarySegment/index.tsx              | 2 +-
 .../src/Itinerary/ItineraryStatus/index.tsx               | 2 +-
 packages/orbit-components/src/Modal/index.tsx             | 8 ++++----
 .../src/Popover/components/ContentWrapper.tsx             | 6 +++---
 .../src/Slider/components/Handle/index.tsx                | 2 +-
 packages/orbit-components/src/Slider/index.tsx            | 2 +-
 packages/orbit-components/src/Switch/index.tsx            | 2 +-
 .../src/Tile/components/TileWrapper/index.tsx             | 2 +-
 packages/orbit-components/src/TileGroup/index.tsx         | 2 +-
 .../MobileDialogPrimitive/components/DialogContent.tsx    | 2 +-
 .../TooltipPrimitive/components/TooltipContent.tsx        | 2 +-
 17 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/orbit-components/src/Accordion/AccordionSection/components/SectionFooter.tsx b/packages/orbit-components/src/Accordion/AccordionSection/components/SectionFooter.tsx
index 1caf349a1c..340dc4b596 100644
--- a/packages/orbit-components/src/Accordion/AccordionSection/components/SectionFooter.tsx
+++ b/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}
diff --git a/packages/orbit-components/src/CallOutBanner/index.tsx b/packages/orbit-components/src/CallOutBanner/index.tsx
index 7a5c27c51b..0304b66d8a 100644
--- a/packages/orbit-components/src/CallOutBanner/index.tsx
+++ b/packages/orbit-components/src/CallOutBanner/index.tsx
@@ -24,7 +24,7 @@ const CallOutBanner = ({
     className={cx(
       "orbit-call-out-banner bg-white-normal rounded-50 p-md lm:flex-row lm:p-lg flex flex-col items-start justify-start border border-solid text-start",
       onClick
-        ? "shadow-action duration-fast hover:shadow-action-active active:shadow-action-active cursor-pointer border-transparent transition-shadow ease-in-out hover:outline-none active:outline-none"
+        ? "shadow-level1 duration-fast hover:shadow-level2 active:shadow-level2 cursor-pointer border-transparent transition-shadow ease-in-out hover:outline-none active:outline-none"
         : "border-cloud-normal",
     )}
     role="button"
diff --git a/packages/orbit-components/src/Card/CardSection/index.tsx b/packages/orbit-components/src/Card/CardSection/index.tsx
index aaeab3518c..2d5880b829 100644
--- a/packages/orbit-components/src/Card/CardSection/index.tsx
+++ b/packages/orbit-components/src/Card/CardSection/index.tsx
@@ -55,7 +55,7 @@ export default function CardSection({
     <div
       className={cx(
         "duration-fast lm:border-x border-b transition-all ease-in-out",
-        opened && "my-xs rounded-100 shadow-action-active [&+*]:border-t",
+        opened && "my-xs rounded-100 shadow-level2 [&+*]:border-t",
         onClick != null && "hover:bg-white-normal-hover cursor-pointer",
       )}
       data-test={dataTest}
diff --git a/packages/orbit-components/src/Dialog/index.tsx b/packages/orbit-components/src/Dialog/index.tsx
index fd84511e94..476388a0d2 100644
--- a/packages/orbit-components/src/Dialog/index.tsx
+++ b/packages/orbit-components/src/Dialog/index.tsx
@@ -101,7 +101,7 @@ const Dialog = ({
           ref={ref}
           style={{ maxWidth }}
           className={cx([
-            "shadow-overlay pt-lg px-md pb-md bg-white-normal rounded-dialog-mobile box-border block w-full",
+            "shadow-level4 pt-lg px-md pb-md bg-white-normal rounded-dialog-mobile box-border block w-full",
             shown ? "bottom-0" : "-bottom-full",
             "lm:min-w-dialog-width lm:p-lg lm:rounded-dialog-desktop",
           ])}
diff --git a/packages/orbit-components/src/Drawer/index.tsx b/packages/orbit-components/src/Drawer/index.tsx
index 817731b8d9..144bc268aa 100644
--- a/packages/orbit-components/src/Drawer/index.tsx
+++ b/packages/orbit-components/src/Drawer/index.tsx
@@ -118,7 +118,7 @@ const Drawer = ({
           "font-base",
           "overflow-y-auto",
           "overflow-x-hidden",
-          "shadow-raised",
+          "shadow-level3",
           "duration-normal transform-gpu transition-transform ease-in-out",
           getTransitionClasses(shown, position),
           suppressed ? "bg-cloud-light" : "bg-white-normal",
diff --git a/packages/orbit-components/src/InputSelect/index.tsx b/packages/orbit-components/src/InputSelect/index.tsx
index 07529af41e..6e960bae5a 100644
--- a/packages/orbit-components/src/InputSelect/index.tsx
+++ b/packages/orbit-components/src/InputSelect/index.tsx
@@ -403,7 +403,7 @@ const InputSelect = React.forwardRef<HTMLInputElement, Props>(
     const dropdown = isOpened && (
       <ul
         className={cx(
-          "font-base bg-white-normal lm:absolute lm:inset-x-0 lm:overflow-y-scroll lm:shadow-action lm:rounded-100 z-[3] flex w-full flex-col",
+          "font-base bg-white-normal lm:absolute lm:inset-x-0 lm:overflow-y-scroll lm:shadow-level1 lm:rounded-100 z-[3] flex w-full flex-col",
           label
             ? "lm:top-[calc(theme(height.form-box-normal)+theme(spacing.xl))]"
             : "lm:top-[calc(theme(height.form-box-normal)+theme(spacing.xs))]",
diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/index.tsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/index.tsx
index 13e13f0925..535c0c9ff7 100644
--- a/packages/orbit-components/src/Itinerary/ItinerarySegment/index.tsx
+++ b/packages/orbit-components/src/Itinerary/ItinerarySegment/index.tsx
@@ -72,7 +72,7 @@ const ItinerarySegment = ({
         "rounded-150 pb-sm px-0",
         spaceAfter && spaceAfterClasses[spaceAfter],
         !noElevation && "shadow-fixed",
-        actionable && !noElevation && "hover:shadow-action-active focus:shadow-action-active",
+        actionable && !noElevation && "hover:shadow-level2 focus:shadow-level2",
       )}
       data-test={dataTest}
     >
diff --git a/packages/orbit-components/src/Itinerary/ItineraryStatus/index.tsx b/packages/orbit-components/src/Itinerary/ItineraryStatus/index.tsx
index 09e41ae9c8..67c95422bc 100644
--- a/packages/orbit-components/src/Itinerary/ItineraryStatus/index.tsx
+++ b/packages/orbit-components/src/Itinerary/ItineraryStatus/index.tsx
@@ -65,7 +65,7 @@ const ItineraryStatus = ({
         "rounded-150 shadow-fixed box-border flex w-full flex-col border-0 border-s-[3px] border-solid",
         type && borderColorClasses[type],
         spaceAfter && spaceAfterClasses[spaceAfter],
-        actionable && "hover:shadow-action-active",
+        actionable && "hover:shadow-level2",
       )}
     >
       <div
diff --git a/packages/orbit-components/src/Modal/index.tsx b/packages/orbit-components/src/Modal/index.tsx
index 4891a45cc6..331f8a86b2 100644
--- a/packages/orbit-components/src/Modal/index.tsx
+++ b/packages/orbit-components/src/Modal/index.tsx
@@ -422,10 +422,10 @@ const Modal = React.forwardRef<Instance, Props>(
             "orbit-modal-wrapper",
             "fixed mx-auto my-0 box-border flex min-h-full w-full items-start",
             disableAnimation
-              ? !isMobileFullPage && "top-[32px]"
+              ? !isMobileFullPage && "top-xl"
               : [
                   "duration-normal transition-[top] ease-in-out",
-                  loaded ? !isMobileFullPage && "top-[32px]" : "top-full",
+                  loaded ? !isMobileFullPage && "top-xl" : "top-full",
                 ],
             "lm:relative lm:top-0 lm:items-center",
             maxWidthClasses.largeMobile[size],
@@ -436,7 +436,7 @@ const Modal = React.forwardRef<Instance, Props>(
             className={cx(
               "orbit-modal-wrapper-content",
               "lm:rounded-modal lm:overflow-visible overflow-y-auto overflow-x-hidden",
-              "font-base bg-elevation-flat shadow-overlay absolute box-border w-full",
+              "font-base bg-elevation-flat shadow-level4 absolute box-border w-full",
               "lm:relative lm:bottom-auto lm:pb-0",
               "lm:[&_.orbit-modal-section:last-of-type]:pb-xxl lm:[&_.orbit-modal-section:last-of-type:after]:content-none lm:[&_.orbit-modal-section:last-of-type]:mb-[var(--orbit-modal-footer-height,0px)]",
               "lm:[&_.orbit-modal-mobile-header]:w-[calc(var(--orbit-modal-width)-48px-theme(spacing.xxl))]",
@@ -489,7 +489,7 @@ const Modal = React.forwardRef<Instance, Props>(
                   "duration-fast transition-[shadow,_background-color] ease-in-out",
                   "lm:rounded-none",
                   fixedClose || scrolled ? "lm:top-0 lm:right-auto fixed" : "absolute",
-                  !isMobileFullPage && (fixedClose || scrolled) ? "top-[32px]" : "top-0",
+                  !isMobileFullPage && (fixedClose || scrolled) ? "top-xl" : "top-0",
                   !isMobileFullPage && "rounded-t-modal",
                   modalWidth ? "max-w-[var(--orbit-modal-width)]" : maxWidthClasses[size],
                   scrolled && "shadow-fixed bg-white-normal",
diff --git a/packages/orbit-components/src/Popover/components/ContentWrapper.tsx b/packages/orbit-components/src/Popover/components/ContentWrapper.tsx
index c653b2e8a4..4afec2eb01 100644
--- a/packages/orbit-components/src/Popover/components/ContentWrapper.tsx
+++ b/packages/orbit-components/src/Popover/components/ContentWrapper.tsx
@@ -166,8 +166,8 @@ const PopoverContentWrapper = ({
           "h-auto w-full",
           "z-[1000]",
           "box-border",
-          "shadow-raised-reverse",
-          "bg-elevation-raised-reverse",
+          "shadow-level3-reverse",
+          "bg-white-normal",
           "max-h-[calc(100%_-_theme(spacing.xl))]",
           "focus:outline-none",
           "lm:top-[var(--popper-top)]",
@@ -178,7 +178,7 @@ const PopoverContentWrapper = ({
           "lm:[transform:var(--popper-transform)]",
           "lm:transition-opacity lm:duration-fast lm:ease-in-out",
           "lm:rounded-100",
-          "lm:shadow-raised",
+          "lm:shadow-level3",
           "lm:max-h-none",
           isInsideModal ? "lm:z-[1000]" : "lm:z-[var(--popover-zIndex)]",
           width ? "lm:w-[var(--popover-width)]" : "lm:w-auto",
diff --git a/packages/orbit-components/src/Slider/components/Handle/index.tsx b/packages/orbit-components/src/Slider/components/Handle/index.tsx
index e1a323074c..982a555cef 100644
--- a/packages/orbit-components/src/Slider/components/Handle/index.tsx
+++ b/packages/orbit-components/src/Slider/components/Handle/index.tsx
@@ -83,7 +83,7 @@ const Handle = ({
   return (
     <div
       className={cx(
-        "size-lg shadow-action bg-white-normal duration-fast tap-color-none hover:shadow-action-active active:shadow-action-active absolute bottom-0 flex cursor-pointer select-none items-center justify-center rounded-full transition-shadow ease-in-out",
+        "size-lg shadow-level1 bg-white-normal duration-fast tap-color-none hover:shadow-level2 active:shadow-level2 absolute bottom-0 flex cursor-pointer select-none items-center justify-center rounded-full transition-shadow ease-in-out",
         onTop && "z-20",
       )}
       style={{
diff --git a/packages/orbit-components/src/Slider/index.tsx b/packages/orbit-components/src/Slider/index.tsx
index f2c02fe3f3..63a492b5c6 100644
--- a/packages/orbit-components/src/Slider/index.tsx
+++ b/packages/orbit-components/src/Slider/index.tsx
@@ -362,7 +362,7 @@ const Slider = ({
           </Hide>
           <div
             className={cx(
-              "pb-xs tb:w-[calc(100%+48px)] tb:absolute tb:-bottom-md tb:-inset-x-lg tb:pt-sm tb:px-lg tb:pb-[48px] tb:rounded-100 tb:transition-opacity tb:ease-in-out tb:duration-fast tb:bg-white-normal tb:shadow-raised",
+              "pb-xs tb:w-[calc(100%+48px)] tb:absolute tb:-bottom-md tb:-inset-x-lg tb:pt-sm tb:px-lg tb:pb-[48px] tb:rounded-100 tb:transition-opacity tb:ease-in-out tb:duration-fast tb:bg-white-normal tb:shadow-level3",
               focused ? "tb:visible tb:opacity-100" : "tb:invisible tb:opacity-0",
             )}
           >
diff --git a/packages/orbit-components/src/Switch/index.tsx b/packages/orbit-components/src/Switch/index.tsx
index 539b0f5239..4a71cbe5b1 100644
--- a/packages/orbit-components/src/Switch/index.tsx
+++ b/packages/orbit-components/src/Switch/index.tsx
@@ -42,7 +42,7 @@ const Switch = React.forwardRef<HTMLInputElement, Props>(
               "bg-white-normal duration-fast shadow-switch absolute box-border inline-flex size-[24px] items-center justify-center rounded-full",
               "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-2",
               "[&_svg]:size-icon-small",
-              !disabled && "active:shadow-action-active",
+              !disabled && "active:shadow-level2",
               !checked && (icon ? "[&_svg]:text-ink-normal" : "[&_svg]:text-cloud-dark"),
               checked
                 ? "[&_svg]:text-blue-normal left-[calc(100%+2px)] -translate-x-full"
diff --git a/packages/orbit-components/src/Tile/components/TileWrapper/index.tsx b/packages/orbit-components/src/Tile/components/TileWrapper/index.tsx
index b14383a279..7c6c69102f 100644
--- a/packages/orbit-components/src/Tile/components/TileWrapper/index.tsx
+++ b/packages/orbit-components/src/Tile/components/TileWrapper/index.tsx
@@ -37,7 +37,7 @@ const TileWrapper = ({
 
   return (
     <WrapperComponent
-      className="orbit-tile-wrapper [&_.orbit-tile-header-icon-right]:hover:text-ink-light-hover font-base text-ink-dark shadow-action duration-fast hover:shadow-action-active rounded-150 bg-white-normal de:rounded-100 box-border block w-full no-underline transition-shadow ease-in-out"
+      className="orbit-tile-wrapper [&_.orbit-tile-header-icon-right]:hover:text-ink-light-hover font-base text-ink-dark shadow-level1 duration-fast hover:shadow-level2 rounded-150 bg-white-normal de:rounded-100 box-border block w-full no-underline transition-shadow ease-in-out"
       data-test={dataTest}
       onClick={onClick}
       onKeyDown={onKeyDown}
diff --git a/packages/orbit-components/src/TileGroup/index.tsx b/packages/orbit-components/src/TileGroup/index.tsx
index 5d3d1f0b03..dee2f0d33d 100644
--- a/packages/orbit-components/src/TileGroup/index.tsx
+++ b/packages/orbit-components/src/TileGroup/index.tsx
@@ -11,7 +11,7 @@ const TileGroup = ({ children, dataTest, id, as }: Props) => {
   return (
     <Component
       className={cx(
-        "shadow-action rounded-100 [&_.orbit-slide]:bg-white-normal m-0 w-full p-0",
+        "shadow-level1 rounded-100 [&_.orbit-slide]:bg-white-normal m-0 w-full p-0",
         "first:[&_.orbit-tile-wrapper]:rounded-t-100 last:[&_.orbit-tile-wrapper]:rounded-b-100 not-last:[&_.orbit-tile-wrapper]:border-b not-last:[&_.orbit-tile-wrapper]:border-cloud-normal",
         "[&_.orbit-tile-wrapper]:duration-fast hover:[&_.orbit-tile-wrapper]:bg-cloud-normal focus:[&_.orbit-tile-wrapper]:bg-cloud-normal [&_.orbit-tile-wrapper]:rounded-none [&_.orbit-tile-wrapper]:shadow-none [&_.orbit-tile-wrapper]:transition-colors [&_.orbit-tile-wrapper]:ease-in-out",
       )}
diff --git a/packages/orbit-components/src/primitives/MobileDialogPrimitive/components/DialogContent.tsx b/packages/orbit-components/src/primitives/MobileDialogPrimitive/components/DialogContent.tsx
index b438fe5723..4c67f94be6 100644
--- a/packages/orbit-components/src/primitives/MobileDialogPrimitive/components/DialogContent.tsx
+++ b/packages/orbit-components/src/primitives/MobileDialogPrimitive/components/DialogContent.tsx
@@ -62,7 +62,7 @@ const DialogContent = ({
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
       <div
         className={cx(
-          "bg-ink-dark shadow-raised-reverse p-md bottom-md inset-x-md rounded-300 fixed z-[10012] box-border max-h-[calc(100%-theme(spacing.xl))] w-[calc(100%-theme(spacing.xl))] overflow-y-scroll",
+          "bg-ink-dark shadow-level3-reverse p-md bottom-md inset-x-md rounded-300 fixed z-[10012] box-border max-h-[calc(100%-theme(spacing.xl))] w-[calc(100%-theme(spacing.xl))] overflow-y-scroll",
           "[transition:transform_theme(transitionDuration.normal)_ease-in-out,_visibility_theme(transitionDuration.fast)_linear]",
           "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_img]:max-w-full",
           shown
diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/components/TooltipContent.tsx b/packages/orbit-components/src/primitives/TooltipPrimitive/components/TooltipContent.tsx
index df409c2c6b..605b55b8a5 100644
--- a/packages/orbit-components/src/primitives/TooltipPrimitive/components/TooltipContent.tsx
+++ b/packages/orbit-components/src/primitives/TooltipPrimitive/components/TooltipContent.tsx
@@ -142,7 +142,7 @@ const TooltipContent = ({
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
       <div
         className={cx(
-          "rounded-100 px-sm shadow-raised z-[10012] box-border block w-auto overflow-visible",
+          "rounded-100 px-sm shadow-level3 z-[10012] box-border block w-auto overflow-visible",
           "duration-fast transition-[visibility,_opacity] ease-in-out",
           "[&_img]:max-w-full]",
           contentHeight <= Math.floor(parseFloat(theme.orbit.lineHeightNormal)) ? "py-xs" : "py-sm",

From 6c9b781d5e5c2fbadabfd56b0bf41d75ee08727a Mon Sep 17 00:00:00 2001
From: Marco Vidal Garcia <marco.vidal@kiwi.com>
Date: Tue, 6 Aug 2024 12:38:52 +0200
Subject: [PATCH 5/9] feat(Box): add new values for elevation prop and
 deprecate others

---
 .../orbit-components/src/Box/Box.stories.tsx  | 13 +--
 packages/orbit-components/src/Box/README.md   | 19 ++--
 .../src/Box/TYPESCRIPT_TEMPLATE.template      |  7 +-
 .../src/Box/__tests__/index.test.tsx          | 16 +++-
 .../src/Box/helpers/tailwindClasses.ts        | 91 +++++++++++++------
 packages/orbit-components/src/Box/types.d.ts  |  7 +-
 6 files changed, 106 insertions(+), 47 deletions(-)

diff --git a/packages/orbit-components/src/Box/Box.stories.tsx b/packages/orbit-components/src/Box/Box.stories.tsx
index c372e888e2..61af216cb9 100644
--- a/packages/orbit-components/src/Box/Box.stories.tsx
+++ b/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",
diff --git a/packages/orbit-components/src/Box/README.md b/packages/orbit-components/src/Box/README.md
index 609e84aad1..118d329db0 100644
--- a/packages/orbit-components/src/Box/README.md
+++ b/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
 
diff --git a/packages/orbit-components/src/Box/TYPESCRIPT_TEMPLATE.template b/packages/orbit-components/src/Box/TYPESCRIPT_TEMPLATE.template
index a18e326d4f..a8934de594 100644
--- a/packages/orbit-components/src/Box/TYPESCRIPT_TEMPLATE.template
+++ b/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%
 
diff --git a/packages/orbit-components/src/Box/__tests__/index.test.tsx b/packages/orbit-components/src/Box/__tests__/index.test.tsx
index cf0d0802e4..20b94051aa 100644
--- a/packages/orbit-components/src/Box/__tests__/index.test.tsx
+++ b/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 });
   });
 });
diff --git a/packages/orbit-components/src/Box/helpers/tailwindClasses.ts b/packages/orbit-components/src/Box/helpers/tailwindClasses.ts
index d9cad00bcb..a8375c3726 100644
--- a/packages/orbit-components/src/Box/helpers/tailwindClasses.ts
+++ b/packages/orbit-components/src/Box/helpers/tailwindClasses.ts
@@ -40,62 +40,97 @@ export const positionClasses: {
 };
 
 export enum SHADOWS {
-  ACTION = "action",
+  ACTION = "action", // deprecated
   FIXED = "fixed",
-  RAISED = "raised",
-  OVERLAY = "overlay",
+  RAISED = "raised", // deprecated
+  OVERLAY = "overlay", // deprecated
   FIXED_REVERSE = "fixedReverse",
-  RAISED_REVERSE = "raisedReverse",
+  RAISED_REVERSE = "raisedReverse", // deprecated
+  LEVEL1 = "level1",
+  LEVEL2 = "level2",
+  LEVEL3 = "level3",
+  LEVEL3_REVERSE = "level3Reverse",
+  LEVEL4 = "level4",
 }
 
 export const shadowClasses: {
   [K in QUERIES | SHADOWS]: K extends QUERIES ? Record<SHADOWS, string> : string;
 } = {
-  [SHADOWS.ACTION]: "shadow-action",
+  [SHADOWS.ACTION]: "shadow-action", // deprecated
   [SHADOWS.FIXED]: "shadow-fixed",
-  [SHADOWS.RAISED]: "shadow-raised",
-  [SHADOWS.OVERLAY]: "shadow-overlay",
+  [SHADOWS.RAISED]: "shadow-raised", // deprecated
+  [SHADOWS.OVERLAY]: "shadow-overlay", // deprecated
   [SHADOWS.FIXED_REVERSE]: "shadow-fixed-reverse",
-  [SHADOWS.RAISED_REVERSE]: "shadow-raised-reverse",
+  [SHADOWS.RAISED_REVERSE]: "shadow-raised-reverse", // deprecated
+  [SHADOWS.LEVEL1]: "shadow-level1",
+  [SHADOWS.LEVEL2]: "shadow-level2",
+  [SHADOWS.LEVEL3]: "shadow-level3",
+  [SHADOWS.LEVEL3_REVERSE]: "shadow-level3-reverse",
+  [SHADOWS.LEVEL4]: "shadow-level4",
   [QUERIES.LARGEDESKTOP]: {
-    [SHADOWS.ACTION]: "ld:shadow-action",
+    [SHADOWS.ACTION]: "ld:shadow-action", // deprecated
     [SHADOWS.FIXED]: "ld:shadow-fixed",
-    [SHADOWS.RAISED]: "ld:shadow-raised",
-    [SHADOWS.OVERLAY]: "ld:shadow-overlay",
+    [SHADOWS.RAISED]: "ld:shadow-raised", // deprecated
+    [SHADOWS.OVERLAY]: "ld:shadow-overlay", // deprecated
     [SHADOWS.FIXED_REVERSE]: "ld:shadow-fixed-reverse",
-    [SHADOWS.RAISED_REVERSE]: "ld:shadow-raised-reverse",
+    [SHADOWS.RAISED_REVERSE]: "ld:shadow-raised-reverse", // deprecated
+    [SHADOWS.LEVEL1]: "ld:shadow-level1",
+    [SHADOWS.LEVEL2]: "ld:shadow-level2",
+    [SHADOWS.LEVEL3]: "ld:shadow-level3",
+    [SHADOWS.LEVEL3_REVERSE]: "ld:shadow-level3-reverse",
+    [SHADOWS.LEVEL4]: "ld:shadow-level4",
   },
   [QUERIES.DESKTOP]: {
-    [SHADOWS.ACTION]: "de:shadow-action",
+    [SHADOWS.ACTION]: "de:shadow-action", // deprecated
     [SHADOWS.FIXED]: "de:shadow-fixed",
-    [SHADOWS.RAISED]: "de:shadow-raised",
-    [SHADOWS.OVERLAY]: "de:shadow-overlay",
+    [SHADOWS.RAISED]: "de:shadow-raised", // deprecated
+    [SHADOWS.OVERLAY]: "de:shadow-overlay", // deprecated
     [SHADOWS.FIXED_REVERSE]: "de:shadow-fixed-reverse",
-    [SHADOWS.RAISED_REVERSE]: "de:shadow-raised-reverse",
+    [SHADOWS.RAISED_REVERSE]: "de:shadow-raised-reverse", // deprecated
+    [SHADOWS.LEVEL1]: "de:shadow-level1",
+    [SHADOWS.LEVEL2]: "de:shadow-level2",
+    [SHADOWS.LEVEL3]: "de:shadow-level3",
+    [SHADOWS.LEVEL3_REVERSE]: "de:shadow-level3-reverse",
+    [SHADOWS.LEVEL4]: "de:shadow-level4",
   },
   [QUERIES.TABLET]: {
-    [SHADOWS.ACTION]: "tb:shadow-action",
+    [SHADOWS.ACTION]: "tb:shadow-action", // deprecated
     [SHADOWS.FIXED]: "tb:shadow-fixed",
-    [SHADOWS.RAISED]: "tb:shadow-raised",
-    [SHADOWS.OVERLAY]: "tb:shadow-overlay",
+    [SHADOWS.RAISED]: "tb:shadow-raised", // deprecated
+    [SHADOWS.OVERLAY]: "tb:shadow-overlay", // deprecated
     [SHADOWS.FIXED_REVERSE]: "tb:shadow-fixed-reverse",
-    [SHADOWS.RAISED_REVERSE]: "tb:shadow-raised-reverse",
+    [SHADOWS.RAISED_REVERSE]: "tb:shadow-raised-reverse", // deprecated
+    [SHADOWS.LEVEL1]: "tb:shadow-level1",
+    [SHADOWS.LEVEL2]: "tb:shadow-level2",
+    [SHADOWS.LEVEL3]: "tb:shadow-level3",
+    [SHADOWS.LEVEL3_REVERSE]: "tb:shadow-level3-reverse",
+    [SHADOWS.LEVEL4]: "tb:shadow-level4",
   },
   [QUERIES.LARGEMOBILE]: {
-    [SHADOWS.ACTION]: "lm:shadow-action",
+    [SHADOWS.ACTION]: "lm:shadow-action", // deprecated
     [SHADOWS.FIXED]: "lm:shadow-fixed",
-    [SHADOWS.RAISED]: "lm:shadow-raised",
-    [SHADOWS.OVERLAY]: "lm:shadow-overlay",
+    [SHADOWS.RAISED]: "lm:shadow-raised", // deprecated
+    [SHADOWS.OVERLAY]: "lm:shadow-overlay", // deprecated
     [SHADOWS.FIXED_REVERSE]: "lm:shadow-fixed-reverse",
-    [SHADOWS.RAISED_REVERSE]: "lm:shadow-raised-reverse",
+    [SHADOWS.RAISED_REVERSE]: "lm:shadow-raised-reverse", // deprecated
+    [SHADOWS.LEVEL1]: "lm:shadow-level1",
+    [SHADOWS.LEVEL2]: "lm:shadow-level2",
+    [SHADOWS.LEVEL3]: "lm:shadow-level3",
+    [SHADOWS.LEVEL3_REVERSE]: "lm:shadow-level3-reverse",
+    [SHADOWS.LEVEL4]: "lm:shadow-level4",
   },
   [QUERIES.MEDIUMMOBILE]: {
-    [SHADOWS.ACTION]: "mm:shadow-action",
+    [SHADOWS.ACTION]: "mm:shadow-action", // deprecated
     [SHADOWS.FIXED]: "mm:shadow-fixed",
-    [SHADOWS.RAISED]: "mm:shadow-raised",
-    [SHADOWS.OVERLAY]: "mm:shadow-overlay",
+    [SHADOWS.RAISED]: "mm:shadow-raised", // deprecated
+    [SHADOWS.OVERLAY]: "mm:shadow-overlay", // deprecated
     [SHADOWS.FIXED_REVERSE]: "mm:shadow-fixed-reverse",
-    [SHADOWS.RAISED_REVERSE]: "mm:shadow-raised-reverse",
+    [SHADOWS.RAISED_REVERSE]: "mm:shadow-raised-reverse", // deprecated
+    [SHADOWS.LEVEL1]: "mm:shadow-level1",
+    [SHADOWS.LEVEL2]: "mm:shadow-level2",
+    [SHADOWS.LEVEL3]: "mm:shadow-level3",
+    [SHADOWS.LEVEL3_REVERSE]: "mm:shadow-level3-reverse",
+    [SHADOWS.LEVEL4]: "mm:shadow-level4",
   },
 };
 
diff --git a/packages/orbit-components/src/Box/types.d.ts b/packages/orbit-components/src/Box/types.d.ts
index f593767797..da73cf4127 100644
--- a/packages/orbit-components/src/Box/types.d.ts
+++ b/packages/orbit-components/src/Box/types.d.ts
@@ -10,7 +10,12 @@ export type Elevation =
   | "raised"
   | "overlay"
   | "fixedReverse"
-  | "raisedReverse";
+  | "raisedReverse"
+  | "level1"
+  | "level2"
+  | "level3"
+  | "level3Reverse"
+  | "level4";
 
 export type ColorTokens =
   | "blueLight"

From 4f23588757f22fa1bc2333b59e9f722dd68f3549 Mon Sep 17 00:00:00 2001
From: Marco Vidal Garcia <marco.vidal@kiwi.com>
Date: Wed, 7 Aug 2024 16:33:58 +0200
Subject: [PATCH 6/9] chore(tokens): adapt elevation scale docs

---
 packages/orbit-design-tokens/docs/SCHEMA.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/orbit-design-tokens/docs/SCHEMA.md b/packages/orbit-design-tokens/docs/SCHEMA.md
index f30de716a6..962452eb0b 100644
--- a/packages/orbit-design-tokens/docs/SCHEMA.md
+++ b/packages/orbit-design-tokens/docs/SCHEMA.md
@@ -208,12 +208,13 @@ Based on our [elevation system](https://orbit.kiwi/foundation/elevation-hierarch
 
 – suppressed
 – flat
-– action
+– level 1
+– level 2
+– level 3
+– level 3 reverse
+– level 4
 – fixed
 – fixedReverse
-– raised
-– raisedReverse
-– overlay
 
 ### Viewports
 

From 4faa29b7fc442410665599fae2f15f02f9ba6830 Mon Sep 17 00:00:00 2001
From: Marco Vidal Garcia <marco.vidal@kiwi.com>
Date: Wed, 7 Aug 2024 16:34:56 +0200
Subject: [PATCH 7/9] docs: adjust elevation foundation docs

---
 docs/src/components/ElevationLevel.tsx        | 33 +++++++++----------
 .../02-foundation/06-elevation.mdx            | 31 ++++++++---------
 2 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/docs/src/components/ElevationLevel.tsx b/docs/src/components/ElevationLevel.tsx
index d6e996ba22..56bbff2931 100644
--- a/docs/src/components/ElevationLevel.tsx
+++ b/docs/src/components/ElevationLevel.tsx
@@ -22,7 +22,7 @@ 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) => {
@@ -30,32 +30,29 @@ export default ({ level }: ElevationLevelProps) => {
   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;
diff --git a/docs/src/documentation/02-foundation/06-elevation.mdx b/docs/src/documentation/02-foundation/06-elevation.mdx
index 9b9c14a1a2..3a499f5e13 100644
--- a/docs/src/documentation/02-foundation/06-elevation.mdx
+++ b/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" />  |

From 9ca7215713d7b044383134c84160273049a5abe1 Mon Sep 17 00:00:00 2001
From: Marco Vidal Garcia <marco.vidal@kiwi.com>
Date: Wed, 7 Aug 2024 16:49:54 +0200
Subject: [PATCH 8/9] docs: update migration guide with elevation info

---
 .../04-migration-guides/01-v16.mdx            | 38 +++++++++++++++----
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/docs/src/documentation/05-development/04-migration-guides/01-v16.mdx b/docs/src/documentation/05-development/04-migration-guides/01-v16.mdx
index a670b07cf0..ce45149d3c 100644
--- a/docs/src/documentation/05-development/04-migration-guides/01-v16.mdx
+++ b/docs/src/documentation/05-development/04-migration-guides/01-v16.mdx
@@ -90,6 +90,28 @@ 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.
@@ -97,19 +119,19 @@ Because the Box component props rely heavily on design tokens and their values,
 **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

From ae7cc33e512a08c68ae45ce1c733f700d61898db Mon Sep 17 00:00:00 2001
From: Marco Vidal Garcia <marco.vidal@kiwi.com>
Date: Wed, 7 Aug 2024 18:41:26 +0200
Subject: [PATCH 9/9] docs: adapt docs to new elevation tokens

---
 docs/src/components/Bookmarks/index.tsx                        | 2 +-
 docs/src/components/DocLayout/TopBar.tsx                       | 2 +-
 docs/src/components/Palette/ColorContainer.tsx                 | 2 +-
 docs/src/components/ReactExample/components/ViewportsRuler.tsx | 2 +-
 docs/src/components/Search/primitives/StyledInputContainer.ts  | 2 +-
 docs/src/components/Tabs/consts.ts                             | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/src/components/Bookmarks/index.tsx b/docs/src/components/Bookmarks/index.tsx
index 5dfd83cd46..c41fdbb6fb 100644
--- a/docs/src/components/Bookmarks/index.tsx
+++ b/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};
diff --git a/docs/src/components/DocLayout/TopBar.tsx b/docs/src/components/DocLayout/TopBar.tsx
index 3f62dfddf3..5c45c6ddc5 100644
--- a/docs/src/components/DocLayout/TopBar.tsx
+++ b/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>
diff --git a/docs/src/components/Palette/ColorContainer.tsx b/docs/src/components/Palette/ColorContainer.tsx
index b0b808fece..af7931b4ef 100644
--- a/docs/src/components/Palette/ColorContainer.tsx
+++ b/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;
diff --git a/docs/src/components/ReactExample/components/ViewportsRuler.tsx b/docs/src/components/ReactExample/components/ViewportsRuler.tsx
index 759c160231..83a0adac4a 100644
--- a/docs/src/components/ReactExample/components/ViewportsRuler.tsx
+++ b/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};
     }
   `}
 `;
diff --git a/docs/src/components/Search/primitives/StyledInputContainer.ts b/docs/src/components/Search/primitives/StyledInputContainer.ts
index 96aeb7f732..cf78a4788e 100644
--- a/docs/src/components/Search/primitives/StyledInputContainer.ts
+++ b/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;
diff --git a/docs/src/components/Tabs/consts.ts b/docs/src/components/Tabs/consts.ts
index 02e5a41de3..b732c6a1da 100644
--- a/docs/src/components/Tabs/consts.ts
+++ b/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";