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

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

@@ -26,7 +26,7 @@ const TextareaInput = ({
   textAreaId,
   rows,
   optional,
-  textAreaColor,
+  backgroundColor,
   labelColor,
   description,
   disabled,
@@ -44,7 +44,7 @@ const TextareaInput = ({
   });
   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(FormLabel, {
@@ -107,9 +107,9 @@ TextareaInput.propTypes = {
    */
   rows: PropTypes.number,
   /**
-   * Text area base color
+   * Text area background color
    */
-  textAreaColor: PropTypes.string,
+  backgroundColor: PropTypes.string,
   /**
    * Label base color
    */
@@ -141,8 +141,8 @@ TextareaInput.propTypes = {
   optional: PropTypes.bool
 };
 TextareaInput.defaultProps = {
-  rows: 3,
-  textAreaColor: 'background2',
+  rows: 10,
+  backgroundColor: 'background-inputs',
   disabled: false,
   resize: 'vertical'
 };

package/dist/es/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/es/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.28",
+  "version": "4.0.0-alpha.33",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -50,10 +50,10 @@
     "style-loader": "^3.3.2"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^4.0.0-alpha.23",
+    "@pareto-engineering/assets": "^4.0.0-alpha.30",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
-    "@pareto-engineering/styles": "^4.0.0-alpha.28",
-    "@pareto-engineering/utils": "^4.0.0-alpha.23",
+    "@pareto-engineering/styles": "^4.0.0-alpha.33",
+    "@pareto-engineering/utils": "^4.0.0-alpha.33",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
     "formik": "^2.2.9",
@@ -68,5 +68,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "3a69e7d2babf453e986f32ebaa15f7120043813b"
+  "gitHead": "8b9715a0ff07606c7058594844b43eadef695993"
 }

package/src/stories/a/People.stories.jsx

@@ -40,7 +40,7 @@ export const Base = () => {
   ]
 
   return (
-    <div className="x-background1 b-x v1 p-v">
+    <div className="x-background-far b-x v1 p-v">
       <People>
         {peopleMap.map((person) => (
           <People.Person key={person.name} {...person} />
@@ -61,7 +61,7 @@ export const OnePerson = () => {
   ]
 
   return (
-    <div className="x-background1 b-x v1 p-v">
+    <div className="x-background-far b-x v1 p-v">
       <People>
         {peopleMap.map((person) => (
           <People.Person key={person.name} {...person} />

package/src/stories/a/Quote.stories.jsx

@@ -18,7 +18,7 @@ export default {
 }
 
 export const Base = () => (
-  <div className="y-background1 b-y u1 p-u">
+  <div className="y-background-far b-y u1 p-u">
     <Quote
       author="Austen Spoonts"
     >

package/src/stories/a/SnapScroller.stories.jsx

@@ -23,7 +23,7 @@ export const Base = () => {
     <div
       className="card"
       style={{
-        background:'var(--background1)', minWidth:'330px', height:'400px', padding:'var(--u)',
+        background:'var(--background-far)', minWidth:'330px', height:'400px', padding:'var(--u)',
       }}
     >
       { children }
@@ -63,7 +63,7 @@ export const NoScrollOnDesktop = () => {
     <div
       className="card"
       style={{
-        background:'var(--background1)', width:'330px', height:'400px', padding:'var(--u)',
+        background:'var(--background-far)', width:'330px', height:'400px', padding:'var(--u)',
       }}
     >
       { children }

package/src/stories/a/Spinner.stories.jsx

@@ -18,7 +18,7 @@ export default {
 }
 
 export const Base = () => (
-  <div className="y-background1 b-y">
+  <div className="y-background-far b-y">
 
     <Spinner />
   </div>

package/src/stories/b/ThemeSelector.stories.jsx

@@ -35,7 +35,7 @@ export const Base = () => {
         className={
          [
            `ui-${userTheme}`,
-           'y-background1 b-y',
+           'y-background-far b-y',
          ].filter((e) => e).join(' ')
        }
       >

package/src/stories/b/Title.stories.jsx

@@ -34,7 +34,7 @@ WithSubtitle.args = {
 export const Sizes = (props) => (
   ['h1', 'h2', 'h3', 'h4', 'h5'].map((size) => (
     <div className="u2 pv-u" key={size}>
-      <div className="y-background2 b-hard-y">
+      <div className="y-background-far b-hard-y">
         <Title
           heading={`This is a title in ${size}`}
           headingAs={size}

package/src/stories/c/ContentSlides.stories.jsx

@@ -76,7 +76,7 @@ const Template = (args) => {
 
     return (
       <div className={`ui-${userTheme}`} style={{ height: '100%' }}>
-        <ContentSlides className="y-background1 b-dark-y" steps={steps} simple={isSimple}>
+        <ContentSlides className="y-background-far b-dark-y" steps={steps} simple={isSimple}>
           {!isSimple && (
           <ContentSlides.Sidebar
             header={(

package/src/ui/a/AnimatedGradient/AnimatedGradient.jsx

@@ -67,7 +67,7 @@ AnimatedGradient.propTypes = {
 }
 
 AnimatedGradient.defaultProps = {
-  // primaryColor:'black',
+  // primaryColor:'heading',
 }
 
 export default AnimatedGradient

package/src/ui/a/People/common/Person/Person.jsx

@@ -81,7 +81,7 @@ Person.propTypes = {
 }
 
 Person.defaultProps = {
-  color:'background2',
+  color:'background-far',
 }
 
 export default Person

package/src/ui/a/Popover/Popover.jsx

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

package/src/ui/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/src/ui/a/TextSteps/TextSteps.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { useLayoutEffect } from 'react'
+import { useInsertionEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -22,7 +22,7 @@ const Steps = ({
   items,
   title,
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.jsx

@@ -60,7 +60,7 @@ const HorizontalMenu = ({
     >
       {
         (currentStep?.progress > 0)
-      && <ProgressBar progress={currentStep.progress} attached height=".4em" color={color} className="y-background1 b-hard-y" />
+      && <ProgressBar progress={currentStep.progress} attached height=".4em" color={color} className="y-background-far b-hard-y" />
       }
       <div className={styleNames.elementContent}>
         <div className="left">

package/src/ui/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/src/ui/c/Modal/Modal.jsx

@@ -95,7 +95,7 @@ Modal.propTypes = {
 }
 
 Modal.defaultProps = {
-  //
+  color:'heading',
 }
 
 export default Modal

package/src/ui/c/Modal/common/ModalHeader/ModalHeader.jsx

@@ -43,7 +43,7 @@ const ModalHeader = ({
       isCompact
       className="close-button"
     >
-      <span className="f-icons">
+      <span className="icon">
         Y
       </span>
     </Button>

package/src/ui/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/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx

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

package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx

@@ -115,11 +115,11 @@ const Combobox = ({
       <div {...getComboboxProps()} className="input-wrapper">
         <input {...getInputProps()} className="input" disabled={disabled} />
         {isFetching && (
-        <LoadingCircle className="x-main2" />
+        <LoadingCircle className="x-main" />
         )}
         {inputValue.length > minLength && !isFetching && (
-          <Button isSimple isCompact color="main2" onClick={resetInputValue}>
-            <span className="f-icons">
+          <Button isSimple isCompact color="heading" onClick={resetInputValue}>
+            <span className="icon">
               Y
             </span>
           </Button>

package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.jsx

@@ -191,7 +191,7 @@ const MultipleCombobox = ({
               color={color}
             >
               <span className="v25 mr-v">{selectedItem.label}</span>
-              <span className="f-icons close">Y</span>
+              <span className="icon close">Y</span>
             </Button>
           </div>
         ))}
@@ -215,7 +215,7 @@ const MultipleCombobox = ({
             color="main2"
             onClick={resetInputValue}
           >
-            <span className="f-icons">
+            <span className="icon">
               Y
             </span>
           </Button>

package/src/ui/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/src/ui/f/fields/QuerySelect/QuerySelect.jsx

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

package/src/ui/f/fields/RatingsInput/common/Rating/Rating.jsx

@@ -59,7 +59,7 @@ const Rating = ({
         )}
         <span
           className={[
-            'f-icons',
+            'icon',
             value <= (hover || Number(field.value)) ? 'c-x' : 'c-hard-y',
           ]
             .filter((e) => e)
@@ -134,8 +134,8 @@ Rating.propTypes = {
 }
 
 Rating.defaultProps = {
-  activeBackgroundColor  :'main1',
-  inactiveBackgroundColor:'background2',
+  activeBackgroundColor  :'main',
+  inactiveBackgroundColor:'background-far',
   showRatingValue        :false,
 }
 

package/src/ui/f/fields/TextInput/TextInput.jsx

@@ -186,7 +186,7 @@ TextInput.propTypes = {
 
 TextInput.defaultProps = {
   type    :'text',
-  color   :'background2',
+  color   :'main',
   disabled:false,
 }
 

package/src/ui/f/fields/TextareaInput/TextareaInput.jsx

@@ -31,7 +31,7 @@ const TextareaInput = ({
   textAreaId,
   rows,
   optional,
-  textAreaColor,
+  backgroundColor,
   labelColor,
   description,
   disabled,
@@ -55,7 +55,7 @@ const TextareaInput = ({
 
         componentClassName,
         userClassName,
-        `y-${textAreaColor}`,
+        `y-${backgroundColor}`,
       ]
         .filter((e) => e)
         .join(' ')}
@@ -136,9 +136,9 @@ TextareaInput.propTypes = {
   rows:PropTypes.number,
 
   /**
-   * Text area base color
+   * Text area background color
    */
-  textAreaColor:PropTypes.string,
+  backgroundColor:PropTypes.string,
 
   /**
    * Label base color
@@ -178,10 +178,10 @@ TextareaInput.propTypes = {
 }
 
 TextareaInput.defaultProps = {
-  rows         :3,
-  textAreaColor:'background2',
-  disabled     :false,
-  resize       :'vertical',
+  rows           :10,
+  backgroundColor:'background-inputs',
+  disabled       :false,
+  resize         :'vertical',
 }
 
 export default memo(TextareaInput)

package/src/ui/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/src/ui/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%;