Update visual style

trilbymedia · Jun 7, 2017 · 2f9c7cb · 2f9c7cb
1 parent 430bb39
commit 2f9c7cb
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 42 deletions.
diff --git a/docs/css/docs.css b/docs/css/docs.css
@@ -6,11 +6,11 @@
 /* Spectre docs style */
 .bg-gray {
   background: #f8f9fa;
-  color: #667189;
+  color: #5b657a;
   padding: 1rem;
 }
 .bg-dark {
-  background: #50596c;
+  background: #454d5d;
   color: #fff;
   padding: 1rem;
 }
@@ -20,6 +20,7 @@
   padding: 1rem;
 }
 .section-header {
+  background: rgba(248, 249, 250, .9);
   padding: 1rem .5rem;
   position: fixed;
   top: 0;
@@ -37,30 +38,30 @@
   padding: 0;
 }
 .grid-header .navbar-brand {
-  color: #50596c;
+  color: #454d5d;
 }
 .grid-header .btn-link {
-  color: #667189;
+  color: #5b657a;
   padding-left: .6rem;
   padding-right: .6rem;
 }
 .grid-header .btn-link:focus,
 .grid-header .btn-link:hover,
 .grid-header .btn-link:active {
-  color: #50596c;
+  color: #454d5d;
   opacity: .75;
 }
 .grid-hero {
   margin-bottom: 4rem;
   margin-top: 10rem;
 }
 .grid-hero h1 {
-  color: #50596c;
+  color: #454d5d;
   font-size: 3.2rem;
   font-weight: 400;
 }
 .grid-hero h2 {
-  color: #5b657a;
+  color: #50596c;
   font-size: 1.8rem;
   font-weight: 400;
   line-height: 3rem;
@@ -74,7 +75,7 @@
 .grid-hero .card {
   background: none;
   border: 0;
-  color: #667189;
+  color: #5b657a;
   padding: 1rem;
 }
 .grid-hero .card .card-title {
@@ -164,7 +165,7 @@
   margin: 1.5rem 0;
 }
 .docs-content .code {
-  color: #667189;
+  color: #5b657a;
 }
 .docs-content .code .com {
   color: #acb3c2;
@@ -173,7 +174,7 @@
   color: #5764c6;
 }
 .docs-content .code .atn {
-  color: #667189;
+  color: #5b657a;
 }
 .docs-content .code .atv {
   color: #e06870;

diff --git a/docs/dist/spectre-exp.css b/docs/dist/spectre-exp.css
@@ -78,7 +78,7 @@
   color: #5764c6;
 }
 .calendar .calendar-date .date-item:focus {
-  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
+  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .15);
 }
 .calendar .calendar-date .date-item:focus,
 .calendar .calendar-date .date-item:hover {
@@ -723,7 +723,7 @@
   width: 100%;
 }
 .slider:focus {
-  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
+  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .15);
   outline: none;
 }
 .slider::-webkit-slider-thumb {

diff --git a/docs/dist/spectre-exp.min.css b/docs/dist/spectre-exp.min.css
diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -391,7 +391,7 @@ html {
 }
 body {
   background: #fff;
-  color: #50596c;
+  color: #454d5d;
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size: 1.4rem;
   overflow-x: hidden;
@@ -403,7 +403,7 @@ a {
   text-decoration: none;
 }
 a:focus {
-  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
+  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .15);
 }
 a:focus,
 a:hover,
@@ -419,7 +419,7 @@ h4,
 h5,
 h6 {
   color: inherit;
-  font-weight: 300;
+  font-weight: 500;
   line-height: 1.2;
   margin-bottom: 1.5rem;
   margin-top: 0;
@@ -499,7 +499,7 @@ dl dd {
 mark {
   background: #ffe9b3;
   border-radius: .2rem;
-  color: #50596c;
+  color: #454d5d;
   display: inline-block;
   line-height: 1;
   padding: .3rem .4rem;
@@ -611,7 +611,7 @@ abbr[title] {
 }
 .btn:focus {
   background: #fbfbfe;
-  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
+  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .15);
   text-decoration: none;
 }
 .btn:hover {
@@ -773,7 +773,7 @@ abbr[title] {
   background-image: none;
   border: .1rem solid #c4c9d3;
   border-radius: .2rem;
-  color: #50596c;
+  color: #454d5d;
   display: block;
   font-size: 1.4rem;
   height: 3.2rem;
@@ -787,7 +787,7 @@ abbr[title] {
 }
 .form-input:focus {
   border-color: #5764c6;
-  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
+  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .15);
 }
 .form-input::-webkit-input-placeholder {
   color: #acb3c2;
@@ -858,7 +858,7 @@ textarea.form-input {
 }
 .form-select:focus {
   border-color: #5764c6;
-  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
+  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .15);
 }
 .form-select::-ms-expand {
   display: none;
@@ -953,7 +953,7 @@ textarea.form-input {
 .form-radio input:focus + .form-icon,
 .form-switch input:focus + .form-icon {
   border-color: #5764c6;
-  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
+  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .15);
 }
 .form-checkbox input:checked + .form-icon,
 .form-radio input:checked + .form-icon,
@@ -1165,7 +1165,7 @@ input.disabled + .form-icon {
 .label {
   background: #f8f9fa;
   border-radius: .2rem;
-  color: #5b657a;
+  color: #50596c;
   display: inline-block;
   line-height: 1;
   padding: .3rem .4rem;
@@ -1198,7 +1198,7 @@ code {
 }
 .code {
   border-radius: .2rem;
-  color: #50596c;
+  color: #454d5d;
   line-height: 2rem;
   position: relative;
 }
@@ -1766,7 +1766,7 @@ code {
   font-size: 2rem;
 }
 .panel .panel-subtitle {
-  color: #bbc1cd;
+  color: #acb3c2;
 }
 .empty {
   background: #f8f9fa;
@@ -1780,7 +1780,7 @@ code {
   margin: 1rem auto;
 }
 .empty .empty-subtitle {
-  color: #bbc1cd;
+  color: #acb3c2;
 }
 .empty .empty-action {
   margin-top: 1.5rem;
@@ -1828,7 +1828,7 @@ code {
 }
 .form-autocomplete .form-autocomplete-input.is-focused {
   border-color: #5764c6;
-  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
+  box-shadow: 0 0 0 .2rem rgba(69, 77, 93, .15);
 }
 .form-autocomplete .form-autocomplete-input .form-input {
   border-color: transparent;
@@ -2079,8 +2079,7 @@ code {
   font-size: 2rem;
 }
 .card .card-subtitle {
-  color: #bbc1cd;
-  font-size: 1.2rem;
+  color: #acb3c2;
 }
 .chip {
   -webkit-align-items: center;
@@ -2400,6 +2399,7 @@ code {
   color: #5764c6;
 }
 .nav .nav-item.active > a {
+  color: #5b657a;
   font-weight: bold;
 }
 .nav .nav-item.active > a:focus,
@@ -2410,9 +2410,6 @@ code {
   margin-bottom: 1rem;
   margin-left: 2rem;
 }
-.nav .nav a {
-  color: #acb3c2;
-}
 .popover {
   display: inline-block;
   position: relative;
@@ -2572,7 +2569,7 @@ code {
   line-height: 2rem;
 }
 .tile .tile-subtitle {
-  color: #bbc1cd;
+  color: #acb3c2;
   line-height: 2rem;
 }
 .tile.tile-centered {

diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
diff --git a/docs/src/docs.less b/docs/src/docs.less
@@ -27,6 +27,7 @@
 }
 
 .section-header {
+  background: fade(@bg-color, 90%);
   padding: 1rem .5rem;
   position: fixed;
   top: 0;

diff --git a/src/cards.less b/src/cards.less
@@ -42,6 +42,5 @@
 
   .card-subtitle {
     color: lighten(@body-font-color, 40%);
-    font-size: @font-size-sm;
   }
 }
diff --git a/src/mixins.less b/src/mixins.less
@@ -8,7 +8,7 @@
 }
 
 // Component focus shadow
-.control-shadow(@color: @primary-color) {
+.control-shadow(@color: @dark-color) {
   box-shadow: 0 0 0 .2rem fade(@color, 15%);
 }
 

diff --git a/src/navs.less b/src/navs.less
@@ -15,6 +15,7 @@
     }
     &.active {
       & > a {
+        color: darken(@gray-color-dark, 10%);
         font-weight: bold;
         &:focus,
         &:hover {
@@ -27,9 +28,5 @@
   & .nav {
     margin-bottom: 1rem;
     margin-left: 2rem;
-
-    a {
-      color: @gray-color;
-    }
   }
 }
diff --git a/src/typography.less b/src/typography.less
@@ -6,7 +6,7 @@ h4,
 h5,
 h6 {
   color: inherit;
-  font-weight: 300;
+  font-weight: 500;
   line-height: 1.2;
   margin-bottom: 1.5rem;
   margin-top: 0;

diff --git a/src/variables.less b/src/variables.less
@@ -4,7 +4,7 @@
 @html-font-size: 10px;
 @html-line-height: 1.428571429;
 @body-bg: @bg-color-light;
-@body-font-color: lighten(@dark-color, 5%);
+@body-font-color: @dark-color;
 @font-size: 1.4rem;
 @font-size-sm: 1.2rem;
 @font-size-lg: 1.6rem;