@pingux/astro 2.193.2-alpha.0 → 2.194.0

package/lib/cjs/index.d.ts

@@ -226,7 +226,10 @@ export * from './components/TreeView';
 export { PaginationContext } from './context/PaginationContext';
 export { default as NextGenDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
 export { default as OnyxDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
+export { default as OnyxDarkUiLibraryOverride } from './styles/themeOverrides/onyxDarkUiLibraryOverride';
 export { default as OnyxSideNavOverride } from './styles/themeOverrides/onyxSideNav';
+export { default as OnyxUiLibraryOverride } from './styles/themeOverrides/onyxUiLibraryOverride';
+export { default as AstroUiLibraryOverride } from './styles/themeOverrides/uiLibraryOverride';
 export { default as NextGenTheme } from './styles/themes/next-gen';
 export { default as OnyxTheme } from './styles/themes/next-gen';
 export * from './types';

package/lib/cjs/index.js

@@ -157,7 +157,10 @@ var _exportNames = {
   PaginationContext: true,
   NextGenDarkTheme: true,
   OnyxDarkTheme: true,
+  OnyxDarkUiLibraryOverride: true,
   OnyxSideNavOverride: true,
+  OnyxUiLibraryOverride: true,
+  AstroUiLibraryOverride: true,
   NextGenTheme: true,
   OnyxTheme: true,
   OverlayProvider: true,
@@ -226,6 +229,12 @@ _Object$defineProperty(exports, "AstroProvider", {
     return _AstroProvider["default"];
   }
 });
+_Object$defineProperty(exports, "AstroUiLibraryOverride", {
+  enumerable: true,
+  get: function get() {
+    return _uiLibraryOverride["default"];
+  }
+});
 _Object$defineProperty(exports, "AstroWrapper", {
   enumerable: true,
   get: function get() {
@@ -718,6 +727,12 @@ _Object$defineProperty(exports, "OnyxDarkTheme", {
     return _nextGenDarkMode["default"];
   }
 });
+_Object$defineProperty(exports, "OnyxDarkUiLibraryOverride", {
+  enumerable: true,
+  get: function get() {
+    return _onyxDarkUiLibraryOverride["default"];
+  }
+});
 _Object$defineProperty(exports, "OnyxSideNavOverride", {
   enumerable: true,
   get: function get() {
@@ -730,6 +745,12 @@ _Object$defineProperty(exports, "OnyxTheme", {
     return _nextGen["default"];
   }
 });
+_Object$defineProperty(exports, "OnyxUiLibraryOverride", {
+  enumerable: true,
+  get: function get() {
+    return _onyxUiLibraryOverride["default"];
+  }
+});
 _Object$defineProperty(exports, "OverlayPanel", {
   enumerable: true,
   get: function get() {
@@ -2232,7 +2253,10 @@ _forEachInstanceProperty(_context82 = _Object$keys(_TreeView)).call(_context82,
 });
 var _PaginationContext = require("./context/PaginationContext");
 var _nextGenDarkMode = _interopRequireDefault(require("./styles/themeOverrides/nextGenDarkMode"));
+var _onyxDarkUiLibraryOverride = _interopRequireDefault(require("./styles/themeOverrides/onyxDarkUiLibraryOverride"));
 var _onyxSideNav = _interopRequireDefault(require("./styles/themeOverrides/onyxSideNav"));
+var _onyxUiLibraryOverride = _interopRequireDefault(require("./styles/themeOverrides/onyxUiLibraryOverride"));
+var _uiLibraryOverride = _interopRequireDefault(require("./styles/themeOverrides/uiLibraryOverride"));
 var _nextGen = _interopRequireDefault(require("./styles/themes/next-gen"));
 var _types = require("./types");
 _forEachInstanceProperty(_context83 = _Object$keys(_types)).call(_context83, function (key) {

package/lib/cjs/styles/themeOverrides/onyxDarkUiLibraryOverride.js

@@ -0,0 +1,211 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _onyxTokens = require("@pingux/onyx-tokens");
+var _nextGenDarkMode = _interopRequireDefault(require("./nextGenDarkMode"));
+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 buttons = {
+  critical: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.critical), _nextGenDarkMode["default"].buttons.defaultHover)
+  },
+  danger: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.danger), _nextGenDarkMode["default"].buttons.defaultHover)
+  },
+  success: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.success), _nextGenDarkMode["default"].buttons.defaultHover)
+  },
+  "default": {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons["default"]), _nextGenDarkMode["default"].buttons.defaultHover),
+    '&:focus': _objectSpread({}, _nextGenDarkMode["default"].buttons.defaultHover)
+  },
+  inline: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.inline), _nextGenDarkMode["default"].buttons.defaultHover)
+  },
+  inlinePrimary: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.inlinePrimary), _nextGenDarkMode["default"].buttons.defaultHover)
+  },
+  text: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.text), _nextGenDarkMode["default"].buttons.defaultHover)
+  },
+  inverted: _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.inverted), {}, {
+    ':focus': {
+      border: 'none'
+    }
+  }),
+  primary: {
+    '&:hover': _objectSpread({}, _nextGenDarkMode["default"].buttons.primary)
+  },
+  link: {
+    'body &': _nextGenDarkMode["default"].buttons.link,
+    'body &:hover': _nextGenDarkMode["default"].buttons.link,
+    '&:not(.disabled):hover': {
+      color: 'active',
+      borderColor: 'transparent'
+    }
+  },
+  iconButtons: _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.iconButtons), {}, {
+    base: _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.iconButtons.base), {}, {
+      ':focus': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    }),
+    inverted: _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.iconButtons.inverted), {}, {
+      ':focus': {
+        border: 'none'
+      }
+    }),
+    datePicker: {
+      containedIcon: {
+        '&:not(.disabled):hover': {
+          border: 'none'
+        },
+        '&:focus': {
+          border: 'none'
+        }
+      }
+    }
+  }),
+  // not sure what this references
+  filter: {
+    '&:not(.disabled):hover': {
+      borderColor: 'accent.40',
+      color: 'accent.40'
+    }
+  }
+};
+var forms = {
+  input: {
+    '&[type=password]': {
+      backgroundColor: 'white !important',
+      borderColor: '#caced3 !important'
+    },
+    '&[type=password]:focus': {
+      borderColor: "".concat(_onyxTokens.astroTokens.color.blue[500], " !important")
+    },
+    numberField: _objectSpread(_objectSpread(_objectSpread({}, _nextGenDarkMode["default"].input), _nextGenDarkMode["default"].numberFieldStyles), {}, {
+      '&[type=text]': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].text.inputValue), {}, {
+        backgroundColor: 'white',
+        borderColor: _onyxTokens.astroTokensDark.color.gray[500]
+      }),
+      '&[type=text]:focus': {
+        borderColor: "".concat(_onyxTokens.astroTokens.color.blue[500], " !important")
+      }
+    })
+  },
+  select: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].text.inputValue), {}, {
+      borderColor: _onyxTokens.astroTokensDark.color.gray[500]
+    })
+  },
+  search: {
+    wrapper: {
+      '& input[type=search]': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].text.inputValue), {}, {
+        borderColor: _onyxTokens.astroTokensDark.color.gray[500],
+        fontSize: '15px',
+        bg: 'white',
+        '::placeholder': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].text.placeholder), {}, {
+          fontStyle: 'unset',
+          fontSize: '15px'
+        })
+      }),
+      '& input[type=search]:focus': {
+        borderColor: "".concat(_onyxTokens.astroTokens.color.blue[500], " !important")
+      }
+    }
+  },
+  label: {
+    'body &': {
+      textTransform: 'none'
+    },
+    checkbox: {
+      textTransform: 'none'
+    }
+  }
+};
+var links = {
+  app: {
+    '&:hover': _objectSpread({}, _nextGenDarkMode["default"].links.app)
+  },
+  skip: {
+    '&:hover': {
+      color: 'white',
+      textDecoration: 'none',
+      '&:focus': {
+        outline: '2px solid',
+        outlineColor: 'active',
+        color: 'white',
+        textDecoration: 'none'
+      }
+    },
+    '&:visited': {
+      color: 'white',
+      textDecoration: 'none'
+    },
+    '&.is-pressed': {
+      color: 'white',
+      textDecoration: 'none'
+    }
+  },
+  pingLogo: {
+    '&:hover': {
+      '&.is-focused': {
+        outline: '2px solid',
+        outlineColor: 'active',
+        outlineOffset: '-2px'
+      }
+    }
+  }
+};
+var variants = {
+  accordion: {
+    header: _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].variants.accordion.header), {}, {
+      '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.defaultHover), {}, {
+        color: 'active'
+      }),
+      '&:focus': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    })
+  },
+  rockerButton: {
+    thumbSwitch: _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].variants.rockerButton.thumbSwitch), {}, {
+      ':focus': {
+        border: 'none'
+      },
+      '&.is-selected:hover': {
+        color: 'white'
+      },
+      ':not(.is-selected):hover': {
+        color: 'white'
+      }
+    })
+  },
+  environmentBreadcrumb: {
+    button: {
+      current: {
+        '&:hover:not(.disabled)': _objectSpread({}, _nextGenDarkMode["default"].variants.environmentBreadcrumb.button.current),
+        '&:focus': _objectSpread({}, _nextGenDarkMode["default"].variants.environmentBreadcrumb.button.current)
+      }
+    }
+  }
+};
+var _default = exports["default"] = {
+  buttons: buttons,
+  forms: forms,
+  links: links,
+  variants: variants
+};

