Merge pull request #4520 from Shavindra/4501-default-branding-text-colors

Apply theme colours to banner text by default. #4501

assets/styles/themes/_dark.scss

@@ -53,6 +53,9 @@
   --header-btn-text            : #{$lightest};
   --header-input-text          : #{$lightest};
 
+  // Header, Footer and Consent banner defaults
+  --banner-text-color          : #{$lightest};
+
   --nav-bg                     : #{$darkest};
   --nav-active                 : var(--primary-active-bg);
   --nav-border                 : #{$medium};

assets/styles/themes/_light.scss

@@ -304,6 +304,9 @@ BODY, .theme-light {
   --scrollbar-thumb-dropdown   : #{$lighter};
   --scrollbar-track            : transparent;
 
+  // Header, Footer and Consent banner defaults
+  --banner-text-color          : #{$darkest};
+
   --header-bg                  : #{$lightest};
   --header-btn-bg              : transparent;
   --header-btn-text            : #{$darkest};
@@ -318,6 +321,7 @@ BODY, .theme-light {
   --nav-expander-hover         : #{darken($medium, 10%)};
   --nav-border                 : #{$medium};
   --nav-border-size            : 1px;
+
   --footer-bg                  : transparent;
   --footer-height              : 0px;
 

components/form/BannerSettings.vue

@@ -26,7 +26,10 @@ export default ({
   },
 
   data() {
-    return { uiBannerFontSizeOptions: ['10px', '12px', '14px', '16px', '18px', '20px'] };
+    return {
+      uiBannerFontSizeOptions: ['10px', '12px', '14px', '16px', '18px', '20px'],
+      themeVars:               { bannerTextColor: getComputedStyle(document.body).getPropertyValue('--banner-text-color') }
+    };
   },
 
   computed: {
@@ -104,7 +107,7 @@ export default ({
       </div>
       <div class="row mt-10">
         <div class="col span-6">
-          <ColorInput v-model="value[bannerType].color" :label="t('branding.uiBanner.textColor')" />
+          <ColorInput v-model="value[bannerType].color" :default-value="themeVars.bannerTextColor" :label="t('branding.uiBanner.textColor')" />
         </div>
         <div class="col span-6">
           <ColorInput v-model="value[bannerType].background" :label="t('branding.uiBanner.background')" />

components/form/ColorInput.vue

@@ -6,6 +6,11 @@ export default {
       default: ''
     },
 
+    defaultValue: {
+      type:    String,
+      default: ''
+    },
+
     label: {
       type:    String,
       default: null
@@ -20,6 +25,15 @@ export default {
       type:    String,
       default: 'edit'
     }
+  },
+
+  computed: {
+    /**
+     * Allow UI to set a default value.
+     */
+    inputValue() {
+      return this.value ? this.value : this.defaultValue;
+    }
   }
 };
 </script>
@@ -28,10 +42,10 @@ export default {
   <div class="color-input" :class="{[mode]:mode}">
     <label class="text-label"><t v-if="labelKey" :k="labelKey" :raw="true" />{{ label }}</label>
     <div class="preview-container" @click.stop="$refs.input.click">
-      <span :style="{'background-color': value}" class="color-display">
-        <input ref="input" type="color" :value="value" @input="$emit('input', $event.target.value)" />
+      <span :style="{'background-color': inputValue}" class="color-display">
+        <input ref="input" type="color" :value="inputValue" @input="$emit('input', $event.target.value)" />
       </span>
-      <span class="text-muted">{{ value }}</span>
+      <span class="text-muted">{{ inputValue }}</span>
     </div>
   </div>
 </template>