Merge pull request #217 from NIAEFEUP/color-system

Comprehensive color system

src/lib/error-page/Button.svelte

@@ -5,8 +5,8 @@
     width: keyof typeof widthList,
     text: string;
   const colorList = {
-    primary: { main: 'bg-primary', hover: 'hover:bg-primary' },
-    secondary: { main: 'bg-secondary', hover: 'hover:bg-secondary' },
+    primary: { main: 'bg-muted-red-700', hover: 'hover:bg-muted-red-500' },
+    secondary: { main: 'bg-muted-red-500', hover: 'hover:bg-muted-red-500' },
     red: { main: 'bg-red-500', hover: 'hover:bg-red-500' },
     green: { main: 'bg-green-500', hover: 'hover:bg-green-500' },
     blue: { main: 'bg-blue-500', hover: 'hover:bg-blue-500' }

src/lib/layout/Footer.svelte

@@ -43,7 +43,7 @@
 </script>
 
 <div class="z-10 w-full bg-transparent p-3 max-sm:hidden">
-  <footer class="grid grid-cols-3 justify-between border-t-2 border-secondary p-2 text-white">
+  <footer class="grid grid-cols-3 justify-between border-t-2 border-muted-red-500 p-2 text-white">
     <div class="footer-icons grid w-fit grid-cols-6 gap-4 self-center p-3">
       <Icon
         src={Icons.Instagram}
@@ -104,7 +104,9 @@
 </div>
 
 <div class="hidden w-full bg-transparent p-3 max-sm:block">
-  <footer class="flex flex-col justify-between border-t-2 border-secondary p-2 text-sm text-white">
+  <footer
+    class="flex flex-col justify-between border-t-2 border-muted-red-500 p-2 text-sm text-white"
+  >
     <div class="flex w-full flex-row items-center justify-between self-center p-3">
       <span>NIAEFEUP</span>
       <img src="/images/ni_negative_logo.svg" alt="NIAFEUP logo" class="h-auto w-11" />

src/lib/layout/MemberButton.svelte

@@ -5,10 +5,10 @@
 
 <a
   href="/#"
-  class="grid grid-cols-[1fr_fit-content(100%)] items-center gap-3 rounded-md bg-tertiary60"
+  class="grid grid-cols-[1fr_fit-content(100%)] items-center gap-3 rounded-md bg-muted-red-400/60"
 >
   <p class="w-full whitespace-nowrap pl-2 font-source_code text-sm text-white">Área Membro</p>
-  <div class="rounded-md bg-tertiary px-1 pt-1">
+  <div class="rounded-md bg-muted-red-400 px-1 pt-1">
     <Icon src={Icons.User} color="#411315" size="32px" />
   </div>
 </a>

src/lib/notifications/Snackbar.svelte

@@ -10,15 +10,15 @@
 <div
   out:slide
   in:fly={{ x: 100 }}
-  class="mb-4 flex h-auto w-80 rounded-lg bg-primary px-3 py-2"
+  class="mb-4 flex h-auto w-80 rounded-lg bg-muted-red-700 px-3 py-2"
   role="status"
 >
   <div class="m-auto ml-3 font-medium text-white">
     {notification.message}
   </div>
   <div class="ml-1 flex flex-col">
     <button
-      class="rounded-lg p-1.5 hover:bg-secondary"
+      class="rounded-lg p-1.5 hover:bg-muted-red-500"
       on:click={() => notification.close()}
       aria-label="Close"
     >

tailwind.config.cjs

@@ -1,18 +1,34 @@
-const primaryColor = '#872020FF';
-const secondaryColor = '#B33636FF';
-const tertiaryColor = '#C04343FF';
-const tertiary60Color = '#C0434399';
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{html,js,svelte,ts,stories.js,stories.ts}'],
   theme: {
     extend: {
       colors: {
-        primary: primaryColor,
-        secondary: secondaryColor,
-        tertiary: tertiaryColor,
-        tertiary60: tertiary60Color
+        taupe: {
+          300: '#AB8586',
+          200: '#D7C0C0',
+          100: '#FFE9E9'
+        },
+        'vivid-red': {
+          950: '#4D0000',
+          900: '#570000',
+          700: '#A40202',
+          400: '#DC4F47'
+        },
+        'muted-red': {
+          800: '#740F0F',
+          700: '#872020',
+          600: '#9D2B2B',
+          500: '#B33636',
+          400: '#C04343',
+          300: '#DF6363'
+        },
+        rose: {
+          950: '#411315',
+          600: '#8D3739',
+          400: '#A46868',
+          200: '#DAB5B5'
+        }
       },
 
       fontFamily: {