@pareto-engineering/design-system 4.0.0-alpha.3 → 4.0.0-alpha.34

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useLayoutEffect, memo } from 'react'
+import { useInsertionEffect, memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -31,7 +31,7 @@ const TextareaInput = ({
   textAreaId,
   rows,
   optional,
-  textAreaColor,
+  backgroundColor,
   labelColor,
   description,
   disabled,
@@ -40,7 +40,7 @@ const TextareaInput = ({
   resize,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 
@@ -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%;