topcoat-rails 0.1.6 → 0.8.0

data/Rakefile

@@ -11,24 +11,24 @@ namespace :topcoat do
     end
   end
 
-  TOPCOAT_FONTS = FileList["topcoat/release/font/*.*"]
+  TOPCOAT_FONTS = FileList["topcoat/font/*.*"]
   ASSETS_FONTS = TOPCOAT_FONTS.pathmap("app/assets/fonts/topcoat/%f")
   ASSETS_FONTS.zip(TOPCOAT_FONTS).each do |target, source|
     file target => [source] { cp source, target, verbose: true }
   end
 
-  TOPCOAT_CSS = FileList["topcoat/release/css/*.*"].exclude(/min/)
+  TOPCOAT_CSS = FileList["topcoat/css/*.*"].exclude(/min/)
   ASSETS_CSS = TOPCOAT_CSS.pathmap("app/assets/stylesheets/topcoat/%f")
   ASSETS_CSS.zip(TOPCOAT_CSS).each do |target, source|
     target.gsub!(/topcoat-/, '')
     target.gsub!(/css/, 'scss')
     # file target => [source] { cp source, target, verbose: true }
-    File.open(target,'w+') do |output_file|
+    File.open(target,'w') do |output_file|
       output_file.puts File.read(source).gsub(/url\("..\/font\/(.*)"\)/, 'font-url("topcoat/\1")').gsub(/url\("..\/img\/(.*)"\)/, 'image-url("topcoat/\1")')
     end
   end
 
-  TOPCOAT_IMAGES = FileList["topcoat/release/img/*.*"]
+  TOPCOAT_IMAGES = FileList["topcoat/img/*.*"]
   ASSETS_IMAGES = TOPCOAT_IMAGES.pathmap("app/assets/images/topcoat/%f")
   ASSETS_IMAGES.zip(TOPCOAT_IMAGES).each do |target, source|
     file target => [source] { cp source, target, verbose: true }
@@ -52,7 +52,7 @@ namespace :topcoat do
   end
 
   desc "Update Topcoat's Assets"
-  task :assets => [:pull, :clean, :fonts, :css, :images]
+  task :assets => [:pull, :clean, :fonts, :images, :css]
 end
 
 Rake::TestTask.new do |t|

data/app/assets/stylesheets/topcoat/desktop-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: 4px;
 }
 
@@ -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: 4px;
 }
 
@@ -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: 1rem;
   height: 1rem;
   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: 14px;
   height: 4px;
   background: transparent;
-  border: 7px solid #fff;
+  border: 7px solid #c6c8c8;
   border-width: 3px;
   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: 4px;
 }
 
@@ -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: 1.688rem;
 }
 
