@ornikar/kitt-universal 9.30.1 → 9.30.2

package/dist/index-node-14.17.cjs.web.js

@@ -2612,7 +2612,68 @@ const picker = {
 };
 
 const shadows = {
-  medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
+  /** @deprecated: use cards.medium instead - shorthand shadow doesnt work with Native Base */
+  medium: '0px 10px 20px rgba(41, 48, 51, 0.25)',
+  cards: {
+    low: {
+      color: colors.black,
+      offsetX: 0,
+      offsetY: 5,
+      opacity: 0.1,
+      radius: 20
+    },
+    medium: {
+      color: colors.black,
+      offsetX: 0,
+      offsetY: 10,
+      opacity: 0.15,
+      radius: 20
+    },
+    highBase: {
+      color: colors.black,
+      offsetX: 0,
+      offsetY: 10,
+      opacity: 0.15,
+      radius: 20
+    },
+    highMedium: {
+      color: colors.black,
+      offsetX: 0,
+      offsetY: 60,
+      opacity: 0.08,
+      radius: 40
+    },
+    highLarge: {
+      color: colors.black,
+      offsetX: 0,
+      offsetY: 80,
+      opacity: 0.08,
+      radius: 60
+    }
+  },
+  navigation: {
+    left: {
+      color: colors.black,
+      offsetX: 10,
+      offsetY: 0,
+      opacity: 0.15,
+      radius: 30
+    },
+    right: {
+      color: colors.black,
+      offsetX: -10,
+      offsetY: 0,
+      opacity: 0.15,
+      radius: 30
+    }
+  },
+  panel: {
+    color: colors.black,
+    offsetX: 0,
+    offsetY: 20,
+    opacity: 1,
+    radius: 40
+  }
 };
 
 const skeleton = {
@@ -4758,7 +4819,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       },
       bodies: {
         regular: theme.typography.types.bodies.fontWeight.regular,
-        // TODO[https://ornikar.atlassian.net/browse/CME-767] This quick fix should be replaced by a 700 in every case, and native font weights should be handled by expo-fonts
+        // TODO [https://ornikar.atlassian.net/browse/CME-767] This quick fix should be replaced by a 700 in every case, and native font weights should be handled by expo-fonts
         bold: theme.typography.types.bodies.fontWeight.bold
       }
     },
@@ -4768,6 +4829,84 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
     },
     shadows: {
       kitt: {
+        shadows: {
+          cards: {
+            low: {
+              shadowColor: theme.shadows.cards.low.color,
+              shadowOffset: {
+                width: theme.shadows.cards.low.offsetX,
+                height: theme.shadows.cards.low.offsetY
+              },
+              shadowOpacity: theme.shadows.cards.low.opacity,
+              shadowRadius: theme.shadows.cards.low.radius
+            },
+            medium: {
+              shadowColor: theme.shadows.cards.medium.color,
+              shadowOffset: {
+                width: theme.shadows.cards.medium.offsetX,
+                height: theme.shadows.cards.medium.offsetY
+              },
+              shadowOpacity: theme.shadows.cards.medium.opacity,
+              shadowRadius: theme.shadows.cards.medium.radius
+            },
+            highBase: {
+              shadowColor: theme.shadows.cards.highBase.color,
+              shadowOffset: {
+                width: theme.shadows.cards.highBase.offsetX,
+                height: theme.shadows.cards.highBase.offsetY
+              },
+              shadowOpacity: theme.shadows.cards.highBase.opacity,
+              shadowRadius: theme.shadows.cards.highBase.radius
+            },
+            highMedium: {
+              shadowColor: theme.shadows.cards.highMedium.color,
+              shadowOffset: {
+                width: theme.shadows.cards.highMedium.offsetX,
+                height: theme.shadows.cards.highMedium.offsetY
+              },
+              shadowOpacity: theme.shadows.cards.highMedium.opacity,
+              shadowRadius: theme.shadows.cards.highMedium.radius
+            },
+            highLarge: {
+              shadowColor: theme.shadows.cards.highLarge.color,
+              shadowOffset: {
+                width: theme.shadows.cards.highLarge.offsetX,
+                height: theme.shadows.cards.highLarge.offsetY
+              },
+              shadowOpacity: theme.shadows.cards.highLarge.opacity,
+              shadowRadius: theme.shadows.cards.highLarge.radius
+            }
+          },
+          navigation: {
+            left: {
+              shadowColor: theme.shadows.navigation.left.color,
+              shadowOffset: {
+                width: theme.shadows.navigation.left.offsetX,
+                height: theme.shadows.navigation.left.offsetY
+              },
+              shadowOpacity: theme.shadows.navigation.left.opacity,
+              shadowRadius: theme.shadows.navigation.left.radius
+            },
+            right: {
+              shadowColor: theme.shadows.navigation.right.color,
+              shadowOffset: {
+                width: theme.shadows.navigation.right.offsetX,
+                height: theme.shadows.navigation.right.offsetY
+              },
+              shadowOpacity: theme.shadows.navigation.right.opacity,
+              shadowRadius: theme.shadows.navigation.right.radius
+            }
+          },
+          panel: {
+            shadowColor: theme.shadows.panel.color,
+            shadowOffset: {
+              width: theme.shadows.panel.offsetX,
+              height: theme.shadows.panel.offsetY
+            },
+            shadowOpacity: theme.shadows.panel.opacity,
+            shadowRadius: theme.shadows.panel.radius
+          }
+        },
         cardModals: {
           shadow: {
             shadowColor: theme.cardModal.shadow.color,