From ee61eecaefcf3ec605ae7e27cc53734fb41b7858 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89verton=20Toffanetto?= Date: Mon, 11 Mar 2024 03:16:27 -0300 Subject: [PATCH] refactor: improvement theme --- .gitignore | 1 - .../atoms/IconButton/styles.module.css | 40 ++++----- .../LabeledRadioButton/styles.module.css | 1 + .../molecules/QuantityCounterButton/index.tsx | 7 +- src/theme/components/skeleton.css | 4 +- src/theme/variables/colors.ts | 83 ++++++++++--------- 6 files changed, 67 insertions(+), 69 deletions(-) diff --git a/.gitignore b/.gitignore index cbc78eb..20071da 100644 --- 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 index a57e284..3c5f7e4 100644 --- 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 index 408594a..a73f585 100644 --- 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 index c7f65f6..5ef4b71 100644 --- 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 = ({ @@ -37,7 +40,7 @@ export const QuantityCounterButton = ({ diff --git a/src/theme/components/skeleton.css b/src/theme/components/skeleton.css index 5125b5b..9c168a6 100644 --- 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 index f1d4377..da0cf8c 100644 --- 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)',