Make the dark theme plugin work (#360)

sanity-io · Dec 7, 2017 · 556bff7 · 556bff7
1 parent e9cddad
commit 556bff7
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -54,7 +54,7 @@
 }
 
 .hits {
-  color: var(--black);
+  color: var(--text-color);
   composes: resetList from "part:@sanity/base/theme/layout/helpers";
   width: 100%;
 }