diff --git a/src/components/Button/styled.ts b/src/components/Button/styled.ts index f6a5623..6af8c4f 100644 --- a/src/components/Button/styled.ts +++ b/src/components/Button/styled.ts @@ -69,6 +69,7 @@ export const Button = styled.button` } &:active { background: ${({ theme }) => theme.button.colors.primary.backgroundActive}; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } &:disabled { background: ${({ theme }) => theme.button.colors.primary.backgroundDisabled}; @@ -87,6 +88,7 @@ export const Button = styled.button` } &:active { background: ${({ theme }) => theme.button.colors.secondary.backgroundActive}; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } &:disabled { background: ${({ theme }) => theme.button.colors.secondary.backgroundDisabled}; diff --git a/src/components/Chip/styled.ts b/src/components/Chip/styled.ts index 1b8ef71..2a8a54a 100644 --- a/src/components/Chip/styled.ts +++ b/src/components/Chip/styled.ts @@ -6,31 +6,33 @@ export const Wrapper = styled.div<{ $disabled?: boolean; $size: TChipSize; $hasC display: flex; align-items: center; box-sizing: border-box; - gap: 4px; - padding: ${({ $hasCloseIcon }) => ($hasCloseIcon ? '3px 3px 3px 7px' : '3px 7px')}; - width: fit-content; - max-width: 190px; - border-radius: 8px; - border: 1px solid #5d8fef; - background-color: #ffffff; + gap: ${({ theme }) => theme.chip.size.gap}; + padding: ${({ $hasCloseIcon }) => + $hasCloseIcon ? ({ theme }) => theme.chip.size.paddingWithIcon : ({ theme }) => theme.chip.size.padding}; + width: ${({ theme }) => theme.chip.size.width}; + max-width: ${({ theme }) => theme.chip.size.maxWidth}; + border-radius: ${({ theme }) => theme.chip.size.borderRadius}; + border: ${({ theme }) => theme.chip.size.border} solid ${({ theme }) => theme.chip.colors.border}; + background-color: ${({ theme }) => theme.chip.colors.backgroundColor}; - color: #454545; + color: ${({ theme }) => theme.chip.colors.color}; ${({ $disabled }) => $disabled && css` - color: #a6a6a6; - border: 1px solid #ffffff; + color: ${({ theme }) => theme.chip.colors.disabled.color}; + border: ${({ theme }) => theme.chip.size.disabled.border} solid + ${({ theme }) => theme.chip.colors.disabled.border}; pointer-events: none; `} `; export const Text = styled.div<{ size: TChipSize }>` - font-family: 'Roboto'; - font-weight: 400; - font-size: 20px; - line-height: 24px; - max-width: fit-content; + font-family: ${({ theme }) => theme.chip.font.fontFamily}; + font-weight: ${({ theme }) => theme.chip.size.fontWeight}; + font-size: ${({ theme }) => theme.chip.size.fontWeight}; + line-height: ${({ theme }) => theme.chip.size.lineHeight}; + max-width: ${({ theme }) => theme.chip.size.maxWidthText}; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -38,13 +40,13 @@ export const Text = styled.div<{ size: TChipSize }>` export const Icon = styled.div<{ $disabled?: boolean }>` flex-shrink: 0; - border-radius: 4px; + border-radius: ${({ theme }) => theme.chip.size.borderRadiusIcon}; cursor: pointer; &:hover { - background-color: #ececec; + background-color: ${({ theme }) => theme.chip.colors.hover.backgroundColorIcon}; path: { - fill: #959595; + fill: ${({ theme }) => theme.chip.colors.hover.fillIcon}; } } @@ -52,10 +54,9 @@ export const Icon = styled.div<{ $disabled?: boolean }>` $disabled && css` pointer-events: none; - background-color: #fff; - background-color: #ececec; + background-color: ${({ theme }) => theme.chip.colors.disabled.backgroundColorIcon}; path: { - fill: #c7c7c7; + fill: ${({ theme }) => theme.chip.colors.disabled.fillIcon}; } `} `; diff --git a/src/constants/theme.ts b/src/constants/theme.ts index ed5e744..fa91b03 100644 --- a/src/constants/theme.ts +++ b/src/constants/theme.ts @@ -185,6 +185,43 @@ export const defaultLightTheme = { lineHeight: '24px', }, }, + chip: { + font: { + fontFamily: 'Roboto', + }, + size: { + maxWidth: '190px', + width: 'fit-content', + gap: '4px', + fontWeight: 400, + fontSize: '20px', + lineHeight: '24px', + maxWidthText: 'fit-content', + padding: '3px 7px', + paddingWithIcon: '3px 3px 3px 7px', + border: '1px', + borderRadius: '8px', + borderRadiusIcon: '4px', + disabled: { + border: '1px', + }, + }, + colors: { + backgroundColor: '#ffffff', + color: '#454545', + border: '#5d8fef', + disabled: { + color: '#a6a6a6', + border: '#ffffff', + backgroundColorIcon: '#ececec', + fillIcon: '#ececec', + }, + hover: { + backgroundColorIcon: '#ececec', + fillIcon: '#959595', + }, + }, + }, }; export type Theme = typeof defaultLightTheme;