step1 refactor rebranding

webapp/assets/_new/styles/tokens.scss

@@ -369,3 +369,8 @@ $color-header-background: $color-neutral-100;
 
 $color-footer-background: $color-neutral-100;
 
+/** 
+ * @tokens Locale Menu Color
+ */
+
+ $color-locale-menu: $text-color-soft;

webapp/assets/styles/imports/_branding.scss

@@ -1,21 +1,5 @@
-
-$color-primary: #6e8b87;
-$color-primary-light: #a6ff00;
-
-$color-header-background: $color-primary;
-$color-footer-background: $color-primary-light;
-
-.main-navigation a {
-    color: $color-primary-light;
-}
-.main-navigation a:hover {
-    color: $color-neutral-100;
-}
-
-.main-navigation .locale-menu {
-    color: $color-primary-light;
-}
-
-.main-navigation  .base-button {
-    color: $color-primary-light;
-}
+/* 
+    *
+    * Here, all SCSS variables and classes can be adapted to your custom design. 
+    *
+*/

webapp/components/HeaderMenu/HeaderMenu.vue

@@ -1,43 +0,0 @@
-<template>
-  <div class="display-flex">
-    <!-- <ds-flex v-if="show"> -->
-
-    <ds-flex-item v-for="item in menu" :key="item.name">
-      <a v-if="item.url" :href="item.url" target="_blank" class="margin-x">
-        <ds-text size="large" bold>
-          {{ item.name }}
-        </ds-text>
-      </a>
-      <nuxt-link v-else :to="item.path" class="margin-x">
-        <ds-text size="large" bold>
-          {{ item.name }}
-        </ds-text>
-      </nuxt-link>
-    </ds-flex-item>
-
-    <!-- </ds-flex> -->
-  </div>
-</template>
-<script>
-import headerMenu from '../../constants/headerMenu.js'
-
-export default {
-  name: 'HeaderMenu',
-  data() {
-    return {
-      show: headerMenu.SHOW_HEADER_MENU,
-      menu: headerMenu.MENU,
-    }
-  },
-}
-</script>
-<style lang="scss">
-.display-flex {
-  display: flex;
-}
-.margin-x {
-  margin-left: $space-small;
-  margin-right: $space-small;
-  white-space: nowrap;
-}
-</style>

webapp/components/LocaleSwitch/LocaleSwitch.vue

@@ -117,6 +117,7 @@ export default {
   align-items: center;
   height: 100%;
   padding: $space-xx-small;
+  color: $color-locale-menu;
 
   > .label {
     margin: 0 $space-xx-small;