feat(Icons): dynamic icons colors based on theme

wireapp · Jan 27, 2025 · 657156a · 657156a
1 parent a3adac2
commit 657156a
Show file tree

Hide file tree

Showing 11 changed files with 172 additions and 59 deletions.
diff --git a/packages/react-ui-kit/src/Icon/Files/ArchiveFileIcon.tsx b/packages/react-ui-kit/src/Icon/Files/ArchiveFileIcon.tsx
@@ -24,20 +24,23 @@ export const ArchiveFileIcon = ({...props}: SVGIconProps) => {
     <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
       <path
         d="M0.995605 2.5C0.995605 1.39543 1.89104 0.5 2.99561 0.5H10.9956C12.1002 0.5 12.9956 1.39543 12.9956 2.5V11.5063C12.9956 12.1626 12.7375 12.7926 12.2771 13.2603L10.8065 14.754C10.3365 15.2312 9.69477 15.5 9.02498 15.5H2.99561C1.89104 15.5 0.995605 14.6046 0.995605 13.5V2.5Z"
-        fill="#F6EEE8"
-        stroke="#61350D"
+        fill="var(--archive-file-icon-bg)"
+        stroke="var(--archive-file-icon-stroke)"
+      />
+      <path
+        d="M12.9956 11.5V11.5C10.7865 11.5 8.99561 13.2909 8.99561 15.5V15.5"
+        stroke="var(--archive-file-icon-stroke)"
       />
-      <path d="M12.9956 11.5V11.5C10.7865 11.5 8.99561 13.2909 8.99561 15.5V15.5" stroke="#61350D" />
       <path
         d="M3.49561 8.5C3.49561 8.77614 3.71946 9 3.99561 9C4.27175 9 4.49561 8.77614 4.49561 8.5L3.49561 8.5ZM3.49561 0.5L3.49561 8.5L4.49561 8.5L4.49561 0.5L3.49561 0.5Z"
-        fill="#61350D"
+        fill="var(--archive-file-icon-stroke)"
       />
-      <path d="M5.49561 2L4.49561 2" stroke="#61350D" strokeLinecap="round" />
-      <path d="M3.49561 3L2.49561 3" stroke="#61350D" strokeLinecap="round" />
-      <path d="M5.49561 4L4.49561 4" stroke="#61350D" strokeLinecap="round" />
-      <path d="M3.49561 5L2.49561 5" stroke="#61350D" strokeLinecap="round" />
-      <path d="M5.49561 6L4.49561 6" stroke="#61350D" strokeLinecap="round" />
-      <path d="M3.49561 7L2.49561 7" stroke="#61350D" strokeLinecap="round" />
+      <path d="M5.49561 2L4.49561 2" stroke="var(--archive-file-icon-stroke)" strokeLinecap="round" />
+      <path d="M3.49561 3L2.49561 3" stroke="var(--archive-file-icon-stroke)" strokeLinecap="round" />
+      <path d="M5.49561 4L4.49561 4" stroke="var(--archive-file-icon-stroke)" strokeLinecap="round" />
+      <path d="M3.49561 5L2.49561 5" stroke="var(--archive-file-icon-stroke)" strokeLinecap="round" />
+      <path d="M5.49561 6L4.49561 6" stroke="var(--archive-file-icon-stroke)" strokeLinecap="round" />
+      <path d="M3.49561 7L2.49561 7" stroke="var(--archive-file-icon-stroke)" strokeLinecap="round" />
     </SVGIcon>
   );
 };
