@pingux/astro 2.163.1-alpha.4 → 2.163.1-alpha.5

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

@@ -18,8 +18,8 @@ var _button = _interopRequireDefault(require("./button"));
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var badgeFont = {
-  fontSize: '12px',
-  fontWeight: 2
+  fontSize: 'tiny',
+  fontWeight: '2'
 };
 var badgeIconStyle = {
   '& span': _objectSpread({}, badgeFont),
@@ -50,7 +50,7 @@ var baseBadge = _objectSpread({
   borderRadius: '4px',
   maxHeight: '18px',
   minHeight: '18px',
-  fontSize: '12px',
+  fontSize: 'tiny',
   alignSelf: 'flex-start',
   display: 'inline-flex !important',
   width: 'fit-content',
@@ -88,30 +88,31 @@ var selectedItemBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#eaf2fd !important',
   paddingRight: '0px !important',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'text.primary',
-    fontWeight: 400
+    color: 'text.primary'
   })
 });
 var readOnlyBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  border: 'none',
+  border: '1px solid',
+  borderColor: 'border.hairline',
+  backgroundColor: '#FFFFFF !important',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
     color: 'text.primary',
-    fontWeight: 2
+    lineHeight: 'xs'
   })
 });
 var readOnlyFieldBadge = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'white'
+    color: 'text.primary',
+    lineHeight: 'xs'
   })
 });
-var itemBadgeWithSlot = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
-  bg: '#EAF2FD !important',
-  fontWeight: 2,
+var itemBadgeWithSlot = _objectSpread(_objectSpread({}, selectedItemBadge), {}, {
+  border: 'none',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
     color: 'text.primary'
   }),
   '& svg': {
-    fill: 'gray-900'
+    fill: 'text.primary'
   }
 });
 var badgeDeleteButton = exports.badgeDeleteButton = _objectSpread(_objectSpread({}, _button["default"].iconButtons.base), {}, {

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

@@ -766,6 +766,9 @@ declare const _default: {
             pl: string;
             pr: string;
             justifyContent: string;
+            borderRadius: string;
+            lineHeight: string;
+            color: string;
             '&.is-focused': {
                 color: string;
                 bg: string;
@@ -795,14 +798,25 @@ declare const _default: {
             '&.is-condensed': {
                 pl: string;
                 bg: string;
+                color: string;
                 '&.is-selected': {
                     bg: string;
                 };
                 '&.is-focused': {
                     bg: string;
+                    color: string;
                 };
             };
         };
+        sectionTitle: {
+            color: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            textTransform: string;
+            letterSpacing: string;
+            ml: string;
+        };
     };
     listView: {
         container: {

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

@@ -158,8 +158,11 @@ var listBox = {
     pl: '.75rem',
     pr: 'md',
     justifyContent: 'space-between',
+    borderRadius: '4px',
+    lineHeight: 'body',
+    color: 'gray-700',
     '&.is-focused': {
-      color: 'text.primary',
+      color: 'font.hover',
       bg: 'gray-100',
       borderRadius: '4px'
     },
@@ -187,13 +190,24 @@ var listBox = {
     '&.is-condensed': {
       pl: 'md',
       bg: 'backgroundBase',
+      color: 'gray-700',
       '&.is-selected': {
         bg: 'backgroundBase'
       },
       '&.is-focused': {
-        bg: 'backgroundBase'
+        bg: 'backgroundBase',
+        color: 'font.hover'
       }
     }
+  },
+  sectionTitle: {
+    color: 'font.light',
+    fontWeight: '1',
+    fontSize: 'tiny',
+    lineHeight: 'xs',
+    textTransform: 'uppercase',
+    letterSpacing: '1px',
+    ml: 'md'
   }
 };
 var separator = {

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

@@ -57,18 +57,35 @@ var countNeutral = {
     color: 'white'
   }
 };
-var itemBadgeWithSlot = {
-  bg: '#455469 !important',
-  fontWeight: 2,
+var readOnlyBadge = {
+  color: 'gray-100',
+  backgroundColor: '#23282E !important',
+  borderColor: 'border.attachment',
   '& span': {
     color: 'gray-100'
-  },
+  }
+};
+var readOnlyFieldBadge = {
+  color: 'gray-100',
+  backgroundColor: '#23282E !important',
+  borderColor: 'border.attachment',
+  '& span': {
+    color: 'gray-100'
+  }
+};
+var selectedItemBadge = {
+  backgroundColor: '#155CBA !important',
+  '& span': {
+    color: 'gray-100'
+  }
+};
+var itemBadgeWithSlot = _objectSpread(_objectSpread({}, selectedItemBadge), {}, {
   '& svg': {
     path: {
       fill: 'gray-100'
     }
   }
-};
+});
 var badges = {
   baseBadge: baseBadge,
   primary: primary,
@@ -83,24 +100,11 @@ var badges = {
   criticalStatusBadge: criticalStatusBadge,
   healthyStatusBadge: healthyStatusBadge,
   secondaryStatusBadge: secondaryStatusBadge,
-  readOnlyFieldBadge: {
-    backgroundColor: '#F6F8FA !important',
-    '& span': {
-      color: 'black'
-    }
-  },
-  selectedItemBadge: {
-    backgroundColor: '#1a73e8 !important',
-    paddingRight: '0px !important',
-    pl: '10px',
-    '& span': {
-      fontSize: '14px',
-      color: 'gray-400',
-      fontWeight: 400
-    }
-  },
   countBadge: countBadge,
   countNeutral: countNeutral,
+  selectedItemBadge: selectedItemBadge,
+  readOnlyBadge: readOnlyBadge,
+  readOnlyFieldBadge: readOnlyFieldBadge,
   itemBadgeWithSlot: itemBadgeWithSlot,
   errorCalloutBadge: {
     backgroundColor: '#23282e !important',

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

@@ -18,15 +18,22 @@ var listBox = {
     borderRadius: '4px'
   },
   option: {
+    color: 'gray-400',
     '&.is-focused': {
-      color: 'text.primary',
-      bg: 'gray-800'
+      color: 'gray-200',
+      bg: '#2C323A'
     },
     '&.is-selected': {
-      color: 'text.primary',
-      bg: 'gray-800',
+      color: 'gray-200',
+      bg: '#2C323A',
       '&.is-focused': {
-        color: 'text.primary'
+        color: 'gray-200'
+      }
+    },
+    '&.is-condensed': {
+      color: 'gray-400',
+      '&.is-focused': {
+        color: 'gray-200'
       }
     },
     '&.is-focus-visible': {

package/lib/styles/themes/next-gen/tokens/colorTokens.js

@@ -123,7 +123,8 @@ export var nextGenColors = {
     'light': '#5e6d82',
     'link': '#1a73e8',
     'label': '#5e6d82',
-    'reverse': '#ffffff'
+    'reverse': '#ffffff',
+    'hover': '#121518'
   },
   'active': '#1a73e8',
   'active_hover': '#1462C8',

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

@@ -11,8 +11,8 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import buttons from './button';
 var badgeFont = {
-  fontSize: '12px',
-  fontWeight: 2
+  fontSize: 'tiny',
+  fontWeight: '2'
 };
 var badgeIconStyle = {
   '& span': _objectSpread({}, badgeFont),
@@ -43,7 +43,7 @@ var baseBadge = _objectSpread({
   borderRadius: '4px',
   maxHeight: '18px',
   minHeight: '18px',
-  fontSize: '12px',
+  fontSize: 'tiny',
   alignSelf: 'flex-start',
   display: 'inline-flex !important',
   width: 'fit-content',
@@ -81,30 +81,31 @@ var selectedItemBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#eaf2fd !important',
   paddingRight: '0px !important',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'text.primary',
-    fontWeight: 400
+    color: 'text.primary'
   })
 });
 var readOnlyBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  border: 'none',
+  border: '1px solid',
+  borderColor: 'border.hairline',
+  backgroundColor: '#FFFFFF !important',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
     color: 'text.primary',
-    fontWeight: 2
+    lineHeight: 'xs'
   })
 });
 var readOnlyFieldBadge = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'white'
+    color: 'text.primary',
+    lineHeight: 'xs'
   })
 });
