fix: fix border width in components

src/lib/box-styles.tsx

@@ -26,7 +26,7 @@ export const Global = styled.div`
   --woly-neutral: var(--palette-snow-500);
   --woly-focus: var(--palette-lavender-500);
   --woly-background: var(--palette-snow-0);
-  
+
   [data-variant='primary'] {
     --woly-shape-default: var(--palette-lavender-300);
     --woly-shape-disabled: var(--palette-snow-300);
@@ -50,8 +50,6 @@ export const Global = styled.div`
   }
 
   [data-variant='secondary'] {
-    --woly-border-width: 1.5px;
-
     --woly-background: #ffffff;
     --woly-border: #b0a3f4;
     --woly-color: #b0a3f4;
@@ -69,8 +67,6 @@ export const Global = styled.div`
     --woly-fill-disabled: #e4e4e4;
   }
   [data-variant='error'] {
-    --woly-border-width: 1.5px;
-
     --woly-background: #ffffff;
     --woly-border: #eb5656;
     --woly-color: #eb5656;
@@ -171,7 +167,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;

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

@@ -56,7 +56,7 @@ export const ButtonFloating = styled(ButtonFloatingBase)`
   border-color: var(--woly-border, #000000);
   border-style: solid;
 
-  border-width: var(--woly-border-width, 0);
+  border-width: var(--woly-border-width);
   border-radius: 50%;
 
   cursor: pointer;

src/ui/atoms/button/index.tsx

@@ -100,7 +100,7 @@ export const Button = styled(ButtonBase)`
   }
 
   &:focus {
-    box-shadow: 0 0 0 1.5px var(--woly-focus);
+    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
   }
 
   &:disabled {

src/ui/atoms/chip/index.tsx

@@ -121,7 +121,7 @@ export const Chip = styled(ChipBase)`
   }
 
   [role='button']:focus {
-    box-shadow: 0 0 0 1px var(--woly-border-focus, #9381f1);
+    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-border-focus, #9381f1);
   }
 
   [role='button']:hover {
@@ -158,7 +158,7 @@ export const Chip = styled(ChipBase)`
 
     border-color: var(--woly-border, transparent);
     border-style: solid;
-    border-width: var(--woly-border-width, 0);
+    border-width: var(--woly-border-width);
     border-radius: var(--woly-rounding, 3px);
 
     outline: none;
@@ -191,7 +191,7 @@ export const Chip = styled(ChipBase)`
     }
 
     &:focus {
-      box-shadow: 0 0 0 1px var(--woly-border-focus, #9381f1);
+      box-shadow: 0 0 0 var(--woly-border-width) var(--woly-border-focus, #9381f1);
     }
   }
 ` as StyledComponent<'div', Record<string, unknown>, ChipProps & Variant>;

src/ui/atoms/list/index.tsx

@@ -98,7 +98,7 @@ export const List = styled(ListBase)`
     &:active {
       border-color: var(--woly-border-focus, #1f68f5);
       border-style: solid;
-      border-width: var(--woly-border-width, 1.5px);
+      border-width: var(--woly-border-width);
     }
 
     &[data-disabled='true'] {

src/ui/atoms/surface/index.tsx

@@ -10,7 +10,7 @@ export const Surface = styled.div.attrs(map)`
   background-color: var(--woly-canvas, #ffffff);
   border-color: var(--woly-border, #000000);
   border-style: solid;
-  border-width: var(--woly-border-width, 0);
+  border-width: var(--woly-border-width);
   border-radius: var(--woly-rounding, 3px);
   box-shadow: var(--woly-box-shadow, 3px 3px 8px rgba(11, 31, 53, 0.04));
 `;

src/ui/atoms/tooltip/index.tsx

@@ -88,7 +88,7 @@ export const Tooltip = styled(TooltipBase)`
     background-color: var(--woly-background, #ffffff);
     border-color: var(--woly-border, var(--woly-background, #ffffff));
     border-style: solid;
-    border-width: var(--woly-border-width, 0);
+    border-width: var(--woly-border-width);
     border-radius: var(--woly-rounding, 6px);
 
     transition: all 0.3s ease-in-out;

src/ui/elements/quarks/input-container/index.tsx

@@ -2,8 +2,7 @@ import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
 import { keyboardEventHandle } from 'lib';
-interface InputContainerProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
+interface InputContainerProps extends React.InputHTMLAttributes<HTMLInputElement> {
   className?: string;
   disabled?: boolean;
   leftIcon?: React.ReactNode;
@@ -20,12 +19,10 @@ const InputContainerBase: React.FC<InputContainerProps & Variant> = ({
   rightIcon,
   variant = 'default',
 }) => {
-
   const tabIndex = disabled ? -1 : 0;
 
   const onKeyDown = React.useCallback(
     (event: React.KeyboardEvent) => {
-
       if (event.key === 'Enter') {
         event.preventDefault();
       }
@@ -56,8 +53,7 @@ const InputContainerBase: React.FC<InputContainerProps & Variant> = ({
       {rightIcon && <span data-icon="right">{rightIcon}</span>}
     </div>
   );
-}
-
+};
 
 export const InputContainer = styled(InputContainerBase)`
   --local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
@@ -88,13 +84,13 @@ export const InputContainer = styled(InputContainerBase)`
   border: var(--woly-border-width) solid var(--local-border-color);
   border-radius: var(--woly-rounding);
 
-  [data-input="input"] {
+  [data-input='input'] {
     flex: 1;
     color: var(--local-value-color);
-    
+
     padding: 0 var(--local-horizontal);
 
-    input{
+    input {
       padding: 0;
     }
 
@@ -105,17 +101,17 @@ export const InputContainer = styled(InputContainerBase)`
 
   [data-icon] {
     --local-icon-size: var(--woly-line-height);
-    
+
     display: flex;
     align-items: center;
     justify-content: center;
 
     width: var(--local-icon-size);
     height: var(--local-icon-size);
 
-      svg > path {
-        fill: var(--local-icon-fill);
-      }
+    svg > path {
+      fill: var(--local-icon-fill);
+    }
   }
 
   [data-icon='left'] {
@@ -126,18 +122,18 @@ export const InputContainer = styled(InputContainerBase)`
     padding: 0 calc(var(--local-horizontal) - var(--local-compensate)) 0 0;
   }
 
-  [data-icon='left'] ~ [data-input="input"],
-  [data-input="input"] ~ [data-icon='right'] {
+  [data-icon='left'] ~ [data-input='input'],
+  [data-input='input'] ~ [data-icon='right'] {
     padding-left: var(--local-gap);
   }
 
   &:focus {
     --local-border-color: var(--woly-focus);
-    box-shadow: 0 0 0 2px var(--woly-focus);
+    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
     outline: none;
 
     [data-icon] {
-        --local-icon-fill: var(--woly-canvas-text-default);
+      --local-icon-fill: var(--woly-canvas-text-default);
     }
   }
 
@@ -147,7 +143,7 @@ export const InputContainer = styled(InputContainerBase)`
 
   &:active {
     --local-border-color: var(--woly-focus);
-    
+
     [data-icon] {
       --local-icon-fill: var(--woly-canvas-text-default);
     }
@@ -160,8 +156,4 @@ export const InputContainer = styled(InputContainerBase)`
     --local-border-color: var(--woly-shape-disabled);
     --local-value-color: var(--woly-canvas-text-disabled);
   }
-` as StyledComponent<
-  'div',
-  Record<string, unknown>,
-  InputContainerProps & Variant
->;
+` as StyledComponent<'div', Record<string, unknown>, InputContainerProps & Variant>;

src/ui/molecules/select/index.tsx

@@ -156,7 +156,7 @@ export const Select = styled(SelectBase)`
     background: var(--woly-canvas, #ffffff);
     border-color: var(--woly-border, var(--woly-background, #f8f7f7));
     border-style: solid;
-    border-width: var(--woly-border-width, 1.5px);
+    border-width: var(--woly-border-width);
     border-radius: var(--woly-rounding, 3px);
     box-sizing: border-box;
     color: var(--woly-color, #000000);
@@ -181,7 +181,7 @@ export const Select = styled(SelectBase)`
     background-color: var(--woly-canvas, #ffffff);
     border-color: var(--woly-border, var(--woly-background, #f8f7f7));
     border-style: solid;
-    border-width: var(--woly-border-width, 1px);
+    border-width: var(--woly-border-width);
     border-radius: var(--woly-rounding, 3px);
     padding: 0;
     z-index: 1;