@pingux/astro 2.201.1-alpha.0 → 2.202.0-alpha.0

package/lib/cjs/components/Tabs/Tabs.stories.js

@@ -15,6 +15,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _react = _interopRequireWildcard(require("react"));
 var _LockIcon = _interopRequireDefault(require("@pingux/mdi-react/LockIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _Tabs = _interopRequireDefault(require("./Tabs.mdx"));
 var _react2 = require("@emotion/react");
@@ -155,11 +156,13 @@ var DisabledAllTabs = exports.DisabledAllTabs = function DisabledAllTabs() {
   });
 };
 var ContentSlots = exports.ContentSlots = function ContentSlots() {
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var beforeTabNode = (0, _react2.jsx)(_index.Icon, {
     icon: _LockIcon["default"],
     sx: {
-      marginTop: 10,
-      marginRight: 5
+      marginTop: isOnyx ? 'md' : 'sm',
+      marginRight: 'xs'
     },
     title: {
       name: 'Lock Icon'

package/lib/cjs/components/Tabs/Tabs.style.d.ts

@@ -1,5 +1,4 @@
 export declare const tab: {
-    pt: number;
     cursor: string;
     alignItems: string;
     display: string;

package/lib/cjs/components/Tabs/Tabs.style.js

@@ -18,7 +18,6 @@ var _Buttons = require("../Button/Buttons.styles");
 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 tab = exports.tab = {
-  pt: 10,
   cursor: 'pointer',
   alignItems: 'center',
   display: 'inline-flex',

package/lib/cjs/components/Text/Text.styles.d.ts

@@ -12,6 +12,7 @@ export declare const tabLabel: {
     fontSize: string;
     fontWeight: number;
     mb: string;
+    mt: string;
     lineHeight: string;
     color: string;
     height: string;
@@ -734,7 +735,6 @@ export declare const tabLabel: {
     WebkitTransition?: import("theme-ui").StylePropertyValue<import("csstype").Property.Transition<string & {}> | undefined>;
     bg?: import("theme-ui").StylePropertyValue<import("csstype").Property.BackgroundColor | undefined>;
     m?: import("theme-ui").StylePropertyValue<import("csstype").Property.Margin<string | number> | undefined>;
-    mt?: import("theme-ui").StylePropertyValue<import("csstype").Property.MarginTop<string | number> | undefined>;
     mr?: import("theme-ui").StylePropertyValue<import("csstype").Property.MarginRight<string | number> | undefined>;
     ml?: import("theme-ui").StylePropertyValue<import("csstype").Property.MarginLeft<string | number> | undefined>;
     mx?: import("theme-ui").StylePropertyValue<import("csstype").Property.MarginLeft<string | number> | undefined>;
@@ -2873,6 +2873,7 @@ export declare const text: {
         fontSize: string;
         fontWeight: number;
         mb: string;
+        mt: string;
         lineHeight: string;
         color: string;
         height: string;
@@ -3595,7 +3596,6 @@ export declare const text: {
         WebkitTransition?: import("theme-ui").StylePropertyValue<import("csstype").Property.Transition<string & {}> | undefined>;
         bg?: import("theme-ui").StylePropertyValue<import("csstype").Property.BackgroundColor | undefined>;
         m?: import("theme-ui").StylePropertyValue<import("csstype").Property.Margin<string | number> | undefined>;
-        mt?: import("theme-ui").StylePropertyValue<import("csstype").Property.MarginTop<string | number> | undefined>;
         mr?: import("theme-ui").StylePropertyValue<import("csstype").Property.MarginRight<string | number> | undefined>;
         ml?: import("theme-ui").StylePropertyValue<import("csstype").Property.MarginLeft<string | number> | undefined>;
         mx?: import("theme-ui").StylePropertyValue<import("csstype").Property.MarginLeft<string | number> | undefined>;

package/lib/cjs/components/Text/Text.styles.js

@@ -34,6 +34,7 @@ var tabLabel = exports.tabLabel = _objectSpread(_objectSpread(_objectSpread({},
   fontSize: 'sm',
   fontWeight: 1,
   mb: 'sm',
+  mt: 'sm',
   lineHeight: '16px',
   color: 'neutral.40',
   height: '100%',

package/lib/cjs/recipes/LogoTabs.stories.js

@@ -100,7 +100,7 @@ var sx = {
   },
   separator: {
     position: 'absolute',
-    top: '25%',
+    top: '18%',
     backgroundColor: 'accent.70'
   },
   logoTabsStyling: {

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

@@ -51,4 +51,13 @@ export declare const text: {
     linkSelectFieldLabel: {
         color: any;
     };
+    tabLabel: {
+        color: any;
+        '.is-selected &': {
+            color: any;
+        };
+        '.is-selected &, .is-hovered &': {
+            color: any;
+        };
+    };
 };

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

@@ -58,5 +58,14 @@ var text = exports.text = {
   },
   linkSelectFieldLabel: {
     color: _onyxTokens.astroTokensDark.color.font.link
+  },
+  tabLabel: {
+    color: _onyxTokens.astroTokensDark.color.font.base,
+    '.is-selected &': {
+      color: _onyxTokens.astroTokensDark.color.font.link
+    },
+    '.is-selected &, .is-hovered &': {
+      color: _onyxTokens.astroTokensDark.color.font.link
+    }
   }
 };

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

@@ -485,18 +485,7 @@ declare const _default: {
             bg: string;
         };
     };
-    tab: {
-        '&.is-selected': {
-            '& > span': {
-                color: string;
-            };
-        };
-        '&.is-hovered': {
-            '& > span': {
-                color: string;
-            };
-        };
-    };
+    tab: {};
     iconBadge: {
         cyan: {
             backgroundColor: string;

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

@@ -51,18 +51,7 @@ var listBox = {
     }
   }
 };
-var tab = {
-  '&.is-selected': {
-    '& > span': {
-      color: 'text.secondary'
-    }
-  },
-  '&.is-hovered': {
-    '& > span': {
-      color: 'text.secondary'
-    }
-  }
-};
+var tab = {};
 var modal = {
   content: {
     bg: 'backgroundBase'

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

@@ -3120,8 +3120,18 @@ declare const _default: {
             lineHeight: string;
         };
         tabLabel: {
-            color: string;
+            color: any;
             wordBreak: string;
+            lineHeight: string;
+            mb: string;
+            mt: string;
+            '.is-selected &': {
+                color: any;
+                mb: string;
+            };
+            '.is-selected &, .is-hovered &': {
+                color: any;
+            };
         };
         placeholder: {
             color: any;
@@ -6713,7 +6723,6 @@ declare const _default: {
         };
         tab: {
             borderRadius: string;
-            pt: string;
             '& > span': {
                 px: string;
                 fontSize: string;

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

@@ -8,7 +8,6 @@ export declare const menuTab: {
 };
 export declare const tab: {
     borderRadius: string;
-    pt: string;
     '& > span': {
         px: string;
         fontSize: string;
@@ -28,3 +27,6 @@ export declare const tab: {
         ml: string;
     };
 };
+export declare const tabLine: {
+    height: string;
+};

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

@@ -4,7 +4,7 @@ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/obje
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tabs = exports.tab = exports.menuTab = void 0;
+exports.tabs = exports.tabLine = exports.tab = exports.menuTab = void 0;
 var tabs = exports.tabs = {
   '&.is-horizontal': {
     gap: '0px'
@@ -15,16 +15,15 @@ var menuTab = exports.menuTab = {
 };
 var tab = exports.tab = {
   borderRadius: '2px',
-  pt: '.5rem',
   '& > span': {
-    px: '1rem',
-    fontSize: '.9375rem'
+    px: 'md',
+    fontSize: 'md'
   },
   '&.is-focused': {
     boxShadow: 'none',
-    outline: '3px solid',
+    outline: '1px solid',
     outlineColor: 'active',
-    outlineOffset: '1px',
+    outlineOffset: '0px',
     '& > span': {
       outline: 'none'
     }
@@ -34,4 +33,7 @@ var tab = exports.tab = {
     borderBottomColor: 'primary',
     ml: '0px'
   }
+};
+var tabLine = exports.tabLine = {
+  height: '3px'
 };

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

@@ -187,8 +187,18 @@ export declare const text: {
         lineHeight: string;
     };
     tabLabel: {
-        color: string;
+        color: any;
         wordBreak: string;
+        lineHeight: string;
+        mb: string;
+        mt: string;
+        '.is-selected &': {
+            color: any;
+            mb: string;
+        };
+        '.is-selected &, .is-hovered &': {
+            color: any;
+        };
     };
     placeholder: {
         color: any;

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

@@ -157,8 +157,18 @@ var text = exports.text = _objectSpread(_objectSpread({
     lineHeight: '24px'
   },
   tabLabel: {
-    color: 'text.primary',
-    wordBreak: 'normal'
+    color: _onyxTokens.astroTokens.color.font.base,
+    wordBreak: 'normal',
+    lineHeight: 'body',
+    mb: 'sm',
+    mt: 'sm',
+    '.is-selected &': {
+      color: _onyxTokens.astroTokens.color.font.link,
+      mb: 'sm'
+    },
+    '.is-selected &, .is-hovered &': {
+      color: _onyxTokens.astroTokens.color.font.link
+    }
   },
   placeholder: {
     color: _onyxTokens.astroTokens.color.gray[600],

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

@@ -2028,7 +2028,6 @@ declare const _default: {
     };
     tab: {
         borderRadius: string;
-        pt: string;
         '& > span': {
             px: string;
             fontSize: string;

package/lib/components/Tabs/Tabs.stories.js

@@ -4,6 +4,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import React, { useState } from 'react';
 import LockIcon from '@pingux/mdi-react/LockIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { useGetTheme } from '../../hooks';
 import { Badge, Box, Icon, Tab, Tabs, Text } from '../../index';
 import TabsReadme from './Tabs.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -143,11 +144,13 @@ export var DisabledAllTabs = function DisabledAllTabs() {
   });
 };
 export var ContentSlots = function ContentSlots() {
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var beforeTabNode = ___EmotionJSX(Icon, {
     icon: LockIcon,
     sx: {
-      marginTop: 10,
-      marginRight: 5
+      marginTop: isOnyx ? 'md' : 'sm',
+      marginRight: 'xs'
     },
     title: {
       name: 'Lock Icon'

package/lib/components/Tabs/Tabs.style.js

@@ -11,7 +11,6 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 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 { defaultFocus, quiet } from '../Button/Buttons.styles';
 export var tab = {
-  pt: 10,
   cursor: 'pointer',
   alignItems: 'center',
   display: 'inline-flex',

package/lib/components/Text/Text.styles.js

@@ -27,6 +27,7 @@ export var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordW
   fontSize: 'sm',
   fontWeight: 1,
   mb: 'sm',
+  mt: 'sm',
   lineHeight: '16px',
   color: 'neutral.40',
   height: '100%',

package/lib/recipes/LogoTabs.stories.js

@@ -90,7 +90,7 @@ var sx = {
   },
   separator: {
     position: 'absolute',
-    top: '25%',
+    top: '18%',
     backgroundColor: 'accent.70'
   },
   logoTabsStyling: {

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

@@ -51,5 +51,14 @@ export var text = {
   },
   linkSelectFieldLabel: {
     color: astroTokensDark.color.font.link
+  },
+  tabLabel: {
+    color: astroTokensDark.color.font.base,
+    '.is-selected &': {
+      color: astroTokensDark.color.font.link
+    },
+    '.is-selected &, .is-hovered &': {
+      color: astroTokensDark.color.font.link
+    }
   }
 };

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

@@ -43,18 +43,7 @@ var listBox = {
     }
   }
 };
-var tab = {
-  '&.is-selected': {
-    '& > span': {
-      color: 'text.secondary'
-    }
-  },
-  '&.is-hovered': {
-    '& > span': {
-      color: 'text.secondary'
-    }
-  }
-};
+var tab = {};
 var modal = {
   content: {
     bg: 'backgroundBase'

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

@@ -8,16 +8,15 @@ export var menuTab = {
 };
 export var tab = {
   borderRadius: '2px',
-  pt: '.5rem',
   '& > span': {
-    px: '1rem',
-    fontSize: '.9375rem'
+    px: 'md',
+    fontSize: 'md'
   },
   '&.is-focused': {
     boxShadow: 'none',
-    outline: '3px solid',
+    outline: '1px solid',
     outlineColor: 'active',
-    outlineOffset: '1px',
+    outlineOffset: '0px',
     '& > span': {
       outline: 'none'
     }
@@ -27,4 +26,7 @@ export var tab = {
     borderBottomColor: 'primary',
     ml: '0px'
   }
+};
+export var tabLine = {
+  height: '3px'
 };

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

@@ -150,8 +150,18 @@ export var text = _objectSpread(_objectSpread({
     lineHeight: '24px'
   },
   tabLabel: {
-    color: 'text.primary',
-    wordBreak: 'normal'
+    color: astroTokens.color.font.base,
+    wordBreak: 'normal',
+    lineHeight: 'body',
+    mb: 'sm',
+    mt: 'sm',
+    '.is-selected &': {
+      color: astroTokens.color.font.link,
+      mb: 'sm'
+    },
+    '.is-selected &, .is-hovered &': {
+      color: astroTokens.color.font.link
+    }
   },
   placeholder: {
     color: astroTokens.color.gray[600],

package/package.json

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