[base] Update default CSS variables (#1867)

* [test-studio] Add tool for visualizing CSS variables * [base] Update CSS variables * [base] Fix missing application of CSS variables * [base] Fix monospace font * [base] Update default code colors * [base] Update loading screen colors * [base] Fix hover backgrounds and adjust fullscreen dialog
sanity-io · May 19, 2020 · dda3bf1 · dda3bf1 · vercel · May 19, 2020
1 parent 55307a7
commit dda3bf1
Show file tree

Hide file tree

Showing 35 changed files with 3,156 additions and 196 deletions.
diff --git a/packages/@sanity/base/src/components/AppLoadingScreen.js b/packages/@sanity/base/src/components/AppLoadingScreen.js
@@ -4,10 +4,13 @@ import React from 'react'
 
 const AppLoadingScreenStyles = `
 .sanity-app-loading-screen__root {
+  -webkit-font-smoothing: antialiased;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  background-color: #e4e8ed;
+  color: #7b8ca8;
   display: block;
   width: 100vw;
   height: 100vh;
-  background-color: #333;
   position: absolute;
   top: 0;
   left: 0;
@@ -23,13 +26,10 @@ const AppLoadingScreenStyles = `
 }
 
 .sanity-app-loading-screen__text {
-  font-size: 5em;
-  color: #fff;
-  font-family: sans-serif;
   margin-top: 7rem;
-  font-size: 12px;
-  opacity: 0.5;
+  font-size: 13px;
 }
