refactor: improvement theme

everton-dgn · Mar 11, 2024 · ee61eec · ee61eec
1 parent 39c9344
commit ee61eec
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 69 deletions.
diff --git a/.gitignore b/.gitignore
@@ -44,7 +44,6 @@ tsconfig.tsbuildinfo
 
 # linters
 .eslintcache
-.stylelintcache
 .husky
 
 # https

diff --git a/src/components/atoms/IconButton/styles.module.css b/src/components/atoms/IconButton/styles.module.css
@@ -1,71 +1,61 @@
-/*
-TODO: melhorar componente e estilização removendo css
-*/
-
 .button {
   &:not(:active) {
-    transform: translate3d(0, 0, 0);
-    box-shadow: 0 4px 16px #aeaebed4;
+    @apply translate-y-0 shadow-[0_4px_16px_#aeaebed4];
   }
 
   &:hover:not(:disabled) {
-    box-shadow: 0 5px 18px 0 #aeaebed4;
-    transform: translate3d(0, -1.5px, 0);
+    @apply translate-y-[-1.5px] shadow-[0_5px_18px_#aeaebed4];
   }
 
   &:active:not(:disabled) {
-    box-shadow: 0 1px 3px 0 #aeaebed4;
-    transform: translate3d(0, +1.5px, 0);
+    @apply translate-y-[1.5px] shadow-[0_1px_3px_#aeaebed4];
   }
 
   &:disabled {
-    cursor: not-allowed;
-    background-color: rgba(52, 211, 126, 1);
-    box-shadow: 0 4px 16px #aeaebed4;
+    @apply cursor-not-allowed bg-secondary-500 shadow-[0_4px_16px_#aeaebed4];
   }
 }
 
 .transparent {
-  background-color: transparent !important;
+  @apply bg-transparent !important;
 
   &:not(:active) {
-    box-shadow: none !important;
+    @apply shadow-none !important;
   }
 
   &:hover:not(:disabled) {
-    box-shadow: 0 4px 14px #aeaebe96 !important;
+    @apply shadow-[0_4px_14px_#aeaebed4] !important;
   }
 
   &:active:not(:disabled) {
-    box-shadow: 0 0 1px 0 #aeaebec7 !important;
+    @apply shadow-[0_0_1px_0_#aeaebec7] !important;
   }
 
   &:disabled {
-    box-shadow: none !important;
+    @apply shadow-none !important;
   }
 }
 
 .box_shadow {
-  box-shadow: none !important;
+  @apply shadow-none !important;
 
   &:not(:active) {
-    box-shadow: none !important;
+    @apply shadow-none !important;
   }
 
   &:hover:not(:disabled) {
-    box-shadow: none !important;
-    background-color: rgba(249, 249, 255, 1) !important;
+    @apply bg-soft-white-blue shadow-none !important;
   }
 
   &:active:not(:disabled) {
-    box-shadow: none !important;
+    @apply shadow-none !important;
   }
 
   &:disabled {
-    box-shadow: none !important;
+    @apply shadow-none !important;
   }
 }
 
 .transform {
-  transform: none !important;
+  @apply transform-none !important;
 }
diff --git a/src/components/atoms/LabeledRadioButton/styles.module.css b/src/components/atoms/LabeledRadioButton/styles.module.css
@@ -1,5 +1,6 @@
 .input {
   outline: 1px solid var(--color-grey-500) !important;
+  background-color: var(--color-grey-ultra-light);
 
   &:hover:not(:disabled):not(:checked) {
     outline-color: var(--color-primary) !important;

diff --git a/src/components/molecules/QuantityCounterButton/index.tsx b/src/components/molecules/QuantityCounterButton/index.tsx
@@ -3,6 +3,9 @@ import { FaPlus as IconPlus, FaMinus as IconMinus } from 'react-icons/fa6'
 
 import type { QuantityCounterButtonProps } from './types'
 
+const btn =
+  'hover:bg-grey-light-100 flex size-[30px] min-h-[30px] min-w-[30px] cursor-pointer rounded-circle bg-soft-white-blue transition-colors duration-150 ease-linear center active:bg-soft-white-blue disabled:cursor-not-allowed disabled:hover:bg-light-blue-hint disabled:active:bg-light-blue-hint'
+
 export const QuantityCounterButton = ({
   quantity,
   onIncrease,
@@ -25,7 +28,7 @@ export const QuantityCounterButton = ({
           <button
             onClick={onDecrease}
             aria-label="Diminuir quantidade em 1"
-            className="hover:bg-grey-light-blue-hint flex size-[30px] min-h-[30px] min-w-[30px] cursor-pointer rounded-circle bg-light-blue-hint transition-colors duration-200 ease-linear center active:bg-light-blue-hint disabled:cursor-not-allowed disabled:hover:bg-light-blue-hint disabled:active:bg-light-blue-hint"
+            className={btn}
           >
             <IconMinus className="size-12 min-h-12 min-w-12 fill-primary-500" />
           </button>
@@ -37,7 +40,7 @@ export const QuantityCounterButton = ({
       <button
         onClick={onIncrease}
         aria-label="Aumentar quantidade em 1"
-        className="hover:bg-grey-light-blue-hint flex size-[30px] min-h-[30px] min-w-[30px] cursor-pointer rounded-circle bg-light-blue-hint transition-colors duration-200 ease-linear center active:bg-light-blue-hint disabled:cursor-not-allowed disabled:hover:bg-light-blue-hint disabled:active:bg-light-blue-hint"
+        className={btn}
       >
         <IconPlus className="size-12 min-h-12 min-w-12 fill-primary-500" />
       </button>

diff --git a/src/theme/components/skeleton.css b/src/theme/components/skeleton.css
@@ -6,12 +6,12 @@
       0%,
       50%,
       100% {
-        background-color: var(--color-neutral-light-lavender);
+        @apply bg-neutral-light-lavender;
       }
 
       25%,
       75% {
-        background-color: var(--color-light-blue-hint);
+        @apply bg-light-blue-hint;
       }
     }
   }

diff --git a/src/theme/variables/colors.ts b/src/theme/variables/colors.ts
@@ -1,43 +1,48 @@
 export const colors = {
-  'primary-900': 'var(--color-primary-900)',
-  'primary-800': 'var(--color-primary-800)',
-  'primary-700': 'var(--color-primary-700)',
-  'primary-600': 'var(--color-primary-600)',
-  'primary-500': 'var(--color-primary-500)',
-  'primary-400': 'var(--color-primary-400)',
-  'primary-300': 'var(--color-primary-300)',
-  'primary-200': 'var(--color-primary-200)',
-  'primary-100': 'var(--color-primary-100)',
-
-  'secondary-900': 'var(--color-secondary-900)',
-  'secondary-800': 'var(--color-secondary-800)',
-  'secondary-700': 'var(--color-secondary-700)',
-  'secondary-600': 'var(--color-secondary-600)',
-  'secondary-500': 'var(--color-secondary-500)',
-  'secondary-400': 'var(--color-secondary-400)',
-  'secondary-300': 'var(--color-secondary-300)',
-  'secondary-200': 'var(--color-secondary-200)',
-  'secondary-100': 'var(--color-secondary-100)',
-
-  'grey-light-900': 'var(--color-grey-light-900)',
-  'grey-light-800': 'var(--color-grey-light-800)',
-  'grey-light-700': 'var(--color-grey-light-700)',
-  'grey-light-600': 'var(--color-grey-light-600)',
-  'grey-light-500': 'var(--color-grey-light-500)',
-  'grey-light-400': 'var(--color-grey-light-400)',
-  'grey-light-300': 'var(--color-grey-light-300)',
-  'grey-light-200': 'var(--color-grey-light-200)',
-  'grey-light-100': 'var(--color-grey-light-100)',
-
-  'grey-900': 'var(--color-grey-900)',
-  'grey-800': 'var(--color-grey-800)',
-  'grey-700': 'var(--color-grey-700)',
-  'grey-600': 'var(--color-grey-600)',
-  'grey-500': 'var(--color-grey-500)',
-  'grey-400': 'var(--color-grey-400)',
-  'grey-300': 'var(--color-grey-300)',
-  'grey-200': 'var(--color-grey-200)',
-  'grey-100': 'var(--color-grey-100)',
+  primary: {
+    '900': 'var(--color-primary-900)',
+    '800': 'var(--color-primary-800)',
+    '700': 'var(--color-primary-700)',
+    '600': 'var(--color-primary-600)',
+    '500': 'var(--color-primary-500)',
+    '400': 'var(--color-primary-400)',
+    '300': 'var(--color-primary-300)',
+    '200': 'var(--color-primary-200)',
+    '100': 'var(--color-primary-100)'
+  },
+  secondary: {
+    '900': 'var(--color-secondary-900)',
+    '800': 'var(--color-secondary-800)',
+    '700': 'var(--color-secondary-700)',
+    '600': 'var(--color-secondary-600)',
+    '500': 'var(--color-secondary-500)',
+    '400': 'var(--color-secondary-400)',
+    '300': 'var(--color-secondary-300)',
+    '200': 'var(--color-secondary-200)',
+    '100': 'var(--color-secondary-100)'
+  },
+  grey: {
+    '900': 'var(--color-grey-900)',
+    '800': 'var(--color-grey-800)',
+    '700': 'var(--color-grey-700)',
+    '600': 'var(--color-grey-600)',
+    '500': 'var(--color-grey-500)',
+    '400': 'var(--color-grey-400)',
+    '300': 'var(--color-grey-300)',
+    '200': 'var(--color-grey-200)',
+    '100': 'var(--color-grey-100)'
+  },
+  'grey-light': {
+    '900': 'var(--color-grey-light-900)',
+    '800': 'var(--color-grey-light-800)',
+    '700': 'var(--color-grey-light-700)',
+    '600': 'var(--color-grey-light-600)',
+    '500': 'var(--color-grey-light-500)',
+    '400': 'var(--color-grey-light-400)',
+    '300': 'var(--color-grey-light-300)',
+    '200': 'var(--color-grey-light-200)',
+    '100': 'var(--color-grey-light-100)'
+  },
 
   dark: 'var(--color-dark)',
   'dark-translucency': 'var(--color-dark-translucency)',
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,7 +44,6 @@ tsconfig.tsbuildinfo @@
     # linters
     .eslintcache
-    .stylelintcache
     .husky
     # https
@@ Expand Down @@