@pingux/astro 2.221.6-alpha.0 → 2.234.0-alpha.0

package/lib/cjs/styles/forms/index.js

@@ -17,6 +17,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var checkbox = _interopRequireWildcard(require("../../components/Checkbox/Checkbox.styles"));
+var _CheckboxFieldGroup = _interopRequireDefault(require("../../components/CheckboxFieldGroup/CheckboxFieldGroup.styles"));
 var _ColorField = _interopRequireDefault(require("../../components/ColorField/ColorField.styles"));
 var _ComboBox = _interopRequireDefault(require("../../components/ComboBox/ComboBox.styles"));
 var _DatePicker = _interopRequireDefault(require("../../components/DatePicker/DatePicker.styles"));
@@ -33,14 +34,34 @@ var _TimeField = _interopRequireDefault(require("../../components/TimeField/Time
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; } // 'switch' is a reserved keyword
+var labelVariants = _objectSpread(_objectSpread({}, label.label), {}, {
+  checkboxFieldGroup: _objectSpread(_objectSpread({}, label.label), {}, {
+    mb: 'sm',
+    flexWrap: 'wrap'
+  }),
+  checkboxFieldGroupItem: _objectSpread(_objectSpread({}, label.label.checkbox), {}, {
+    minWidth: 0,
+    maxWidth: '100%',
+    flexWrap: 'wrap',
+    '> div': {
+      mr: 'md'
+    },
+    '&.is-disabled, &.is-read-only': {
+      color: 'inherit'
+    }
+  })
+});
+
 // See ThemeUI docs on variants and themes for intended structure
 // Variants should be defined in the approprate file.
-var _default = exports["default"] = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, checkbox), {}, {
+var _default = exports["default"] = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, checkbox), {}, {
+  checkboxFieldGroup: _CheckboxFieldGroup["default"],
   colorField: _ColorField["default"],
   comboBox: _ComboBox["default"],
   datePicker: _DatePicker["default"],
   fileInputField: _FileInputField["default"]
-}, input), label), {}, {
+}, input), {}, {
+  label: labelVariants,
   numberField: _NumberField["default"],
   radio: _Radio["default"]
 }, select), {}, {

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

@@ -41,6 +41,23 @@ export declare const colors: {
             lightYellow: string;
             lightIndigo: string;
         };
+        secondary: {
+            orange: string;
+            cyan: string;
+            green: string;
+            purple: string;
+            pink: string;
+            red: string;
+            yellow: string;
+            teal: string;
+            blue: string;
+            indigo: string;
+            lightBlue: string;
+            lightPink: string;
+            lightGreen: string;
+            lightYellow: string;
+            lightIndigo: string;
+        };
     };
     light: string;
     secondary: string;

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

