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

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

@@ -327,44 +327,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: _chromaJs["default"].mix(primaryBlue, 'black', 0.075, 'rgb').hex(),
     path: {
@@ -373,47 +389,32 @@ var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButto
   },
   '&.is-pressed': {
     backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-    borderColor: _chromaJs["default"].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'
     }
@@ -422,19 +423,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["default"].xs,
-    width: _tShirtSizes["default"].xs,
-    height: _tShirtSizes["default"].xs
-  },
   '&.is-hovered': {
-    bg: 'background.hover'
+    bg: 'background.hover',
+    boxShadow: 'none !important'
   },
   '&.is-pressed': {
     bg: 'background.hover'
@@ -442,7 +441,6 @@ var searchClearButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
 });
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
-  nextGen: _objectSpread({}, onyxIconButton),
   onyx: _objectSpread({}, onyxIconButton),
   responseToolbar: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     '&.is-not-loaded': {
@@ -463,7 +461,6 @@ var iconButtons = {
       }),
       '&.is-pressed': {
         backgroundColor: 'gray-100',
-        borderColor: 'gray-200',
         path: {
           fill: 'dark'
         }
@@ -475,83 +472,30 @@ var iconButtons = {
     width: '28px',
     height: '28px',
     '& > svg': {
-      minWidth: '18px',
-      width: '18px',
-      height: '18px',
+      minWidth: _tShirtSizes["default"].sm,
+      width: _tShirtSizes["default"].sm,
+      height: _tShirtSizes["default"].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: _codeView.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: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-      borderColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex()
-    },
-    '&.is-hovered': _objectSpread(_objectSpread({}, boxShadowNone), {}, {
-      border: 'none !important',
-      borderColor: 'none !important',
-      backgroundColor: _chromaJs["default"].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'
@@ -559,7 +503,6 @@ var iconButtons = {
     },
     '&.is-pressed': {
       backgroundColor: 'gray-100',
-      borderColor: 'gray-200',
       path: {
         fill: 'dark'
       }

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -4,18 +4,9 @@ export declare const badgeDeleteButton: {
     height: number;
     p: number;
     width: number;
-    transition: string;
-    outline: string;
-    border: string;
-    borderColor: string;
     path: {
         fill: string;
     };
-    '&.is-focused': {
-        outline: string;
-        outlineColor: string;
-        outlineOffset: string;
-    };
     '&.is-hovered': {
         backgroundColor: string;
         path: {
@@ -24,11 +15,19 @@ export declare const badgeDeleteButton: {
     };
     '&.is-pressed': {
         backgroundColor: string;
-        borderColor: string;
         path: {
             fill: string;
         };
     };
+    '&.is-focused': {
+        outline: string;
+        outlineColor: string;
+        outlineOffset: string;
+    };
+    transition: string;
+    outline: string;
+    border: string;
+    boxShadow: string;
 };
 declare const _default: {
     accordion: {

package/lib/components/Icon/Icon.js

@@ -18,15 +18,15 @@ import { useGetTheme, useTShirtSize } from '../../hooks';
 import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
+  var theme = useGetTheme();
   var color = props.color,
     IconComponent = props.icon,
     sx = props.sx,
     _props$size = props.size,
-    size = _props$size === void 0 ? 'sm' : _props$size,
+    size = _props$size === void 0 ? theme.defaultIconSize : _props$size,
     variant = props.variant,
     title = props.title,
     others = _objectWithoutProperties(props, _excluded);
-  var theme = useGetTheme();
   var _useTShirtSize = useTShirtSize({
       size: size,
       sizes: theme.tShirtSizes

package/lib/components/IconButton/IconButton.stories.js

@@ -7,6 +7,7 @@ import PencilIcon from '@pingux/mdi-react/PencilIcon';
 import PlusIcon from '@pingux/mdi-react/PlusIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { useGetTheme } from '../../hooks';
 import { Box, Icon, IconButton, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import IconButtonReadme from './IconButton.mdx';
@@ -66,7 +67,6 @@ export var WithTooltip = function WithTooltip(args) {
     title: "Edit"
   }, args), ___EmotionJSX(Icon, {
     icon: CreateIcon,
-    size: "sm",
     title: {
       name: 'Create Icon'
     }
@@ -96,6 +96,8 @@ Disabled.parameters = {
   }
 };
 export var Sizes = function Sizes() {
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   return ___EmotionJSX(Table, null, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
     key: "head"
   }, ___EmotionJSX(TableCell, {
@@ -113,47 +115,41 @@ export var Sizes = function Sizes() {
     bg: "transparent !important"
   }, ___EmotionJSX(TableCell, {
     width: "40%"
-  }, ___EmotionJSX(Text, null, "XXS | 15px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+  }, ___EmotionJSX(Text, null, "XXS |", ' ', isOnyx ? '18px' : '15px')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
     fontFamily: "monospace"
   }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), ___EmotionJSX(Text, {
     fontFamily: "monospace"
   }, "<Icon icon={CreateIcon} size='xxs'/>"), ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, '</IconButton>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(IconButton, {
+  }, '</IconButton>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
     "aria-label": "create button",
-    variant: "inverted",
-    sx: {
-      width: 'unset'
-    }
+    variant: "inverted"
   }, ___EmotionJSX(Icon, {
     icon: CreateIcon,
     size: "xxs",
     title: {
       name: 'Create Icon'
     }
-  })))), ___EmotionJSX(TableRow, {
+  }))))), ___EmotionJSX(TableRow, {
     bg: "transparent !important"
   }, ___EmotionJSX(TableCell, {
     width: "40%"
-  }, ___EmotionJSX(Text, null, "XS | 21px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+  }, ___EmotionJSX(Text, null, "XS |", ' ', isOnyx ? '22px' : '21px')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
     fontFamily: "monospace"
   }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), ___EmotionJSX(Text, {
     fontFamily: "monospace"
   }, "<Icon icon={CreateIcon} size='xs'/>"), ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, '</IconButton>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(IconButton, {
+  }, '</IconButton>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
     "aria-label": "create button",
-    variant: "inverted",
-    sx: {
-      width: 'unset'
-    }
+    variant: "inverted"
   }, ___EmotionJSX(Icon, {
     icon: CreateIcon,
     size: "xs",
     title: {
       name: 'Create Icon'
     }
-  })))), ___EmotionJSX(TableRow, {
+  }))))), ___EmotionJSX(TableRow, {
     bg: "transparent !important"
   }, ___EmotionJSX(TableCell, {
     width: "40%"
@@ -163,41 +159,35 @@ export var Sizes = function Sizes() {
     fontFamily: "monospace"
   }, "<Icon icon={CreateIcon} size='sm'/>"), ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, '</IconButton>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(IconButton, {
+  }, '</IconButton>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
     "aria-label": "create button",
-    variant: "inverted",
-    sx: {
-      width: 'unset'
-    }
+    variant: "inverted"
   }, ___EmotionJSX(Icon, {
     icon: CreateIcon,
     size: "sm",
     title: {
       name: 'Create Icon'
     }
-  })))), ___EmotionJSX(TableRow, {
+  }))))), ___EmotionJSX(TableRow, {
     bg: "transparent !important"
   }, ___EmotionJSX(TableCell, {
     width: "40%"
-  }, ___EmotionJSX(Text, null, "MD | 31px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+  }, ___EmotionJSX(Text, null, "MD |", ' ', isOnyx ? '32px' : '31px')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
     fontFamily: "monospace"
   }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), ___EmotionJSX(Text, {
     fontFamily: "monospace"
   }, "<Icon icon={CreateIcon} size='md'/>"), ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, '</IconButton>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(IconButton, {
+  }, '</IconButton>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
     "aria-label": "create button",
