refactor: update colors

src/app/(home)/components/ContentCustomerOrderModal/components/FlavorQuantitySelectorGroup/index.tsx

@@ -65,7 +65,7 @@ export const FlavorQuantitySelectorGroup = ({
           <Fragment key={option.id}>
             <div className="flex-nowrap jc-between ai-start row-full g-16">
               <div className="col-full">
-                <h4 className="text-14 font-700 uppercase text-primary">
+                <h4 className="text-14 font-700 uppercase text-primary-500">
                   {option.name}
                 </h4>
                 <p className="text-14">{option.description}</p>

src/app/(home)/components/ContentCustomerOrderModal/components/SectionProduct/index.tsx

@@ -17,7 +17,7 @@ export const SectionProduct = ({
     <section className="col-full">
       <div className="sticky top-0 z-base border-y border-white bg-soft-white-blue px-16 py-8 ai-start col-full g-4 sm:px-24 sm:py-12">
         <div className="flex-nowrap jc-between ai-center row-full g-16">
-          <h3 className="text-16 font-700 uppercase text-primary sm:text-18">
+          <h3 className="text-16 font-700 uppercase text-primary-500 sm:text-18">
             {title}
           </h3>
           <Badge label={completed} color={colorCompleted} />

src/app/error.tsx

@@ -40,7 +40,7 @@ export const Error = ({
           Caso prefira, clique no botão abaixo e retorne para a página inicial:
         </p>
         <button
-          className="bg-secondary text-16 uppercase"
+          className="bg-secondary-500 text-16 uppercase"
           onClick={() => push('/')}
         >
           Ir para a página inicial

src/app/global-error.tsx

@@ -56,7 +56,7 @@ const GlobalError = ({ error, reset }: ErrorProps) => {
             inicial:
           </p>
           <button
-            className="bg-secondary text-16 uppercase"
+            className="bg-secondary-500 text-16 uppercase"
             onClick={() => push('/')}
           >
             Página Inicial

src/app/not-found.tsx

@@ -28,7 +28,7 @@ const NotFound = () => {
           Caso prefira, clique no botão abaixo e retorne para a página inicial:
         </p>
         <button
-          className="bg-secondary text-16 uppercase"
+          className="bg-secondary-500 text-16 uppercase"
           onClick={() => push('/')}
         >
           Página Inicial

src/components/atoms/Avatar/index.tsx

@@ -31,7 +31,7 @@ const Content = ({ imageUrl, name }: AvatarProps) =>
 
 export const Avatar = ({ name, imageUrl }: AvatarProps) => (
   <div
-    className="relative flex size-32 overflow-hidden rounded-circle border-[1.5px] border-secondary bg-soft-white-blue center"
+    className="relative flex size-32 overflow-hidden rounded-circle border-[1.5px] border-secondary-500 bg-soft-white-blue center"
     role="figure"
   >
     <Content name={name} imageUrl={imageUrl} />

src/components/atoms/Badge/index.tsx

@@ -3,8 +3,8 @@ import { clsx } from 'clsx'
 import type { BadgeProps, Colors } from './types'
 
 const colors = (color: Colors) => ({
-  'bg-secondary': color === 'green',
-  'text-white bg-grey': color === 'grey',
+  'bg-secondary-500': color === 'green',
+  'text-white bg-grey-500': color === 'grey',
   'text-white bg-cherry': color === 'red'
 })
 

src/components/atoms/Button/index.tsx

@@ -6,7 +6,7 @@ import { GoSync as IconSync } from 'react-icons/go'
 import type { ButtonProps } from './types'
 
 const btn =
-  'flex items-center justify-center rounded-8 bg-secondary font-700 shadow-[0_4px_16px_#aeaebed4] transition-all duration-150  ease-linear hover:translate-y-[-1.5px] hover:shadow-[0_5px_18px_#aeaebed4] active:translate-y-[1.5px] active:shadow-[0_1px_3px_#aeaebed4] disabled:cursor-not-allowed disabled:bg-secondary disabled:shadow-[0_4px_16px_#aeaebed4]'
+  'flex items-center justify-center rounded-8 bg-secondary-500 font-700 shadow-[0_4px_16px_#aeaebed4] transition-all duration-150  ease-linear hover:translate-y-[-1.5px] hover:shadow-[0_5px_18px_#aeaebed4] active:translate-y-[1.5px] active:shadow-[0_1px_3px_#aeaebed4] disabled:cursor-not-allowed disabled:bg-secondary-500 disabled:shadow-[0_4px_16px_#aeaebed4]'
 
 const btnSize = {
   small: 'py-4 px-12 g-4 text-12',

src/components/atoms/CartButton/index.tsx

@@ -18,7 +18,7 @@ export const CartButton = ({ label }: CartButtonProps) => {
 
   return (
     <button
-      className="flex max-w-fit rounded-60 bg-secondary px-12 py-6 text-14 font-600 transition-all duration-150 ease-linear center g-8 hover:bg-green"
+      className="flex max-w-fit rounded-60 bg-secondary-500 px-12 py-6 text-14 font-600 transition-all duration-150 ease-linear center g-8 hover:bg-green"
       aria-label="Abrir carrinho de compras"
     >
       <img

src/components/atoms/IconButton/index.tsx

@@ -31,7 +31,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
     <button
       ref={ref}
       className={clsx(
-        'flex size-fit translate-y-0 bg-secondary transition-all duration-150 ease-linear center',
+        'flex size-fit translate-y-0 bg-secondary-500 transition-all duration-150 ease-linear center',
         S.button,
         btnSize[size],
         isTransparent && S.transparent,

src/components/atoms/LabeledRadioButton/styles.module.css

@@ -1,14 +1,14 @@
 .input {
-  outline: 1px solid var(--color-grey) !important;
+  outline: 1px solid var(--color-grey-500) !important;
 
   &:hover:not(:disabled):not(:checked) {
     outline-color: var(--color-primary) !important;
     background-color: var(--color-primary-dark-translucent);
   }
 
   &:checked {
-    outline-color: var(--color-primary) !important;
-    background-color: var(--color-primary);
+    outline-color: var(--color-primary-500) !important;
+    background-color: var(--color-primary-500);
     animation-duration: 0.1s;
     animation-iteration-count: 4;
     animation-direction: alternate;

src/components/molecules/CardProduct/index.tsx

@@ -32,7 +32,7 @@ export const CardProduct = ({
         />
       </div>
       <div className="flex-1 flex-nowrap gap-x-4 gap-y-8 jc-between col-full">
-        <h3 className="line-clamp-2 text-16 font-700 uppercase text-primary">
+        <h3 className="line-clamp-2 text-16 font-700 uppercase text-primary-500">
           {product}
         </h3>
         <div className="flex-wrap jc-between ai-end row">

src/components/molecules/QuantityCounterButton/index.tsx

@@ -27,7 +27,7 @@ export const QuantityCounterButton = ({
             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"
           >
-            <IconMinus className="size-12 min-h-12 min-w-12 fill-primary" />
+            <IconMinus className="size-12 min-h-12 min-w-12 fill-primary-500" />
           </button>
           <span className="flex h-full flex-1 text-center text-16 font-600 center">
             {quantity}
@@ -39,7 +39,7 @@ export const QuantityCounterButton = ({
         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"
       >
-        <IconPlus className="size-12 min-h-12 min-w-12 fill-primary" />
+        <IconPlus className="size-12 min-h-12 min-w-12 fill-primary-500" />
       </button>
     </div>
   )

src/components/molecules/Textarea/index.tsx

@@ -26,10 +26,10 @@ export const Textarea = ({
       )}
       <textarea
         className={clsx(
-          'resize-none rounded-8 border border-solid px-16 py-8 text-16 font-600 text-grey-dark row-full placeholder:font-500 placeholder:text-grey-light hover:border hover:border-solid focus:border focus:border-solid focus:border-grey-light focus:outline-[1.5px] focus:outline-offset-[-2px]',
+          'resize-none rounded-8 border border-solid px-16 py-8 text-16 font-600 text-grey-dark row-full placeholder:font-500 placeholder:text-grey-light-500 hover:border hover:border-solid focus:border focus:border-solid focus:border-grey-light-500 focus:outline-[1.5px] focus:outline-offset-[-2px]',
           isErrored
             ? 'border-error outline-error focus:outline-error'
-            : 'border-grey-light hover:border-grey-dark focus:outline-secondary'
+            : 'border-grey-light-500 hover:border-grey-dark focus:outline-secondary-500'
         )}
         rows={rows}
         id={id}
@@ -47,7 +47,7 @@ export const Textarea = ({
             <small
               className={clsx(
                 'ml-auto whitespace-nowrap text-12 font-600',
-                isErrored ? 'text-error' : 'text-grey'
+                isErrored ? 'text-error' : 'text-grey-500'
               )}
             >
               {value?.length}/{maxLength}

src/components/organisms/BottomBar/index.tsx

@@ -39,7 +39,7 @@ export const BottomBar = () => {
               className={clsx(
                 isActiveLink(href)
                   ? '[&>svg>path]:text-green [&>svg]:text-green'
-                  : '[&>svg>path]:text-grey [&>svg]:text-grey',
+                  : '[&>svg>path]:text-grey-500 [&>svg]:text-grey-500',
                 'size-fit ai-center col [&>svg]:size-20 [&>svg]:min-h-20 [&>svg]:min-w-20'
               )}
             >

src/components/organisms/Footer/index.tsx

@@ -1,5 +1,5 @@
 export const Footer = () => (
-  <footer className="bottom-0 mt-auto w-full bg-primary py-32">
+  <footer className="bottom-0 mt-auto w-full bg-primary-500 py-32">
     <div className="m-auto p-16 text-white jc-center container-row">
       Desenvolvido por
       <a

src/components/organisms/TopBar/index.tsx

@@ -1,7 +1,7 @@
 import { Avatar, CartButton, Logo } from 'components/atoms'
 
 export const TopBar = () => (
-  <div className="sticky top-0 z-header h-[50px] border-b-2 border-solid border-secondary bg-primary col-full">
+  <div className="sticky top-0 z-header h-[50px] border-b-2 border-solid border-secondary-500 bg-primary-500 col-full">
     <nav className="m-auto h-full flex-nowrap jc-between ai-center container-row">
       <Logo />
       <div className="flex-nowrap ai-center row g-24">

src/theme/components/underlined-title.css

@@ -1,5 +1,5 @@
 @layer components {
   .underlined-title {
-    @apply max-w-fit text-20 font-700 uppercase text-primary after-base after:mt-8 after:h-4 after:w-[30%] after:rounded-4 after:bg-secondary;
+    @apply max-w-fit text-20 font-700 uppercase text-primary-500 after-base after:mt-8 after:h-4 after:w-[30%] after:rounded-4 after:bg-secondary-500;
   }
 }

src/theme/reset.css

@@ -95,7 +95,7 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply rounded-20 border border-solid border-soft-white-blue bg-grey-light;
+    @apply rounded-20 border border-solid border-soft-white-blue bg-grey-light-500;
   }
 
   :root {

src/theme/variables/colors.css

@@ -19,7 +19,29 @@
   --color-secondary-200: hsl(148 64% 67% / 1);
   --color-secondary-100: hsl(148 64% 72% / 1);
 
+  --color-grey-light-900: hsl(231 25% 50% / 1);
+  --color-grey-light-800: hsl(231 25% 55% / 1);
+  --color-grey-light-700: hsl(231 25% 60% / 1);
+  --color-grey-light-600: hsl(231 25% 65% / 1);
+  --color-grey-light-500: hsl(231 25% 70% / 1);
+  --color-grey-light-400: hsl(231 25% 75% / 1);
+  --color-grey-light-300: hsl(231 25% 80% / 1);
+  --color-grey-light-200: hsl(231 25% 85% / 1);
+  --color-grey-light-100: hsl(231 25% 90% / 1);
+
+  --color-grey-900: hsl(217 16% 24% / 1);
+  --color-grey-800: hsl(217 16% 29% / 1);
+  --color-grey-700: hsl(217 16% 34% / 1);
+  --color-grey-600: hsl(217 16% 39% / 1);
+  --color-grey-500: hsl(217 16% 44% / 1);
+  --color-grey-400: hsl(217 16% 49% / 1);
+  --color-grey-300: hsl(217 16% 54% / 1);
+  --color-grey-200: hsl(217 16% 59% / 1);
+  --color-grey-100: hsl(217 16% 64% / 1);
+
   --color-dark: hsl(248 38% 8% / 1);
+  --color-grey-dark: hsl(217 19% 27% / 1);
+  --color-grey-ultra-light: hsl(240 45% 94% / 1);
 
   --color-neutral-light-lavender: hsl(240 32% 91% / 1);
   --color-soft-white-blue: hsl(240 100% 98% / 1);
@@ -29,11 +51,6 @@
   --color-green: hsl(158 65% 48% / 1);
   --color-cherry: hsl(348 76% 52% / 1);
 
-  --color-grey-dark: hsl(217 19% 27% / 1);
-  --color-grey: hsl(217 16% 44% / 1);
-  --color-grey-light: hsl(231 25% 70% / 1);
-  --color-grey-ultra-light: hsl(240 45% 94% / 1);
-
   --color-error: hsl(0 81% 55% / 1);
   --color-success: hsl(161 86% 35% / 1);
   --color-warning: hsl(29 100% 50% / 1);

src/theme/variables/colors.ts

@@ -1,7 +1,43 @@
 export const colors = {
-  primary: 'var(--color-primary-500)',
+  '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: 'var(--color-secondary-500)',
+  '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)',
 
   dark: 'var(--color-dark)',
   'dark-translucency': 'var(--color-dark-translucency)',
@@ -16,8 +52,6 @@ export const colors = {
   cherry: 'var(--color-cherry)',
 
   'grey-dark': 'var(--color-grey-dark)',
-  grey: 'var(--color-grey)',
-  'grey-light': 'var(--color-grey-light)',
 
   error: 'var(--color-error)',
   success: 'var(--color-success)',