fix: chip styles (#50)

ostis-ai · Feb 1, 2024 · 5ed924a · 5ed924a
1 parent 78fb80e
commit 5ed924a
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 21 deletions.
diff --git a/src/components/Button/styled.ts b/src/components/Button/styled.ts
@@ -69,6 +69,7 @@ export const Button = styled.button<ButtonProps>`
       }
       &: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<ButtonProps>`
       }
       &: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
@@ -6,56 +6,57 @@ 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;
 `;
 
 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};
     }
   }
 
   ${({ $disabled }) =>
     $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
@@ -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;