diff --git a/packages/react-ui-kit/src/Icon/Files/AudioFileIcon.tsx b/packages/react-ui-kit/src/Icon/Files/AudioFileIcon.tsx
@@ -24,29 +24,29 @@ export const AudioFileIcon = ({...props}: SVGIconProps) => {
     <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
       <path
         d="M1 2.5C1 1.39543 1.89543 0.5 3 0.5H11C12.1046 0.5 13 1.39543 13 2.5V11.5063C13 12.1626 12.7419 12.7926 12.2815 13.2603L10.8108 14.754C10.3409 15.2312 9.69916 15.5 9.02938 15.5H3C1.89543 15.5 1 14.6046 1 13.5V2.5Z"
-        fill="#F4EDF7"
-        stroke="#835699"
+        fill="var(--audio-file-icon-bg)"
+        stroke="var(--audio-file-icon-stroke)"
       />
-      <path d="M13 11.5V11.5C10.7909 11.5 9 13.2909 9 15.5V15.5" stroke="#835699" />
+      <path d="M13 11.5V11.5C10.7909 11.5 9 13.2909 9 15.5V15.5" stroke="var(--audio-file-icon-stroke)" />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5.5 4.5C5.77614 4.5 6 4.72386 6 5L6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5L5 5C5 4.72386 5.22386 4.5 5.5 4.5Z"
-        fill="#835699"
+        fill="var(--audio-file-icon-stroke)"
       />
-      <circle cx="4.5" cy="9.5" r="1" stroke="#835699" />
+      <circle cx="4.5" cy="9.5" r="1" stroke="var(--audio-file-icon-stroke)" />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M9.5 3.5C9.77614 3.5 10 3.72386 10 4L10 8.5C10 8.77614 9.77614 9 9.5 9C9.22386 9 9 8.77614 9 8.5L9 4C9 3.72386 9.22386 3.5 9.5 3.5Z"
-        fill="#835699"
+        fill="var(--audio-file-icon-stroke)"
       />
-      <circle cx="8.5" cy="8.5" r="1" stroke="#835699" />
+      <circle cx="8.5" cy="8.5" r="1" stroke="var(--audio-file-icon-stroke)" />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M9.98518 3.8787C10.0522 4.1466 9.88927 4.41806 9.62137 4.48504L5.62137 5.48504C5.35348 5.55201 5.08201 5.38913 5.01504 5.12123C4.94806 4.85334 5.11094 4.58187 5.37884 4.51489L9.37884 3.51489C9.64674 3.44792 9.9182 3.6108 9.98518 3.8787Z"
-        fill="#835699"
+        fill="var(--audio-file-icon-stroke)"
       />
     </SVGIcon>
   );

diff --git a/packages/react-ui-kit/src/Icon/Files/CodeFileIcon.tsx b/packages/react-ui-kit/src/Icon/Files/CodeFileIcon.tsx
@@ -24,13 +24,13 @@ export const CodeFileIcon = ({...props}: SVGIconProps) => {
     <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
       <path
         d="M1 2.5C1 1.39543 1.89543 0.5 3 0.5H11C12.1046 0.5 13 1.39543 13 2.5V11.5063C13 12.1626 12.7419 12.7926 12.2815 13.2603L10.8108 14.754C10.3409 15.2312 9.69916 15.5 9.02938 15.5H3C1.89543 15.5 1 14.6046 1 13.5V2.5Z"
-        fill="#F4EDF7"
-        stroke="#522967"
+        fill="var(--code-file-icon-bg)"
+        stroke="var(--code-file-icon-stroke)"
       />
-      <path d="M13 11.5V11.5C10.7909 11.5 9 13.2909 9 15.5V15.5" stroke="#522967" />
-      <path d="M6.14771 9.60645L7.66069 6.49976" stroke="#522967" strokeLinecap="round" />
-      <path d="M5 6.5L3.5 8L5 9.5" stroke="#522967" strokeLinecap="round" />
-      <path d="M9 6.5L10.5 8L9 9.5" stroke="#522967" strokeLinecap="round" />
+      <path d="M13 11.5V11.5C10.7909 11.5 9 13.2909 9 15.5V15.5" stroke="var(--code-file-icon-stroke)" />
+      <path d="M6.14771 9.60645L7.66069 6.49976" stroke="var(--code-file-icon-stroke)" strokeLinecap="round" />
+      <path d="M5 6.5L3.5 8L5 9.5" stroke="var(--code-file-icon-stroke)" strokeLinecap="round" />
+      <path d="M9 6.5L10.5 8L9 9.5" stroke="var(--code-file-icon-stroke)" strokeLinecap="round" />
     </SVGIcon>
   );
 };
