diginet-core-ui 1.3.91-beta.1 → 1.3.92-beta.1

package/components/button/index.js

@@ -7,28 +7,19 @@ import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { detectColor, fade, hexToRGBA, hslToRgb, isColor, isColorName, rgbaToHexA, rgbToHex } from "../../styles/color-helper";
 import * as allColors from "../../styles/colors";
-import { itemsCenter, bgTransparent, border, boxBorder, borderNone, borderRadius4px, cursorPointer, flexRow, displayInlineFlex, justifyCenter, outlineNone, overflowHidden, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
+import { bgColor, bgTransparent, border, borderColor, borderNone, borderRadius4px, boxBorder, cursorPointer, displayFlex, displayInlineFlex, flexRow, itemsCenter, justifyCenter, mg, mgl, mgr, outlineNone, overflowHidden, parseHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pd, pointerEventsNone, positionRelative, textColor, userSelectNone, whiteSpaceNoWrap } from "../../styles/general";
 import { useColor as colors, useTheme } from "../../theme";
 import { classNames, refType as ref } from "../../utils";
 import Ripple from "./ripple-effect";
 const {
   colors: {
     system: {
-      active: systemActive,
-      disabled: systemDisabled,
-      rest: systemRest,
-      white: systemWhite
-    },
-    semantic: {
-      info: semanticInfo
+      disabled: systemDisabled
     },
     fill: {
       disabled: fillDisabled
     }
   },
-  typography: {
-    uppercase
-  },
   spacing
 } = useTheme();
 export const getRippleColor = (color, viewType, colors) => {
@@ -68,10 +59,10 @@ export const getClassNameFromColor = color => {
   return !isColor(color) && !isColorName(color) ? color : 'custom-color';
 };
 const iconSizeMap = new Map([['tiny', spacing([4])], ['small', spacing([5])], ['medium', spacing([6])], ['large', spacing([8])], ['giant', spacing([10])]]);
-const paddingSizeMap = new Map([['tiny', spacing([1, 2])], ['small', spacing([1.5, 3])], ['medium', spacing([2, 4])], ['large', spacing([2, 5])], ['giant', spacing([2, 6])]]);
-const outlinedPaddingSizeMap = new Map([['tiny', spacing([0.75, 1.75])], ['small', spacing([1.25, 2.75])], ['medium', spacing([1.75, 3.75])], ['large', spacing([1.75, 4.75])], ['giant', spacing([1.75, 5.75])]]);
-const iconMarginSizeMap = new Map([['tiny', spacing([1])], ['small', spacing([1])], ['medium', spacing([1])], ['large', spacing([1.5])], ['giant', spacing([2])]]);
-const typographySizeMap = new Map([['tiny', 'heading5'], ['small', 'heading5'], ['medium', 'heading4'], ['large', 'heading2'], ['giant', 'heading1']]);
+const paddingSizeMap = new Map([['tiny', [1, 2]], ['small', [1.5, 3]], ['medium', [2, 4]], ['large', [2, 5]], ['giant', [2, 6]]]);
+const outlinedPaddingSizeMap = new Map([['tiny', [0.75, 1.75]], ['small', [1.25, 2.75]], ['medium', [1.75, 3.75]], ['large', [1.75, 4.75]], ['giant', [1.75, 5.75]]]);
+const iconMarginSizeMap = new Map([['tiny', [1]], ['small', [1]], ['medium', [1]], ['large', [1.5]], ['giant', [2]]]);
+const typographySizeMap = new Map([['tiny', 'h5'], ['small', 'h5'], ['medium', 'h4'], ['large', 'h2'], ['giant', 'h1']]);
 const minHeightSizeMap = new Map([['tiny', '24px'], ['small', '32px'], ['medium', '40px'], ['large', '48px'], ['giant', '56px']]);
 const minHeightSizeLinkMap = new Map([['tiny', '16px'], ['small', '20px'], ['medium', '24px'], ['large', '32px'], ['giant', '40px']]);
 const alphaArr = {
@@ -102,24 +93,25 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   ...props
 }, reference) => {
+  if (!reference) reference = useRef(null);
   label = label || text || '';
   const ref = useRef(null);
   const rippleRef = useRef(null);
   const [urlState, setUrlState] = useState(href);
+  const isColorDefault = colorProp === 'default';
+  const isViewTypeLink = viewType === 'link';
   const iconSize = iconSizeMap.get(size);
-  const paddingSize = paddingSizeMap.get(size);
-  const outlinedPaddingSize = outlinedPaddingSizeMap.get(size);
+  const paddingSize = isViewTypeLink ? 0 : viewType === 'outlined' ? outlinedPaddingSizeMap.get(size) : paddingSizeMap.get(size);
   const typographySize = typographySizeMap.get(size);
   const iconMarginSize = iconMarginSizeMap.get(size);
-  const minHeightSize = minHeightSizeMap.get(size);
-  const minHeightSizeLink = minHeightSizeLinkMap.get(size);
+  const minHeightSize = isViewTypeLink ? minHeightSizeLinkMap.get(size) : minHeightSizeMap.get(size);
   const color = colors[colorProp] || colorProp;
-  const isViewTypeLink = viewType === 'link';
   const TagName = href ? 'a' : 'button';
-  const _ButtonRootCSS = ButtonRootCSS(color);
-  const _ButtonIcon = ButtonIconCSS(endIcon, label, startIcon, iconMarginSize, iconSize);
-  const _ButtonTextCSS = ButtonTextCSS(loading, iconMarginSize);
-  const _ButtonSizeCSS = ButtonSizeCSS(paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, iconSize);
+  const _ButtonRootCSS = ButtonRootCSS(color, isColorDefault, viewType, loading);
+  const _ButtonIconCSS = ButtonIconCSS(endIcon, label, startIcon, iconMarginSize, iconSize);
+  const _NonStartIconCSS = NonStartIconCSS(iconSize);
+  const _ButtonLabelCSS = ButtonLabelCSS(loading, iconMarginSize);
+  const _ButtonSizeCSS = ButtonSizeCSS(paddingSize, minHeightSize);
   const _onClick = e => {
     if (href) e.preventDefault(); //Prevent open link when click
     onClick && stopPropagation && e.stopPropagation();
@@ -145,6 +137,10 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   const StartIcon = useMemo(() => {
+    if (!startIcon) return jsx("span", {
+      className: 'non-start-icon',
+      css: _NonStartIconCSS
+    });
     let node = startIcon;
     if (typeof node === 'string') {
       node = jsx(Icon, {
@@ -155,12 +151,12 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         viewBox: true
       });
       return jsx("span", {
-        css: _ButtonIcon,
+        css: _ButtonIconCSS,
         className: 'DGN-UI-Button-Start-Icon'
       }, node);
     }
     return jsx("span", {
-      css: _ButtonIcon,
+      css: _ButtonIconCSS,
       className: 'DGN-UI-Button-Custom-Start-Icon'
     }, node);
   }, [startIcon, size]);
@@ -175,41 +171,37 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         viewBox: true
       });
       return jsx("span", {
-        css: _ButtonIcon,
+        css: _ButtonIconCSS,
         className: 'DGN-UI-Button-End-Icon'
       }, node);
     }
     return jsx("span", {
-      css: _ButtonIcon,
+      css: _ButtonIconCSS,
       className: 'DGN-UI-Button-Custom-End-Icon'
     }, node);
   }, [endIcon, size]);