package/lib/cjs/styles/themeOverrides/onyxUiLibraryOverride.d.ts

@@ -0,0 +1,130 @@
+declare const _default: {
+    buttons: {
+        critical: {
+            '&:not(.disabled):hover': any;
+        };
+        danger: {
+            '&:not(.disabled):hover': any;
+        };
+        success: {
+            '&:not(.disabled):hover': any;
+        };
+        default: {
+            '&:not(.disabled):hover': any;
+            '&:focus': any;
+        };
+        inline: {
+            '&:not(.disabled):hover': any;
+        };
+        inlinePrimary: {
+            '&:not(.disabled):hover': any;
+        };
+        text: {
+            '&:not(.disabled):hover': any;
+        };
+        inverted: any;
+        primary: {
+            '&:hover': any;
+        };
+        link: {
+            'body &': any;
+            'body &:hover': any;
+            '&:not(.disabled):hover': {
+                color: string;
+                borderColor: string;
+            };
+        };
+        iconButtons: any;
+        filter: {
+            '&:not(.disabled):hover': {
+                borderColor: string;
+                color: string;
+            };
+        };
+    };
+    forms: {
+        input: {
+            '&[type=password]': {
+                backgroundColor: string;
+                borderColor: string;
+            };
+            '&[type=password]:focus': {
+                borderColor: string;
+            };
+            numberField: any;
+        };
+        select: {
+            '&:not(.disabled):hover': any;
+        };
+        search: {
+            wrapper: {
+                '& input[type=search]': any;
+                '& input[type=search]:focus': {
+                    outline: string;
+                    outlineColor: any;
+                    outlineOffset: string;
+                    borderColor: string;
+                };
+            };
+        };
+        label: {
+            'body &': {
+                textTransform: string;
+            };
+            checkbox: {
+                textTransform: string;
+            };
+        };
+    };
+    links: {
+        app: {
+            '&:hover': any;
+        };
+        skip: {
+            '&:hover': {
+                color: string;
+                textDecoration: string;
+                '&:focus': {
+                    outline: string;
+                    outlineColor: string;
+                    color: string;
+                    textDecoration: string;
+                };
+            };
+            '&:visited': {
+                color: string;
+                textDecoration: string;
+            };
+            '&.is-pressed': {
+                color: string;
+                textDecoration: string;
+            };
+        };
+        pingLogo: {
+            '&:hover': {
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+            };
+        };
+    };
+    variants: {
+        accordion: {
+            header: any;
+        };
+        rockerButton: {
+            thumbSwitch: any;
+        };
+        environmentBreadcrumb: {
+            button: {
+                current: {
+                    '&:hover:not(.disabled)': any;
+                    '&:focus': any;
+                };
+            };
+        };
+    };
+};
+export default _default;