diff --git a/packages/react-ui-kit/src/Icon/Files/DocumentFileIcon.tsx b/packages/react-ui-kit/src/Icon/Files/DocumentFileIcon.tsx
@@ -24,13 +24,16 @@ export const DocumentFileIcon = ({...props}: SVGIconProps) => {
     <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
       <path
         d="M0.998901 2.49811C0.998901 1.39378 1.89414 0.498535 2.99848 0.498535H10.9971C12.1015 0.498535 12.9967 1.39378 12.9967 2.49811V11.5029C12.9967 12.1591 12.7387 12.7889 12.2783 13.2565L10.8079 14.7499C10.3381 15.2271 9.69648 15.4958 9.02683 15.4958H2.99848C1.89414 15.4958 0.998901 14.6006 0.998901 13.4962V2.49811Z"
-        fill="#E7F0FA"
-        stroke="#043E78"
+        fill="var(--document-file-icon-bg)"
+        stroke="var(--document-file-icon-stroke)"
+      />
+      <path d="M4.49817 4.99854H9.49732" stroke="var(--document-file-icon-stroke)" strokeLinecap="round" />
+      <path d="M4.49817 6.99805H9.49732" stroke="var(--document-file-icon-stroke)" strokeLinecap="round" />
+      <path d="M4.49817 8.99756H7.99758" stroke="var(--document-file-icon-stroke)" strokeLinecap="round" />
+      <path
+        d="M12.9969 11.4971V11.4971C10.7881 11.4971 8.99756 13.2876 8.99756 15.4964V15.4964"
+        stroke="var(--document-file-icon-stroke)"
       />
-      <path d="M4.49817 4.99854H9.49732" stroke="#043E78" strokeLinecap="round" />
-      <path d="M4.49817 6.99805H9.49732" stroke="#043E78" strokeLinecap="round" />
-      <path d="M4.49817 8.99756H7.99758" stroke="#043E78" strokeLinecap="round" />
-      <path d="M12.9969 11.4971V11.4971C10.7881 11.4971 8.99756 13.2876 8.99756 15.4964V15.4964" stroke="#043E78" />
     </SVGIcon>
   );
 };
diff --git a/packages/react-ui-kit/src/Icon/Files/ImageFileIcon.tsx b/packages/react-ui-kit/src/Icon/Files/ImageFileIcon.tsx
@@ -24,13 +24,24 @@ export const ImageFileIcon = ({...props}: SVGIconProps) => {
     <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
       <path
         d="M0.995605 2.5C0.995605 1.39543 1.89104 0.5 2.99561 0.5H10.9956C12.1002 0.5 12.9956 1.39543 12.9956 2.5V11.5063C12.9956 12.1626 12.7375 12.7926 12.2771 13.2603L10.8065 14.754C10.3365 15.2312 9.69477 15.5 9.02498 15.5H2.99561C1.89104 15.5 0.995605 14.6046 0.995605 13.5V2.5Z"
-        fill="#E5F1F3"
-        stroke="#014352"
+        fill="var(--image-file-icon-bg)"
+        stroke="var(--image-file-icon-stroke)"
+      />
+      <path
+        d="M12.9956 11.5V11.5C10.7865 11.5 8.99561 13.2909 8.99561 15.5V15.5"
+        stroke="var(--image-file-icon-stroke)"
+      />
+      <circle cx="6.49561" cy="4.5" r="1" fill="var(--image-file-icon-bg)" stroke="var(--image-file-icon-stroke)" />
+      <path
+        d="M6.33054 10.25L8.49561 6.5L10.6607 10.25H6.33054Z"
+        fill="var(--image-file-icon-bg)"
+        stroke="var(--image-file-icon-stroke)"
+      />
+      <path
+        d="M3.69657 10.25L4.99561 8L6.29464 10.25H3.69657Z"
+        fill="var(--image-file-icon-bg)"
+        stroke="var(--image-file-icon-stroke)"
       />
-      <path d="M12.9956 11.5V11.5C10.7865 11.5 8.99561 13.2909 8.99561 15.5V15.5" stroke="#014352" />
-      <circle cx="6.49561" cy="4.5" r="1" fill="#E5F1F3" stroke="#014352" />
-      <path d="M6.33054 10.25L8.49561 6.5L10.6607 10.25H6.33054Z" fill="#E5F1F3" stroke="#014352" />
-      <path d="M3.69657 10.25L4.99561 8L6.29464 10.25H3.69657Z" fill="#E5F1F3" stroke="#014352" />
     </SVGIcon>
   );
 };
