fontcustom_canvas 0.1.0 → 0.1.2

data/public/_variables.scss

@@ -0,0 +1,298 @@
+/*
+ * Copyright (C) 2014 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/// TOC
+//============================================================================================
+//
+// - Canvas Brand Variants
+// - Custom Branding
+// - Canvas LMS Color Sheet
+// - Canvas Theme Color Variables
+//
+//============================================================================================
+
+// This imports the variables needed to support accessibility ($use_high_contrast)
+// You can also use the sass function that helps ensure color contrast ratio.
+// Look in /sass-functions/ for more information on how that is used
+@import "variant_variables";
+@import 'https://fonts.googleapis.com/css?family=Abel|Abril+Fatface|Acme|Alegreya|Alegreya+Sans|Anton|Archivo|Archivo+Black|Archivo+Narrow|Arimo|Arvo|Asap|Asap+Condensed|Bitter|Bowlby+One+SC|Bree+Serif|Cabin|Cairo|Catamaran|Crete+Round|Crimson+Text|Cuprum|Dancing+Script|Dosis|Droid+Sans|Droid+Serif|EB+Garamond|Exo|Exo+2|Faustina|Fira+Sans|Fjalla+One|Francois+One|Gloria+Hallelujah|Hind|Inconsolata|Indie+Flower|Josefin+Sans|Julee|Karla|Lato|Libre+Baskerville|Libre+Franklin|Lobster|Lora|Mada|Manuale|Maven+Pro|Merriweather|Merriweather+Sans|Montserrat|Montserrat+Subrayada|Mukta+Vaani|Muli|Noto+Sans|Noto+Serif|Nunito|Open+Sans|Open+Sans+Condensed:300|Oswald|Oxygen|PT+Sans|PT+Sans+Caption|PT+Sans+Narrow|PT+Serif|Pacifico|Passion+One|Pathway+Gothic+One|Play|Playfair+Display|Poppins|Questrial|Quicksand|Raleway|Roboto|Roboto+Condensed|Roboto+Mono|Roboto+Slab|Ropa+Sans|Rubik|Saira|Saira+Condensed|Saira+Extra+Condensed|Saira+Semi+Condensed|Sedgwick+Ave|Sedgwick+Ave+Display|Shadows+Into+Light|Signika|Slabo+27px|Source+Code+Pro|Source+Sans+Pro|Spectral|Titillium+Web|Ubuntu|Ubuntu+Condensed|Varela+Round|Vollkorn|Work+Sans|Yanone+Kaffeesatz|Zilla+Slab|Zilla+Slab+Highlight|Nerko+One|Xanh+Mono|Texturina|Lobster|Dancing+Script|Architects+Daughter|Modak|Amatic+SC';
+
+
+//=======================
+// Canvas LMS Color Sheet
+//=======================
+// Our color variables in Canvas are simple and easy to integrate
+// We use a two-tiered variable process with Canvas color variables.
+// When you need to use a color, please create a functional variable name
+// and use the color variable name of your choosing. See examples below.
+
+// These "@if $use_high_contrast ..." conditions need to be run before we load
+// the autogenerated brandable variables because we are setting up the correct
+// "default value" for it to use.
+
+//====================================
+// Abstract Color Variables
+//====================================
+$electric:                  #008EE2; // blue
+@if $use_high_contrast {    $electric: #0770A3; }
+$shamrock:                  #00AC18; // green
+@if $use_high_contrast {    $shamrock: #127A1B; }
+$barney:                    #BF32A4; // magenta
+@if $use_high_contrast {    $barney: #B8309E; }
+$crimson:                   #EE0612; // red
+@if $use_high_contrast {    $crimson: #D01A19; }
+$fire:                      #FC5E13; // orange
+@if $use_high_contrast {    $fire: #C23C0D; }
+
+//====================================
+// Default Functional Swatches
+//====================================
+$ic-color-success:          $shamrock;
+$ic-color-action:           $barney;
+$ic-color-danger:           $crimson;
+$ic-color-alert:            $fire;
+
+//====================================
+// Gray-ish Scale
+//====================================
+
+$ic-color-dark:              #2D3B45; // licorice
+$ic-color-medium-darker:     #394B58; // oxford
+$ic-color-medium:            #73818C; // slate
+@if $use_high_contrast {     $ic-color-medium: #556572; }
+$ic-color-medium-lighter:    #8B969E; // ash
+@if $use_high_contrast {     $ic-color-medium-lighter: #556572; }
+$heather:                    #A5AFB5; // heather
+@if $use_high_contrast {     $ic-border-dark: #556572; }
+$tiara:                      #C7CDD1; // tiara
+@if $use_high_contrast {     $ic-border-color: #667887; }
+$ic-color-medium-light:      #F5F5F5; // porcelain
+@if $use_high_contrast {     $ic-color-medium-light: #FFFFFF; }
+$ic-color-light:             #FFFFFF; // white
+
+
+//================================
+// Global light background colors
+//================================
+// These background color variables can be used on hover states or focus states
+// and meet our contrast needs when used with our main color variables
+
+$ic-bg-light-neutral:       $ic-color-medium-light;
+$ic-bg-light-neutral-text:  #394B58;
+@if $use_high_contrast { $ic-bg-light-neutral: #EBEDEE; }
+$ic-bg-light-primary:       #E5F2F8;
+@if $use_high_contrast { $ic-bg-light-primary: #E6F1F7;}
+$ic-bg-light-primary-text:  #0078BD;
+@if $use_high_contrast { $ic-bg-light-primary-text: #0770A3; }
+$ic-bg-light-success:       #E8F6E9;
+@if $use_high_contrast { $ic-bg-light-success: #E8F2E9; }
+$ic-bg-light-success-text:  #008A13;
+@if $use_high_contrast { $ic-bg-light-success-text: $ic-color-success; }
+$ic-bg-light-alert:         #FBEDE7;
+@if $use_high_contrast { $ic-bg-light-alert: #F9ECE8; }
+$ic-bg-light-alert-text:    #D14604;
+@if $use_high_contrast { $ic-bg-light-alert-text: $ic-color-alert; }
+$ic-bg-light-danger:        #FCE8E7;
+@if $use_high_contrast { $ic-bg-light-danger: #FBE8E8; }
+$ic-bg-light-danger-text:   #EE0612;
+@if $use_high_contrast { $ic-bg-light-danger-text: $ic-color-danger; }
+
+//====================================
+// DEPRECATED COLORS - DO NOT USE
+//====================================
+
+$ic-color-neutral:       hsl(0,0, 90%);
+$gray-darker:            $ic-color-dark;
+$gray-dark:              $ic-color-medium-darker;
+$gray:                   $ic-color-medium;
+$gray-light:             $ic-color-medium-light;
+$gray-lighter:           $ic-color-light;
+
+//==================
+// Layout Variables
+//==================
+$right_side_width:          286px;
+$right_side_margin:         13px;
+$left_side_width:           175px;
+$min_main_width:            510px;
+$max_main_width:            1100px;
+$ic-sp:                     12px;
+$ic-border-radius:          $ic-sp/2;
+$spacing-width:             20px; // TODO - would be nice to phase this one out for $ic-sp
+$borderRadius:              4px;
+$contentBoxPadding:         8px;
+
+//============================
+// Typography Variables
+//============================
+
+// Placeholder for old bootstrap variable; deprecated, but still in use some places
+// Once all of those have been adjusted to use the new variable we can get rid of this
+$ic-line-height: 1.5;
+
+$ic-font-family: var(--ic-brand-font-family, "Lato Extended", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif);
+$ic-font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
+
+$ic-font-weight: var(--ic-brand-font-weight, normal); // we can phase this var out now we're on Lato
+$ic-font-weight-bold: bold;
+
+
+$ic-font-size: var(--ic-brand-font-size, 16px);
+
+$ic-font-size--xxlarge:   $ic-font-size + 22;
+$ic-font-size--xlarge:   $ic-font-size + 16;
+$ic-font-size--large:    $ic-font-size + 10;
+$ic-font-size--medium:   $ic-font-size + 4;
+$ic-font-size--small:    $ic-font-size;
+$ic-font-size--xsmall:   $ic-font-size - 2;
+
+/* Legacy variables. Discontinue to use these: */
+$h1-font-size:  23px;
+$h2-font-size:  14px;
+$h3-font-size:  19px;
+
+//============================
+// Layout Functional Variables
+//============================
+$ic-body-background-color:          lighten($ic-color-neutral, 4);
+$ic-content-background-color:       $ic-color-light;
+$ic-content-padding:                15px;
+$ic-header-background:              #34444f;
+$ic-header-primary-width:           100px;
+$ic-header-primary-expanded-width:  $ic-sp*15;
+$ic-right-side-width:               $ic-sp*24;
+$ic-breadcrumbs-height:             4.5rem;
+
+//============================
+// List Functional Variables
+//============================
+$ic-list-item-background--hover:      #eef7ff;
+$ic-list-item-background--selected:   #d9edf9;
+
+//=====================
+// Global border colors
+//=====================
+$ic-border-color:         $tiara;
+// If it's a light border, it should be this color.
+$ic-border-light:         $tiara;
+// If it's a dark border, it should be this color.
+// the most often use case for this is when the line is
+// dashed on a light gray background so it visually
+// looks the same as the outer border
+$ic-border-dark:          $heather;
+
+//=====================
+// Text-color variables
+//=====================
+$ic-font-color-light:     $ic-color-light;
+$ic-font-color-dark:      var(--ic-brand-font-color-dark);
+@if $use_high_contrast { $ic-font-color-dark: $ic-color-dark; }
+$ic-font-color--subdued:  var(--ic-brand-font-color-dark-lightened-15);
+@if $use_high_contrast { $ic-font-color--subdued:  $ic-color-medium-darker; }
+$ic-hint-text:            var(--ic-brand-font-color-dark-lightened-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
+//=============================
+$ic-icon-link-color-hover: var(--ic-brand-font-color-dark-lightened-15);
+@if $use_high_contrast {
+$ic-icon-link-color-hover: $ic-font-color-dark;
+}
+
+$ic-icon-link-color:       var(--ic-brand-font-color-dark-lightened-30);
+@if $use_high_contrast {
+$ic-icon-link-color:       lighten($ic-font-color-dark, 12%);
+}
+
+// linkColor is a deprecated Bootstrap 2 variable
+$linkColor:                 var(--ic-link-color); // deprecated - do not use
+$linkColorHover:            var(--ic-link-color-darkened-10); // deprecated - do not use
+
+//=====================
+// Course Nav Variables
+//=====================
+// These variables control the active and hover
+// states we have on the global left-hand sidenav in Canvas
+$ic-course-sidenav_list-item--bg-color:               $ic-color-light;
+@if $use_high_contrast {
+$ic-course-sidenav_list-item--bg-color:               $ic-color-dark;
+}
+$ic-course-sidenav_list-item--active-font-color:      var(--ic-brand-primary);
+@if $use_high_contrast {
+$ic-course-sidenav_list-item--active-font-color:      $ic-color-light;
+}
+$ic-course-sidenav_list-item--inactive-font-color:    darken($ic-color-neutral, 12);
+
+//===============
+// Icon Variables
+//===============
+//To be used for any disabled icon states
+$ic-color-icon-disabled:        darken($ic-color-neutral, 40);
+@if $use_high_contrast {
+$ic-color-icon-disabled:        darken($ic-color-neutral, 60);
+}
+$ic-dim-helper-text:            darken($ic-color-neutral, 45);
+@if $use_high_contrast {
+$ic-dim-helper-text:            darken($ic-color-neutral, 55);
+}
+
+//==========================================================
+// Legacy Vendor Variables (please do not touch these files)
+//==========================================================
+// We will be phasing these out
+@import 'vendor/bootstrap/variables';
+@import 'vendor/jqueryui/variables';
+
+//==============================
+// Legacy Global Color Variables - DO NOT USE
+//==============================
+// These variables we have reworked to use our canvas color variables for the
+// new UI, however they will need to be evaluated on a case-by-case basis of
+// their use in Canvas in order to properly phase them out
+// Nothing changes in the legacy UI.
+
+$lightBackground:               $ic-color-medium-light;
+$wellBackground:                $ic-color-light;
+$altBG:                         $ic-bg-light-neutral;
+$borderColor:                   $ic-border-light;
+$activeBG:                      $ic-bg-light-primary;
+
+//=====================
+// Transition Variables
+//=====================
+// This is a pleasing transition that can be used when you need
+// a transition timing function
+$ic-transition: cubic-bezier(0,1,0.5,1);
+
+//=======================
+// Form-related variables
+//=======================
+$ic-horizontal-form-offset:       $ic-sp*16;
+$ic-label-line-height:            1.3;
+$ic-radio-checkbox-left-offset:   22px;
+
+
+// override bootstrap green buttons
+$green: #34832b !default;
+
+// override default opacity for disabled classes
+$ic-opacity-disabled: 0.6

data/public/brandable_css.rb

@@ -0,0 +1,374 @@
+# frozen_string_literal: true
+
+#
+# Copyright (C) 2015 - present Instructure, Inc.
+#
+# This file is part of Canvas.
+#
+# Canvas is free software: you can redistribute it and/or modify it under
+# the terms of the GNU Affero General Public License as published by the Free
+# Software Foundation, version 3 of the License.
+#
+# Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+# A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+# details.
+#
+# You should have received a copy of the GNU Affero General Public License along
+# with this program. If not, see <http://www.gnu.org/licenses/>.
+
+require 'pathname'
+require 'yaml'
+require 'open3'
+
+module BrandableCSS
+  APP_ROOT = defined?(Rails) && Rails.root || Pathname.pwd
+  CONFIG = YAML.load_file(APP_ROOT.join('config/brandable_css.yml')).freeze
+  BRANDABLE_VARIABLES = JSON.parse(File.read(APP_ROOT.join(CONFIG['paths']['brandable_variables_json']))).freeze
+  MIGRATION_NAME = 'RegenerateBrandFilesBasedOnNewDefaults'.freeze
+
+  use_compressed = (defined?(Rails) && Rails.env.production?) || (ENV['RAILS_ENV'] == 'production')
+  SASS_STYLE = ENV['SASS_STYLE'] || ((use_compressed ? 'compressed' : 'nested')).freeze
+
+  VARIABLE_HUMAN_NAMES = {
+    "ic-brand-primary" => lambda { I18n.t("Primary Brand Color") },
+    "ic-brand-font-color-dark" => lambda { I18n.t("Main Text Color") },
+    "ic-brand-font-family" => lambda { I18n.t("Font Family") },
+    "ic-brand-font-size" => lambda { I18n.t("Font Size") },
+    "ic-brand-font-weight" => lambda { I18n.t("Font Weight") },
+    "ic-link-color" => lambda { I18n.t("Link Color") },
+    "ic-brand-button--primary-bgd" => lambda { I18n.t("Primary Button") },
+    "ic-brand-button--primary-text" => lambda { I18n.t("Primary Button Text") },
+    "ic-brand-button--secondary-bgd" => lambda { I18n.t("Secondary Button") },
+    "ic-brand-button--secondary-text" => lambda { I18n.t("Secondary Button Text") },
+    "ic-brand-global-nav-bgd" => lambda { I18n.t("Nav Background") },
+    "ic-brand-global-nav-ic-icon-svg-fill" => lambda { I18n.t("Nav Icon") },
+    "ic-brand-global-nav-ic-icon-svg-fill--active" => lambda { I18n.t("Nav Icon Active") },
+    "ic-brand-global-nav-menu-item__text-color" => lambda { I18n.t("Nav Text") },
+    "ic-brand-global-nav-menu-item__text-color--active" => lambda { I18n.t("Nav Text Active") },
+    "ic-brand-global-nav-avatar-border" => lambda { I18n.t("Nav Avatar Border") },
+    "ic-brand-global-nav-menu-item__badge-bgd" => lambda { I18n.t("Nav Badge") },
+    "ic-brand-global-nav-menu-item__badge-text" => lambda { I18n.t("Nav Badge Text") },
+    "ic-brand-global-nav-logo-bgd" => lambda { I18n.t("Nav Logo Background") },
+    "ic-brand-header-image" => lambda { I18n.t("Nav Logo") },
+    "ic-brand-mobile-global-nav-logo" => lambda { I18n.t("Responsive Global Nav Logo") },
+    "ic-brand-watermark" => lambda { I18n.t("Watermark") },
+    "ic-brand-watermark-opacity" => lambda { I18n.t("Watermark Opacity") },
+    "ic-brand-favicon" => lambda { I18n.t("Favicon") },
+    "ic-brand-apple-touch-icon" => lambda { I18n.t("Mobile Homescreen Icon") },
+    "ic-brand-msapplication-tile-color" => lambda { I18n.t("Windows Tile Color") },
+    "ic-brand-msapplication-tile-square" => lambda { I18n.t("Windows Tile: Square") },
+    "ic-brand-msapplication-tile-wide" => lambda { I18n.t("Windows Tile: Wide") },
+    "ic-brand-right-sidebar-logo" => lambda { I18n.t("Right Sidebar Logo") },
+    "ic-brand-Login-body-bgd-color" => lambda { I18n.t("Background Color") },
+    "ic-brand-Login-body-bgd-image" => lambda { I18n.t("Background Image") },
+    "ic-brand-Login-body-bgd-shadow-color" => lambda { I18n.t("Body Shadow") },
+    "ic-brand-Login-logo" => lambda { I18n.t("Login Logo") },
+    "ic-brand-Login-Content-bgd-color" => lambda { I18n.t("Top Box Background") },
+    "ic-brand-Login-Content-border-color" => lambda { I18n.t("Top Box Border") },
+    "ic-brand-Login-Content-inner-bgd" => lambda { I18n.t("Inner Box Background") },
+    "ic-brand-Login-Content-inner-border" => lambda { I18n.t("Inner Box Border") },
+    "ic-brand-Login-Content-inner-body-bgd" => lambda { I18n.t("Form Background") },
+    "ic-brand-Login-Content-inner-body-border" => lambda { I18n.t("Form Border") },
+    "ic-brand-Login-Content-label-text-color" => lambda { I18n.t("Login Label") },
+    "ic-brand-Login-Content-password-text-color" => lambda { I18n.t("Login Link Color") },
+    "ic-brand-Login-footer-link-color" => lambda { I18n.t("Login Footer Link") },
+    "ic-brand-Login-footer-link-color-hover" => lambda { I18n.t("Login Footer Link Hover") },
+    "ic-brand-Login-instructure-logo" => lambda { I18n.t("Login Instructure Logo") }
+  }.freeze
+
+  GROUP_NAMES = {
+    "global_branding" => lambda { I18n.t("Global Branding") },
+    "global_navigation" => lambda { I18n.t("Global Navigation") },
+    "watermarks" => lambda { I18n.t("Watermarks & Other Images") },
+    "login" => lambda { I18n.t("Login Screen") }
+  }.freeze
+
+  HELPER_TEXTS = {
+    "ic-brand-header-image" => lambda { I18n.t("Accepted formats: svg, png, jpg, gif") },
+    "ic-brand-mobile-global-nav-logo" => lambda { I18n.t("Appears at the top of the global navigation tray that opens on mobile sized screens. display height: 48px. Accepted formats: svg, png, jpg, gif") },
+    "ic-brand-watermark" => lambda { I18n.t("This image appears as a background watermark to your page. Accepted formats: png, svg, gif, jpeg") },
+    "ic-brand-watermark-opacity" => lambda { I18n.t("Specify the transparency of the watermark background image.") },
+    "ic-brand-favicon" => lambda { I18n.t("You can use a single 16x16, 32x32, 48x48 ico file.") },
+    "ic-brand-apple-touch-icon" => lambda { I18n.t("The shortcut icon for iOS/Android devices. 180x180 png") },
+    "ic-brand-msapplication-tile-square" => lambda { I18n.t("558x558 png, jpg, gif (1.8x the standard tile size, so it can be scaled up or down as needed)") },
+    "ic-brand-msapplication-tile-wide" => lambda { I18n.t("558x270 png, jpg, gif") },
+    "ic-brand-right-sidebar-logo" => lambda { I18n.t("A full-size logo that appears in the right sidebar on the Canvas dashboard. Ideal size is 360 x 140 pixels. Accepted formats: svg, png, jpeg, gif") },
+    "ic-brand-Login-body-bgd-shadow-color" => lambda { I18n.t("accepted formats: hex, rgba, rgb, hsl") }
+  }.freeze
+
+  class << self
+    def variables_map
+      @variables_map ||= BRANDABLE_VARIABLES.each_with_object({}) do |variable_group, memo|
+        variable_group['variables'].each { |variable| memo[variable['variable_name']] = variable }
+      end.freeze
+    end
+
+    def variables_map_with_image_urls
+      @variables_map_with_image_urls ||= variables_map.each_with_object({}) do |(key, config), memo|
+        if config['type'] == 'image'
+          memo[key] = config.merge('default' => ActionController::Base.helpers.image_url(config['default']))
+        else
+          memo[key] = config
+        end
+      end.freeze
+    end
+
+    def things_that_go_into_defaults_md5
+      variables_map.each_with_object({}) do |(variable_name, config), memo|
+        default = config['default']
+        if config['type'] == 'image'
+          # to make consistent md5s whether the cdn is enabled or not, don't include hostname in defaults
+          default = ActionController::Base.helpers.image_path(default, host: '')
+        end
+        memo[variable_name] = default
+      end.freeze
+    end
+
+    def migration_version
+      # ActiveRecord usually uses integer timestamps to generate migration versions but any integer
+      # will work, so we just use the result of stripping out the alphabetic characters from the md5
+      default_variables_md5_without_migration_check.gsub(/[a-z]/, '').to_i.freeze
+    end
+
+    def check_if_we_need_to_create_a_db_migration
+      path = ActiveRecord::Migrator.migrations_paths.first
+      args = [path]
+      args << ActiveRecord::SchemaMigration unless CANVAS_RAILS5_2
+      migrations = ActiveRecord::MigrationContext.new(*args).migrations
+      ['predeploy', 'postdeploy'].each do |pre_or_post|
+        migration = migrations.find { |m| m.name == MIGRATION_NAME + pre_or_post.camelize }
+        # they can't have the same id, so we just add 1 to the postdeploy one
+        expected_version = (pre_or_post == 'predeploy') ? migration_version : (migration_version + 1)
+        raise BrandConfigWithOutCompileAssets if expected_version == 85663486644871658581990
+        raise DefaultMD5NotUpToDateError unless migration && migration.version == expected_version
+      end
+    end
+
+    def skip_migration_check?
+      # our canvas_rspec build doesn't even run `yarn install` or `gulp rev` so since
+      # they are not expecting all the frontend assets to work, this check isn't useful
+      Rails.env.test? && !Rails.root.join('public', 'dist', 'rev-manifest.json').exist?
+    end
+
+    def default_variables_md5
+      @default_variables_md5 ||= begin
+        check_if_we_need_to_create_a_db_migration unless skip_migration_check?
+        default_variables_md5_without_migration_check
+      end
+    end
+
+    def default_variables_md5_without_migration_check
+      Digest::MD5.hexdigest(things_that_go_into_defaults_md5.to_json).freeze
+    end
+
+    def handle_urls(value, config, css_urls)
+      return value unless config['type'] == 'image' && css_urls
+      "url('#{value}')" if value.present?
+    end
+
+    # gets the *effective* value for a brandable variable
+    def brand_variable_value(variable_name, active_brand_config=nil, config_map=variables_map, css_urls=false)
+      config = config_map[variable_name]
+      explicit_value = active_brand_config && active_brand_config.get_value(variable_name).presence
+      return handle_urls(explicit_value, config, css_urls) if explicit_value
+      default = config['default']
+      if default && default.starts_with?('$')
+        if css_urls
+          return "var(--#{default[1..-1]})"
+        else
+          return brand_variable_value(default[1..-1], active_brand_config, config_map, css_urls)
+        end
+      end
+
+      # while in our sass, we want `url(/images/foo.png)`,
+      # the Rails Asset Helpers expect us to not have the '/images/', eg: <%= image_tag('foo.png') %>
+      default = default.sub(/^\/images\//, '') if config['type'] == 'image'
+      handle_urls(default, config, css_urls)
+    end
+
+    def computed_variables(active_brand_config=nil)
+      [
+        ['ic-brand-primary', 'darken', 5],
+        ['ic-brand-primary', 'darken', 10],
+        ['ic-brand-primary', 'darken', 15],
+        ['ic-brand-primary', 'lighten', 5],
+        ['ic-brand-primary', 'lighten', 10],
+        ['ic-brand-primary', 'lighten', 15],
+        ['ic-brand-button--primary-bgd', 'darken', 5],
+        ['ic-brand-button--primary-bgd', 'darken', 15],
+        ['ic-brand-button--secondary-bgd', 'darken', 5],
+        ['ic-brand-button--secondary-bgd', 'darken', 15],
+        ['ic-brand-font-color-dark', 'lighten', 15],
+        ['ic-brand-font-color-dark', 'lighten', 30],
+        ['ic-link-color', 'darken', 10],
+        ['ic-link-color', 'lighten', 10],
+      ].each_with_object({}) do |(variable_name, darken_or_lighten, percent), memo|
+        color = brand_variable_value(variable_name, active_brand_config, variables_map_with_image_urls)
+        computed_color = CanvasColor::Color.new(color).send(darken_or_lighten, percent/100.0)
+        memo["#{variable_name}-#{darken_or_lighten}ed-#{percent}"] = computed_color.to_s
+      end
+    end
+
+    def all_brand_variable_values(active_brand_config=nil, css_urls=false)
+      variables_map.each_with_object(computed_variables(active_brand_config)) do |(key, _), memo|
+        memo[key] = brand_variable_value(key, active_brand_config, variables_map_with_image_urls, css_urls)
+      end
+    end
+
+    def all_brand_variable_values_as_json(active_brand_config=nil)
+      all_brand_variable_values(active_brand_config).to_json
+    end
+
+    def all_brand_variable_values_as_js(active_brand_config=nil)
+      "CANVAS_ACTIVE_BRAND_VARIABLES = #{all_brand_variable_values_as_json(active_brand_config)};"
+    end
+
+    def all_brand_variable_values_as_css(active_brand_config=nil)
+      ":root {
+        #{all_brand_variable_values(active_brand_config, true).map{ |k, v| "--#{k}: #{v};"}.join("\n")}
+      }"
+    end
+
+    def public_brandable_css_folder
+      Pathname.new('public/dist/brandable_css')
+    end
+
+    def default_brand_folder
+      public_brandable_css_folder.join('default')
+    end
+
+    def default_brand_file(type, high_contrast=false)
+      default_brand_folder.join("variables#{high_contrast ? '-high_contrast' : ''}-#{default_variables_md5}.#{type}")
+    end
+
+    def high_contrast_overrides
+      Class.new do
+        def get_value(variable_name)
+          {"ic-brand-primary" => "#0770A3", "ic-link-color" => "#0073A7"}[variable_name]
+        end
+      end.new
+    end
+
+    def default(type, high_contrast=false)
+      bc = high_contrast ? high_contrast_overrides : nil
+      send("all_brand_variable_values_as_#{type}", bc)
+    end
+
+    def save_default!(type, high_contrast=false)
+      default_brand_folder.mkpath
+      default_brand_file(type, high_contrast).write(default(type, high_contrast))
+      move_default_to_s3_if_enabled!(type, high_contrast)
+    end
+
+    def save_default_files!
+      [true, false].each do |high_contrast|
+        ['js', 'css', 'json'].each { |type| save_default!(type, high_contrast) }
+      end
+    end
+
+    def move_default_to_s3_if_enabled!(type, high_contrast=false)
+      return unless defined?(Canvas) && Canvas::Cdn.enabled?
+      s3_uploader.upload_file(public_default_path(type, high_contrast))
+      begin
+        File.delete(default_brand_file(type, high_contrast))
+      rescue Errno::ENOENT # continue if something else deleted it in another process
+      end
+    end
+
+    def s3_uploader
+      @s3_uploaderer ||= Canvas::Cdn::S3Uploader.new
+    end
+
+    def public_default_path(type, high_contrast=false)
+      "dist/brandable_css/default/variables#{high_contrast ? '-high_contrast' : ''}-#{default_variables_md5}.#{type}"
+    end
+
+    def variants
+      @variants ||= CONFIG['variants'].keys.freeze
+    end
+
+    def brandable_variants
+      @brandable_variants ||= CONFIG['variants'].select{|_, v| v['brandable']}.map{ |k,_| k }.freeze
+    end
+
+    def combined_checksums
+      if defined?(ActionController) && ActionController::Base.perform_caching && defined?(@combined_checksums)
+        return @combined_checksums
+      end
+      file = APP_ROOT.join(CONFIG['paths']['bundles_with_deps'] + SASS_STYLE)
+      if file.exist?
+        @combined_checksums = JSON.parse(file.read).each_with_object({}) do |(k, v), memo|
+          memo[k] = v.symbolize_keys.slice(:combinedChecksum, :includesNoVariables)
+        end.freeze
+      elsif defined?(Rails) && Rails.env.production?
+        raise "#{file.expand_path} does not exist. You need to run brandable_css before you can serve css."
+      else
+        # for dev/test there might be cases where you don't want it to raise an exception
+        # if you haven't ran `brandable_css` and the manifest file doesn't exist yet.
+        # eg: you want to test a controller action and you don't care that it links
+        # to a css file that hasn't been created yet.
+        default_value = {:combinedChecksum => "Error: unknown css checksum. you need to run brandable_css"}.freeze
+        @combined_checksums = Hash.new(default_value).freeze
+      end
+    end
+
+    # bundle path should be something like "bundles/speedgrader" or "plugins/analytics/something"
+    def cache_for(bundle_path, variant)
+      key = ["#{bundle_path}.scss", variant].join(CONFIG['manifest_key_seperator'])
+      fingerprint = combined_checksums[key]
+      raise "Fingerprint not found. #{bundle_path} #{variant}" unless fingerprint
+      fingerprint
+    end
+
+    def all_fingerprints_for(bundle_path)
+      variants.each_with_object({}) do |variant, object|
+        object[variant] = cache_for(bundle_path, variant)
+      end
+    end
+  end
+
+  class BrandConfigWithOutCompileAssets < RuntimeError
+    def initialize
+      super <<-END
+
+It looks like you are running a migration before running `rake canvas:compile_assets`
+compile_assets needs to complete before running db:migrate if brand_configs have not run
+
+run `rake canvas:compile_assets` and then try migrations again.
+
+      END
+    end
+  end
+
+  class DefaultMD5NotUpToDateError < RuntimeError
+    def initialize
+      super <<-END
+
+Something has changed about the default variables or images used in the Theme Editor.
+If you are seeing this and _you_ did not make changes to either app/stylesheets/brandable_variables.json
+or one of the images it references, it probably meeans your local setup is out of date.
+
+First, make sure you run `rake db:migrate`
+and then run `./script/nuke_node.sh`
+
+If that does not resolve the issue, it probably means you _did_ update one of those json variables
+in app/stylesheets/brandable_variables.json or one of the images it references so you need to rename
+the db migrations that makes sure when this change is deployed or checked out by anyone else
+makes a new .css file for the css variables for each brand based on these new defaults.
+To do that, run this command and then restart your rails process. (for local dev, if you want the
+changes to show up in the ui, make sure you also run `rake db:migrate` afterwards).
+
+ONLY DO THIS IF YOU REALLY DID MEAN TO MAKE A CHANGE TO THE DEFAULT BRANDING STUFF:
+
+mv db/migrate/*_#{MIGRATION_NAME.underscore}_predeploy.rb \\
+   db/migrate/#{BrandableCSS.migration_version}_#{MIGRATION_NAME.underscore}_predeploy.rb \\
+&& \\
+mv db/migrate/*_#{MIGRATION_NAME.underscore}_postdeploy.rb \\
+   db/migrate/#{BrandableCSS.migration_version + 1}_#{MIGRATION_NAME.underscore}_postdeploy.rb
+
+FYI, current variables are: #{BrandableCSS.things_that_go_into_defaults_md5}
+END
+    end
+  end
+end