@pingux/astro 1.13.0-alpha.2 → 1.13.0-alpha.5

package/lib/cjs/components/CopyText/CopyText.js

@@ -58,8 +58,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   return (0, _react2.jsx)(_index.TooltipTrigger, (0, _extends2["default"])({
     key: tooltip,
     direction: "top",
-    isNotFlippable: true,
-    offset: 5
+    isNotFlippable: true
   }, others), children, (0, _react2.jsx)(_index.Tooltip, null, tooltip));
 };
 

package/lib/cjs/components/Messages/Message.js

@@ -34,12 +34,14 @@ var _liveAnnouncer = require("@react-aria/live-announcer");
 
 var _AlertCircleIcon = _interopRequireDefault(require("mdi-react/AlertCircleIcon"));
 
-var _AlertCircleOutlineIcon = _interopRequireDefault(require("mdi-react/AlertCircleOutlineIcon"));
-
 var _CheckCircleIcon = _interopRequireDefault(require("mdi-react/CheckCircleIcon"));
 
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 
+var _AlertIcon = _interopRequireDefault(require("mdi-react/AlertIcon"));
+
+var _InformationIcon = _interopRequireDefault(require("mdi-react/InformationIcon"));
+
 var _useStatusClasses4 = _interopRequireDefault(require("../../hooks/useStatusClasses"));
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -61,10 +63,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var icons = {
-  "default": _AlertCircleOutlineIcon["default"],
+  "default": _InformationIcon["default"],
   success: _CheckCircleIcon["default"],
   error: _AlertCircleIcon["default"],
-  warning: _AlertCircleOutlineIcon["default"]
+  warning: _AlertIcon["default"]
 };
 exports.icons = icons;
 

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

@@ -291,7 +291,8 @@ var WithSlots = function WithSlots() {
   var buttonSx = {
     position: 'absolute',
     right: 0,
-    top: '5px'
+    top: '5px',
+    height: '32px'
   };
   var containerSx = {
     sx: {

package/lib/cjs/styles/themes/astro-nano/astro-nano.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _themeUi = require("theme-ui");
+
+var _chromaJs = _interopRequireDefault(require("chroma-js"));
+
+var _theme = _interopRequireDefault(require("../../theme"));
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var scaleFont = 1.2;
+var borderRadius = 4;
+var focusStyles = {
+  boxShadow: 'none',
+  outline: '1px solid #000000',
+  outlineOffset: 2,
+  outlineColor: 'active'
+};
+var inputFocusStyles = {
+  borderColor: 'active',
+  outline: '4px solid #000000',
+  outlineColor: 'accent.90'
+};
+var baseButton = {
+  borderRadius: borderRadius,
+  fontWeight: 400,
+  height: '50px',
+  '&.is-hovered': {
+    boxShadow: 'none',
+    color: 'white',
+    bg: 'activeDark'
+  },
+  '&.is-pressed': {
+    bg: 'activeDarker'
+  },
+  '&:focus-visible': focusStyles,
+  '&.is-focused': focusStyles
+};
+var linkStyles = {
+  '&.is-hovered': {
+    color: 'activeDark'
+  },
+  '&.is-pressed': {
+    color: 'activeDarker'
+  }
+};
+var modifyTheme = {
+  buttons: {
+    "default": _objectSpread({
+      color: 'active'
+    }, baseButton),
+    primary: _objectSpread({}, baseButton)
+  },
+  colors: {
+    activeDark: (0, _chromaJs["default"])(_theme["default"].colors.active).darken(0.5).hex(),
+    activeDarker: (0, _chromaJs["default"])(_theme["default"].colors.active).darken(1).hex()
+  },
+  fontSizes: {
+    xs: scaleFont * _theme["default"].fontSizes.xs,
+    sm: scaleFont * _theme["default"].fontSizes.sm,
+    md: scaleFont * _theme["default"].fontSizes.md,
+    lg: scaleFont * _theme["default"].fontSizes.lg,
+    xl: scaleFont * _theme["default"].fontSizes.xl,
+    xx: scaleFont * _theme["default"].fontSizes.xx,
+    xxx: '48px'
+  },
+  forms: {
+    input: {
+      fontSize: 'md',
+      borderRadius: borderRadius,
+      height: '50px',
+      '&:focus': inputFocusStyles,
+      primary: _objectSpread(_objectSpread({}, _theme["default"].forms.input), {}, {
+        borderRadius: borderRadius,
+        fontSize: 'xxx',
+        borderColor: 'neutral.60',
+        height: '75px',
+        textAlign: 'center',
+        letterSpacing: '12px',
+        fontWeight: 'bold',
+        '&:focus': inputFocusStyles
+      })
+    }
+  },
+  links: {
+    web: linkStyles,
+    app: linkStyles
+  },
+  text: {
+    title: {
+      fontWeight: 700
+    },
+    footer: {
+      color: 'text.secondary',
+      fontSize: 'xs'
+    },
+    label: {
+      color: 'text.primary'
+    }
+  },
+  variants: {
+    boxes: {
+      card: {
+        borderRadius: borderRadius,
+        flexGrow: [1, 0],
+        maxWidth: _theme["default"].breakpoints[0],
+        bg: 'white',
+        alignItems: 'stretch',
+        py: [0, 'xl'],
+        my: 'auto',
+        boxShadow: ['none', _theme["default"].variants.boxes.card.boxShadow],
+        width: ['100%', '450px'],
+        minHeight: 'fit-content'
+      },
+      wrapper: {
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        bg: ['white', 'accent.99'],
+        py: 'lg',
+        gap: 'lg',
+        overflow: 'auto',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+      },
+      cardBody: {
+        flexGrow: [1, 0]
+      }
+    }
+  }
+};
+
+var _default = (0, _themeUi.merge)(_theme["default"], modifyTheme);
+
+exports["default"] = _default;

package/lib/cjs/styles/themes/astro-nano/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _astroNano["default"];
+  }
+});
+
+var _astroNano = _interopRequireDefault(require("./astro-nano"));

