Merge remote-tracking branch 'origin/feat/FRNT-532-implement-box-model'

src/lib/box-styles.tsx

@@ -6,11 +6,6 @@ export const Global = styled.div`
     font-family: 'Helvetica Neue', sans-serif;
   }
 
-  button {
-    padding: 0;
-    margin: 0;
-  }
-
   --palette-snow-1000: #000000;
   --palette-snow-500: #c0c0c0;
   --palette-snow-300: #e5e5e5;
@@ -61,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);
@@ -190,7 +187,7 @@ const Frame = styled.div`
   max-width: 100%;
   padding: 1rem;
   overflow: auto;
-  border: 2px solid var(--base, rgb(246, 248, 250));
+  border: 2px solid rgb(246, 248, 250);
   border-radius: 4px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
@@ -215,9 +212,9 @@ const Container = styled.div`
   &[data-dir='horizontal'] {
     flex-direction: row;
     flex-wrap: wrap;
-
-    & > * + * {
-      margin-left: 0.5rem;
+    & > * {
+      margin-right: 0.5rem;
+      margin-bottom: 0.5rem;
     }
   }
 `;
@@ -263,14 +260,6 @@ export const Line = styled.div`
   align-items: baseline;
 `;
 
-export const Modal = styled.div`
-  z-index: 1;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`;
-
 export const ColumnContent = styled.div`
   background: var(--palette-lavender-500);
   color: var(--palette-snow-0);
@@ -282,3 +271,10 @@ export const ColumnContent = styled.div`
 export const TableContent = styled.div`
   padding: 10px;
 `;
+
+export const Form = styled.form`
+  width: 100%;
+  & > div {
+    margin-bottom: 10px;
+  }
+`;

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);