@pareto-engineering/design-system 4.0.0-alpha.28 → 4.0.0-alpha.33

package/dist/cjs/a/AnimatedGradient/AnimatedGradient.js

@@ -54,7 +54,7 @@ AnimatedGradient.propTypes = {
   className: _propTypes.default.string
 };
 AnimatedGradient.defaultProps = {
-  // primaryColor:'black',
+  // primaryColor:'heading',
 };
 var _default = AnimatedGradient;
 exports.default = _default;

package/dist/cjs/a/People/common/Person/Person.js

@@ -78,7 +78,7 @@ Person.propTypes = {
   color: _propTypes.default.string
 };
 Person.defaultProps = {
-  color: 'background2'
+  color: 'background-far'
 };
 var _default = Person;
 exports.default = _default;

package/dist/cjs/a/Popover/Popover.js

@@ -104,7 +104,7 @@ Popover.propTypes = {
   })])
 };
 Popover.defaultProps = {
-  color: 'background1',
+  color: 'background-near',
   isOpen: false,
   preferredPrimaryOrder: ['bottom', 'top', 'right', 'left'],
   preferredSecondaryOrder: ['left', 'right', 'bottom', 'top'],

package/dist/cjs/a/Popover/styles.scss

@@ -2,7 +2,7 @@
 
 @use "@pareto-engineering/bem";
 
-$default-border: var(--theme-border-style) var(--metadata);
+$default-border: var(--theme-default-border-style) var(--metadata);
 
 .#{bem.$base}.popover {
   background-color: var(--x);

package/dist/cjs/a/TextSteps/TextSteps.js

@@ -26,7 +26,7 @@ const Steps = _ref => {
     items,
     title
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/cjs/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js

@@ -61,7 +61,7 @@ const HorizontalMenu = _ref => {
     attached: true,
     height: ".4em",
     color: color,
-    className: "y-background1 b-hard-y"
+    className: "y-background-far b-hard-y"
   }), /*#__PURE__*/React.createElement("div", {
     className: _exports.default.elementContent
   }, /*#__PURE__*/React.createElement("div", {

package/dist/cjs/c/ContentSlides/styles.scss

@@ -16,8 +16,8 @@ $class-navigator:navigator;
 $default-sidebar-width:minmax(250px, 330px);
 $default-border:none;//2px solid var(--grid);
 $default-border-radius:var(--theme-border-radius);
-$default-content-background: var(--background1);
-$default-padding:var(--u);
+$default-content-background: var(--background-far);
+$default-padding:var(--theme-default-padding);
 
 $mobile-content-margin:6em;
 

package/dist/cjs/c/Modal/Modal.js

@@ -77,7 +77,7 @@ Modal.propTypes = {
   close: _propTypes.default.func
 };
 Modal.defaultProps = {
-  //
+  color: 'heading'
 };
 var _default = Modal;
 exports.default = _default;

package/dist/cjs/c/Modal/common/ModalHeader/ModalHeader.js

@@ -41,7 +41,7 @@ const ModalHeader = _ref => {
     isCompact: true,
     className: "close-button"
   }, /*#__PURE__*/React.createElement("span", {
-    className: "f-icons"
+    className: "icon"
   }, "Y")));
 };
 ModalHeader.propTypes = {

package/dist/cjs/c/Modal/styles.scss

@@ -3,7 +3,7 @@
 @use "@pareto-engineering/bem";
 @use "sass:math";
 
-$default-background: var(--background1);
+$default-background: var(--background-cards);
 /* stylelint-disable-next-line color-named -- needed for rgba function */
 $default-box-shadow: 0 10px 20px rgba(black, .2);
 $default-padding: math.div(1em, 2);
@@ -45,5 +45,9 @@ $default-min-width: 20em;
       margin: 0;
       padding: $default-padding;
     }
+
+    .close-button {
+      display: block;
+    }
   }
 }

package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js

@@ -202,7 +202,7 @@ QueryCombobox.defaultProps = {
     getLabel: node => node.name
   },
   multiple: false,
-  color: 'background2',
+  color: 'background-near',
   searchVariable: 'search',
   transformSearch: search => search,
   minLength: 2,

package/dist/cjs/f/fields/QueryCombobox/common/Combobox/Combobox.js

