From 96517125723aedf7829aacff614398df2691b1bb Mon Sep 17 00:00:00 2001
From: "Kristoffer J. Sivertsen" <kristoffer@bengler.no>
Date: Thu, 30 Nov 2017 13:03:46 +0100
Subject: [PATCH] Make the dark theme plugin work (#360)

---
 .../@sanity/base/src/styles/variables/selectable-item.css   | 2 +-
 packages/@sanity/components/src/buttons/styles/InInput.css  | 1 +
 packages/@sanity/components/src/loading/Spinner.js          | 2 +-
 .../components/src/previews/common/SvgPlaceholder.js        | 6 +++---
 .../components/src/previews/styles/DefaultPreview.css       | 2 --
 .../@sanity/components/src/progress/styles/ProgressBar.css  | 4 ++--
 .../@sanity/default-layout/src/components/styles/Search.css | 2 +-
 7 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/@sanity/base/src/styles/variables/selectable-item.css b/packages/@sanity/base/src/styles/variables/selectable-item.css
index b5d83fbe6b5..9e839ccb495 100644
--- a/packages/@sanity/base/src/styles/variables/selectable-item.css
+++ b/packages/@sanity/base/src/styles/variables/selectable-item.css
@@ -6,7 +6,7 @@
     Selectable item
   */
   --selectable-item-color: transparent;
-  --selectable-item-text-color: var(--black);
+  --selectable-item-text-color: var(--text-color);
   --selectable-item-color--inverted: var(--selectable-item-text-color);
   --selectable-item-color-hover: color(var(--brand-primary) lightness(- 20%) a(20%));
   --selectable-item-color-hover--inverted: var(--selectable-item-text-color);
diff --git a/packages/@sanity/components/src/buttons/styles/InInput.css b/packages/@sanity/components/src/buttons/styles/InInput.css
index 3010bd2ad3a..b19dcfecc6a 100644
--- a/packages/@sanity/components/src/buttons/styles/InInput.css
+++ b/packages/@sanity/components/src/buttons/styles/InInput.css
@@ -14,6 +14,7 @@
   margin-top: calc(var(--input-padding-horizontal) * -1);
   padding: 0 1em;
   background-color: var(--gray-lighter);
+  border-radius: var(--button-border-radius);
 
   &:first-child {
     margin-right: calc(var(--input-padding-vertical) * -1);
diff --git a/packages/@sanity/components/src/loading/Spinner.js b/packages/@sanity/components/src/loading/Spinner.js
index abc3db752c2..32defd37e65 100644
--- a/packages/@sanity/components/src/loading/Spinner.js
+++ b/packages/@sanity/components/src/loading/Spinner.js
@@ -20,7 +20,7 @@ export default class Spinner extends React.Component {
           cy="50"
           r="49.5"
           strokeDasharray="202.1614872585032 108.85618544688634"
-          stroke="#000000"
+          stroke="currentColor"
           fill="none"
           strokeWidth="1"
         >
diff --git a/packages/@sanity/components/src/previews/common/SvgPlaceholder.js b/packages/@sanity/components/src/previews/common/SvgPlaceholder.js
index 2f7cc9c341d..007aab9cf4b 100644
--- a/packages/@sanity/components/src/previews/common/SvgPlaceholder.js
+++ b/packages/@sanity/components/src/previews/common/SvgPlaceholder.js
@@ -12,9 +12,9 @@ const SvgPlaceholder = ({styles}) => {
     <div className={styles.placeholder}>
       <svg x="0" y="0" className={styles.svg} style={svgStyles}>
         <linearGradient id="loader_gradient" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0" style={{stopColor: '#ddd'}} stopOpacity="0.5" />
-          <stop offset="0.5" style={{stopColor: '#eee'}} />
-          <stop offset="1" style={{stopColor: '#ddd'}} stopOpacity="0.5" />
+          <stop offset="0" style={{stopColor: 'currentColor'}} stopOpacity="0.2" />
+          <stop offset="0.5" style={{stopColor: 'currentColor'}} stopOpacity="0.3" />
+          <stop offset="1" style={{stopColor: 'currentColor'}} stopOpacity="0.2" />
           {
           /*
             Animation disabled due to performance issues. Do not re-enable before verifying that it doesn't cause
diff --git a/packages/@sanity/components/src/previews/styles/DefaultPreview.css b/packages/@sanity/components/src/previews/styles/DefaultPreview.css
index a00ee75d1a7..5c8f5d984b1 100644
--- a/packages/@sanity/components/src/previews/styles/DefaultPreview.css
+++ b/packages/@sanity/components/src/previews/styles/DefaultPreview.css
@@ -134,7 +134,6 @@
 }
 
 .animation {
-  /* composes: animated-loading-background from 'part:@sanity/base/theme/animation-style'; */
   position: absolute;
   top: 0;
   left: 0;
@@ -171,5 +170,4 @@
   background-color: var(--progress-bar-bg);
   box-shadow: 0 0 3px var(--progress-bar-bg);
   z-index: 2;
-  /*animation: progressGlow 0.5s linear infinite alternate;*/
 }
diff --git a/packages/@sanity/components/src/progress/styles/ProgressBar.css b/packages/@sanity/components/src/progress/styles/ProgressBar.css
index 4e8643b857b..b88343b80ba 100644
--- a/packages/@sanity/components/src/progress/styles/ProgressBar.css
+++ b/packages/@sanity/components/src/progress/styles/ProgressBar.css
@@ -5,7 +5,7 @@
 }
 
 .root {
-  border: 1px solid #000;
+  border: 1px solid var(--brand-darkest);
   height: var(--progress-bar-height);
   width: 100%;
   clear: both;
@@ -34,7 +34,7 @@
 }
 
 .bar {
-  background-color: black;
+  background-color: var(--brand-darkest);
   height: calc(var(--progress-bar-height) - 0.2em);
   transition-property: width;
   transition-duration: 0.1s;
diff --git a/packages/@sanity/default-layout/src/components/styles/Search.css b/packages/@sanity/default-layout/src/components/styles/Search.css
index b29b695d7ce..31a3d2a1f1b 100644
--- a/packages/@sanity/default-layout/src/components/styles/Search.css
+++ b/packages/@sanity/default-layout/src/components/styles/Search.css
@@ -54,7 +54,7 @@
 }
 
 .hits {
-  color: var(--black);
+  color: var(--text-color);
   composes: resetList from "part:@sanity/base/theme/layout/helpers";
   width: 100%;
 }