-    variant: "inverted",
-    sx: {
-      width: 'unset'
-    }
+    variant: "inverted"
   }, ___EmotionJSX(Icon, {
     icon: CreateIcon,
     size: "md",
     title: {
       name: 'Create Icon'
     }
-  }))))));
+  })))))));
 };
 Sizes.parameters = {
   design: {

package/lib/hooks/useTShirtSize/useTShirtSize.test.js

@@ -59,7 +59,7 @@ test('returns size value if size is a t-shirt value', function () {
     result = _renderHook2.result;
   var obj = {
     sizeProps: {
-      size: '3rem'
+      size: '48px'
     }
   };
   expect(result.current).toEqual(obj);
@@ -109,4 +109,54 @@ test('using custom sizes, returns size value if size is a string value', functio
     }
   };
   expect(result.current).toEqual(obj);
+});
+test('returns size directly if size key is not found in sizes', function () {
+  var props = {
+    size: 'unknown-size'
+  };
+  var _renderHook6 = renderHook(function () {
+      return useTShirtSize(props);
+    }),
+    result = _renderHook6.result;
+  expect(result.current).toEqual({
+    sizeProps: {
+      size: 'unknown-size'
+    }
+  });
+});
+test('returns value if size value includes rem', function () {
+  var customSizes = {
+    sm: '1.5rem'
+  };
+  var props = {
+    size: 'sm',
+    sizes: customSizes
+  };
+  var _renderHook7 = renderHook(function () {
+      return useTShirtSize(props);
+    }),
+    result = _renderHook7.result;
+  expect(result.current).toEqual({
+    sizeProps: {
+      size: '1.5rem'
+    }
+  });
+});
+test('returns size with px when numeric value found in sizes', function () {
+  var customSizes = {
+    sm: 8
+  };
+  var props = {
+    size: 'sm',
+    sizes: customSizes
+  };
+  var _renderHook8 = renderHook(function () {
+      return useTShirtSize(props);
+    }),
+    result = _renderHook8.result;
+  expect(result.current).toEqual({
+    sizeProps: {
+      size: '8px'
+    }
+  });
 });

package/lib/styles/themeOverrides/nextGenDarkMode/variants/buttons.js

@@ -15,56 +15,43 @@ var baseIconButton = {
   path: {
     fill: 'dark'
   },
-  '&.is-focused': {
-    outline: '2px solid',
-    outlineColor: 'primary',
-    outlineOffset: '3px'
-  },
   '&.is-hovered': {
     path: {
-      fill: chroma.mix(nextGenColors['gray-400'], 'black', 0.15, 'rgb').hex()
+      fill: 'gray-400'
     },
-    backgroundColor: 'transparent'
+    backgroundColor: 'background.secondary'
   },
   '&.is-pressed': {
     backgroundColor: 'gray-800',
     borderColor: 'gray-900',
     path: {
-      fill: chroma.mix(nextGenColors['gray-400'], 'black', 0.15, 'rgb').hex()
+      fill: 'gray-400'
     }
   }
 };
 var hintButton = _objectSpread({}, baseIconButton);
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
-  inverted: _objectSpread(_objectSpread({}, baseIconButton), {}, {
-    borderColor: 'transparent !important',
+  inverted: {
     path: {
       fill: 'black'
     },
     '&.is-pressed': {
-      backgroundColor: chroma.mix('white', 'black', 0.125, 'rgb').hex(),
-      borderColor: chroma.mix('white', 'black', 0.125, 'rgb').hex()
+      backgroundColor: chroma.mix('white', 'black', 0.125, 'rgb').hex()
     },
     '&.is-hovered': {
-      border: 'none !important',
-      borderColor: 'none !important',
       backgroundColor: 'white'
     }
-  }),
-  hintButton: hintButton,
-  nextGen: {
+  },
+  searchClearButton: {
     '&.is-hovered': {
-      path: {
-        fill: 'black'
-      }
+      backgroundColor: 'background.secondary'
     },
     '&.is-pressed': {
-      path: {
-        fill: 'black'
-      }
+      backgroundColor: 'background.secondary'
     }
   },
+  hintButton: hintButton,
   deleteAttachment: {
     backgroundColor: 'background.secondary',
     borderColor: 'border.attachment',

package/lib/styles/themes/astro/customProperties/index.js

@@ -15,6 +15,7 @@ var defaultLoaderSize = 16;
 var buttonLoaderSize = '0.5em';
 var iFrameContentDivBackgroundColor = '#F7F8FD';
 var defaultIconColor = 'currentColor';
+var defaultIconSize = 'sm';
 export var astroThemeValues = {
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
   activeColor: activeColor,
@@ -33,5 +34,6 @@ export var astroThemeValues = {
   accordionItemMarginLeft: accordionItemMarginLeft,
   defaultLoaderSize: defaultLoaderSize,
   defaultIconColor: defaultIconColor,
+  defaultIconSize: defaultIconSize,
   buttonLoaderSize: buttonLoaderSize
 };

package/lib/styles/themes/next-gen/colors/colors.js

@@ -117,7 +117,7 @@ var badge = {
   textColor: nextGenColors.font.base,
   background: nextGenColors['gray-100']
 };
-var tooltip = nextGenColors['gray-900'];
+var tooltip = 'black';
 var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), nextGenColors), overrides), {}, {
   badge: badge,
   card: card,

package/lib/styles/themes/next-gen/customProperties/index.js

@@ -19,6 +19,7 @@ var activeColor = '#1a73e8';
 var backgroundBaseColor = 'white';
 var iFrameContentDivBackgroundColor = backgroundBaseColor;
 var defaultIconColor = 'gray-800';
+var defaultIconSize = 'md';
 var buttonLoaderSize = 'sm';
 export var nextGenThemeValues = _objectSpread({
   activeColor: activeColor,
@@ -32,5 +33,6 @@ export var nextGenThemeValues = _objectSpread({
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
   iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
   rockerButtonGap: '0px',
+  defaultIconSize: defaultIconSize,
   buttonLoaderSize: buttonLoaderSize
 }, customSizes);

package/lib/styles/themes/next-gen/customProperties/tShirtSizes.js

@@ -1,17 +1,17 @@
 export default {
-  xxs: '8px',
-  'icon-100': '.875rem',
-  xs: '15px',
-  'icon-200': '1.125rem',
-  sm: '20px',
-  'icon-300': '1.5rem',
-  md: '25px',
-  'icon-400': '2.25rem',
-  'icon-500': '3rem',
-  'icon-600': '3.75rem',
-  'icon-700': '4.5rem',
-  'icon-800': '5.25rem',
-  'icon-900': '6rem'
+  xxs: '10px',
+  'icon-100': '14px',
+  xs: '14px',
+  'icon-200': '18px',
+  sm: '18px',
+  'icon-300': '24px',
+  md: '24px',
+  'icon-400': '36px',
+  'icon-500': '48px',
+  'icon-600': '60px',
+  'icon-700': '72px',
+  'icon-800': '84px',
+  'icon-900': '96px'
 };
 export var iconWrapperSizes = {
   sm: 18,