@@ -99,14 +99,14 @@ const Combobox = _ref => {
     className: "input",
     disabled: disabled
   })), isFetching && /*#__PURE__*/React.createElement(_a.LoadingCircle, {
-    className: "x-main2"
+    className: "x-main"
   }), inputValue.length > minLength && !isFetching && /*#__PURE__*/React.createElement(_b.Button, {
     isSimple: true,
     isCompact: true,
-    color: "main2",
+    color: "heading",
     onClick: resetInputValue
   }, /*#__PURE__*/React.createElement("span", {
-    className: "f-icons"
+    className: "icon"
   }, "Y"))), /*#__PURE__*/React.createElement(_a.Popover, {
     isOpen: isOpen,
     parentRef: parentRef

package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js

@@ -170,7 +170,7 @@ const MultipleCombobox = _ref => {
   }, /*#__PURE__*/React.createElement("span", {
     className: "v25 mr-v"
   }, selectedItem.label), /*#__PURE__*/React.createElement("span", {
-    className: "f-icons close"
+    className: "icon close"
   }, "Y"))))), /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(), {
     className: "input-wrapper"
   }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(getDropdownProps({
@@ -186,7 +186,7 @@ const MultipleCombobox = _ref => {
     color: "main2",
     onClick: resetInputValue
   }, /*#__PURE__*/React.createElement("span", {
-    className: "f-icons"
+    className: "icon"
   }, "Y"))), /*#__PURE__*/React.createElement(_a.Popover, {
     isOpen: isOpen,
     parentRef: parentRef

package/dist/cjs/f/fields/QueryCombobox/styles.scss

@@ -7,7 +7,7 @@ $default-input-padding: .75em .75em .55em;
 $default-padding: 1em;
 $default-margin: 1em;
 $default-gap: 1em;
-$default-loading-circle-displacement: 1em;
+$default-loading-circle-displacement: .5em;
 
 .#{bem.$base}.combobox,
 .#{bem.$base}.multiple-combobox {
@@ -30,7 +30,7 @@ $default-loading-circle-displacement: 1em;
         padding: math.div($default-padding, 2);
 
         &.#{bem.$modifier-active} {
-          background-color: var(--background2);
+          background-color: var(--hard-y);
         }
       }
     }
@@ -42,13 +42,14 @@ $default-loading-circle-displacement: 1em;
     >.#{bem.$base}.loading-circle,
     >.#{bem.$base}.button {
       position: absolute;
-      right: $default-loading-circle-displacement;
+      right: calc(2 * $default-loading-circle-displacement);
       top: $default-loading-circle-displacement;
     }
 
     >.input {
       background: var(--soft-y);
-      border: var(--theme-border-style) var(--hard-y);
+      border: var(--theme-default-border-style) var(--hard-y);
+      border-radius: calc(var(--theme-default-border-radius) / 2);
       color: var(--on-y);
       padding: $default-input-padding;
       width: 100%;
@@ -58,7 +59,7 @@ $default-loading-circle-displacement: 1em;
       }
 
       &:not(:disabled):hover {
-        border: var(--theme-border-style) var(--soft-background4);
+        border: var(--theme-default-border-style) var(--hard-y);
       }
 
       &:disabled {
@@ -66,7 +67,7 @@ $default-loading-circle-displacement: 1em;
       }
 
       &:focus {
-        background: var(--soft-background4);
+        border: var(--theme-default-border-style) var(--hard-y);
       }
     }
   }
