Remove unused theme variables, redce the number of different grays, light theme WCAG updates

client/components/Nav.jsx

@@ -281,7 +281,7 @@ class Nav extends React.PureComponent {
                 onBlur={this.handleBlur}
               >
                 Save
-                <span className="nav__keyboard-shortcut">{metaKeyName}+s</span>
+                <span className="nav__keyboard-shortcut">{metaKeyName}+S</span>
               </button>
             </li> }
             { this.props.project.id && this.props.user.authenticated &&

client/images/triangle-arrow-down.svg

@@ -3,7 +3,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
+        <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#000000">
             <g id="libraries" transform="translate(21.000000, 32.000000)">
                 <polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(180.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
             </g>

client/images/triangle-arrow-right.svg

@@ -3,7 +3,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
+        <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#000000">
             <g id="libraries" transform="translate(21.000000, 32.000000)">
                 <polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(90.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
             </g>

client/styles/abstracts/_placeholders.scss

@@ -110,7 +110,7 @@
 	@extend %toolbar-button;
 	@include themify() {
 		color: getThemifyVariable('primary-text-color');
-		background-color: getThemifyVariable('modal-button-background-color');
+		background-color: getThemifyVariable('preferences-button-background-color');
 		padding: 0;
 		margin-bottom: #{28 / $base-font-size}rem;
 		line-height: #{50 / $base-font-size}rem;
@@ -126,7 +126,7 @@
 		}
 		&:disabled:hover {
 			cursor: not-allowed;
-			background-color: getThemifyVariable('modal-button-background-color');
+			background-color: getThemifyVariable('preferences-button-background-color');
 		}
 	}
 }
@@ -176,7 +176,7 @@
 		cursor: pointer;
 		&:hover {
 			text-decoration: none;
-			color: getThemifyVariable('logo-color');
+			color: getThemifyVariable('heavy-text-color');
 		}
 	}
 }

client/styles/abstracts/_variables.scss

@@ -13,6 +13,9 @@ $dodgerblue: #1E90FF;
 // $icon-hover-color: #333;
 $p5-contrast-pink: #FFA9D9;
 
+$border-color: #B5B5B5;
+$outline-color: #0F9DD7;
+
 // Grayscale values
 $lightest: #FFF; // primary
 $lighter: #FBFBFB;
@@ -21,7 +24,8 @@ $light: #F0F0F0; // primary
 $medium-light: #D9D9D9;
 $middle-light: #A6A6A6;
 
-$middle-gray: #7D7D7D; // primary
+// $middle-gray: #7D7D7D; // primary
+$middle-gray: #747474; // primary
 $middle-dark: #666;
 $medium-dark: #4D4D4D;
 
