Merge pull request #274 from fky2015/master

Author: transitive-bullshit

packages/react-notion-x/src/styles.css

@@ -610,8 +610,8 @@
 }
 
 .notion-search .notion-page-icon {
-  fill: rgba(55, 53, 47, 0.8);
-  color: rgb(55, 53, 47);
+  fill: var(--fg-color-6);
+  color: var(--fg-color);
 }
 
 img.notion-page-icon,
@@ -2373,7 +2373,7 @@ svg.notion-page-icon {
   box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
     rgba(15, 15, 15, 0.1) 0px 5px 10px, rgba(15, 15, 15, 0.2) 0px 15px 40px;
   border-radius: 3px;
-  background: #fff;
+  background: var(--bg-color);
 
   position: relative;
   top: 90px;
@@ -2391,6 +2391,10 @@ svg.notion-page-icon {
   font-family: var(--notion-font);
 }
 
+.notion-search input {
+  background-color: var(--bg-color);
+}
+
 .notion-search .quickFindMenu {
   display: flex;
   flex-direction: column;
@@ -2425,7 +2429,7 @@ svg.notion-page-icon {
 
 .notion-search .inlineIcon {
   margin-right: 10px;
-  fill: rgba(55, 53, 47, 0.4);
+  fill: var(--fg-color-2);
 }
 
 .notion-search .clearButton {
@@ -2438,15 +2442,15 @@ svg.notion-page-icon {
 .notion-search .clearIcon {
   width: 14px;
   height: 14px;
-  fill: rgba(55, 53, 47, 0.3);
+  fill: var(--fg-color-2);
 }
 
 .notion-search .clearButton:hover .clearIcon {
-  fill: rgba(55, 53, 47, 0.4);
+  fill: var(--fg-color-3);
 }
 
 .notion-search .clearButton:active .clearIcon {
-  fill: rgba(55, 53, 47, 0.8);
+  fill: var(--fg-color-6);
 }
 
 @keyframes spinner {
@@ -2485,7 +2489,7 @@ svg.notion-page-icon {
   margin-top: 1px;
   font-size: 12px;
   min-height: 28px;
-  color: rgba(55, 53, 47, 0.4);
+  color: var(--fg-color-2);
   user-select: none;
   padding: 0 16px;
   display: flex;
@@ -2495,7 +2499,7 @@ svg.notion-page-icon {
 
 .notion-search .resultsCount {
   font-weight: 500;
-  color: rgba(55, 53, 47, 0.6);
+  color: var(--fg-color-3);
 }
 
 .notion-search .resultsPane {
@@ -2514,16 +2518,16 @@ svg.notion-page-icon {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  color: rgb(55, 53, 47);
+  color: var(--fg-color);
   text-decoration: none;
 }
 
 .notion-search .resultsPane .result:hover {
-  background: rgba(55, 53, 47, 0.08) !important;
+  background: var(--bg-color-2) !important;
 }
 
 .notion-search .resultsPane .result:active {
-  background: rgba(55, 53, 47, 0.16) !important;
+  background: var(--fg-color-1) !important;
 }
 
 .notion-search .resultsPane .result {