feat(design-system): Change brand colors

Signed-off-by: Jeroen Branje <[email protected]>
ASCS-eV · Feb 21, 2024 · 74ff3d5 · 74ff3d5
1 parent a2e9335
commit 74ff3d5
Show file tree

Hide file tree

Showing 15 changed files with 31 additions and 27 deletions.
diff --git a/apps/design-system/src/components/Atoms/Button/Button.tsx b/apps/design-system/src/components/Atoms/Button/Button.tsx
@@ -26,8 +26,8 @@ const Button: FC<Props> = ({
 }) => {
   const styleClassMap = {
     [ButtonType.primary]: {
-      [ButtonStyle.solid]: 'bg-orange hover:bg-orange-700 text-white',
-      [ButtonStyle.ghost]: 'text-orange hover:text-white border-orange hover:bg-orange border-solid border-2',
+      [ButtonStyle.solid]: 'bg-blue-900 hover:bg-blue-800 text-white',
+      [ButtonStyle.ghost]: 'text-blue hover:text-white border-blue hover:bg-blue border-solid border-2',
     },
     [ButtonType.secondary]: {
       [ButtonStyle.solid]: 'bg-gray-300 hover:bg-gray-400 text-gray-700 hover:text-gray-50',

diff --git a/apps/design-system/src/components/Atoms/Button/Button.ui.test.tsx b/apps/design-system/src/components/Atoms/Button/Button.ui.test.tsx
@@ -15,7 +15,7 @@ describe('components/Button', () => {
 
       // then ... should render with expected properties
       expect(element).toBeInTheDocument()
-      expect(element).toHaveClass('bg-orange')
+      expect(element).toHaveClass('bg-blue')
       await userEvent.click(element)
       expect(onClickStub).toHaveBeenCalledWith()
     })

diff --git a/apps/design-system/src/components/Atoms/Form/Checkbox/Checkbox.tsx b/apps/design-system/src/components/Atoms/Form/Checkbox/Checkbox.tsx
@@ -33,7 +33,7 @@ export const Checkbox: FC<CheckboxProps> = ({
           ref={inputRef}
           checked={checked}
           type="checkbox"
-          className="h-4 w-4 rounded border-gray-300 text-orange-600 focus:ring-orange-600"
+          className="h-4 w-4 rounded border-gray-300 text-blue-900 focus:ring-blue-900"
         />
       </div>
       <div className="ml-3 text-sm leading-6">

diff --git a/apps/design-system/src/components/Atoms/Form/Checkbox/Checkboxes.tsx b/apps/design-system/src/components/Atoms/Form/Checkbox/Checkboxes.tsx
@@ -49,7 +49,7 @@ export const Checkboxes: FC<CheckboxProps> = ({
               ref={inputRef}
               checked={includes(id)(values)}
               type="checkbox"
-              className="h-4 w-4 rounded border-gray-300 text-orange-600 focus:ring-orange-600"
+              className="h-4 w-4 rounded border-gray-300 text-blue-800 focus:ring-blue-800"
             />
           </div>
           <div className="ml-3 text-sm leading-6">

diff --git a/apps/design-system/src/components/Atoms/Grid/Grid.stories.tsx b/apps/design-system/src/components/Atoms/Grid/Grid.stories.tsx
@@ -14,13 +14,13 @@ export default {
 const GridTemplate: Story = ({ columns }) => (
   <Grid>
     <GridRow columns={columns}>
-      <div className="bg-orange-100 block h-40" />
-      <div className="bg-orange-100 block h-40" />
-      <div className="bg-orange-100 block h-40" />
-      <div className="bg-orange-100 block h-40" />
-      <div className="bg-orange-100 block h-40" />
-      <div className="bg-orange-100 block h-40" />
-      <div className="bg-orange-100 block h-40" />
+      <div className="bg-blue block h-40" />
+      <div className="bg-blue block h-40" />
+      <div className="bg-blue block h-40" />
+      <div className="bg-blue block h-40" />
+      <div className="bg-blue block h-40" />
+      <div className="bg-blue block h-40" />
+      <div className="bg-blue block h-40" />
     </GridRow>
   </Grid>
 )

diff --git a/apps/design-system/src/components/Atoms/LoadingIndicator/LoadingIndicator.tsx b/apps/design-system/src/components/Atoms/LoadingIndicator/LoadingIndicator.tsx
@@ -7,7 +7,7 @@ interface Props {
   colour?: Colour
 }
 
-const LoadingIndicator: FC<Props> = ({ size = Size.medium, colour = Colour.orange }) => {
+const LoadingIndicator: FC<Props> = ({ size = Size.medium, colour = Colour.blue }) => {
   const sizeClassMap = {
     [Size.small]: 'h-3.5 w-3.5',
     [Size.medium]: 'h-4 w-4',

diff --git a/apps/design-system/src/components/Atoms/LoadingIndicator/LoadingIndicator.ui.test.tsx b/apps/design-system/src/components/Atoms/LoadingIndicator/LoadingIndicator.ui.test.tsx
@@ -12,7 +12,7 @@ describe('components/LoadingIndicator', () => {
 
     // then ... should render with expected properties
     expect(element).toBeInTheDocument()
-    expect(element.closest('svg')).toHaveClass('text-orange')
+    expect(element.closest('svg')).toHaveClass('text-blue')
   })
 
   it('should render LoadingIndicator with specific properties', () => {

diff --git a/apps/design-system/src/components/Atoms/Pill/Pill.tsx b/apps/design-system/src/components/Atoms/Pill/Pill.tsx
@@ -16,7 +16,7 @@ const Pill: FC<Props> = ({ size = Size.small, children }) => {
 
   return (
     <div
-      className={`${sizeClassMap[size]} bg-gray-300 dark:bg-gray-600 text-black dark:text-white inline-block font-medium leading-none rounded-full hover:bg-orange hover:text-white transition`}
+      className={`${sizeClassMap[size]} bg-gray-300 dark:bg-gray-600 text-black dark:text-white inline-block font-medium leading-none rounded-full`}
     >
       {children}
     </div>

diff --git a/apps/design-system/src/components/Molecules/MemberProfileCard/MemberProfileCard.tsx b/apps/design-system/src/components/Molecules/MemberProfileCard/MemberProfileCard.tsx
@@ -22,7 +22,7 @@ const MemberProfileCard: FC<MemberProfileCardProps> = ({
   businessCategories,
 }) => {
   return (
-    <div className="flex flex-col border rounded-2xl max-w-xl overflow-hidden ring-0 focus:ring focus:ring-orange-50 hover:shadow h-full bg-white dark:bg-gray-900 dark:border-transparent dark:border-gray-800">
+    <div className="flex flex-col border rounded-2xl max-w-xl overflow-hidden ring-0 focus:ring focus:ring-gray-50 hover:shadow h-full bg-white dark:bg-gray-900 dark:border-transparent dark:border-gray-800">
       <div className="aspect-square bg-gray-100 dark:bg-gray-700 flex justify-center items-center overflow-hidden relative h-48">
         <img src={logoUri} alt={title} className="w-full h-full object-center object-contain px-4" />
         <div className="absolute block w-full h-full top-0 left-0" />

diff --git a/apps/design-system/src/types/index.ts b/apps/design-system/src/types/index.ts
@@ -18,7 +18,7 @@ export enum Colour {
   main = 'main',
   white = 'white',
   black = 'black',
-  orange = 'orange',
+  blue = 'blue',
 }
 
 export enum ButtonType {

diff --git a/apps/design-system/tailwind.config.js b/apps/design-system/tailwind.config.js
@@ -20,9 +20,11 @@ module.exports = {
       red: colors.red,
       green: colors.green,
       indigo: colors.indigo,
-      orange: {
-        ...colors.orange,
-        DEFAULT: '#ff584d',
+      blue: {
+        ...colors.blue,
+        800: '#798bb3',
+        900: '#5a6f9f',
+        DEFAULT: '#848ab7',
       },
     },
     extend: {},

diff --git a/apps/envited.ascs.digital/modules/HeroHeader/HeroHeader.tsx b/apps/envited.ascs.digital/modules/HeroHeader/HeroHeader.tsx
@@ -67,7 +67,7 @@ export const HeroHeader: FC = () => {
   return (
     <div className="mx-auto max-w-6xl">
       {searchParams.has('error') ? (
-        <div className="w-full text-center text-orange text-2xl">Could not sign you in</div>
+        <div className="w-full text-center text-blue text-2xl">Could not sign you in</div>
       ) : null}
       <Grid>
         <GridRow columns={`three` as any}>
@@ -96,7 +96,7 @@ export const HeroHeader: FC = () => {
       </Grid>
       <div className="text-center">
         <div className="flex justify-center items-center">
-          <Link href="/members" className="underline text-orange">
+          <Link href="/members" className="underline text-blue">
             See list of registered members
           </Link>
         </div>

diff --git a/apps/envited.ascs.digital/modules/Navigation/Navigation.tsx b/apps/envited.ascs.digital/modules/Navigation/Navigation.tsx
@@ -17,7 +17,7 @@ const NavLink: FC<NavItemProps> = ({ href, name, icon = <></> }) => {
   const isActive = equals(pathname)(href)
 
   const iconElement = !isEmpty(icon) ? (
-    <div className={`${isActive ? 'text-orange-600' : null} flex-shrink-0 mr-4`}>{icon}</div>
+    <div className={`${isActive ? 'text-blue' : null} flex-shrink-0 mr-4`}>{icon}</div>
   ) : null
 
   return (

diff --git a/apps/envited.ascs.digital/modules/Profile/Profile.tsx b/apps/envited.ascs.digital/modules/Profile/Profile.tsx
@@ -335,7 +335,7 @@ export const Profile: FC<ProfileProps> = ({ profile, memberCategories }) => {
         <div className="mt-6 flex items-center justify-end gap-x-6">
           <button
             type="submit"
-            className="bg-orange hover:bg-orange-700 text-white transition rounded-full font-bold py-2 px-4"
+            className="bg-blue hover:bg-blue-900 text-white transition rounded-full font-bold py-2 px-4"
           >
             {t('[Button] update profile')}
           </button>

diff --git a/apps/envited.ascs.digital/tailwind.config.js b/apps/envited.ascs.digital/tailwind.config.js
@@ -21,9 +21,11 @@ module.exports = {
       red: colors.red,
       green: colors.green,
       indigo: colors.indigo,
-      orange: {
-        ...colors.orange,
-        DEFAULT: '#ff584d',
+      blue: {
+        ...colors.blue,
+        800: '#798bb3',
+        900: '#5a6f9f',
+        DEFAULT: '#848ab7',
       },
     },
     extend: {},