Merge pull request #4 from Brightspace/dbatiste/change-gradient-to-color

Changing gradient to color so variable name does not contain implemen…
BrightspaceUI · Oct 20, 2015 · 8df4a15 · 8df4a15
2 parents 541416b + 2d8825a
commit 8df4a15
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 43 deletions.
diff --git a/colors.scss b/colors.scss
@@ -41,11 +41,11 @@ $vui-color-white: #FFF !default;
 $vui-color-woolonardo: #F2F3F5 !default;
 
 // gradients
-$vui-gradient-blastica: linear-gradient(to bottom, $vui-color-panthera 0%, $vui-color-gravah 100%) !default;
-$vui-gradient-buttonic: linear-gradient(to bottom, $vui-color-regolith 0%, $vui-color-gypsum 100%) !default;
-$vui-gradient-circdawn: linear-gradient(to bottom, $vui-color-lurite 0%, $vui-color-carnelian 100%) !default;
-$vui-gradient-meglor: linear-gradient(to bottom, $vui-color-pressicus 0%, $vui-color-tungsten 100%) !default;
-$vui-gradient-nautikon: linear-gradient(to bottom, $vui-color-saphirella 0%, $vui-color-violettine 100%) !default;
-$vui-gradient-neptrine: linear-gradient(to bottom, $vui-color-chartronic 0%, $vui-color-deephonica 100%) !default;
-$vui-gradient-tauksigen: linear-gradient(to bottom, $vui-color-lurite 0%, $vui-color-koolaudica 100%) !default;
-$vui-gradient-trancition: linear-gradient(to bottom, $vui-color-white 0%, $vui-color-regolith 100%) !default;
+$vui-color-blastica: linear-gradient(to bottom, $vui-color-panthera 0%, $vui-color-gravah 100%) !default;
+$vui-color-buttonic: linear-gradient(to bottom, $vui-color-regolith 0%, $vui-color-gypsum 100%) !default;
+$vui-color-circdawn: linear-gradient(to bottom, $vui-color-lurite 0%, $vui-color-carnelian 100%) !default;
+$vui-color-meglor: linear-gradient(to bottom, $vui-color-pressicus 0%, $vui-color-tungsten 100%) !default;
+$vui-color-nautikon: linear-gradient(to bottom, $vui-color-saphirella 0%, $vui-color-violettine 100%) !default;
+$vui-color-neptrine: linear-gradient(to bottom, $vui-color-chartronic 0%, $vui-color-deephonica 100%) !default;
+$vui-color-tauksigen: linear-gradient(to bottom, $vui-color-lurite 0%, $vui-color-koolaudica 100%) !default;
+$vui-color-trancition: linear-gradient(to bottom, $vui-color-white 0%, $vui-color-regolith 100%) !default;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vui-colors",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Variables for the VUI color palette.",
   "scripts": {
     "build:autoprefix": "postcss --use autoprefixer ./sample/colors.css -o ./sample/colors.css",

diff --git a/sample/colors.css b/sample/colors.css
@@ -90,42 +90,42 @@
   background-color: #F2F3F5;
 }
 
