@pingux/astro 2.173.0 → 2.174.0-alpha.0

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

@@ -9,33 +9,37 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 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';
+
+// @ts-expect-error - font-size is in default tokens but not in the type definition
+var fontSizes = astroTokens["default"]['font-size'];
 var hTags = {
   H1: {
-    fontSize: 'xxx',
+    fontSize: fontSizes.h1,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
   },
   H2: {
-    fontSize: 'xx',
+    fontSize: fontSizes.h2,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
   },
   H3: {
-    fontSize: 'xl',
+    fontSize: fontSizes.h3,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
   },
   H4: {
-    fontSize: 'lg',
+    fontSize: fontSizes.h4,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
   },
   H5: {
-    fontSize: 'md',
+    fontSize: fontSizes.h5,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
@@ -45,35 +49,35 @@ var hTags = {
     color: 'text.primary',
     fontFamily: 'standard',
     fontWeight: 1,
-    fontSize: 'xs',
+    fontSize: fontSizes.h6,
     letterSpacing: '1px'
   },
   h1: {
-    fontSize: 'xxx',
+    fontSize: fontSizes.h1,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
   },
   h2: {
-    fontSize: 'xx',
+    fontSize: fontSizes.h2,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
   },
   h3: {
-    fontSize: 'xl',
+    fontSize: fontSizes.h3,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
   },
   h4: {
-    fontSize: 'lg',
+    fontSize: fontSizes.h4,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
   },
   h5: {
-    fontSize: 'md',
+    fontSize: fontSizes.h5,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
@@ -83,7 +87,7 @@ var hTags = {
     color: 'text.primary',
     fontFamily: 'standard',
     fontWeight: 1,
-    fontSize: 'xs',
+    fontSize: fontSizes.h6,
     letterSpacing: '1px'
   }
 };
@@ -133,7 +137,7 @@ export var text = _objectSpread(_objectSpread({
     wordBreak: 'normal'
   },
   placeholder: {
-    color: 'gray-600',
+    color: astroTokens.color.gray[600],
     fontWeight: 1
   },
   paragraph: {
@@ -197,11 +201,11 @@ export var text = _objectSpread(_objectSpread({
   }),
   messagesText: {
     '&.is-success, &.is-warning, &.is-error, &.is-default': {
-      color: 'gray-700',
+      color: astroTokens.color.gray[700],
       '& > a': {
         fontWeight: '600',
         textDecoration: 'underline',
-        color: 'gray-700'
+        color: astroTokens.color.gray[700]
       }
     }
   },

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

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 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 attachment from '../../../../components/AIComponents/Attachment/Attachment.styles';
 import skeleton from '../../../../components/Skeleton/Skeleton.styles';
 import codeView from '../codeView/codeView';
@@ -65,10 +66,10 @@ export var badgeDeleteButton = _objectSpread(_objectSpread({}, button.iconButton
   width: 14
 });
 var modalSize = {
-  xs: ['100%', '300px', '300px', '300px', '300px', '300px'],
-  sm: ['100%', '500px', '500px', '500px', '500px', '500px'],
-  md: ['100%', '500px', '500px', '500px', '800px', '800px'],
-  lg: ['100%', '500px', '500px', '500px', '800px', '1140px'],
+  xs: ['100%', astroTokens.size.modal.sm, astroTokens.size.modal.sm, astroTokens.size.modal.sm, astroTokens.size.modal.sm, astroTokens.size.modal.sm],
+  sm: ['100%', astroTokens.size.modal.md, astroTokens.size.modal.md, astroTokens.size.modal.md, astroTokens.size.modal.md, astroTokens.size.modal.md],
+  md: ['100%', astroTokens.size.modal.md, astroTokens.size.modal.md, astroTokens.size.modal.md, astroTokens.size.modal.lg, astroTokens.size.modal.lg],
+  lg: ['100%', astroTokens.size.modal.md, astroTokens.size.modal.md, astroTokens.size.modal.md, astroTokens.size.modal.lg, astroTokens.size.modal.xl],
   full: ['100%', '100%', '100%', '100%', '100%', '100%']
 };
 var modal = {
@@ -109,7 +110,7 @@ var modal = {
   },
   headingContainer: {
     borderBottom: '1px solid',
-    borderBottomColor: 'gray-200',
+    borderBottomColor: astroTokens.color.gray[200],
     bg: 'backgroundBase',
     borderRadius: '1em 1em 0px 0px'
   },
@@ -331,7 +332,7 @@ var rockerButton = {
       backgroundColor: '#135CBC !important',
       color: 'white'
     },
-    '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    '&.is-focused:focus': _objectSpread(_objectSpread({}, defaultFocus), {}, {
       position: 'relative',
       zIndex: '1000'
     })
@@ -355,59 +356,59 @@ var breadcrumb = {
 var statusIcon = {
   base: {
     '&.is-default': {
-      bg: 'gray-100',
+      bg: astroTokens.color.gray[100],
       span: {
         fontSize: 'md',
-        color: 'gray-700'
+        color: astroTokens.color.gray[700]
       }
     },
     '&.is-critical': {
-      bg: 'red-100',
+      bg: astroTokens.color.red[100],
       span: {
         fontSize: 'md',
-        color: 'red-700'
+        color: astroTokens.color.red[700]
       }
     },
     '&.is-warning': {
-      bg: 'yellow-100',
+      bg: astroTokens.color.yellow[100],
       span: {
         fontSize: 'md',
-        color: 'yellow-800'
+        color: astroTokens.color.yellow[800]
       }
     },
     '&.is-info': {
-      bg: 'blue-100',
+      bg: astroTokens.color.blue[100],
       span: {
         fontSize: 'md',
-        color: 'blue-600'
+        color: astroTokens.color.blue[600]
       }
     },
     '&.is-major': {
-      bg: 'orange-100',
+      bg: astroTokens.color.orange[100],
       span: {
         fontSize: 'md',
-        color: 'orange-700'
+        color: astroTokens.color.orange[700]
       }
     },
     '&.is-minor': {
-      bg: 'yellow-100',
+      bg: astroTokens.color.yellow[100],
       span: {
         fontSize: 'md',
-        color: 'yellow-800'
+        color: astroTokens.color.yellow[800]
       }
     },
     '&.is-warning-neutral': {
-      bg: 'gray-100',
+      bg: astroTokens.color.gray[100],
       span: {
         fontSize: 'md',
-        color: 'gray-700'
+        color: astroTokens.color.gray[700]
       }
     },
     '&.is-fatal': {
-      bg: 'gray-700',
+      bg: astroTokens.color.gray[700],
       span: {
         fontSize: 'md',
-        color: 'gray-100'
+        color: astroTokens.color.gray[100]
       }
     },
     '&.is-selected.is-selected': {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.173.0",
+  "version": "2.174.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -48,6 +48,7 @@
     "@monaco-editor/react": "4.4.2",
     "@nx/vite": "20.0.5",
     "@pingux/mdi-react": "^1.2.0",
+    "@pingux/onyx-tokens": "^0.18.0",
     "@react-aria/accordion": "~3.0.0-alpha.11",
     "@react-aria/breadcrumbs": "^3.1.4",
     "@react-aria/button": "^3.13.2",

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

@@ -1,9 +0,0 @@
-declare const scale: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    xx: string;
-};
-export default scale;