@pingux/astro 2.174.0 → 2.174.1-alpha.0

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

@@ -33,6 +33,7 @@ var defaultIconSize = 'sm';
 var linkSelectFieldWidth = '10em';
 var calendarIconSize = 25;
 var navBarIconSize = 18;
+var badgeTextFontSize = '';
 var astroThemeValues = exports.astroThemeValues = {
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
   navBarIconSize: navBarIconSize,
@@ -63,5 +64,6 @@ var astroThemeValues = exports.astroThemeValues = {
     blueText: '#FFFFFF',
     greyText: '#FFFFFF'
   },
-  linkSelectFieldWidth: linkSelectFieldWidth
+  linkSelectFieldWidth: linkSelectFieldWidth,
+  badgeTextFontSize: badgeTextFontSize
 };

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

@@ -39,6 +39,7 @@ var badgeStyles = {
 };
 var linkSelectFieldWidth = '12em';
 var calendarIconSize = 'sm';
+var badgeTextFontSize = '75%';
 var navBarIconSize = '20px';
 var nextGenThemeValues = exports.nextGenThemeValues = _objectSpread({
   activeColor: activeColor,
@@ -57,5 +58,6 @@ var nextGenThemeValues = exports.nextGenThemeValues = _objectSpread({
   calendarIconSize: calendarIconSize,
   buttonLoaderSize: buttonLoaderSize,
   badgeStyles: badgeStyles,
+  badgeTextFontSize: badgeTextFontSize,
   linkSelectFieldWidth: linkSelectFieldWidth
 }, _customSizes["default"]);

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

@@ -19,9 +19,7 @@ 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: _onyxTokens.astroTokens.size.badge,
-  // @ts-expect-error - font-weight is in default tokens but not in the type definition
-  fontWeight: _onyxTokens.astroTokens["default"]['font-weight'].badge
+  fontWeight: '2'
 };
 var badgeIconStyle = {
   '& span': _objectSpread({}, badgeFont),
@@ -47,12 +45,9 @@ var badgeIconStyle = {
 var baseBadge = _objectSpread({
   alignItems: 'center',
   justifyContent: 'center',
-  py: _onyxTokens.astroTokens.spacing.badge['padding-y'],
-  px: _onyxTokens.astroTokens.spacing.badge['padding-x'],
+  padding: '.25em .4em',
   borderRadius: '4px',
-  maxHeight: '18px',
-  minHeight: '18px',
-  fontSize: 'tiny',
+  fontSize: 'unset',
   alignSelf: 'flex-start',
   display: 'inline-flex !important',
   width: 'fit-content',

package/lib/components/Badge/Badge.js

@@ -17,6 +17,7 @@ import React from 'react';
 import { Badge as ThemeUIBadge } from 'theme-ui';
 import { Box, Text } from '../..';
 import { BadgeContext } from '../../context/BadgeContext';
+import { useGetTheme } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var align = props.align,
@@ -33,6 +34,8 @@ var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
     textProps = props.textProps,
     variant = props.variant,
     others = _objectWithoutProperties(props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    badgeTextFontSize = _useGetTheme.badgeTextFontSize;
   var badgeSx = _objectSpread(_objectSpread(_objectSpread({}, isUppercase && {
     paddingBottom: '3px'
   }), align && _defineProperty({
@@ -62,10 +65,12 @@ var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, slots.leftIcon), ___EmotionJSX(Text, _extends({
     variant: "label",
     color: textColor,
-    sx: isUppercase ? {
+    sx: _objectSpread({
+      fontSize: badgeTextFontSize || ''
+    }, isUppercase ? {
       textTransform: 'uppercase',
       fontSize: '11px'
-    } : {}
+    } : {})
   }, textProps), label), children));
 });
 export default Badge;

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

@@ -21,6 +21,7 @@ var defaultIconSize = 'sm';
 var linkSelectFieldWidth = '10em';
 var calendarIconSize = 25;
 var navBarIconSize = 18;
+var badgeTextFontSize = '';
 export var astroThemeValues = {
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
   navBarIconSize: navBarIconSize,
@@ -51,5 +52,6 @@ export var astroThemeValues = {
     blueText: '#FFFFFF',
     greyText: '#FFFFFF'
   },
-  linkSelectFieldWidth: linkSelectFieldWidth
+  linkSelectFieldWidth: linkSelectFieldWidth,
+  badgeTextFontSize: badgeTextFontSize
 };

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

@@ -29,6 +29,7 @@ var badgeStyles = {
 };
 var linkSelectFieldWidth = '12em';
 var calendarIconSize = 'sm';
+var badgeTextFontSize = '75%';
 var navBarIconSize = '20px';
 export var nextGenThemeValues = _objectSpread({
   activeColor: activeColor,
@@ -47,5 +48,6 @@ export var nextGenThemeValues = _objectSpread({
   calendarIconSize: calendarIconSize,
   buttonLoaderSize: buttonLoaderSize,
   badgeStyles: badgeStyles,
+  badgeTextFontSize: badgeTextFontSize,
   linkSelectFieldWidth: linkSelectFieldWidth
 }, customSizes);

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

@@ -12,9 +12,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _co
 import { astroTokens } from '@pingux/onyx-tokens';
 import buttons from './button';
 var badgeFont = {
-  fontSize: astroTokens.size.badge,
-  // @ts-expect-error - font-weight is in default tokens but not in the type definition
-  fontWeight: astroTokens["default"]['font-weight'].badge
+  fontWeight: '2'
 };
 var badgeIconStyle = {
   '& span': _objectSpread({}, badgeFont),
@@ -40,12 +38,9 @@ var badgeIconStyle = {
 var baseBadge = _objectSpread({
   alignItems: 'center',
   justifyContent: 'center',
-  py: astroTokens.spacing.badge['padding-y'],
-  px: astroTokens.spacing.badge['padding-x'],
+  padding: '.25em .4em',
   borderRadius: '4px',
-  maxHeight: '18px',
-  minHeight: '18px',
-  fontSize: 'tiny',
+  fontSize: 'unset',
   alignSelf: 'flex-start',
   display: 'inline-flex !important',
   width: 'fit-content',

package/package.json

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