package/lib/cjs/styles/themeOverrides/onyxUiLibraryOverride.js

@@ -0,0 +1,217 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _onyxTokens = require("@pingux/onyx-tokens");
+var _nextGen = _interopRequireDefault(require("../themes/next-gen"));
+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 buttons = {
+  critical: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.critical), _nextGen["default"].buttons.defaultHover)
+  },
+  danger: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.danger), _nextGen["default"].buttons.defaultHover)
+  },
+  success: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.success), _nextGen["default"].buttons.defaultHover)
+  },
+  "default": {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].buttons["default"]), _nextGen["default"].buttons.defaultHover),
+    '&:focus': _objectSpread({}, _nextGen["default"].buttons.defaultHover)
+  },
+  inline: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.inline), _nextGen["default"].buttons.defaultHover)
+  },
+  inlinePrimary: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.inlinePrimary), _nextGen["default"].buttons.defaultHover)
+  },
+  text: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.text), _nextGen["default"].buttons.defaultHover)
+  },
+  inverted: _objectSpread(_objectSpread({}, _nextGen["default"].buttons.inverted), {}, {
+    ':focus': {
+      border: 'none'
+    }
+  }),
+  primary: {
+    '&:hover': _objectSpread({}, _nextGen["default"].buttons.primary)
+  },
+  link: {
+    'body &': _nextGen["default"].buttons.link,
+    'body &:hover': _nextGen["default"].buttons.link,
+    '&:not(.disabled):hover': {
+      color: 'active',
+      borderColor: 'transparent'
+    }
+  },
+  iconButtons: _objectSpread(_objectSpread({}, _nextGen["default"].buttons.iconButtons), {}, {
+    base: _objectSpread(_objectSpread({}, _nextGen["default"].buttons.iconButtons.base), {}, {
+      ':focus': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    }),
+    inverted: _objectSpread(_objectSpread({}, _nextGen["default"].buttons.iconButtons.inverted), {}, {
+      ':focus': {
+        border: 'none'
+      }
+    }),
+    datePicker: {
+      containedIcon: {
+        '&:not(.disabled):hover': {
+          border: 'none'
+        },
+        '&:focus': {
+          border: 'none'
+        }
+      }
+    }
+  }),
+  // not sure what this references/
+  filter: {
+    '&:not(.disabled):hover': {
+      borderColor: 'accent.40',
+      color: 'accent.40'
+    }
+  }
+};
+var forms = {
+  input: {
+    '&[type=password]': {
+      backgroundColor: 'white !important',
+      borderColor: '#caced3 !important'
+    },
+    '&[type=password]:focus': {
+      borderColor: "".concat(_onyxTokens.astroTokens.color.blue[500], " !important")
+    },
+    numberField: _objectSpread(_objectSpread(_objectSpread({}, _nextGen["default"].input), _nextGen["default"].numberFieldStyles), {}, {
+      '&[type=text]': _objectSpread(_objectSpread({}, _nextGen["default"].text.inputValue), {}, {
+        backgroundColor: 'white',
+        borderColor: _onyxTokens.astroTokens.color.input.border
+      }),
+      '&[type=text]:focus': {
+        outline: '1px solid',
+        outlineColor: "".concat(_onyxTokens.astroTokens.color.blue[500]),
+        outlineOffset: '0px',
+        borderColor: "".concat(_onyxTokens.astroTokens.color.blue[500], " !important")
+      }
+    })
+  },
+  select: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].text.inputValue), {}, {
+      borderColor: _onyxTokens.astroTokens.color.input.border
+    })
+  },
+  search: {
+    wrapper: {
+      '& input[type=search]': _objectSpread(_objectSpread({}, _nextGen["default"].text.inputValue), {}, {
+        borderColor: _onyxTokens.astroTokens.color.input.border,
+        fontSize: '15px',
+        bg: 'white',
+        '::placeholder': _objectSpread(_objectSpread({}, _nextGen["default"].text.placeholder), {}, {
+          fontStyle: 'unset',
+          fontSize: '15px'
+        })
+      }),
+      '& input[type=search]:focus': {
+        outline: '1px solid',
+        outlineColor: _onyxTokens.astroTokens.color.blue[500],
+        outlineOffset: '0px',
+        borderColor: "".concat(_onyxTokens.astroTokens.color.blue[500], " !important")
+      }
+    }
+  },
+  label: {
+    'body &': {
+      textTransform: 'none'
+    },
+    checkbox: {
+      textTransform: 'none'
+    }
+  }
+};
+var links = {
+  app: {
+    '&:hover': _objectSpread({}, _nextGen["default"].links.app)
+  },
+  skip: {
+    '&:hover': {
+      color: 'white',
+      textDecoration: 'none',
+      '&:focus': {
+        outline: '2px solid',
+        outlineColor: 'active',
+        color: 'white',
+        textDecoration: 'none'
+      }
+    },
+    '&:visited': {
+      color: 'white',
+      textDecoration: 'none'
+    },
+    '&.is-pressed': {
+      color: 'white',
+      textDecoration: 'none'
+    }
+  },
+  pingLogo: {
+    '&:hover': {
+      '&.is-focused': {
+        outline: '2px solid',
+        outlineColor: 'active',
+        outlineOffset: '-2px'
+      }
+    }
+  }
+};
+var variants = {
+  accordion: {
+    header: _objectSpread(_objectSpread({}, _nextGen["default"].variants.accordion.header), {}, {
+      '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.defaultHover), {}, {
+        color: 'active'
+      }),
+      '&:focus': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    })
+  },
+  rockerButton: {
+    thumbSwitch: _objectSpread(_objectSpread({}, _nextGen["default"].variants.rockerButton.thumbSwitch), {}, {
+      ':focus': {
+        border: 'none'
+      },
+      '&.is-selected:hover': {
+        color: 'black'
+      },
+      ':not(.is-selected):hover': {
+        color: 'black'
+      }
+    })
+  },
+  environmentBreadcrumb: {
+    button: {
+      current: {
+        '&:hover:not(.disabled)': _objectSpread({}, _nextGen["default"].variants.environmentBreadcrumb.button.current),
+        '&:focus': _objectSpread({}, _nextGen["default"].variants.environmentBreadcrumb.button.current)
+      }
+    }
+  }
+};
+var _default = exports["default"] = {
+  buttons: buttons,
+  forms: forms,
+  links: links,
+  variants: variants
+};

