Change main font color through Theme Editor

Fixes: CNVS-30709 Test plan: - Clear cache / restart Canvas - Go to Theme Editor in your Canvas instance - You should now see a new field for Main Text Color, as well as some new additions to the test page on the right of the Theme Editor sidebar: http://screencast.com/t/JrBJ0FgOxbA - Updating the value of this field with a new HEX color should change the main font color of Canvas, as well as the secondary links (like the cog dropdown) that also use the main text color. - I did a find-and-replace for `color: $ic-color-dark` --> `color: $ic-font-color-dark`, which is why there are so many files in this commit. Because $ic-color-dark has the same HEX color as $ic-font-color-dark, however, there should be zero impact to all these changes. They were just done so users can now theme the colors via Theme Editor. Change-Id: Idabfa6649ecf40e439df4a8672529ea6dbd7fa01 Reviewed-on: https://gerrit.instructure.com/89934 Tested-by: Jenkins Reviewed-by: Stephen Jensen <[email protected]> Reviewed-by: Ryan Shaw <[email protected]> QA-Review: Jeremy Putnam <[email protected]> Product-Review: Chris Hart <[email protected]>
darocha · Sep 16, 2016 · 6bce06e · 6bce06e
1 parent 641fed2
commit 6bce06e
Show file tree

Hide file tree

Showing 41 changed files with 202 additions and 106 deletions.
diff --git a/app/stylesheets/base/_layout.scss b/app/stylesheets/base/_layout.scss
@@ -3,8 +3,8 @@
 $body-bg-color:                     $ic-color-light;
 $embedded-bg:                       $ic-color-light;
 $layout-modal-bg:                   $ic-color-light;
-$layout-modal-font-color:           $ic-color-dark;
-$footer-links-color:                lighten($ic-color-dark, 16);
+$layout-modal-font-color:           $ic-font-color-dark;
+$footer-links-color:                lighten($ic-font-color-dark, 16);
 $footer-links-border-color:         lighten($ic-color-dark, 16);
 
 body:not(.full-width) .ic-app-container {

diff --git a/app/stylesheets/base/_variables.scss b/app/stylesheets/base/_variables.scss
@@ -181,38 +181,41 @@ $ic-border-light:         $ic-border-color;
 $ic-border-dark:          #A5AFB5;
 @if $use_high_contrast {  $ic-border-dark: #556572; }
 
+//=====================
+// Text-color variables
+//=====================
+$ic-font-color-light:     $ic-color-light;
+$ic-font-color-dark:      $ic-brand-font-color-dark;
+@if $use_high_contrast { $ic-font-color-dark: $ic-color-dark; }
+$ic-font-color--subdued:  lighten($ic-font-color-dark, 15);
+@if $use_high_contrast { $ic-font-color--subdued:  $ic-color-medium-darker; }
+$ic-hint-text:            lighten($ic-font-color-dark, 30);
+@if $use_high_contrast { $ic-hint-text: $ic-color-medium; }
+
+// textColor is a deprecated Bootstrap 2 variable. Please use $ic-font-color-dark!
+$textColor:               $ic-font-color-dark; // deprecated - do not use
+
 //=============================
 // Link-color-related variables
 //=============================
 
 @if $use_high_contrast {    $ic-link-color: #0073A7; }
 $ic-link-color-hover:       darken($ic-link-color, 10%);
 
-$ic-icon-link-color-hover: lighten($ic-color-dark, 15%);
+$ic-icon-link-color-hover: lighten($ic-font-color-dark, 15%);
 @if $use_high_contrast {
-$ic-icon-link-color-hover: $ic-color-dark;
+$ic-icon-link-color-hover: $ic-font-color-dark;
 }
 
-$ic-icon-link-color:       lighten($ic-color-dark, 30%);
+$ic-icon-link-color:       lighten($ic-font-color-dark, 30%);
 @if $use_high_contrast {
-$ic-icon-link-color:       lighten($ic-color-dark, 12%);
+$ic-icon-link-color:       lighten($ic-font-color-dark, 12%);
 }
 
 // linkColor is a deprecated Bootstrap 2 variable. Please use $ic-link-color!
 $linkColor:                 $ic-link-color; // deprecated - do not use
 $linkColorHover:            $ic-link-color-hover; // deprecated - do not use
 
-//=====================
-// Text-color variables
-//=====================
-$ic-font-color-light:     $ic-color-light;
-$ic-font-color-dark:      $ic-color-dark;
-$ic-font-color--subdued:  $ic-color-medium-darker;
-$ic-hint-text:            $ic-color-medium;
-
-// textColor is a deprecated Bootstrap 2 variable. Please use $ic-font-color-dark!
-$textColor:               $ic-font-color-dark; // deprecated - do not use
-
 //=====================
 // Course Nav Variables
 //=====================

diff --git a/app/stylesheets/brandable_variables.json b/app/stylesheets/brandable_variables.json
@@ -5,6 +5,14 @@
     "variable_name": "ic-brand-primary",
     "type": "color",
     "default": "#008EE2"
+  },{
+    "variable_name": "ic-brand-font-color-dark",
+    "type": "color",
+    "default": "#2D3B45"
+  },{
+    "variable_name": "ic-link-color",
+    "type": "color",
+    "default": "#008EE2"
   },{
     "variable_name": "ic-brand-button--primary-bgd",
     "type": "color",
@@ -16,15 +24,11 @@
   },{
     "variable_name": "ic-brand-button--secondary-bgd",
     "type": "color",
-    "default": "#333333"
+    "default": "#2D3B45"
   },{
     "variable_name": "ic-brand-button--secondary-text",
     "type": "color",
     "default": "#ffffff"
-  },{
-    "variable_name": "ic-link-color",
-    "type": "color",
-    "default": "#008EE2"
   }
 ]},
 {

diff --git a/app/stylesheets/bundles/account_course_user_search.scss b/app/stylesheets/bundles/account_course_user_search.scss
@@ -20,7 +20,7 @@
 }
 
 [role=columnheader] a{
-  color: $ic-color-dark;
+  color: $ic-font-color-dark;
 }
 
 .padding-none {
@@ -55,7 +55,7 @@
       a:visited,
       a:hover {
         text-decoration: none;
-        color: $ic-color-dark;
+        color: $ic-font-color-dark;
       }
     }
   }

