From 2d8825a9fdde9f43e498dd85a11c51468766d102 Mon Sep 17 00:00:00 2001
From: Dave Batiste <dave.batiste@d2l.com>
Date: Tue, 20 Oct 2015 10:11:48 -0400
Subject: [PATCH] Changing gradient to color so variable name does not contain
 implementation detail.

---
 colors.scss            | 16 ++++++++--------
 package.json           |  2 +-
 sample/colors.css      | 16 ++++++++--------
 sample/colors.css.scss | 32 ++++++++++++++++----------------
 sample/colors.html     | 18 ++++++++----------
 5 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/colors.scss b/colors.scss
index 8eeea01..29e6555 100644
--- 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
index 224c8f5..6414d83 100644
--- 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
index 7c504da..57310fc 100644
--- 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
index 4af7517..6a0b9ec 100644
--- 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
index 411c3c4..d1b02bf 100644
--- 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>