@pingux/astro 2.136.1-alpha.2 → 2.137.0-alpha.0

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

@@ -16,76 +16,123 @@ exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 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 badgeFont = {
-  fontSize: '11.25px',
-  fontWeight: 2
-};
 var baseBadge = {
-  alignItems: 'center',
-  justifyContent: 'center',
-  py: '.25em',
-  px: '.4em',
-  borderRadius: '4px',
-  fontSize: '11.25px',
-  alignSelf: 'flex-start',
-  display: 'inline-flex !important',
-  width: 'fit-content',
-  '& span': _objectSpread({}, badgeFont)
+  color: 'badge.textColor'
+};
+var primary = {
+  backgroundColor: '#1a73e8 !important',
+  color: 'black'
+};
+var secondary = {
+  backgroundColor: '#324054 !important',
+  color: 'gray-100'
+};
+var success = {
+  backgroundColor: '#22a75f !important',
+  color: 'black'
+};
+var danger = {
+  backgroundColor: '#da3a2b !important',
+  color: 'black'
+};
+var warning = {
+  backgroundColor: '#ffb946 !important',
+  color: 'black'
+};
+var info = {
+  backgroundColor: '#324054 !important',
+  color: 'gray-100'
+};
+var dark = {
+  backgroundColor: '#c0c9d5 !important',
+  color: 'gray-100'
+};
+var activeStatusBadge = _objectSpread({}, primary);
+var warningStatusBadge = _objectSpread({}, warning);
+var criticalStatusBadge = _objectSpread({}, danger);
+var healthyStatusBadge = _objectSpread({}, success);
+var secondaryStatusBadge = _objectSpread({}, secondary);
+var countBadge = {
+  backgroundColor: '#F6F8FA !important',
+  '& span': {
+    color: 'black'
+  }
+};
+var countNeutral = {
+  backgroundColor: '#455469 !important',
+  '& span': {
+    color: 'white'
+  }
+};
+var itemBadgeWithSlot = {
+  bg: '#455469 !important',
+  fontWeight: 2,
+  '& span': {
+    color: 'gray-100'
+  },
+  '& svg': {
+    path: {
+      fill: 'gray-100'
+    }
+  }
 };
 var badges = {
-  primary: {
-    backgroundColor: '#155CBA !important',
+  baseBadge: baseBadge,
+  primary: primary,
+  secondary: secondary,
+  success: success,
+  danger: danger,
+  warning: warning,
+  info: info,
+  dark: dark,
+  activeStatusBadge: activeStatusBadge,
+  warningStatusBadge: warningStatusBadge,
+  criticalStatusBadge: criticalStatusBadge,
+  healthyStatusBadge: healthyStatusBadge,
+  secondaryStatusBadge: secondaryStatusBadge,
+  readOnlyFieldBadge: {
+    backgroundColor: '#F6F8FA !important',
     '& span': {
-      color: 'active_light'
+      color: 'black'
     }
   },
-  secondary: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#324054 !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: 'gray-400'
-    })
-  }),
-  baseBadge: _objectSpread({}, baseBadge),
-  success: {
-    backgroundColor: '#0E4326 !important',
+  selectedItemBadge: {
+    backgroundColor: '#1a73e8 !important',
+    paddingRight: '0px !important',
+    pl: '10px',
     '& span': {
-      color: 'success_light'
+      fontSize: '14px',
+      color: 'gray-400',
+      fontWeight: 400
     }
   },
-  danger: {
-    backgroundColor: '#83231A !important',
+  countBadge: countBadge,
+  countNeutral: countNeutral,
+  itemBadgeWithSlot: itemBadgeWithSlot,
+  errorCalloutBadge: {
+    backgroundColor: '#23282e !important',
     '& span': {
-      color: 'critical_light'
+      color: 'font.base'
     }
   },
-  warning: {
-    backgroundColor: '#664A1C !important',
+  infoCalloutBadge: {
+    backgroundColor: '#23282e !important',
     '& span': {
-      color: 'yellow-100'
+      color: 'font.base'
     }
   },
-  info: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#324054 !important',
-    '& span': _objectSpread({
-      color: 'dark'
-    }, badgeFont)
-  }),
-  dark: {
-    backgroundColor: '#F6F8FA !important',
+  successCalloutBadge: {
+    backgroundColor: '#23282e !important',
     '& span': {
-      color: 'black'
+      color: 'font.base'
     }
   },
-  selectedItemBadge: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#1a73e8 !important',
-    paddingRight: '0px !important',
-    pl: '10px',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      fontSize: '14px',
-      color: 'gray-400',
-      fontWeight: 400
-    })
-  })
+  warningCalloutBadge: {
+    backgroundColor: '#23282e !important',
+    '& span': {
+      color: 'font.base'
+    }
+  }
 };
 var _default = badges;
 exports["default"] = _default;

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