diff --git a/packages/react-ui-kit/src/Icon/Files/OtherFileIcon.tsx b/packages/react-ui-kit/src/Icon/Files/OtherFileIcon.tsx
@@ -24,10 +24,10 @@ export const OtherFileIcon = ({...props}: SVGIconProps) => {
     <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
       <path
         d="M1 2.5C1 1.39543 1.89543 0.5 3 0.5H11C12.1046 0.5 13 1.39543 13 2.5V11.5063C13 12.1626 12.7419 12.7926 12.2815 13.2603L10.8108 14.754C10.3409 15.2312 9.69916 15.5 9.02938 15.5H3C1.89543 15.5 1 14.6046 1 13.5V2.5Z"
-        fill="white"
-        stroke="#676B71"
+        fill="var(--other-file-icon-bg)"
+        stroke="var(--other-file-icon-stroke)"
       />
-      <path d="M13 11.5V11.5C10.7909 11.5 9 13.2909 9 15.5V15.5" stroke="#676B71" />
+      <path d="M13 11.5V11.5C10.7909 11.5 9 13.2909 9 15.5V15.5" stroke="var(--other-file-icon-stroke)" />
     </SVGIcon>
   );
 };
diff --git a/packages/react-ui-kit/src/Icon/Files/PdfFileIcon.tsx b/packages/react-ui-kit/src/Icon/Files/PdfFileIcon.tsx
@@ -24,13 +24,13 @@ export const PdfFileIcon = ({...props}: SVGIconProps) => {
     <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
       <path
         d="M1 2.5C1 1.39543 1.89543 0.5 3 0.5H11C12.1046 0.5 13 1.39543 13 2.5V11.5063C13 12.1626 12.7419 12.7926 12.2815 13.2603L10.8108 14.754C10.3409 15.2312 9.69916 15.5 9.02938 15.5H3C1.89543 15.5 1 14.6046 1 13.5V2.5Z"
-        fill="#F9E6E8"
-        stroke="#74000B"
+        fill="var(--pdf-file-icon-bg)"
+        stroke="var(--pdf-file-icon-stroke)"
       />
-      <path d="M13 11.5V11.5C10.7909 11.5 9 13.2909 9 15.5V15.5" stroke="#74000B" />
+      <path d="M13 11.5V11.5C10.7909 11.5 9 13.2909 9 15.5V15.5" stroke="var(--pdf-file-icon-stroke)" />
       <path
         d="M3.2313 11.1699C3.32497 11.2752 3.43995 11.3591 3.56855 11.416C3.69714 11.4729 3.83636 11.5015 3.97687 11.4999C4.36929 11.4807 4.74594 11.3388 5.05417 11.094C5.38262 10.8531 5.74391 10.2096 6.09206 9.33837C6.6537 9.17997 7.24819 9.03476 7.79669 8.92256C8.36679 9.49554 9.09018 9.88991 9.87904 10.0578C10.0633 10.0797 10.2501 10.0511 10.4196 9.97501C10.589 9.89889 10.7348 9.77811 10.8414 9.62548C10.9371 9.47982 10.9916 9.31077 10.9991 9.1364C11.0066 8.96204 10.9669 8.78889 10.8841 8.63545C10.7494 8.38135 10.3816 7.95233 9.42579 7.94573C8.9593 7.96454 8.49488 8.01859 8.03646 8.10744C7.61512 7.65835 7.27104 7.14199 7.01828 6.57949C7.14309 6.16368 7.26461 5.73467 7.38614 5.30236L7.51095 4.87334C7.60377 4.5714 7.63396 4.25354 7.59963 3.93942C7.50109 3.2431 7.05441 2.97249 6.66684 3.00219C6.17746 3.04509 5.70449 3.5533 5.75048 4.44433C5.78302 5.18446 5.93844 5.91393 6.2103 6.60259C5.9574 7.43092 5.72748 8.13054 5.51728 8.69485C4.53194 9.00176 3.66484 9.35487 3.35939 9.68488C3.15483 9.8701 3.02784 10.1264 3.00406 10.402C2.98029 10.6777 3.0615 10.9521 3.2313 11.1699ZM9.4225 8.69485C10.0203 8.69485 10.1812 8.91596 10.2173 8.98196C10.2369 9.01308 10.2473 9.04912 10.2473 9.08592C10.2473 9.12271 10.2369 9.15876 10.2173 9.18987C10.1863 9.22932 10.1451 9.25942 10.0981 9.27688C10.0512 9.29435 10.0004 9.29849 9.9513 9.28887C9.52045 9.20513 9.116 9.01836 8.77218 8.74436C8.98665 8.71459 9.20273 8.69806 9.41922 8.69485H9.4225ZM6.73253 3.74471C6.74895 3.74471 6.82121 3.80741 6.84749 4.00872C6.86772 4.22004 6.84538 4.43328 6.7818 4.63574L6.65699 5.07465C6.64056 5.13405 6.62086 5.19675 6.60444 5.25945C6.55617 4.97793 6.52654 4.6935 6.51576 4.40803C6.48291 3.96252 6.6537 3.76451 6.72924 3.75791L6.73253 3.74471ZM6.70297 7.59262C6.84975 7.82986 7.01215 8.05697 7.18907 8.27244C6.93288 8.32854 6.67341 8.39125 6.41394 8.45725C6.51576 8.18004 6.60444 7.88963 6.70297 7.59262ZM3.91118 10.2162C4.2849 9.94478 4.7044 9.74354 5.14942 9.62218C5.03365 9.93927 4.85102 10.2275 4.61405 10.467C4.1608 10.797 3.87833 10.7673 3.79622 10.6716C3.71411 10.5759 3.74696 10.3944 3.91118 10.2129V10.2162Z"
-        fill="#74000B"
+        fill="var(--pdf-file-icon-stroke)"
       />
     </SVGIcon>
   );