package/lib/cjs/styles/variants/boxes.js

@@ -174,7 +174,10 @@ var copy = {
   width: 'max-content',
   cursor: 'pointer',
   '& .is-focused': {
-    boxShadow: 'inset 0 0 5px #5873bdbf'
+    outline: '1px solid',
+    outlineColor: 'active',
+    outlineOffset: '4px',
+    borderRadius: '4px'
   }
 };
 var topShadowScrollbox = {

package/lib/cjs/styles/variants/buttons.js

@@ -472,13 +472,14 @@ var danger = _objectSpread(_objectSpread({}, base), {}, {
 var copy = {
   ml: 'xs',
   outline: 'none',
+  height: 'auto',
   cursor: 'pointer',
   path: {
     fill: 'neutral.10'
   },
-  '&.is-focused': {
-    boxShadow: 'inset 0 0 5px #5873bdbf'
-  }
+  '&.is-focused': _objectSpread({
+    boxShadow: 'none'
+  }, defaultFocus)
 };
 var colorField = {
   border: "1px solid ".concat(_colors.neutral['80']),

package/lib/components/CopyText/CopyText.js

@@ -23,8 +23,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   return ___EmotionJSX(TooltipTrigger, _extends({
     key: tooltip,
     direction: "top",
-    isNotFlippable: true,
-    offset: 5
+    isNotFlippable: true
   }, others), children, ___EmotionJSX(Tooltip, null, tooltip));
 };
 

package/lib/components/Messages/Message.js

@@ -8,9 +8,10 @@ import React, { forwardRef, useEffect, useRef, useState, useLayoutEffect } from
 import PropTypes from 'prop-types';
 import { announce } from '@react-aria/live-announcer';
 import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
-import AlertCircleOutlineIcon from 'mdi-react/AlertCircleOutlineIcon';
 import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
+import AlertIcon from 'mdi-react/AlertIcon';
+import InformationIcon from 'mdi-react/InformationIcon';
 import useStatusClasses from '../../hooks/useStatusClasses';
 import statuses from '../../utils/devUtils/constants/statuses';
 import Box from '../Box';
@@ -19,10 +20,10 @@ import IconButton from '../IconButton';
 import Text from '../Text';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var icons = {
-  "default": AlertCircleOutlineIcon,
+  "default": InformationIcon,
   success: CheckCircleIcon,
   error: AlertCircleIcon,
-  warning: AlertCircleOutlineIcon
+  warning: AlertIcon
 };
 
 var CloseButton = function CloseButton(_ref) {

package/lib/components/TextField/TextField.stories.js

@@ -206,7 +206,8 @@ export var WithSlots = function WithSlots() {
   var buttonSx = {
     position: 'absolute',
     right: 0,
-    top: '5px'
+    top: '5px',
+    height: '32px'
   };
   var containerSx = {
     sx: {

package/lib/styles/themes/astro-nano/astro-nano.js

@@ -0,0 +1,141 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { merge } from 'theme-ui';
+import chroma from 'chroma-js';
+import astroTheme from '../../theme';
+var scaleFont = 1.2;
+var borderRadius = 4;
+var focusStyles = {
+  boxShadow: 'none',
+  outline: '1px solid #000000',
+  outlineOffset: 2,
+  outlineColor: 'active'
+};
+var inputFocusStyles = {
+  borderColor: 'active',
+  outline: '4px solid #000000',
+  outlineColor: 'accent.90'
+};
+var baseButton = {
+  borderRadius: borderRadius,
+  fontWeight: 400,
+  height: '50px',
+  '&.is-hovered': {
+    boxShadow: 'none',
+    color: 'white',
+    bg: 'activeDark'
+  },
+  '&.is-pressed': {
+    bg: 'activeDarker'
+  },
+  '&:focus-visible': focusStyles,
+  '&.is-focused': focusStyles
+};
+var linkStyles = {
+  '&.is-hovered': {
+    color: 'activeDark'
+  },
+  '&.is-pressed': {
+    color: 'activeDarker'
+  }
+};
+var modifyTheme = {
+  buttons: {
+    "default": _objectSpread({
+      color: 'active'
+    }, baseButton),
+    primary: _objectSpread({}, baseButton)
+  },
+  colors: {
+    activeDark: chroma(astroTheme.colors.active).darken(0.5).hex(),
+    activeDarker: chroma(astroTheme.colors.active).darken(1).hex()
+  },
+  fontSizes: {
+    xs: scaleFont * astroTheme.fontSizes.xs,
+    sm: scaleFont * astroTheme.fontSizes.sm,
+    md: scaleFont * astroTheme.fontSizes.md,
+    lg: scaleFont * astroTheme.fontSizes.lg,
+    xl: scaleFont * astroTheme.fontSizes.xl,
+    xx: scaleFont * astroTheme.fontSizes.xx,
+    xxx: '48px'
+  },
+  forms: {
+    input: {
+      fontSize: 'md',
+      borderRadius: borderRadius,
+      height: '50px',
+      '&:focus': inputFocusStyles,
+      primary: _objectSpread(_objectSpread({}, astroTheme.forms.input), {}, {
+        borderRadius: borderRadius,
+        fontSize: 'xxx',
+        borderColor: 'neutral.60',
+        height: '75px',
+        textAlign: 'center',
+        letterSpacing: '12px',
+        fontWeight: 'bold',
+        '&:focus': inputFocusStyles
+      })
+    }
+  },
+  links: {
+    web: linkStyles,
+    app: linkStyles
+  },
+  text: {
+    title: {
+      fontWeight: 700
+    },
+    footer: {
+      color: 'text.secondary',
+      fontSize: 'xs'
+    },
+    label: {
+      color: 'text.primary'
+    }
+  },
+  variants: {
+    boxes: {
+      card: {
+        borderRadius: borderRadius,
+        flexGrow: [1, 0],
+        maxWidth: astroTheme.breakpoints[0],
+        bg: 'white',
+        alignItems: 'stretch',
+        py: [0, 'xl'],
+        my: 'auto',
+        boxShadow: ['none', astroTheme.variants.boxes.card.boxShadow],
+        width: ['100%', '450px'],
+        minHeight: 'fit-content'
+      },
+      wrapper: {
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        bg: ['white', 'accent.99'],
+        py: 'lg',
+        gap: 'lg',
+        overflow: 'auto',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+      },
+      cardBody: {
+        flexGrow: [1, 0]
+      }
+    }
+  }
+};
+export default merge(astroTheme, modifyTheme);

package/lib/styles/themes/astro-nano/index.js

@@ -0,0 +1 @@
+export { default } from './astro-nano';

package/lib/styles/variants/boxes.js

@@ -154,7 +154,10 @@ var copy = {
   width: 'max-content',
   cursor: 'pointer',
   '& .is-focused': {
-    boxShadow: 'inset 0 0 5px #5873bdbf'
+    outline: '1px solid',
+    outlineColor: 'active',
+    outlineOffset: '4px',
+    borderRadius: '4px'
   }
 };
 var topShadowScrollbox = {

package/lib/styles/variants/buttons.js

@@ -452,13 +452,14 @@ var danger = _objectSpread(_objectSpread({}, base), {}, {
 var copy = {
   ml: 'xs',
   outline: 'none',
+  height: 'auto',
   cursor: 'pointer',
   path: {
     fill: 'neutral.10'
   },
-  '&.is-focused': {
-    boxShadow: 'inset 0 0 5px #5873bdbf'
-  }
+  '&.is-focused': _objectSpread({
+    boxShadow: 'none'
+  }, defaultFocus)
 };
 var colorField = {
   border: "1px solid ".concat(neutral['80']),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.13.0-alpha.2",
+  "version": "1.13.0-alpha.5",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",