-.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.
@@ -1484,24 +1505,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;
@@ -1953,8 +1956,8 @@ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {
   width: 1.063rem;
   height: 1.063rem;
   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 {
@@ -1967,9 +1970,9 @@ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {
   opacity: 0;
   width: 0.313rem;
   height: 0.313rem;
-  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;
@@ -1978,8 +1981,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;
 }
 
 /*
@@ -2127,16 +2142,16 @@ limitations under the License.
 
 .topcoat-range {
   border-radius: 4px;
-  border: 1px solid #303233;
-  background-color: #424546;
+  border: 1px solid #333434;
+  background-color: #454646;
   height: 0.5rem;
   border-radius: 15px;
 }
 
 .topcoat-range::-moz-range-track {
   border-radius: 4px;
-  border: 1px solid #303233;
-  background-color: #424546;
+  border: 1px solid #333434;
+  background-color: #454646;
   height: 0.5rem;
   border-radius: 15px;
 }
@@ -2145,28 +2160,38 @@ limitations under the License.
   height: 1.313rem;
   width: 0.75rem;
   background-color: #595b5b;
-  border: 1px solid #303233;
+  border: 1px solid #333434;
   border-radius: 4px;
-  box-shadow: inset 0 1px #727373;
+  box-shadow: inset 0 1px #737373;
 }
 
 .topcoat-range::-moz-range-thumb {
   height: 1.313rem;
   width: 0.75rem;
   background-color: #595b5b;
-  border: 1px solid #303233;
+  border: 1px solid #333434;
   border-radius: 4px;
-  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;
 }
 
 /**
@@ -2316,26 +2341,26 @@ input[type="search"]::-webkit-search-cancel-button {
 .topcoat-search-input,
 .topcoat-search-input--large {
   line-height: 1.313rem;
+  height: 1.313rem;
   font-size: 12px;
-  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 1.3rem;
   border-radius: 15px;
   background-image: image-url("topcoat/search.svg");
-  background-position: 1em center;
+  background-position: 1rem center;
   background-repeat: no-repeat;
   background-size: 12px;
 }
 
 .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,
@@ -2383,11 +2408,12 @@ input[type="search"]::-webkit-search-cancel-button {
 
 .topcoat-search-input--large {
   line-height: 1.688rem;
+  height: 1.688rem;
   font-size: 0.875rem;
   font-weight: 400;
   padding: 0 0 0 1.8rem;
   border-radius: 25px;
-  background-position: 1.2em center;
+  background-position: 1.2rem center;
   background-size: 0.875rem;
 }
 
@@ -2633,7 +2659,7 @@ input[type="search"]::-webkit-search-cancel-button {
   font-size: 12px;
   padding: 0 0.563rem;
   border-radius: 4px;
-  border: 1px solid #303233;
+  border: 1px solid #333434;
   overflow: hidden;
   width: 3.5rem;
 }
@@ -2646,8 +2672,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: 0.8rem;
   padding-left: 0.75rem;
 }
@@ -2660,18 +2686,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: -0.6rem;
   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: 0.8rem;
   padding-left: 0.6rem;
 }
@@ -2680,8 +2706,13 @@ input[type="search"]::-webkit-search-cancel-button {
   margin-left: 1.85rem;
 }
 
+.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;
 }
 
@@ -2843,21 +2874,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;
 }
 
 /**
@@ -2948,19 +2981,19 @@ input[type="search"]::-webkit-search-cancel-button {
   font-size: 12px;
   letter-spacing: 0;
   padding: 0 0.563rem;
-  border: 1px solid #303233;
+  border: 1px solid #333434;
   border-radius: 4px;
-  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;
 }
 
@@ -2977,7 +3010,7 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 
 .topcoat-text-input:invalid {
-  border: 1px solid #d83b75;
+  border: 1px solid #ec514e;
 }
 
 /* topdoc
@@ -3026,7 +3059,7 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 
 .topcoat-text-input--large:invalid {
-  border: 1px solid #d83b75;
+  border: 1px solid #ec514e;
 }
 
 /**
@@ -3173,18 +3206,18 @@ input[type="search"]::-webkit-search-cancel-button {
   font-weight: 400;
   border-radius: 4px;
   line-height: 1.313rem;
-  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: 0;
 }
 
 .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;
 }
 
@@ -3263,7 +3296,7 @@ body {
   background: #4b4d4e;
   color: #000;
   font: 16px "Source Sans", helvetica, arial, sans-serif;
-  font-weight: 200;
+  font-weight: 400;
 }
 
 :focus {
@@ -3337,7 +3370,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 */
 
@@ -3345,18 +3388,16 @@ body {
 
 /* Text Input */
 
-/* Search Input */
-
 /* List */
 
-/* Checkbox */
-
 /* Overlay */
 
 /* Progress bar */
 
 /* Checkbox */
 
+/* Range input */
+
 /* Radio Button */
 
 /* Tab bar */
@@ -3385,7 +3426,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 */
 
@@ -3431,6 +3488,8 @@ body {
 
 /* Switch */
 
+/* Call To Action */
+
 /* Text Input */
 
 /* Radio input */
@@ -3443,8 +3502,8 @@ body {
 
 /* Progress bar progress */
 
-/* Search input */
-
 /* Switch */
 
 /* Notification */
+
+/* Search */