[FRNT-444] Rewrite checkbox styles (#81)

src/lib/box-styles.tsx

@@ -4,9 +4,15 @@ import styled from 'styled-components';
 export const Global = styled.div`
   --palette-snow-1000: #000000;
   --palette-snow-500: #c0c0c0;
+  --palette-snow-300: #e5e5e5;
   --palette-snow-100: #f5f5f5;
   --palette-snow-0: #ffffff;
+
   --palette-lavender-500: #9381f1;
+  --palette-lavender-300: #b0a3f4;
+  --palette-lavender-100: #c9c0f8;
+
+  --palette-dawn-300: #ff9097;
 
   /* should be rewritten to formulas */
   --woly-line-height: 24px;
@@ -18,14 +24,14 @@ export const Global = styled.div`
   --woly-main-level: 3;
 
   --woly-neutral: var(--palette-snow-500);
-  --woly-focus: #9381f1;
-  --woly-background: #ffffff;
-
+  --woly-focus: var(--palette-lavender-500);
+  --woly-background: var(--palette-snow-0);
+  
   [data-variant='primary'] {
-    --woly-shape-default: #b0a3f4;
-    --woly-shape-disabled: #e5e5e5;
-    --woly-shape-hover: #c9c0f8;
-    --woly-shape-active: #b0a3f4;
+    --woly-shape-default: var(--palette-lavender-300);
+    --woly-shape-disabled: var(--palette-snow-300);
+    --woly-shape-hover: var(--palette-lavender-100);
+    --woly-shape-active: var(--palette-lavender-300);
 
     --woly-shape-text-default: var(--palette-snow-0);
     --woly-shape-text-disabled: var(--palette-snow-0);
@@ -59,8 +65,8 @@ export const Global = styled.div`
     --woly-background-disabled: #c0c0c0;
     --woly-border-disabled: #c0c0c0;
     --woly-color-disabled: #a39bb2;
-
-    --woly-label-color: #ffffff;
+    --woly-text-disabled: #e4e4e4;
+    --woly-fill-disabled: #e4e4e4;
   }
   [data-variant='error'] {
     --woly-border-width: 1.5px;
@@ -74,9 +80,6 @@ export const Global = styled.div`
     --woly-border-focus: #eb5656;
     --woly-error-text: #eb5656;
     --woly-hint-color: #ff9097;
-    --woly-background-disabled: #c0c0c0;
-    --woly-border-disabled: #c0c0c0;
-    --woly-color-disabled: #a39bb2;
   }
 `;
 

src/lib/index.ts

@@ -1,3 +1,4 @@
 export { positionRelativeGet } from './position-relative';
 export { keyboardEventHandle } from './keyboard-event';
 export { keyHandlerGet } from './select-handlers';
+export { Variant } from './types';

src/ui/atoms/header-panel/index.tsx

@@ -12,12 +12,17 @@ export const HeaderPanel = styled.div.attrs(map)`
   height: 100%;
   width: 100%;
 
-  padding: var(--woly-padding, 12px);
+  --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)
+  );
 
-  background-color: var(--woly-canvas, #ffffff);
-  border-color: var(--woly-border, #000000);
-  border-style: solid;
-  border-width: var(--woly-border-width, 0);
-  border-radius: var(--woly-rounding, 3px);
-  box-shadow: var(--woly-box-shadow, 3px 3px 9px rgba(57, 57, 57, 0.12));
+  --local-box-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
+  
+  padding: var(--local-vertical) var(--local-horizontal);
+
+  background-color: var(--woly-background);
+  border: var(--woly-border-width) solid var(--woly-background);
+  border-radius: var(--woly-rounding);
+  box-shadow: var(--local-box-shadow);
 `;

src/ui/atoms/label/usage.mdx

@@ -29,7 +29,7 @@ This increased hit area provides an advantage to anyone trying to activate the i
 Error variant can be used to focus user attention on error.
 
 <Playground>
-  <Label variant="error">Error label</Label>
+  <Label variant="danger">Error label</Label>
 </Playground>
 
 ### Kinds

src/ui/atoms/text/usage.mdx

@@ -37,7 +37,7 @@ Text component is used as a simple text or a hint/error message for Input or Tex
 ### Example
 
 <Playground direction="vertical">
-  <Text variant="error" type="hint">
+  <Text variant="danger" type="hint">
     ! Fix examples below after inserting text inside Input or TextArea
   </Text>
 </Playground>
@@ -68,9 +68,9 @@ Error variant can be used to focus user attention on error.
     placeholder="Enter your name here"
     type="text"
     value="Hi"
-    variant="error"
+    variant="danger"
   />
-  <Text variant="error" type="hint">
+  <Text variant="danger" type="hint">
     Error text
   </Text>
 </Playground>

src/ui/molecules/checkbox/index.tsx

@@ -1,91 +1,157 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { CheckIcon, UnCheckIcon } from 'icons';
-import { Variant } from 'lib/types';
+import { Variant, keyboardEventHandle } from 'lib';
 
 interface CheckboxProps {
   className?: string;
   disabled?: boolean;
   id: string;
-  isChecked: boolean;
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  checked: boolean;
+  onChange: React.EventHandler<React.SyntheticEvent>;
   text?: string;
 }
 
 const CheckboxBase: React.FC<CheckboxProps & Variant> = ({
   className,
   disabled,
   id,
-  isChecked,
+  checked,
   onChange,
   text,
   variant = 'default',
-}) => (
-  <label htmlFor={id} className={className} data-variant={variant}>
-    <span data-block="container" data-disabled={disabled}>
-      <input type="checkbox" id={id} checked={isChecked} onChange={onChange} />
-      <span data-checkmark="unchecked">
-        <UnCheckIcon />
-      </span>
-      <span data-checkmark="checked">
-        <CheckIcon />
+}) => {
+  const tabIndex = disabled ? -1 : 0;
+
+  const onKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+      }
+      const keyHandler = {
+        enter: (event: React.SyntheticEvent<Element, Event>) => {
+          onChange(event);
+        },
+      };
+
+      keyboardEventHandle({
+        event,
+        keyHandler,
+      });
+    },
+    [onChange],
+  );
+
+  return (
+    <label
+      htmlFor={id}
+      className={className}
+      data-variant={variant}
+      onKeyDown={onKeyDown}
+      tabIndex={tabIndex}
+    >
+      <span data-block="container" data-disabled={disabled} tabIndex={-1}>
+        <input type="checkbox" id={id} checked={checked} onChange={onChange} />
+        <span data-checkmark="unchecked">
+          <UnCheckIcon />
+        </span>
+        <span data-checkmark="checked">
+          <CheckIcon />
+        </span>
+        {text && <span data-block="text">{text}</span>}
       </span>
-      {text && <span data-block="text">{text}</span>}
-    </span>
-  </label>
-);
+    </label>
+  );
+};
 
 export const Checkbox = styled(CheckboxBase)`
-  --woly-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
-  --woly-horizontal: calc(
-    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--woly-vertical)
+  --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)
   );