package/lib/index.js

@@ -229,7 +229,10 @@ export * from './components/TreeView';
 export { PaginationContext } from './context/PaginationContext';
 export { default as NextGenDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
 export { default as OnyxDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
+export { default as OnyxDarkUiLibraryOverride } from './styles/themeOverrides/onyxDarkUiLibraryOverride';
 export { default as OnyxSideNavOverride } from './styles/themeOverrides/onyxSideNav';
+export { default as OnyxUiLibraryOverride } from './styles/themeOverrides/onyxUiLibraryOverride';
+export { default as AstroUiLibraryOverride } from './styles/themeOverrides/uiLibraryOverride';
 export { default as NextGenTheme } from './styles/themes/next-gen';
 export { default as OnyxTheme } from './styles/themes/next-gen';
 export * from './types';

package/lib/styles/themeOverrides/onyxDarkUiLibraryOverride.js

@@ -0,0 +1,204 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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) { _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 { astroTokens, astroTokensDark } from '@pingux/onyx-tokens';
+import theme from './nextGenDarkMode';
+var buttons = {
+  critical: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.critical), theme.buttons.defaultHover)
+  },
+  danger: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.danger), theme.buttons.defaultHover)
+  },
+  success: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.success), theme.buttons.defaultHover)
+  },
+  "default": {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons["default"]), theme.buttons.defaultHover),
+    '&:focus': _objectSpread({}, theme.buttons.defaultHover)
+  },
+  inline: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.inline), theme.buttons.defaultHover)
+  },
+  inlinePrimary: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.inlinePrimary), theme.buttons.defaultHover)
+  },
+  text: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.text), theme.buttons.defaultHover)
+  },
+  inverted: _objectSpread(_objectSpread({}, theme.buttons.inverted), {}, {
+    ':focus': {
+      border: 'none'
+    }
+  }),
+  primary: {
+    '&:hover': _objectSpread({}, theme.buttons.primary)
+  },
+  link: {
+    'body &': theme.buttons.link,
+    'body &:hover': theme.buttons.link,
+    '&:not(.disabled):hover': {
+      color: 'active',
+      borderColor: 'transparent'
+    }
+  },
+  iconButtons: _objectSpread(_objectSpread({}, theme.buttons.iconButtons), {}, {
+    base: _objectSpread(_objectSpread({}, theme.buttons.iconButtons.base), {}, {
+      ':focus': _objectSpread(_objectSpread({}, theme.buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    }),
+    inverted: _objectSpread(_objectSpread({}, theme.buttons.iconButtons.inverted), {}, {
+      ':focus': {
+        border: 'none'
+      }
+    }),
+    datePicker: {
+      containedIcon: {
+        '&:not(.disabled):hover': {
+          border: 'none'
+        },
+        '&:focus': {
+          border: 'none'
+        }
+      }
+    }
+  }),
+  // not sure what this references
+  filter: {
+    '&:not(.disabled):hover': {
+      borderColor: 'accent.40',
+      color: 'accent.40'
+    }
+  }
+};
+var forms = {
+  input: {
+    '&[type=password]': {
+      backgroundColor: 'white !important',
+      borderColor: '#caced3 !important'
+    },
+    '&[type=password]:focus': {
+      borderColor: "".concat(astroTokens.color.blue[500], " !important")
+    },
+    numberField: _objectSpread(_objectSpread(_objectSpread({}, theme.input), theme.numberFieldStyles), {}, {
+      '&[type=text]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
+        backgroundColor: 'white',
+        borderColor: astroTokensDark.color.gray[500]
+      }),
+      '&[type=text]:focus': {
+        borderColor: "".concat(astroTokens.color.blue[500], " !important")
+      }
+    })
+  },
+  select: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
+      borderColor: astroTokensDark.color.gray[500]
+    })
+  },
+  search: {
+    wrapper: {
+      '& input[type=search]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
+        borderColor: astroTokensDark.color.gray[500],
+        fontSize: '15px',
+        bg: 'white',
+        '::placeholder': _objectSpread(_objectSpread({}, theme.text.placeholder), {}, {
+          fontStyle: 'unset',
+          fontSize: '15px'
+        })
+      }),
+      '& input[type=search]:focus': {
+        borderColor: "".concat(astroTokens.color.blue[500], " !important")
+      }
+    }
+  },
+  label: {
+    'body &': {
+      textTransform: 'none'
+    },
+    checkbox: {
+      textTransform: 'none'
+    }
+  }
+};
+var links = {
+  app: {
+    '&:hover': _objectSpread({}, theme.links.app)
+  },
+  skip: {
+    '&:hover': {
+      color: 'white',
+      textDecoration: 'none',
+      '&:focus': {
+        outline: '2px solid',
+        outlineColor: 'active',
+        color: 'white',
+        textDecoration: 'none'
+      }
+    },
+    '&:visited': {
+      color: 'white',
+      textDecoration: 'none'
+    },
+    '&.is-pressed': {
+      color: 'white',
+      textDecoration: 'none'
+    }
+  },
+  pingLogo: {
+    '&:hover': {
+      '&.is-focused': {
+        outline: '2px solid',
+        outlineColor: 'active',
+        outlineOffset: '-2px'
+      }
+    }
+  }
+};
+var variants = {
+  accordion: {
+    header: _objectSpread(_objectSpread({}, theme.variants.accordion.header), {}, {
+      '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.defaultHover), {}, {
+        color: 'active'
+      }),
+      '&:focus': _objectSpread(_objectSpread({}, theme.buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    })
+  },
+  rockerButton: {
+    thumbSwitch: _objectSpread(_objectSpread({}, theme.variants.rockerButton.thumbSwitch), {}, {
+      ':focus': {
+        border: 'none'
+      },
+      '&.is-selected:hover': {
+        color: 'white'
+      },
+      ':not(.is-selected):hover': {
+        color: 'white'
+      }
+    })
+  },
+  environmentBreadcrumb: {
+    button: {
+      current: {
+        '&:hover:not(.disabled)': _objectSpread({}, theme.variants.environmentBreadcrumb.button.current),
+        '&:focus': _objectSpread({}, theme.variants.environmentBreadcrumb.button.current)
+      }
+    }
+  }
+};
+export default {
+  buttons: buttons,
+  forms: forms,
+  links: links,
+  variants: variants
+};

