@blerp/design 1.0.102 → 1.0.105

package/dist/index.cjs.js

@@ -7416,7 +7416,7 @@ var TopPill = styled__default['default'].div(_templateObject3 || (_templateObjec
   return props.isLocked ? props.collectionHovered ? "90%" : "70%" : "45%";
 });
 var TopPillBackground = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n    height: 32px;\n    width: 100%;\n    position: absolute;\n    background-color: ", ";\n    opacity: 0.5;\n"])), function (props) {
-  return props.theme.colors.notBlack;
+  return props.theme.colors.notBlackOverride;
 });
 var LockedScrim = styled__default['default'].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n    z-index: -1;\n    padding-bottom: 8px;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    overflow: \"hidden\";\n    transition: backdrop-filter 0.4s, opacity 0.5s ease-in-out;\n    opacity: ", ";\n    backdrop-filter: ", ";\n"])), function (props) {
   return !props.collectionHovered ? "0" : "1";
@@ -7624,13 +7624,13 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       left: "2px",
       width: "28px",
       height: "28px",
-      color: "white.main",
+      color: "white.override",
       borderRadius: "50%",
       alignItems: "center",
       justifyContent: "center",
       opacity: isLocked ? "1" : "0",
       "&:hover": {
-        backgroundColor: "white.main"
+        backgroundColor: "white.override"
       },
       ":hover svg": {
         color: "starling.main"
@@ -7639,7 +7639,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.BookmarkRounded, {
     sx: {
       height: ".6em",
-      color: "white.main",
+      color: "white.override",
       opacity: isLocked ? "1" : "0"
     },
     onClick: function onClick(e) {
@@ -7653,13 +7653,13 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       left: "2px",
       width: "28px",
       height: "28px",
-      color: "white.main",
+      color: "white.override",
       borderRadius: "50%",
       alignItems: "center",
       justifyContent: "center",
       opacity: isLocked ? "1" : "0",
       "&:hover": {
-        backgroundColor: "white.main"
+        backgroundColor: "white.override"
       },
       ":hover svg": {
         color: "starling.main"
@@ -7672,7 +7672,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     },
     sx: {
       height: ".6em",
-      color: "white.main",
+      color: "white.override",
       opacity: isLocked ? "1" : "0"
     }
   })), /*#__PURE__*/React__default['default'].createElement(Stack, {
@@ -7685,14 +7685,14 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     alignItems: "center"
   }, /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
     sx: {
-      color: "white.main",
+      color: "white.override",
       height: ".6em",
       position: "relative",
       left: "4px"
     }
   }), /*#__PURE__*/React__default['default'].createElement(Text, {
     sx: {
-      color: "white.main",
+      color: "white.override",
       fontWeight: "lighter",
       fontSize: ".8em"
     }
@@ -7702,7 +7702,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       top: "8px",
       right: "5px",
       height: ".6em",
-      color: "white.main",
+      color: "white.override",
       paddingRight: "8px",
       opacity: isLocked ? collectionHovered ? "0" : "1" : "0",
       transition: "opacity .2s ease-in-out"
@@ -7713,7 +7713,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     }
   }))), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React__default['default'].createElement(Stack, {
     sx: {
-      zIndex: "3",
+      zIndex: "4",
       justifyContent: "center",
       alignItems: "center",
       position: "absolute",
@@ -7761,7 +7761,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     }
   })), bottomLeftIcon ? bottomLeftIcon : /*#__PURE__*/React__default['default'].createElement(Stack, {
     sx: {
-      zIndex: "3",
+      zIndex: "4",
       justifyContent: "center",
       alignItems: "center",
       position: "absolute",
@@ -7790,12 +7790,13 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       width: "100%",
       height: "100%",
       color: "white.override",
-      backgroundColor: "transparent",
-      zIndex: "3",
+      // backgroundColor: "grey4.main",
+      zIndex: "4",
       borderRadius: "50%",
       opacity: "1",
       "&:hover": {
-        // backgroundColor: "grey4.main",
+        padding: "4px",
+        backgroundColor: "grey7.override",
         opacity: "1"
       }
     }

package/dist/index.esm.js

@@ -7347,7 +7347,7 @@ var TopPill = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplate
   return props.isLocked ? props.collectionHovered ? "90%" : "70%" : "45%";
 });
 var TopPillBackground = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    height: 32px;\n    width: 100%;\n    position: absolute;\n    background-color: ", ";\n    opacity: 0.5;\n"])), function (props) {
