From d61379ac2d257eecce2445395bd748a8c75f1014 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <me@hazemkrimi.tech>
Date: Mon, 7 Apr 2025 16:29:02 +0100
Subject: [PATCH] Update default theme

---
 src/components/Alert/index.stories.ts       |  4 +-
 src/components/Alert/index.tsx              |  7 +--
 src/components/Alert/styles.ts              | 68 ++++-----------------
 src/components/Avatar/index.stories.ts      |  4 +-
 src/components/Avatar/index.tsx             |  2 +-
 src/components/Avatar/styles.ts             |  2 +-
 src/components/Button/index.stories.ts      |  4 +-
 src/components/Button/index.tsx             |  2 +-
 src/components/Button/styles.ts             |  2 +-
 src/components/Card/index.stories.ts        |  4 +-
 src/components/Card/index.tsx               |  2 +-
 src/components/CheckBox/index.stories.ts    |  4 +-
 src/components/CheckBox/index.tsx           |  2 +-
 src/components/CheckBox/styles.ts           | 47 +++-----------
 src/components/Chip/index.stories.ts        |  4 +-
 src/components/Chip/index.tsx               |  7 +--
 src/components/Chip/styles.ts               | 13 ++--
 src/components/IconButton/index.stories.tsx |  2 +-
 src/components/IconButton/index.tsx         |  2 +-
 src/components/IconButton/styles.ts         |  2 +-
 src/components/ImagePreview/index.tsx       |  7 +--
 src/components/ImagePreview/styles.ts       | 15 +++--
 src/components/Input/index.stories.ts       |  4 +-
 src/components/Input/index.tsx              |  9 ++-
 src/components/Input/styles.ts              | 63 +++++++------------
 src/components/Link/index.tsx               |  7 +--
 src/components/Link/styles.ts               | 53 ++++++----------
 src/components/Modal/index.stories.ts       |  4 +-
 src/components/Modal/index.tsx              |  2 +-
 src/components/Search/index.stories.ts      |  4 +-
 src/components/Search/index.tsx             |  9 ++-
 src/components/Search/styles.ts             | 39 +++++-------
 src/components/Select/index.stories.ts      |  4 +-
 src/components/Select/index.tsx             |  9 ++-
 src/components/Select/styles.ts             | 27 +++-----
 src/components/Spinner/index.stories.ts     |  4 +-
 src/components/Spinner/index.tsx            |  9 ++-
 src/components/Spinner/styles.ts            | 13 ++--
 src/components/Text/index.stories.ts        |  4 +-
 src/components/Text/index.tsx               |  7 +--
 src/components/Text/styles.ts               | 23 +++----
 src/components/TextArea/index.stories.ts    |  4 +-
 src/components/TextArea/index.tsx           |  9 ++-
 src/components/TextArea/styles.ts           | 27 +++-----
 src/styled.d.ts                             | 11 +---
 src/themes/index.ts                         | 55 ++++++-----------
 46 files changed, 213 insertions(+), 393 deletions(-)

diff --git a/src/components/Alert/index.stories.ts b/src/components/Alert/index.stories.ts
index dc9e0dd..516f40b 100644
--- a/src/components/Alert/index.stories.ts
+++ b/src/components/Alert/index.stories.ts
@@ -11,7 +11,7 @@ const meta = {
   tags: ['!autodocs'],
   argTypes: {
     text: { control: 'text' },
-    color: { options: ['client', 'productOwner', 'developer', 'admin'] },
+    color: { options: ['primary', 'secondary', 'tertiary'] },
   },
 } satisfies Meta<typeof Alert>;
 
@@ -22,6 +22,6 @@ type Story = StoryObj<typeof meta>;
 export const Example: Story = {
   args: {
     text: 'Alert',
-		color: 'client'
+		color: 'primary'
   },
 };
