diff --git a/src/lib/box-styles.tsx b/src/lib/box-styles.tsx index 64f0c675..6c07e70c 100644 --- a/src/lib/box-styles.tsx +++ b/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; diff --git a/src/ui/atoms/button-floating/index.tsx b/src/ui/atoms/button-floating/index.tsx index 9e90e48e..ea0498c0 100644 --- a/src/ui/atoms/button-floating/index.tsx +++ b/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; diff --git a/src/ui/atoms/button/index.tsx b/src/ui/atoms/button/index.tsx index 3712244a..7935e780 100644 --- a/src/ui/atoms/button/index.tsx +++ b/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 { diff --git a/src/ui/atoms/chip/index.tsx b/src/ui/atoms/chip/index.tsx index 06e32748..f3c173bd 100644 --- a/src/ui/atoms/chip/index.tsx +++ b/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, ChipProps & Variant>; diff --git a/src/ui/atoms/list/index.tsx b/src/ui/atoms/list/index.tsx index 8283d843..bdc793bf 100644 --- a/src/ui/atoms/list/index.tsx +++ b/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'] { diff --git a/src/ui/atoms/surface/index.tsx b/src/ui/atoms/surface/index.tsx index 63e1d0e1..b991768a 100644 --- a/src/ui/atoms/surface/index.tsx +++ b/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)); `; diff --git a/src/ui/atoms/tooltip/index.tsx b/src/ui/atoms/tooltip/index.tsx index a432fb89..a62e2026 100644 --- a/src/ui/atoms/tooltip/index.tsx +++ b/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; diff --git a/src/ui/elements/quarks/input-container/index.tsx b/src/ui/elements/quarks/input-container/index.tsx index f62b3523..80677770 100644 --- a/src/ui/elements/quarks/input-container/index.tsx +++ b/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 { +interface InputContainerProps extends React.InputHTMLAttributes { className?: string; disabled?: boolean; leftIcon?: React.ReactNode; @@ -20,12 +19,10 @@ const InputContainerBase: React.FC = ({ 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 = ({ {rightIcon && {rightIcon}} ); -} - +}; 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,7 +101,7 @@ export const InputContainer = styled(InputContainerBase)` [data-icon] { --local-icon-size: var(--woly-line-height); - + display: flex; align-items: center; justify-content: center; @@ -113,9 +109,9 @@ export const InputContainer = styled(InputContainerBase)` 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, - InputContainerProps & Variant ->; +` as StyledComponent<'div', Record, InputContainerProps & Variant>; diff --git a/src/ui/molecules/select/index.tsx b/src/ui/molecules/select/index.tsx index a51ab618..f14fa1d0 100644 --- a/src/ui/molecules/select/index.tsx +++ b/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;