-  return props.theme.colors.notBlack;
+  return props.theme.colors.notBlackOverride;
 });
 var LockedScrim = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    z-index: -1;\n    padding-bottom: 8px;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    overflow: \"hidden\";\n    transition: backdrop-filter 0.4s, opacity 0.5s ease-in-out;\n    opacity: ", ";\n    backdrop-filter: ", ";\n"])), function (props) {
   return !props.collectionHovered ? "0" : "1";
@@ -7555,13 +7555,13 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       left: "2px",
       width: "28px",
       height: "28px",
-      color: "white.main",
+      color: "white.override",
       borderRadius: "50%",
       alignItems: "center",
       justifyContent: "center",
       opacity: isLocked ? "1" : "0",
       "&:hover": {
-        backgroundColor: "white.main"
+        backgroundColor: "white.override"
       },
       ":hover svg": {
         color: "starling.main"
@@ -7570,7 +7570,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
   }, /*#__PURE__*/React__default.createElement(BookmarkRounded, {
     sx: {
       height: ".6em",
-      color: "white.main",
+      color: "white.override",
       opacity: isLocked ? "1" : "0"
     },
     onClick: function onClick(e) {
@@ -7584,13 +7584,13 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       left: "2px",
       width: "28px",
       height: "28px",
-      color: "white.main",
+      color: "white.override",
       borderRadius: "50%",
       alignItems: "center",
       justifyContent: "center",
       opacity: isLocked ? "1" : "0",
       "&:hover": {
-        backgroundColor: "white.main"
+        backgroundColor: "white.override"
       },
       ":hover svg": {
         color: "starling.main"
@@ -7603,7 +7603,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     },
     sx: {
       height: ".6em",
-      color: "white.main",
+      color: "white.override",
       opacity: isLocked ? "1" : "0"
     }
   })), /*#__PURE__*/React__default.createElement(Stack, {
@@ -7616,14 +7616,14 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(DiamondIcon, {
     sx: {
-      color: "white.main",
+      color: "white.override",
       height: ".6em",
       position: "relative",
       left: "4px"
     }
   }), /*#__PURE__*/React__default.createElement(Text, {
     sx: {
-      color: "white.main",
+      color: "white.override",
       fontWeight: "lighter",
       fontSize: ".8em"
     }
@@ -7633,7 +7633,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       top: "8px",
       right: "5px",
       height: ".6em",
-      color: "white.main",
+      color: "white.override",
       paddingRight: "8px",
       opacity: isLocked ? collectionHovered ? "0" : "1" : "0",
       transition: "opacity .2s ease-in-out"
@@ -7644,7 +7644,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     }
   }))), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React__default.createElement(Stack, {
     sx: {
-      zIndex: "3",
+      zIndex: "4",
       justifyContent: "center",
       alignItems: "center",
       position: "absolute",
@@ -7692,7 +7692,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     }
   })), bottomLeftIcon ? bottomLeftIcon : /*#__PURE__*/React__default.createElement(Stack, {
     sx: {
-      zIndex: "3",
+      zIndex: "4",
       justifyContent: "center",
       alignItems: "center",
       position: "absolute",
@@ -7721,12 +7721,13 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       width: "100%",
       height: "100%",
       color: "white.override",
-      backgroundColor: "transparent",
-      zIndex: "3",
+      // backgroundColor: "grey4.main",
+      zIndex: "4",
       borderRadius: "50%",
       opacity: "1",
       "&:hover": {
-        // backgroundColor: "grey4.main",
+        padding: "4px",
+        backgroundColor: "grey7.override",
         opacity: "1"
       }
     }

package/dist/index.umd.js

@@ -7368,7 +7368,7 @@
       return props.isLocked ? props.collectionHovered ? "90%" : "70%" : "45%";
     });
     var TopPillBackground = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n    height: 32px;\n    width: 100%;\n    position: absolute;\n    background-color: ", ";\n    opacity: 0.5;\n"])), function (props) {