-  const iconLoading = () => {
-    return jsx(CircularProgress, {
-      className: 'DGN-UI-Button-Loading',
-      background: 'transparent',
-      color: 'currentColor',
-      size: parseInt(iconSize)
-    });
-  };
+  const IconLoading = jsx(CircularProgress, {
+    className: 'DGN-UI-Button-Loading',
+    background: 'transparent',
+    color: 'currentColor',
+    size: parseInt(iconSize)
+  });
   return useMemo(() => {
     // 1. Có StartIcon => thay StartIcon
     // 2. Có EndIcon => thay EndIcon
     // 3. Có StartIcon + EndIcon => thay StartIcon
     // 4. Không có Icon => hiện thêm icon loading ở đầu
 
-    let start = startIcon ? StartIcon : jsx("span", {
-      className: 'no-icon'
-    });
+    let start = StartIcon;
     let end = endIcon ? EndIcon : null;
     if (loading) {
-      if (startIcon) start = iconLoading();
-      if (endIcon) end = iconLoading();
+      if (startIcon) start = IconLoading;
+      if (endIcon) end = IconLoading;
       if (startIcon && endIcon) {
-        start = iconLoading();
+        start = IconLoading;
         end = EndIcon;
       }
-      if (!startIcon && !endIcon) start = iconLoading();
+      if (!startIcon && !endIcon) start = IconLoading;
     }
     return jsx(TagName, {
       css: [_ButtonRootCSS, _ButtonSizeCSS, disabled && ButtonDisabledCSS],
@@ -218,41 +210,48 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       id: id,
       type: type,
       disabled: disabled,
-      className: classNames('DGN-UI-Button', viewType, getClassNameFromColor(colorProp), size, loading && 'button--loading', className),
+      className: classNames('DGN-UI-Button', viewType, size, loading && 'button--loading', className),
       href: urlState || null,
       ...props
     }, start, jsx(Typography, {
-      css: _ButtonTextCSS,
+      css: _ButtonLabelCSS,
       type: typographySize,
       className: classNames('DGN-UI-Button-Label', 'button-text'),
+      format: ['uppercase'],
       ...labelProps
-    }, children || label), end ? end : null, !disabled && !loading && !isViewTypeLink ? jsx(Ripple, {
+    }, children || label), end, !disabled && !loading && !isViewTypeLink ? jsx(Ripple, {
       ref: rippleRef,
       color: getRippleColor(colorProp, viewType, allColors)
     }) : null);
-  }, [children, className, colorProp, disabled, endIcon, href, id, label, loading, onClick, size, startIcon, stopPropagation, type, urlParams, viewType, urlState]);
+  }, [children, className, colorProp, disabled, endIcon, href, id, label, labelProps, loading, onClick, size, startIcon, stopPropagation, type, urlParams, viewType, urlState]);
 }));