-.vui-gradient-blastica {
+.vui-color-blastica {
   background: -webkit-linear-gradient(top, #FF389B 0%, #32075B 100%);
   background: linear-gradient(to bottom, #FF389B 0%, #32075B 100%);
 }
 
-.vui-gradient-buttonic {
+.vui-color-buttonic {
   background: -webkit-linear-gradient(top, #F9FAFB 0%, #E6EAF0 100%);
   background: linear-gradient(to bottom, #F9FAFB 0%, #E6EAF0 100%);
 }
 
-.vui-gradient-circdawn {
+.vui-color-circdawn {
   background: -webkit-linear-gradient(top, #F5EC5A 0%, #E57231 100%);
   background: linear-gradient(to bottom, #F5EC5A 0%, #E57231 100%);
 }
 
-.vui-gradient-meglor {
+.vui-color-meglor {
   background: -webkit-linear-gradient(top, #B9C2D0 0%, #72777A 100%);
   background: linear-gradient(to bottom, #B9C2D0 0%, #72777A 100%);
 }
 
-.vui-gradient-nautikon {
+.vui-color-nautikon {
   background: -webkit-linear-gradient(top, #00A8DD 0%, #4C3F99 100%);
   background: linear-gradient(to bottom, #00A8DD 0%, #4C3F99 100%);
 }
 
-.vui-gradient-neptrine {
+.vui-color-neptrine {
   background: -webkit-linear-gradient(top, #D2E830 0%, #00AFAA 100%);
   background: linear-gradient(to bottom, #D2E830 0%, #00AFAA 100%);
 }
 
-.vui-gradient-tauksigen {
+.vui-color-tauksigen {
   background: -webkit-linear-gradient(top, #F5EC5A 0%, #69BE28 100%);
   background: linear-gradient(to bottom, #F5EC5A 0%, #69BE28 100%);
 }
 
-.vui-gradient-trancition {
+.vui-color-trancition {
   background: -webkit-linear-gradient(top, #FFF 0%, #F9FAFB 100%);
   background: linear-gradient(to bottom, #FFF 0%, #F9FAFB 100%);
 }
diff --git a/sample/colors.css.scss b/sample/colors.css.scss
@@ -74,27 +74,27 @@
   background-color: $vui-color-woolonardo;
 }
 
-.vui-gradient-blastica {
-  background: $vui-gradient-blastica;
+.vui-color-blastica {
+  background: $vui-color-blastica;
 }
-.vui-gradient-buttonic {
-  background: $vui-gradient-buttonic;
+.vui-color-buttonic {
+  background: $vui-color-buttonic;
 }
-.vui-gradient-circdawn {
-  background: $vui-gradient-circdawn;
+.vui-color-circdawn {
+  background: $vui-color-circdawn;
 }
-.vui-gradient-meglor {
-  background: $vui-gradient-meglor;
+.vui-color-meglor {
+  background: $vui-color-meglor;
 }
-.vui-gradient-nautikon {
-  background: $vui-gradient-nautikon;
+.vui-color-nautikon {
+  background: $vui-color-nautikon;
 }
-.vui-gradient-neptrine {
-  background: $vui-gradient-neptrine;
+.vui-color-neptrine {
+  background: $vui-color-neptrine;
 }
-.vui-gradient-tauksigen {
-  background: $vui-gradient-tauksigen;
+.vui-color-tauksigen {
+  background: $vui-color-tauksigen;
 }
-.vui-gradient-trancition {
-  background: $vui-gradient-trancition;
+.vui-color-trancition {
+  background: $vui-color-trancition;
 }
diff --git a/sample/colors.html b/sample/colors.html
@@ -53,16 +53,14 @@ <h2>Shades of Grey<h2>
   <div title="woolonardo" class="vui-color-woolonardo"></div>
 
   <h2>Gradients<h2>
-  <div title="blastica" class="vui-gradient-blastica"></div>
-  <div title="buttonic" class="vui-gradient-buttonic"></div>
-  <div title="circdawn" class="vui-gradient-circdawn"></div>
-  <div title="meglor" class="vui-gradient-meglor"></div>
-  <div title="nautikon" class="vui-gradient-nautikon"></div>
-  <div title="neptrine" class="vui-gradient-neptrine"></div>
-  <div title="tauksigen" class="vui-gradient-tauksigen"></div>
-  <div title="trancition" class="vui-gradient-trancition"></div>
-  <div title="" class="vui-color-"></div>
-  <div title="" class="vui-color-"></div>
+  <div title="blastica" class="vui-color-blastica"></div>
+  <div title="buttonic" class="vui-color-buttonic"></div>
+  <div title="circdawn" class="vui-color-circdawn"></div>
+  <div title="meglor" class="vui-color-meglor"></div>
+  <div title="nautikon" class="vui-color-nautikon"></div>
+  <div title="neptrine" class="vui-color-neptrine"></div>
+  <div title="tauksigen" class="vui-color-tauksigen"></div>
+  <div title="trancition" class="vui-color-trancition"></div>
 
 </body>
 </html>