DEV: Show warning in admin UI for core SCSS color vars (#12984)

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

app/assets/javascripts/admin/addon/components/ace-editor.js

@@ -1,9 +1,12 @@
 import Component from "@ember/component";
 import getURL from "discourse-common/lib/get-url";
 import loadScript from "discourse/lib/load-script";
+import I18n from "I18n";
 import { observes } from "discourse-common/utils/decorators";
 import { on } from "@ember/object/evented";
 
+const COLOR_VARS_REGEX = /\$(primary|secondary|tertiary|quaternary|header_background|header_primary|highlight|danger|success|love)(\s|;|-(low|medium|high))/g;
+
 export default Component.extend({
   mode: "css",
   classNames: ["ace-wrapper"],
@@ -117,12 +120,18 @@ export default Component.extend({
             bindKey: { mac: "cmd-s", win: "ctrl-s" },
           });
         }
+
+        editor.on("blur", () => {
+          this.warnSCSSDeprecations();
+        });
+
         editor.$blockScrolling = Infinity;
         editor.renderer.setScrollMargin(10, 10);
 
         this.element.setAttribute("data-editor", editor);
         this._editor = editor;
         this.changeDisabledState();
+        this.warnSCSSDeprecations();
 
         $(window)
           .off("ace:resize")
@@ -140,6 +149,38 @@ export default Component.extend({
     });
   },
 
+  warnSCSSDeprecations() {
+    if (
+      this.mode !== "scss" ||
+      this.editorId.startsWith("color_definitions") ||
+      !this._editor
+    ) {
+      return;
+    }
+
+    let warnings = this.content
+      .split("\n")
+      .map((line, row) => {
+        if (line.match(COLOR_VARS_REGEX)) {
+          return {
+            row,
+            column: 0,
+            text: I18n.t("admin.customize.theme.scss_warning_inline"),
+            type: "warning",
+          };
+        }
+      })
+      .filter(Boolean);
+
+    this._editor.getSession().setAnnotations(warnings);
+
+    this.setWarning(
+      warnings.length
+        ? I18n.t("admin.customize.theme.scss_color_variables_warning")
+        : false
+    );
+  },
+
   actions: {
     focus() {
       if (this._editor) {

app/assets/javascripts/admin/addon/components/admin-theme-editor.js

@@ -6,6 +6,8 @@ import { isDocumentRTL } from "discourse/lib/text-direction";
 import { next } from "@ember/runloop";
 
 export default Component.extend({
+  warning: null,
+
   @discourseComputed("theme.targets", "onlyOverridden", "showAdvanced")
   visibleTargets(targets, onlyOverridden, showAdvanced) {
     return targets.filter((target) => {
@@ -124,5 +126,9 @@ export default Component.extend({
     save() {
       this.attrs.save();
     },
+
+    setWarning(message) {
+      this.set("warning", message);
+    },
   },
 });

app/assets/javascripts/admin/addon/templates/components/admin-theme-editor.hbs

@@ -87,4 +87,17 @@
   <pre class="field-error">{{error}}</pre>
 {{/if}}
 
-{{ace-editor content=activeSection editorId=editorId mode=activeSectionMode autofocus="true" placeholder=placeholder htmlPlaceholder=true save=(action "save")}}
+{{#if warning}}
+  <pre class="field-warning">{{html-safe warning}}</pre>
+{{/if}}
+
+{{ace-editor
+  content=activeSection
+  editorId=editorId
+  mode=activeSectionMode
+  autofocus="true"
+  placeholder=placeholder
+  htmlPlaceholder=true
+  save=(action "save")
+  setWarning=(action "setWarning")
+}}

app/assets/stylesheets/common/admin/customize.scss

@@ -49,14 +49,19 @@
     }
   }
 
-  .field-error {
+  .field-error,
+  .field-warning {
     margin-top: 10px;
     margin-bottom: 10px;
-    background-color: var(--quaternary-low);
+    background-color: var(--danger-low-mid);
-    padding: 5px;
+    padding: 10px;
     white-space: pre-wrap;
   }
 
+  .field-warning {
+    background-color: var(--highlight-low);
+  }
+
   .admin-container {
     padding-left: 10px;
     padding-right: 10px;

config/locales/client.en.yml

@@ -4358,6 +4358,8 @@ en:
           yaml:
             text: "YAML"
             title: "Define theme settings in YAML format"
+          scss_color_variables_warning: "Using core SCSS color variables in themes is deprecated. Please use CSS custom properties instead. See <a href=\"https://meta.discourse.org/t/-/77551#color-variables-2\" target=\"_blank\">this guide</a> for more details."
+          scss_warning_inline: "Using core SCSS color variables in themes is deprecated."
         colors:
           select_base:
             title: "Select base color palette"