-  --woly-gap: calc(
+  --local-gap: calc(
     (1px * var(--woly-main-level)) + (1px * var(--woly-main-level) * var(--woly-component-level))
   );
 
-  --woly-checkbox-width: 24px;
-  --woly-checkbox-height: 24px;
+  --local-icon-size: 24px;
+  --local-icon-fill: var(--local-background-color);
+  --local-icon-stroke: var(--woly-shape-default);
+  --local-text-color: var(--woly-canvas-text-default);
+  --local-background-color: var(--woly-shape-default);
 
-  padding: var(--woly-vertical, 6.4px) var(--woly-horizontal, 6.4px);
+  padding: var(--local-vertical) var(--local-horizontal);
 
   user-select: none;
+  outline: none;
+
+  &:focus [data-checkmark] > svg,
+  &:active [data-checkmark] > svg {
+    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
+    border-radius: var(--woly-rounding);
+  }
 
   [data-block='container'] {
     display: flex;
     align-items: center;
 
-    [data-checkmark] {
-      width: var(--woly-checkbox-width);
-      height: var(--woly-checkbox-height);
+    outline: none;
 
-      align-items: center;
-      justify-content: center;
+    [data-block='text'] {
+      color: var(--local-text-color);
+      font-size: var(--woly-font-size, 12px);
+      line-height: var(--woly-line-height, 24px);
+    }
 
-      margin-right: var(--woly---woly-gap, 15px);
+    input {
+      position: absolute;
+      opacity: 0;
+      height: 0;
+      width: 0;
     }
 
-    [data-checkmark='unchecked'] {
-      display: block;
+    [data-checkmark] {
+      width: var(--local-icon-size);
+      height: var(--local-icon-size);
+
+      margin-right: var(--local-gap);
     }
 
-    [data-checkmark='checked'] {
-      display: none;
+    [data-checkmark='unchecked'],
+    input:checked ~ [data-checkmark='checked'] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
     input:checked ~ [data-checkmark='checked'] {
-      display: block;
+      svg > rect {
+        fill: var(--local-icon-fill);
+      }
+      &:hover {
+        --local-icon-fill: var(--woly-shape-hover);
+      }
+      &:focus,
+      &:active {
+        --local-icon-fill: var(--woly-focus);
+      }
     }
 
+    [data-checkmark='checked'],
     input:checked ~ [data-checkmark='unchecked'] {
       display: none;
     }
 
     [data-checkmark='unchecked'] {
-      &:hover,
-      &:focus {
+      &:hover {
+        svg > rect {
+          stroke: var(--local-icon-stroke);
+        }
+      }
+
+      &:focus,
+      &:active {
         svg > rect {
-          stroke: var(--woly-color, #b0a3f4);
+          --local-icon-stroke: var(--woly-focus);
         }
       }
     }
@@ -95,44 +161,23 @@ export const Checkbox = styled(CheckboxBase)`
     pointer-events: none;
 
     [data-block='text'] {
-      color: var(--woly-color, #e4e4e4);
-    }
-
-    [data-checkmark='unchecked'] {
-      display: block;
-
-      svg > rect {
-        stroke: var(--woly-canvas, #e4e4e4);
-      }
-    }
-
-    [data-checkmark='checked'] {
-      display: none;
+      --local-text-color: var(--woly-shape-disabled);
     }
 
+    [data-checkmark='unchecked'],
     input:checked ~ [data-checkmark='checked'] {
-      display: block;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
       svg > rect {
-        fill: var(--woly-canvas-color, #e4e4e4);
+       fill: var(--woly-shape-disabled);
       }
     }
 
+    [data-checkmark='checked'],
     input:checked ~ [data-checkmark='unchecked'] {
       display: none;
     }
   }
-
-  [data-block='text'] {
-    font-size: var(--woly-font-size, 12px);
-    line-height: var(--woly-line-height, 24px);
-    color: var(--woly-color, #000000);
-  }
-
-  input {
-    position: absolute;
-    opacity: 0;
-    height: 0;
-    width: 0;
-  }
 ` as StyledComponent<'div', Record<string, unknown>, CheckboxProps & Variant>;