@@ -13,6 +13,11 @@ export declare const warning: {
     dark: string;
     light: string;
 };
+export declare const info: {
+    bright: string;
+    dark: string;
+    light: string;
+};
 declare const colors: {
     badge: {
         textColor: string;
@@ -37,6 +42,11 @@ declare const colors: {
         dark: string;
         light: string;
     };
+    info: {
+        bright: string;
+        dark: string;
+        light: string;
+    };
     text: {
         primary: string;
         secondary: string;
@@ -262,7 +272,6 @@ declare const colors: {
     mediumteal: string;
     mediumcyan: string;
     secondary: string;
-    info: string;
     danger: string;
     light: string;
     dark: string;

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.warning = exports.success = exports["default"] = exports.critical = void 0;
+exports.warning = exports.success = exports.info = exports["default"] = exports.critical = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _colorTokens = require("../tokens/colorTokens");
 var _iconWrapper = require("./iconWrapper");
@@ -71,8 +71,8 @@ var colorsObject = {
 };
 var critical = {
   bright: colorsObject.red,
-  dark: _colorTokens.nextGenColors['red-600'],
-  light: colorsObject.red
+  dark: _colorTokens.nextGenColors['red-700'],
+  light: _colorTokens.nextGenColors['red-100']
 };
 exports.critical = critical;
 var success = {
@@ -87,6 +87,12 @@ var warning = {
   light: _colorTokens.nextGenColors['yellow-100']
 };
 exports.warning = warning;
+var info = {
+  bright: colorsObject.blue,
+  dark: _colorTokens.nextGenColors['blue-600'],
+  light: _colorTokens.nextGenColors['blue-100']
+};
+exports.info = info;
 var text = {
   primary: _colorTokens.nextGenColors['gray-900'],
   secondary: _colorTokens.nextGenColors['gray-500'],
@@ -117,7 +123,7 @@ var card = {
   gray: _colorTokens.nextGenColors['gray-100']
 };
 var badge = {
-  textColor: _colorTokens.nextGenColors['gray-900'],
+  textColor: _colorTokens.nextGenColors.font.base,
   background: _colorTokens.nextGenColors['gray-100']
 };
 var tooltip = _colorTokens.nextGenColors['gray-900'];
@@ -127,6 +133,7 @@ var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColo
   critical: critical,
   success: success,
   warning: warning,
+  info: info,
   text: text,
   border: border,
   active: colorsObject.blue,

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

@@ -1,7 +1,6 @@
 declare const nextGenConvertedComponents: string[];
 export declare const componentSpecificNextGenBlacklist: {
     AstroProvider: string[];
-    Badge: string[];
     Messages: string[];
     MultivaluesField: string[];
     PasswordField: string[];

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

@@ -8,7 +8,6 @@ exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNe
 var nextGenConvertedComponents = ['GridList', 'DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination', 'StatusIcon', 'Callout', 'Table', 'TableBase', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField'];
 var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
-  Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],
   Messages: ['Customization'],
   MultivaluesField: ['Condensed', 'Condensed With Section'],
   PasswordField: ['Success'],