feat: add new shadow variables and update card shadow classes

Author: AbhishekA1509

src/css/base.scss

@@ -5213,3 +5213,9 @@ details[open] {
     padding: 0;
     position: absolute;
 }
+
+.dc__contain {
+    &--paint {
+        contain: paint;
+    }
+}

src/css/colorPalette.scss

@@ -243,13 +243,23 @@ $black: 0, 0, 0;
 
     --button-text-on-dark: rgb(114, 172, 230);
 
-    --shadow-menu: 0px 1px 1px 0px rgba(#{$black}, 0.07), 0px 2px 5px 0px rgba(#{$black}, 0.07), 0px 3px 8px 0px rgba(#{$black}, 0.07);
-    --shadow-modal: 0px 1px 1px 0px rgba(#{$black}, 0.04), 0px 2px 8px 0px rgba(#{$black}, 0.04), 0px 3px 17px 0px rgba(#{$black}, 0.04), 0px 4px 30px 0px rgba(#{$black}, 0.13);
-    --shadow-overlay: 0px 1px 1px 0px rgba(#{$black}, 0.04), 0px 2px 6px 0px rgba(#{$black}, 0.04), 0px 4px 12px 0px rgba(#{$black}, 0.1);
-    --shadow-drawer: 0px 1px 1px 0px rgba(#{$black}, 0.04), 0px 2px 8px 0px rgba(#{$black}, 0.04), 0px 3px 17px 0px rgba(#{$black}, 0.04), 0px 4px 30px 0px rgba(#{$black}, 0.13);
-    --shadow-card-primary: 0px 1px 2px 0px rgba(1, 87, 173, 0.1);
-    --shadow-card-secondary: 0px 0px 8px 0px rgba(#{$black}, 0.1);
-    --shadow-card-tertiary: 0 8px 12px 0 rgba(30, 35, 96, 0.1), 0 1px 4px 0 rgba(#{$black}, 0.1);
+    --shadow-menu: 0px 1px 1px 0px rgba(#{$black}, 0.07),
+    0px 2px 5px 0px rgba(#{$black}, 0.07),
+    0px 3px 8px 0px rgba(#{$black}, 0.07);
+    --shadow-modal: 0px 1px 1px 0px rgba(#{$black}, 0.04),
+    0px 2px 8px 0px rgba(#{$black}, 0.04),
+    0px 3px 17px 0px rgba(#{$black}, 0.04),
+    0px 4px 30px 0px rgba(#{$black}, 0.13);
+    --shadow-overlay: 0px 1px 1px 0px rgba(#{$black}, 0.04),
+    0px 2px 6px 0px rgba(#{$black}, 0.04),
+    0px 4px 12px 0px rgba(#{$black}, 0.1);
+    --shadow-drawer: 0px 1px 1px 0px rgba(#{$black}, 0.04),
+    0px 2px 8px 0px rgba(#{$black}, 0.04),
+    0px 3px 17px 0px rgba(#{$black}, 0.04),
+    0px 4px 30px 0px rgba(#{$black}, 0.13);
+    --shadow-10: 0px 0px 4px 0px var(--black-20);
+    --shadow-20: 0px 0px 7px 0px var(--black-20);
+    --shadow-30: 0px 0px 10px 0px var(--black-20);
 
     &.theme {
         &__light {

src/css/themeUtils.scss

@@ -126,16 +126,16 @@
     }
 
     &__card {
-        &--primary {
-            box-shadow: var(--shadow-card-primary);
+        &--10 {
+            box-shadow: var(--shadow-10);
         }
 
-        &--secondary {
-            box-shadow: var(--shadow-card-secondary);
+        &--20 {
+            box-shadow: var(--shadow-20);
         }
 
-        &--tertiary {
-            box-shadow: var(--shadow-card-tertiary);
+        &--30 {
+            box-shadow: var(--shadow-10);
         }
     }
 }