package/lib/styles/themeOverrides/onyxUiLibraryOverride.js

@@ -0,0 +1,210 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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) { _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 { astroTokens } from '@pingux/onyx-tokens';
+import theme from '../themes/next-gen';
+var buttons = {
+  critical: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.critical), theme.buttons.defaultHover)
+  },
+  danger: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.danger), theme.buttons.defaultHover)
+  },
+  success: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.success), theme.buttons.defaultHover)
+  },
+  "default": {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons["default"]), theme.buttons.defaultHover),
+    '&:focus': _objectSpread({}, theme.buttons.defaultHover)
+  },
+  inline: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.inline), theme.buttons.defaultHover)
+  },
+  inlinePrimary: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.inlinePrimary), theme.buttons.defaultHover)
+  },
+  text: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.text), theme.buttons.defaultHover)
+  },
+  inverted: _objectSpread(_objectSpread({}, theme.buttons.inverted), {}, {
+    ':focus': {
+      border: 'none'
+    }
+  }),
+  primary: {
+    '&:hover': _objectSpread({}, theme.buttons.primary)
+  },
+  link: {
+    'body &': theme.buttons.link,
+    'body &:hover': theme.buttons.link,
+    '&:not(.disabled):hover': {
+      color: 'active',
+      borderColor: 'transparent'
+    }
+  },
+  iconButtons: _objectSpread(_objectSpread({}, theme.buttons.iconButtons), {}, {
+    base: _objectSpread(_objectSpread({}, theme.buttons.iconButtons.base), {}, {
+      ':focus': _objectSpread(_objectSpread({}, theme.buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    }),
+    inverted: _objectSpread(_objectSpread({}, theme.buttons.iconButtons.inverted), {}, {
+      ':focus': {
+        border: 'none'
+      }
+    }),
+    datePicker: {
+      containedIcon: {
+        '&:not(.disabled):hover': {
+          border: 'none'
+        },
+        '&:focus': {
+          border: 'none'
+        }
+      }
+    }
+  }),
+  // not sure what this references/
+  filter: {
+    '&:not(.disabled):hover': {
+      borderColor: 'accent.40',
+      color: 'accent.40'
+    }
+  }
+};
+var forms = {
+  input: {
+    '&[type=password]': {
+      backgroundColor: 'white !important',
+      borderColor: '#caced3 !important'
+    },
+    '&[type=password]:focus': {
+      borderColor: "".concat(astroTokens.color.blue[500], " !important")
+    },
+    numberField: _objectSpread(_objectSpread(_objectSpread({}, theme.input), theme.numberFieldStyles), {}, {
+      '&[type=text]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
+        backgroundColor: 'white',
+        borderColor: astroTokens.color.input.border
+      }),
+      '&[type=text]:focus': {
+        outline: '1px solid',
+        outlineColor: "".concat(astroTokens.color.blue[500]),
+        outlineOffset: '0px',
+        borderColor: "".concat(astroTokens.color.blue[500], " !important")
+      }
+    })
+  },
+  select: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
+      borderColor: astroTokens.color.input.border
+    })
+  },
+  search: {
+    wrapper: {
+      '& input[type=search]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
+        borderColor: astroTokens.color.input.border,
+        fontSize: '15px',
+        bg: 'white',
+        '::placeholder': _objectSpread(_objectSpread({}, theme.text.placeholder), {}, {
+          fontStyle: 'unset',
+          fontSize: '15px'
+        })
+      }),
+      '& input[type=search]:focus': {
+        outline: '1px solid',
+        outlineColor: astroTokens.color.blue[500],
+        outlineOffset: '0px',
+        borderColor: "".concat(astroTokens.color.blue[500], " !important")
+      }
+    }
+  },
+  label: {
+    'body &': {
+      textTransform: 'none'
+    },
+    checkbox: {
+      textTransform: 'none'
+    }
+  }
+};
+var links = {
+  app: {
+    '&:hover': _objectSpread({}, theme.links.app)
+  },
+  skip: {
+    '&:hover': {
+      color: 'white',
+      textDecoration: 'none',
+      '&:focus': {
+        outline: '2px solid',
+        outlineColor: 'active',
+        color: 'white',
+        textDecoration: 'none'
+      }
+    },
+    '&:visited': {
+      color: 'white',
+      textDecoration: 'none'
+    },
+    '&.is-pressed': {
+      color: 'white',
+      textDecoration: 'none'
+    }
+  },
+  pingLogo: {
+    '&:hover': {
+      '&.is-focused': {
+        outline: '2px solid',
+        outlineColor: 'active',
+        outlineOffset: '-2px'
+      }
+    }
+  }
+};
+var variants = {
+  accordion: {
+    header: _objectSpread(_objectSpread({}, theme.variants.accordion.header), {}, {
+      '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.defaultHover), {}, {
+        color: 'active'
+      }),
+      '&:focus': _objectSpread(_objectSpread({}, theme.buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    })
+  },
+  rockerButton: {
+    thumbSwitch: _objectSpread(_objectSpread({}, theme.variants.rockerButton.thumbSwitch), {}, {
+      ':focus': {
+        border: 'none'
+      },
+      '&.is-selected:hover': {
+        color: 'black'
+      },
+      ':not(.is-selected):hover': {
+        color: 'black'
+      }
+    })
+  },
+  environmentBreadcrumb: {
+    button: {
+      current: {
+        '&:hover:not(.disabled)': _objectSpread({}, theme.variants.environmentBreadcrumb.button.current),
+        '&:focus': _objectSpread({}, theme.variants.environmentBreadcrumb.button.current)
+      }
+    }
+  }
+};
+export default {
+  buttons: buttons,
+  forms: forms,
+  links: links,
+  variants: variants
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.193.2-alpha.0",
+  "version": "2.194.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",