feat: implement box-model and rewrite ButtonIcon

src/static/icons/index.ts

@@ -3,7 +3,7 @@ export { default as ArrowLeft } from './arrow-left.svg';
 export { default as Check } from './check.svg';
 export { default as CheckIcon } from './icon_check.svg';
 export { default as ClosedEyeIcon } from './closed-eye.svg';
-export { default as CloseIcon } from './close-small.svg';
+export { default as CloseIcon } from './close.svg';
 export { default as InfoIcon } from './info.svg';
 export { default as MoreIcon } from './more.svg';
 export { default as OpenedEyeIcon } from './opened-eye.svg';

src/ui/atoms/button-icon/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
+import { box } from 'ui/elements/quarks';
 
 interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string;
@@ -22,24 +23,38 @@ const ButtonIconBase: React.FC<Props & Variant> = ({
 );
 
 export const ButtonIcon = styled(ButtonIconBase)`
+  ${box}
+  --local-vertical: calc(
+    1px * var(--woly-component-level) * var(--woly-main-level)
+  );
+
   --local-shape-color: var(--woly-canvas-default);
-  --local-icon-size: var(--woly-line-height);
-  --local-icon-color: var(--woly-canvas-text-default);
-  --local-padding: calc(1px * var(--woly-component-level) * var(--woly-main-level));
+  --local-icon-size: calc(var(--woly-line-height));
+  --local-button-size: calc(var(--local-icon-size) + (var(--local-vertical) * 2));
+  --local-icon-color: var(--woly-shape-default);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
 
-  border: var(--woly-border) solid var(--local-shape-color);
-  border-radius: var(--woly-rounding, 4px);
+  width: var(--local-button-size);
+  height: var(--local-button-size);
+
+  border: var(--woly-border-width) solid var(--local-shape-color);
+  border-radius: var(--woly-rounding);
   cursor: pointer;
-  padding: var(--local-padding);
   background: var(--local-shape-color);
   outline: none;
 
   [data-icon] {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--local-icon-size);
-    height: var(--local-icon-size);
+    svg {
+      width: var(--local-icon-size);
+      height: var(--local-icon-size);
+    }
 
     svg > path {
       fill: var(--local-icon-color);

src/ui/elements/quarks/box/index.tsx

@@ -0,0 +1,34 @@
+import { css } from 'styled-components';
+
+export const box = css`
+  --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-gap: var(--local-vertical);
+  --local-compensate: var(--local-vertical);
+
+  & > * {
+    padding-top: var(--local-vertical);
+    padding-bottom: var(--local-vertical);
+  }
+
+  & > :first-child {
+    padding-left: var(--local-horizontal);
+  }
+
+  & > :last-child {
+    padding-right: var(--local-horizontal);
+  }
+
+  & > [data-icon]:first-child {
+    padding-left: var(--local-compensate);
+  }
+  & > [data-icon]:last-child {
+    padding-right: var(--local-compensate);
+  }
+
+  & > :not(:first-child) {
+    margin-left: var(--local-gap);
+  }
+`;

src/ui/elements/quarks/index.ts

@@ -1,2 +1,3 @@
+export { box } from './box';
 export { InputContainer } from './input-container';
 export { InputElement } from './input-element';