diff --git a/src/components/Alert/index.tsx b/src/components/Alert/index.tsx
index b696d30..981b52b 100644
--- a/src/components/Alert/index.tsx
+++ b/src/components/Alert/index.tsx
@@ -3,10 +3,9 @@ import { Wrapper } from './styles';
 export type AlertProps = {
   className?: string;
   color:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'success'
     | 'warning'
     | 'error';
diff --git a/src/components/Alert/styles.ts b/src/components/Alert/styles.ts
index c1ace9e..d0ac897 100644
--- a/src/components/Alert/styles.ts
+++ b/src/components/Alert/styles.ts
@@ -2,13 +2,12 @@ import styled, { css } from 'styled-components';
 
 type WrapperProps = {
   color:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
-    | 'success'
-    | 'warning'
-    | 'error';
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'success'
+  | 'warning'
+  | 'error';
 };
 
 export const Wrapper = styled.div<WrapperProps>`
@@ -18,55 +17,10 @@ export const Wrapper = styled.div<WrapperProps>`
   border-radius: 10px;
 
   ${({ color, theme }) => {
-    switch (color) {
-      case 'client':
-        return css`
-          border: 1px solid ${theme.colors.client.main};
-          color: ${theme.colors.client.main};
-          background: ${theme.colors.client.light};
-        `;
-      case 'productOwner':
-        return css`
-          border: 1px solid ${theme.colors.productOwner.main};
-          color: ${theme.colors.productOwner.main};
-          background: ${theme.colors.productOwner.light};
-        `;
-      case 'developer':
-        return css`
-          border: 1px solid ${theme.colors.developer.main};
-          color: ${theme.colors.developer.main};
-          background: ${theme.colors.developer.light};
-        `;
-      case 'admin':
-        return css`
-          border: 1px solid ${theme.colors.admin.main};
-          color: ${theme.colors.admin.main};
-          background: ${theme.colors.admin.light};
-        `;
-      case 'success':
-        return css`
-          border: 1px solid ${theme.colors.success.main};
-          color: ${theme.colors.success.main};
-          background: ${theme.colors.success.light};
-        `;
-      case 'warning':
-        return css`
-          border: 1px solid ${theme.colors.warning.main};
-          color: ${theme.colors.warning.main};
-          background: ${theme.colors.warning.light};
-        `;
-      case 'error':
-        return css`
-          border: 1px solid ${theme.colors.error.main};
-          color: ${theme.colors.error.main};
-          background: ${theme.colors.error.light};
-        `;
-      default:
-        return css`
-          border: 1px solid ${theme.colors.client.main};
-          color: ${theme.colors.client.main};
-          background: ${theme.colors.client.light};
-        `;
-    }
+    return css`
+			border: 1px solid ${theme.colors[color].main};
+			color: ${theme.colors[color].main};
+			background: ${theme.colors[color].light};
+		`;
   }}
 `;
diff --git a/src/components/Avatar/index.stories.ts b/src/components/Avatar/index.stories.ts
index 2ccd591..91629d0 100644
--- a/src/components/Avatar/index.stories.ts
+++ b/src/components/Avatar/index.stories.ts
@@ -10,7 +10,7 @@ const meta = {
   },
   argTypes: {
     text: { control: 'text' },
-    color: { options: ['client', 'productOwner', 'developer', 'admin'] },
+    color: { options: ['primary', 'secondary', 'tertiary'] },
     size: { options: ['big', 'small'] },
   },
 } satisfies Meta<typeof Avatar>;
@@ -22,6 +22,6 @@ type Story = StoryObj<typeof meta>;
 export const Example: Story = {
   args: {
     text: 'A',
-		color: 'admin'
+		color: 'tertiary'
   },
 };
diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
index a294427..512f1f9 100644
--- a/src/components/Avatar/index.tsx
+++ b/src/components/Avatar/index.tsx
@@ -2,7 +2,7 @@ import { Wrapper } from './styles';
 
 export type AvatarProps = {
   className?: string;
-  color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
+  color?: 'primary' | 'secondary' | 'tertiary' | string;
   size?: 'small' | 'big';
   text: string;
 };
diff --git a/src/components/Avatar/styles.ts b/src/components/Avatar/styles.ts
index aa33bb6..3852a70 100644
--- a/src/components/Avatar/styles.ts
+++ b/src/components/Avatar/styles.ts
@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 
 type WrapperProps = {
-  color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
+  color?: 'primary' | 'secondary' | 'tertiary' | string;
   size?: 'small' | 'big';
 };
 
diff --git a/src/components/Button/index.stories.ts b/src/components/Button/index.stories.ts
index 2d97718..e78a7e8 100644
--- a/src/components/Button/index.stories.ts
+++ b/src/components/Button/index.stories.ts
@@ -9,7 +9,7 @@ const meta = {
     layout: 'centered',
   },
   argTypes: {
-    color: { options: ['client', 'productOwner', 'developer', 'admin', 'error'] },
+    color: { options: ['primary', 'secondary', 'tertiary', 'error'] },
     text: { control: 'text' },
   },
 } satisfies Meta<typeof Button>;
@@ -20,7 +20,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
-		color: 'admin',
+		color: 'secondary',
 		text: 'Hello, World!',
 		variant: 'primary-action'
   },
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 74f6896..be750cf 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -3,7 +3,7 @@ import Spinner from '../Spinner';
 import { Wrapper } from './styles';
 
 export type ButtonProps = {
-  color: 'client' | 'productOwner' | 'developer' | 'admin' | 'error';
+  color: 'primary' | 'secondary' | 'tertiary' | 'error';
   size?: 'small' | 'big';
   variant?: 'primary-action' | 'secondary-action' | 'outlined' | 'text';
   type?: 'submit' | 'button' | 'reset';
diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
index c6bb982..67f6581 100644
--- a/src/components/Button/styles.ts
+++ b/src/components/Button/styles.ts
@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 
 type WrapperProps = {
-  color: 'client' | 'productOwner' | 'developer' | 'admin' | 'error';
+  color: 'primary' | 'secondary' | 'tertiary' | 'error';
   size?: 'small' | 'big';
   variant?: 'primary-action' | 'secondary-action' | 'outlined' | 'text';
   iconLeft?: React.ReactNode;
diff --git a/src/components/Card/index.stories.ts b/src/components/Card/index.stories.ts
index 1e9a13c..b9b2bfb 100644
--- a/src/components/Card/index.stories.ts
+++ b/src/components/Card/index.stories.ts
@@ -9,7 +9,7 @@ const meta = {
     layout: 'centered',
   },
   argTypes: {
-    color: { options: ['client', 'productOwner', 'developer', 'admin', 'error'] },
+    color: { options: ['primary', 'secondary', 'tertiary', 'error'] },
   },
 } satisfies Meta<typeof Card>;
 
@@ -19,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
-		color: 'developer',
+		color: 'secondary',
 		title: 'Card title',
 		description: 'Card description',
 		selected: true
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
index c604233..68f025d 100644
--- a/src/components/Card/index.tsx
+++ b/src/components/Card/index.tsx
@@ -9,7 +9,7 @@ export type CardProps = {
   selectable?: boolean;
   selected?: boolean;
   toggleSelect?: () => void;
-  color: 'client' | 'productOwner' | 'developer' | 'admin';
+  color: 'primary' | 'secondary' | 'tertiary';
 };
 
 const Card = ({
diff --git a/src/components/CheckBox/index.stories.ts b/src/components/CheckBox/index.stories.ts
index d62a943..6386c30 100644
--- a/src/components/CheckBox/index.stories.ts
+++ b/src/components/CheckBox/index.stories.ts
@@ -10,7 +10,7 @@ const meta = {
   },
   tags: ['!autodocs'],
   argTypes: {
-    color: { options: ['client', 'productOwner', 'developer', 'admin'] },
+    color: { options: ['primary', 'secondary', 'tertiary'] },
     label: { control: 'text' },
   },
 } satisfies Meta<typeof CheckBox>;
@@ -21,7 +21,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
-		color: 'admin',
+		color: 'primary',
 		label: 'Hello, World!',
 		checked: false,
 		onClick: () => window.alert('Clicked!'),
diff --git a/src/components/CheckBox/index.tsx b/src/components/CheckBox/index.tsx
index 510d883..5e0aed9 100644
--- a/src/components/CheckBox/index.tsx
+++ b/src/components/CheckBox/index.tsx
@@ -6,7 +6,7 @@ import { Check } from '../../assets';
 
 export type CheckBoxProps = {
   className?: string;
-  color?: 'client' | 'productOwner' | 'developer' | 'admin';
+  color?: 'primary' | 'secondary' | 'tertiary';
   label: string;
   checked: boolean;
   onClick: () => void;
diff --git a/src/components/CheckBox/styles.ts b/src/components/CheckBox/styles.ts
index 28cfdcb..5b768a9 100644
--- a/src/components/CheckBox/styles.ts
+++ b/src/components/CheckBox/styles.ts
@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 
 type WrapperProps = {
-  color?: 'client' | 'productOwner' | 'developer' | 'admin';
+  color?: 'primary' | 'secondary' | 'tertiary';
   checked: boolean;
 };
 
@@ -26,49 +26,18 @@ export const Wrapper = styled.div<WrapperProps>`
   }
 
   ${({ checked, color, theme }) => {
-    if (!checked)
+    if (!checked || !color)
       return css`
         .checkbox {
           border: 2px solid ${theme.colors.black.main};
           background: ${theme.colors.white.main};
         }
       `;
-    switch (color) {
-      case 'client':
-        return css`
-          .checkbox {
-            border: none;
-            background: ${theme.colors.client.main};
-          }
-        `;
-      case 'productOwner':
-        return css`
-          .checkbox {
-            border: none;
-            background: ${theme.colors.productOwner.main};
-          }
-        `;
-      case 'developer':
-        return css`
-          .checkbox {
-            border: none;
-            background: ${theme.colors.developer.main};
-          }
-        `;
-      case 'admin':
-        return css`
-          .checkbox {
-            border: none;
-            background: ${theme.colors.admin.main};
-          }
-        `;
-      default:
-        return css`
-          .checkbox {
-            border: none;
-            background: ${theme.colors.client.main};
-          }
-        `;
-    }
+    return css`
+			.checkbox {
+				border: none;
+				background: ${theme.colors[color].main};
+			}
+		`;
   }}
 `;
diff --git a/src/components/Chip/index.stories.ts b/src/components/Chip/index.stories.ts
index 0269a64..2e4ec37 100644
--- a/src/components/Chip/index.stories.ts
+++ b/src/components/Chip/index.stories.ts
@@ -9,7 +9,7 @@ const meta = {
     layout: 'centered',
   },
   argTypes: {
-    color: { options: ['client', 'productOwner', 'developer', 'admin'] },
+    color: { options: ['primary', 'secondary', 'tertiary'] },
     text: { control: 'text' },
     variant: { options: ['outlined', 'filled'] },
   },
@@ -21,7 +21,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
-		color: 'admin',
+		color: 'tertiary',
 		text: 'Hello, World!',
 		variant: 'filled'
   },
diff --git a/src/components/Chip/index.tsx b/src/components/Chip/index.tsx
index 625b4c6..fa60443 100644
--- a/src/components/Chip/index.tsx
+++ b/src/components/Chip/index.tsx
@@ -5,10 +5,9 @@ import Text from '../Text';
 export type ChipProps = {
   variant?: 'outlined' | 'filled';
   color:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'success'
     | 'warning'
     | 'error';
diff --git a/src/components/Chip/styles.ts b/src/components/Chip/styles.ts
index 16245d7..5276b5e 100644
--- a/src/components/Chip/styles.ts
+++ b/src/components/Chip/styles.ts
@@ -2,13 +2,12 @@ import styled, { css } from 'styled-components';
 
 type WrapperProps = {
   color:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
-    | 'success'
-    | 'warning'
-    | 'error';
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'success'
+  | 'warning'
+  | 'error';
   variant: 'outlined' | 'filled';
 };
 
diff --git a/src/components/IconButton/index.stories.tsx b/src/components/IconButton/index.stories.tsx
index 748ab15..353b359 100644
--- a/src/components/IconButton/index.stories.tsx
+++ b/src/components/IconButton/index.stories.tsx
@@ -20,7 +20,7 @@ export const Example: Story = {
   render: () => {
     return (
       <IconButton
-        color='admin'
+        color='secondary'
         icon={<Add />}
         size='medium'
         onClick={() => window.alert('Hello, World!')}
diff --git a/src/components/IconButton/index.tsx b/src/components/IconButton/index.tsx
index 5bc3629..a4af4ac 100644
--- a/src/components/IconButton/index.tsx
+++ b/src/components/IconButton/index.tsx
@@ -1,7 +1,7 @@
 import { Wrapper } from './styles';
 
 export type IconButtonProps = {
-  color?: 'client' | 'productOwner' | 'developer' | 'admin';
+  color?: 'primary' | 'secondary' | 'tertiary';
   size?: 'small' | 'medium' | 'big';
   icon?: React.ReactNode;
   onClick: () => void;
diff --git a/src/components/IconButton/styles.ts b/src/components/IconButton/styles.ts
index dd549ef..6760bb5 100644
--- a/src/components/IconButton/styles.ts
+++ b/src/components/IconButton/styles.ts
@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 
 type WrapperProps = {
-  color?: 'client' | 'productOwner' | 'developer' | 'admin';
+  color?: 'primary' | 'secondary' | 'tertiary';
   size?: 'small' | 'medium' | 'big';
   icon?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
 };
diff --git a/src/components/ImagePreview/index.tsx b/src/components/ImagePreview/index.tsx
index 22630c2..3e25c5b 100644
--- a/src/components/ImagePreview/index.tsx
+++ b/src/components/ImagePreview/index.tsx
@@ -4,10 +4,9 @@ import { Upload, Close } from '../../assets';
 export type ImagePreviewProps = {
   className?: string;
   color?:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'success'
     | 'warning'
     | 'error'
diff --git a/src/components/ImagePreview/styles.ts b/src/components/ImagePreview/styles.ts
index 755f689..cabca6e 100644
--- a/src/components/ImagePreview/styles.ts
+++ b/src/components/ImagePreview/styles.ts
@@ -2,10 +2,9 @@ import styled, { css } from 'styled-components';
 
 type WrapperProps = {
   color?:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'success'
     | 'warning'
     | 'error'
@@ -31,7 +30,7 @@ export const Wrapper = styled.div<WrapperProps>`
       ${({ deletable, color, theme }) =>
         deletable &&
         css`
-          border: 2px solid ${theme.colors[color || 'client'].main};
+          border: 2px solid ${theme.colors[color || 'primary'].main};
         `}
 
       .close {
@@ -40,7 +39,7 @@ export const Wrapper = styled.div<WrapperProps>`
     }
 
     .close {
-      background: ${({ color, theme }) => theme.colors[color || 'client'].main};
+      background: ${({ color, theme }) => theme.colors[color || 'primary'].main};
       border-radius: 50%;
       display: flex;
       align-items: center;
@@ -67,7 +66,7 @@ export const Wrapper = styled.div<WrapperProps>`
     padding: 150px 30px;
     position: relative;
     border: 2px solid
-      ${({ color, theme }) => theme.colors[color || 'client'].main};
+      ${({ color, theme }) => theme.colors[color || 'primary'].main};
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -92,7 +91,7 @@ export const Wrapper = styled.div<WrapperProps>`
       height: 25px;
 
       path {
-        stroke: ${({ color, theme }) => theme.colors[color || 'client'].main};
+        stroke: ${({ color, theme }) => theme.colors[color || 'primary'].main};
       }
     }
   }
diff --git a/src/components/Input/index.stories.ts b/src/components/Input/index.stories.ts
index 21eaa4b..499b0ec 100644
--- a/src/components/Input/index.stories.ts
+++ b/src/components/Input/index.stories.ts
@@ -9,7 +9,7 @@ const meta = {
     layout: 'centered',
   },
   argTypes: {
-    color: { options: ['client', 'productOwner', 'developer', 'admin'] },
+    color: { options: ['primary', 'secondary', 'tertiary'] },
   },
 } satisfies Meta<typeof Input>;
 
@@ -19,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
-		color: 'developer',
+		color: 'tertiary',
 		onChange: () => {}
   },
 };
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index c15312b..0104d28 100644
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@@ -6,10 +6,9 @@ import { Wrapper } from './styles';
 export type InputProps = {
   className?: string;
   color?:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'success'
     | 'warning'
     | 'error'
@@ -31,7 +30,7 @@ export type InputProps = {
 const Input = ({
   type = 'text',
   file = false,
-  color = 'client',
+  color = 'primary',
   label,
   name,
   placeholder,
diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts
index 5dda676..5c468e2 100644
--- a/src/components/Input/styles.ts
+++ b/src/components/Input/styles.ts
@@ -2,10 +2,9 @@ import styled, { css } from 'styled-components';
 
 type WrapperProps = {
   color?:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'success'
     | 'warning'
     | 'error'
@@ -94,76 +93,58 @@ export const Wrapper = styled.div<WrapperProps>`
 
   ${({ color, theme }) => {
     switch (color) {
-      case 'client':
+      case 'primary':
         return css`
           .input {
-            background: ${theme.colors.client.light};
+            background: ${theme.colors.primary.light};
 
             &:focus-within {
-              background: ${theme.colors.client.main};
+              background: ${theme.colors.primary.main};
             }
           }
 
           input[type='file'] {
-            color: ${theme.colors.client.main};
+            color: ${theme.colors.primary.main};
           }
 
           .icon svg path {
-            stroke: ${theme.colors.client.main};
+            stroke: ${theme.colors.primary.main};
           }
         `;
-      case 'productOwner':
+      case 'secondary':
         return css`
           .input {
-            background: ${theme.colors.productOwner.light};
+            background: ${theme.colors.secondary.light};
 
             &:focus-within {
-              background: ${theme.colors.productOwner.main};
+              background: ${theme.colors.secondary.main};
             }
           }
 
           input[type='file'] {
-            color: ${theme.colors.productOwner.main};
+            color: ${theme.colors.secondary.main};
           }
 
           .icon svg path {
-            stroke: ${theme.colors.productOwner.main};
+            stroke: ${theme.colors.secondary.main};
           }
         `;
-      case 'developer':
+      case 'tertiary':
         return css`
           .input {
-            background: ${theme.colors.developer.light};
+            background: ${theme.colors.tertiary.light};
 
             &:focus-within {
-              background: ${theme.colors.developer.main};
+              background: ${theme.colors.tertiary.main};
             }
           }
 
           input[type='file'] {
-            color: ${theme.colors.developer.main};
+            color: ${theme.colors.tertiary.main};
           }
 
           .icon svg path {
-            stroke: ${theme.colors.developer.main};
-          }
-        `;
-      case 'admin':
-        return css`
-          .input {
-            background: ${theme.colors.admin.light};
-
-            &:focus-within {
-              background: ${theme.colors.admin.main};
-            }
-          }
-
-          input[type='file'] {
-            color: ${theme.colors.admin.main};
-          }
-
-          .icon svg path {
-            stroke: ${theme.colors.admin.main};
+            stroke: ${theme.colors.tertiary.main};
           }
         `;
       case 'success':
@@ -239,19 +220,19 @@ export const Wrapper = styled.div<WrapperProps>`
       default:
         return css`
           .input {
-            background: ${theme.colors.client.light};
+            background: ${theme.colors.primary.light};
 
             &:focus-within {
-              background: ${theme.colors.client.main};
+              background: ${theme.colors.primary.main};
             }
           }
 
           input[type='file'] {
-            color: ${theme.colors.client.main};
+            color: ${theme.colors.primary.main};
           }
 
           .icon svg path {
-            stroke: ${theme.colors.client.main};
+            stroke: ${theme.colors.primary.main};
           }
         `;
     }
diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
index 5fa7471..d54c95f 100644
--- a/src/components/Link/index.tsx
+++ b/src/components/Link/index.tsx
@@ -6,10 +6,9 @@ export type LinkProps = {
   url?: boolean;
   children?: React.ReactNode | JSX.Element | string;
   color?:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'success'
     | 'warning'
     | 'error'
diff --git a/src/components/Link/styles.ts b/src/components/Link/styles.ts
index 215f9fc..d84a3b3 100644
--- a/src/components/Link/styles.ts
+++ b/src/components/Link/styles.ts
@@ -2,10 +2,9 @@ import styled, { css } from 'styled-components';
 
 type WrapperProps = {
   color?:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'success'
     | 'warning'
     | 'error'
@@ -45,68 +44,52 @@ export const Wrapper = styled.div<WrapperProps>`
         }
       `;
     switch (color) {
-      case 'client':
+      case 'primary':
         return css`
-          color: ${theme.colors.client.main};
+          color: ${theme.colors.primary.main};
 
           a {
-            color: ${theme.colors.client.main};
+            color: ${theme.colors.primary.main};
           }
 
           .icon svg path {
-            stroke: ${theme.colors.client.main};
+            stroke: ${theme.colors.primary.main};
           }
 
           a:visited {
-            color: ${theme.colors.client.main};
+            color: ${theme.colors.primary.main};
           }
         `;
-      case 'productOwner':
+      case 'secondary':
         return css`
-          color: ${theme.colors.productOwner.main};
+          color: ${theme.colors.secondary.main};
 
           a {
-            color: ${theme.colors.productOwner.main};
+            color: ${theme.colors.secondary.main};
           }
 
           .icon svg path {
-            stroke: ${theme.colors.productOwner.main};
+            stroke: ${theme.colors.secondary.main};
           }
 
           a:visited {
-            color: ${theme.colors.productOwner.main};
+            color: ${theme.colors.secondary.main};
           }
         `;
-      case 'developer':
+      case 'tertiary':
         return css`
-          color: ${theme.colors.developer.main};
+          color: ${theme.colors.tertiary.main};
 
           a {
-            color: ${theme.colors.developer.main};
+            color: ${theme.colors.tertiary.main};
           }
 
           .icon svg path {
-            stroke: ${theme.colors.developer.main};
+            stroke: ${theme.colors.tertiary.main};
           }
 
           a:visited {
-            color: ${theme.colors.developer.main};
-          }
-        `;
-      case 'admin':
-        return css`
-          color: ${theme.colors.admin.main};
-
-          a {
-            color: ${theme.colors.admin.main};
-          }
-
-          .icon svg path {
-            stroke: ${theme.colors.admin.main};
-          }
-
-          a:visited {
-            color: ${theme.colors.admin.main};
+            color: ${theme.colors.tertiary.main};
           }
         `;
       case 'success':
diff --git a/src/components/Modal/index.stories.ts b/src/components/Modal/index.stories.ts
index b651e1e..942e21d 100644
--- a/src/components/Modal/index.stories.ts
+++ b/src/components/Modal/index.stories.ts
@@ -9,7 +9,7 @@ const meta = {
     layout: 'centered',
   },
 	argTypes: {
-    color: { options: ['client', 'productOwner', 'developer', 'admin', 'error'] },
+    color: { options: ['primary', 'secondary', 'tertiary', 'error'] },
     title: { control: 'text' },
     description: { control: 'text' },
   },
@@ -21,7 +21,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
-		color: 'productOwner',
+		color: 'secondary',
 		title: 'Modal',
 		description: 'This is a modal!',
 		onConfirm: () => {},
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 5046ed5..7b7af26 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -8,7 +8,7 @@ import Text from '../Text';
 import { Wrapper } from './styles';
 
 export type ModalProps = {
-  color: 'client' | 'productOwner' | 'developer' | 'admin';
+  color: 'primary' | 'secondary' | 'tertiary';
   title: string;
   description: string;
   children?: React.ReactNode | JSX.Element | string;
diff --git a/src/components/Search/index.stories.ts b/src/components/Search/index.stories.ts
index 29abdf8..3647069 100644
--- a/src/components/Search/index.stories.ts
+++ b/src/components/Search/index.stories.ts
@@ -9,7 +9,7 @@ const meta = {
     layout: 'centered',
   },
 	argTypes: {
-    color: { options: ['client', 'productOwner', 'developer', 'admin', 'error'] },
+    color: { options: ['primary', 'secondary', 'tertiary', 'error'] },
     value: { control: 'text' },
   },
 } satisfies Meta<typeof Search>;
@@ -20,7 +20,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
-		color: 'productOwner',
+		color: 'secondary',
 		value: '',
 		onChange: () => {},
   },
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index d0c85fb..27f97a0 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -5,10 +5,9 @@ import SearchIcon from '../../assets/icons/search.svg?react';
 export type SearchProps = {
   className?: string;
   color?:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'success'
     | 'warning'
     | 'error'
@@ -20,7 +19,7 @@ export type SearchProps = {
 };
 
 const Search = ({
-  color = 'client',
+  color = 'primary',
   value,
   onChange,
   ...props
diff --git a/src/components/Search/styles.ts b/src/components/Search/styles.ts
index 31ef807..1562714 100644
--- a/src/components/Search/styles.ts
+++ b/src/components/Search/styles.ts
@@ -2,10 +2,9 @@ import styled, { css } from 'styled-components';
 
 type WrapperProps = {
   color?:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'success'
     | 'warning'
     | 'error'
@@ -53,44 +52,34 @@ export const Wrapper = styled.div<WrapperProps>`
 
   ${({ color, theme }) => {
     switch (color) {
-      case 'client':
+      case 'primary':
         return css`
           .search {
-            background: ${theme.colors.client.light};
+            background: ${theme.colors.primary.light};
           }
 
           .icon svg path {
-            stroke: ${theme.colors.client.main};
+            stroke: ${theme.colors.primary.main};
           }
         `;
-      case 'productOwner':
+      case 'secondary':
         return css`
           .search {
-            background: ${theme.colors.productOwner.light};
+            background: ${theme.colors.secondary.light};
           }
 
           .icon svg path {
-            stroke: ${theme.colors.productOwner.main};
+            stroke: ${theme.colors.secondary.main};
           }
         `;
-      case 'developer':
+      case 'tertiary':
         return css`
           .search {
-            background: ${theme.colors.developer.light};
+            background: ${theme.colors.tertiary.light};
           }
 
           .icon svg path {
-            stroke: ${theme.colors.developer.main};
-          }
-        `;
-      case 'admin':
-        return css`
-          .search {
-            background: ${theme.colors.admin.light};
-          }
-
-          .icon svg path {
-            stroke: ${theme.colors.admin.main};
+            stroke: ${theme.colors.tertiary.main};
           }
         `;
       case 'success':
@@ -146,11 +135,11 @@ export const Wrapper = styled.div<WrapperProps>`
       default:
         return css`
           .search {
-            background: ${theme.colors.client.light};
+            background: ${theme.colors.primary.light};
           }
 
           .icon svg path {
-            stroke: ${theme.colors.client.main};
+            stroke: ${theme.colors.primary.main};
           }
         `;
     }
diff --git a/src/components/Select/index.stories.ts b/src/components/Select/index.stories.ts
index 0c4dbb8..3948784 100644
--- a/src/components/Select/index.stories.ts
+++ b/src/components/Select/index.stories.ts
@@ -9,7 +9,7 @@ const meta = {
     layout: 'centered',
   },
   argTypes: {
-    color: { options: ['client', 'productOwner', 'developer', 'admin', 'error'] },
+    color: { options: ['primary', 'secondary', 'tertiary', 'admin', 'error'] },
     value: { control: 'text' },
   },
 } satisfies Meta<typeof Select>;
@@ -20,7 +20,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
-    color: 'productOwner',
+    color: 'secondary',
     value: '',
     options: [
       { value: '1', label: 'Option 1' },
diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
index 0097d72..f1c222b 100644
--- a/src/components/Select/index.tsx
+++ b/src/components/Select/index.tsx
@@ -5,10 +5,9 @@ import Text from '../Text';
 export type SelectProps = {
   className?: string;
   color?:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'success'
     | 'warning'
     | 'error'
@@ -27,7 +26,7 @@ export type SelectProps = {
 };
 
 const Select = ({
-  color = 'client',
+  color = 'primary',
   label,
   name,
   value,
diff --git a/src/components/Select/styles.ts b/src/components/Select/styles.ts
index 78f0aa5..83f68eb 100644
--- a/src/components/Select/styles.ts
+++ b/src/components/Select/styles.ts
@@ -2,10 +2,9 @@ import styled, { css } from 'styled-components';
 
 type WrapperProps = {
   color?:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'success'
     | 'warning'
     | 'error'
@@ -68,28 +67,22 @@ export const Wrapper = styled.div<WrapperProps>`
 
   ${({ color, theme }) => {
     switch (color) {
-      case 'client':
+      case 'primary':
         return css`
           .select {
-            background: ${theme.colors.client.light};
+            background: ${theme.colors.primary.light};
           }
         `;
-      case 'productOwner':
+      case 'secondary':
         return css`
           .select {
-            background: ${theme.colors.productOwner.light};
+            background: ${theme.colors.secondary.light};
           }
         `;
-      case 'developer':
+      case 'tertiary':
         return css`
           .select {
-            background: ${theme.colors.developer.light};
-          }
-        `;
-      case 'admin':
-        return css`
-          .select {
-            background: ${theme.colors.admin.light};
+            background: ${theme.colors.tertiary.light};
           }
         `;
       case 'success':
@@ -125,7 +118,7 @@ export const Wrapper = styled.div<WrapperProps>`
       default:
         return css`
           .select {
-            background: ${theme.colors.client.light};
+            background: ${theme.colors.primary.light};
           }
         `;
     }
diff --git a/src/components/Spinner/index.stories.ts b/src/components/Spinner/index.stories.ts
index 047a107..cf0c3bb 100644
--- a/src/components/Spinner/index.stories.ts
+++ b/src/components/Spinner/index.stories.ts
@@ -10,7 +10,7 @@ const meta = {
   },
   tags: ['!autodocs'],
   argTypes: {
-    color: { options: ['client', 'productOwner', 'developer', 'admin', 'error'] },
+    color: { options: ['primay', 'secondary', 'tertiary', 'error'] },
   },
 } satisfies Meta<typeof Spinner>;
 
@@ -20,6 +20,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
-		color: 'client',
+		color: 'primary',
   },
 };
diff --git a/src/components/Spinner/index.tsx b/src/components/Spinner/index.tsx
index be180f3..781e082 100644
--- a/src/components/Spinner/index.tsx
+++ b/src/components/Spinner/index.tsx
@@ -2,17 +2,16 @@ import { Wrapper } from './styles';
 
 export type SpinnerProps = {
   color?:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'white'
     | 'black'
     | 'gray';
   fullWidth?: boolean;
 };
 
-const Spinner = ({ fullWidth = false, color = 'client' }: SpinnerProps) => {
+const Spinner = ({ fullWidth = false, color = 'primary' }: SpinnerProps) => {
   return (
     <Wrapper fullWidth={fullWidth} color={color}>
       <div className='lds-dual-ring'></div>
diff --git a/src/components/Spinner/styles.ts b/src/components/Spinner/styles.ts
index c17bba5..ad3754c 100644
--- a/src/components/Spinner/styles.ts
+++ b/src/components/Spinner/styles.ts
@@ -2,10 +2,9 @@ import styled, { css } from 'styled-components';
 
 type WrapperProps = {
   color?:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'white'
     | 'black'
     | 'gray';
@@ -38,12 +37,12 @@ export const Wrapper = styled.div<WrapperProps>`
     border-radius: 50%;
     border: 6px solid
       ${({ theme, color }) =>
-        color ? theme.colors[color].main : theme.colors.client.main};
+        color ? theme.colors[color].main : theme.colors.primary.main};
     border-color: ${({ theme, color }) =>
-        color ? theme.colors[color].main : theme.colors.client.main}
+        color ? theme.colors[color].main : theme.colors.primary.main}
       transparent
       ${({ theme, color }) =>
-        color ? theme.colors[color].main : theme.colors.client.main}
+        color ? theme.colors[color].main : theme.colors.primary.main}
       transparent;
     animation: lds-dual-ring 1.2s linear infinite;
   }
diff --git a/src/components/Text/index.stories.ts b/src/components/Text/index.stories.ts
index 47abe25..fadca9a 100644
--- a/src/components/Text/index.stories.ts
+++ b/src/components/Text/index.stories.ts
@@ -10,7 +10,7 @@ const meta = {
   },
   tags: ['!autodocs'],
   argTypes: {
-    color: { options: ['client', 'productOwner', 'developer', 'admin', 'error'] },
+    color: { options: ['primary', 'secondary', 'tertiary', 'error'] },
     variant: { options: ['display', 'headline', 'title', 'subheader', 'body', 'caption'] },
     weight: { options: ['initial', 'normal', 'bold'] },
   },
@@ -22,7 +22,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
-		color: 'developer',
+		color: 'tertiary',
 		children: 'Text',
   },
 };
diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx
index e6bdab4..4a8863a 100644
--- a/src/components/Text/index.tsx
+++ b/src/components/Text/index.tsx
@@ -5,10 +5,9 @@ export type TextProps = {
   className?: string;
   variant?: 'display' | 'headline' | 'title' | 'subheader' | 'body' | 'caption';
   color?:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'success'
     | 'warning'
     | 'error'
diff --git a/src/components/Text/styles.ts b/src/components/Text/styles.ts
index 2fe7f2e..02c8220 100644
--- a/src/components/Text/styles.ts
+++ b/src/components/Text/styles.ts
@@ -2,10 +2,9 @@ import styled, { css } from 'styled-components';
 
 type WrapperProps = {
   color?:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'success'
     | 'warning'
     | 'error'
@@ -26,21 +25,17 @@ export const Wrapper = styled.p<WrapperProps>`
         color: inherit;
       `;
     switch (color) {
-      case 'client':
+      case 'primary':
         return css`
-          color: ${theme.colors.client.main};
+          color: ${theme.colors.primary.main};
         `;
-      case 'productOwner':
+      case 'secondary':
         return css`
-          color: ${theme.colors.productOwner.main};
+          color: ${theme.colors.secondary.main};
         `;
-      case 'developer':
+      case 'tertiary':
         return css`
-          color: ${theme.colors.developer.main};
-        `;
-      case 'admin':
-        return css`
-          color: ${theme.colors.admin.main};
+          color: ${theme.colors.tertiary.main};
         `;
       case 'success':
         return css`
diff --git a/src/components/TextArea/index.stories.ts b/src/components/TextArea/index.stories.ts
index 8d9a4d6..a5c09fe 100644
--- a/src/components/TextArea/index.stories.ts
+++ b/src/components/TextArea/index.stories.ts
@@ -9,7 +9,7 @@ const meta = {
     layout: 'centered',
   },
   argTypes: {
-    color: { options: ['client', 'productOwner', 'developer', 'admin', 'error'] },
+    color: { options: ['primary', 'secondary', 'tertiary', 'error'] },
   },
 } satisfies Meta<typeof TextArea>;
 
@@ -19,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
-		color: 'developer',
+		color: 'tertiary',
 		value: 'TextArea',
 		name: 'TextArea',
 		onChange: () => {}
diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx
index 2b654f6..16fb59b 100644
--- a/src/components/TextArea/index.tsx
+++ b/src/components/TextArea/index.tsx
@@ -5,10 +5,9 @@ import Text from '../Text';
 export type TextAreaProps = {
   className?: string;
   color?:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'success'
     | 'warning'
     | 'error'
@@ -26,7 +25,7 @@ export type TextAreaProps = {
 };
 
 const TextArea = ({
-  color = 'client',
+  color = 'primary',
   label,
   name,
   placeholder,
diff --git a/src/components/TextArea/styles.ts b/src/components/TextArea/styles.ts
index 23a4b72..3107d9e 100644
--- a/src/components/TextArea/styles.ts
+++ b/src/components/TextArea/styles.ts
@@ -2,10 +2,9 @@ import styled, { css } from 'styled-components';
 
 type WrapperProps = {
   color?:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
     | 'success'
     | 'warning'
     | 'error'
@@ -64,28 +63,22 @@ export const Wrapper = styled.div<WrapperProps>`
 
   ${({ color, theme }) => {
     switch (color) {
-      case 'client':
+      case 'primary':
         return css`
           .textarea {
-            background: ${theme.colors.client.light};
+            background: ${theme.colors.primary.light};
           }
         `;
-      case 'productOwner':
+      case 'secondary':
         return css`
           .textarea {
-            background: ${theme.colors.productOwner.light};
+            background: ${theme.colors.secondary.light};
           }
         `;
-      case 'developer':
+      case 'tertiary':
         return css`
           .textarea {
-            background: ${theme.colors.developer.light};
-          }
-        `;
-      case 'admin':
-        return css`
-          .textarea {
-            background: ${theme.colors.admin.light};
+            background: ${theme.colors.tertiary.light};
           }
         `;
       case 'success':
@@ -121,7 +114,7 @@ export const Wrapper = styled.div<WrapperProps>`
       default:
         return css`
           .textarea {
-            background: ${theme.colors.client.light};
+            background: ${theme.colors.primary.light};
           }
         `;
     }
diff --git a/src/styled.d.ts b/src/styled.d.ts
index dd3b790..25c18b0 100644
--- a/src/styled.d.ts
+++ b/src/styled.d.ts
@@ -38,22 +38,17 @@ declare module 'styled-components' {
         light: string;
         dark: string;
       };
-      client: {
+      primary: {
         main: string;
         light: string;
         dark: string;
       };
-      productOwner: {
+      secondary: {
         main: string;
         light: string;
         dark: string;
       };
-      developer: {
-        main: string;
-        light: string;
-        dark: string;
-      };
-      admin: {
+      tertiary: {
         main: string;
         light: string;
         dark: string;
diff --git a/src/themes/index.ts b/src/themes/index.ts
index 8187a6a..28f113a 100644
--- a/src/themes/index.ts
+++ b/src/themes/index.ts
@@ -60,80 +60,61 @@ export const defaultTheme: DefaultTheme = {
       )`,
       dark: '',
     },
-    client: {
-      main: '#5F6CAD',
+    primary: {
+      main: '#BD1839',
       light: `linear-gradient(
         rgba(255, 255, 255, .75),
         rgba(255, 255, 255, .75)
       ),
       linear-gradient(
-        #5F6CAD,
-        #5F6CAD
+        #BD1839,
+        #BD1839
       )`,
       dark: `linear-gradient(
         rgba(0, 0, 0, .3),
         rgba(0, 0, 0, .3)
       ),
       linear-gradient(
-        #5F6CAD,
-        #5F6CAD
+        #BD1839,
+        #BD1839
       )`,
     },
-    productOwner: {
-      main: '#20063B',
+    secondary: {
+      main: '#131314',
       light: `linear-gradient(
         rgba(255, 255, 255, .75),
         rgba(255, 255, 255, .75)
       ),
       linear-gradient(
-        #20063B,
-        #20063B
+        #131314,
+        #131314
       )`,
       dark: `linear-gradient(
         rgba(0, 0, 0, .3),
         rgba(0, 0, 0, .3)
       ),
       linear-gradient(
-        #20063B,
-        #20063B
+        #131314,
+        #131314
       )`,
     },
-    developer: {
-      main: '#ED7D3A',
+    tertiary: {
+      main: '#E7E7E7',
       light: `linear-gradient(
         rgba(255, 255, 255, .75),
         rgba(255, 255, 255, .75)
       ),
       linear-gradient(
-        #ED7D3A,
-        #ED7D3A
+        #E7E7E7,
+        #E7E7E7
       )`,
       dark: `linear-gradient(
         rgba(0, 0, 0, .3),
         rgba(0, 0, 0, .3)
       ),
       linear-gradient(
-        #ED7D3A,
-        #ED7D3A
-      )`,
-    },
-    admin: {
-      main: '#A30015',
-      light: `linear-gradient(
-        rgba(255, 255, 255, .75),
-        rgba(255, 255, 255, .75)
-      ),
-      linear-gradient(
-        #A30015,
-        #A30015
-      )`,
-      dark: `linear-gradient(
-        rgba(0, 0, 0, .3),
-        rgba(0, 0, 0, .3)
-      ),
-      linear-gradient(
-        #A30015,
-        #A30015
+        #E7E7E7,
+        #E7E7E7
       )`,
     },
   },