+const NonStartIconCSS = iconSize => css`
+    ${mg(0)};
+    ${parseHeight(iconSize)};
+    ${parseMinWidth(0)};
+`;
 const ButtonIconCSS = (endIcon, label, startIcon, iconMarginSize, iconSize) => css`
+    ${displayFlex};
     ${flexRow};
     ${itemsCenter};
     ${justifyCenter};
     ${positionRelative};
     ${boxBorder};
-    margin-right: ${endIcon || label ? iconMarginSize : 0};
+    ${mgr(endIcon || label ? iconMarginSize : 0)};
     &.DGN-UI-Button-End-Icon,
     &.DGN-UI-Button-Custom-End-Icon {
-        margin-right: unset;
-        margin-left: ${startIcon || label ? iconMarginSize : 0};
+        ${mgr('unset')};
+        ${mgl(startIcon || label ? iconMarginSize : 0)};
     }
     &.DGN-UI-Button-Start-Icon,
     &.DGN-UI-Button-End-Icon {
         ${parseWidthHeight(iconSize)};
     }
 `;
-const ButtonTextCSS = (loading, iconMarginSize) => css`
-    white-space: nowrap;
-    color: inherit;
-    margin: 0 ${loading ? iconMarginSize : 0};
+const ButtonLabelCSS = (loading, iconMarginSize) => css`
+    ${whiteSpaceNoWrap};
+    ${textColor('inherit')};
+    ${mgl(loading ? iconMarginSize : 0)};
 `;
 const ButtonDisabledCSS = css`
     cursor: not-allowed !important;
@@ -269,29 +268,17 @@ const ButtonDisabledCSS = css`
         background-color: transparent !important;
     }
 `;
-const ButtonSizeCSS = (paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, iconSize) => css`
-    padding: ${paddingSize};
+const ButtonSizeCSS = (paddingSize, minHeightSize) => css`
+    ${pd(paddingSize)};
     ${parseMinWidthHeight('max-content', minHeightSize)};
-    &.outlined {
-        padding: ${outlinedPaddingSize};
-    }
-    &.link {
-        ${parseMinHeight(minHeightSizeLink)};
-    }
-    .no-icon {
-        margin: 0;
-        ${parseHeight(iconSize)};
-        ${parseMinWidth(0)};
-    }
 `;
-const ButtonRootCSS = color => css`
+const ButtonRootCSS = (color, isColorDefault, viewType, loading) => css`
     ${displayInlineFlex};
     ${itemsCenter};
     ${justifyCenter};
     ${positionRelative};
     ${borderRadius4px};
     ${boxBorder};
-    ${uppercase};
     ${cursorPointer};
     ${overflowHidden};
     ${outlineNone};
@@ -299,42 +286,44 @@ const ButtonRootCSS = color => css`
     ${parseHeight('max-content')};
     text-decoration: none;
     transition: all 0.5s;
