Add Colors utilities picturepan2#205

trilbymedia · Jun 27, 2017 · 5865991 · 5865991
1 parent 58b1973
commit 5865991
Show file tree

Hide file tree

Showing 18 changed files with 681 additions and 467 deletions.
diff --git a/README.md b/README.md
@@ -54,7 +54,7 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 - [Empty states](https://picturepan2.github.io/spectre/layout.html#empty) - empty states/blank slates for first time use, empty data and error screens
 
 #### Components
-
+- [Accordions](https://picturepan2.github.io/spectre/experimentals.html#accordions) - used to toggle sections of content
 - [Autocomplete](https://picturepan2.github.io/spectre/components.html#autocomplete) - form component provides suggestions while you type
 - [Avatars](https://picturepan2.github.io/spectre/components.html#avatars) - user profile pictures or name initials rendered avatar
 - [Badges](https://picturepan2.github.io/spectre/components.html#badges) - unread number indicators
@@ -72,10 +72,9 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 
 #### Utilities
 
-- [Utilities](https://picturepan2.github.io/spectre/utilities.html) - layout, positions, display, text, shapes, loading things
+- [Utilities](https://picturepan2.github.io/spectre/utilities.html) - colors, display, divider, loading, position, shapes and text utilities
 
 #### Experimentals
-- [Accordions](https://picturepan2.github.io/spectre/experimentals.html#accordions) - used to toggle sections of content
 - [Calendars](https://picturepan2.github.io/spectre/experimentals.html#calendars) - date or date range picker and events display
 - [Carousels](https://picturepan2.github.io/spectre/experimentals.html#carousels) - slideshows for cycling images
 - [Comparison Sliders](https://picturepan2.github.io/spectre/experimentals.html#comparison) - sliders for comparing two images, built entirely in CSS

diff --git a/docs/css/docs.css b/docs/css/docs.css
@@ -4,21 +4,6 @@
   content: "0.2.15";
 }
 /* Spectre docs style */
-.bg-gray {
-  background: #f8f9fa;
-  color: #5b657a;
-  padding: 1rem;
-}
-.bg-dark {
-  background: #454d5d;
-  color: #fff;
-  padding: 1rem;
-}
-.bg-primary {
-  background: #5764c6;
-  color: #fff;
-  padding: 1rem;
-}
 .section-header {
   background: rgba(248, 249, 250, .9);
   padding: 1rem .5rem;
@@ -28,6 +13,7 @@
   z-index: 200;
 }
 .section-hero {
+  padding: 1rem;
   position: relative;
   z-index: 300;
 }
@@ -85,8 +71,7 @@
 }
 .grid-footer {
   color: #acb3c2;
-  margin-bottom: 1rem;
-  margin-top: 2rem;
+  padding: 2rem 0 1rem 0;
 }
 .grid-footer a {
   color: #727e96;
@@ -98,7 +83,7 @@
   padding: 1rem;
 }
 .docs-content header {
-  padding-top: 6rem;
+  padding-top: 5.5rem;
 }
 .docs-content .anchor {
   height: 0;

diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -409,7 +409,7 @@ a:focus,
 a:hover,
 a:active,
 a.active {
-  color: #3b49af;
+  color: #4452c0;
   text-decoration: underline;
 }
 h1,
@@ -668,7 +668,7 @@ dl dd {
 .btn.btn-link:hover,
 .btn.btn-link:active,
 .btn.btn-link.active {
-  color: #3b49af;
+  color: #4452c0;
 }
 .btn.btn-sm {
   font-size: 1.2rem;
@@ -2755,6 +2755,125 @@ code {
     transform: translateY(0);
   }
 }
+.text-primary {
+  color: #5764c6;
+}
+a.text-primary:focus,
+a.text-primary:hover {
+  color: #4452c0;
+}
+.text-secondary {
+  color: #eff1fa;
+}
+a.text-secondary:focus,
+a.text-secondary:hover {
+  color: #dcdff3;
+}
+.text-gray {
+  color: #acb3c2;
+}
+a.text-gray:focus,
+a.text-gray:hover {
+  color: #9ea6b7;
+}
+.text-light {
+  color: #fff;
+}
+a.text-light:focus,
+a.text-light:hover {
+  color: #f2f2f2;
+}
+.text-success {
+  color: #32b643;
+}
+a.text-success:focus,
+a.text-success:hover {
+  color: #2da23c;
+}
+.text-warning {
+  color: #ffb700;
+}
+a.text-warning:focus,
+a.text-warning:hover {
+  color: #e6a500;
+}
+.text-error {
+  color: #e85600;
+}
+a.text-error:focus,
+a.text-error:hover {
+  color: #cf4d00;
+}
+.bg-primary {
+  background: #5764c6;
+}
+.bg-secondary {
+  background: #eff1fa;
+}
+.bg-dark {
+  background: #454d5d;
+}
+.bg-gray {
+  background: #f8f9fa;
+}
+.bg-success {
+  background: #32b643;
+}
+.bg-warning {
+  background: #ffb700;
+}
+.bg-error {
+  background: #e85600;
+}
+.block {
+  display: block;
+}
+.inline {
+  display: inline;
+}
+.inline-block {
+  display: inline-block;
+}
+.flex {
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+}
+.inline-flex {
+  display: inline-flex;
+  display: -ms-inline-flexbox;
+  display: -webkit-inline-flex;
+}
+.hide {
+  display: none !important;
+}
+.visible {
+  visibility: visible;
+}
+.invisible {
+  visibility: hidden;
+}
+.text-hide {
+  background: transparent;
+  border: 0;
+  color: transparent;
+  font-size: 0;
+  line-height: 0;
+  text-shadow: none;
+}
+.text-assistive {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: .1rem;
+  margin: -.1rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: .1rem;
+}
+.hand {
+  cursor: pointer;
+}
 .divider,
 .divider-vert {
   display: block;
@@ -2865,6 +2984,9 @@ code {
 .ml-10 {
   margin-left: 1rem;
 }
+.m-10 {
+  margin: 1rem;
+}
 .mt-5 {
   margin-top: .5rem;
 }
@@ -2877,6 +2999,9 @@ code {
 .ml-5 {
   margin-left: .5rem;
 }
+.m-5 {
+  margin: .5rem;
+}
 .pt-10 {
   padding-top: 1rem;
 }
@@ -2889,6 +3014,9 @@ code {
 .pl-10 {
   padding-left: 1rem;
 }
+.p-10 {
+  padding: 1rem;
+}
 .pt-5 {
   padding-top: .5rem;
 }
@@ -2901,51 +3029,29 @@ code {
 .pl-5 {
   padding-left: .5rem;
 }
-.block {
-  display: block;
+.p-5 {
+  padding: .5rem;
 }
-.inline {
-  display: inline;
-}
-.inline-block {
-  display: inline-block;
-}
-.flex {
-  display: flex;
-  display: -ms-flexbox;
-  display: -webkit-flex;
+.shadow-0 {
+  box-shadow: 0 0 .2rem rgba(69, 77, 93, .3);
 }
-.inline-flex {
-  display: inline-flex;
-  display: -ms-inline-flexbox;
-  display: -webkit-inline-flex;
+.shadow-1 {
+  box-shadow: 0 .1rem .4rem rgba(69, 77, 93, .3);
 }
-.hide {
-  display: none !important;
+.shadow-2 {
+  box-shadow: 0 .2rem .6rem rgba(69, 77, 93, .3);
 }
-.visible {
-  visibility: visible;
+.shadow-3 {
+  box-shadow: 0 .3rem .8rem rgba(69, 77, 93, .3);
 }
-.invisible {
-  visibility: hidden;
+.shadow-4 {
+  box-shadow: 0 .4rem 1rem rgba(69, 77, 93, .3);
 }
-.text-hide {
-  background: transparent;
-  border: 0;
-  color: transparent;
-  font-size: 0;
-  line-height: 0;
-  text-shadow: none;
+.rounded {
+  border-radius: .2rem;
 }
-.text-assistive {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: .1rem;
-  margin: -.1rem;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: .1rem;
+.circle {
+  border-radius: 50%;
 }
 .text-left {
   text-align: left;
@@ -2996,28 +3102,4 @@ code {
   hyphens: auto;
   word-break: break-word;
   word-wrap: break-word;
-}
-.hand {
-  cursor: pointer;
-}
-.shadow-0 {
-  box-shadow: 0 0 .2rem rgba(69, 77, 93, .3);
-}
-.shadow-1 {
-  box-shadow: 0 .1rem .4rem rgba(69, 77, 93, .3);
-}
-.shadow-2 {
-  box-shadow: 0 .2rem .6rem rgba(69, 77, 93, .3);
-}
-.shadow-3 {
-  box-shadow: 0 .3rem .8rem rgba(69, 77, 93, .3);
-}
-.shadow-4 {
-  box-shadow: 0 .4rem 1rem rgba(69, 77, 93, .3);
-}
-.rounded {
-  border-radius: .2rem;
-}
-.circle {
-  border-radius: 50%;
 }
diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
diff --git a/docs/index.html b/docs/index.html
@@ -127,7 +127,7 @@ <h2>The <u>lightweight</u>, <u>responsive</u> and <u>modern</u> CSS framework</h
         <section id="installation" class="container">
           <header class="text-center"><h3><a href="#installation" class="anchor" aria-hidden="true">#</a>Installation</h3></header>
           <section class="notes">
-            <p>There are 4 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.</p>
+            <p>There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.</p>
           </section>
           <section class="notes">
             <h5>Install manually</h5>