diff --git a/packages/react-ui-kit/src/Icon/Files/PresentationFileIcon.tsx b/packages/react-ui-kit/src/Icon/Files/PresentationFileIcon.tsx
@@ -24,13 +24,21 @@ export const PresentationFileIcon = ({...props}: SVGIconProps) => {
     <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
       <path
         d="M1 2.5C1 1.39543 1.89543 0.5 3 0.5H11C12.1046 0.5 13 1.39543 13 2.5V11.5063C13 12.1626 12.7419 12.7926 12.2815 13.2603L10.8108 14.754C10.3409 15.2312 9.69916 15.5 9.02938 15.5H3C1.89543 15.5 1 14.6046 1 13.5V2.5Z"
-        fill="#F6EEE8"
-        stroke="#61350D"
+        fill="var(--presentation-file-icon-bg)"
+        stroke="var(--presentation-file-icon-stroke)"
+      />
+      <path d="M13 11.5V11.5C10.7909 11.5 9 13.2909 9 15.5V15.5" stroke="var(--presentation-file-icon-stroke)" />
+      <path d="M5.5 9.5L5 11" stroke="var(--presentation-file-icon-stroke)" strokeLinecap="round" />
+      <path d="M8 9.5L8.5 11" stroke="var(--presentation-file-icon-stroke)" strokeLinecap="round" />
+      <rect
+        x="4"
+        y="5"
+        width="5.5"
+        height="3.97059"
+        rx="1"
+        fill="var(--presentation-file-icon-bg)"
+        stroke="var(--presentation-file-icon-stroke)"
       />
-      <path d="M13 11.5V11.5C10.7909 11.5 9 13.2909 9 15.5V15.5" stroke="#61350D" />
-      <path d="M5.5 9.5L5 11" stroke="#61350D" strokeLinecap="round" />
-      <path d="M8 9.5L8.5 11" stroke="#61350D" strokeLinecap="round" />
-      <rect x="4" y="5" width="5.5" height="3.97059" rx="1" fill="#F6EEE8" stroke="#61350D" />
     </SVGIcon>
   );
 };
