topcoat-rails 0.1.6 → 0.8.0

data/app/assets/stylesheets/topcoat/mobile-dark.scss

@@ -173,8 +173,8 @@
   text-shadow: 0 -1px rgba(0,0,0,0.69);
   vertical-align: top;
   background-color: #595b5b;
-  box-shadow: inset 0 1px #727373;
-  border: 1px solid #303233;
+  box-shadow: inset 0 1px #737373;
+  border: 1px solid #333434;
   border-radius: 6px;
 }
 
@@ -184,31 +184,34 @@
 .topcoat-button--large--quiet:hover,
 .topcoat-button-bar__button:hover,
 .topcoat-button-bar__button--large:hover {
-  background-color: #646666;
-}
-
-.topcoat-button:active,
-.topcoat-button--large:active,
-.topcoat-button-bar__button:active,
-.topcoat-button-bar__button--large:active,
-:checked + .topcoat-button-bar__button {
-  background-color: #404141;
-  box-shadow: inset 0 1px rgba(0,0,0,0.18);
+  background-color: #626465;
 }
 
 .topcoat-button:focus,
 .topcoat-button--quiet:focus,
+.topcoat-button--quiet:hover:focus,
 .topcoat-button--large:focus,
 .topcoat-button--large--quiet:focus,
+.topcoat-button--large--quiet:hover:focus,
 .topcoat-button--cta:focus,
 .topcoat-button--large--cta:focus,
 .topcoat-button-bar__button:focus,
 .topcoat-button-bar__button--large:focus {
-  border: 1px solid #0940fd;
-  box-shadow: 0 0 0 2px #6fb5f1;
+  border: 1px solid #0036ff;
+  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
   outline: 0;
 }
 
