lightBg -> highlight because it causes issues with v2

3 files changed, 43 insertions, 43 deletions

diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 61f8800a..79c2fcd3 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -518,27 +518,27 @@
             />
           </div>
           <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.lightBg') }}</h4>
+            <h4>{{ $t('settings.style.advanced_colors.highlight') }}</h4>
             <ColorInput
-              v-model="lightBgColorLocal"
-              name="lightBg"
+              v-model="highlightColorLocal"
+              name="highlight"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.lightBg"
+              :fallback="previewTheme.colors.highlight"
             />
             <ColorInput
-              v-model="lightBgTextColorLocal"
-              name="lightBgText"
+              v-model="highlightTextColorLocal"
+              name="highlightText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.lightBgText"
+              :fallback="previewTheme.colors.highlightText"
             />
-            <ContrastRatio :contrast="previewContrast.lightBgText" />
+            <ContrastRatio :contrast="previewContrast.highlightText" />
             <ColorInput
-              v-model="lightBgLinkColorLocal"
-              name="lightBgLink"
+              v-model="highlightLinkColorLocal"
+              name="highlightLink"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.lightBgLink"
+              :fallback="previewTheme.colors.highlightLink"
             />
-            <ContrastRatio :contrast="previewContrast.lightBgLink" />
+            <ContrastRatio :contrast="previewContrast.highlightLink" />
           </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 815c11b1..2622157a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -449,7 +449,7 @@
         "underlay": "Underlay",
         "poll": "Poll graph",
         "icons": "Icons",
-        "lightBg": "Highlighted elements",
+        "highlight": "Highlighted elements",
         "pressed": "Pressed",
         "selectedPost": "Selected post",
         "selectedMenu": "Selected menu item",
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 63bfb5af..8c114004 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -47,7 +47,7 @@ export const LAYERS = {
   badge: null, //  no transparency support
   fg: null,
   bg: 'underlay',
-  lightBg: 'bg',
+  highlight: 'bg',
   panel: 'bg',
   btn: 'bg',
   btnPanel: 'panel',
@@ -148,57 +148,57 @@ export const SLOT_INHERITANCE = {
   cGreen: '#00FF00',
   cOrange: '#E3FF00',
 
-  lightBg: {
+  highlight: {
     depends: ['bg'],
     color: (mod, bg) => brightness(5 * mod, bg).rgb
   },
-  lightBgFaintText: {
+  highlightFaintText: {
     depends: ['faint'],
-    layer: 'lightBg',
+    layer: 'highlight',
     textColor: true
   },
-  lightBgFaintLink: {
+  highlightFaintLink: {
     depends: ['faintLink'],
-    layer: 'lightBg',
+    layer: 'highlight',
     textColor: 'preserve'
   },
-  lightBgText: {
+  highlightText: {
     depends: ['text'],
-    layer: 'lightBg',
+    layer: 'highlight',
     textColor: true
   },
-  lightBgLink: {
+  highlightLink: {
     depends: ['link'],
-    layer: 'lightBg',
+    layer: 'highlight',
     textColor: 'preserve'
   },
-  lightBgIcon: {
-    depends: ['lightBg', 'lightBgText'],
+  highlightIcon: {
+    depends: ['highlight', 'highlightText'],
     color: (mod, bg, text) => mixrgb(bg, text)
   },
 
-  selectedPost: '--lightBg',
+  selectedPost: '--highlight',
   selectedPostFaintText: {
-    depends: ['lightBgFaintText'],
-    layer: 'lightBg',
+    depends: ['highlightFaintText'],
+    layer: 'highlight',
     variant: 'selectedPost',
     textColor: true
   },
   selectedPostFaintLink: {
-    depends: ['lightBgFaintLink'],
-    layer: 'lightBg',
+    depends: ['highlightFaintLink'],
+    layer: 'highlight',
     variant: 'selectedPost',
     textColor: 'preserve'
   },
   selectedPostText: {
-    depends: ['lightBgText'],
-    layer: 'lightBg',
+    depends: ['highlightText'],
+    layer: 'highlight',
     variant: 'selectedPost',
     textColor: true
   },
   selectedPostLink: {
-    depends: ['lightBgLink'],
-    layer: 'lightBg',
+    depends: ['highlightLink'],
+    layer: 'highlight',
     variant: 'selectedPost',
     textColor: 'preserve'
   },
@@ -207,28 +207,28 @@ export const SLOT_INHERITANCE = {
     color: (mod, bg, text) => mixrgb(bg, text)
   },
 
-  selectedMenu: '--lightBg',
+  selectedMenu: '--highlight',
   selectedMenuFaintText: {
-    depends: ['lightBgFaintText'],
-    layer: 'lightBg',
+    depends: ['highlightFaintText'],
+    layer: 'highlight',
     variant: 'selectedMenu',
     textColor: true
   },
   selectedMenuFaintLink: {
-    depends: ['lightBgFaintLink'],
-    layer: 'lightBg',
+    depends: ['highlightFaintLink'],
+    layer: 'highlight',
     variant: 'selectedMenu',
     textColor: 'preserve'
   },
   selectedMenuText: {
-    depends: ['lightBgText'],
-    layer: 'lightBg',
+    depends: ['highlightText'],
+    layer: 'highlight',
     variant: 'selectedMenu',
     textColor: true
   },
   selectedMenuLink: {
-    depends: ['lightBgLink'],
-    layer: 'lightBg',
+    depends: ['highlightLink'],
+    layer: 'highlight',
     variant: 'selectedMenu',
     textColor: 'preserve'
   },