[FRNT-476] Implement secondary variant

src/lib/box-styles.tsx

@@ -51,23 +51,25 @@ export const Global = styled.div`
   }
 
   [data-variant='secondary'] {
-    --woly-border-width: 1.5px;
-
-    --woly-background: #ffffff;
-    --woly-border: #b0a3f4;
-    --woly-color: #b0a3f4;
-    --woly-hint-color: #c4c4c4;
-    --woly-background-hover: #ffffff;
-    --woly-border-hover: #c9c0f8;
-    --woly-color-hover: #c9c0f8;
-    --woly-background-focus: #ffffff;
-    --woly-border-focus: #9381f1;
-    --woly-color-focus: #9381f1;
-    --woly-background-disabled: #c0c0c0;
-    --woly-border-disabled: #c0c0c0;
-    --woly-color-disabled: #a39bb2;
-    --woly-text-disabled: #e4e4e4;
-    --woly-fill-disabled: #e4e4e4;
+    --woly-shape-default: var(--palette-snow-500);
+    --woly-shape-disabled: var(--palette-snow-100);
+    --woly-shape-hover: var(--palette-snow-500);
+    --woly-shape-active: var(--palette-snow-500);
+
+    --woly-shape-text-default: var(--palette-snow-0);
+    --woly-shape-text-disabled: var(--palette-snow-0);
+    --woly-shape-text-hover: var(--palette-snow-0);
+    --woly-shape-text-active: var(--palette-snow-0);
+
+    --woly-canvas-default: transparent;
+    --woly-canvas-disabled: var(--palette-snow-100);
+    --woly-canvas-hover: var(--palette-snow-500);
+    --woly-canvas-active: var(--palette-snow-500);
+
+    --woly-canvas-text-default: var(--palette-snow-1000);
+    --woly-canvas-text-disabled: var(--palette-snow-500);
+    --woly-canvas-text-hover: var(--palette-snow-500);
+    --woly-canvas-text-active: var(--palette-snow-500);
   }
   [data-variant='danger'] {
     --woly-shape-default: var(--woly-danger);

src/ui/atoms/button-icon/usage.mdx

@@ -6,7 +6,7 @@ package: 'woly'
 
 import { Playground } from 'box-styles'
 import { OpenedEyeIcon, SearchIcon } from 'icons';
-import {Chip, ButtonIcon} from 'ui';
+import {ButtonIcon} from 'ui';
 
 `ButtonIcon` is a button with an icon
 
@@ -111,6 +111,36 @@ import {Chip, ButtonIcon} from 'ui';
   </block.S>
 </Playground>
 
+### Variants
+
+Secondary and error variant should be used to focus user attention.
+
+<Playground>
+  <ButtonIcon
+      icon={<SearchIcon />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      variant="secondary"
+    />
+    <ButtonIcon
+      icon={<SearchIcon />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      variant="secondary"
+      filled
+    />
+    <ButtonIcon
+      icon={<SearchIcon />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      variant="danger"
+    />
+    <ButtonIcon
+      icon={<SearchIcon />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      variant="danger"
+      filled
+    />
+</Playground>
+
+
 ### Kinds
 
 | Name         | Description              |

src/ui/atoms/button/usage.mdx

@@ -30,11 +30,19 @@ import { PlusIcon, SearchIcon } from 'icons';
 
 ### Variants
 
-Primary and secondary variants are should be used to focus user attention.
+Primary and danger variants are should be used to focus user attention.
 
 <Playground>
   <Button text="The main action on the page" variant="primary" />
-  <Button text="Alternative action" variant="secondary" />
+  <Button text="Alternative action" variant="danger" outlined/>
+  <Button text="Alternative action" variant="danger" />
+</Playground>
+
+Secondary variant should be used as a default variant.
+
+<Playground>
+  <Button text="Alternative action" variant="secondary"/>
+  <Button text="Alternative action" variant="secondary" outlined/>
 </Playground>
 
 ### Icons

src/ui/atoms/input/usage.mdx

@@ -161,8 +161,7 @@ Icons can also be touch targets for nested components.
 
 ### Variants
 
-Primary and secondary variants are should be used to focus user attention.
-<!-- example for secondary variant will be fixed with task FRNT-477 -->
+Primary and danger variants are should be used to focus user attention.
 
 <Playground direction='vertical'>
   <Input
@@ -178,24 +177,24 @@ Primary and secondary variants are should be used to focus user attention.
     leftIcon={<InfoIcon />}
     type="text"
     name="name"
-    value="Secondary"
-    placeholder="Secondary input"
-    variant="secondary"
+    placeholder="Error input"
+    value="Error input"
+    variant="danger"
     onChange={(event) => console.info('On input change')}
   />
 </Playground>
 
 
-Error variant can be used to focus user attention on error.
+Secondary variant should be used as a default variant.
 
 <Playground>
   <Input
     leftIcon={<InfoIcon />}
     name="name"
     onChange={(event) => console.info('On input change')}
-    placeholder="Error input"
+    placeholder="Secondary input"
+    variant="secondary"
     type="text"
-    variant="danger"
   />
 </Playground>
 

src/ui/atoms/text-area/index.tsx

@@ -49,33 +49,11 @@ const TextAreaBase: React.FC<TextAreaProps & Variant> = ({
 
   const tabIndex = disabled ? -1 : 0;
 
-  const onKeyDown = React.useCallback(
-    (event: React.KeyboardEvent) => {
-      console.log(1);
-
-      if (event.key === 'Enter') {
-        event.preventDefault();
-      }
-      const keyHandler = {
-        enter: (event: React.SyntheticEvent<Element, Event>) => {
-          onChange(event);
-        },
-      };
-
-      keyboardEventHandle({
-        event,
-        keyHandler,
-      });
-    },
-    [onChange],
-  );
-
   return (
     <div
       className={className}
       data-disabled={disabled}
       data-variant={variant}
-      onKeyDown={onKeyDown}
       tabIndex={tabIndex}
       data-overflow={overflow}
       data-resize={resize}

src/ui/atoms/text-area/usage.mdx

@@ -18,15 +18,15 @@ TextArea is often used in a form, to collect user inputs like comments or review
     name="name"
     placeholder="Simple text-area"
     onChange={() => console.info('On textarea change')}
-    variant="default"
+    variant="secondary"
   />
 </Playground>
 
 ## Variants
 
 Primary and danger variants are should be used to focus user attention.
 
-<Playground>
+<Playground direction="vertical">
   <TextArea
     name="name"
     placeholder="Primary"
@@ -35,20 +35,21 @@ Primary and danger variants are should be used to focus user attention.
   />
   <TextArea
     name="name"
-    placeholder="Secondary"
+    placeholder="Error"
+    value="Error"
     onChange={() => console.info('On textarea change')}
-    variant="secondary"
+    variant="danger"
   />
 </Playground>
 
-Error variant focus user attention on error.
+Secondary variant should be used as a default variant.
 
 <Playground>
   <TextArea
     name="name"
     placeholder="Primary"
     onChange={() => console.info('On textarea change')}
-    variant="danger"
+    variant="secondary"
   />
 </Playground>
 

src/ui/molecules/field/usage.mdx

@@ -55,7 +55,7 @@ or also as a label of group of component, eg checkbox or radiobutton groups.
       onChange={() => console.info('On textarea change')}
       variant="primary"
       overflow="hidden"
-      isDisabled
+      disabled
     />
   </Field>
   <Field label="Label for input">
@@ -68,7 +68,7 @@ or also as a label of group of component, eg checkbox or radiobutton groups.
       variant="primary"
     />
   </Field>
-</Playground>{' '}
+</Playground>
 
 Labels and children component can be replaced in row
 
@@ -114,6 +114,41 @@ or in column variants
 
 ### Variants 
 
+Secondary variant  should be used as a default variarnt.
+
+<Playground direction="vertical">
+  <Field label="Default textarea" variant="danger">
+    <TextArea
+      name="name"
+      placeholder="TextArea"
+      onChange={() => console.info('On textarea change')}
+      variant="secondary"
+      overflow="hidden"
+      disabled
+    />
+  </Field>
+  <Field label="Default input" variant="danger">
+    <Input
+      variant="secondary"
+      name="name"
+      onChange={(event) => console.info('On input change')}
+      placeholder="Placeholder"
+      type="text"
+    />
+  </Field>
+  <State initial={false} change={(i) => !i}>
+    {(value, change) => (
+      <Field label="Default switch">
+        <Switch
+          isChecked={value}
+          onChange={change}
+          id="roundOne"
+          variant="secondary"/>
+      </Field>
+    )}
+  </State>
+</Playground>
+
 Error variant can be used to focus user attention on error.
 
 <Playground direction="vertical">
@@ -124,7 +159,7 @@ Error variant can be used to focus user attention on error.
       onChange={() => console.info('On textarea change')}
       variant="danger"
       overflow="hidden"
-      isDisabled
+      disabled
     />
   </Field>
   <Field label="Input with error" variant="danger">

src/ui/molecules/input-password/usage.mdx

@@ -46,8 +46,7 @@ Disabled text fields are uneditable. They have less opacity so that they appear
 
 ### Variants
 
-Primary and secondary variants are should be used to focus user attention.
-<!-- example for secondary variant will be fixed with task FRNT-476 -->
+Primary and danger variants are should be used to focus user attention.
 
 <Playground direction="vertical">
   <State initial={false} change={(i) => !i}>
@@ -68,13 +67,13 @@ Primary and secondary variants are should be used to focus user attention.
         name="name"
         placeholder="Enter password"
         onChange={(event) => console.info('On input change')}
-        variant="secondary"
+        variant="danger"
       />
     )}
   </State>
 </Playground>
 
-Error variant can be used to focus user attention on error.
+Secondary variant should be used as a default variant.
 
 <Playground direction="vertical">
   <State initial={false} change={(i) => !i}>
@@ -84,7 +83,7 @@ Error variant can be used to focus user attention on error.
         name="name"
         placeholder="Enter password"
         onChange={(event) => console.info('On input change')}
-        variant="danger"
+        variant="secondary"
       />
     )}
   </State>

src/ui/molecules/select/index.tsx

@@ -126,7 +126,10 @@ export const Select = styled(SelectBase)`
   cursor: pointer;
   &:focus > div[data-selected],
   &:active > div[data-selected] {
-    border-color: var(--woly-background-focus, #1f68f5);
+
+    --local-border-color: var(--woly-focus);
+    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
+
     color: var(--woly-color-focus, #000000);
     svg > path {
       fill: var(--woly-color-focus, #c4c4c4);
@@ -145,7 +148,7 @@ export const Select = styled(SelectBase)`
     }
     div[data-selected] {
       background: var(--woly-background-disabled, #ffffff);
-      border-color: var(--woly-border-disabled, var(--woly-background-disabled, #c4c4c4));
+      border: var(--woly-border-width) solid var(--local-border-color);
       color: var(--woly-color-disabled, #c4c4c4);
     }
   }