+.topcoat-button:active,
+.topcoat-button--large:active,
+.topcoat-button-bar__button:active,
+.topcoat-button-bar__button--large:active,
+:checked + .topcoat-button-bar__button {
+  border: 1px solid #333434;
+  background-color: #3f4041;
+  box-shadow: inset 0 1px rgba(0,0,0,0.05);
+}
+
 .topcoat-button--quiet {
   background: transparent;
   border: 1px solid transparent;
@@ -218,17 +221,19 @@
 .topcoat-button--quiet:hover,
 .topcoat-button--large--quiet:hover {
   text-shadow: 0 -1px rgba(0,0,0,0.69);
-  border: 1px solid #303233;
-  box-shadow: inset 0 1px #727373;
+  border: 1px solid #333434;
+  box-shadow: inset 0 1px #737373;
 }
 
 .topcoat-button--quiet:active,
-.topcoat-button--large--quiet:active {
+.topcoat-button--quiet:focus:active,
+.topcoat-button--large--quiet:active,
+.topcoat-button--large--quiet:focus:active {
   color: #c6c8c8;
   text-shadow: 0 -1px rgba(0,0,0,0.69);
-  background-color: #404141;
-  border: 1px solid #303233;
-  box-shadow: inset 0 1px rgba(0,0,0,0.18);
+  background-color: #3f4041;
+  border: 1px solid #333434;
+  box-shadow: inset 0 1px rgba(0,0,0,0.05);
 }
 
 .topcoat-button--large,
@@ -248,7 +253,7 @@
 
 .topcoat-button--cta,
 .topcoat-button--large--cta {
-  border: 1px solid #143250;
+  border: 1px solid #134f7f;
   background-color: #288edf;
   box-shadow: inset 0 1px rgba(255,255,255,0.36);
   color: #fff;
@@ -258,12 +263,12 @@
 
 .topcoat-button--cta:hover,
 .topcoat-button--large--cta:hover {
-  background-color: #509bef;
+  background-color: #4ca1e4;
 }
 
 .topcoat-button--cta:active,
 .topcoat-button--large--cta:active {
-  background-color: #1976c3;
+  background-color: #1e7dc8;
   box-shadow: inset 0 1px rgba(0,0,0,0.12);
 }
 
@@ -592,8 +597,8 @@
   text-shadow: 0 -1px rgba(0,0,0,0.69);
   vertical-align: top;
   background-color: #595b5b;
-  box-shadow: inset 0 1px #727373;
-  border: 1px solid #303233;
+  box-shadow: inset 0 1px #737373;
+  border: 1px solid #333434;
   border-radius: 6px;
 }
 
@@ -601,26 +606,29 @@
 .topcoat-button--quiet:hover,
 .topcoat-button--large:hover,
 .topcoat-button--large--quiet:hover {
-  background-color: #646666;
-}
-
-.topcoat-button:active,
-.topcoat-button--large:active {
-  background-color: #404141;
-  box-shadow: inset 0 1px rgba(0,0,0,0.18);
+  background-color: #626465;
 }
 
 .topcoat-button:focus,
 .topcoat-button--quiet:focus,
+.topcoat-button--quiet:hover:focus,
 .topcoat-button--large:focus,
 .topcoat-button--large--quiet:focus,
+.topcoat-button--large--quiet:hover:focus,
 .topcoat-button--cta:focus,
 .topcoat-button--large--cta:focus {
-  border: 1px solid #0940fd;
-  box-shadow: 0 0 0 2px #6fb5f1;
+  border: 1px solid #0036ff;
+  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
   outline: 0;
 }
 
+.topcoat-button:active,
+.topcoat-button--large:active {
+  border: 1px solid #333434;
+  background-color: #3f4041;
+  box-shadow: inset 0 1px rgba(0,0,0,0.05);
+}
+
 /* topdoc
   name: Quiet Button
   description: A simple, yet quiet button
@@ -649,17 +657,19 @@
 .topcoat-button--quiet:hover,
 .topcoat-button--large--quiet:hover {
   text-shadow: 0 -1px rgba(0,0,0,0.69);
-  border: 1px solid #303233;
-  box-shadow: inset 0 1px #727373;
+  border: 1px solid #333434;
+  box-shadow: inset 0 1px #737373;
 }
 
 .topcoat-button--quiet:active,
-.topcoat-button--large--quiet:active {
+.topcoat-button--quiet:focus:active,
+.topcoat-button--large--quiet:active,
+.topcoat-button--large--quiet:focus:active {
   color: #c6c8c8;
   text-shadow: 0 -1px rgba(0,0,0,0.69);
-  background-color: #404141;
-  border: 1px solid #303233;
-  box-shadow: inset 0 1px rgba(0,0,0,0.18);
+  background-color: #3f4041;
+  border: 1px solid #333434;
+  box-shadow: inset 0 1px rgba(0,0,0,0.05);
 }
 
 /* topdoc
@@ -736,7 +746,7 @@
 
 .topcoat-button--cta,
 .topcoat-button--large--cta {
-  border: 1px solid #143250;
+  border: 1px solid #134f7f;
   background-color: #288edf;
   box-shadow: inset 0 1px rgba(255,255,255,0.36);
   color: #fff;
@@ -746,12 +756,12 @@
 
 .topcoat-button--cta:hover,
 .topcoat-button--large--cta:hover {
-  background-color: #509bef;
+  background-color: #4ca1e4;
 }
 
 .topcoat-button--cta:active,
 .topcoat-button--large--cta:active {
-  background-color: #1976c3;
+  background-color: #1e7dc8;
   box-shadow: inset 0 1px rgba(0,0,0,0.12);
 }
 
@@ -1021,9 +1031,9 @@ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {
   width: 2rem;
   height: 2rem;
   background: #595b5b;
-  border: 1px solid #303233;
+  border: 1px solid #333434;
   border-radius: 3px;
-  box-shadow: inset 0 1px #727373;
+  box-shadow: inset 0 1px #737373;
 }
 
 .topcoat-checkbox__checkmark {
@@ -1038,7 +1048,7 @@ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {
   width: 28px;
   height: 11px;
   background: transparent;
-  border: 7px solid #fff;
+  border: 7px solid #c6c8c8;
   border-width: 7px;
   border-top: none;
   border-right: none;
@@ -1049,8 +1059,20 @@ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {
 }
 
 input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
-  border: 1px solid #0940fd;
-  box-shadow: 0 0 0 2px #6fb5f1;
+  border: 1px solid #0036ff;
+  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
+}
+
+input[type="checkbox"]:active + .topcoat-checkbox__checkmark:before {
+  border: 1px solid #333434;
+  background-color: #3f4041;
+  box-shadow: inset 0 1px rgba(0,0,0,0.05);
+}
+
+input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {
+  border: 1px solid #333434;
+  background: #595b5b;
+  box-shadow: inset 0 1px #737373;
 }
 
 /**
@@ -1167,8 +1189,8 @@ input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
   text-shadow: 0 -1px rgba(0,0,0,0.69);
   vertical-align: baseline;
   background-color: #595b5b;
-  box-shadow: inset 0 1px #727373;
-  border: 1px solid #303233;
+  box-shadow: inset 0 1px #737373;
+  border: 1px solid #333434;
   border-radius: 6px;
 }
 
@@ -1176,12 +1198,7 @@ input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
 .topcoat-icon-button--quiet:hover,
 .topcoat-icon-button--large:hover,
 .topcoat-icon-button--large--quiet:hover {
-  background-color: #646666;
-}
-
-.topcoat-icon-button:active {
-  background-color: #404141;
-  box-shadow: inset 0 1px rgba(0,0,0,0.18);
+  background-color: #626465;
 }
 
 .topcoat-icon-button:focus,
@@ -1190,11 +1207,18 @@ input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
 .topcoat-icon-button--large:focus,
 .topcoat-icon-button--large--quiet:focus,
 .topcoat-icon-button--large--quiet:hover:focus {
-  border: 1px solid #0940fd;
-  box-shadow: 0 0 0 2px #6fb5f1;
+  border: 1px solid #0036ff;
+  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
   outline: 0;
 }
 
+.topcoat-icon-button:active,
+.topcoat-icon-button--large:active {
+  border: 1px solid #333434;
+  background-color: #3f4041;
+  box-shadow: inset 0 1px rgba(0,0,0,0.05);
+}
+
 /* topdoc
   name: Quiet Icon Button
   description: Like quiet button, but it has an icon.
@@ -1228,17 +1252,19 @@ input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
 .topcoat-icon-button--quiet:hover,
 .topcoat-icon-button--large--quiet:hover {
   text-shadow: 0 -1px rgba(0,0,0,0.69);
-  border: 1px solid #303233;
-  box-shadow: inset 0 1px #727373;
+  border: 1px solid #333434;
+  box-shadow: inset 0 1px #737373;
 }
 
 .topcoat-icon-button--quiet:active,
-.topcoat-icon-button--large--quiet:active {
+.topcoat-icon-button--quiet:focus:active,
+.topcoat-icon-button--large--quiet:active,
+.topcoat-icon-button--large--quiet:focus:active {
   color: #c6c8c8;
   text-shadow: 0 -1px rgba(0,0,0,0.69);
-  background-color: #404141;
-  border: 1px solid #303233;
-  box-shadow: inset 0 1px rgba(0,0,0,0.18);
+  background-color: #3f4041;
+  border: 1px solid #333434;
+  box-shadow: inset 0 1px rgba(0,0,0,0.05);
 }
 
 /* topdoc
@@ -1272,11 +1298,6 @@ input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
   line-height: 4.375rem;
 }
 
-.topcoat-icon-button--large:active {
-  background-color: #404141;
-  box-shadow: inset 0 1px rgba(0,0,0,0.18);
-}
-
 /* topdoc
   name: Large Quiet Icon Button
   description: Like large button, but it has an icon and this one is quiet.
@@ -1543,31 +1564,31 @@ input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
 */
 
 .topcoat-list {
-  border-top: 1px solid #2f3234;
-  border-bottom: 1px solid #5e6061;
-  background-color: #444849;
+  border-top: 1px solid #333434;
+  border-bottom: 1px solid #616363;
+  background-color: #454646;
 }
 
 .topcoat-list__header {
   padding: 4px 20px;
   font-size: 0.9em;
   font-weight: 400;
-  background-color: #3b3e40;
-  color: #868888;
-  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
-  border-top: solid 1px rgba(255,255,255,0.1);
-  border-bottom: solid 1px rgba(255,255,255,0.05);
+  background-color: #3f4041;
+  color: #c6c8c8;
+  text-shadow: 0 1px 0 rgba(255,255,255,0.1);
+  border-top: 1px solid rgba(255,255,255,0.1);
+  border-bottom: 1px solid rgba(255,255,255,0.05);
 }
 
 .topcoat-list__container {
-  border-top: 1px solid #2f3234;
+  border-top: 1px solid #333434;
   color: #c6c8c8;
 }
 
 .topcoat-list__item {
   padding: 1.25rem;
-  border-top: 1px solid #5e6061;
-  border-bottom: 1px solid #2f3234;
+  border-top: 1px solid #616363;
+  border-bottom: 1px solid #333434;
 }
 
 .topcoat-list__item:first-child {
@@ -1610,24 +1631,6 @@ input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
 *
 */
 
-/**
-*
-* Copyright 2012 Adobe Systems Inc.;
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*
-*/
-
 .navigation-bar {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
@@ -1784,7 +1787,7 @@ input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
   padding-right: 1rem;
   background: #595b5b;
   color: #fff;
-  box-shadow: inset 0 -1px #333434, 0 1px rgba(0,0,0,0.15);
+  box-shadow: inset 0 -1px #333434, 0 1px #454646;
 }
 
 .topcoat-navigation-bar__item {
@@ -2203,8 +2206,8 @@ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {
   width: 1.875rem;
   height: 1.875rem;
   background: #595b5b;
-  border: 1px solid #303233;
-  box-shadow: inset 0 1px #727373;
+  border: 1px solid #333434;
+  box-shadow: inset 0 1px #737373;
 }
 
 .topcoat-radio-button__checkmark {
@@ -2217,9 +2220,9 @@ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {
   opacity: 0;
   width: 0.875rem;
   height: 0.875rem;
-  background: #fff;
-  border: 1px solid rgba(255,255,255,0.1);
-  box-shadow: 0 1px rgba(255,255,255,0.5);
+  background: #c6c8c8;
+  border: 1px solid rgba(0,0,0,0.05);
+  box-shadow: 0 1px rgba(255,255,255,0.1);
   -webkit-transform: none;
   -ms-transform: none;
   transform: none;
@@ -2228,8 +2231,20 @@ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {
 }
 
 input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {
-  border: 1px solid #0940fd;
-  box-shadow: 0 0 0 2px #6fb5f1;
+  border: 1px solid #0036ff;
+  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
+}
+
+input[type="radio"]:active + .topcoat-radio-button__checkmark:before {
+  border: 1px solid #333434;
+  background-color: #3f4041;
+  box-shadow: inset 0 1px rgba(0,0,0,0.05);
+}
+
+input[type="radio"]:disabled:active + .topcoat-radio-button__checkmark:before {
+  border: 1px solid #333434;
+  background: #595b5b;
+  box-shadow: inset 0 1px #737373;
 }
 
 /*
@@ -2377,16 +2392,16 @@ limitations under the License.
 
 .topcoat-range {
   border-radius: 6px;
-  border: 1px solid #303233;
-  background-color: #424546;
+  border: 1px solid #333434;
+  background-color: #454646;
   height: 1rem;
   border-radius: 30px;
 }
 
 .topcoat-range::-moz-range-track {
   border-radius: 6px;
-  border: 1px solid #303233;
-  background-color: #424546;
+  border: 1px solid #333434;
+  background-color: #454646;
   height: 1rem;
   border-radius: 30px;
 }
@@ -2395,28 +2410,38 @@ limitations under the License.
   height: 3rem;
   width: 2rem;
   background-color: #595b5b;
-  border: 1px solid #303233;
+  border: 1px solid #333434;
   border-radius: 6px;
-  box-shadow: inset 0 1px #727373;
+  box-shadow: inset 0 1px #737373;
 }
 
 .topcoat-range::-moz-range-thumb {
   height: 3rem;
   width: 2rem;
   background-color: #595b5b;
-  border: 1px solid #303233;
+  border: 1px solid #333434;
   border-radius: 6px;
-  box-shadow: inset 0 1px #727373;
+  box-shadow: inset 0 1px #737373;
 }
 
 .topcoat-range:focus::-webkit-slider-thumb {
-  border: 1px solid #0940fd;
-  box-shadow: 0 0 0 2px #6fb5f1;
+  border: 1px solid #0036ff;
+  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
 }
 
 .topcoat-range:focus::-moz-range-thumb {
-  border: 1px solid #0940fd;
-  box-shadow: 0 0 0 2px #6fb5f1;
+  border: 1px solid #0036ff;
+  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
+}
+
+.topcoat-range:active::-webkit-slider-thumb {
+  border: 1px solid #333434;
+  box-shadow: inset 0 1px #737373;
+}
+
+.topcoat-range:active::-moz-range-thumb {
+  border: 1px solid #333434;
+  box-shadow: inset 0 1px #737373;
 }
 
 /**
@@ -2566,26 +2591,26 @@ input[type="search"]::-webkit-search-cancel-button {
 .topcoat-search-input,
 .topcoat-search-input--large {
   line-height: 3rem;
+  height: 3rem;
   font-size: 16px;
-  border: 1px solid #303233;
-  background-color: #404141;
-  box-shadow: inset 0 1px rgba(0,0,0,0.18);
+  border: 1px solid #333434;
+  background-color: #454646;
+  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);
   color: #c6c8c8;
   padding: 0 0 0 2rem;
   border-radius: 30px;
   background-image: image-url("topcoat/search.svg");
-  background-position: 1em center;
+  background-position: 1rem center;
   background-repeat: no-repeat;
   background-size: 16px;
 }
 
 .topcoat-search-input:focus,
 .topcoat-search-input--large:focus {
-  background-image: image-url("topcoat/search_dark.svg");
-  background-color: #646666;
+  background-color: #595b5b;
   color: #fff;
-  border: 1px solid #0940fd;
-  box-shadow: 0 0 0 2px #6fb5f1;
+  border: 1px solid #0036ff;
+  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), 0 0 0 2px #6fb5f1;
 }
 
 .topcoat-search-input::-webkit-search-cancel-button,
@@ -2633,11 +2658,12 @@ input[type="search"]::-webkit-search-cancel-button {
 
 .topcoat-search-input--large {
   line-height: 4.375rem;
+  height: 4.375rem;
   font-size: 1.3rem;
-  font-weight: 200;
+  font-weight: 400;
   padding: 0 0 0 2.9rem;
   border-radius: 40px;
-  background-position: 1.2em center;
+  background-position: 1.2rem center;
   background-size: 1.3rem;
 }
 
@@ -2883,7 +2909,7 @@ input[type="search"]::-webkit-search-cancel-button {
   font-size: 16px;
   padding: 0 1.25rem;
   border-radius: 6px;
-  border: 1px solid #303233;
+  border: 1px solid #333434;
   overflow: hidden;
   width: 6rem;
 }
@@ -2896,8 +2922,8 @@ input[type="search"]::-webkit-search-cancel-button {
 
 .topcoat-switch__toggle:before {
   content: 'ON';
-  color: #5dc1ff;
-  background-color: #404141;
+  color: #288edf;
+  background-color: #3f4041;
   right: 1rem;
   padding-left: 1.5rem;
 }
@@ -2910,18 +2936,18 @@ input[type="search"]::-webkit-search-cancel-button {
   color: #c6c8c8;
   text-shadow: 0 -1px rgba(0,0,0,0.69);
   background-color: #595b5b;
-  border: 1px solid #303233;
+  border: 1px solid #333434;
   margin-left: -1.3rem;
   margin-bottom: -1px;
   margin-top: -1px;
-  box-shadow: inset 0 1px #727373;
+  box-shadow: inset 0 1px #737373;
   -webkit-transition: margin-left 0.05s ease-in-out;
   transition: margin-left 0.05s ease-in-out;
 }
 
 .topcoat-switch__toggle:after {
   content: 'OFF';
-  background-color: #404141;
+  background-color: #3f4041;
   left: 1rem;
   padding-left: 2rem;
 }
@@ -2930,8 +2956,13 @@ input[type="search"]::-webkit-search-cancel-button {
   margin-left: 2.7rem;
 }
 
+.topcoat-switch__input:active + .topcoat-switch__toggle {
+  border: 1px solid #333434;
+  box-shadow: inset 0 1px #737373;
+}
+
 .topcoat-switch__input:focus + .topcoat-switch__toggle {
-  border: 1px solid #0940fd;
+  border: 1px solid #0036ff;
   box-shadow: 0 0 0 2px #6fb5f1;
 }
 
@@ -3093,21 +3124,23 @@ input[type="search"]::-webkit-search-cancel-button {
   text-shadow: 0 -1px rgba(0,0,0,0.69);
   vertical-align: top;
   background-color: #595b5b;
-  box-shadow: inset 0 1px #727373;
-  border-top: 1px solid #303233;
+  box-shadow: inset 0 1px #737373;
+  border-top: 1px solid #333434;
 }
 
 .topcoat-tab-bar__button:active,
 .topcoat-tab-bar__button--large:active,
 :checked + .topcoat-tab-bar__button {
-  color: #5dc1ff;
-  background-color: #404141;
-  box-shadow: inset 0 0 2px #313231;
+  color: #288edf;
+  background-color: #3f4041;
+  box-shadow: inset 0 0 1px rgba(0,0,0,0.05);
 }
 
 .topcoat-tab-bar__button:focus,
 .topcoat-tab-bar__button--large:focus {
   z-index: 1;
+  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
+  outline: 0;
 }
 
 /**
@@ -3198,19 +3231,19 @@ input[type="search"]::-webkit-search-cancel-button {
   font-size: 16px;
   letter-spacing: 1px;
   padding: 0 1.25rem;
-  border: 1px solid #303233;
+  border: 1px solid #333434;
   border-radius: 6px;
-  background-color: #404141;
-  box-shadow: inset 0 1px rgba(0,0,0,0.18);
+  background-color: #454646;
+  box-shadow: inset 0 1px rgba(0,0,0,0.05);
   color: #c6c8c8;
   vertical-align: top;
 }
 
 .topcoat-text-input:focus,
 .topcoat-text-input--large:focus {
-  background-color: #646666;
+  background-color: #595b5b;
   color: #fff;
-  border: 1px solid #0940fd;
+  border: 1px solid #0036ff;
   box-shadow: 0 0 0 2px #6fb5f1;
 }
 
@@ -3227,7 +3260,7 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 
 .topcoat-text-input:invalid {
-  border: 1px solid #d83b75;
+  border: 1px solid #ec514e;
 }
 
 /* topdoc
@@ -3276,7 +3309,7 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 
 .topcoat-text-input--large:invalid {
-  border: 1px solid #d83b75;
+  border: 1px solid #ec514e;
 }
 
 /**
@@ -3420,21 +3453,21 @@ input[type="search"]::-webkit-search-cancel-button {
 .topcoat-textarea--large {
   padding: 2rem;
   font-size: 2.5rem;
-  font-weight: 200;
+  font-weight: 400;
   border-radius: 6px;
   line-height: 3rem;
-  border: 1px solid #303233;
-  background-color: #404141;
-  box-shadow: inset 0 1px rgba(0,0,0,0.18);
+  border: 1px solid #333434;
+  background-color: #454646;
+  box-shadow: inset 0 1px rgba(0,0,0,0.05);
   color: #c6c8c8;
   letter-spacing: 1px;
 }
 
 .topcoat-textarea:focus,
 .topcoat-textarea--large:focus {
-  background-color: #646666;
+  background-color: #595b5b;
   color: #fff;
-  border: 1px solid #0940fd;
+  border: 1px solid #0036ff;
   box-shadow: 0 0 0 2px #6fb5f1;
 }
 
@@ -3513,7 +3546,7 @@ body {
   background: #4b4d4e;
   color: #000;
   font: 16px "Source Sans", helvetica, arial, sans-serif;
-  font-weight: 200;
+  font-weight: 400;
 }
 
 :focus {
@@ -3587,7 +3620,17 @@ body {
 
 /* This file should include color and image variables corresponding to the dark theme */
 
-/* Call To Action */
+/* ---------- colors ---------- */
+
+/* ---------- darken ---------- */
+
+/* ---------- lighten ---------- */
+
+/* ---------- alphas ---------- */
+
+/* ---------- thickness ---------- */
+
+/* ---------- shadows ---------- */
 
 /* Icons */
 
@@ -3595,18 +3638,16 @@ body {
 
 /* Text Input */
 
-/* Search Input */
-
 /* List */
 
-/* Checkbox */
-
 /* Overlay */
 
 /* Progress bar */
 
 /* Checkbox */
 
+/* Range input */
+
 /* Radio Button */
 
 /* Tab bar */
@@ -3635,7 +3676,23 @@ body {
 
 /* This file should include color and image variables corresponding to the light theme */
 
-/* Call To Action */
+/* ---------- colors ---------- */
+
+/* ---------- darken ---------- */
+
+/* ---------- lighten ---------- */
+
+/* ---------- alphas ---------- */
+
+/* ---------- thickness ---------- */
+
+/* ---------- shadows ---------- */
+
+/* Secondary colors (based on colors above)
+
+Everything below this line should be calculated using the variables above. This area is for people that want to totally customize everything. Have fun, bros!
+
+*/
 
 /* Icons */
 
@@ -3681,6 +3738,8 @@ body {
 
 /* Switch */
 
+/* Call To Action */
+
 /* Text Input */
 
 /* Radio input */
@@ -3693,8 +3752,8 @@ body {
 
 /* Progress bar progress */
 
-/* Search input */
-
 /* Switch */
 
 /* Notification */
+
+/* Search */