@@ -40,26 +44,24 @@ $themes: (
     modal-button-color: $dark,
     heading-text-color: $dark,
     background-color: $lighter,
-    preview-placeholder-color: #dcdcdc,
     button-background-color: $light,
     button-color: $black,
     button-border-color: $middle-light,
     toolbar-button-color: $p5js-pink,
-    toolbar-button-background-color: $light,
+    toolbar-button-background-color: $medium-light,
     button-background-hover-color: $p5js-pink,
     button-background-active-color: #f10046,
-    button-nav-inactive-color: #a0a0a0,
+    button-nav-inactive-color: $middle-gray,
     button-hover-color: $white,
     button-active-color: $white,
-    modal-background-color: #f4f4f4,
+    modal-background-color: $light,
-    modal-button-background-color: #e6e6e6,
+    preferences-button-background-color: $medium-light,
-    modal-border-color: rgba(17, 17, 17, 0.3),
+    modal-border-color: $middle-light,
-    modal-border-selected-color: #B9D0E1,
+    icon-color: $middle-gray,
-    icon-color: $medium-dark,
+    icon-hover-color: $darker,
-    icon-hover-color: $p5js-pink,
     icon-toast-hover-color: $white,
     shadow-color: rgba(0, 0, 0, 0.16),
-    console-background-color: #eee,
+    console-background-color: $light,
     console-color: $white,
     console-header-background-color: $medium-light,
     console-header-color: $darker,
@@ -71,24 +73,22 @@ $themes: (
     editor-gutter-color: $lighter,
     file-hover-color: $light,
     file-selected-color: $medium-light,
-    input-text-color: #333,
+    input-text-color: $dark,
-    input-border-color: #b5b5b5,
+    input-border-color: $middle-light,
-    about-list-text-color: #4a4a4a,
+    search-background-color: $lightest,
-    search-background-color: #ffffff,
+    search-clear-background-color: $light,
-    search-clear-background-color: #e9e9e9,
+    search-hover-text-color: $lightest,
-    search-hover-text-color: #ffffff,
+    search-hover-background-color: $medium-dark,
-    search-hover-background-color: #4d4d4d,
     dropdown-color: #414141,
-    keyboard-shortcut-color: #757575,
+    keyboard-shortcut-color: $middle-gray,
     nav-hover-color: $p5js-pink,
     nav-border-color: $middle-light,
     error-color: $p5js-pink,
     table-row-stripe-color: #d6d6d6,
     codefold-icon-open: url(../images/triangle-arrow-down.svg),
     codefold-icon-closed: url(../images/triangle-arrow-right.svg),
-    sidebar-background-color: $light,
 
-    primary-button-color: #fff,
+    primary-button-color: $lightest,
     primary-button-background-color: $p5js-pink,
 
     table-button-color: $white,
@@ -124,7 +124,6 @@ $themes: (
     secondary-text-color: #DADADA,
     inactive-text-color: #b5b5b5,
     background-color: #333,
-    preview-placeholder-color: #dcdcdc,
     button-background-color: $white,
     button-color: $black,
     button-border-color: #979797,
@@ -136,7 +135,7 @@ $themes: (
     button-hover-color: $white,
     button-active-color: $white,
     modal-background-color: #444,
-    modal-button-background-color: #5f5f5f,
+    preferences-button-background-color: #5f5f5f,
     modal-border-color: #949494,
     icon-color: #a9a9a9,
     icon-hover-color: $white,
@@ -156,7 +155,6 @@ $themes: (
     file-selected-color: #404040,
     input-text-color: #333,
     input-border-color: #b5b5b5,
-    about-list-text-color: #f4f4f4,
     search-background-color: #ffffff,
     search-clear-background-color: #4f4f4f,
     search-hover-text-color: #ffffff,
@@ -215,7 +213,7 @@ $themes: (
     button-hover-color: #333333,
     button-active-color: #333333,
     modal-background-color: #444,
-    modal-button-background-color: #C1C1C1,
+    preferences-button-background-color: #C1C1C1,
     modal-border-color: #949494,
     icon-color: #d9d9d9,
     icon-hover-color: $yellow,
@@ -235,7 +233,6 @@ $themes: (
     file-selected-color: #404040,
     input-text-color: #333,
     input-border-color: #b5b5b5,
-    about-list-text-color: #f4f4f4,
     search-background-color: $white,
     search-clear-background-color: #444,
     search-hover-text-color: $black,

client/styles/base/_base.scss

@@ -87,3 +87,11 @@ thead {
 th {
 	text-align: left;
 }
+
+a:focus,
+button:focus,
+input:focus,
+textarea:focus {
+	outline: none;
+	box-shadow: 0 0 0 1px $outline-color;
+}

client/styles/components/_about.scss

@@ -45,11 +45,6 @@
   padding-bottom: #{20 / $base-font-size}rem;
   padding-left: #{20 / $base-font-size}rem;
   width: #{720 / $base-font-size}rem;
-  & a {
-    @include themify() {
-      color: getThemifyVariable('form-navigation-options-color');
-    }
-  }
 }
 
 .about__content-column {
@@ -76,9 +71,6 @@
   @include themify() {
     padding-top: #{10 / $base-font-size}rem;
     font-size: #{16 / $base-font-size}rem;
-    & a {
-      color: getThemifyVariable(about-list-text-color);
-    }
   }
 }
 

client/styles/components/_preview-frame.scss

@@ -23,15 +23,6 @@
   display: none;
 }
 
-.preview-frame-placeholder {
-  width: #{400 / $base-font-size}rem;
-  height: #{400 / $base-font-size}rem;
-  position: absolute;
-  @include themify() {
-    background: getThemifyVariable('preview-placeholder-color');
-  }
-}
-
 .preview-frame__header {
   height: #{29 / $base-font-size}rem;
 }

client/utils/metaKey.js

@@ -8,7 +8,7 @@ const metaKey = (() => {
   return 'Ctrl';
 })();
 
-const metaKeyName = metaKey === 'Cmd' ? '\u2318' : 'Ctrl';
+const metaKeyName = metaKey === 'Cmd' ? '⌘' : '⌃';
 
 export {
   metaKey,