@@ -81,7 +82,7 @@ $default-loading-circle-displacement: 1em;
     margin-bottom: math.div($default-margin, 2);
 
     >.item {
-      background-color: var(--main2);
+      background-color: var(--main);
       padding: math.div($default-padding, 4);
 
       .close {

package/dist/cjs/f/fields/QuerySelect/QuerySelect.js

@@ -176,7 +176,7 @@ QuerySelect.propTypes = {
 };
 QuerySelect.defaultProps = {
   disabled: false,
-  color: 'background2',
+  color: 'background-far',
   defaultOption: {
     value: '',
     label: 'Select an option',

package/dist/cjs/f/fields/RatingsInput/common/Rating/Rating.js

@@ -51,7 +51,7 @@ const Rating = _ref => {
   }, showRatingValue && /*#__PURE__*/React.createElement("span", {
     className: "v25 mb-v md-s-1 s-2 x-metadata c-x"
   }, value), /*#__PURE__*/React.createElement("span", {
-    className: ['f-icons', value <= (hover || Number(field.value)) ? 'c-x' : 'c-hard-y'].filter(e => e).join(' ')
+    className: ['icon', value <= (hover || Number(field.value)) ? 'c-x' : 'c-hard-y'].filter(e => e).join(' ')
   }, "[")), /*#__PURE__*/React.createElement("input", _extends({}, field, {
     type: "radio",
     id: ratingId,
@@ -110,8 +110,8 @@ Rating.propTypes = {
   validate: _propTypes.default.func
 };
 Rating.defaultProps = {
-  activeBackgroundColor: 'main1',
-  inactiveBackgroundColor: 'background2',
+  activeBackgroundColor: 'main',
+  inactiveBackgroundColor: 'background-far',
   showRatingValue: false
 };
 var _default = Rating;

package/dist/cjs/f/fields/TextInput/TextInput.js

@@ -146,7 +146,7 @@ TextInput.propTypes = {
 };
 TextInput.defaultProps = {
   type: 'text',
-  color: 'background2',
+  color: 'main',
   disabled: false
 };
 var _default = /*#__PURE__*/(0, React.memo)(TextInput);

package/dist/cjs/f/fields/TextareaInput/TextareaInput.js

@@ -31,7 +31,7 @@ const TextareaInput = _ref => {
     textAreaId,
     rows,
     optional,
-    textAreaColor,
+    backgroundColor,
     labelColor,
     description,
     disabled,
@@ -49,7 +49,7 @@ const TextareaInput = _ref => {
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `y-${textAreaColor}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `y-${backgroundColor}`].filter(e => e).join(' '),
     style: style
     // {...otherProps}
   }, /*#__PURE__*/React.createElement(_common.FormLabel, {
@@ -112,9 +112,9 @@ TextareaInput.propTypes = {
    */
   rows: _propTypes.default.number,
   /**
-   * Text area base color
+   * Text area background color
    */
-  textAreaColor: _propTypes.default.string,
+  backgroundColor: _propTypes.default.string,
   /**
    * Label base color
    */
@@ -146,8 +146,8 @@ TextareaInput.propTypes = {
   optional: _propTypes.default.bool
 };
 TextareaInput.defaultProps = {
-  rows: 3,
-  textAreaColor: 'background2',
+  rows: 10,
+  backgroundColor: 'background-inputs',
   disabled: false,
   resize: 'vertical'
 };

package/dist/cjs/f/fields/TextareaInput/styles.scss

@@ -2,15 +2,17 @@
 
 @use "@pareto-engineering/bem";
 
-$default-padding: .5em;
+$default-padding: var(--theme-default-padding);
+$active-border-color: var(--on-y);
 
 .#{bem.$base}.text-area-input {
   display: flex;
   flex-direction: column;
 
   .textarea {
-    background: var(--soft-y);
-    border: var(--theme-border-style) var(--hard-y);
+    background: var(--y);
+    border: var(--theme-default-border-style) var(--hard-y);
+    border-radius: calc(var(--theme-default-border-radius) / 2);
     color: var(--on-y);
     padding: $default-padding;
 
@@ -19,7 +21,7 @@ $default-padding: .5em;
     }
 
     &:not(:disabled):hover {
-      border: var(--theme-border-style) var(--soft-background4);
+      border: var(--theme-default-border-style) $active-border-color;
     }
 
     &:disabled {
@@ -27,7 +29,7 @@ $default-padding: .5em;
     }
 
     &:focus {
-      background: var(--soft-background4);
+      border: var(--theme-default-border-style) $active-border-color;
     }
   }
 }

package/dist/cjs/form.scss

@@ -1,6 +1,6 @@
 @use "form-reset.scss";
 
-$form-input-border-bottom: 1px solid var(--hard-background1);
+$form-input-border-bottom: 1px solid var(--hard-background-far);
 $form-input-on-focus-border-bottom: 1px solid var(--soft-main1);
 $form-input-on-error-border-bottom: 1px solid var(--error);
 $label-input-heigth-width: 100%;

package/dist/es/a/AnimatedGradient/AnimatedGradient.js

@@ -47,6 +47,6 @@ AnimatedGradient.propTypes = {
   className: PropTypes.string
 };
 AnimatedGradient.defaultProps = {
-  // primaryColor:'black',
+  // primaryColor:'heading',
 };
 export default AnimatedGradient;

package/dist/es/a/People/common/Person/Person.js

@@ -66,6 +66,6 @@ Person.propTypes = {
   color: PropTypes.string
 };
 Person.defaultProps = {
-  color: 'background2'
+  color: 'background-far'
 };
 export default Person;

package/dist/es/a/Popover/Popover.js

@@ -98,7 +98,7 @@ Popover.propTypes = {
   })])
 };
 Popover.defaultProps = {
-  color: 'background1',
+  color: 'background-near',
   isOpen: false,
   preferredPrimaryOrder: ['bottom', 'top', 'right', 'left'],
   preferredSecondaryOrder: ['left', 'right', 'bottom', 'top'],

package/dist/es/a/Popover/styles.scss

@@ -2,7 +2,7 @@
 
 @use "@pareto-engineering/bem";
 
-$default-border: var(--theme-border-style) var(--metadata);
+$default-border: var(--theme-default-border-style) var(--metadata);
 
 .#{bem.$base}.popover {
   background-color: var(--x);

package/dist/es/a/TextSteps/TextSteps.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useLayoutEffect } from 'react';
+import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -18,7 +18,7 @@ const Steps = ({
   items,
   title
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/es/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js

@@ -53,7 +53,7 @@ const HorizontalMenu = ({
     attached: true,
     height: ".4em",
     color: color,
-    className: "y-background1 b-hard-y"
+    className: "y-background-far b-hard-y"
   }), /*#__PURE__*/React.createElement("div", {
     className: styleNames.elementContent
   }, /*#__PURE__*/React.createElement("div", {

package/dist/es/c/ContentSlides/styles.scss

@@ -16,8 +16,8 @@ $class-navigator:navigator;
 $default-sidebar-width:minmax(250px, 330px);
 $default-border:none;//2px solid var(--grid);
 $default-border-radius:var(--theme-border-radius);
-$default-content-background: var(--background1);
-$default-padding:var(--u);
+$default-content-background: var(--background-far);
+$default-padding:var(--theme-default-padding);
 
 $mobile-content-margin:6em;
 

package/dist/es/c/Modal/Modal.js

@@ -70,6 +70,6 @@ Modal.propTypes = {
   close: PropTypes.func
 };
 Modal.defaultProps = {
-  //
+  color: 'heading'
 };
 export default Modal;

package/dist/es/c/Modal/common/ModalHeader/ModalHeader.js

@@ -30,7 +30,7 @@ const ModalHeader = ({
   isCompact: true,
   className: "close-button"
 }, /*#__PURE__*/React.createElement("span", {
-  className: "f-icons"
+  className: "icon"
 }, "Y")));
 ModalHeader.propTypes = {
   /**

package/dist/es/c/Modal/styles.scss

@@ -3,7 +3,7 @@
 @use "@pareto-engineering/bem";
 @use "sass:math";
 
-$default-background: var(--background1);
+$default-background: var(--background-cards);
 /* stylelint-disable-next-line color-named -- needed for rgba function */
 $default-box-shadow: 0 10px 20px rgba(black, .2);
 $default-padding: math.div(1em, 2);
@@ -45,5 +45,9 @@ $default-min-width: 20em;
       margin: 0;
       padding: $default-padding;
     }
+
+    .close-button {
+      display: block;
+    }
   }
 }

package/dist/es/f/fields/QueryCombobox/QueryCombobox.js

@@ -195,7 +195,7 @@ QueryCombobox.defaultProps = {
     getLabel: node => node.name
   },
   multiple: false,
-  color: 'background2',
+  color: 'background-near',
   searchVariable: 'search',
   transformSearch: search => search,
   minLength: 2,

package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js

@@ -93,14 +93,14 @@ const Combobox = ({
     className: "input",
     disabled: disabled
   })), isFetching && /*#__PURE__*/React.createElement(LoadingCircle, {
-    className: "x-main2"
+    className: "x-main"
   }), inputValue.length > minLength && !isFetching && /*#__PURE__*/React.createElement(Button, {
     isSimple: true,
     isCompact: true,
-    color: "main2",
+    color: "heading",
     onClick: resetInputValue
   }, /*#__PURE__*/React.createElement("span", {
-    className: "f-icons"
+    className: "icon"
   }, "Y"))), /*#__PURE__*/React.createElement(Popover, {
     isOpen: isOpen,
     parentRef: parentRef

package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js

@@ -164,7 +164,7 @@ const MultipleCombobox = ({
   }, /*#__PURE__*/React.createElement("span", {
     className: "v25 mr-v"
   }, selectedItem.label), /*#__PURE__*/React.createElement("span", {
-    className: "f-icons close"
+    className: "icon close"
   }, "Y"))))), /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(), {
     className: "input-wrapper"
   }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(getDropdownProps({
@@ -180,7 +180,7 @@ const MultipleCombobox = ({
     color: "main2",
     onClick: resetInputValue
   }, /*#__PURE__*/React.createElement("span", {
-    className: "f-icons"
+    className: "icon"
   }, "Y"))), /*#__PURE__*/React.createElement(Popover, {
     isOpen: isOpen,
     parentRef: parentRef

package/dist/es/f/fields/QueryCombobox/styles.scss

@@ -7,7 +7,7 @@ $default-input-padding: .75em .75em .55em;
 $default-padding: 1em;
 $default-margin: 1em;
 $default-gap: 1em;
-$default-loading-circle-displacement: 1em;
+$default-loading-circle-displacement: .5em;
 
 .#{bem.$base}.combobox,
 .#{bem.$base}.multiple-combobox {
@@ -30,7 +30,7 @@ $default-loading-circle-displacement: 1em;
         padding: math.div($default-padding, 2);
 
         &.#{bem.$modifier-active} {
-          background-color: var(--background2);
+          background-color: var(--hard-y);
         }
       }
     }
@@ -42,13 +42,14 @@ $default-loading-circle-displacement: 1em;
     >.#{bem.$base}.loading-circle,
     >.#{bem.$base}.button {
       position: absolute;
-      right: $default-loading-circle-displacement;
+      right: calc(2 * $default-loading-circle-displacement);
       top: $default-loading-circle-displacement;
     }
 
     >.input {
       background: var(--soft-y);
-      border: var(--theme-border-style) var(--hard-y);
+      border: var(--theme-default-border-style) var(--hard-y);
+      border-radius: calc(var(--theme-default-border-radius) / 2);
       color: var(--on-y);
       padding: $default-input-padding;
       width: 100%;
@@ -58,7 +59,7 @@ $default-loading-circle-displacement: 1em;
       }
 
       &:not(:disabled):hover {
-        border: var(--theme-border-style) var(--soft-background4);
+        border: var(--theme-default-border-style) var(--hard-y);
       }
 
       &:disabled {
@@ -66,7 +67,7 @@ $default-loading-circle-displacement: 1em;
       }
 
       &:focus {
-        background: var(--soft-background4);
+        border: var(--theme-default-border-style) var(--hard-y);
       }
     }
   }
@@ -81,7 +82,7 @@ $default-loading-circle-displacement: 1em;
     margin-bottom: math.div($default-margin, 2);
 
     >.item {
-      background-color: var(--main2);
+      background-color: var(--main);
       padding: math.div($default-padding, 4);
 
       .close {

package/dist/es/f/fields/QuerySelect/QuerySelect.js

@@ -165,7 +165,7 @@ QuerySelect.propTypes = {
 };
 QuerySelect.defaultProps = {
   disabled: false,
-  color: 'background2',
+  color: 'background-far',
   defaultOption: {
     value: '',
     label: 'Select an option',

package/dist/es/f/fields/RatingsInput/common/Rating/Rating.js

@@ -43,7 +43,7 @@ const Rating = ({
   }, showRatingValue && /*#__PURE__*/React.createElement("span", {
     className: "v25 mb-v md-s-1 s-2 x-metadata c-x"
   }, value), /*#__PURE__*/React.createElement("span", {
-    className: ['f-icons', value <= (hover || Number(field.value)) ? 'c-x' : 'c-hard-y'].filter(e => e).join(' ')
+    className: ['icon', value <= (hover || Number(field.value)) ? 'c-x' : 'c-hard-y'].filter(e => e).join(' ')
   }, "[")), /*#__PURE__*/React.createElement("input", _extends({}, field, {
     type: "radio",
     id: ratingId,
@@ -102,8 +102,8 @@ Rating.propTypes = {
   validate: PropTypes.func
 };
 Rating.defaultProps = {
-  activeBackgroundColor: 'main1',
-  inactiveBackgroundColor: 'background2',
+  activeBackgroundColor: 'main',
+  inactiveBackgroundColor: 'background-far',
   showRatingValue: false
 };
 export default Rating;

package/dist/es/f/fields/TextInput/TextInput.js

@@ -139,7 +139,7 @@ TextInput.propTypes = {
 };
 TextInput.defaultProps = {
   type: 'text',
-  color: 'background2',
+  color: 'main',
   disabled: false
 };
 export default /*#__PURE__*/memo(TextInput);