[FRNT-476] Implement secondary variant

src/lib/box-styles.tsx

@@ -56,23 +56,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,35 @@ 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="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/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
+
 import { InputContainer, InputElement } from '../../elements/quarks';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -52,12 +53,11 @@ export const Input = styled(InputBase)`
   --local-horizontal: calc(
     var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
   );
-  
+
   box-sizing: border-box;
   width: 100%;
 
   &[data-disabled='true'] {
     pointer-events: none;
   }
-
 ` as StyledComponent<'div', Record<string, unknown>, InputProps & Variant>;

src/ui/atoms/input/usage.mdx

@@ -14,14 +14,14 @@ import { ButtonIcon } from '../../atoms';
 `Input` is a field to accept data from the user. Input is used to create form fields that accept user input.
 They typically appear in forms and dialogs.
 
-Inputs requiring certain data formats such as numbers, e-mail addresses or passwords are declared accordingly. 
+Inputs requiring certain data formats such as numbers, e-mail addresses or passwords are declared accordingly.
 This makes it easier for the user to enter information using a virtual keyboard.
 
 When a input is active or contains an error, the input’s border color and thickness vary.
 
 ## Placeholder text (Hint text)
 
-Placeholder text rests in the input field until the user starts entering text. 
+Placeholder text rests in the input field until the user starts entering text.
 It may contain an action or an example, such as a phone number or email address.
 
 ## Helper text
@@ -35,10 +35,9 @@ Specs:
 - Left justified
 - On a single line if possible, or with text wrapping (if multiple lines)
 
-
 ## Error message
 
-When input isn’t accepted, text fields can display an error message below the input line, with instructions on how to fix the error. 
+When input isn’t accepted, text fields can display an error message below the input line, with instructions on how to fix the error.
 Until the error is fixed, the error replaces the helper text.
 
 An error message should appear on a single line, if possible.
@@ -52,7 +51,6 @@ Specs:
 - Right justified
 - Displayed as a ratio of characters used and the character limit (formatted as: characters used / character limit)
 
-
 ### Example
 
 <Playground>
@@ -69,7 +67,7 @@ Specs:
 
 Disabled text fields are uneditable. They have less opacity so that they appear less tappable.
 
-<Playground direction='vertical'>
+<Playground direction="vertical">
   <Input
     disabled
     name="name"
@@ -89,7 +87,7 @@ Disabled text fields are uneditable. They have less opacity so that they appear
   />
 </Playground>
 
-### Icons 
+### Icons
 
 Inputs can be combined with an icon on the left side or the right. Use icons on the both sides is not recommended.
 
@@ -121,10 +119,10 @@ Inputs can be combined with an icon on the left side or the right. Use icons on
   />
 </Playground>
 
-Icons can also be touch targets for nested components. 
+Icons can also be touch targets for nested components.
 
 <Playground size="L" direction="vertical">
-  <Input 
+  <Input
     rightIcon={
       <block.S>
         <ButtonIcon
@@ -140,7 +138,7 @@ Icons can also be touch targets for nested components.
     onChange={(event) => console.info('On input change')}
     variant="primary"
   />
-  <Input 
+  <Input
     leftIcon={<InfoIcon />}
     type="text"
     name="name"
@@ -161,10 +159,9 @@ 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'>
+<Playground direction="vertical">
   <Input
     leftIcon={<InfoIcon />}
     name="name"
@@ -178,24 +175,23 @@ 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>
 
@@ -211,7 +207,7 @@ Size controlled by the `component-level` block property not from the props.
       placeholder="Enter your name here"
       type="text"
       variant="primary"
-  />
+    />
   </block.S>
   <block.M>
     <Input
@@ -220,7 +216,7 @@ Size controlled by the `component-level` block property not from the props.
       placeholder="Enter your name here"
       type="text"
       variant="primary"
-  />
+    />
   </block.M>
   <block.L>
     <Input
@@ -229,7 +225,7 @@ Size controlled by the `component-level` block property not from the props.
       placeholder="Enter your name here"
       type="text"
       variant="primary"
-  />
+    />
   </block.L>
   <block.XL>
     <Input
@@ -238,7 +234,7 @@ Size controlled by the `component-level` block property not from the props.
       placeholder="Enter your name here"
       type="text"
       variant="primary"
-  />
+    />
   </block.XL>
   <block.H>
     <Input
@@ -247,7 +243,7 @@ Size controlled by the `component-level` block property not from the props.
       placeholder="Enter your name here"
       type="text"
       variant="primary"
-  />
+    />
   </block.H>
 </Playground>
 
@@ -265,10 +261,10 @@ Inputs can be placed inside the container. Input width is equal to container siz
       placeholder="Enter your name here"
       variant="primary"
       onChange={(event) => console.info('On input change')}
-  />
+    />
   </block.L>
   <block.L>
-    <Input 
+    <Input
       leftIcon={<InfoIcon />}
       type="text"
       name="name"
@@ -288,7 +284,6 @@ Inputs can be placed inside the container. Input width is equal to container siz
   </block.L>
 </Playground>
 
-
 ### Kinds
 
 | Name    | Description                              |

src/ui/atoms/label/index.tsx

@@ -11,7 +11,9 @@ const map = (properties: LabelProps & Variant) => ({
 
 export const Label = styled.label.attrs(map)`
   --local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
-  --local-horizontal: calc(var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical));
+  --local-horizontal: calc(
+    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
+  );
 
   --local-color: var(--woly-canvas-text-default);
 

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

@@ -26,7 +26,7 @@ TextArea is often used in a form, to collect user inputs like comments or review
 
 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>