@pingux/astro 2.149.2-alpha.0 → 2.150.0-alpha.0

package/lib/styles/themes/next-gen/variants/button.js

@@ -319,44 +319,60 @@ var aiChat = _objectSpread(_objectSpread({}, withIcon), {}, {
     }
   }
 });
-var baseIconButton = {
-  cursor: 'pointer',
+
+// Base styles for icon buttons
+var baseIconButtonStyle = {
+  p: '4px',
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
   outline: 'none',
   borderRadius: '28px',
-  border: '1px solid',
-  borderColor: 'transparent',
+  border: 'none',
+  cursor: 'pointer',
+  boxShadow: 'none !important'
+};
+var baseIconButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}, {
   path: {
     fill: 'dark'
   },
-  '&.is-focused': {
-    outline: '2px solid',
-    outlineColor: 'primary',
-    outlineOffset: '3px'
-  },
   '&.is-hovered': {
-    backgroundColor: 'gray-100',
+    backgroundColor: 'background.hover',
     path: {
       fill: 'dark'
     }
   },
   '&.is-pressed': {
-    backgroundColor: 'gray-100',
-    borderColor: 'gray-200',
+    backgroundColor: 'background.hover',
     path: {
       fill: 'dark'
     }
-  }
-};
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+var invertedIconButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}, {
+  '&.is-hovered': {
+    boxShadow: 'none !important',
+    backgroundColor: 'blue-600'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'blue-600'
+  },
+  '&.is-disabled': {
+    backgroundColor: 'gray-300'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
 var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   position: 'absolute',
   top: 32,
   right: 18
 });
-var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {
+var onyxIconButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   path: {
     fill: 'blue'
   },
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
   '&.is-hovered': {
     backgroundColor: chroma.mix(primaryBlue, 'black', 0.075, 'rgb').hex(),
     path: {
@@ -365,47 +381,32 @@ var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButto
   },
   '&.is-pressed': {
     backgroundColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-    borderColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
     path: {
       fill: 'white'
     }
   },
-  maxHeight: '48.5px',
-  maxWidth: '48.5px',
-  width: '48.5px',
-  p: 'sm',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center'
+  '&.is-focused': _objectSpread({}, defaultFocus)
 });
 var hintButton = {
   backgroundColor: 'transparent',
   path: {
     fill: 'dark'
   },
-  '&.is-focused': {
-    outline: '2px solid',
-    outlineColor: 'primary',
-    outlineOffset: '3px'
-  },
   '&.is-hovered': {
     backgroundColor: 'gray-100',
     path: {
       fill: 'dark'
     }
-  }
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
 };
 var badgeDeleteButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
-  height: 14,
   p: 0,
+  height: 14,
   width: 14,
-  border: 'none',
-  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
-    backgroundColor: 'gray-100'
-  }),
+  '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-pressed': {
     backgroundColor: 'gray-100',
-    borderColor: 'gray-200',
     path: {
       fill: 'dark'
     }
@@ -414,19 +415,17 @@ var badgeDeleteButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
     bg: 'transparent'
   }
 }, transitions);
-var searchClearButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
+var searchClearButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}, {
+  path: {
+    fill: 'dark'
+  },
   width: '20px',
   height: '20px',
-  border: 'none',
   position: 'absolute',
   right: '20px',
-  '& > svg': {
-    minWidth: tShirtSizes.xs,
-    width: tShirtSizes.xs,
-    height: tShirtSizes.xs
-  },
   '&.is-hovered': {
-    bg: 'background.hover'
+    bg: 'background.hover',
+    boxShadow: 'none !important'
   },
   '&.is-pressed': {
     bg: 'background.hover'
@@ -434,7 +433,6 @@ var searchClearButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
 });
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
-  nextGen: _objectSpread({}, onyxIconButton),
   onyx: _objectSpread({}, onyxIconButton),
   responseToolbar: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     '&.is-not-loaded': {
@@ -455,7 +453,6 @@ var iconButtons = {
       }),
       '&.is-pressed': {
         backgroundColor: 'gray-100',
-        borderColor: 'gray-200',
         path: {
           fill: 'dark'
         }
@@ -467,83 +464,30 @@ var iconButtons = {
     width: '28px',
     height: '28px',
     '& > svg': {
-      minWidth: '18px',
-      width: '18px',
-      height: '18px',
+      minWidth: tShirtSizes.sm,
+      width: tShirtSizes.sm,
+      height: tShirtSizes.sm,
       path: {
         fill: '#455469 !important'
       }
     }
   }),
-  headerNav: _objectSpread(_objectSpread({}, baseIconButton), {}, {
-    borderRadius: '4px',
-    path: {
-      fill: 'text.primary'
-    },
-    px: 'md',
-    py: 'sm',
-    width: '56px',
-    height: '40px',
-    '&.is-hovered': {
-      path: {
-        fill: 'text.secondary'
-      }
-    },
-    '&.is-pressed': {
-      path: {
-        fill: 'text.secondary'
-      }
-    },
-    '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
-      outlineOffset: '1px'
-    })
-  }),
+  headerNav: _objectSpread({}, baseIconButton),
   copyButton: copyButton,
   deleteAttachment: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     backgroundColor: 'light',
-    border: '1px solid',
-    borderColor: 'gray-300',
     size: '24px',
-    p: '4px',
     '&.is-hovered': {
       backgroundColor: '#dde5ec'
     }
   }),
-  inverted: {
-    cursor: 'pointer',
-    transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
-    outline: 'none',
-    path: {
-      fill: 'white'
-    },
-    '&.is-focused': {
-      outline: '2px solid',
-      outlineColor: 'primary',
-      outlineOffset: '3px'
-    },
-    '&.is-pressed': {
-      backgroundColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-      borderColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex()
-    },
-    '&.is-hovered': _objectSpread(_objectSpread({}, boxShadowNone), {}, {
-      border: 'none !important',
-      borderColor: 'none !important',
-      backgroundColor: chroma.mix(primaryBlue, 'black', 0.075, 'rgb').hex()
-    }),
-    '&.is-disabled': {
-      backgroundColor: 'gray-300'
-    }
-  },
+  inverted: _objectSpread({}, invertedIconButton),
   searchClearButton: searchClearButton,
   filter: _objectSpread(_objectSpread({}, baseIconButton), {}, {
-    bg: 'transparent',
-    border: '2px solid',
-    borderColor: 'transparent',
     width: '32px',
     height: '32px',
     '&.is-hovered': {
-      border: '2px solid',
-      borderColor: 'transparent',
+      boxShadow: 'none !important',
       backgroundColor: 'gray-100',
       path: {
         fill: 'dark'
@@ -551,7 +495,6 @@ var iconButtons = {
     },
     '&.is-pressed': {
       backgroundColor: 'gray-100',
-      borderColor: 'gray-200',
       path: {
         fill: 'dark'
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.149.2-alpha.0",
+  "version": "2.150.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",