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

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.d.ts

@@ -194,11 +194,6 @@ declare const buttons: {
             path: {
                 fill: string;
             };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
             '&.is-hovered': {
                 path: {
                     fill: string;
@@ -214,34 +209,28 @@ declare const buttons: {
             };
         };
         inverted: {
-            borderColor: string;
             path: {
                 fill: string;
             };
             '&.is-pressed': {
                 backgroundColor: string;
-                borderColor: string;
             };
             '&.is-hovered': {
-                border: string;
-                borderColor: string;
                 backgroundColor: string;
             };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
+        };
+        searchClearButton: {
+            '&.is-hovered': {
+                backgroundColor: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
             };
         };
         hintButton: {
             path: {
                 fill: string;
             };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
             '&.is-hovered': {
                 path: {
                     fill: string;
@@ -256,18 +245,6 @@ declare const buttons: {
                 };
             };
         };
-        nextGen: {
-            '&.is-hovered': {
-                path: {
-                    fill: string;
-                };
-            };
-            '&.is-pressed': {
-                path: {
-                    fill: string;
-                };
-            };
-        };
         deleteAttachment: {
             backgroundColor: string;
             borderColor: string;
@@ -282,11 +259,6 @@ declare const buttons: {
             path: {
                 fill: string;
             };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
             '&.is-pressed': {
                 backgroundColor: string;
                 borderColor: string;
@@ -299,11 +271,6 @@ declare const buttons: {
             path: {
                 fill: string;
             };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
             '&.is-hovered': {
                 path: {
                     fill: string;
@@ -325,11 +292,6 @@ declare const buttons: {
             path: {
                 fill: string;
             };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
             '&.is-pressed': {
                 backgroundColor: string;
                 borderColor: string;

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

@@ -22,58 +22,45 @@ var baseIconButton = {
   path: {
     fill: 'dark'
   },
-  '&.is-focused': {
-    outline: '2px solid',
-    outlineColor: 'primary',
-    outlineOffset: '3px'
-  },
   '&.is-hovered': {
     path: {
-      fill: _chromaJs["default"].mix(_colorTokens.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: _chromaJs["default"].mix(_colorTokens.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: _chromaJs["default"].mix('white', 'black', 0.125, 'rgb').hex(),
-      borderColor: _chromaJs["default"].mix('white', 'black', 0.125, 'rgb').hex()
+      backgroundColor: _chromaJs["default"].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',
+    backgroundColor: 'backgroundSecondary',
     borderColor: 'border.attachment',
     '&.is-hovered': {
       backgroundColor: '#0a0b0d'

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/footer.js

@@ -6,7 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.footer = void 0;
 var container = {
-  backgroundColor: 'background.secondary'
+  backgroundColor: 'backgroundSecondary'
 };
 var footer = {
   container: container

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/forms.js

@@ -18,7 +18,7 @@ var _input = require("./input");
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var select = {
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   borderRadius: '4px',
   border: '.5px solid',
   borderColor: '#69788B !important',
@@ -53,7 +53,7 @@ var label = {
   }
 };
 var selectOption = {
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   color: 'text.primary',
   px: 'md',
   py: 'sm',

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/input.js

@@ -18,7 +18,7 @@ var _text = require("./text");
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var input = {
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   borderColor: 'border.input',
   '&::placeholder': _text.text.placeholder
 };
@@ -26,13 +26,13 @@ exports.input = input;
 var fieldControlWrapper = {
   '> textarea': {
     borderColor: 'border.input',
-    backgroundColor: 'background.base'
+    backgroundColor: 'backgroundBase'
   }
 };
 exports.fieldControlWrapper = fieldControlWrapper;
 input.fieldControlWrapper = _objectSpread({}, fieldControlWrapper);
 input.multivaluesWrapper = {
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   '&.is-read-only': {
     boxShadow: 'inset 0 0 0 100px #30373f',
     border: '1px solid',

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/listview.js

@@ -11,7 +11,7 @@ var listViewItem = {
       borderBottom: '1px solid',
       borderBottomColor: 'border.base'
     },
-    bg: 'background.base',
+    bg: 'backgroundBase',
     '&.is-selected': {
       bg: 'background.hover'
     },

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/message.js

@@ -7,31 +7,31 @@ _Object$defineProperty(exports, "__esModule", {
 exports.message = void 0;
 var message = {
   item: {
-    backgroundColor: 'background.secondary',
+    backgroundColor: 'light',
     color: 'white !important',
     '> span': {
       color: 'white !important'
     },
     '&.is-success': {
-      bg: 'background.secondary',
+      bg: 'light',
       borderLeftColor: 'green-500',
       color: 'text.message'
     },
     '&.is-success, > .is-success': {
-      bg: 'background.secondary',
+      bg: 'light',
       color: 'text.message'
     },
     '&.is-warning': {
-      bg: 'background.secondary',
+      bg: 'light',
       borderLeftColor: 'yellow-500',
       color: 'text.message'
     },
     '&.is-warning, > .is-warning': {
-      bg: 'background.secondary',
+      bg: 'light',
       color: 'text.message'
     },
     '&.is-error, > .is-error': {
-      bg: 'background.secondary',
+      bg: 'light',
       color: 'text.message'
     },
     '&.is-error, > button > svg': {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/navbar.js

@@ -28,7 +28,7 @@ var navBar = {
   container: {
     width: '252px',
     p: 'sm',
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     boxShadow: '0 .5rem 1rem rgba(0, 0, 0, .15)'
   },
   sectionButton: {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -377,6 +377,26 @@ declare const _default: {
             bg: string;
         };
         headingContainer: {
+            borderBottom: string;
+            borderBottomColor: string;
+            bg: string;
+        };
+        header: {
+            borderBottom: string;
+            borderBottomColor: string;
+            bg: string;
+        };
+        body: {
+            bg: string;
+        };
+        footer: {
+            borderTop: string;
+            borderTopColor: string;
+            bg: string;
+        };
+        footerContainer: {
+            borderTop: string;
+            borderTopColor: string;
             bg: string;
         };
         buttonsContainer: {

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

@@ -18,7 +18,7 @@ var _navbar = require("./navbar");
 var _skeleton = _interopRequireDefault(require("./skeleton"));
 var listBox = {
   container: {
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     border: '1px solid',
     borderColor: 'transparent',
     borderRadius: '4px'
@@ -51,21 +51,41 @@ var tab = {
 };
 var modal = {
   content: {
-    bg: 'background.base'
+    bg: 'backgroundBase'
   },
   headingContainer: {
-    bg: 'background.base'
+    borderBottom: '1px solid',
+    borderBottomColor: 'border.base',
+    bg: 'backgroundBase'
+  },
+  header: {
+    borderBottom: '1px solid',
+    borderBottomColor: 'border.base',
+    bg: 'backgroundBase'
+  },
+  body: {
+    bg: 'backgroundBase'
+  },
+  footer: {
+    borderTop: '1px solid',
+    borderTopColor: 'border.base',
+    bg: 'backgroundBase'
+  },
+  footerContainer: {
+    borderTop: '1px solid',
+    borderTopColor: 'border.base',
+    bg: 'backgroundBase'
   },
   buttonsContainer: {
-    bg: 'background.base'
+    bg: 'backgroundBase'
   }
 };
 var rockerButton = {
   innerContainer: {
-    backgroundColor: 'background.base'
+    backgroundColor: 'backgroundBase'
   },
   thumbSwitch: {
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     color: 'blue-400',
     '&.is-selected': {
       color: 'black',
@@ -83,7 +103,7 @@ var rockerButton = {
 };
 var attachment = {
   container: {
-    backgroundColor: 'background.secondary',
+    backgroundColor: 'backgroundSecondary',
     borderColor: 'border.attachment'
   }
 };

package/lib/cjs/styles/themes/astro/customProperties/index.d.ts

@@ -42,5 +42,6 @@ export declare const astroThemeValues: {
     accordionItemMarginLeft: string;
     defaultLoaderSize: number;
     defaultIconColor: string;
+    defaultIconSize: IconSize;
     buttonLoaderSize: LoaderSize;
 };

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

@@ -28,6 +28,7 @@ var defaultLoaderSize = 16;
 var buttonLoaderSize = '0.5em';
 var iFrameContentDivBackgroundColor = '#F7F8FD';
 var defaultIconColor = 'currentColor';
+var defaultIconSize = 'sm';
 var astroThemeValues = {
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
   activeColor: activeColor,
@@ -46,6 +47,7 @@ var astroThemeValues = {
   accordionItemMarginLeft: accordionItemMarginLeft,
   defaultLoaderSize: defaultLoaderSize,
   defaultIconColor: defaultIconColor,
+  defaultIconSize: defaultIconSize,
   buttonLoaderSize: buttonLoaderSize
 };
 exports.astroThemeValues = astroThemeValues;

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

@@ -61,13 +61,12 @@ declare const colors: {
     };
     active: string;
     primary: string;
-    background: {
-        base: string;
-        secondary: string;
-        card: string;
-        suggestion: string;
-        hover: string;
-    };
+    background: string;
+    backgroundBase: string;
+    backgroundSecondary: string;
+    backgroundCard: string;
+    backgroundSuggestion: string;
+    backgroundHover: string;
     iconWrapper: {
         wrapper: {
             orange: string;

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

@@ -113,13 +113,12 @@ var overrides = {
   focus: colorsObject.active,
   disabled: _colorTokens.nextGenColors['gray-100']
 };
-var background = {
-  base: 'white',
-  secondary: _colorTokens.nextGenColors['gray-100'],
-  card: _colorTokens.nextGenColors['blue-100'],
-  suggestion: '#ecf0f5',
-  hover: _colorTokens.nextGenColors['gray-100']
-};
+var background = _colorTokens.nextGenColors['blue-100'];
+var backgroundBase = 'white';
+var backgroundSecondary = _colorTokens.nextGenColors['gray-100'];
+var backgroundCard = _colorTokens.nextGenColors['blue-100'];
+var backgroundSuggestion = '#ecf0f5';
+var backgroundHover = _colorTokens.nextGenColors['gray-100'];
 var card = {
   blue: _colorTokens.nextGenColors['blue-100'],
   gray: _colorTokens.nextGenColors['gray-100']
@@ -128,7 +127,7 @@ var badge = {
   textColor: _colorTokens.nextGenColors.font.base,
   background: _colorTokens.nextGenColors['gray-100']
 };
-var tooltip = _colorTokens.nextGenColors['gray-900'];
+var tooltip = 'black';
 var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), _colorTokens.nextGenColors), overrides), {}, {
   badge: badge,
   card: card,
@@ -141,6 +140,11 @@ var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColo
   active: colorsObject.blue,
   primary: colorsObject.blue,
   background: background,
+  backgroundBase: backgroundBase,
+  backgroundSecondary: backgroundSecondary,
+  backgroundCard: backgroundCard,
+  backgroundSuggestion: backgroundSuggestion,
+  backgroundHover: backgroundHover,
   iconWrapper: _iconWrapper.iconWrapper,
   tooltip: tooltip,
   twoTone: _twoTone["default"]

package/lib/cjs/styles/themes/next-gen/convertedComponentList.js

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box'];
 var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+import type { IconSize } from '../../../../types';
 import { LoaderSize } from '../../../../types';
 export declare const nextGenThemeValues: {
-    copyButtonSize: import("../../../../types").IconSize;
-    breadcrumbIconSize: import("../../../../types").IconSize;
+    copyButtonSize: IconSize;
+    breadcrumbIconSize: IconSize;
     breadcrumbIconMargin: string;
     accordionItemMarginLeft: string;
     pageHeaderTitleMargin: string;
@@ -51,5 +52,6 @@ export declare const nextGenThemeValues: {
     accordionItemDefaultLabelTag: string;
     iFrameContentDivBackgroundColor: string;
     rockerButtonGap: string;
+    defaultIconSize: IconSize;
     buttonLoaderSize: LoaderSize;
 };

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

@@ -30,6 +30,7 @@ var activeColor = '#1a73e8';
 var backgroundBaseColor = 'white';
 var iFrameContentDivBackgroundColor = backgroundBaseColor;
 var defaultIconColor = 'gray-800';
+var defaultIconSize = 'md';
 var buttonLoaderSize = 'sm';
 var nextGenThemeValues = _objectSpread({
   activeColor: activeColor,
@@ -43,6 +44,7 @@ var nextGenThemeValues = _objectSpread({
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
   iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
   rockerButtonGap: '0px',
+  defaultIconSize: defaultIconSize,
   buttonLoaderSize: buttonLoaderSize
 }, _customSizes["default"]);
 exports.nextGenThemeValues = nextGenThemeValues;

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

@@ -6,19 +6,19 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.iconWrapperSizes = exports["default"] = void 0;
 var _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'
 };
 exports["default"] = _default;
 var iconWrapperSizes = {