@pingux/astro 2.181.9 → 2.182.1-alpha.0

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

@@ -74,11 +74,17 @@ var switchable = {
     }
   }
 };
+var search = {
+  icon: {
+    fill: "".concat(_onyxTokens.astroTokensDark.color.font.base, " !important")
+  }
+};
 var _default = exports["default"] = {
   input: _input.input,
   checkbox: checkbox,
   radio: radio,
   label: label,
+  search: search,
   select: _objectSpread(_objectSpread({}, select), {}, {
     option: _objectSpread({}, selectOption)
   }),

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

@@ -9,6 +9,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.astroThemeValues = void 0;
+var _Accordion = require("../../../../components/AccordionGroup/Accordion.styles");
 var _icons = _interopRequireDefault(require("./icons"));
 var _styles = _interopRequireDefault(require("./styles"));
 var _tShirtSizes = _interopRequireWildcard(require("./tShirtSizes"));
@@ -35,6 +36,7 @@ var calendarIconSize = 25;
 var navBarIconSize = 18;
 var badgeTextFontSize = '';
 var astroThemeValues = exports.astroThemeValues = {
+  accordionHoveredState: _Accordion.hoveredState,
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
   navBarIconSize: navBarIconSize,
   activeColor: activeColor,

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

@@ -23,13 +23,19 @@ var _tShirtSizes = _interopRequireWildcard(require("./tShirtSizes"));
 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; }
+var accordionHoveredState = {
+  '&.is-hovered': {
+    color: 'active',
+    textDecoration: 'underline'
+  }
+};
 var accordionItemDefaultLabelTag = 'h2';
 var iconBadgeCircleColor = 'badge.iconBadge';
 var activeColor = '#1a73e8';
 var backgroundBaseColor = 'white';
 var iFrameContentDivBackgroundColor = backgroundBaseColor;
 var defaultIconColor = 'gray-800';
-var defaultIconSize = 'md';
+var defaultIconSize = 'sm';
 var buttonLoaderSize = 'sm';
 var badgeStyles = {
   blueBg: '#EAF2FD',
@@ -42,6 +48,7 @@ var calendarIconSize = 'sm';
 var badgeTextFontSize = '75%';
 var navBarIconSize = '20px';
 var nextGenThemeValues = exports.nextGenThemeValues = _objectSpread({
+  accordionHoveredState: accordionHoveredState,
   activeColor: activeColor,
   navBarIconSize: navBarIconSize,
   backgroundBaseColor: backgroundBaseColor,

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

@@ -10,13 +10,17 @@ var accordion = {
     borderBottom: '1px solid',
     borderBottomColor: 'border.base'
   },
-  pb: 'lg'
+  pb: 'md',
+  mb: 'md',
+  mt: '0px'
 };
 var body = {
-  py: 'sm'
+  pt: 'md'
 };
 var header = {
-  p: 'sm'
+  '&.is-focused': {
+    borderRadius: '2px'
+  }
 };
 var _default = exports["default"] = {
   accordion: accordion,

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

@@ -63,7 +63,9 @@ input.promptInput = _objectSpread(_objectSpread({}, input), {}, {
 });
 input.search = _objectSpread(_objectSpread({}, input), {}, {
   pl: '4em !important',
-  pr: 'xl',
+  pr: "".concat(_onyxTokens.astroTokens.spacing['md-l'], "px !important"),
+  py: '13px !important',
+  lineHeight: 'body',
   color: 'font.base',
   '&.is-disabled': _objectSpread(_objectSpread({}, readOnlyandDisabledStyles), {}, {
     '> input': _objectSpread({}, readOnlyandDisabledStyles)

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

@@ -21,76 +21,88 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _co
 var fontSizes = _onyxTokens.astroTokens["default"]['font-size'];
 var hTags = {
   H1: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h1,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   H2: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h2,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   H3: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h3,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   H4: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h4,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   H5: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h5,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   H6: {
+    lineHeight: '1.2',
     textTransform: 'uppercase',
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard',
     fontWeight: 1,
     fontSize: fontSizes.h6,
     letterSpacing: '1px'
   },
   h1: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h1,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   h2: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h2,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   h3: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h3,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   h4: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h4,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   h5: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h5,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   h6: {
+    lineHeight: '1.2',
     textTransform: 'uppercase',
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard',
     fontWeight: 1,
     fontSize: fontSizes.h6,

package/lib/components/AccordionItem/AccordionItem.js

@@ -11,7 +11,6 @@ import { Button as ThemeUIButton } from 'theme-ui';
 import { AccordionContext } from '../../context/AccordionContext';
 import { useGetTheme, useStatusClasses } from '../../hooks';
 import { Box, Icon, Text } from '../../index';
-import { hoveredState } from '../AccordionGroup/Accordion.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var validHeadingTags = ['h1', 'h2', 'h3', 'h4'];
 var AccordionItem = function AccordionItem(props) {
@@ -29,7 +28,8 @@ var AccordionItem = function AccordionItem(props) {
     others = _objectWithoutProperties(_item$props, _excluded);
   var _useGetTheme = useGetTheme(),
     icons = _useGetTheme.icons,
-    accordionItemMarginLeft = _useGetTheme.accordionItemMarginLeft;
+    accordionItemMarginLeft = _useGetTheme.accordionItemMarginLeft,
+    accordionHoveredState = _useGetTheme.accordionHoveredState;
   var MenuUp = icons.MenuUp,
     MenuDown = icons.MenuDown;
   var state = useContext(AccordionContext);
@@ -87,13 +87,14 @@ var AccordionItem = function AccordionItem(props) {
     as: validLabelHeadingTag,
     className: buttonClasses,
     variant: validLabelHeadingTag,
-    sx: hoveredState
+    sx: accordionHoveredState
   }, item.props.label), ___EmotionJSX(Box, {
     as: "span",
     ml: accordionItemMarginLeft
   }, ___EmotionJSX(Icon, {
-    color: "text.primary",
+    color: "font.base",
     icon: isOpen ? MenuUp : MenuDown,
+    size: "sm",
     title: {
       name: isOpen ? 'Menu Up Icon' : 'Menu Down Icon'
     }

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

@@ -67,11 +67,17 @@ var switchable = {
     }
   }
 };
+var search = {
+  icon: {
+    fill: "".concat(astroTokensDark.color.font.base, " !important")
+  }
+};
 export default {
   input: input,
   checkbox: checkbox,
   radio: radio,
   label: label,
+  search: search,
   select: _objectSpread(_objectSpread({}, select), {}, {
     option: _objectSpread({}, selectOption)
   }),

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

@@ -1,3 +1,4 @@
+import { hoveredState } from '../../../../components/AccordionGroup/Accordion.styles';
 import icons from './icons';
 import styles from './styles';
 import tShirtSizes, { iconWrapperSizes } from './tShirtSizes';
@@ -23,6 +24,7 @@ var calendarIconSize = 25;
 var navBarIconSize = 18;
 var badgeTextFontSize = '';
 export var astroThemeValues = {
+  accordionHoveredState: hoveredState,
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
   navBarIconSize: navBarIconSize,
   activeColor: activeColor,

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

@@ -13,13 +13,19 @@ import customSizes from './customSizes';
 import icons from './icons';
 import styles from './styles';
 import tShirtSizes, { iconWrapperSizes } from './tShirtSizes';
+var accordionHoveredState = {
+  '&.is-hovered': {
+    color: 'active',
+    textDecoration: 'underline'
+  }
+};
 var accordionItemDefaultLabelTag = 'h2';
 var iconBadgeCircleColor = 'badge.iconBadge';
 var activeColor = '#1a73e8';
 var backgroundBaseColor = 'white';
 var iFrameContentDivBackgroundColor = backgroundBaseColor;
 var defaultIconColor = 'gray-800';
-var defaultIconSize = 'md';
+var defaultIconSize = 'sm';
 var buttonLoaderSize = 'sm';
 var badgeStyles = {
   blueBg: '#EAF2FD',
@@ -32,6 +38,7 @@ var calendarIconSize = 'sm';
 var badgeTextFontSize = '75%';
 var navBarIconSize = '20px';
 export var nextGenThemeValues = _objectSpread({
+  accordionHoveredState: accordionHoveredState,
   activeColor: activeColor,
   navBarIconSize: navBarIconSize,
   backgroundBaseColor: backgroundBaseColor,

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

@@ -3,13 +3,17 @@ var accordion = {
     borderBottom: '1px solid',
     borderBottomColor: 'border.base'
   },
-  pb: 'lg'
+  pb: 'md',
+  mb: 'md',
+  mt: '0px'
 };
 var body = {
-  py: 'sm'
+  pt: 'md'
 };
 var header = {
-  p: 'sm'
+  '&.is-focused': {
+    borderRadius: '2px'
+  }
 };
 export default {
   accordion: accordion,

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

@@ -56,7 +56,9 @@ input.promptInput = _objectSpread(_objectSpread({}, input), {}, {
 });
 input.search = _objectSpread(_objectSpread({}, input), {}, {
   pl: '4em !important',
-  pr: 'xl',
+  pr: "".concat(astroTokens.spacing['md-l'], "px !important"),
+  py: '13px !important',
+  lineHeight: 'body',
   color: 'font.base',
   '&.is-disabled': _objectSpread(_objectSpread({}, readOnlyandDisabledStyles), {}, {
     '> input': _objectSpread({}, readOnlyandDisabledStyles)

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

@@ -15,76 +15,88 @@ import { astroTokens } from '@pingux/onyx-tokens';
 var fontSizes = astroTokens["default"]['font-size'];
 var hTags = {
   H1: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h1,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   H2: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h2,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   H3: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h3,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   H4: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h4,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   H5: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h5,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   H6: {
+    lineHeight: '1.2',
     textTransform: 'uppercase',
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard',
     fontWeight: 1,
     fontSize: fontSizes.h6,
     letterSpacing: '1px'
   },
   h1: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h1,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   h2: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h2,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   h3: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h3,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   h4: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h4,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   h5: {
+    lineHeight: '1.2',
     fontSize: fontSizes.h5,
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard'
   },
   h6: {
+    lineHeight: '1.2',
     textTransform: 'uppercase',
-    color: 'text.primary',
+    color: 'font.base',
     fontFamily: 'standard',
     fontWeight: 1,
     fontSize: fontSizes.h6,

package/package.json

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