-      return props.theme.colors.notBlack;
+      return props.theme.colors.notBlackOverride;
     });
     var LockedScrim = styled__default['default'].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n    z-index: -1;\n    padding-bottom: 8px;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    overflow: \"hidden\";\n    transition: backdrop-filter 0.4s, opacity 0.5s ease-in-out;\n    opacity: ", ";\n    backdrop-filter: ", ";\n"])), function (props) {
       return !props.collectionHovered ? "0" : "1";
@@ -7576,13 +7576,13 @@
           left: "2px",
           width: "28px",
           height: "28px",
-          color: "white.main",
+          color: "white.override",
           borderRadius: "50%",
           alignItems: "center",
           justifyContent: "center",
           opacity: isLocked ? "1" : "0",
           "&:hover": {
-            backgroundColor: "white.main"
+            backgroundColor: "white.override"
           },
           ":hover svg": {
             color: "starling.main"
@@ -7591,7 +7591,7 @@
       }, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.BookmarkRounded, {
         sx: {
           height: ".6em",
-          color: "white.main",
+          color: "white.override",
           opacity: isLocked ? "1" : "0"
         },
         onClick: function onClick(e) {
@@ -7605,13 +7605,13 @@
           left: "2px",
           width: "28px",
           height: "28px",
-          color: "white.main",
+          color: "white.override",
           borderRadius: "50%",
           alignItems: "center",
           justifyContent: "center",
           opacity: isLocked ? "1" : "0",
           "&:hover": {
-            backgroundColor: "white.main"
+            backgroundColor: "white.override"
           },
           ":hover svg": {
             color: "starling.main"
@@ -7624,7 +7624,7 @@
         },
         sx: {
           height: ".6em",
-          color: "white.main",
+          color: "white.override",
           opacity: isLocked ? "1" : "0"
         }
       })), /*#__PURE__*/React__default['default'].createElement(Stack, {
@@ -7637,14 +7637,14 @@
         alignItems: "center"
       }, /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
         sx: {
-          color: "white.main",
+          color: "white.override",
           height: ".6em",
           position: "relative",
           left: "4px"
         }
       }), /*#__PURE__*/React__default['default'].createElement(Text, {
         sx: {
-          color: "white.main",
+          color: "white.override",
           fontWeight: "lighter",
           fontSize: ".8em"
         }
@@ -7654,7 +7654,7 @@
           top: "8px",
           right: "5px",
           height: ".6em",
-          color: "white.main",
+          color: "white.override",
           paddingRight: "8px",
           opacity: isLocked ? collectionHovered ? "0" : "1" : "0",
           transition: "opacity .2s ease-in-out"
@@ -7665,7 +7665,7 @@
         }
       }))), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React__default['default'].createElement(Stack, {
         sx: {
-          zIndex: "3",
+          zIndex: "4",
           justifyContent: "center",
           alignItems: "center",
           position: "absolute",
@@ -7713,7 +7713,7 @@
         }
       })), bottomLeftIcon ? bottomLeftIcon : /*#__PURE__*/React__default['default'].createElement(Stack, {
         sx: {
-          zIndex: "3",
+          zIndex: "4",
           justifyContent: "center",
           alignItems: "center",
           position: "absolute",
@@ -7742,12 +7742,13 @@
           width: "100%",
           height: "100%",
           color: "white.override",
-          backgroundColor: "transparent",
-          zIndex: "3",
+          // backgroundColor: "grey4.main",
+          zIndex: "4",
           borderRadius: "50%",
           opacity: "1",
           "&:hover": {
-            // backgroundColor: "grey4.main",
+            padding: "4px",
+            backgroundColor: "grey7.override",
             opacity: "1"
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blerp/design",
-    "version": "1.0.102",
+    "version": "1.0.105",
     "description": "Blerp UI",
     "main": "dist/index.cjs.js",
     "scripts": {