diff --git a/packages/react-ui-kit/src/Icon/Files/SpreadsheetFileIcon.tsx b/packages/react-ui-kit/src/Icon/Files/SpreadsheetFileIcon.tsx
@@ -24,13 +24,21 @@ export const SpreadsheetFileIcon = ({...props}: SVGIconProps) => {
     <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
       <path
         d="M1 2.5C1 1.39543 1.89543 0.5 3 0.5H11C12.1046 0.5 13 1.39543 13 2.5V11.5063C13 12.1626 12.7419 12.7926 12.2815 13.2603L10.8108 14.754C10.3409 15.2312 9.69916 15.5 9.02938 15.5H3C1.89543 15.5 1 14.6046 1 13.5V2.5Z"
-        fill="#E8F1EA"
-        stroke="#11481F"
+        fill="var(--spreadsheet-file-icon-bg)"
+        stroke="var(--spreadsheet-file-icon-stroke)"
       />
-      <path d="M13 11.5V11.5C10.7909 11.5 9 13.2909 9 15.5V15.5" stroke="#11481F" />
-      <rect x="3.5" y="5" width="7.5" height="4" rx="1" fill="#E8F1EA" stroke="#11481F" />
-      <path d="M3.89478 7H10.6053" stroke="#11481F" strokeLinecap="round" />
-      <path d="M6.50464 5L6.50464 9" stroke="#11481F" strokeLinecap="square" />
+      <path d="M13 11.5V11.5C10.7909 11.5 9 13.2909 9 15.5V15.5" stroke="var(--spreadsheet-file-icon-stroke)" />
+      <rect
+        x="3.5"
+        y="5"
+        width="7.5"
+        height="4"
+        rx="1"
+        fill="var(--spreadsheet-file-icon-bg)"
+        stroke="var(--spreadsheet-file-icon-stroke)"
+      />
+      <path d="M3.89478 7H10.6053" stroke="var(--spreadsheet-file-icon-stroke)" strokeLinecap="round" />
+      <path d="M6.50464 5L6.50464 9" stroke="var(--spreadsheet-file-icon-stroke)" strokeLinecap="square" />
     </SVGIcon>
   );
 };
diff --git a/packages/react-ui-kit/src/Icon/Files/VideoFileIcon.tsx b/packages/react-ui-kit/src/Icon/Files/VideoFileIcon.tsx
@@ -24,13 +24,13 @@ export const VideoFileIcon = ({...props}: SVGIconProps) => {
     <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
       <path
         d="M1 2.5C1 1.39543 1.89543 0.5 3 0.5H11C12.1046 0.5 13 1.39543 13 2.5V11.5063C13 12.1626 12.7419 12.7926 12.2815 13.2603L10.8108 14.754C10.3409 15.2312 9.69916 15.5 9.02938 15.5H3C1.89543 15.5 1 14.6046 1 13.5V2.5Z"
-        fill="#F9E6E8"
-        stroke="#74000B"
+        fill="var(--video-file-icon-bg)"
+        stroke="var(--video-file-icon-stroke)"
       />
-      <path d="M13 11.5V11.5C10.7909 11.5 9 13.2909 9 15.5V15.5" stroke="#74000B" />
+      <path d="M13 11.5V11.5C10.7909 11.5 9 13.2909 9 15.5V15.5" stroke="var(--video-file-icon-stroke)" />
       <path
         d="M9.25 7.31699C9.58333 7.50944 9.58333 7.99056 9.25 8.18301L5.875 10.1316C5.54167 10.324 5.125 10.0835 5.125 9.69856L5.125 5.80144C5.125 5.41654 5.54167 5.17598 5.875 5.36843L9.25 7.31699Z"
-        stroke="#74000B"
+        stroke="var(--video-file-icon-stroke)"
       />
     </SVGIcon>
   );