-    &.button--loading {
-        ${pointerEventsNone};
-    }
-    &.outlined {
-        ${bgTransparent};
+    ${loading && pointerEventsNone};
+    ${viewType === 'outlined' && css`
+        ${bgColor('transparent')};
         ${border(1, color)};
-        color: ${color};
+        ${textColor(color)};
         &.button--loading {
-            background-color: ${hexToRGBA(color, alphaLoading)};
+            ${bgColor(hexToRGBA(color, alphaLoading))};
         }
-        ${Object.keys(alphaArr).map(key => `&:${key} {
-                    background-color: ${hexToRGBA(color, alphaArr[key])};
-                }`)}
-        &.default {
-            ${border(1, systemRest)};
-            color: ${systemRest};
+        ${Object.keys(alphaArr).map(key => css`
+                    &: ${key} {
+                        ${bgColor(hexToRGBA(color, alphaArr[key]))};
+                    }
+                `)}
+        ${isColorDefault && css`
+            ${border(1, 'system.rest')};
+            ${textColor('system.rest')};
             &.button--loading,
             &:hover,
             &:focus,
             &:active {
-                color: ${systemActive};
-                border-color: ${systemActive};
+                ${textColor('system.active')};
+                ${borderColor('system.active')};
             }
             &.button--loading {
-                background-color: ${hexToRGBA(systemActive, alphaLoading)};
+                ${bgColor(hexToRGBA('system.active', alphaLoading))}
             }
-            ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(systemActive, alphaArr[key])};
-                    }`)}// &:hover | &:focus | &:active
-        }
-    }
-    &.filled {
+            ${Object.keys(alphaArr).map(key => css`
+                        &: ${key} {
+                            ${bgColor(hexToRGBA('system.active', alphaArr[key]))};
+                        }
+                    `)}// &:hover | &:focus | &:active
+        `}
+    `}
+    ${viewType === 'filled' && css`
         ${borderNone};
-        color: ${systemWhite};
+        ${textColor('system.white')};
+        ${bgColor(color)};
         font-weight: bold;
-        background-color: ${color};
         &.button--loading,
         &:hover,
         &:focus {
@@ -343,49 +332,52 @@ const ButtonRootCSS = color => css`
         &:active {
             filter: brightness(0.7);
         }
-        &.default {
-            background-color: ${systemRest};
+        ${isColorDefault && css`
+            ${bgColor('system.rest')};
             &.button--loading {
-                background-color: ${systemActive};
+                ${bgColor('system.active')};
             }
             &:hover,
             &:focus,
             &:active {
-                background-color: ${systemActive};
+                ${bgColor('system.active')};
             }
-        }
-    }
-    &.text {
+        `}
+    `}
+    ${viewType === 'text' && css`
         ${bgTransparent};
         ${borderNone};
-        color: ${color};
+        ${textColor(color)};
         &.button--loading {
-            background-color: ${hexToRGBA(color, alphaLoading)};
+            ${bgColor(hexToRGBA(color, alphaLoading))};
         }
-        ${Object.keys(alphaArr).map(key => `&:${key} {
-                    background-color: ${hexToRGBA(color, alphaArr[key])};
-                }`)}
-        &.default {
-            color: ${systemRest};
+        ${Object.keys(alphaArr).map(key => css`
+                    &: ${key} {
+                        ${bgColor(hexToRGBA(color, alphaArr[key]))};
+                    }
+                `)}
+        ${isColorDefault && css`
+            ${textColor('system.rest')};
             &:hover,
             &:focus,
             &:active {
-                color: ${systemActive};
+                ${textColor('system.active')};
             }
             &.button--loading {
-                color: ${systemActive};
-                background-color: ${hexToRGBA(systemActive, alphaLoading)};
+                ${textColor('system.active')};
+                ${bgColor(hexToRGBA('system.active', alphaLoading))};
             }
-            ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(systemActive, alphaArr[key])};
-                    }`)}
-        }
-    }
-    &.link {
-        ${bgTransparent};
+            ${Object.keys(alphaArr).map(key => css`
+                        &: ${key} {
+                            ${bgColor(hexToRGBA('system.active', alphaArr[key]))};
+                        }
+                    `)}
+        `}
+    `}
+    ${viewType === 'link' && css`
         ${borderNone};