@@ -37,7 +37,7 @@ var border = {
   input: _onyxTokens.astroTokensDark.color.gray[500],
   separator: _chromaJs["default"].mix('#23282e', 'white', 0.15, 'rgb').hex(),
   attachment: '#39414b',
-  hairline: '#737577'
+  hairline: _onyxTokens.astroTokensDark.color.common.border
 };
 var badge = {
   background: _onyxTokens.astroTokensDark.color.gray[800],
@@ -88,6 +88,23 @@ var twoTone = {
     lightGreen: 'black',
     lightYellow: 'black',
     lightIndigo: 'black'
+  },
+  secondary: {
+    orange: _onyxTokens.astroTokensDark.color.orange[500],
+    cyan: _onyxTokens.astroTokensDark.color.cyan[500],
+    green: _onyxTokens.astroTokensDark.color.green[500],
+    purple: _onyxTokens.astroTokensDark.color.purple[500],
+    pink: _onyxTokens.astroTokensDark.color.pink[500],
+    red: _onyxTokens.astroTokensDark.color.red[500],
+    yellow: _onyxTokens.astroTokensDark.color.yellow[500],
+    teal: _onyxTokens.astroTokensDark.color.teal[500],
+    blue: _onyxTokens.astroTokensDark.color.blue[500],
+    indigo: _onyxTokens.astroTokensDark.color.indigo[500],
+    lightBlue: _onyxTokens.astroTokensDark.color.blue[600],
+    lightPink: _onyxTokens.astroTokensDark.color.pink[600],
+    lightGreen: _onyxTokens.astroTokensDark.color.green[800],
+    lightYellow: _onyxTokens.astroTokensDark.color.yellow[800],
+    lightIndigo: _onyxTokens.astroTokensDark.color.indigo[700]
   }
 };
 var iconWrapper = {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/icons.d.ts

@@ -37,6 +37,8 @@ declare const _default: {
     mdiWeb: string;
     MenuDown: string;
     MenuUp: string;
+    tabPickerDown: string;
+    tabPickerUp: string;
     monitoringIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
     openInNew: string;
     overviewIcon: string;
@@ -54,5 +56,9 @@ declare const _default: {
     ImageOutlineIcon: string;
     helpHint: string;
     ModalCloseIcon: string;
+    errorCalloutBadge: import("@pingux/mdi-react").MdiReactIconComponentType;
+    infoCalloutBadge: import("@pingux/mdi-react").MdiReactIconComponentType;
+    successCalloutBadge: import("@pingux/mdi-react").MdiReactIconComponentType;
+    warningCalloutBadge: import("@pingux/mdi-react").MdiReactIconComponentType;
 };
 export default _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts

@@ -40,6 +40,8 @@ export declare const nextGenDarkThemeValues: {
         mdiWeb: string;
         MenuDown: string;
         MenuUp: string;
+        tabPickerDown: string;
+        tabPickerUp: string;
         monitoringIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
         openInNew: string;
         overviewIcon: string;
@@ -57,6 +59,10 @@ export declare const nextGenDarkThemeValues: {
         ImageOutlineIcon: string;
         helpHint: string;
         ModalCloseIcon: string;
+        errorCalloutBadge: import("@pingux/mdi-react").MdiReactIconComponentType;
+        infoCalloutBadge: import("@pingux/mdi-react").MdiReactIconComponentType;
+        successCalloutBadge: import("@pingux/mdi-react").MdiReactIconComponentType;
+        warningCalloutBadge: import("@pingux/mdi-react").MdiReactIconComponentType;
     };
     defaultIconColor: string;
     badgeStyles: {
@@ -105,6 +111,7 @@ export declare const nextGenDarkThemeValues: {
         xsm: string;
     };
     iconBadgeCircleColor: string;
+    iconBadgeTwotoneColorNames: string[];
     iconWrapperSizes: {
         xs: number;
         sm: number;

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

@@ -4,6 +4,12 @@ declare const badges: {
             color: string;
         };
     };
+    convenienceDefault: {
+        backgroundColor: string;
+        '& span': {
+            color: string;
+        };
+    };
     primary: {
         backgroundColor: string;
         '& span': {
@@ -47,36 +53,72 @@ declare const badges: {
         };
     };
     activeStatusBadge: {
+        '& svg': {
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
         backgroundColor: string;
         '& span': {
             color: string;
         };
     };
     selected: {
+        '& svg': {
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
         backgroundColor: string;
         '& span': {
             color: string;
         };
     };
     warningStatusBadge: {
+        '& svg': {
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
         backgroundColor: string;
         '& span': {
             color: string;
         };
     };
     criticalStatusBadge: {
+        '& svg': {
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
         backgroundColor: string;
         '& span': {
             color: string;
         };
     };
     healthyStatusBadge: {
+        '& svg': {
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
         backgroundColor: string;
         '& span': {
             color: string;
         };
     };
     secondaryStatusBadge: {
+        '& svg': {
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
         backgroundColor: string;
         '& span': {
             color: string;
@@ -127,25 +169,73 @@ declare const badges: {
             color: string;
         };
     };
+    removableBadge: {
+        backgroundColor: string;
+        '& span': {
+            color: string;
+        };
+        '& svg': {
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
+    };
+    invertedRemovableBadge: {
+        backgroundColor: string;
+        '& span': {
+            color: string;
+        };
+        '& svg': {
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
+    };
     errorCalloutBadge: {
+        '& svg': {
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
         backgroundColor: string;
         '& span': {
             color: string;
         };
     };
     infoCalloutBadge: {
+        '& svg': {
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
         backgroundColor: string;
         '& span': {
             color: string;
         };
     };
     successCalloutBadge: {
+        '& svg': {
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
         backgroundColor: string;
         '& span': {
             color: string;
         };
     };
     warningCalloutBadge: {
+        '& svg': {
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
         backgroundColor: string;
         '& span': {
             color: string;

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

@@ -64,11 +64,46 @@ var dark = {
     color: _onyxTokens.astroTokensDark.color.gray[100]
   }
 };
-var activeStatusBadge = _objectSpread({}, primary);
-var warningStatusBadge = _objectSpread({}, warning);
-var criticalStatusBadge = _objectSpread({}, danger);
-var healthyStatusBadge = _objectSpread({}, success);
-var secondaryStatusBadge = _objectSpread({}, secondary);
+var activeStatusBadge = _objectSpread(_objectSpread({}, primary), {}, {
+  '& svg': {
+    color: 'inherit',
+    path: {
+      fill: 'black'
+    }
+  }
+});
+var warningStatusBadge = _objectSpread(_objectSpread({}, warning), {}, {
+  '& svg': {
+    color: 'inherit',
+    path: {
+      fill: 'black'
+    }
+  }
+});
+var criticalStatusBadge = _objectSpread(_objectSpread({}, danger), {}, {
+  '& svg': {
+    color: 'inherit',
+    path: {
+      fill: 'black'
+    }
+  }
+});
+var healthyStatusBadge = _objectSpread(_objectSpread({}, success), {}, {
+  '& svg': {
+    color: 'inherit',
+    path: {
+      fill: 'black'
+    }
+  }
+});
+var secondaryStatusBadge = _objectSpread(_objectSpread({}, secondary), {}, {
+  '& svg': {
+    color: 'inherit',
+    path: {
+      fill: _onyxTokens.astroTokensDark.color.gray[100]
+    }
+  }
+});
 var countBadge = {
   backgroundColor: '#F6F8FA !important',
   '& span': {
@@ -110,6 +145,30 @@ var itemBadgeWithSlot = _objectSpread(_objectSpread({}, selectedItemBadge), {},
     }
   }
 });
+var removableBadge = {
+  backgroundColor: "".concat(_onyxTokens.astroTokensDark.color.gray[700], " !important"),
+  '& span': {
+    color: _onyxTokens.astroTokensDark.color.gray[100]
+  },
+  '& svg': {
+    color: _onyxTokens.astroTokensDark.color.gray[100],
+    path: {
+      fill: _onyxTokens.astroTokensDark.color.gray[100]
+    }
+  }
+};
+var invertedRemovableBadge = {
+  backgroundColor: "".concat(_onyxTokens.astroTokensDark.color.gray[100], " !important"),
+  '& span': {
+    color: _onyxTokens.astroTokensDark.color.gray[700]
+  },
+  '& svg': {
+    color: _onyxTokens.astroTokensDark.color.gray[700],
+    path: {
+      fill: _onyxTokens.astroTokensDark.color.gray[700]
+    }
+  }
+};
 var tableBaseBadgeSpanStyle = {
   fontSize: '11.25px',
   lineHeight: '1'
@@ -148,6 +207,12 @@ var tableBaseBadge = {
 };
 var badges = {
   baseBadge: baseBadge,
+  convenienceDefault: {
+    backgroundColor: "".concat(_onyxTokens.astroTokensDark.color.gray.light, " !important"),
+    '& span': {
+      color: _onyxTokens.astroTokensDark.color.font.base
+    }
+  },
   primary: primary,
   secondary: secondary,
   success: success,
@@ -167,30 +232,12 @@ var badges = {
   readOnlyBadge: readOnlyBadge,
   readOnlyFieldBadge: readOnlyFieldBadge,
   itemBadgeWithSlot: itemBadgeWithSlot,
-  errorCalloutBadge: {
-    backgroundColor: '#23282e !important',
-    '& span': {
-      color: 'font.base'
-    }
-  },
-  infoCalloutBadge: {
-    backgroundColor: '#23282e !important',
-    '& span': {
-      color: 'font.base'
-    }
-  },
-  successCalloutBadge: {
-    backgroundColor: '#23282e !important',
-    '& span': {
-      color: 'font.base'
-    }
-  },
-  warningCalloutBadge: {
-    backgroundColor: '#23282e !important',
-    '& span': {
-      color: 'font.base'
-    }
-  },
+  removableBadge: removableBadge,
+  invertedRemovableBadge: invertedRemovableBadge,
+  errorCalloutBadge: _objectSpread({}, criticalStatusBadge),
+  infoCalloutBadge: _objectSpread({}, activeStatusBadge),
+  successCalloutBadge: _objectSpread({}, healthyStatusBadge),
+  warningCalloutBadge: _objectSpread({}, warningStatusBadge),
   tableBaseBadge: tableBaseBadge
 };
 var _default = exports["default"] = badges;

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

@@ -0,0 +1,14 @@
+export declare const box: {
+    indeterminateCheckboxIcon: {
+        height: string;
+        width: string;
+        color: string;
+        '&.is-disabled': {
+            opacity: number;
+            '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
+                fill: string;
+                stroke: string;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.box = void 0;
+var box = exports.box = {
+  indeterminateCheckboxIcon: {
+    height: '16px',
+    width: '16px',
+    color: 'primary',
+    '&.is-disabled': {
+      opacity: 0.5,
+      // Override base Astro theme's neutral.80 fill so disabled state stays blue at 50%
+      '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
+        fill: 'primary',
+        stroke: 'primary'
+      }
+    }
+  }
+};

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

@@ -81,6 +81,9 @@ declare const buttons: {
                 fill: string;
             };
         };
+        '> span': {
+            color: string;
+        };
     };
     inlineWithIcon: {
         color: string;
@@ -298,6 +301,23 @@ declare const buttons: {
                 };
             };
         };
+        invertedBadgeDeleteButton: {
+            path: {
+                fill: string;
+            };
+            '&.is-hovered': {
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-pressed': {
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
         modalHeaderCloseButton: {
             path: {
                 fill: string;

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

@@ -73,6 +73,23 @@ var iconButtons = {
     }
   }),
   modalCloseButton: _objectSpread({}, baseIconButton),
+  invertedBadgeDeleteButton: {
+    path: {
+      fill: _onyxTokens.astroTokensDark.color.gray[700]
+    },
+    '&.is-hovered': {
+      bg: 'transparent',
+      path: {
+        fill: _onyxTokens.astroTokensDark.color.gray[700]
+      }
+    },
+    '&.is-pressed': {
+      bg: 'transparent',
+      path: {
+        fill: _onyxTokens.astroTokensDark.color.gray[700]
+      }
+    }
+  },
   modalHeaderCloseButton: _objectSpread({}, baseIconButton),
   messageCloseButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     '&.is-hovered': {
@@ -181,6 +198,9 @@ var buttons = {
       path: {
         fill: 'black'
       }
+    },
+    '> span': {
+      color: 'black'
     }
   },
   inlineWithIcon: {

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

@@ -1,4 +1,7 @@
 declare const comboBox: {
+    inputInContainerSlot: {
+        right: number;
+    };
     input: {
         bg: string;
         '&.is-disabled, &.is-read-only': {

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

@@ -5,8 +5,12 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _onyxTokens = require("@pingux/onyx-tokens");
 var _colors = require("../colors");
 var comboBox = {
+  inputInContainerSlot: {
+    right: _onyxTokens.astroTokensDark.spacing.input['padding-x']
+  },
   input: {
     bg: 'gray[900]',
     '&.is-disabled, &.is-read-only': {

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

@@ -5,6 +5,7 @@ export declare const select: {
     borderColor: string;
     color: string;
     height: number;
+    pr: number;
     '&.is-disabled': {
         opacity: number;
         borderColor: string;
@@ -14,23 +15,41 @@ export declare const select: {
         color: string;
     };
 };
-export declare const radio: {
-    base: {
-        color: string;
-    };
-};
 export declare const checkbox: {
     color: string;
+    '& rect[id="unchecked-bg"]': {
+        fill: string;
+    };
+    'input:checked ~ &': {
+        color: string;
+    };
+    '.is-focused &': {
+        outline: string;
+        outlineColor: string;
+        outlineOffset: string;
+    };
+    'input:disabled ~ &': {
+        opacity: number;
+    };
 };
 declare const _default: {
     input: import("theme-ui").ThemeUICSSObject;
     checkbox: {
         color: string;
-    };
-    radio: {
-        base: {
+        '& rect[id="unchecked-bg"]': {
+            fill: string;
+        };
+        'input:checked ~ &': {
             color: string;
         };
+        '.is-focused &': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        'input:disabled ~ &': {
+            opacity: number;
+        };
     };
     label: {
         color: string;
@@ -40,6 +59,20 @@ declare const _default: {
         radio: {
             color: string;
         };
+        checkboxFieldGroup: {
+            color: string;
+        };
+        checkboxFieldGroupItem: {
+            color: string;
+            '&.is-disabled, &.is-read-only': {
+                color: string;
+            };
+        };
+        checkbox: {
+            '&.is-disabled': {
+                color: string;
+            };
+        };
     };
     search: {
         icon: {
@@ -69,6 +102,7 @@ declare const _default: {
         borderColor: string;
         color: string;
         height: number;
+        pr: number;
         '&.is-disabled': {
             opacity: number;
             borderColor: string;
@@ -86,6 +120,9 @@ declare const _default: {
         };
     };
     comboBox: {
+        inputInContainerSlot: {
+            right: number;
+        };
         input: {
             bg: string;
             '&.is-disabled, &.is-read-only': {