diff --git a/.template-lintrc.js b/.template-lintrc.js
index 6411efaf099..d6276821591 100644
--- a/.template-lintrc.js
+++ b/.template-lintrc.js
@@ -3,6 +3,7 @@ module.exports = {
   ignore: ["**/*.raw"],
 
   rules: {
-    "self-closing-void-elements": true
+    "self-closing-void-elements": true,
+    "style-concatenation": true
   }
 };
diff --git a/app/assets/javascripts/select-kit/components/color-palettes.js.es6 b/app/assets/javascripts/select-kit/components/color-palettes.js.es6
index e66cbaaee67..acb374f29f9 100644
--- a/app/assets/javascripts/select-kit/components/color-palettes.js.es6
+++ b/app/assets/javascripts/select-kit/components/color-palettes.js.es6
@@ -2,6 +2,9 @@ import ComboBoxComponent from "select-kit/components/combo-box";
 
 export default ComboBoxComponent.extend({
   pluginApiIdentifiers: ["color-palettes"],
-  classNames: "color-palettes",
-  rowComponent: "color-palettes/color-palettes-row"
+  classNames: ["color-palettes"],
+
+  modifyComponentForRow() {
+    return "color-palettes/color-palettes-row";
+  }
 });
diff --git a/app/assets/javascripts/select-kit/components/color-palettes/color-palettes-row.js.es6 b/app/assets/javascripts/select-kit/components/color-palettes/color-palettes-row.js.es6
index b8886122640..e3845efba10 100644
--- a/app/assets/javascripts/select-kit/components/color-palettes/color-palettes-row.js.es6
+++ b/app/assets/javascripts/select-kit/components/color-palettes/color-palettes-row.js.es6
@@ -1,14 +1,20 @@
 import { escapeExpression } from "discourse/lib/utilities";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
-import discourseComputed from "discourse-common/utils/decorators";
+import { computed } from "@ember/object";
 
 export default SelectKitRowComponent.extend({
+  classNames: ["color-palettes-row"],
+
   layoutName:
     "select-kit/templates/components/color-palettes/color-palettes-row",
-  classNames: "color-palettes-row",
 
-  @discourseComputed("computedContent.originalContent.colors")
-  colors(colors) {
-    return (colors || []).map(color => `#${escapeExpression(color.hex)}`);
-  }
+  palettes: computed("item.colors.[]", function() {
+    return (this.item.colors || [])
+      .map(color => `#${escapeExpression(color.hex)}`)
+      .map(
+        hex => `<span class="palette" style="background-color:${hex}"></span>`
+      )
+      .join("")
+      .htmlSafe();
+  })
 });
diff --git a/app/assets/javascripts/select-kit/templates/components/color-palettes/color-palettes-row.hbs b/app/assets/javascripts/select-kit/templates/components/color-palettes/color-palettes-row.hbs
index b24b2f2f5d3..53501d9f83d 100644
--- a/app/assets/javascripts/select-kit/templates/components/color-palettes/color-palettes-row.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/color-palettes/color-palettes-row.hbs
@@ -2,10 +2,8 @@
   {{label}}
 </span>
 
-{{#if colors}}
+{{#if item.colors}}
   <div class="palettes">
-    {{#each colors as |color|}}
-      <span class="palette" style="background-color:{{color}};"></span>
-    {{/each}}
+    {{palettes}}
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/wizard/components/theme-preview.js.es6 b/app/assets/javascripts/wizard/components/theme-preview.js.es6
index 768e2e5522b..b268bab8167 100644
--- a/app/assets/javascripts/wizard/components/theme-preview.js.es6
+++ b/app/assets/javascripts/wizard/components/theme-preview.js.es6
@@ -6,6 +6,7 @@ import {
   chooseDarker,
   LOREM
 } from "wizard/lib/preview";
+import { computed } from "@ember/object";
 
 export default createPreviewComponent(305, 165, {
   logo: null,
@@ -13,6 +14,10 @@ export default createPreviewComponent(305, 165, {
 
   classNameBindings: ["isSelected"],
 
+  canvasStyle: computed("width", "height", function() {
+    return `width:${this.width}px;height:${this.height}px`.htmlSafe();
+  }),
+
   @discourseComputed("selectedId", "colorsId")
   isSelected(selectedId, colorsId) {
     return selectedId === colorsId;
diff --git a/app/assets/javascripts/wizard/templates/components/theme-preview.hbs b/app/assets/javascripts/wizard/templates/components/theme-preview.hbs
index 94e617ca68b..2201f2a1a90 100644
--- a/app/assets/javascripts/wizard/templates/components/theme-preview.hbs
+++ b/app/assets/javascripts/wizard/templates/components/theme-preview.hbs
@@ -1,4 +1,8 @@
-<div class='preview-area'>
-  <canvas width={{elementWidth}} height={{elementHeight}} style={{concat "width:" width "; height:" height ";"}}>
+<div class="preview-area">
+  <canvas
+    width={{elementWidth}}
+    height={{elementHeight}}
+    style={{canvasStyle}}
+  >
   </canvas>
 </div>