-        padding: 0;
-        color: ${color};
+        ${textColor(color)};
+        ${bgColor('transparent')};
         &.button--loading,
         &:hover,
         &:focus {
@@ -395,9 +387,9 @@ const ButtonRootCSS = color => css`
             filter: brightness(0.7);
         }
         &.default {
-            color: ${semanticInfo};
+            ${textColor('semantic.info')};
         }
-    }
+    `}
 `;
 Button.defaultProps = {
   className: '',

package/components/form-control/checkbox/index.js

@@ -1,31 +1,25 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle, Fragment } from 'react';
 import { Typography } from "../..";
-import { itemsCenter, itemsStart, boxBorder, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop, parseWidthHeight, border } from "../../../styles/general";
+import PropTypes from 'prop-types';
+import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { bgColor, border, borderColor, borderRadius, boxBorder, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, flexRow, itemsCenter, itemsStart, left, mg, mgb, parseMinWidthHeight, parseWidth, parseWidthHeight, positionAbsolute, positionRelative, scale, textColor, top } from "../../../styles/general";
+import { useTheme } from "../../../theme";
 import { classNames, randomString, refType as ref } from "../../../utils";
-import { useTheme, useColor as colors } from "../../../theme";
 const {
   colors: {
     system: {
-      rest,
-      white,
-      disabled: systemDisabled
+      white: systemWhite
     },
     fill: {
-      hover: clFillHover,
-      pressed: clFillPressed
-    },
-    formal2: clFormal2,
-    semantic: {
-      danger: clDanger
+      hover: fillHover,
+      pressed: fillPressed
     }
   },
   spacing
 } = useTheme();
-const padding = spacing(0.75);
+const padding = 0.75;
 const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   checked,
@@ -50,9 +44,8 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width,
   ...props
 }, reference) => {
-  if (!inputRef) {
-    inputRef = useRef(null);
-  }
+  if (!reference) reference = useRef(null);
+  if (!inputRef) inputRef = useRef(null);
   const ref = useRef(null);
   if (typeof width === 'number') width += 'px';
   const [checkedState, setCheckedState] = useState(checked || defaultChecked);
@@ -62,9 +55,8 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       allowSymbol: false
     }));
   }
-  const clMain = colors[color] || color;
-  const _CheckBoxSquareCSS = CheckBoxSquareCSS(width, clMain);
-  const _CheckBoxInputCSS = CheckBoxInputCSS(_CheckBoxSquareCSS.name, clMain);
+  const _CheckBoxSquareCSS = CheckBoxSquareCSS(width, color);
+  const _CheckBoxInputCSS = CheckBoxInputCSS(_CheckBoxSquareCSS.name, color);
   const handleChange = event => {
     stopPropagation && event.stopPropagation();
     if (readOnly || inputProps.readOnly || disabled || inputProps.disabled) return;
@@ -112,7 +104,10 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: classNames('DGN-UI-Checkbox', className),
     ref: ref,
     ...props,
-    onClick: handleChange
+    onClick: () => {
+      var _inputRef$current$cli, _inputRef$current;
+      return (_inputRef$current$cli = (_inputRef$current = inputRef.current).click) === null || _inputRef$current$cli === void 0 ? void 0 : _inputRef$current$cli.call(_inputRef$current);
+    }
   }, jsx("div", {
     css: CheckBoxRootCSS,
     className: classNames('DGN-UI-Checkbox-Root', disabled && 'disabled', readOnly && 'read-only')
@@ -135,130 +130,133 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, jsx("span", {
     className: classNames(determinate ? 'determinate' : 'indeterminate', readOnly && 'read-only', disabled && 'disabled'),
     css: _CheckBoxSquareCSS
-  }), (children || label) && jsx(Typography, {
+  }), children || label ? jsx(Typography, {
     type: 'p1',
     style: {
       marginLeft: spacing(1)
     },
-    color: disabled ? systemDisabled : '',
+    color: disabled ? 'system.disabled' : '',
     ...labelProps
-  }, jsx(Fragment, null, children || label, required && jsx("span", {
-    style: {
-      color: disabled ? systemDisabled : clDanger
-    }
-  }, "*"))))));
+  }, jsx(Fragment, null, children || label, required ? jsx("span", {
+    css: textColor(disabled ? 'system.disabled' : 'semantic.danger')
+  }, "*") : null)) : null)));
 }));
-const CheckBoxSquareCSS = (width, clMain) => css`
+const CheckBoxSquareCSS = (width, color) => css`
+    ${displayFlex};
     ${flexRow};
     ${positionRelative};
     ${cursorPointer};
     ${boxBorder};
-    ${parseWidthHeight(width, width)};
-    ${border(2, rest)};
-    min-width: ${width};
-    min-height: ${width};
-    background-color: ${white};
-    border-radius: 2px;
-    margin: ${padding}px;
+    ${parseWidthHeight(width)};
+    ${border(2, 'system.rest')};
+    ${parseMinWidthHeight(width)};
+    ${bgColor('white')};
+    ${borderRadius(2)};
+    ${mg([padding])};
     &.determinate {
         &::after {
             ${displayBlock};
             ${positionAbsolute};
             ${parseWidthHeight(12.6, 7)};
+            ${left('50%')};
+            ${top('43%')};
             content: '';
-            left: 50%;
-            top: 43%;
             transform: translate(-50%, -50%) scale(0) rotate(45deg);
             transition: transform 0.3s;
         }
     }
     &.indeterminate {
         &::after {
+            ${displayFlex};
             ${flexRow};
             ${positionAbsolute};
             ${parseWidthHeight(10, 2)};
+            ${bgColor('white')};
+            ${left(2)};
+            ${top(6)};
+            ${scale(0)};
             content: '';
-            background-color: white;
-            left: 2px;
-            top: 6px;
             transition: transform 0.3s;
-            transform: scale(0);
         }
     }
     &:not(.disabled):not(.read-only) {
         &:hover {
-            box-shadow: 0 0 0 3px ${clFillHover};
-            background-color: ${clFillHover};
-            border-color: ${clMain};
+            box-shadow: 0 0 0 3px ${fillHover};
+            ${bgColor('fill.hover')};
+            ${borderColor(color)};
         }
         &:focus,
         &:active {
-            box-shadow: 0 0 0 3px ${clFillPressed};
-            background-color: ${clFillPressed};
+            box-shadow: 0 0 0 3px ${fillPressed};
+            ${bgColor('fill.pressed')};
         }
     }
     &:not(disabled):focus {
-        box-shadow: 0 0 0 3px ${clFillPressed};
-        background-color: ${clFillPressed};
+        box-shadow: 0 0 0 3px ${fillPressed};
+        ${bgColor('fill.pressed')};
     }
     &.disabled,
     &.read-only {
-        ${cursorNoDrop};
+        ${cursorNotAllowed};
     }
 `;
