Update default theme

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'
   },
 };

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';

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};
+		`;
   }}
 `;

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'
   },
 };

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;
 };

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';
 };
 

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'
   },

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';

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;

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

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 = ({

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!'),

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;

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};
+			}
+		`;
   }}
 `;

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'
   },

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';

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';
 };
 

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!')}

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;

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>>;
 };

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'

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};
       }
     }
   }

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: () => {}
   },
 };

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,

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};
           }
         `;
     }

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'

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':

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: () => {},

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;

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: () => {},
   },

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

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};
           }
         `;
     }

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' },

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,

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};
           }
         `;
     }

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',
   },
 };

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>

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;
   }

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',
   },
 };

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'

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`

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: () => {}

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,

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};
           }
         `;
     }

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;

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
       )`,
     },
   },