fix(colours, chevron and display h1 updates): - colour renaming and u…

…pdates TDS-39, TDS-40
telus · Jun 20, 2017 · bf33db5 · bf33db5
1 parent 4792505
commit bf33db5
Show file tree

Hide file tree

Showing 13 changed files with 109 additions and 170 deletions.
diff --git a/core/scss/elements/_buttons.scss b/core/scss/elements/_buttons.scss
@@ -93,7 +93,7 @@ a.button {
         padding-left: 4px;
       }
 
-      @include chevron-links($color-japanese-laurel);
+      @include chevron-links($color-primary);
     }
   }
 

diff --git a/core/scss/elements/_forms.scss b/core/scss/elements/_forms.scss
@@ -10,7 +10,7 @@ $form-field-bottom-spacing: 18px;
 input:not([type='radio']),
 textarea,
 select {
-  border: 1px solid $color-raven;
+  border: 1px solid $color-shuttle-grey;
   border-radius: $form-field-border-radius;
   box-shadow: 0 1px 8px rgba(0, 0, 0, .05);
   color: $color-shark;
@@ -33,7 +33,7 @@ select {
   }
 
   .field--success & {
-    border-color: $color-japanese-laurel;
+    border-color: $color-primary;
   }
 
   &:focus {
@@ -49,7 +49,7 @@ input,
 select {
   &:disabled {
     background-color: $color-athens-grey;
-    border-color: $color-raven;
+    border-color: $color-shuttle-grey;
   }
 }
 
@@ -151,7 +151,7 @@ textarea {
 
     &--disabled {
       &::after {
-        color: $color-raven;
+        color: $color-shuttle-grey;
       }
     }
 
@@ -257,7 +257,7 @@ $radio-checked-stroke-size: 6px;
   &:active {
     & + .choice__text {
       &::before {
-        border-color: $color-japanese-laurel;
+        border-color: $color-primary;
       }
     }
   }

diff --git a/core/scss/foundation/_global.scss b/core/scss/foundation/_global.scss
@@ -18,7 +18,7 @@
 }
 
 html {
-  color: $color-raven;
+  color: $color-shuttle-grey;
   font-family: $font-telus;
   font-weight: 400;
   font-kerning: normal;

diff --git a/core/scss/foundation/_links.scss b/core/scss/foundation/_links.scss
@@ -34,7 +34,7 @@
   &--primary {
     &:link,
     &:visited {
-      color: $color-japanese-laurel;
+      color: $color-primary;
     }
 
     &:hover {
@@ -44,14 +44,14 @@
     &.link--descent {
       &:link,
       &:visited {
-        @include add-skinny-underline($color-japanese-laurel, $color-athens-grey);
+        @include add-skinny-underline($color-primary, $color-athens-grey);
       }
     }
 
     &.link--inverted.link--descent {
       &:link,
       &:visited {
-        @include add-skinny-underline($color-athens-grey, $color-japanese-laurel);
+        @include add-skinny-underline($color-athens-grey, $color-primary);
       }
     }
   }
@@ -99,7 +99,7 @@
   &--primary {
     &:link,
     &:visited {
-      @include chevron-links($color-japanese-laurel);
+      @include chevron-links($color-primary);
     }
   }
 

diff --git a/core/scss/foundation/_typography.scss b/core/scss/foundation/_typography.scss
@@ -16,7 +16,7 @@ body {
 //
 // Headings
 //
-.h1--display {
+.display-heading-1 {
   color: $color-secondary;
   font-size: rem(44px);
   line-height: 1.14; // 48px

diff --git a/core/scss/settings/_variables.scss b/core/scss/settings/_variables.scss
@@ -3,17 +3,33 @@
 //
 // Colours
 //
+$color-accessible-green: #248700;
+
+@warn "$color-forest-green token has been deprecated as of 0.16.2, new name for this colour is $color-accessible-green";
+$color-forest-green: $color-accessible-green;
+
+@warn "$color-japanese-laurel token has been deprecated as of 0.16.2, please use $color-forest-green";
+$color-japanese-laurel: $color-forest-green; // deprecated as of 0.16.2
 
-$color-forest-green: #248700;
-$color-japanese-laurel: #177a00;
 $color-telus-green: #6c0;
 $color-panache: #f4f9f2;
-$color-raven: #6a6e74;
+
 $color-shuttle-grey: #54595f;
+
+@warn "$color-raven token has been deprecated as of 0.16.2, please use $color-shuttle-grey";
+$color-raven: $color-shuttle-grey;
+
 $color-shark: #2a2c2e;
 $color-athens-grey: #f7f7f8;
-$color-grape: #4b286d;
+
+$color-telus-purple: #4b286d;
+
+@warn "$color-grape token has been deprecated as of 0.16.2, new name for this colour is $color-telus-purple";
+$color-grape: $color-telus-purple;
+
+@warn "$color-royal-purple token has been deprecated as of 0.16.2";
 $color-royal-purple: #6e3ba1;
+
 $color-white-lilac: #f2eff4;
 $color-cardinal: #c12335;
 $color-lavender-blush: #fff6f8;
@@ -25,16 +41,16 @@ $color-gainsboro: #d8d8d8;
 $color-link: $color-shuttle-grey;
 $color-text: $color-shark;
 
+// Tokens
+$color-primary: $color-forest-green;
+$color-secondary: $color-telus-purple;
+
 // Icon colors
-$color-icon-primary: $color-japanese-laurel;
-$color-icon-secondary: $color-grape;
+$color-icon-primary: $color-primary;
+$color-icon-secondary: $color-secondary;
 $color-icon-disabled: $color-shuttle-grey;
 $color-icon-error: $color-cardinal;
 
-// Background colours
-$color-primary: $color-forest-green;
-$color-secondary: $color-grape;
-
 //
 // Typography
 //

diff --git a/core/scss/utility/_mixins.scss b/core/scss/utility/_mixins.scss
@@ -192,7 +192,7 @@
     color: inherit;
     transition: color .2s, left .3s;
     left: -2px;
-    margin-left: 2px;
+    margin-left: 10px;
   }
 
   // Deprecated 0.16.0

diff --git a/docs/src/html/3-Foundational-Elements/0-buttons.md b/docs/src/html/3-Foundational-Elements/0-buttons.md
@@ -161,8 +161,7 @@ _Note_: The mobile button width is fluid and stretches to cover all columns curr
 The `button--link` class creates an element which behaves like a button, but looks like a link.
 
 <div>
-    <a class="button button--secondary button--link">Link button
-    </a>
+    <a class="button button--secondary button--link">Link button</a>
 </div>
 
 ```html

diff --git a/docs/src/html/3-Foundational-Elements/1-links.md b/docs/src/html/3-Foundational-Elements/1-links.md
@@ -128,17 +128,11 @@ You'll notice the text links include a `link--descent` modifier. This class crea
 
 ### Primary Color Chevron Links
 
-<a href="#" class="chevron-link--primary">
-    Large/link
-</a>
+<a href="#" class="chevron-link--primary">Large/link</a>
 
-<a href="#" class="text--medium chevron-link--primary">
-    Medium/link
-</a>
+<a href="#" class="text--medium chevron-link--primary">Medium/link</a>
 
-<a href="#" class="text--small chevron-link--primary">
-    Small/link
-</a>
+<a href="#" class="text--small chevron-link--primary">Small/link</a>
 
 
 ```html
@@ -157,17 +151,11 @@ You'll notice the text links include a `link--descent` modifier. This class crea
 
 ### Secondary Color Chevron Links
 
-<a href="#" class="chevron-link--secondary">
-    Large/link
-</a>
+<a href="#" class="chevron-link--secondary">Large/link</a>
 
-<a href="#" class="text--medium chevron-link--secondary">
-    Medium/link
-</a>
+<a href="#" class="text--medium chevron-link--secondary">Medium/link</a>
 
-<a href="#" class="text--small chevron-link--secondary">
-    Small/link
-</a>
+<a href="#" class="text--small chevron-link--secondary">Small/link</a>
 
 
 ```html
@@ -187,31 +175,19 @@ You'll notice the text links include a `link--descent` modifier. This class crea
 ### Inverted chevrons
 
 <div class="example example--inverted example--primary">
-  <a href="#" class="chevron-link chevron-link--inverted">
-    Large/link
-  </a>
+  <a href="#" class="chevron-link chevron-link--inverted">Large/link</a>
   <br>
-  <a href="#" class="text--medium chevron-link chevron-link--inverted">
-    Medium/link
-  </a>
+  <a href="#" class="text--medium chevron-link chevron-link--inverted">Medium/link</a>
   <br>
-  <a href="#" class="text--small chevron-link chevron-link--inverted">
-    Small/link
-  </a>
+  <a href="#" class="text--small chevron-link chevron-link--inverted">Small/link</a>
 </div>
 
 <div class="example example--inverted example--secondary">
-  <a href="#" class="chevron-link chevron-link--inverted">
-    Large/link
-  </a>
+  <a href="#" class="chevron-link chevron-link--inverted">Large/link</a>
   <br>
-  <a href="#" class="text--medium chevron-link chevron-link--inverted">
-    Medium/link
-  </a>
+  <a href="#" class="text--medium chevron-link chevron-link--inverted">Medium/link</a>
   <br>
-  <a href="#" class="text--small chevron-link chevron-link--inverted">
-    Small/link
-  </a>
+  <a href="#" class="text--small chevron-link chevron-link--inverted">Small/link</a>
 </div>
 
 ```html