-const CheckBoxInputCSS = (CheckBoxSquareCSSName, clMain) => css`
+const CheckBoxInputCSS = (CheckBoxSquareCSSName, color) => css`
     &:checked + label > span.css-${CheckBoxSquareCSSName} {
         &.determinate {
             &::after {
                 transform: translate(-50%, -66%) scale(1) rotate(-45deg);
-                background: linear-gradient(${white}, ${white}) left bottom/2px 100%,
-                    linear-gradient(${white}, ${white}) left bottom/100% 2px;
+                background: linear-gradient(${systemWhite}, ${systemWhite}) left bottom/2px 100%,
+                    linear-gradient(${systemWhite}, ${systemWhite}) left bottom/100% 2px;
                 background-repeat: no-repeat;
             }
         }
         &.indeterminate {
             &::after {
-                transform: scale(1);
+                ${scale(1)};
             }
         }
     }
     &:checked:not(:disabled) + label > span.css-${CheckBoxSquareCSSName} {
-        background-color: ${clMain} !important;
-        border-color: ${clMain} !important;
+        ${bgColor(color)};
+        ${borderColor(color)};
     }
     &:checked:disabled {
         & + label > span.css-${CheckBoxSquareCSSName} {
             &:not(.indeterminate) {
-                background-color: ${systemDisabled} !important;
+                ${bgColor('system.disabled')};
             }
             &.indeterminate {
-                background-color: ${clFormal2} !important;
-                border-color: ${clFormal2} !important;
+                ${bgColor('formal2')};
+                ${borderColor('formal2')};
             }
         }
     }
     &:disabled {
         & + label > span.css-${CheckBoxSquareCSSName} {
-            border-color: ${systemDisabled};
+            ${borderColor('system.disabled')};
         }
     }
 `;
 const CheckBoxLabelCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${positionRelative};
     ${itemsCenter};
     ${boxBorder};
-    margin-bottom: 0 !important;
 `;
 const CheckBoxRootCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${itemsStart};
     ${boxBorder};
+    & > label {
+        ${mgb(0)};
+    }
 `;
 const CheckboxContainerCSS = css`
     ${displayBlock};
     ${positionRelative};
-    width: fit-content;
+    ${parseWidth('fit-content')};
 `;
 Checkbox.defaultProps = {
   className: '',