FEATURE: Allow themes to override color transformation variables (#7987)

FEATURE: Allow themes to override color transformation variables (#7987)

Theme developers can now add any of the transformed color variables to their color scheme in about.json. For example

  "color_schemes": {
    "Light": {
      "primary": "333333",
      "secondary": "ffffff",
      "primary-low": "ff0000"
    }
  },

would override the primary-low variable when compiling SCSS for the color scheme. The primary-low variable will also be visible in administrator color palette UI.

diff --git a/app/assets/javascripts/admin/models/color-scheme-color.js.es6 b/app/assets/javascripts/admin/models/color-scheme-color.js.es6
index a2f1a7b..a3b22d2 100644
--- a/app/assets/javascripts/admin/models/color-scheme-color.js.es6
+++ b/app/assets/javascripts/admin/models/color-scheme-color.js.es6
@@ -3,7 +3,7 @@ import {
   observes,
   on
 } from "ember-addons/ember-computed-decorators";
-import { propertyNotEqual, i18n } from "discourse/lib/computed";
+import { propertyNotEqual } from "discourse/lib/computed";
 
 const ColorSchemeColor = Discourse.Model.extend({
   @on("init")
@@ -42,9 +42,23 @@ const ColorSchemeColor = Discourse.Model.extend({
     }
   },
 
-  translatedName: i18n("name", "admin.customize.colors.%@.name"),
+  @computed("name")
+  translatedName(name) {
+    if (!this.is_advanced) {
+      return I18n.t(`admin.customize.colors.${name}.name`);
+    } else {
+      return name;
+    }
+  },
 
-  description: i18n("name", "admin.customize.colors.%@.description"),
+  @computed("name")
+  description(name) {
+    if (!this.is_advanced) {
+      return I18n.t(`admin.customize.colors.${name}.description`);
+    } else {
+      return "";
+    }
+  },
 
   /**
     brightness returns a number between 0 (darkest) to 255 (brightest).
diff --git a/app/assets/javascripts/admin/models/color-scheme.js.es6 b/app/assets/javascripts/admin/models/color-scheme.js.es6
index 5276ef8..26c8ccd 100644
--- a/app/assets/javascripts/admin/models/color-scheme.js.es6
+++ b/app/assets/javascripts/admin/models/color-scheme.js.es6
@@ -128,7 +128,8 @@ ColorScheme.reopenClass({
               return ColorSchemeColor.create({
                 name: c.name,
                 hex: c.hex,
-                default_hex: c.default_hex
+                default_hex: c.default_hex,
+                is_advanced: c.is_advanced
               });
             })
           })
diff --git a/app/assets/stylesheets/common/foundation/color_transformations.scss b/app/assets/stylesheets/common/foundation/color_transformations.scss
new file mode 100644
index 0000000..ca6068a
--- /dev/null
+++ b/app/assets/stylesheets/common/foundation/color_transformations.scss
@@ -0,0 +1,77 @@
+// standard color transformations, use these if possible, and add any new dark-light-diffs here
+// any variables defined here can be added in theme color schemes
+// all variables should have the !default flag
+
+//primary
+$primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%) !default;
+$primary-low: dark-light-diff($primary, $secondary, 90%, -78%) !default;
+$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%) !default;
+$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%) !default;
+$primary-high: dark-light-diff($primary, $secondary, 30%, -25%) !default;
+$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%) !default;
+
+//header_primary
+$header_primary-low: dark-light-diff(
+  $header_primary,
+  $header_background,
+  90%,
+  -78%
+) !default;
+$header_primary-low-mid: dark-light-diff(
+  $header_primary,
+  $header_background,
+  70%,
+  -45%
+) !default;
+
+$header_primary-medium: dark-light-diff(
+  $header_primary,
+  $header_background,
+  50%,
+  -35%
+) !default;
+$header_primary-high: dark-light-diff(
+  $header_primary,
+  $header_background,
+  30%,
+  -25%
+) !default;
+$header_primary-very-high: dark-light-diff(
+  $header_primary,
+  $header_background,
+  15%,
+  -10%
+) !default;
+
+//secondary
+$secondary-low: dark-light-diff($secondary, $primary, 70%, -70%) !default;
+$secondary-medium: dark-light-diff($secondary, $primary, 50%, -50%) !default;
+$secondary-high: dark-light-diff($secondary, $primary, 30%, -35%) !default;
+$secondary-very-high: dark-light-diff($secondary, $primary, 7%, -7%) !default;
+
+//tertiary
+$tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%) !default;
+$tertiary-medium: dark-light-diff($tertiary, $secondary, 50%, -45%) !default;
+$tertiary-high: dark-light-diff($tertiary, $secondary, 20%, -25%) !default;
+
+//quaternary
+$quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%) !default;
+
+//highlight
+$highlight-low: dark-light-diff($highlight, $secondary, 70%, -80%) !default;
+$highlight-medium: dark-light-diff($highlight, $secondary, 50%, -55%) !default;
+$highlight-high: dark-light-diff($highlight, $secondary, -50%, -10%) !default;
+
+//danger
+$danger-low: dark-light-diff($danger, $secondary, 85%, -64%) !default;
+$danger-medium: dark-light-diff($danger, $secondary, 30%, -35%) !default;
+
+//success
+$success-low: dark-light-diff($success, $secondary, 80%, -60%) !default;
+$success-medium: dark-light-diff($success, $secondary, 50%, -40%) !default;
+
+//love
+$love-low: dark-light-diff($love, $secondary, 85%, -60%) !default;
+
+//wiki
+$wiki: green !default;
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 71efde7..644d3ee 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -204,78 +204,4 @@ $box-shadow: (
   }
 }
 
-// standard color transformations, use these if possible, and add any new dark-light-diffs here
-
-//primary
-$primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%);
-$primary-low: dark-light-diff($primary, $secondary, 90%, -78%);
-$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%);
-$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%);
-$primary-high: dark-light-diff($primary, $secondary, 30%, -25%);
-$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%);
-
-//header_primary
-$header_primary-low: dark-light-diff(
-  $header_primary,
-  $header_background,
-  90%,
-  -78%
-);
-$header_primary-low-mid: dark-light-diff(
-  $header_primary,
-  $header_background,
-  70%,
-  -45%
-);
-
-$header_primary-medium: dark-light-diff(
-  $header_primary,
-  $header_background,
-  50%,
-  -35%
-);
-$header_primary-high: dark-light-diff(
-  $header_primary,
-  $header_background,
-  30%,
-  -25%
-);
-$header_primary-very-high: dark-light-diff(
-  $header_primary,
-  $header_background,
-  15%,
-  -10%
-);
-
-//secondary
-$secondary-low: dark-light-diff($secondary, $primary, 70%, -70%);
-$secondary-medium: dark-light-diff($secondary, $primary, 50%, -50%);
-$secondary-high: dark-light-diff($secondary, $primary, 30%, -35%);
-$secondary-very-high: dark-light-diff($secondary, $primary, 7%, -7%);
-
-//tertiary
-$tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%);
-$tertiary-medium: dark-light-diff($tertiary, $secondary, 50%, -45%);
-$tertiary-high: dark-light-diff($tertiary, $secondary, 20%, -25%);
-
-//quaternary
-$quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%);
-
-//highlight
-$highlight-low: dark-light-diff($highlight, $secondary, 70%, -80%);
-$highlight-medium: dark-light-diff($highlight, $secondary, 50%, -55%);
-$highlight-high: dark-light-diff($highlight, $secondary, -50%, -10%);
-
-//danger
-$danger-low: dark-light-diff($danger, $secondary, 85%, -64%);
-$danger-medium: dark-light-diff($danger, $secondary, 30%, -35%);
-
-//success
-$success-low: dark-light-diff($success, $secondary, 80%, -60%);
-$success-medium: dark-light-diff($success, $secondary, 50%, -40%);
-
-//love
-$love-low: dark-light-diff($love, $secondary, 85%, -60%);
-
-//wiki
-$wiki: green;
+@import "color_transformations";
diff --git a/app/models/color_scheme.rb b/app/models/color_scheme.rb
index 151f8c3..c242b63 100644
--- a/app/models/color_scheme.rb
+++ b/app/models/color_scheme.rb
@@ -140,6 +140,7 @@ class ColorScheme < ActiveRecord::Base
   validates_associated :color_scheme_colors
 
   BASE_COLORS_FILE = "#{Rails.root}/app/assets/stylesheets/common/foundation/colors.scss"
+  COLOR_TRANSFORMATION_FILE = "#{Rails.root}/app/assets/stylesheets/common/foundation/color_transformations.scss"
 
   @mutex = Mutex.new
 
@@ -157,6 +158,20 @@ class ColorScheme < ActiveRecord::Base
     @base_colors
   end
 

[... diff too long, it was truncated ...]

GitHub sha: d348368a

1 Like