feat(tailwind): add new bg- and shadow- classes and deprecate some ot…

…hers

New classes:
- shadow-level1, shadow-level2, shadow-level3, shadow-level3-reverse, shadow-level4
- bg-elevation-level1, bg-elevation-level2, bg-elevation-level3-reverse, bg-elevation-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

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)",
@@ -693,6 +698,11 @@ exports[`orbitPreset should have preflight disabled 1`] = `
       "elevation-fixed-reverse": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
       "elevation-flat": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
       "elevation-flat-border-color": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+      "elevation-level1": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "elevation-level2": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "elevation-level3": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "elevation-level3-reverse": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "elevation-level4": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
       "elevation-overlay": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
       "elevation-raised": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
       "elevation-raised-reverse": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
@@ -1113,6 +1123,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",

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,

packages/orbit-tailwind-preset/src/index.ts

@@ -61,14 +61,19 @@ 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
+      "elevation-level1": tokens.elevationLevel1Background,
+      "elevation-level2": tokens.elevationLevel2Background,
+      "elevation-level3": tokens.elevationLevel3Background,
+      "elevation-level3-reverse": tokens.elevationLevel3ReverseBackground,
+      "elevation-level4": tokens.elevationLevel4Background,
     },
   );
 };