feat: add light/dark icons (#115)

* feat: add light/dark icons * v0.9.21
Arize-ai · Mar 24, 2023 · b5d3655 · b5d3655
1 parent 403b9dd
commit b5d3655
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.9.20",
+  "version": "0.9.21",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

diff --git a/src/icon/Icons.tsx b/src/icon/Icons.tsx
@@ -649,3 +649,38 @@ export const Download = () => (
     </g>
   </svg>
 );
+
+export const MoonOutline = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g data-name="Layer 2">
+      <g data-name="moon">
+        <rect width="24" height="24" opacity="0" />
+        <path d="M12.3 22h-.1a10.31 10.31 0 0 1-7.34-3.15 10.46 10.46 0 0 1-.26-14 10.13 10.13 0 0 1 4-2.74 1 1 0 0 1 1.06.22 1 1 0 0 1 .24 1 8.4 8.4 0 0 0 1.94 8.81 8.47 8.47 0 0 0 8.83 1.94 1 1 0 0 1 1.27 1.29A10.16 10.16 0 0 1 19.6 19a10.28 10.28 0 0 1-7.3 3zM7.46 4.92a7.93 7.93 0 0 0-1.37 1.22 8.44 8.44 0 0 0 .2 11.32A8.29 8.29 0 0 0 12.22 20h.08a8.34 8.34 0 0 0 6.78-3.49A10.37 10.37 0 0 1 7.46 4.92z" />
+      </g>
+    </g>
+  </svg>
+);
+
+export const SunOutline = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g data-name="Layer 2">
+      <g data-name="sun">
+        <rect
+          width="24"
+          height="24"
+          transform="rotate(180 12 12)"
+          opacity="0"
+        />
+        <path d="M12 6a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v2a1 1 0 0 0 1 1z" />
+        <path d="M21 11h-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2z" />
+        <path d="M6 12a1 1 0 0 0-1-1H3a1 1 0 0 0 0 2h2a1 1 0 0 0 1-1z" />
+        <path d="M6.22 5a1 1 0 0 0-1.39 1.47l1.44 1.39a1 1 0 0 0 .73.28 1 1 0 0 0 .72-.31 1 1 0 0 0 0-1.41z" />
+        <path d="M17 8.14a1 1 0 0 0 .69-.28l1.44-1.39A1 1 0 0 0 17.78 5l-1.44 1.42a1 1 0 0 0 0 1.41 1 1 0 0 0 .66.31z" />
+        <path d="M12 18a1 1 0 0 0-1 1v2a1 1 0 0 0 2 0v-2a1 1 0 0 0-1-1z" />
+        <path d="M17.73 16.14a1 1 0 0 0-1.39 1.44L17.78 19a1 1 0 0 0 .69.28 1 1 0 0 0 .72-.3 1 1 0 0 0 0-1.42z" />
+        <path d="M6.27 16.14l-1.44 1.39a1 1 0 0 0 0 1.42 1 1 0 0 0 .72.3 1 1 0 0 0 .67-.25l1.44-1.39a1 1 0 0 0-1.39-1.44z" />
+        <path d="M12 8a4 4 0 1 0 4 4 4 4 0 0 0-4-4zm0 6a2 2 0 1 1 2-2 2 2 0 0 1-2 2z" />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/src/overlays/Modal.tsx b/src/overlays/Modal.tsx
@@ -26,7 +26,7 @@ const modalWrapperCSS = css`
 const exitTransitionAnimationTime = '0.1s';
 const enterTransitionAnimationTime = '0.2s';
 const modalCSS = css`
-  background-color: ${theme.components.modal.bgColor};
+  background-color: ${theme.components.modal.backgroundColor};
   pointer-events: auto;
   opacity: 0;
   &.ac-modal--slideOver {

diff --git a/src/theme.ts b/src/theme.ts
@@ -111,7 +111,7 @@ export const theme = {
       successHoverBackgroundColor: '#7EE787',
     },
     modal: {
-      bgColor: '#1C232B',
+      backgroundColor: grayColors.gray800,
     },
   },
   typography: {