+
 .sanity-app-loading-screen__contentStudioLogo {
   display: block;
   top: 50vh;
@@ -38,7 +38,6 @@ const AppLoadingScreenStyles = `
   width: 4rem;
   height: 4rem;
   transform: translate(-50%, -50%);
-  opacity: 0.7;
 }
 `
 
@@ -60,7 +59,6 @@ export default class AppLoadingScreen extends React.PureComponent {
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 64 64"
           shapeRendering="geometricPrecision"
-          filter="drop-shadow(0px 0px 5px rgba(0,0,0,0.20))"
         >
           <style>
             {`
@@ -82,7 +80,7 @@ export default class AppLoadingScreen extends React.PureComponent {
           <path
             id="contentStudioLogoRed2"
             d="M31.8-.2C14.6-.2-.2 5.3-.2 14v14c0-15.8 24.1-17 32-17 8 0 32 1.3 32 17V14C63.8 5.2 49-.2 31.8-.2z"
-            fill="#666"
+            fill="#95a3b9"
             transform="rotate(135 29.6 26.5)"
             style={{
               animation:
@@ -92,7 +90,7 @@ export default class AppLoadingScreen extends React.PureComponent {
           <path
             id="contentStudioLogoBlue1"
             d="M32-.3C14.6-.3-.2 7.3-.2 16v14c0-15.8 24-19 32-19 7.9 0 32 5 32 19V16c0-8.7-14.8-16.3-32-16.3z"
-            fill="#999"
+            fill="#66758d"
             transform="rotate(45 21.2 27.7)"
             style={{
               animation:
@@ -102,7 +100,7 @@ export default class AppLoadingScreen extends React.PureComponent {
           <path
             id="contentStudioLogoBlue2"
             d="M32 0C14.8 0 0 7.3 0 16v14c0-15.8 23.3-18.9 31.2-18.9C39.1 11.1 64 14.3 64 30c-.2-4.3 0-10.2 0-14C64 7.2 49.2 0 32 0z"
-            fill="#eee"
+            fill="#3c4758"
             transform="rotate(-135 33.9 27.5)"
             style={{
               animation:
@@ -112,7 +110,7 @@ export default class AppLoadingScreen extends React.PureComponent {
           <path
             id="contentStudioLogoRed1"
             d="M32 0C14.8 0 0 7.3 0 16v14c0-15.8 23.3-18.9 31.2-18.9C39.1 11.1 64 14.3 64 30c-.2-4.3 0-10.2 0-14C64 7.2 49.2 0 32 0z"
-            fill="#444"
+            fill="#fff"
             transform="rotate(-45 42.9 27.5)"
             style={{
               animation:

diff --git a/packages/@sanity/base/src/components/Document.js b/packages/@sanity/base/src/components/Document.js
@@ -47,6 +47,7 @@ function Document(props) {
         <meta charSet={props.charset} />
         <title>{props.title}</title>
         <meta name="viewport" content={props.viewport} />
+        <style>{`html {background-color: #e4e8ed;}`}</style>
         {stylesheets}
         {subresources}
         {favicons}

diff --git a/packages/@sanity/base/src/styles/forms/text-input.css b/packages/@sanity/base/src/styles/forms/text-input.css
@@ -12,15 +12,10 @@
   box-sizing: border-box;
   padding: var(--input-padding-horizontal) var(--input-padding-vertical);
   border-radius: var(--input-border-radius);
-  transition: box-shadow 50ms linear;
   color: var(--input-color);
   background-color: var(--input-bg);
   box-shadow: var(--input-box-shadow);
 
-  @nest &:disabled {
-    opacity: 0.5;
-  }
-
   @nest &::placeholder {
     color: var(--input-color-placeholder);
   }
@@ -29,36 +24,35 @@
 .textInput {
   composes: root;
 
-  @nest &:read-only {
-    opacity: 0.5;
+  @nest &:disabled, &:read-only {
+    background-color: var(--input-bg-disabled);
+    color: var(--input-color-disabled);
   }
 
-  @nest &:not(:disabled) {
-    @nest &:not(:read-only) {
-      @nest &:hover {
-        box-shadow: var(--input-box-shadow--hover);
-        border-color: var(--input-border-color-hover);
-      }
+  @nest &:not(:disabled):not(:read-only) {
+    @nest &:hover {
+      box-shadow: var(--input-box-shadow--hover);
+      border-color: var(--input-border-color-hover);
+    }
 
-      @nest &:focus, &:focus-within {
-        box-shadow: var(--input-box-shadow--focus);
-        background-color: var(--input-bg-focus);
-        border-color: var(--input-border-color-focus);
+    @nest &:focus, &:focus-within {
+      box-shadow: var(--input-box-shadow--focus);
+      background-color: var(--input-bg-focus);
+      border-color: var(--input-border-color-focus);
 
-        @nest &:invalid {
-          box-shadow: var(--input-box-shadow--invalid-focus);
-        }
+      @nest &:invalid {
+        box-shadow: var(--input-box-shadow--invalid-focus);
       }
+    }
 
-      @nest &:active {
-        border-color: var(--input-border-color-active);
-      }
+    @nest &:active {
+      border-color: var(--input-border-color-active);
+    }
 
-      @nest &:invalid {
-        border-color: var(--input-border-color-invalid);
-        background-color: var(--input-bg-invalid);
-        box-shadow: var(--input-box-shadow--invalid);
-      }
+    @nest &:invalid {
+      border-color: var(--input-border-color-invalid);
+      background-color: var(--input-bg-invalid);
+      box-shadow: var(--input-box-shadow--invalid);
     }
   }
 }
diff --git a/packages/@sanity/base/src/styles/layout/backgrounds.css b/packages/@sanity/base/src/styles/layout/backgrounds.css
@@ -7,42 +7,13 @@
 .listItemStates {
   position: relative;
 
-  @nest &:active::after {
-    z-index: 1;
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--selectable-item-color-active);
-    opacity: 0.5;
-    pointer-events: none;
-  }
-
   @media (hover: hover) {
-    @nest &:hover::after {
-      z-index: 1;
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
+    @nest &:hover {
       background-color: var(--selectable-item-color-hover);
-      pointer-events: none;
     }
 
-    @nest &:hover:active::after {
-      z-index: 1;
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
+    @nest &:active {
       background-color: var(--selectable-item-color-active);
-      pointer-events: none;
     }
   }
 }
diff --git a/packages/@sanity/base/src/styles/typography/code.css b/packages/@sanity/base/src/styles/typography/code.css
@@ -3,8 +3,9 @@
 
 .root {
   background-color: var(--code-bg);
+  color: var(--code-color);
   line-height: 17px;
   font-size: 13px;
-  font-family: monospace;
+  font-family: var(--font-family-monospace);
   white-space: pre-wrap;
 }
diff --git a/packages/@sanity/base/src/styles/variables/brand-colors.css b/packages/@sanity/base/src/styles/variables/brand-colors.css
@@ -1,9 +1,15 @@
 :root {
-  --brand-darkest: #000;
-  --brand-lightest: #fff;
-  --gray-base: #323232;
-  --brand-primary: #24a3e3;
-  --brand-primary--inverted: #fff;
-  --brand-secondary: #f43;
-  --brand-secondary--inverted: #fff;
+  --black: #000;
+  --white: #fff;
+  --brand-darkest: var(--black);
+  --brand-darkest--inverted: color(var(--brand-darkest) contrast(80%));
+  --brand-lightest: var(--white);
+  --brand-primary: #2276fc;
+  --brand-primary--inverted: var(--brand-lightest);
+  --brand-secondary: #f03e2f;
+  --brand-secondary--inverted: var(--brand-lightest);
+
+  /* Base */
+  --brand-faded: color(var(--brand-primary) blend(var(--white) 60%));
+  --gray-base: color(var(--black) blend(var(--brand-faded) 50%));
 }
diff --git a/packages/@sanity/base/src/styles/variables/code.css b/packages/@sanity/base/src/styles/variables/code.css
@@ -1,12 +1,17 @@
 @import 'part:@sanity/base/theme/variables/gray-colors-style';
 
 :root {
-  --code-color: #c7254e;
-  --code-bg: #f9f2f4;
-  --kbd-color: #fff;
-  --kbd-bg: #333;
-  --pre-bg: #f5f5f5;
+  /* Code */
+  --code-bg: var(--gray-lightest);
+  --code-color: var(--gray-dark);
+
+  /* KBD */
+  --kbd-bg: var(--gray-lighter);
+  --kbd-color: var(--gray-darker);
+
+  /* Pre */
+  --pre-bg: var(--gray-lightest);
   --pre-color: var(--gray-dark);
-  --pre-border-color: #ccc;
+  --pre-border-color: var(--gray-lighter);
   --pre-scrollable-max-height: 20em;
 }
diff --git a/packages/@sanity/base/src/styles/variables/forms.css b/packages/@sanity/base/src/styles/variables/forms.css
@@ -2,42 +2,58 @@
 @import 'part:@sanity/base/theme/variables/globals-style';
 
 :root {
+  /* Default button */
   --default-button-color: var(--text-color);
   --default-button-color--inverted: var(--white);
   --default-button-color--hover: var(--text-color);
   --default-button-color--active: var(--text-color);
+
+  /* Button */
   --button-border-radius: var(--border-radius-medium);
+
+  /* Input */
   --input-bg: var(--component-bg);
   --input-bg-focus: var(--input-bg);
   --input-bg-invalid: var(--component-bg);
-  --input-bg-disabled: var(--gray-lighter);
+  --input-bg-disabled: var(--gray-lightest);
   --input-color: var(--text-color);
-  --input-border-color: var(--component-border-color);
+  --input-color-disabled: var(--gray);
+  --input-border-color: var(--gray-lighter);
   --input-border-size: 1px;
   --input-line-height: 2em;
   --input-padding-vertical: 0.5em;
   --input-padding-horizontal: 0.2em;
   --input-border-radius: var(--border-radius-small);
   --input-border-radius-large: var(--border-radius-large);
   --input-border-radius-small: var(--border-radius-small);
-  --input-border-color-hover: var(--gray);
+  --input-border-color-hover: var(--gray-light);
   --input-border-color-focus: var(--brand-primary);
   --input-border-color-active: var(--brand-primary);
   --input-border-color-invalid: var(--state-danger-color);
-  --focus-color: color(var(--brand-primary) alpha(40%));
-  --input-color-placeholder: var(--text-color-secondary);
-  --label-color: var(--text-color);
-  --legend-color: var(--text-color);
-  --cursor-disabled: not-allowed;
-  --clear-cross-color: var(--input-color);
-  --clear-cross-color-hover: var(--state-danger-color);
+  --input-color-placeholder: var(--text-muted);
   --input-box-shadow-base: var(--gray-base);
   --input-box-shadow: none;
   --input-box-shadow--hover: none;
   --input-box-shadow--focus: 0 0 0 3px color(var(--input-border-color-focus) a(42%));
   --input-box-shadow--invalid: none;
   --input-box-shadow--invalid-focus: 0 0 0 3px color(var(--input-border-color-invalid) a(42%));
 
+  /* Focus */
+  --focus-color: color(var(--brand-primary) alpha(40%));
+
+  /* Label */
+  --label-color: var(--text-color);
+
+  /* Legend */
+  --legend-color: var(--text-color);
+
+  /* Cursor */
+  --cursor-disabled: not-allowed;
+
+  /* Clear cross */
+  --clear-cross-color: var(--input-color);
+  --clear-cross-color-hover: var(--state-danger-color);
+
   /* fieldset */
   --fieldset-border: var(--input-border-size) solid var(--hairline-color);
   --fieldset-box-shadow: none;
@@ -46,6 +62,8 @@
   --fieldset-box-shadow--focus: var(--input-box-shadow--focus);
   --fieldset-box-shadow--invalid-focus: var(--input-box-shadow--invalid-focus);
   --fieldset-bg: transparent;
+
+  /* Form builder */
   --form-builder-block-border-color: var(--component-border-color);
   --form-builder-block-border-color-focus: var(--input-border-color-focus);
   --form-builder-block-border-color-error: var(--input-border-color-invalid);