diff --git a/app/stylesheets/bundles/alerts.scss b/app/stylesheets/bundles/alerts.scss
@@ -21,19 +21,19 @@
   }
   .labelled_region{
     margin-bottom: 15px;
-    color: $ic-color-dark;
+    color: $ic-font-color-dark;
   }
   .links {
     float: right;
     opacity: 0.5;
-    color: $ic-color-dark;
+    color: $ic-font-color-dark;
     &:hover {
       opacity: 1.0;
     }
   }
   .repetition_group {
     margin-left: 40px;
-    color: $ic-color-dark;
+    color: $ic-font-color-dark;
     font-weight: normal;
   }
   li {

diff --git a/app/stylesheets/bundles/discussions.scss b/app/stylesheets/bundles/discussions.scss
@@ -236,7 +236,7 @@ $discussion-dark-text: $ic-color-dark;
 
 .discussion-reply-action, .discussion-rate-action {
 
-  color: $ic-color-dark;
+  color: $ic-font-color-dark;
   text-decoration: none;
 
   &:hover, &:focus {
@@ -258,7 +258,7 @@ $discussion-dark-text: $ic-color-dark;
 
 .discussion-rating {
   @if $use_high_contrast { color: #666; }
-  @else {color: $ic-color-dark;}
+  @else {color: $ic-font-color-dark;}
 }
 
 .entry, .discussion_entry {
@@ -499,10 +499,10 @@ $discussion-dark-text: $ic-color-dark;
   cursor: text;
   border: 1px solid #d4d5d7;
   margin: 15px 0;
-  @if $use_high_contrast { color: $ic-color-dark; }
+
+  @if $use_high_contrast { color: $ic-font-color-dark; }
   transition: border-color 0.2s;
   padding: $ic-sp/2 $ic-sp;
-
   &:hover, &:focus {
     color: #444;
     text-decoration: none;

diff --git a/app/stylesheets/bundles/discussions_list.scss b/app/stylesheets/bundles/discussions_list.scss
@@ -1,7 +1,7 @@
 @import "base/environment";
 @import "pages/shared/move_dialog";
 
-$announcements_disscussion-summary-color: $ic-color-dark;
+$announcements_disscussion-summary-color: $ic-font-color-dark;
 
 .discussionTopicIndexList {
   .discussion-actions {

diff --git a/app/stylesheets/bundles/gradebook_history.scss b/app/stylesheets/bundles/gradebook_history.scss
@@ -30,7 +30,7 @@
       margin: $ic-sp/2;
       border: none;
       background: transparent;
-      color: $ic-color-dark;
+      color: $ic-font-color-dark;
       text-shadow: none;
       box-shadow: none;
       &::after {

diff --git a/app/stylesheets/bundles/grading_period_sets.scss b/app/stylesheets/bundles/grading_period_sets.scss
@@ -91,7 +91,7 @@
 }
 
 .GradingPeriodSet__toggle {
-  color: $ic-color-dark;
+  color: $ic-font-color-dark;
 }
 
 // GRADING PERIOD LIST

diff --git a/app/stylesheets/bundles/learning_outcomes.scss b/app/stylesheets/bundles/learning_outcomes.scss
@@ -145,7 +145,7 @@ ul.outcome-level {
     &.selected {
       a {
         background-color: $ic-bg-light-primary;
-        color: $ic-color-dark;
+        color: $ic-font-color-dark;
         position: relative;
         &::before {
           // adds blue border

diff --git a/app/stylesheets/bundles/profile_edit.scss b/app/stylesheets/bundles/profile_edit.scss
@@ -23,7 +23,7 @@
   }
   .data_description {
     font-size: 0.8em;
-    color: $ic-color-dark;
+    color: $ic-font-color-dark;
   }
 }
 

diff --git a/app/stylesheets/bundles/speed_grader.scss b/app/stylesheets/bundles/speed_grader.scss
@@ -430,7 +430,7 @@ $icon-size: 1.4rem;
         color: lighten($ic-color-dark, 25%);
       }
       &:hover, &:focus {
-        color: $ic-color-dark;
+        color: $ic-font-color-dark;
       }
     }
   }
@@ -665,7 +665,7 @@ body .ui-selectmenu-dropdown:hover .ui-selectmenu-icon, body .ui-state-active .u
 }
 
 .ui-selectmenu-item-header {
-  color: $ic-color-dark;
+  color: $ic-font-color-dark;
 
   .not_submitted & {
     @if $use_high_contrast {
@@ -790,7 +790,7 @@ body .ui-selectmenu-dropdown:hover .ui-selectmenu-icon, body .ui-state-active .u
     background: url("/images/arrow_left.png") no-repeat center left;
     overflow: hidden;
     white-space: nowrap;
-    color: $ic-color-dark;
+    color: $ic-font-color-dark;
     font-weight: bold;
     @include fontSize(12px);
   }
@@ -814,7 +814,7 @@ body .ui-selectmenu-dropdown:hover .ui-selectmenu-icon, body .ui-state-active .u
 
       a {
         line-height: 24px;
-        color: $ic-color-dark;
+        color: $ic-font-color-dark;
         &.selected {
           font-weight: bold;
         }

diff --git a/app/stylesheets/bundles/statistics.scss b/app/stylesheets/bundles/statistics.scss
@@ -1,3 +1,5 @@
+@import 'base/environment';
+
 ul.item_list {
   list-style-type: none;
   padding: 0;
@@ -11,7 +13,7 @@ ul.item_list {
     }
     div.sub_header {
       font-size: 0.8em;
-      color: #888;
+      color: $ic-font-color--subdued;
       margin-top: -5px;
       margin-bottom: 0.5em;
       margin-left: 5px;

diff --git a/app/stylesheets/bundles/theme_editor.scss b/app/stylesheets/bundles/theme_editor.scss
@@ -218,7 +218,7 @@ $te-footer-height: 72px;
 
 .Theme__editor-upload-overrides {
   background-color: $te-content-bgd;
-  color: $ic-color-dark;
+  color: $ic-font-color-dark;
 
   .Theme__editor-upload-overrides_header {
     font-weight: 300;
@@ -305,7 +305,7 @@ $te-footer-height: 72px;
     background: $te-bgd;
     font-weight: 300;
     border-radius: 0;
-    color: $ic-color-dark;
+    color: $ic-font-color-dark;
     &:not(:first-child) {
       border-top: 1px solid $te-border-color;
     }
@@ -319,7 +319,7 @@ $te-footer-height: 72px;
       border-radius: 0;
       padding: 8px $ic-sp;
       margin-top: 0;
-      color: $ic-color-dark;
+      color: $ic-font-color-dark;
       .Theme__editor-accordion-icon {
         transform: rotate(-90deg);
       }
@@ -328,7 +328,7 @@ $te-footer-height: 72px;
       }
       // Link, Link hover & Focus accordion state
       a {
-        color: $ic-color-dark;
+        color: $ic-font-color-dark;
         transition: color 0.2s;
         border-radius: 0;
         transition: padding 0.2s;
@@ -377,7 +377,7 @@ $te-footer-height: 72px;
         &.ui-state-hover,
         &.ui-state-hover a:hover,
         &.ui-state-hover a {
-          color: $ic-color-dark;
+          color: $ic-font-color-dark;
         }
         &.ui-state-focus {
           a, a:hover {
@@ -386,7 +386,7 @@ $te-footer-height: 72px;
             @if $use_high_contrast {
               box-shadow: inset 0 0 0 2px $te-content-bgd;
             }
-            color: $ic-color-dark;
+            color: $ic-font-color-dark;
           }
         }
         .Theme__editor-accordion-icon {
@@ -432,7 +432,7 @@ $te-footer-height: 72px;
   padding: 0;
   margin: 0;
   font-size: $h2-font-size;
-  color: $ic-color-dark;
+  color: $ic-font-color-dark;
 }
 .Theme__editor-color-block {
   display: flex;
@@ -451,7 +451,7 @@ $te-footer-height: 72px;
     height: $te-input-height;
     margin: 0 $ic-sp 0 0;
     padding: 0 $ic-sp/2;
-    color: $ic-color-dark;
+    color: $ic-font-color-dark;
     border: 1px solid $ic-color-neutral;
     border-radius: 3px;
   }
@@ -506,14 +506,14 @@ $te-footer-height: 72px;
   }
   .Theme__editor-upload_title {
     font-size: $h2-font-size;
-    color: $ic-color-dark;
+    color: $ic-font-color-dark;
     margin: 0;
   }
   .Theme__editor-image_upload {
     flex: 100%;
   }
   .Theme__editor-upload_restrictions {
-    color: $ic-color-dark;
+    color: $ic-font-color-dark;
     font-style: italic;
     display: block;
     @include fontSize(12px);

diff --git a/app/stylesheets/bundles/user_notes.scss b/app/stylesheets/bundles/user_notes.scss
@@ -30,7 +30,7 @@
         padding-left: 0px;
         padding-bottom: 5px;
         @include fontSize(16px);
-        color: $ic-color-dark;
+        color: $ic-font-color-dark;
         font-weight: normal;
       }
       .sub_title {
@@ -44,7 +44,7 @@
     .delete_user_note_link {
       position: relative;
       top: 3px;
-      color: $ic-color-dark;
+      color: $ic-font-color-dark;
     }
 
     .delete_user_note_link:hover {

diff --git a/app/stylesheets/bundles/ways_to_contact.scss b/app/stylesheets/bundles/ways_to_contact.scss
@@ -39,7 +39,7 @@
     display: none;
 }
 #right-side table.channel_list tr.channel.unconfirmed > td a {
-  color: $ic-color-dark;
+  color: $ic-font-color-dark;
   font-style: italic;
 }
 .email_meta {
@@ -61,7 +61,7 @@
 }
 #right-side p.email_channel {
   margin: 0;
-  color: $ic-color-dark;
+  color: $ic-font-color-dark;
 }
 .intl_rates_may_apply {
   font-size: 0.8em