Fix #160

getchopchop · Dec 8, 2016 · 11706a6 · 11706a6
1 parent f755186
commit 11706a6
Show file tree

Hide file tree

Showing 18 changed files with 115 additions and 122 deletions.
diff --git a/src/scss/_var.scss b/src/scss/_var.scss
@@ -3,41 +3,34 @@
 // =============================================
 
 $colors: (
-    brand: (
-        pink            : #e91e63
+    primary: (
+        pink            : DeepPink
     ),
-
-    grey: (
-        base            : #666,
-        darker          : #222,
-        dark            : #444,
-        light           : #999,
-        lighter         : #e4e4e4
-    ),
-
-    black: (
-        base            : #000
-    ),
-
-    white: (
-        base            : #fff
+
+    secondary: (
+        purple          : RebeccaPurple
     ),
-
-    success: (
-        base            : #4caf50,
-        light           : #c8e6c9
-    ),
-
-    warning: (
-        base            : #ffeb3b,
-        light           : #fff59d
+
+    neutral: (
+        black           : #000,
+        white           : #fff,
+        darkest         : #222,
+        darker          : #444,
+        dark            : #666,
+        light           : #999,
+        lighter         : #e4e4e4,
+        lightest        : #f4f4f4
     ),
-
-    error: (
-        base            : #f44336,
-        light           : #ffcdd2
+
+    contextual: (
+        success         : #4caf50,
+        success-light   : #c8e6c9,
+        warning         : #ffeb3b,
+        warning-light   : #fff59d,
+        error           : #f44336,
+        error-light     : #ffcdd2
     ),
-
+    
     social: (
         twitter         : #55acee,
         facebook        : #32639f,

diff --git a/src/scss/base/_form.scss b/src/scss/base/_form.scss
@@ -23,14 +23,14 @@ label {
 input,
 textarea,
 select[multiple=multiple] {
-    background-color: color(white);
-    border: 1px solid color(grey);
+    background-color: color(neutral, white);
+    border: 1px solid color(neutral, dark);
     border-radius: 0;
     padding: spacing(xs) spacing(sm);
     width: 100%;
 
     &:focus {
-        border-color: color(black);
+        border-color: color(neutral, black);
         outline: none;
     }
 }
@@ -125,25 +125,25 @@ optgroup {
 .error,
 abbr[title="Required"],
 .required em {
-    color: color(error, base);
+    color: color(contextual, error);
 }
 
 .required::after {
     content: "*";
-    color: color(error, base);
+    color: color(contextual, error);
     margin-left: spacing(xs);
 }
 
 .valid {
-    color: color(success, base);
+    color: color(contextual, success);
 }
 
 .is-error {
-    border-color: color(error, base);
+    border-color: color(contextual, error);
 }
 
 .is-valid {
-    border-color: color(success, base);
+    border-color: color(contextual, success);
 }
 
 .validation-advice {
@@ -156,7 +156,7 @@ abbr[title="Required"],
 }
 
 .has-error .validation-advice {
-    background-color: color(error, light);
-    border-color: color(error);
+    background-color: color(contextual, error-light);
+    border-color: color(contextual, error);
 }
 
diff --git a/src/scss/base/_horizontal-rule.scss b/src/scss/base/_horizontal-rule.scss
@@ -5,7 +5,7 @@
 hr {
     border: 0;
     height: 1px;
-    background-color: color(grey,light);
+    background-color: color(neutral, light);
     margin-top: spacing(xl);
     margin-bottom: spacing(xl);
 }
diff --git a/src/scss/base/_tag.scss b/src/scss/base/_tag.scss
@@ -4,8 +4,8 @@
 
 .tag {
     display: inline-block;
-    background-color: color(grey,dark);
-    color: color(white);
+    background-color: color(neutral,darker);
+    color: color(neutral, white);
     padding: spacing(xs)/2 spacing(xs);
     white-space: nowrap;
     vertical-align: baseline;

diff --git a/src/scss/base/_text.scss b/src/scss/base/_text.scss
@@ -25,7 +25,7 @@ html {
     font-size: $font-size;
     font-family: $font-family;
     line-height: $line-height;
-    color: color(grey);
+    color: color(neutral, dark);
 }
 
 ul, ol, p {
@@ -63,14 +63,14 @@ samp {
 code {
     padding: 2px 4px;
     font-size: $font-size-sm;
-    color: color(error);
-    background-color: color(grey, lighter);
+    color: color(contextual, error);
+    background-color: color(neutral, lighter);
     border-radius: $border-radius;
 }
 
 mark {
-    background: color(error);
-    color: color(black);
+    background: color(contextual, error);
+    color: color(neutral, black);
 }
 
 
@@ -80,11 +80,11 @@ mark {
 
 a,
 .link {
-    color: color(black);
+    color: color(neutral, black);
     touch-action: manipulation;
 
     &:hover {
-        color: color(grey);
+        color: color(neutral, dark);
     }
 }
 

diff --git a/src/scss/chopchop-ui.scss b/src/scss/chopchop-ui.scss
@@ -18,7 +18,7 @@
     right: 0;
     z-index: 999;
     font-size: 12px;
-    border-bottom: 4px solid color(grey,darker);
+    border-bottom: 4px solid color(neutral,darkest);
     @include flex;
 
     ul {
@@ -30,7 +30,7 @@
 
     li {
         list-style: none;
-        color: color(white);
+        color: color(neutral, white);
 
         > * {
             display: inline-block;
@@ -39,13 +39,13 @@
     }
 
     a {
-        color: color(white);
-        background-color: color(grey,darker);
+        color: color(neutral, white);
+        background-color: color(neutral,darkest);
         text-decoration: none;
 
         &.is-active {
             background-color: #EFEDED;
-            color: color(grey,darker);
+            color: color(neutral,darkest);
         }
     }
 
@@ -75,23 +75,23 @@
 
     span {
         background-color: #FFE800;
-        color: color(grey,darker);
+        color: color(neutral,darkest);
 
         @include breakpoint(screen(sm) screen(sm, max)) {
             background-color: #E800E8;
-            color: color(white);
+            color: color(neutral, white);
         }
         @include breakpoint(screen(md) screen(md, max)) {
             background-color: #70F800;
-            color: color(grey,darker);
+            color: color(neutral,darkest);
         }
         @include breakpoint(screen(lg) screen(lg, max)) {
             background-color: #00B1F5;
-            color: color(white);
+            color: color(neutral, white);
         }
         @include breakpoint(screen(xl)) {
             background-color: #FF2C00;
-            color: color(white);
+            color: color(neutral, white);
         }
     }
 }
@@ -130,10 +130,10 @@
     width: 200px;
     left: -100%;
     z-index: 998;
-    background-color: color(grey,darker);
+    background-color: color(neutral,darkest);
     padding: 20px 10px;
     padding-bottom: 46px;
-    color: color(grey,lighter);
+    color: color(neutral, lighter);
 
     &.is-active {
         left: 0;
@@ -151,7 +151,7 @@
             counter-increment: section;
             content: counters(section,".") ". ";
             font-size: $font-size-sm;
-            color: color(grey);
+            color: color(neutral, dark);
         }
 
         ol {
@@ -163,7 +163,7 @@
     }
 
     a {
-        color: color(grey,lighter);
+        color: color(neutral, lighter);
         text-decoration: none;
 
         &:hover {
@@ -178,9 +178,9 @@
 // =============================================
 
 .cc-section {
-    border: 5px solid color(grey,lighter);
+    border: 5px solid color(neutral, lighter);
     border-top: 0;
-    background-color: color(white);
+    background-color: color(neutral, white);
 }
 
 .cc-demo {
@@ -201,7 +201,7 @@
 // =============================================
 
 .cc-title {
-    background-color: color(grey,lighter);
+    background-color: color(neutral, lighter);
     @include flex;
     @include justify-content(space-between);
     @include align-items(center);
@@ -234,13 +234,13 @@
 
 .cc-title-desc {
     padding: 20px 20px 0;
-    border-left: 5px solid color(grey,lighter);
-    border-right: 5px solid color(grey,lighter);
+    border-left: 5px solid color(neutral, lighter);
+    border-right: 5px solid color(neutral, lighter);
     border-top: 0;
 
     > *:last-child {
         margin-bottom: 0;
-        border-bottom: 2px solid color(grey,lighter);
+        border-bottom: 2px solid color(neutral, lighter);
         padding-bottom: 20px;
     }
 }
@@ -330,7 +330,7 @@
     display: block;
     max-height: 20em;
     overflow: scroll;
-    background-color: color(grey,lighter) !important;
+    background-color: color(neutral, lighter) !important;
 }
 
 

diff --git a/src/scss/component/_alert.scss b/src/scss/component/_alert.scss
@@ -4,8 +4,8 @@
 
 .alert {
     padding: spacing();
-    background-color: color(grey, lighter);
-    border: 1px solid color(grey);
+    background-color: color(neutral, lighter);
+    border: 1px solid color(neutral, dark);
     margin-bottom: spacing();
 
     p {
@@ -55,11 +55,11 @@
 // =============================================
 
 .alert--success {
-    background-color: color(success, light);
-    border-color: color(success);
+    background-color: color(contextual, success-light);
+    border-color: color(contextual, success);
 }
 
 .alert--error {
-    background-color: color(error, light);
-    border-color: color(error);
+    background-color: color(contextual, error-light);
+    border-color: color(contextual, error);
 }
diff --git a/src/scss/component/_breadcrumb.scss b/src/scss/component/_breadcrumb.scss
@@ -8,7 +8,7 @@
         margin-right: spacing(sm);
 
         &:after {
-            @include chevron(color(grey), 4px, right, 1px);
+            @include chevron(color(neutral, dark), 4px, right, 1px);
             vertical-align: middle;
         }
     }

diff --git a/src/scss/component/_drawer.scss b/src/scss/component/_drawer.scss
@@ -8,7 +8,7 @@
     bottom: 0;
     width: 90%;
     max-width: 30em;
-    background: color(white);
+    background: color(neutral, white);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 }

diff --git a/src/scss/component/_modal.scss b/src/scss/component/_modal.scss
@@ -22,7 +22,7 @@
 // =============================================
 
 .modal__dialog {
-    background-color: color(white);
+    background-color: color(neutral, white);
     margin-left: auto;
     margin-right: auto;
     position: relative;

diff --git a/src/scss/component/_pagination.scss b/src/scss/component/_pagination.scss
@@ -7,9 +7,9 @@
         vertical-align: middle;
     }
     li:first-child a::after {
-        @include chevron(color(grey), 6px, left, 2px);
+        @include chevron(color(neutral, dark), 6px, left, 2px);
     }
     li:last-child a::after {
-        @include chevron(color(grey), 6px, right, 2px);
+        @include chevron(color(neutral, dark), 6px, right, 2px);
     }
 }