fix: remove hard coded white in icons

Arize-ai · Oct 30, 2023 · 4dec51b · 4dec51b
1 parent 0fdb617
commit 4dec51b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 15 deletions.
diff --git a/src/icon/Icons.tsx b/src/icon/Icons.tsx
@@ -239,13 +239,11 @@ export const ArrowMix = () => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M7.78812 11.4707H16.2141C16.8871 11.4707 17.4941 11.0688 17.7991 10.4218C18.1451 9.68875 18.0441 8.82175 17.5401 8.21075L13.3271 3.11275C12.6561 2.29575 11.3471 2.29575 10.6751 3.11275L6.46112 8.21175C5.95812 8.82175 5.85812 9.68875 6.20312 10.4218C6.50812 11.0688 7.11612 11.4707 7.78812 11.4707ZM15.9101 9.47075H8.01512L11.9991 4.64875L15.9101 9.47075Z"
-      fill="white"
     />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M10.6751 20.858C11.0111 21.267 11.4951 21.5 12.0011 21.5C12.5071 21.5 12.9911 21.267 13.3271 20.858L17.5411 15.759C18.0441 15.149 18.1451 14.282 17.7991 13.549C17.4941 12.902 16.8871 12.5 16.2141 12.5H7.78806C7.11506 12.5 6.50806 12.902 6.20306 13.549C5.85806 14.282 5.95806 15.149 6.46206 15.76L10.6751 20.858ZM12.0031 19.322L8.09306 14.5H15.9881L12.0031 19.322Z"
-      fill="white"
     />
   </svg>
 );
@@ -398,11 +396,7 @@ export const Column = () => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path
-      d="M2.2 12.4H9.8C10.0889 12.4 10.375 12.3431 10.6419 12.2325C10.9088 12.122 11.1513 11.9599 11.3556 11.7556C11.5599 11.5513 11.722 11.3088 11.8325 11.0419C11.9431 10.775 12 10.4889 12 10.2V2.2C12 1.91109 11.9431 1.62501 11.8325 1.3581C11.722 1.09118 11.5599 0.848654 11.3556 0.644365C11.1513 0.440076 10.9088 0.278026 10.6419 0.167465C10.375 0.0569049 10.0889 0 9.8 0H2.2C1.61652 0 1.05694 0.231785 0.644365 0.644365C0.231785 1.05694 0 1.61652 0 2.2V10.2C0 10.7835 0.231785 11.3431 0.644365 11.7556C1.05694 12.1682 1.61652 12.4 2.2 12.4ZM4.8 11.2V1.2H7.2V11.2H4.8ZM10.8 2.2V10.2C10.8 10.4652 10.6946 10.7196 10.5071 10.9071C10.3196 11.0946 10.0652 11.2 9.8 11.2H8.4V1.2H9.8C10.0652 1.2 10.3196 1.30536 10.5071 1.49289C10.6946 1.68043 10.8 1.93478 10.8 2.2ZM1.2 2.2C1.2 1.93478 1.30536 1.68043 1.49289 1.49289C1.68043 1.30536 1.93478 1.2 2.2 1.2H3.6V11.2H2.2C1.93478 11.2 1.68043 11.0946 1.49289 10.9071C1.30536 10.7196 1.2 10.4652 1.2 10.2V2.2Z"
-      fill="white"
-      fillOpacity="0.9"
-    />
+    <path d="M2.2 12.4H9.8C10.0889 12.4 10.375 12.3431 10.6419 12.2325C10.9088 12.122 11.1513 11.9599 11.3556 11.7556C11.5599 11.5513 11.722 11.3088 11.8325 11.0419C11.9431 10.775 12 10.4889 12 10.2V2.2C12 1.91109 11.9431 1.62501 11.8325 1.3581C11.722 1.09118 11.5599 0.848654 11.3556 0.644365C11.1513 0.440076 10.9088 0.278026 10.6419 0.167465C10.375 0.0569049 10.0889 0 9.8 0H2.2C1.61652 0 1.05694 0.231785 0.644365 0.644365C0.231785 1.05694 0 1.61652 0 2.2V10.2C0 10.7835 0.231785 11.3431 0.644365 11.7556C1.05694 12.1682 1.61652 12.4 2.2 12.4ZM4.8 11.2V1.2H7.2V11.2H4.8ZM10.8 2.2V10.2C10.8 10.4652 10.6946 10.7196 10.5071 10.9071C10.3196 11.0946 10.0652 11.2 9.8 11.2H8.4V1.2H9.8C10.0652 1.2 10.3196 1.30536 10.5071 1.49289C10.6946 1.68043 10.8 1.93478 10.8 2.2ZM1.2 2.2C1.2 1.93478 1.30536 1.68043 1.49289 1.49289C1.68043 1.30536 1.93478 1.2 2.2 1.2H3.6V11.2H2.2C1.93478 11.2 1.68043 11.0946 1.49289 10.9071C1.30536 10.7196 1.2 10.4652 1.2 10.2V2.2Z" />
   </svg>
 );
 
@@ -856,7 +850,6 @@ export const DuplicateIcon = () => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M9 13V12C9 10.346 10.346 9 12 9H13V5.667C13 5.299 12.701 5 12.333 5H5.667C5.299 5 5 5.299 5 5.667V12.333C5 12.701 5.299 13 5.667 13H9ZM9 15H5.667C4.196 15 3 13.804 3 12.333V5.667C3 4.196 4.196 3 5.667 3H12.333C13.804 3 15 4.196 15 5.667V9H18C19.654 9 21 10.346 21 12V18C21 19.654 19.654 21 18 21H12C10.346 21 9 19.654 9 18V15ZM12 11C11.449 11 11 11.449 11 12V18C11 18.551 11.449 19 12 19H18C18.552 19 19 18.551 19 18V12C19 11.449 18.552 11 18 11H12Z"
-      fill="white"
     />
     <mask
       id="mask0_725_12898"