diff --git a/packages/react-ui-kit/src/Theme/GlobalCssVariables.tsx b/packages/react-ui-kit/src/Theme/GlobalCssVariables.tsx
@@ -69,6 +69,46 @@ const light: () => CSSObject = () => ({
   '--success-color': COLOR_V2.GREEN_LIGHT_500,
   '--app-bg': COLOR_V2.GRAY_10,
   '--main-color': COLOR.BLACK,
+
+  // Archive File Icon
+  '--archive-file-icon-bg': COLOR_V2.AMBER_LIGHT_50,
+  '--archive-file-icon-stroke': COLOR_V2.AMBER_LIGHT_700,
+
+  // Audio File Icon
+  '--audio-file-icon-bg': COLOR_V2.PURPLE_DARK_50,
+  '--audio-file-icon-stroke': COLOR_V2.PURPLE_DARK_700,
+
+  // Code File Icon
+  '--code-file-icon-bg': COLOR_V2.PURPLE_LIGHT_50,
+  '--code-file-icon-stroke': COLOR_V2.PURPLE_LIGHT_700,
+
+  // Document File Icon
+  '--document-file-icon-bg': COLOR_V2.BLUE_LIGHT_50,
+  '--document-file-icon-stroke': COLOR_V2.BLUE_LIGHT_700,
+
+  // Image File Icon
+  '--image-file-icon-bg': COLOR_V2.TURQUOISE_LIGHT_50,
+  '--image-file-icon-stroke': COLOR_V2.TURQUOISE_LIGHT_700,
+
+  // PDF File Icon
+  '--pdf-file-icon-bg': COLOR_V2.RED_LIGHT_50,
+  '--pdf-file-icon-stroke': COLOR_V2.RED_LIGHT_700,
+
+  // Spreadsheet File Icon
+  '--spreadsheet-file-icon-bg': COLOR_V2.GREEN_LIGHT_50,
+  '--spreadsheet-file-icon-stroke': COLOR_V2.GREEN_LIGHT_700,
+
+  // Presentation File Icon
+  '--presentation-file-icon-bg': COLOR_V2.AMBER_LIGHT_50,
+  '--presentation-file-icon-stroke': COLOR_V2.AMBER_LIGHT_700,
+
+  // Video File Icon
+  '--video-file-icon-bg': COLOR_V2.RED_LIGHT_50,
+  '--video-file-icon-stroke': COLOR_V2.RED_LIGHT_700,
+
+  // Other File Icon
+  '--other-file-icon-bg': COLOR_V2.WHITE,
+  '--other-file-icon-stroke': COLOR_V2.GRAY_70,
 });
 
 const dark: () => CSSObject = () => ({
@@ -119,6 +159,46 @@ const dark: () => CSSObject = () => ({
   '--success-color': COLOR_V2.GREEN_DARK_500,
   '--app-bg': COLOR_V2.GRAY_95,
   '--main-color': COLOR.WHITE,
+
+  // Archive File Icon
+  '--archive-file-icon-bg': COLOR_V2.AMBER_DARK_50,
+  '--archive-file-icon-stroke': COLOR_V2.AMBER_DARK_700,
+
+  // Audio File Icon
+  '--audio-file-icon-bg': COLOR_V2.PURPLE_DARK_50,
+  '--audio-file-icon-stroke': COLOR_V2.PURPLE_DARK_700,
+
+  // Code File Icon
+  '--code-file-icon-bg': COLOR_V2.PURPLE_DARK_50,
+  '--code-file-icon-stroke': COLOR_V2.PURPLE_DARK_700,
+
+  // Document File Icon
+  '--document-file-icon-bg': COLOR_V2.BLUE_DARK_50,
+  '--document-file-icon-stroke': COLOR_V2.BLUE_DARK_700,
+
+  // Image File Icon
+  '--image-file-icon-bg': COLOR_V2.TURQUOISE_DARK_50,
+  '--image-file-icon-stroke': COLOR_V2.TURQUOISE_DARK_700,
+
+  // PDF File Icon
+  '--pdf-file-icon-bg': COLOR_V2.RED_DARK_50,
+  '--pdf-file-icon-stroke': COLOR_V2.RED_DARK_700,
+
+  // Spreadsheet File Icon
+  '--spreadsheet-file-icon-bg': COLOR_V2.GREEN_DARK_50,
+  '--spreadsheet-file-icon-stroke': COLOR_V2.GREEN_DARK_700,
+
+  // Presentation File Icon
+  '--presentation-file-icon-bg': COLOR_V2.AMBER_DARK_50,
+  '--presentation-file-icon-stroke': COLOR_V2.AMBER_DARK_700,
+
+  // Video File Icon
+  '--video-file-icon-bg': COLOR_V2.RED_DARK_50,
+  '--video-file-icon-stroke': COLOR_V2.RED_DARK_700,
+
+  // Other File Icon
+  '--other-file-icon-bg': COLOR_V2.GRAY_20,
+  '--other-file-icon-stroke': COLOR_V2.GRAY_60,
 });
 
 const accentColors: () => CSSObject = () => ({