Merge pull request #565 from webitel/refactor/colors

refactor: colors in progress [WTEL-3902]

package.json

@@ -16,7 +16,7 @@
     "@vuelidate/validators": "^2.0.0",
     "@vueuse/core": "^10.3.0",
     "@webitel/flow-ui-sdk": "^0.1.14",
-    "@webitel/ui-sdk": "^23.12.51",
+    "@webitel/ui-sdk": "^23.12.91",
     "axios": "^0.27.1",
     "clipboard-copy": "^4.0.1",
     "cron-validator": "^1.3.1",

src/app/components/utils/code-editor.vue

@@ -122,6 +122,8 @@ export default {
         }
       });
 
+      editor.setTheme('vs-dark');
+
       // eslint-disable-next-line no-unused-vars
       this.editor.onDidChangeModelDecorations((event) => {
         this.checkSyntaxError();

src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue

@@ -30,6 +30,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.nameLink {
+  color: var(--text-main-color);
+}
+
 .wt-chip {
   margin-left: var(--spacing-sm);
 }

src/app/css/main.scss

@@ -7,10 +7,12 @@
 
 //disables scrollbar on 100vh auth on small laptops
 body {
+  @extend %wt-scrollbar;
   @extend %typo-body-1;
   display: flex;
   min-width: 100%;
   min-height: 100%;
+  color: var(--text-main-color);
 }
 
 #app {

src/app/store/store.js

@@ -1,4 +1,5 @@
 import { createStore } from 'vuex';
+import appearance from '../../modules/appearance/store/appearance';
 import ccenter from '../../modules/contact-center/store/ccenter';
 import directory from '../../modules/directory/store/directory';
 import integrations from '../../modules/integrations/store/integrations';
@@ -19,5 +20,6 @@ export default createStore({
     integrations,
     permissions,
     system,
+    appearance,
   },
 });

src/modules/_reusable/app-header/components/app-header.vue

@@ -4,6 +4,7 @@
       :current-app="currentApp"
       :nav="nav"
     />
+    <wt-dark-mode-switcher />
     <wt-app-navigator
       :apps="apps"
       :current-app="currentApp"
@@ -19,13 +20,17 @@
 
 <script>
 import WebitelApplications from '@webitel/ui-sdk/src/enums/WebitelApplications/WebitelApplications.enum';
+import WtDarkModeSwitcher from '@webitel/ui-sdk/src/modules/Appearance/components/wt-dark-mode-switcher.vue';
 import authAPI from '@webitel/ui-sdk/src/modules/Userinfo/api/auth';
 import { mapGetters, mapState } from 'vuex';
 import navMixin from '../../../../app/mixins/navMixin';
 import router from '../../../../app/router/router';
 
 export default {
   name: 'AppHeader',
+  components: {
+    WtDarkModeSwitcher,
+  },
   mixins: [navMixin],
   inject: ['$config'],
   data: () => ({
@@ -87,12 +92,16 @@ export default {
       // and throw user to auth page
       return router.replace('/auth');
     },
+
+    toggleDarkTheme() {
+      document.documentElement.classList.toggle('theme--dark');
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.wt-navigation-bar {
+.wt-dark-mode-switcher {
   margin-right: auto;
 }
 </style>

src/modules/_shared/object-wrap/the-object-wrap.vue

@@ -34,7 +34,7 @@ export default {
   flex-grow: 1;
   max-width: 100%;
   min-height: 100%;
-  background: var(--page-bg-color);
+  background: var(--wt-page-wrapper-background-color);
 }
 
 .object-content-wrap {

src/modules/_shared/upload-csv-popup/css/upload-popup.scss

@@ -52,7 +52,7 @@
   .upload-popup-form__error-stack-trace {
     margin-top: var(--spacing-sm);
     padding: var(--spacing-sm);
-    color: var(--false-color);
+    color: var(--error-color);
     border-radius: var(--border-radius);
     background: var(--secondary-color);
   }

src/modules/appearance/store/appearance.js

@@ -0,0 +1,4 @@
+import AppearanceStoreModule
+  from '@webitel/ui-sdk/src/modules/Appearance/store/AppearanceStoreModule';
+
+export default new AppearanceStoreModule().getModule();

src/modules/application-hub/components/application-hub.vue

@@ -277,7 +277,7 @@ $transition: 0.4s;
 // title text
 .application-link__title {
   @extend %typo-body-1;
-  color: var(--main-color);
+  color: var(--text-main-color);
 }
 
 // specific @hover toggled styles (hovered)

src/modules/directory/modules/license/components/all-licenses/all-licenses.vue

@@ -173,10 +173,10 @@ export default {
 
 <style lang="scss" scoped>
 .all-licenses {
-  --license--valid: rgba(255, 234, 0, 0.3);
-  --license--90: rgba(255, 234, 0, 0.3);
-  --license--30: rgba(255, 68, 68, 0.3);
-  --license--0: rgba(0, 0, 0, 0.1);
+  --license--valid: var(--success-color);
+  --license--90: var(--success-color);
+  --license--30: var(--warning-color);
+  --license--0: var(--error-color);
 }
 
 .all-licenses__product-cell {

src/modules/directory/modules/users/components/opened-user-devices.vue

@@ -69,5 +69,6 @@ export default {
 .hint-link__link {
   @extend %typo-subtitle-2;
   text-decoration: underline;
+  color: var(--info-color);
 }
 </style>

src/modules/integrations/modules/cognitive-profiles/components/google/opened-cognitive-profile-google.vue

@@ -154,6 +154,6 @@ export default {
   justify-content: space-between;
   padding: var(--spacing-xs) var(--spacing-sm);
   border-radius: var(--border-radius);
-  background: var(--secondary-color-50);
+  background: var(--secondary-color);
 }
 </style>

src/modules/routing/modules/chat-gateways/components/viber/opened-chat-gateway-viber-style-tab.vue

@@ -76,5 +76,9 @@ export default {
   .wt-button {
     margin-top: var(--spacing-sm);
   }
+
+  :deep(.vc-chrome-body) {
+    background: var(--content-wrapper-color);
+  }
 }
 </style>

src/modules/routing/modules/chat-gateways/modules/webchat/components/copy-code-button.vue

@@ -4,7 +4,10 @@
     @click="copyCode"
   >
     {{ text }}
-    <wt-hint v-show="!isCopied">
+    <wt-hint
+      v-show="!isCopied"
+      :icon-color="`on-${color}`"
+    >
       {{ $t('objects.routing.chatGateways.webchat.copyCodeHint') }}
     </wt-hint>
   </wt-button>

src/modules/routing/modules/chat-gateways/modules/webchat/components/opened-chat-gateway-webchat-view-tab.vue

@@ -153,6 +153,10 @@ export default {
 
       .colorpicker {
         width: 100%;
+
+        //:deep(.vc-chrome-body) {
+        //  background: var(--content-wrapper-color);
+        //}
       }
     }
   }

src/modules/routing/modules/flow/components/create-flow-popup.vue

@@ -186,6 +186,7 @@ $pic-height: 136px;
     overflow: hidden;
     text-align: center;
     text-overflow: ellipsis;
+    color: var(--text-main-color);
     grid-column-start: 2;
   }
 }

src/modules/routing/modules/flow/modules/diagram/components/opened-flow-diagram.vue

@@ -172,7 +172,7 @@ export default {
   bottom: 0;
   left: 0;
   pointer-events: none;
-  background: var(--page-bg-color);
+  background: var(--wt-page-wrapper-background-color);
 
   .wt-loader {
     position: absolute;

src/modules/start-page/components/_internals/start-category-lvl-1.vue

@@ -11,6 +11,7 @@
         @click="select(category)"
       >
         <wt-icon
+          :color="selected.value === category.value ? 'on-primary' : 'default'"
           :icon="category.value"
           icon-prefix="adm"
         />
@@ -50,9 +51,13 @@ export default {
 .start-nav__category-option--lvl-1 {
   background: var(--lvl-1-bg);
 
-  &.start-nav__category-option--selected,
   &:hover {
     background: var(--lvl-1-bg--hover);
   }
+
+  &.start-nav__category-option--selected {
+    color: var(--lvl-1-text--selected);
+    background: var(--lvl-1-bg--selected);
+  }
 }
 </style>

src/modules/start-page/components/_internals/start-category-lvl-2.vue

@@ -56,11 +56,15 @@ export default {
       content: '';
       transform: translate(-50%, -50%);
       border-radius: 50%;
-      background: var(--contrast-color);
+      background: var(--text-main-color);
     }
   }
 }
 
+.start-nav__link {
+  color: var(--text-main-color);
+}
+
 .start-nav__link:hover, .start-nav__link:active {
   text-decoration: underline;
 }

src/modules/start-page/components/the-start-page.vue

@@ -70,8 +70,10 @@ export default {
     + var(--spacing-2xs) * 6
   );
 
-  --lvl-1-bg: hsla(var(--_secondary-color), var(--_opacity--default));
-  --lvl-1-bg--hover: hsla(var(--_accent-color), var(--_opacity--default));
+  --lvl-1-bg: var(--dp-18-surface-color);
+  --lvl-1-bg--hover: var(--dp-20-surface-color);
+  --lvl-1-bg--selected: var(--primary-color);
+  --lvl-1-text--selected: var(--primary-on-color);
 
   @media (#{$media} and #{$media-width-sm}) {
     --wrapper-width: 80%;
@@ -100,7 +102,7 @@ export default {
   margin: auto;
   padding: var(--spacing-sm);
   border-radius: var(--border-radius);
-  background: var(--main-color);
+  background: var(--dp-20-surface-color);
   grid-template-columns: repeat(2, 1fr);
   grid-gap: var(--spacing-sm);
 

src/modules/start-page/css/_start-category.scss

@@ -21,6 +21,7 @@
   padding: 18px 20px;
   transition: var(--transition);
   text-align: left;
+  color: var(--text-main-color);
   border-radius: var(--border-radius);
 
   .wt-icon {

vite.config.js

@@ -13,6 +13,7 @@ export default ({ mode }) => {
       .replaceAll('VITE_', 'VUE_APP_')),
     },
     server: {
+      host: true,
       port: 8080,
     },
     css: {