-var itemBadgeWithSlot = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
-  bg: '#EAF2FD !important',
-  fontWeight: 2,
+var itemBadgeWithSlot = _objectSpread(_objectSpread({}, selectedItemBadge), {}, {
+  border: 'none',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
     color: 'text.primary'
   }),
   '& svg': {
-    fill: 'gray-900'
+    fill: 'text.primary'
   }
 });
 export var badgeDeleteButton = _objectSpread(_objectSpread({}, buttons.iconButtons.base), {}, {

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

@@ -148,8 +148,11 @@ var listBox = {
     pl: '.75rem',
     pr: 'md',
     justifyContent: 'space-between',
+    borderRadius: '4px',
+    lineHeight: 'body',
+    color: 'gray-700',
     '&.is-focused': {
-      color: 'text.primary',
+      color: 'font.hover',
       bg: 'gray-100',
       borderRadius: '4px'
     },
@@ -177,13 +180,24 @@ var listBox = {
     '&.is-condensed': {
       pl: 'md',
       bg: 'backgroundBase',
+      color: 'gray-700',
       '&.is-selected': {
         bg: 'backgroundBase'
       },
       '&.is-focused': {
-        bg: 'backgroundBase'
+        bg: 'backgroundBase',
+        color: 'font.hover'
       }
     }
+  },
+  sectionTitle: {
+    color: 'font.light',
+    fontWeight: '1',
+    fontSize: 'tiny',
+    lineHeight: 'xs',
+    textTransform: 'uppercase',
+    letterSpacing: '1px',
+    ml: 'md'
   }
 };
 var separator = {