@@ -873,7 +866,6 @@ export const DuplicateIcon = () => (
         fillRule="evenodd"
         clipRule="evenodd"
         d="M9 13V12C9 10.346 10.346 9 12 9H13V5.667C13 5.299 12.701 5 12.333 5H5.667C5.299 5 5 5.299 5 5.667V12.333C5 12.701 5.299 13 5.667 13H9ZM9 15H5.667C4.196 15 3 13.804 3 12.333V5.667C3 4.196 4.196 3 5.667 3H12.333C13.804 3 15 4.196 15 5.667V9H18C19.654 9 21 10.346 21 12V18C21 19.654 19.654 21 18 21H12C10.346 21 9 19.654 9 18V15ZM12 11C11.449 11 11 11.449 11 12V18C11 18.551 11.449 19 12 19H18C18.552 19 19 18.551 19 18V12C19 11.449 18.552 11 18 11H12Z"
-        fill="white"
       />
     </mask>
     <g mask="url(#mask0_725_12898)"></g>
@@ -933,8 +925,6 @@ export const EyeOutline = () => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M9.77475 4.16985C14.7548 4.01401 17.6914 8.65901 18.2231 9.58568C18.3698 9.84235 18.3698 10.1582 18.2231 10.4148C17.5114 11.6557 14.8314 15.7132 10.2256 15.8307C10.1573 15.8323 10.0889 15.8332 10.0206 15.8332C5.13475 15.8332 2.30142 11.329 1.77725 10.4148C1.62975 10.1582 1.62975 9.84235 1.77725 9.58568C2.48892 8.34485 5.16808 4.28651 9.77475 4.16985ZM10.1831 14.1648C6.59475 14.2482 4.25392 11.179 3.47725 9.99651C4.33225 8.65901 6.48558 5.92068 9.81725 5.83568C13.3914 5.74485 15.7456 8.82151 16.5223 10.004C15.6681 11.3415 13.5139 14.0798 10.1831 14.1648ZM7.08333 10.0002C7.08333 8.39185 8.39167 7.08351 10 7.08351C11.6083 7.08351 12.9167 8.39185 12.9167 10.0002C12.9167 11.6085 11.6083 12.9168 10 12.9168C8.39167 12.9168 7.08333 11.6085 7.08333 10.0002ZM8.75 10.0002C8.75 10.6893 9.31083 11.2502 10 11.2502C10.6892 11.2502 11.25 10.6893 11.25 10.0002C11.25 9.31101 10.6892 8.75018 10 8.75018C9.31083 8.75018 8.75 9.31101 8.75 10.0002Z"
-      fill="white"
-      fillOpacity="0.9"
     />
     <mask
       id="mask0_935_15127"
@@ -951,7 +941,6 @@ export const EyeOutline = () => (
         fillRule="evenodd"
         clipRule="evenodd"
         d="M9.77475 4.16985C14.7548 4.01401 17.6914 8.65901 18.2231 9.58568C18.3698 9.84235 18.3698 10.1582 18.2231 10.4148C17.5114 11.6557 14.8314 15.7132 10.2256 15.8307C10.1573 15.8323 10.0889 15.8332 10.0206 15.8332C5.13475 15.8332 2.30142 11.329 1.77725 10.4148C1.62975 10.1582 1.62975 9.84235 1.77725 9.58568C2.48892 8.34485 5.16808 4.28651 9.77475 4.16985ZM10.1831 14.1648C6.59475 14.2482 4.25392 11.179 3.47725 9.99651C4.33225 8.65901 6.48558 5.92068 9.81725 5.83568C13.3914 5.74485 15.7456 8.82151 16.5223 10.004C15.6681 11.3415 13.5139 14.0798 10.1831 14.1648ZM7.08333 10.0002C7.08333 8.39185 8.39167 7.08351 10 7.08351C11.6083 7.08351 12.9167 8.39185 12.9167 10.0002C12.9167 11.6085 11.6083 12.9168 10 12.9168C8.39167 12.9168 7.08333 11.6085 7.08333 10.0002ZM8.75 10.0002C8.75 10.6893 9.31083 11.2502 10 11.2502C10.6892 11.2502 11.25 10.6893 11.25 10.0002C11.25 9.31101 10.6892 8.75018 10 8.75018C9.31083 8.75018 8.75 9.31101 8.75 10.0002Z"
-        fill="white"
       />
     </mask>
     <g mask="url(#mask0_935_15127)"></g>

diff --git a/stories/Icons.stories.tsx b/stories/Icons.stories.tsx
@@ -11,6 +11,7 @@ import {
   View,
 } from '../src';
 import { Meta, Story } from '@storybook/react';
+import { ThemeToggleWrap } from './components/ThemeToggleWrap';
 
 function IconsGrid() {
   const iconsArray: ReactElement[] = [];
@@ -25,11 +26,11 @@ function IconsGrid() {
             display: 'flex',
             flexDirection: 'column',
             gap: '8px',
-            color: 'white',
             width: 120,
             height: 80,
             alignItems: 'center',
             justifyContent: 'center',
+            color: 'var(--ac-global-color-grey-800)',
             borderRadius: 3,
           }}
           title={name}
@@ -63,7 +64,7 @@ function IconsGrid() {
   });
 
   return (
-    <Provider>
+    <ThemeToggleWrap>
       <ul
         style={{
           listStyle: 'none',
@@ -79,7 +80,7 @@ function IconsGrid() {
           <li key={i}>{el}</li>
         ))}
       </ul>
-    </Provider>
+    </ThemeToggleWrap>
   );
 }