Refactor icon colors

beda-software · Sep 1, 2023 · 593cf93 · 593cf93
1 parent 5bed43b
commit 593cf93
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 30 deletions.
diff --git a/src/icons/menu/EncountersIcon.tsx b/src/icons/menu/EncountersIcon.tsx
@@ -2,20 +2,20 @@ export function EncountersIcon() {
     return (
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M9 9C9 7.29467 9.7111 5.75572 10.8533 4.66333C10.9586 4.56262 10.9329 4.38524 10.7969 4.33287C10.6526 4.27728 10.5051 4.22821 10.3545 4.18604C9.92383 4.06494 9.46973 4 9 4C6.23828 4 4 6.23853 4 9C4 10.6191 4.76855 12.0583 5.96484 12.9736C6.56782 13.4353 6.45602 14.3744 5.76172 14.6821C3.31289 15.7675 1.51276 18.0446 1.09279 20.7755C1.07451 20.8944 1.16777 21 1.28806 21H5.87557C5.97753 21 6.06294 20.9231 6.07615 20.822C6.4404 18.0347 8.08028 15.6484 10.3906 14.2683C11.3833 13.6752 11.321 13.8737 10.5615 13.0369C9.59082 11.9712 9 10.5547 9 9ZM6 22H0.2C0.0895431 22 -0.000228386 21.9104 0.00216984 21.8C0.00802707 21.5303 0.025701 21.2634 0.0546875 21C0.371094 18.1365 2.03125 15.6777 4.39062 14.2683C4.54004 14.179 4.69238 14.094 4.84766 14.0132C4.91528 13.978 4.98338 13.9436 5.05196 13.9101C5.18838 13.8435 5.21093 13.6545 5.09567 13.5556C4.99322 13.4678 4.89379 13.3766 4.79785 13.2822C4.7168 13.2026 4.6377 13.1208 4.56152 13.0369C3.59082 11.9712 3 10.5547 3 9C3 5.68628 5.68652 3 9 3C9.6748 3 10.3223 3.11133 10.9277 3.31665C11.2657 3.43129 11.591 3.57528 11.8993 3.74576C11.9619 3.7804 12.0381 3.78042 12.1007 3.74579C12.9604 3.27056 13.9485 3 15 3C18.3135 3 21 5.68628 21 9C21 10.5547 20.4092 11.9712 19.4385 13.0369C19.2718 13.2205 19.0936 13.3936 18.9051 13.5552C18.7897 13.6542 18.8123 13.8436 18.9489 13.9103C19.1746 14.0206 19.3948 14.1401 19.6094 14.2683C21.9688 15.6777 23.6289 18.1365 23.9453 21C23.9658 21.1885 23.9805 21.3784 23.9902 21.5701C23.9939 21.6465 23.9964 21.7232 23.998 21.8C24.0003 21.9104 23.9105 22 23.8 22H18H6ZM17.9239 20.822C17.9371 20.9231 18.0225 21 18.1244 21H22.7119C22.8322 21 22.9255 20.8944 22.9072 20.7755C22.4872 18.0446 20.6871 15.7675 18.2383 14.6821C17.544 14.3744 17.4322 13.4353 18.0352 12.9736C19.2314 12.0583 20 10.6191 20 9C20 6.23853 17.7617 4 15 4C14.3662 4 13.7608 4.11795 13.203 4.33288C13.067 4.38525 13.0413 4.56254 13.1466 4.66323C14.2889 5.75563 15 7.29462 15 9C15 10.5547 14.4092 11.9712 13.4385 13.0369C12.6787 13.874 12.6169 13.6748 13.6094 14.2683C15.9197 15.6484 17.5596 18.0347 17.9239 20.822Z"
                 fill="var(--theme-icon-primary)"
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M22.9463 21H17.9531C17.6367 18.1365 15.9766 15.6777 13.6172 14.2683C13.4404 14.1626 13.2598 14.0627 13.0752 13.969C12.9355 13.8984 12.7939 13.8313 12.6504 13.7678C12.9375 13.5483 13.2041 13.3037 13.4463 13.0369C14.417 11.9712 15.0078 10.5547 15.0078 9C15.0078 7.18262 14.2002 5.5542 12.9238 4.45386C13.5586 4.1626 14.2637 4 15.0078 4C17.7695 4 20.0078 6.23853 20.0078 9C20.0078 10.6191 19.2393 12.0583 18.043 12.9736C17.44 13.4353 17.5518 14.3744 18.2461 14.6821C20.7617 15.7971 22.5928 18.1697 22.9463 21Z"
                 fill="var(--theme-sidebar-background)"
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M1.05371 21H6.04688C6.36328 18.1365 8.02344 15.6777 10.3828 14.2683C10.5596 14.1626 10.7402 14.0627 10.9248 13.969C11.0645 13.8984 11.2061 13.8313 11.3496 13.7678C11.0625 13.5483 10.7959 13.3037 10.5537 13.0369C9.58301 11.9712 8.99219 10.5547 8.99219 9C8.99219 7.18262 9.7998 5.5542 11.0762 4.45386C10.4414 4.1626 9.73633 4 8.99219 4C6.23047 4 3.99219 6.23853 3.99219 9C3.99219 10.6191 4.76074 12.0583 5.95703 12.9736C6.56 13.4353 6.44821 14.3744 5.75391 14.6821C3.23828 15.7971 1.40723 18.1697 1.05371 21Z"
                 fill="var(--theme-icon-secondary)"
             />

diff --git a/src/icons/menu/PatientsIcon.tsx b/src/icons/menu/PatientsIcon.tsx
@@ -6,14 +6,14 @@ export function PatientsIcon() {
                 fill="var(--theme-sidebar-background)"
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M2.81177 2.80804C0.468994 5.15131 0.468994 8.95013 2.81177 11.2934L3.5188 12.0004L12.0042 3.51556L11.2971 2.80804C8.95435 0.465027 5.15552 0.465027 2.81177 2.80804ZM20.4895 12.0004L12.0042 20.4853L12.7122 21.1928C15.0549 23.5361 18.8538 23.5361 21.1965 21.1928C23.5403 18.8498 23.5403 15.0507 21.1965 12.7075L20.4895 12.0004Z"
                 fill="var(--theme-icon-secondary)"
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M10.5776 20.5231L20.5207 10.5788C22.482 8.61729 22.482 5.43711 20.5207 3.47564C18.5595 1.51417 15.3797 1.51417 13.4185 3.47564L3.47533 13.42C1.5141 15.3815 1.5141 18.5617 3.47533 20.5231C5.43657 22.4846 8.61636 22.4846 10.5776 20.5231ZM21.231 2.76533C18.8775 0.411558 15.0617 0.411558 12.7083 2.76533L11.9994 3.47429L11.2917 2.76654C8.93826 0.412775 5.12251 0.412775 2.76903 2.76654C0.415554 5.12031 0.415554 8.93653 2.76903 11.2903L3.47669 11.998L2.76511 12.7097C0.41163 15.0635 0.41163 18.8797 2.76511 21.2335C5.11859 23.5872 8.93433 23.5872 11.2878 21.2335L21.231 11.2891C23.5844 8.93531 23.5844 5.1191 21.231 2.76533ZM10.5815 3.47686L11.2892 4.1846L4.18691 11.2877L3.47926 10.58C1.51803 8.61851 1.51803 5.43833 3.47926 3.47686C5.44049 1.51538 8.62028 1.51538 10.5815 3.47686ZM12.7123 19.8141L13.4224 20.5244C15.3836 22.4858 18.5634 22.4858 20.5247 20.5244C22.4859 18.5629 22.4859 15.3827 20.5247 13.4212L19.8145 12.711L20.5248 12.0007L21.2349 12.7109C23.5884 15.0647 23.5884 18.8809 21.2349 21.2347C18.8814 23.5884 15.0657 23.5884 12.7122 21.2347L12.0021 20.5245L12.7123 19.8141ZM12.7052 7.02455C12.3147 6.634 11.6816 6.634 11.2911 7.02455L7.02339 11.2927C6.63289 11.6833 6.63289 12.3165 7.02339 12.707L11.2911 16.9753C11.6816 17.3658 12.3147 17.3658 12.7052 16.9753L16.9729 12.707C17.3634 12.3165 17.3634 11.6833 16.9729 11.2927L12.7052 7.02455ZM19.101 6.3175C18.7088 6.70979 18.0728 6.70979 17.6806 6.3175C17.2883 5.9252 17.2883 5.28917 17.6806 4.89687C18.0728 4.50458 18.7088 4.50458 19.101 4.89688C19.4933 5.28917 19.4933 5.92521 19.101 6.3175ZM4.89723 19.103C5.28948 19.4953 5.92544 19.4953 6.31768 19.103C6.70993 18.7107 6.70993 18.0747 6.31768 17.6824C5.92544 17.2901 5.28948 17.2901 4.89723 17.6824C4.50498 18.0747 4.50498 18.7107 4.89723 19.103ZM18.3909 9.86893C17.9986 10.2612 17.3627 10.2612 16.9704 9.86893C16.5782 9.47663 16.5782 8.8406 16.9704 8.4483C17.3627 8.05601 17.9986 8.05601 18.3909 8.4483C18.7831 8.8406 18.7831 9.47663 18.3909 9.86893ZM8.44804 18.3928C8.84029 18.7851 9.47624 18.7851 9.86849 18.3928C10.2607 18.0005 10.2607 17.3645 9.86849 16.9722C9.47624 16.5799 8.84029 16.5799 8.44804 16.9722C8.05579 17.3645 8.05579 18.0005 8.44804 18.3928ZM15.5503 7.02774C15.158 7.42003 14.5221 7.42003 14.1298 7.02774C13.7376 6.63544 13.7376 5.99941 14.1298 5.60711C14.5221 5.21482 15.158 5.21482 15.5503 5.60711C15.9425 5.99941 15.9425 6.63544 15.5503 7.02774ZM5.60707 15.5516C5.99931 15.9439 6.63527 15.9439 7.02752 15.5516C7.41976 15.1593 7.41976 14.5232 7.02752 14.1309C6.63527 13.7386 5.99931 13.7386 5.60707 14.1309C5.21482 14.5232 5.21482 15.1593 5.60707 15.5516Z"
                 fill="var(--theme-icon-primary)"
             />

diff --git a/src/icons/menu/PractitionersIcon.tsx b/src/icons/menu/PractitionersIcon.tsx
@@ -3,8 +3,8 @@ export function PractitionersIcon() {
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M4 10V6H20V10L22 13V21H2V13L4 10Z" fill="var(--theme-icon-secondary)" />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M15 3H9C8.44772 3 8 3.44772 8 4V5H16V4C16 3.44772 15.5523 3 15 3ZM7 4V5H5.2C4.09543 5 3.2 5.89543 3.2 7V9.23802C3.2 9.43078 3.14429 9.61943 3.03957 9.78127L1.16043 12.6854C1.05571 12.8472 1 13.0359 1 13.2286V20C1 21.1046 1.89543 22 3 22H21C22.1046 22 23 21.1046 23 20V13.2286C23 13.0359 22.9443 12.8472 22.8396 12.6854L20.9604 9.78127C20.8557 9.61943 20.8 9.43078 20.8 9.23802V7C20.8 5.89543 19.9046 5 18.8 5H17V4C17 2.89543 16.1046 2 15 2H9C7.89543 2 7 2.89543 7 4ZM7 6H17H18.8C19.3523 6 19.8 6.44772 19.8 7V9.23802C19.8 9.62354 19.9114 10.0008 20.1209 10.3245L22 13.2286V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V13.2286L3.87914 10.3245C4.08858 10.0008 4.2 9.62354 4.2 9.23802V7C4.2 6.44771 4.64771 6 5.2 6H7ZM11 11.5C11 11.2239 11.2239 11 11.5 11H12.5C12.7761 11 13 11.2239 13 11.5V13H14.5C14.7761 13 15 13.2239 15 13.5V14.5C15 14.7761 14.7761 15 14.5 15H13V16.5C13 16.7761 12.7761 17 12.5 17H11.5C11.2239 17 11 16.7761 11 16.5V15H9.5C9.22386 15 9 14.7761 9 14.5V13.5C9 13.2239 9.22386 13 9.5 13H11V11.5Z"
                 fill="var(--theme-icon-primary)"
             />

diff --git a/src/icons/menu/QuestionnairesIcon.tsx b/src/icons/menu/QuestionnairesIcon.tsx
@@ -7,14 +7,14 @@ export function QuestionnairesIcon() {
             />
             <rect x="5" y="4" width="14" height="18" rx="0.5" fill="var(--theme-sidebar-background)" />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M13.4146 1H16.5C16.7761 1 17 1.22386 17 1.5V3.5C17 3.77614 16.7761 4 16.5 4H7.5C7.22386 4 7 3.77614 7 3.5V1.5C7 1.22386 7.22386 1 7.5 1H10.5854C10.7913 0.417404 11.3469 0 12 0C12.6531 0 13.2087 0.417404 13.4146 1Z"
                 fill="var(--theme-sidebar-background)"
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M12.4718 1.33325L12.7075 2H16V3H8V2H11.2925L11.5282 1.33325C11.5973 1.1377 11.7839 1 12 1C12.2161 1 12.4027 1.1377 12.4718 1.33325ZM13.4145 0.999721C13.2086 0.41727 12.653 0 12 0C11.347 0 10.7914 0.41727 10.5855 0.999721H9.00022C8.91056 0.999721 8.82228 0.999032 8.73574 0.998356C8.56383 0.997015 8.3988 0.995727 8.24354 1H7.5C7.22386 1 7 1.22386 7 1.5V1.99972L5 1.99996C3.89543 1.99996 3 2.89539 3 3.99996V22C3 23.1045 3.89543 24 5 24H19C20.1046 24 21 23.1045 21 22V3.99996C21 2.8954 20.1046 1.99996 19 1.99996L17 1.99972V1.5C17 1.22386 16.7761 1 16.5 1H15.7565C15.6012 0.995727 15.4362 0.997015 15.2643 0.998356C15.1777 0.999032 15.0894 0.999721 14.9998 0.999721H13.4145ZM17 2.99996V3.5C17 3.77614 16.7761 4 16.5 4H7.5C7.22386 4 7 3.77614 7 3.5V2.99996H5C4.44771 2.99996 4 3.44768 4 3.99996V22C4 22.5522 4.44772 23 5 23H19C19.5523 23 20 22.5522 20 22V3.99996C20 3.44768 19.5523 2.99996 19 2.99996H17ZM8 11.5C8 11.2238 8.22386 11 8.5 11H15.5C15.7761 11 16 11.2238 16 11.5C16 11.7761 15.7761 12 15.5 12H8.5C8.22386 12 8 11.7761 8 11.5ZM8.5 7.99996C8.22386 7.99996 8 8.22382 8 8.49996C8 8.77611 8.22386 8.99996 8.5 8.99996H15.5C15.7761 8.99996 16 8.77611 16 8.49996C16 8.22382 15.7761 7.99996 15.5 7.99996H8.5ZM8 14.5C8 14.2238 8.22386 14 8.5 14H15.5C15.7761 14 16 14.2238 16 14.5C16 14.7761 15.7761 15 15.5 15H8.5C8.22386 15 8 14.7761 8 14.5ZM8.5 17C8.22386 17 8 17.2238 8 17.5C8 17.7761 8.22386 18 8.5 18H15.5C15.7761 18 16 17.7761 16 17.5C16 17.2238 15.7761 17 15.5 17H8.5Z"
                 fill="var(--theme-icon-primary)"
             />

diff --git a/src/theme/ThemeProvider.tsx b/src/theme/ThemeProvider.tsx
@@ -12,10 +12,8 @@ interface Props {
 
 const GlobalStyle = createGlobalStyle<{ $whiteColor?: boolean }>`
   :root {
-    --theme-icon-primary: ${({ theme }) =>
-        theme.mode === 'dark' ? theme.neutralPalette.gray_12 : theme.primaryPalette.bcp_6};
-    --theme-icon-secondary: ${({ theme }) =>
-        theme.mode === 'dark' ? theme.neutralPalette.gray_6 : theme.secondaryPalette.bcs_2};
+    --theme-icon-primary: ${({ theme }) => theme.iconColors.primary};
+    --theme-icon-secondary: ${({ theme }) => theme.iconColors.secondary};
     --theme-sidebar-background: ${({ theme }) => theme.neutral.sidebarBackground};
   }
 

diff --git a/src/theme/palette.ts b/src/theme/palette.ts
@@ -83,6 +83,30 @@ const neutralPalette: {
 };
 
 export function getPalette({ dark }: { dark?: boolean }): DefaultTheme {
+    const primaryPalette = _.fromPairs(
+        ANTDColors.generate(brandColors.primary, {
+            theme: dark ? 'dark' : undefined,
+        }).map((c, index) => [`bcp_${index + 1}`, c]),
+    ) as DefaultTheme['primaryPalette'];
+    const secondaryPalette = _.fromPairs(
+        ANTDColors.generate(brandColors.secondary, {
+            theme: dark ? 'dark' : undefined,
+        }).map((c, index) => [`bcs_${index + 1}`, c]),
+    ) as DefaultTheme['secondaryPalette'];
+    const iconColors: {
+        light: DefaultTheme['iconColors'];
+        dark: DefaultTheme['iconColors'];
+    } = {
+        light: {
+            primary: primaryPalette.bcp_6,
+            secondary: secondaryPalette.bcs_2,
+        },
+        dark: {
+            primary: neutralPalette.dark.gray_12,
+            secondary: neutralPalette.dark.gray_6,
+        },
+    };
+
     return {
         ..._.chain(colors)
             .toPairs()
@@ -100,15 +124,10 @@ export function getPalette({ dark }: { dark?: boolean }): DefaultTheme {
         neutralPalette: {
             ...(dark ? neutralPalette.dark : neutralPalette.light),
         },
-        primaryPalette: _.fromPairs(
-            ANTDColors.generate(brandColors.primary, {
-                theme: dark ? 'dark' : undefined,
-            }).map((c, index) => [`bcp_${index + 1}`, c]),
-        ),
-        secondaryPalette: _.fromPairs(
-            ANTDColors.generate(brandColors.secondary, {
-                theme: dark ? 'dark' : undefined,
-            }).map((c, index) => [`bcs_${index + 1}`, c]),
-        ),
+        iconColors: {
+            ...(dark ? iconColors.dark : iconColors.light),
+        },
+        primaryPalette,
+        secondaryPalette,
     } as DefaultTheme;
 }
diff --git a/src/theme/styled-components.d.ts b/src/theme/styled-components.d.ts
@@ -62,5 +62,9 @@ declare module 'styled-components' {
         gray_12: string;
         gray_13: string;
     };
+    iconColors: {
+        primary: string;
+        secondary: string;
+    };
   }
 }