diff --git a/demo/styles/ComponentDemo.scss b/demo/styles/ComponentDemo.scss
index a6d110fea..c5ba7afcf 100644
--- a/demo/styles/ComponentDemo.scss
+++ b/demo/styles/ComponentDemo.scss
@@ -30,6 +30,7 @@
         cursor: pointer;
       }
       @include e(title) {
+        transition: color .3s $default-cubic-bezier;
         position: relative;
         margin: 0 24px;
         font-size: 18px;
diff --git a/demo/styles/markdown.scss b/demo/styles/markdown.scss
index e88d39a3b..50f6fcf32 100644
--- a/demo/styles/markdown.scss
+++ b/demo/styles/markdown.scss
@@ -9,6 +9,7 @@
         font-weight: 700;
       }
       h1, h2, h3, h4, h5, h6 {
+        transition: color .3s $default-cubic-bezier;
         margin: 0;
         font-weight: 700;
       }
@@ -34,22 +35,27 @@
       ul, ol {
         padding-left: 0;
         li {
+          transition: color .3s $default-cubic-bezier;
           line-height: 1.875;
           margin-bottom: 0px;
           font-size: 14px;
+          color: $--n-secondary-text-color;
         }
       }
       p {
+        transition: color .3s $default-cubic-bezier;
         margin: 8px 0 0 0;
         font-size: 14px;
         line-height: 1.875;
+        color: $--n-secondary-text-color;
       }
       a {
-        color: $primary-6;
+        transition: color .3s $default-cubic-bezier;
+        color: $--primary-6;
         font-size: 14px;
       }
       code {
-        transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
+        transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier,  color .3s $default-cubic-bezier;
       }
       pre {
         width: 100%;
@@ -66,6 +72,7 @@
         box-sizing: border-box;
         border-radius: 3px;
         background-color: rgba(255, 255, 255, .12);
+        color: $--n-secondary-text-color;
         padding: 0em .4em .1em .4em;
         font-size: 14px;
         font-family: 'Lato';
@@ -112,8 +119,11 @@
     }
   } @else {
     .n-app--light-theme .markdown {
+      p, li, code {
+        color: $--n-secondary-text-color;
+      }
       a {
-        color: $primary-6;
+        color: $--primary-6;
       }
       pre {
         & > code {
diff --git a/packages/common/Alert/src/main.vue b/packages/common/Alert/src/main.vue
index 5c3523ea0..901ee93c9 100644
--- a/packages/common/Alert/src/main.vue
+++ b/packages/common/Alert/src/main.vue
@@ -2,8 +2,9 @@
   <div
     class="n-alert"
     :class="{
-      [`n-alert--${type}`]: true,
-      'n-alert--no-icon': noIcon
+      [`n-alert--${type}-type`]: true,
+      'n-alert--no-icon': noIcon,
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
     }"
   >
     <div
@@ -35,14 +36,14 @@
         :type="'ios-close-circle'"
       />
     </div>
-    <div class="n-alert__body-wrapper">
+    <div class="n-alert-body">
       <div
         v-if="title !== null"
-        class="n-alert__title"
+        class="n-alert-body__title"
       >
         {{ title }}
       </div>
-      <div class="n-alert__content">
+      <div class="n-alert-body__content">
         <slot />
       </div>
     </div>
@@ -51,11 +52,15 @@
 
 <script>
 import NIcon from '../../Icon'
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
+
 export default {
   name: 'NAlert',
   components: {
     NIcon
   },
+  mixins: [withapp, themeable],
   props: {
     icon: {
       type: String,
diff --git a/styles/Alert.scss b/styles/Alert.scss
index d89c9e3d5..1debebd37 100644
--- a/styles/Alert.scss
+++ b/styles/Alert.scss
@@ -1,81 +1,72 @@
 @import './mixins/mixins.scss';
 @import './themes/vars.scss';
 
-@include b(alert) {
-  // color: rgba(255, 146, 164, 1);
-  border-radius: 6px;
-  position: relative;
-  .n-alert__icon {
-    position: absolute;
-    left: 15px;
-    top: 15px;
-    align-items: center;
-    justify-content: center;
-    width: 19px;
-    height: 19px;
-    .n-icon {
-      margin-left: -2px;
-      margin-top: -2px;
-      font-size: 23px;
+@mixin alert-type-mixin ($type) {
+  @include m($type + '-type') {
+    background-color: map-get($--alert-background-color, $type);
+    box-shadow: inset 0 0 0 1.2px map-get($--alert-border-color, $type);
+    @include e(icon) {
+      @include b(icon) {
+        color: map-get($--alert-icon-color, $type);
+      }
+    }
+    @include b(alert-body) {
+      @include e(title) {
+        color: map-get($--alert-title-text-color, $type);
+      }
+      @include e(content) {
+        color: map-get($--alert-content-text-color, $type);
+
+      }
     }
   }
-  .n-alert__body-wrapper {
-    padding: 15px 19px 15px 47px;
-    .n-alert__title {
-      font-size: 16px;
-      line-height: 19px;
-      margin-bottom: 9px;
-      font-weight: 700;
-    }
-    .n-alert__content {
-      font-size: 14px;
-      // color: rgba(255, 255, 255, 0.8);
+}
+
+@include themes-mixin {
+  @include b(alert) {
+    @include once {
+      border-radius: 6px;
+      position: relative;
+      transition: background-color .3s $default-cubic-bezier;
+      @include e(icon) {
+        position: absolute;
+        left: 15px;
+        top: 15px;
+        align-items: center;
+        justify-content: center;
+        width: 19px;
+        height: 19px;
+        @include b(icon) {
+          transition: color .3s $default-cubic-bezier;
+          margin-left: -2px;
+          margin-top: -2px;
+          font-size: 23px;
+        }
+      }
+      @include b(alert-body) {
+        padding: 15px 19px 15px 47px;
+        @include e(title) {
+          transition: color .3s $default-cubic-bezier;
+          font-size: 16px;
+          line-height: 19px;
+          margin-bottom: 9px;
+          font-weight: 700;
+        }
+        @include e(content) {
+          transition: color .3s $default-cubic-bezier;
+          font-size: 14px;
+        }
+      }
+      @include m(no-icon) {
+        @include b(alert-body) {
+          padding-left: 19px;
+        }
+      }
     }
+    @include alert-type-mixin('default');
+    @include alert-type-mixin('success');
+    @include alert-type-mixin('info');
+    @include alert-type-mixin('error');
+    @include alert-type-mixin('warning');
   }
-  &.n-alert--no-icon {
-    .n-alert__body-wrapper {
-      padding-left: 19px;
-    }
-  }
-  &.n-alert--success {
-    background-color: rgba(99, 226, 183, 0.2);
-    box-shadow: inset 0 0 0 1.2px rgba(99, 226, 183, .5);
-    .n-icon {
-      color: rgba(99, 226, 183, 1);
-    }
-    .n-alert__title {
-      color: rgba(99, 226, 183, 1);
-    }
-  }
-  &.n-alert--info {
-    background-color: rgba(98,187,252,0.2);
-    box-shadow: inset 0 0 0 1.2px rgba(98,187,252, .5);
-    .n-icon {
-      color: rgba(98, 187, 252, 1);
-    }
-    .n-alert__title {
-      color: rgba(98, 187, 252, 1);
-    }
-  }
-  &.n-alert--warning {
-    background-color: rgba(245, 166, 35, 0.2);
-    box-shadow: inset 0 0 0 1.2px rgba(245, 166, 35, .5);
-    .n-icon {
-      color: rgba(245, 166, 35, 1);
-    }
-    .n-alert__title {
-      color:rgba(245, 166, 35, 1);
-    }
-  }
-  &.n-alert--error {
-    background-color: rgba(255, 146, 164, 0.2);
-    box-shadow: inset 0 0 0 1.2px  rgba(255, 146, 164, 0.5);
-    .n-icon {
-      color:rgba(255, 146, 164, 1);
-    }
-    .n-alert__title {
-      color:rgba(255, 146, 164, 1);
-    }
-  }
-  
 }
\ No newline at end of file
diff --git a/styles/Button.scss b/styles/Button.scss
index 167d1af2c..9e5a3174d 100644
--- a/styles/Button.scss
+++ b/styles/Button.scss
@@ -185,6 +185,7 @@
       }
       @include e(icon) {
         @include fade-in-width-expand-transition();
+        transition: color .3s $default-cubic-bezier;
       }
       @include e(content-aligner) {
         display: inline-block;
@@ -197,6 +198,7 @@
       }
       @include e(content) {
         white-space: nowrap;
+        transition: color .3s $default-cubic-bezier;
       }
       @include m(left-icon) {
         @include e(icon) {
diff --git a/styles/Confirm.scss b/styles/Confirm.scss
index 9b119ea7b..85aea57b0 100644
--- a/styles/Confirm.scss
+++ b/styles/Confirm.scss
@@ -41,13 +41,13 @@
       }
       @include b(confirm-title-icon) {
         @include m(confirm-type) {
-          color: $warning-6;
+          color: $--warning-6;
         }
         @include m(success-type) {
-          color: $success-6;
+          color: $--success-6;
         }
         @include m(error-type) {
-          color: $error-6;
+          color: $--error-6;
         }
       }
       color: $--confirm-title-color;
diff --git a/styles/Table.scss b/styles/Table.scss
index 1588ee82e..0dd6d3503 100644
--- a/styles/Table.scss
+++ b/styles/Table.scss
@@ -99,7 +99,7 @@
 //     width: 100%;
 //     thead {
 //       background-color: $table-header-background-color;
-//       color: $primary-text-color;
+//       color: $--primary-text-color;
 //       tr {
 //         th {
 //           padding: 16px 6px 16px 6px;
diff --git a/styles/base.scss b/styles/base.scss
index d4b74b3b4..d2c1342d3 100644
--- a/styles/base.scss
+++ b/styles/base.scss
@@ -21,11 +21,11 @@ body {
   font-family: $default-font-family;
   min-width: 1280px;
   // background: $body-background-color;
-  // color: $primary-text-color;
+  // color: $--primary-text-color;
 }
 
 a {
-  color: $primary-text-color;
+  color: $--primary-text-color;
 }
 
 input {
diff --git a/styles/themes/dark/components/AdvanceTable.scss b/styles/themes/dark/components/AdvanceTable.scss
index 0d1edd1c2..38683372c 100644
--- a/styles/themes/dark/components/AdvanceTable.scss
+++ b/styles/themes/dark/components/AdvanceTable.scss
@@ -1,4 +1,4 @@
 @mixin setup-dark-advance-table {
-  $--table-header-icon-color: $primary-6 !global;
+  $--table-header-icon-color: $--primary-6 !global;
   $--table-scrollbar-color: rgba(255, 255, 255, 0.2) !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/Alert.scss b/styles/themes/dark/components/Alert.scss
new file mode 100644
index 000000000..551a53535
--- /dev/null
+++ b/styles/themes/dark/components/Alert.scss
@@ -0,0 +1,37 @@
+@mixin setup-dark-alert {
+  $--alert-border-color: (
+    'default': white,
+    'success': change-color($--success-hs, $alpha: .3),
+    'info': change-color($--info-hs, $alpha: .3),
+    'warning': change-color($--warning-hs, $alpha: .3),
+    'error': change-color($--error-hs, $alpha: .3)
+  ) !global;
+  $--alert-background-color: (
+    'default': white,
+    'success': change-color($--success-hs, $alpha: .15),
+    'info': change-color($--info-hs, $alpha: .15),
+    'warning': change-color($--warning-hs, $alpha: .15),
+    'error': change-color($--error-hs, $alpha: .15)
+  ) !global;
+  $--alert-title-text-color: (
+    'default': $--n-text-color,
+    'success': $--n-text-color,
+    'info': $--n-text-color,
+    'warning': $--n-text-color,
+    'error': $--n-text-color
+  ) !global;
+  $--alert-icon-color: (
+    'default': $--success-hs,
+    'success': $--success-hs,
+    'info': $--info-hs,
+    'warning': $--warning-hs,
+    'error': $--error-hs
+  ) !global;
+  $--alert-content-text-color: (
+    'default': $--n-secondary-text-color,
+    'success': $--n-secondary-text-color,
+    'info': $--n-secondary-text-color,
+    'warning': $--n-secondary-text-color,
+    'error': $--n-secondary-text-color
+  ) !global;
+}
\ No newline at end of file
diff --git a/styles/themes/dark/components/Anchor.scss b/styles/themes/dark/components/Anchor.scss
new file mode 100644
index 000000000..74b9f6311
--- /dev/null
+++ b/styles/themes/dark/components/Anchor.scss
@@ -0,0 +1,3 @@
+@mixin setup-dark-anchor {
+
+}
\ No newline at end of file
diff --git a/styles/themes/dark/components/BaseCancelMark.scss b/styles/themes/dark/components/BaseCancelMark.scss
index b34ee7a94..db6a0e557 100644
--- a/styles/themes/dark/components/BaseCancelMark.scss
+++ b/styles/themes/dark/components/BaseCancelMark.scss
@@ -1,11 +1,11 @@
 @mixin setup-dark-base-cancel-mark {
   $--base-cancel-mark-cross-color: (
     "default": rgba(255, 255, 255, .3),
-    "hover": $primary-6,
-    "active": $primary-5
+    "hover": $--primary-6,
+    "active": $--primary-5
   ) !global;
   $--base-cancel-mark-arrow-color: (
     "default": rgba(255, 255, 255, .3),
-    "active": $primary-6
+    "active": $--primary-6
   ) !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/BasePicker.scss b/styles/themes/dark/components/BasePicker.scss
index 648645839..3b9e774b6 100644
--- a/styles/themes/dark/components/BasePicker.scss
+++ b/styles/themes/dark/components/BasePicker.scss
@@ -3,7 +3,7 @@
   $--base-picker-background-color: (
     "default": rgba(255, 255, 255, .1),
     "disabled": rgba(255, 255, 255, .06),
-    "active": change-color($primary-6, $alpha: 0.1)
+    "active": change-color($--primary-6, $alpha: 0.1)
   ) !global;
   $--base-picker-placeholder-color: (
     "default": rgba(255, 255, 255, .4),
@@ -11,8 +11,8 @@
   ) !global;
   $--base-picker-box-shadow: (
     "default": none,
-    "hover": 0 0 0 1px $primary-6,
-    'focus': (inset 0 0 0px 1px $primary-6, 0 0 8px 0px change-color($primary-6, $alpha: .3)),
+    "hover": 0 0 0 1px $--primary-6,
+    'focus': (inset 0 0 0px 1px $--primary-6, 0 0 8px 0px change-color($--primary-6, $alpha: .3)),
     "disabled": none
   ) !global;
   $--base-picker-caret-color: $--n-primary-color !global; 
diff --git a/styles/themes/dark/components/BaseSelectMenu.scss b/styles/themes/dark/components/BaseSelectMenu.scss
index 64c21b640..c9ff29607 100644
--- a/styles/themes/dark/components/BaseSelectMenu.scss
+++ b/styles/themes/dark/components/BaseSelectMenu.scss
@@ -6,5 +6,5 @@
   ) !global;
   $--base-select-menu-background-color: $--n-popover-color !global;
   $--base-select-menu-box-shadow: none !global;
-  $--base-select-menu-light-bar-background-color: change-color($primary-6, $alpha: .3) !global;
+  $--base-select-menu-light-bar-background-color: change-color($--primary-6, $alpha: .3) !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/Button.scss b/styles/themes/dark/components/Button.scss
index 6a275dc0b..6592de41b 100644
--- a/styles/themes/dark/components/Button.scss
+++ b/styles/themes/dark/components/Button.scss
@@ -32,12 +32,12 @@
     "large": 20px
   ) !global;
   $button-border-color: (
-    "default":  $primary-6,
-    "primary": $primary-6,
-    "info": $info-6,
-    "success": $success-6,
-    "warning": $warning-6,
-    "error": $error-6
+    "default":  $--primary-6,
+    "primary": $--primary-6,
+    "info": $--info-6,
+    "success": $--success-6,
+    "warning": $--warning-6,
+    "error": $--error-6
   ) !global;
   $button-box-shadow-spread: 0px !global;
   $button-box-shadow-ripple-spread: 4px !global;
@@ -79,67 +79,67 @@
   $button-ghost-active-alpha: .3;
   $button-ghost-focus-alpha: .2;
   $button-background-color: (
-    "default": change-color($primary-6, $alpha: $button-ghost-alpha),
-    "default-focus": change-color($primary-6, $alpha: $button-ghost-focus-alpha),
-    "default-hover": change-color($primary-6, $alpha: $button-ghost-hover-alpha),
-    "default-active": change-color($primary-6, $alpha: $button-ghost-active-alpha),
-    "primary": $primary-6,
-    "primary-focus": $primary-5,
-    "primary-hover": $primary-5,
-    "primary-active": $primary-7,
-    "info": $info-6,
-    "info-focus": $info-5,
-    "info-hover": $info-5,
-    "info-active": $info-7,
-    "success": $success-6,
-    "success-focus": $success-5,
-    "success-hover": $success-5,
-    "success-active": $success-7,
-    "warning": $warning-6,
-    "warning-focus": $warning-5,
-    "warning-hover": $warning-5,
-    "warning-active": $warning-7,
-    "error": $error-6,
-    "error-focus": $error-5,
-    "error-hover": $error-5,
-    "error-active": $error-7,
+    "default": change-color($--primary-6, $alpha: $button-ghost-alpha),
+    "default-focus": change-color($--primary-6, $alpha: $button-ghost-focus-alpha),
+    "default-hover": change-color($--primary-6, $alpha: $button-ghost-hover-alpha),
+    "default-active": change-color($--primary-6, $alpha: $button-ghost-active-alpha),
+    "primary": $--primary-6,
+    "primary-focus": $--primary-5,
+    "primary-hover": $--primary-5,
+    "primary-active": $--primary-7,
+    "info": $--info-6,
+    "info-focus": $--info-5,
+    "info-hover": $--info-5,
+    "info-active": $--info-7,
+    "success": $--success-6,
+    "success-focus": $--success-5,
+    "success-hover": $--success-5,
+    "success-active": $--success-7,
+    "warning": $--warning-6,
+    "warning-focus": $--warning-5,
+    "warning-hover": $--warning-5,
+    "warning-active": $--warning-7,
+    "error": $--error-6,
+    "error-focus": $--error-5,
+    "error-hover": $--error-5,
+    "error-active": $--error-7,
   ) !global;
   $ghost-button-background-color: (
-    "default": change-color($primary-6, $alpha: $button-ghost-alpha),
-    "default-focus": change-color($primary-6, $alpha: $button-ghost-focus-alpha),
-    "default-hover": change-color($primary-6, $alpha: $button-ghost-hover-alpha),
-    "default-active": change-color($primary-6, $alpha: $button-ghost-active-alpha),
-    "primary": change-color($primary-6, $alpha: $button-ghost-alpha),
-    "primary-focus": change-color($primary-6, $alpha: $button-ghost-focus-alpha),
-    "primary-hover": change-color($primary-6, $alpha: $button-ghost-hover-alpha),
-    "primary-active": change-color($primary-6, $alpha: $button-ghost-active-alpha),
-    "info": change-color($info-6, $alpha: $button-ghost-alpha),
-    "info-focus": change-color($info-6, $alpha: $button-ghost-focus-alpha),
-    "info-hover": change-color($info-6, $alpha: $button-ghost-hover-alpha),
-    "info-active": change-color($info-6, $alpha: $button-ghost-active-alpha),
-    "success": change-color($success-6, $alpha: $button-ghost-alpha),
-    "success-focus": change-color($success-6, $alpha: $button-ghost-focus-alpha),
-    "success-hover": change-color($success-6, $alpha: $button-ghost-hover-alpha),
-    "success-active": change-color($success-6, $alpha: $button-ghost-active-alpha),
-    "error": change-color($error-6, $alpha: $button-ghost-alpha),
-    "error-focus": change-color($error-6, $alpha: $button-ghost-focus-alpha),
-    "error-hover": change-color($error-6, $alpha: $button-ghost-hover-alpha),
-    "error-active": change-color($error-6, $alpha: $button-ghost-active-alpha),
-    "warning": change-color($warning-6, $alpha: $button-ghost-alpha),
-    "warning-focus": change-color($warning-6, $alpha: $button-ghost-focus-alpha),
-    "warning-hover": change-color($warning-6, $alpha: $button-ghost-hover-alpha),
-    "warning-active": change-color($warning-6, $alpha: $button-ghost-active-alpha),
+    "default": change-color($--primary-6, $alpha: $button-ghost-alpha),
+    "default-focus": change-color($--primary-6, $alpha: $button-ghost-focus-alpha),
+    "default-hover": change-color($--primary-6, $alpha: $button-ghost-hover-alpha),
+    "default-active": change-color($--primary-6, $alpha: $button-ghost-active-alpha),
+    "primary": change-color($--primary-6, $alpha: $button-ghost-alpha),
+    "primary-focus": change-color($--primary-6, $alpha: $button-ghost-focus-alpha),
+    "primary-hover": change-color($--primary-6, $alpha: $button-ghost-hover-alpha),
+    "primary-active": change-color($--primary-6, $alpha: $button-ghost-active-alpha),
+    "info": change-color($--info-6, $alpha: $button-ghost-alpha),
+    "info-focus": change-color($--info-6, $alpha: $button-ghost-focus-alpha),
+    "info-hover": change-color($--info-6, $alpha: $button-ghost-hover-alpha),
+    "info-active": change-color($--info-6, $alpha: $button-ghost-active-alpha),
+    "success": change-color($--success-6, $alpha: $button-ghost-alpha),
+    "success-focus": change-color($--success-6, $alpha: $button-ghost-focus-alpha),
+    "success-hover": change-color($--success-6, $alpha: $button-ghost-hover-alpha),
+    "success-active": change-color($--success-6, $alpha: $button-ghost-active-alpha),
+    "error": change-color($--error-6, $alpha: $button-ghost-alpha),
+    "error-focus": change-color($--error-6, $alpha: $button-ghost-focus-alpha),
+    "error-hover": change-color($--error-6, $alpha: $button-ghost-hover-alpha),
+    "error-active": change-color($--error-6, $alpha: $button-ghost-active-alpha),
+    "warning": change-color($--warning-6, $alpha: $button-ghost-alpha),
+    "warning-focus": change-color($--warning-6, $alpha: $button-ghost-focus-alpha),
+    "warning-hover": change-color($--warning-6, $alpha: $button-ghost-hover-alpha),
+    "warning-active": change-color($--warning-6, $alpha: $button-ghost-active-alpha),
   ) !global;
   $ghost-button-color: (
-    "default": $primary-6,
-    "primary": $primary-6,
-    "info": $info-6,
-    "success": $success-6,
-    "warning": $warning-6,
-    "error": $error-6
+    "default": $--primary-6,
+    "primary": $--primary-6,
+    "info": $--info-6,
+    "success": $--success-6,
+    "warning": $--warning-6,
+    "error": $--error-6
   )!global;
   $button-color: (
-    "default": $primary-6,
+    "default": $--primary-6,
     "primary": white,
     "info": white,
     "success": white,
diff --git a/styles/themes/dark/components/CheckBox.scss b/styles/themes/dark/components/CheckBox.scss
index 5b38bcfbf..20f23c363 100644
--- a/styles/themes/dark/components/CheckBox.scss
+++ b/styles/themes/dark/components/CheckBox.scss
@@ -2,7 +2,7 @@
   $border-color: rgba(255, 255, 255, 0.4);
   $--checkbox-font-color: $--neutral-3 !global;
   $--checkbox-border-color: $border-color !global;
-  $--checkbox-border-color--active: $primary-6 !global;
+  $--checkbox-border-color--active: $--primary-6 !global;
   $--checkbox-indeterminate-color: $--neutral-10 !global;
   $--checkbox-disabled: $border-color !global;
   $--checkbox-disabled-bg-color: rgba(255, 255, 255, 0.16) !global;
diff --git a/styles/themes/dark/components/Input.scss b/styles/themes/dark/components/Input.scss
index 067f91549..82c34a1db 100644
--- a/styles/themes/dark/components/Input.scss
+++ b/styles/themes/dark/components/Input.scss
@@ -3,7 +3,7 @@
     'default': $--n-secondary-text-color,
     'disabled': rgba(255, 255, 255, .2)
   ) !global;
-  $--input-caret-color: $primary-6 !global;
+  $--input-caret-color: $--primary-6 !global;
   $--input-placeholder-color: (
     'default': rgba(255, 255, 255, .3),
     'disabled': rgba(255, 255, 255, .2)
@@ -11,13 +11,13 @@
   $--input-background-color: (
     "default": rgba(255, 255, 255, .1),
     "disabled": rgba(255, 255, 255, .06),
-    "focus": change-color($primary-6, $alpha: 0.1)
+    "focus": change-color($--primary-6, $alpha: 0.1)
   ) !global;
   $--input-icon-color: rgba(255, 255, 255, 0.2) !global;
   $--input-box-shadow: (
     'default': inset 0 0 0 0 transparent,
-    'hover': inset 0 0 0px 1px $primary-6,
-    'focus': (inset 0 0 0px 1px $primary-6, 0 0 8px 0px change-color($primary-6, $alpha: .3)),
+    'hover': inset 0 0 0px 1px $--primary-6,
+    'focus': (inset 0 0 0px 1px $--primary-6, 0 0 8px 0px change-color($--primary-6, $alpha: .3)),
     "disabled": inset 0 0 0 1px transparent
   ) !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/LoadingBar.scss b/styles/themes/dark/components/LoadingBar.scss
index 5b08e3eda..e01d273a8 100644
--- a/styles/themes/dark/components/LoadingBar.scss
+++ b/styles/themes/dark/components/LoadingBar.scss
@@ -1,7 +1,7 @@
 @mixin setup-dark-loading-bar {
   $--loading-bar-background-color: (
     "error": red,
-    "loading": $success-6
+    "loading": $--success-6
   ) !global;
   $--loading-bar-height: 2px !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/NimbusServiceLayout.scss b/styles/themes/dark/components/NimbusServiceLayout.scss
index 769a72aa3..2f0de7fc1 100644
--- a/styles/themes/dark/components/NimbusServiceLayout.scss
+++ b/styles/themes/dark/components/NimbusServiceLayout.scss
@@ -6,5 +6,5 @@
   $service-layout-border-color: $--n-divider-color !global;
   $service-layout-toggle-button-color: rgba(255, 255, 255, .3)!global;
   $service-layout-item-background-image: linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%) !global;
-  $--service-kayout-item-active-color: $primary-6 !global;
+  $--service-kayout-item-active-color: $--primary-6 !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/Tag.scss b/styles/themes/dark/components/Tag.scss
index 2cad25332..20258a378 100644
--- a/styles/themes/dark/components/Tag.scss
+++ b/styles/themes/dark/components/Tag.scss
@@ -1,75 +1,75 @@
 @mixin setup-dark-tag {
   $--tag-color: (
-    'default': $primary-6,
-    'default-disabled': change-color($primary-6, $alpha: .3),
-    'success': $success-6,
-    'success-disabled': change-color($success-6, $alpha: .3),
-    'warning': $warning-6,
-    'warning-disabled': change-color($warning-6, $alpha: .3),
-    'info': $info-6,
-    'info-disabled': change-color($info-6, $alpha: .3),
-    'error': $error-6,
-    'error-disabled': change-color($error-6, $alpha: .3),
+    'default': $--primary-6,
+    'default-disabled': change-color($--primary-6, $alpha: .3),
+    'success': $--success-6,
+    'success-disabled': change-color($--success-6, $alpha: .3),
+    'warning': $--warning-6,
+    'warning-disabled': change-color($--warning-6, $alpha: .3),
+    'info': $--info-6,
+    'info-disabled': change-color($--info-6, $alpha: .3),
+    'error': $--error-6,
+    'error-disabled': change-color($--error-6, $alpha: .3),
   ) !global;
   $--tag-background-color: (
     'default': transparent,
-    'default-hover': change-color($primary-6, $alpha: .2),
-    'default-active': change-color($primary-6, $alpha: .2),
+    'default-hover': change-color($--primary-6, $alpha: .2),
+    'default-active': change-color($--primary-6, $alpha: .2),
     'default-disabled': transparent,
     'success': transparent,
-    'success-hover': change-color($success-6, $alpha: .2),
-    'success-active': change-color($success-6, $alpha: .2),
+    'success-hover': change-color($--success-6, $alpha: .2),
+    'success-active': change-color($--success-6, $alpha: .2),
     'success-disabled': transparent,
     'warning': transparent,
-    'warning-hover': change-color($warning-6, $alpha: .2),
-    'warning-active': change-color($warning-6, $alpha: .2),
+    'warning-hover': change-color($--warning-6, $alpha: .2),
+    'warning-active': change-color($--warning-6, $alpha: .2),
     'warning-disabled': transparent,
     'info': transparent,
-    'info-hover': change-color($info-6, $alpha: .2),
-    'info-active': change-color($info-6, $alpha: .2),
+    'info-hover': change-color($--info-6, $alpha: .2),
+    'info-active': change-color($--info-6, $alpha: .2),
     'info-disabled': transparent,
     'error': transparent,
-    'error-hover': change-color($error-6, $alpha: .2),
-    'error-active': change-color($error-6, $alpha: .2),
+    'error-hover': change-color($--error-6, $alpha: .2),
+    'error-active': change-color($--error-6, $alpha: .2),
     'error-disabled': transparent,
   ) !global;
   $--tag-border-color: (
-    'default': $primary-6,
-    'default-hover': $primary-6,
-    'default-active': $primary-6,
-    'success': $success-6,
-    'success-hover': $success-6,
-    'success-active': $success-6,
-    'warning': $warning-6,
-    'warning-hover': $warning-6,
-    'warning-active': $warning-6,
-    'info': $info-6,
-    'info-hover': $info-6,
-    'info-active': $info-6,
-    'error': $error-6,
-    'error-hover': $error-6,
-    'error-active': $error-6,
+    'default': $--primary-6,
+    'default-hover': $--primary-6,
+    'default-active': $--primary-6,
+    'success': $--success-6,
+    'success-hover': $--success-6,
+    'success-active': $--success-6,
+    'warning': $--warning-6,
+    'warning-hover': $--warning-6,
+    'warning-active': $--warning-6,
+    'info': $--info-6,
+    'info-hover': $--info-6,
+    'info-active': $--info-6,
+    'error': $--error-6,
+    'error-hover': $--error-6,
+    'error-active': $--error-6,
   ) !global;
   $--tag-close-mark-color: (
-    'default': change-color($primary-6, $alpha: .5),
-    'default-hover': change-color($primary-6, $alpha: 1),
-    'default-active': change-color($primary-6, $alpha: .75),
-    'default-disabled': change-color($primary-6, $alpha: .25),
-    'success': change-color($success-6, $alpha: .5),
-    'success-hover': change-color($success-6, $alpha: 1),
-    'success-active': change-color($success-6, $alpha: .75),
-    'success-disabled': change-color($success-6, $alpha: .25),
-    'warning': change-color($warning-6, $alpha: .5),
-    'warning-hover': change-color($warning-6, $alpha: 1),
-    'warning-active': change-color($warning-6, $alpha: .75),
-    'warning-disabled': change-color($warning-6, $alpha: .25),
-    'info': change-color($info-6, $alpha: .5),
-    'info-hover': change-color($info-6, $alpha: 1),
-    'info-active': change-color($info-6, $alpha: .75),
-    'info-disabled': change-color($info-6, $alpha: .25),
-    'error': change-color($error-6, $alpha: .5),
-    'error-hover': change-color($error-6, $alpha: 1),
-    'error-active': change-color($error-6, $alpha: .75),
-    'error-disabled': change-color($error-6, $alpha: .25),
+    'default': change-color($--primary-6, $alpha: .5),
+    'default-hover': change-color($--primary-6, $alpha: 1),
+    'default-active': change-color($--primary-6, $alpha: .75),
+    'default-disabled': change-color($--primary-6, $alpha: .25),
+    'success': change-color($--success-6, $alpha: .5),
+    'success-hover': change-color($--success-6, $alpha: 1),
+    'success-active': change-color($--success-6, $alpha: .75),
+    'success-disabled': change-color($--success-6, $alpha: .25),
+    'warning': change-color($--warning-6, $alpha: .5),
+    'warning-hover': change-color($--warning-6, $alpha: 1),
+    'warning-active': change-color($--warning-6, $alpha: .75),
+    'warning-disabled': change-color($--warning-6, $alpha: .25),
+    'info': change-color($--info-6, $alpha: .5),
+    'info-hover': change-color($--info-6, $alpha: 1),
+    'info-active': change-color($--info-6, $alpha: .75),
+    'info-disabled': change-color($--info-6, $alpha: .25),
+    'error': change-color($--error-6, $alpha: .5),
+    'error-hover': change-color($--error-6, $alpha: 1),
+    'error-active': change-color($--error-6, $alpha: .75),
+    'error-disabled': change-color($--error-6, $alpha: .25),
   ) !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/darkColors.hs.scss b/styles/themes/dark/darkColors.hs.scss
index 64d5e5ff6..9636a01ab 100644
--- a/styles/themes/dark/darkColors.hs.scss
+++ b/styles/themes/dark/darkColors.hs.scss
@@ -9,54 +9,54 @@
   $--neutral-8: #171D33 !global;
   $--neutral-9: #10142C !global;
   $--neutral-10: rgb(0, 0, 0) !global;
-  $primary-1: #e6ffee !global;
-  $primary-2: #9bf2bb !global;
-  $primary-3: #6ee69e !global;
-  $primary-4: #45d985 !global;
-  $primary-5: rgb(103, 235, 190) !global;
-  $primary-6: rgb(99, 226, 183) !global;
-  $primary-7: rgb(97, 218, 177) !global;
-  $primary-8: #007341 !global;
-  $primary-9: #004d2e !global;
-  $primary-10: #002618 !global;
-  $success-1: #e6ffee !global;
-  $success-2: #9bf2bb !global;
-  $success-3: #00E572 !global;
-  $success-4: #45d985 !global;
-  $success-5: #21cc71 !global;
-  $success-6: #00c060 !global;
-  $success-7: #009952 !global;
-  $success-8: #007341 !global;
-  $success-9: #004d2e !global;
-  $success-10: #002618 !global;
-  $info-1: #edfaff !global;
-  $info-2: #c4ebff !global;
-  $info-3: #0082E5 !global;
-  $info-4: #73c7ff !global;
-  $info-5: #49affc !global;
-  $info-6: #3080d0 !global;
-  $info-7: #106dc9 !global;
-  $info-8: #054fa3 !global;
-  $info-9: #00367d !global;
-  $info-10: #002357 !global;
-  $warning-1: #fff8f0 !global;
-  $warning-2: #ffead4 !global;
-  $warning-3: #E8C517 !global;
-  $warning-4: #ffba82 !global;
-  $warning-5: #ff9e59 !global;
-  $warning-6: #ff8030 !global;
-  $warning-7: #d9601e !global;
-  $warning-8: #b34410 !global;
-  $warning-9: #8c2c06 !global;
-  $warning-10: #661c03 !global;
-  $error-1: #fff0f0 !global;
-  $error-2: #ffdee0 !global;
-  $error-3: #ED4A3B !global;
-  $error-4: #eb818f !global;
-  $error-5: #de576d !global;
-  $error-6: #d03050 !global;
-  $error-7: #ab1f3f !global;
-  $error-8: #851130 !global;
-  $error-9: #5e0822 !global;
-  $error-10: #380415 !global;
+  $--primary-1: #e6ffee !global;
+  $--primary-2: #9bf2bb !global;
+  $--primary-3: #6ee69e !global;
+  $--primary-4: #45d985 !global;
+  $--primary-5: rgb(103, 235, 190) !global;
+  $--primary-6: rgb(99, 226, 183) !global;
+  $--primary-7: rgb(97, 218, 177) !global;
+  $--primary-8: #007341 !global;
+  $--primary-9: #004d2e !global;
+  $--primary-10: #002618 !global;
+  $--success-1: #e6ffee !global;
+  $--success-2: #9bf2bb !global;
+  $--success-3: #00E572 !global;
+  $--success-4: #45d985 !global;
+  $--success-5: #21cc71 !global;
+  $--success-6: #00c060 !global;
+  $--success-7: #009952 !global;
+  $--success-8: #007341 !global;
+  $--success-9: #004d2e !global;
+  $--success-10: #002618 !global;
+  $--info-1: #edfaff !global;
+  $--info-2: #c4ebff !global;
+  $--info-3: #0082E5 !global;
+  $--info-4: #73c7ff !global;
+  $--info-5: #49affc !global;
+  $--info-6: #3080d0 !global;
+  $--info-7: #106dc9 !global;
+  $--info-8: #054fa3 !global;
+  $--info-9: #00367d !global;
+  $--info-10: #002357 !global;
+  $--warning-1: #fff8f0 !global;
+  $--warning-2: #ffead4 !global;
+  $--warning-3: #E8C517 !global;
+  $--warning-4: #ffba82 !global;
+  $--warning-5: #ff9e59 !global;
+  $--warning-6: #ff8030 !global;
+  $--warning-7: #d9601e !global;
+  $--warning-8: #b34410 !global;
+  $--warning-9: #8c2c06 !global;
+  $--warning-10: #661c03 !global;
+  $--error-1: #fff0f0 !global;
+  $--error-2: #ffdee0 !global;
+  $--error-3: #ED4A3B !global;
+  $--error-4: #eb818f !global;
+  $--error-5: #de576d !global;
+  $--error-6: #d03050 !global;
+  $--error-7: #ab1f3f !global;
+  $--error-8: #851130 !global;
+  $--error-9: #5e0822 !global;
+  $--error-10: #380415 !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/darkColors.ls.scss b/styles/themes/dark/darkColors.ls.scss
index 5c50e40cc..8a711ef3e 100644
--- a/styles/themes/dark/darkColors.ls.scss
+++ b/styles/themes/dark/darkColors.ls.scss
@@ -9,54 +9,54 @@
   $--neutral-8: #171D33 !global;
   $--neutral-9: #10142C !global;
   $--neutral-10: rgb(0, 0, 0) !global;
-  $primary-1: #e6ffee !global;
-  $primary-2: #9bf2bb !global;
-  $primary-3: #6ee69e !global;
-  $primary-4: #45d985 !global;
-  $primary-5: rgb(103, 235, 190) !global;
-  $primary-6: rgb(99, 226, 183) !global;
-  $primary-7: rgb(97, 218, 177) !global;
-  $primary-8: #007341 !global;
-  $primary-9: #004d2e !global;
-  $primary-10: #002618 !global;
-  $success-1: #e6ffee !global;
-  $success-2: #9bf2bb !global;
-  $success-3: #5BE5AE !global;
-  $success-4: #45d985 !global;
-  $success-5: #21cc71 !global;
-  $success-6: #00c060 !global;
-  $success-7: #009952 !global;
-  $success-8: #007341 !global;
-  $success-9: #004d2e !global;
-  $success-10: #002618 !global;
-  $info-1: #edfaff !global;
-  $info-2: #c4ebff !global;
-  $info-3: #50A4E5 !global;
-  $info-4: #73c7ff !global;
-  $info-5: #49affc !global;
-  $info-6: #3080d0 !global;
-  $info-7: #106dc9 !global;
-  $info-8: #054fa3 !global;
-  $info-9: #00367d !global;
-  $info-10: #002357 !global;
-  $warning-1: #fff8f0 !global;
-  $warning-2: #ffead4 !global;
-  $warning-3: #E8D05C !global;
-  $warning-4: #ffba82 !global;
-  $warning-5: #ff9e59 !global;
-  $warning-6: #ff8030 !global;
-  $warning-7: #d9601e !global;
-  $warning-8: #b34410 !global;
-  $warning-9: #8c2c06 !global;
-  $warning-10: #661c03 !global;
-  $error-1: #fff0f0 !global;
-  $error-2: #ffdee0 !global;
-  $error-3: #EE6C6C !global;
-  $error-4: #eb818f !global;
-  $error-5: #de576d !global;
-  $error-6: #d03050 !global;
-  $error-7: #ab1f3f !global;
-  $error-8: #851130 !global;
-  $error-9: #5e0822 !global;
-  $error-10: #380415 !global;
+  $--primary-1: #e6ffee !global;
+  $--primary-2: #9bf2bb !global;
+  $--primary-3: #6ee69e !global;
+  $--primary-4: #45d985 !global;
+  $--primary-5: rgb(103, 235, 190) !global;
+  $--primary-6: rgb(99, 226, 183) !global;
+  $--primary-7: rgb(97, 218, 177) !global;
+  $--primary-8: #007341 !global;
+  $--primary-9: #004d2e !global;
+  $--primary-10: #002618 !global;
+  $--success-1: #e6ffee !global;
+  $--success-2: #9bf2bb !global;
+  $--success-3: #5BE5AE !global;
+  $--success-4: #45d985 !global;
+  $--success-5: #21cc71 !global;
+  $--success-6: #00c060 !global;
+  $--success-7: #009952 !global;
+  $--success-8: #007341 !global;
+  $--success-9: #004d2e !global;
+  $--success-10: #002618 !global;
+  $--info-1: #edfaff !global;
+  $--info-2: #c4ebff !global;
+  $--info-3: #50A4E5 !global;
+  $--info-4: #73c7ff !global;
+  $--info-5: #49affc !global;
+  $--info-6: #3080d0 !global;
+  $--info-7: #106dc9 !global;
+  $--info-8: #054fa3 !global;
+  $--info-9: #00367d !global;
+  $--info-10: #002357 !global;
+  $--warning-1: #fff8f0 !global;
+  $--warning-2: #ffead4 !global;
+  $--warning-3: #E8D05C !global;
+  $--warning-4: #ffba82 !global;
+  $--warning-5: #ff9e59 !global;
+  $--warning-6: #ff8030 !global;
+  $--warning-7: #d9601e !global;
+  $--warning-8: #b34410 !global;
+  $--warning-9: #8c2c06 !global;
+  $--warning-10: #661c03 !global;
+  $--error-1: #fff0f0 !global;
+  $--error-2: #ffdee0 !global;
+  $--error-3: #EE6C6C !global;
+  $--error-4: #eb818f !global;
+  $--error-5: #de576d !global;
+  $--error-6: #d03050 !global;
+  $--error-7: #ab1f3f !global;
+  $--error-8: #851130 !global;
+  $--error-9: #5e0822 !global;
+  $--error-10: #380415 !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/darkColors.scss b/styles/themes/dark/darkColors.scss
index 097feff24..b1719f280 100644
--- a/styles/themes/dark/darkColors.scss
+++ b/styles/themes/dark/darkColors.scss
@@ -25,54 +25,54 @@
   $--success-hs: rgb(42, 148, 125) !global;
   $--error-hs: rgb(208, 58, 82) !global;
   $--warning-hs: rgb(240, 138, 0) !global;
-  $primary-1: #f0fcf8 !global;
-  $primary-2: #d4f7eb !global;
-  $primary-3: #b8f1de !global;
-  $primary-4: #9becd1 !global;
-  $primary-5: #7fe7c4 !global;
-  $primary-6: #63e2b7 !global;
-  $primary-7: #5acea7 !global;
-  $primary-8: #52b996 !global;
-  $primary-9: #49A586 !global;
-  $primary-10: #409058 !global;
-  $success-1: #f0fcf8 !global;
-  $success-2: #d4f7eb !global;
-  $success-3: #b8f1de !global;
-  $success-4: #9becd1 !global;
-  $success-5: hsl(160, 68%, 70%) !global;
-  $success-6: hsl(160, 69%, 64%) !global;
-  $success-7: #5acea7 !global;
-  $success-8: #52b996 !global;
-  $success-9: #49A586 !global;
-  $success-10: #409058 !global;
-  $info-5: #d8edf8 !global;
-  $info-2: #b1dcf2 !global;
-  $info-3: #a4d6f0 !global;
-  $info-4: #97d1ee !global;
-  $info-5: #8acbec !global;
-  $info-6: #70C0E8 !global;
-  $info-7: #66afd3 !global;
-  $info-8: #5c9ebe !global;
-  $info-9: #528ca9 !global;
-  $info-10: #487b94 !global;
-  $warning-1: #fff8f0 !global;
-  $warning-2: #ffead4 !global;
-  $warning-3: #e0e090 !global;
-  $warning-4: #ffba82 !global;
-  $warning-5: hsl(39, 82%, 78%) !global;
-  $warning-6: hsl(39, 82%, 72%) !global;
-  $warning-7: hsl(44, 73%, 64%) !global;
-  $warning-8: #b34410 !global;
-  $warning-9: #8c2c06 !global;
-  $warning-10: #661c03 !global;
-  $error-1: #fff0f0 !global;
-  $error-2: #ffdee0 !global;
-  $error-3: #e88080 !global;
-  $error-4: #E26363 !global;
-  $error-5: #e98b8b !global;
-  $error-6: #e88080 !global;
-  $error-7: #e57272 !global;
-  $error-8: #851130 !global;
-  $error-9: #5e0822 !global;
-  $error-10: #380415 !global;
+  $--primary-1: #f0fcf8 !global;
+  $--primary-2: #d4f7eb !global;
+  $--primary-3: #b8f1de !global;
+  $--primary-4: #9becd1 !global;
+  $--primary-5: #7fe7c4 !global;
+  $--primary-6: #63e2b7 !global;
+  $--primary-7: #5acea7 !global;
+  $--primary-8: #52b996 !global;
+  $--primary-9: #49A586 !global;
+  $--primary-10: #409058 !global;
+  $--success-1: #f0fcf8 !global;
+  $--success-2: #d4f7eb !global;
+  $--success-3: #b8f1de !global;
+  $--success-4: #9becd1 !global;
+  $--success-5: hsl(160, 68%, 70%) !global;
+  $--success-6: hsl(160, 69%, 64%) !global;
+  $--success-7: #5acea7 !global;
+  $--success-8: #52b996 !global;
+  $--success-9: #49A586 !global;
+  $--success-10: #409058 !global;
+  $--info-5: #d8edf8 !global;
+  $--info-2: #b1dcf2 !global;
+  $--info-3: #a4d6f0 !global;
+  $--info-4: #97d1ee !global;
+  $--info-5: #8acbec !global;
+  $--info-6: #70C0E8 !global;
+  $--info-7: #66afd3 !global;
+  $--info-8: #5c9ebe !global;
+  $--info-9: #528ca9 !global;
+  $--info-10: #487b94 !global;
+  $--warning-1: #fff8f0 !global;
+  $--warning-2: #ffead4 !global;
+  $--warning-3: #e0e090 !global;
+  $--warning-4: #ffba82 !global;
+  $--warning-5: hsl(39, 82%, 78%) !global;
+  $--warning-6: hsl(39, 82%, 72%) !global;
+  $--warning-7: hsl(44, 73%, 64%) !global;
+  $--warning-8: #b34410 !global;
+  $--warning-9: #8c2c06 !global;
+  $--warning-10: #661c03 !global;
+  $--error-1: #fff0f0 !global;
+  $--error-2: #ffdee0 !global;
+  $--error-3: #e88080 !global;
+  $--error-4: #E26363 !global;
+  $--error-5: #e98b8b !global;
+  $--error-6: #e88080 !global;
+  $--error-7: #e57272 !global;
+  $--error-8: #851130 !global;
+  $--error-9: #5e0822 !global;
+  $--error-10: #380415 !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/index.scss b/styles/themes/dark/index.scss
index 9c951c567..f2737540d 100644
--- a/styles/themes/dark/index.scss
+++ b/styles/themes/dark/index.scss
@@ -19,16 +19,18 @@
 @import "components/Badge.scss";
 @import "components/Dropdown.scss";
 @import "components/Input.scss";
+@import "components/Alert.scss";
+@import "components/Anchor.scss";
 
 @mixin setup-dark-theme () {
   @include setup-dark-colors();
-  $--n-primary-color: $primary-6 !global;
-  $--n-primary-hover-color: $primary-5 !global;
-  $--n-primary-active-color: $primary-7 !global;
-  $--n-info-color: $info-6 !global;
-  $--n-success-color: $success-6 !global;
-  $--n-warning-color: $warning-6 !global;
-  $--n-error-color: $error-6 !global;
+  $--n-primary-color: $--primary-6 !global;
+  $--n-primary-hover-color: $--primary-5 !global;
+  $--n-primary-active-color: $--primary-7 !global;
+  $--n-info-color: $--info-6 !global;
+  $--n-success-color: $--success-6 !global;
+  $--n-warning-color: $--warning-6 !global;
+  $--n-error-color: $--error-6 !global;
 
   $--n-text-color: $--text-1 !global;
   $--n-popover-color: $--neutral-1 !global;
@@ -65,4 +67,6 @@
   @include setup-dark-badge;
   @include setup-dark-dropdown;
   @include setup-dark-input;
+  @include setup-dark-anchor;
+  @include setup-dark-alert;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/AdvanceTable.scss b/styles/themes/light/components/AdvanceTable.scss
index 88dafb99a..a4e3a3b61 100644
--- a/styles/themes/light/components/AdvanceTable.scss
+++ b/styles/themes/light/components/AdvanceTable.scss
@@ -1,4 +1,4 @@
 @mixin setup-light-advance-table {
-  $--table-header-icon-color: $primary-6 !global;
+  $--table-header-icon-color: $--primary-6 !global;
   $--table-scrollbar-color: #ababab !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/Alert.scss b/styles/themes/light/components/Alert.scss
new file mode 100644
index 000000000..a1b997a31
--- /dev/null
+++ b/styles/themes/light/components/Alert.scss
@@ -0,0 +1,37 @@
+@mixin setup-light-alert {
+  $--alert-border-color: (
+    'default': white,
+    'success': change-color($--success-6, $alpha: .3),
+    'info': change-color($--info-6, $alpha: .3),
+    'warning': change-color($--warning-6, $alpha: .3),
+    'error': change-color($--error-6, $alpha: .3)
+  ) !global;
+  $--alert-background-color: (
+    'default': white,
+    'success': change-color($--success-6, $alpha: .15),
+    'info': change-color($--info-6, $alpha: .15),
+    'warning': change-color($--warning-6, $alpha: .15),
+    'error': change-color($--error-6, $alpha: .15)
+  ) !global;
+  $--alert-title-text-color: (
+    'default': $--n-text-color,
+    'success': $--n-text-color,
+    'info': $--n-text-color,
+    'warning': $--n-text-color,
+    'error': $--n-text-color
+  ) !global;
+  $--alert-icon-color: (
+    'default': $--success-6,
+    'success': $--success-6,
+    'info': $--info-6,
+    'warning': $--warning-6,
+    'error': $--error-6
+  ) !global;
+  $--alert-content-text-color: (
+    'default': $--n-secondary-text-color,
+    'success': $--n-secondary-text-color,
+    'info': $--n-secondary-text-color,
+    'warning': $--n-secondary-text-color,
+    'error': $--n-secondary-text-color,
+  ) !global;
+}
\ No newline at end of file
diff --git a/styles/themes/light/components/Anchor.scss b/styles/themes/light/components/Anchor.scss
new file mode 100644
index 000000000..9d86c8481
--- /dev/null
+++ b/styles/themes/light/components/Anchor.scss
@@ -0,0 +1,3 @@
+@mixin setup-light-anchor {
+  
+}
\ No newline at end of file
diff --git a/styles/themes/light/components/Badge.scss b/styles/themes/light/components/Badge.scss
index 3f3443058..87cfc748a 100644
--- a/styles/themes/light/components/Badge.scss
+++ b/styles/themes/light/components/Badge.scss
@@ -1,17 +1,17 @@
 @mixin setup-light-badge {
   $--badge-background-color: (
-    "default": $error-6,
-    "info": $info-6,
-    "success": $success-6,
-    "warning": $warning-6,
-    "error": $error-6 
+    "default": $--error-6,
+    "info": $--info-6,
+    "success": $--success-6,
+    "warning": $--warning-6,
+    "error": $--error-6 
   ) !global;
   $--badge-rippling-color: (
-    "default": $error-6,
-    "info": $info-6,
-    "success": $success-6,
-    "warning": $warning-6,
-    "error": $error-6
+    "default": $--error-6,
+    "info": $--info-6,
+    "success": $--success-6,
+    "warning": $--warning-6,
+    "error": $--error-6
   ) !global; 
   $--badge-rippling-start-opacity: .4 !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/BaseCancelMark.scss b/styles/themes/light/components/BaseCancelMark.scss
index e875f15ab..9ada8912f 100644
--- a/styles/themes/light/components/BaseCancelMark.scss
+++ b/styles/themes/light/components/BaseCancelMark.scss
@@ -1,11 +1,11 @@
 @mixin setup-light-base-cancel-mark {
   $--base-cancel-mark-cross-color: (
     "default": $--n-border-color,
-    "hover": $primary-5,
-    "active": $primary-7
+    "hover": $--primary-5,
+    "active": $--primary-7
   ) !global;
   $--base-cancel-mark-arrow-color: (
     "default": $--n-border-color,
-    "active": $primary-6
+    "active": $--primary-6
   ) !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/BasePicker.scss b/styles/themes/light/components/BasePicker.scss
index 47863d4c9..4ef0e074a 100644
--- a/styles/themes/light/components/BasePicker.scss
+++ b/styles/themes/light/components/BasePicker.scss
@@ -11,9 +11,9 @@
   ) !global;
   $--base-picker-box-shadow: (
     "default": inset 0 0 0 1px $--n-border-color,
-    "hover": inset 0 0 0 1px $primary-5,
-    "active": inset 0 0 0 1px $primary-5,
-    "focus": (inset 0 0 0 1px $primary-5, 0 0 0 2px change-color($primary-5, $alpha: .3)),
+    "hover": inset 0 0 0 1px $--primary-5,
+    "active": inset 0 0 0 1px $--primary-5,
+    "focus": (inset 0 0 0 1px $--primary-5, 0 0 0 2px change-color($--primary-5, $alpha: .3)),
     "disabled": inset 0 0 0 1px $--n-border-color
   ) !global;
   $--base-picker-caret-color: unset !global;
diff --git a/styles/themes/light/components/BaseSelectMenu.scss b/styles/themes/light/components/BaseSelectMenu.scss
index a9c757930..3ed653e01 100644
--- a/styles/themes/light/components/BaseSelectMenu.scss
+++ b/styles/themes/light/components/BaseSelectMenu.scss
@@ -6,5 +6,5 @@
   ) !global;
   $--base-select-menu-background-color: white !global;
   $--base-select-menu-box-shadow: none !global;
-  $--base-select-menu-light-bar-background-color: change-color($primary-6, $alpha: .15) !global;
+  $--base-select-menu-light-bar-background-color: change-color($--primary-6, $alpha: .15) !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/Button.scss b/styles/themes/light/components/Button.scss
index 8c321617f..9f7573ef7 100644
--- a/styles/themes/light/components/Button.scss
+++ b/styles/themes/light/components/Button.scss
@@ -33,11 +33,11 @@
   ) !global;
   $button-border-color: (
     "default":  $--n-border-color,
-    "primary": $primary-6,
-    "info": $info-6,
-    "success": $success-6,
-    "warning": $warning-6,
-    "error": $error-6
+    "primary": $--primary-6,
+    "info": $--info-6,
+    "success": $--success-6,
+    "warning": $--warning-6,
+    "error": $--error-6
   ) !global;
   $button-box-shadow-spread: 0px !global;
   $button-box-shadow-ripple-spread: 4px !global;
@@ -87,60 +87,60 @@
     "default-focus": mix($--n-border-color, white, $button-ghost-focus-weight),
     "default-hover": mix($--n-border-color, white, $button-ghost-hover-weight),
     "default-active": mix($--n-border-color, white, $button-ghost-active-weight),
-    "primary": $primary-6,
-    "primary-focus": $primary-5,
-    "primary-hover": $primary-5,
-    "primary-active": $primary-7,
-    "info": $info-6,
-    "info-focus": $info-5,
-    "info-hover": $info-5,
-    "info-active": $info-7,
-    "success": $success-6,
-    "success-focus": $success-5,
-    "success-hover": $success-5,
-    "success-active": $success-7,
-    "warning": $warning-6,
-    "warning-focus": $warning-5,
-    "warning-hover": $warning-5,
-    "warning-active": $warning-7,
-    "error": $error-6,
-    "error-focus": $error-5,
-    "error-hover": $error-5,
-    "error-active": $error-7,
+    "primary": $--primary-6,
+    "primary-focus": $--primary-5,
+    "primary-hover": $--primary-5,
+    "primary-active": $--primary-7,
+    "info": $--info-6,
+    "info-focus": $--info-5,
+    "info-hover": $--info-5,
+    "info-active": $--info-7,
+    "success": $--success-6,
+    "success-focus": $--success-5,
+    "success-hover": $--success-5,
+    "success-active": $--success-7,
+    "warning": $--warning-6,
+    "warning-focus": $--warning-5,
+    "warning-hover": $--warning-5,
+    "warning-active": $--warning-7,
+    "error": $--error-6,
+    "error-focus": $--error-5,
+    "error-hover": $--error-5,
+    "error-active": $--error-7,
   ) !global;
   $ghost-button-background-color: (
     "default": change-color($--n-secondary-text-color, $alpha: $button-ghost-alpha),
     "default-focus": change-color($--n-secondary-text-color, $alpha: $button-ghost-focus-alpha),
     "default-hover": change-color($--n-secondary-text-color, $alpha: $button-ghost-hover-alpha),
     "default-active": change-color($--n-secondary-text-color, $alpha: $button-ghost-active-alpha),
-    "primary": change-color($primary-6, $alpha: $button-ghost-alpha),
-    "primary-focus": change-color($primary-6, $alpha: $button-ghost-focus-alpha),
-    "primary-hover": change-color($primary-6, $alpha: $button-ghost-hover-alpha),
-    "primary-active": change-color($primary-6, $alpha: $button-ghost-active-alpha),
-    "info": change-color($info-6, $alpha: $button-ghost-alpha),
-    "info-focus": change-color($info-6, $alpha: $button-ghost-focus-alpha),
-    "info-hover": change-color($info-6, $alpha: $button-ghost-hover-alpha),
-    "info-active": change-color($info-6, $alpha: $button-ghost-active-alpha),
-    "success": change-color($success-6, $alpha: $button-ghost-alpha),
-    "success-focus": change-color($success-6, $alpha: $button-ghost-focus-alpha),
-    "success-hover": change-color($success-6, $alpha: $button-ghost-hover-alpha),
-    "success-active": change-color($success-6, $alpha: $button-ghost-active-alpha),
-    "error": change-color($error-6, $alpha: $button-ghost-alpha),
-    "error-focus": change-color($error-6, $alpha: $button-ghost-focus-alpha),
-    "error-hover": change-color($error-6, $alpha: $button-ghost-hover-alpha),
-    "error-active": change-color($error-6, $alpha: $button-ghost-active-alpha),
-    "warning": change-color($warning-6, $alpha: $button-ghost-alpha),
-    "warning-focus": change-color($warning-6, $alpha: $button-ghost-focus-alpha),
-    "warning-hover": change-color($warning-6, $alpha: $button-ghost-hover-alpha),
-    "warning-active": change-color($warning-6, $alpha: $button-ghost-active-alpha),
+    "primary": change-color($--primary-6, $alpha: $button-ghost-alpha),
+    "primary-focus": change-color($--primary-6, $alpha: $button-ghost-focus-alpha),
+    "primary-hover": change-color($--primary-6, $alpha: $button-ghost-hover-alpha),
+    "primary-active": change-color($--primary-6, $alpha: $button-ghost-active-alpha),
+    "info": change-color($--info-6, $alpha: $button-ghost-alpha),
+    "info-focus": change-color($--info-6, $alpha: $button-ghost-focus-alpha),
+    "info-hover": change-color($--info-6, $alpha: $button-ghost-hover-alpha),
+    "info-active": change-color($--info-6, $alpha: $button-ghost-active-alpha),
+    "success": change-color($--success-6, $alpha: $button-ghost-alpha),
+    "success-focus": change-color($--success-6, $alpha: $button-ghost-focus-alpha),
+    "success-hover": change-color($--success-6, $alpha: $button-ghost-hover-alpha),
+    "success-active": change-color($--success-6, $alpha: $button-ghost-active-alpha),
+    "error": change-color($--error-6, $alpha: $button-ghost-alpha),
+    "error-focus": change-color($--error-6, $alpha: $button-ghost-focus-alpha),
+    "error-hover": change-color($--error-6, $alpha: $button-ghost-hover-alpha),
+    "error-active": change-color($--error-6, $alpha: $button-ghost-active-alpha),
+    "warning": change-color($--warning-6, $alpha: $button-ghost-alpha),
+    "warning-focus": change-color($--warning-6, $alpha: $button-ghost-focus-alpha),
+    "warning-hover": change-color($--warning-6, $alpha: $button-ghost-hover-alpha),
+    "warning-active": change-color($--warning-6, $alpha: $button-ghost-active-alpha),
   ) !global;
   $ghost-button-color: (
     "default": $--n-secondary-text-color,
-    "primary": $primary-6,
-    "info": $info-6,
-    "success": $success-6,
-    "warning": $warning-6,
-    "error": $error-6
+    "primary": $--primary-6,
+    "info": $--info-6,
+    "success": $--success-6,
+    "warning": $--warning-6,
+    "error": $--error-6
   )!global;
   $button-color: (
     "default": $--n-secondary-text-color,
diff --git a/styles/themes/light/components/CheckBox.scss b/styles/themes/light/components/CheckBox.scss
index 543ad5fb6..39c99cbca 100644
--- a/styles/themes/light/components/CheckBox.scss
+++ b/styles/themes/light/components/CheckBox.scss
@@ -1,7 +1,7 @@
 @mixin setup-light-checkbox {
   $--checkbox-font-color: $neutral-3 !global;
   $--checkbox-border-color: $neutral-5 !global;
-  $--checkbox-border-color--active: $primary-6 !global;
+  $--checkbox-border-color--active: $--primary-6 !global;
   $--checkbox-indeterminate-color: $neutral-10 !global;
   $--checkbox-disabled: $neutral-5 !global;
   $--checkbox-disabled-bg-color: $neutral-8 !global;
diff --git a/styles/themes/light/components/Dropdown.scss b/styles/themes/light/components/Dropdown.scss
index c5f7e9527..84330e829 100644
--- a/styles/themes/light/components/Dropdown.scss
+++ b/styles/themes/light/components/Dropdown.scss
@@ -1,5 +1,5 @@
 @mixin setup-light-dropdown {
   $--dropdown-menu-bg-color: #fff !global;
   $--dropdown-item-hover-bg-color: #E8E8E8 !global;
-  $--dropdown-item-hover-font-color: $primary-6 !global;
+  $--dropdown-item-hover-font-color: $--primary-6 !global;
 }
diff --git a/styles/themes/light/components/Input.scss b/styles/themes/light/components/Input.scss
index d317ab9db..ddf4f3a04 100644
--- a/styles/themes/light/components/Input.scss
+++ b/styles/themes/light/components/Input.scss
@@ -16,8 +16,8 @@
   $--input-icon-color: $--n-disabled-text-color !global;
   $--input-box-shadow: (
     "default": inset 0 0 0 1px $--n-border-color,
-    "hover": inset 0 0 0 1px $primary-5,
-    "focus": (inset 0 0 0 1px $primary-5, 0 0 0 2px change-color($primary-5, $alpha: .3)),
+    "hover": inset 0 0 0 1px $--primary-5,
+    "focus": (inset 0 0 0 1px $--primary-5, 0 0 0 2px change-color($--primary-5, $alpha: .3)),
     "disabled": inset 0 0 0 1px $--n-border-color
   ) !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/LoadingBar.scss b/styles/themes/light/components/LoadingBar.scss
index 2e0974a2b..4e6ef6c9c 100644
--- a/styles/themes/light/components/LoadingBar.scss
+++ b/styles/themes/light/components/LoadingBar.scss
@@ -1,7 +1,7 @@
 @mixin setup-light-loading-bar {
   $--loading-bar-background-color: (
-    "error": $error-6,
-    "loading": $success-6
+    "error": $--error-6,
+    "loading": $--success-6
   ) !global;
   $--loading-bar-height: 2px !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/Message.scss b/styles/themes/light/components/Message.scss
index 707f19bfa..c803a4c2a 100644
--- a/styles/themes/light/components/Message.scss
+++ b/styles/themes/light/components/Message.scss
@@ -2,10 +2,10 @@
   $--message-text-color: white !global;
   $--message-icon-color: rgba(255, 255, 255, .45) !global;
   $--message-background-color: (
-    "info": $info-6,
-    "success": $success-6,
-    "error": $error-6,
-    "warning": $warning-6
+    "info": $--info-6,
+    "success": $--success-6,
+    "error": $--error-6,
+    "warning": $--warning-6
   ) !global;
   $--message-box-shadow: (
     "info": 0px 2px 20px 0px rgba(0, 0, 0, .3),
diff --git a/styles/themes/light/components/NimbusServiceLayout.scss b/styles/themes/light/components/NimbusServiceLayout.scss
index 1f636ff37..c6f1cdca6 100644
--- a/styles/themes/light/components/NimbusServiceLayout.scss
+++ b/styles/themes/light/components/NimbusServiceLayout.scss
@@ -6,5 +6,5 @@
   $service-layout-border-color: $--n-divider-color !global;
   $service-layout-toggle-button-color: rgba(0, 0, 0, .15)!global;
   $service-layout-item-background-image: linear-gradient(47deg, $neutral-7, $neutral-7) !global;
-  $--service-kayout-item-active-color: $primary-6 !global;
+  $--service-kayout-item-active-color: $--primary-6 !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/Tag.scss b/styles/themes/light/components/Tag.scss
index e0ace9ec0..6d0bcb694 100644
--- a/styles/themes/light/components/Tag.scss
+++ b/styles/themes/light/components/Tag.scss
@@ -2,13 +2,13 @@
   $--tag-color: (
     'default': $--n-secondary-text-color,
     'default-disabled': $--n-disabled-text-color,
-    'success': $success-6,
+    'success': $--success-6,
     'success-disabled': $--n-disabled-text-color,
-    'warning': $warning-6,
+    'warning': $--warning-6,
     'warning-disabled': $--n-disabled-text-color,
-    'info': $info-6,
+    'info': $--info-6,
     'info-disabled': $--n-disabled-text-color,
-    'error': $error-6,
+    'error': $--error-6,
     'error-disabled': $--n-disabled-text-color,
   ) !global;
   $--tag-background-color: (
@@ -16,21 +16,21 @@
     'default-hover': $neutral-9,
     'default-active': $neutral-9,
     'default-disabled': $neutral-9,
-    'success': change-color($success-6, $alpha: .1),
-    'success-hover': change-color($success-6, $alpha: .1),
-    'success-active': change-color($success-6, $alpha: .1),
+    'success': change-color($--success-6, $alpha: .1),
+    'success-hover': change-color($--success-6, $alpha: .1),
+    'success-active': change-color($--success-6, $alpha: .1),
     'success-disabled': $neutral-9,
-    'warning': change-color($warning-6, $alpha: .1),
-    'warning-hover': change-color($warning-6, $alpha: .1),
-    'warning-active': change-color($warning-6, $alpha: .1),
+    'warning': change-color($--warning-6, $alpha: .1),
+    'warning-hover': change-color($--warning-6, $alpha: .1),
+    'warning-active': change-color($--warning-6, $alpha: .1),
     'warning-disabled': $neutral-9,
-    'info': change-color($info-6, $alpha: .1),
-    'info-hover': change-color($info-6, $alpha: .1),
-    'info-active': change-color($info-6, $alpha: .1),
+    'info': change-color($--info-6, $alpha: .1),
+    'info-hover': change-color($--info-6, $alpha: .1),
+    'info-active': change-color($--info-6, $alpha: .1),
     'info-disabled': $neutral-9,
-    'error': change-color($error-6, $alpha: .1),
-    'error-hover': change-color($error-6, $alpha: .1),
-    'error-active': change-color($error-6, $alpha: .1),
+    'error': change-color($--error-6, $alpha: .1),
+    'error-hover': change-color($--error-6, $alpha: .1),
+    'error-active': change-color($--error-6, $alpha: .1),
     'error-disabled': $neutral-9,
   ) !global;
   $--tag-border-color: (
@@ -38,19 +38,19 @@
     'default-hover': transparent,
     'default-active': transparent,
     'default-disabled': $--n-border-color,
-    'success': $success-3,
+    'success': $--success-3,
     'success-hover': transparent,
     'success-active': transparent,
     'success-disabled': $--n-border-color,
-    'warning': $warning-3,
+    'warning': $--warning-3,
     'warning-hover': transparent,
     'warning-active': transparent,
     'warning-disabled': $--n-border-color,
-    'info': $info-3,
+    'info': $--info-3,
     'info-hover': transparent,
     'info-active': transparent,
     'info-disabled': $--n-border-color,
-    'error': $error-3,
+    'error': $--error-3,
     'error-hover': transparent,
     'error-active': transparent,
     'error-disabled': $--n-border-color,
@@ -60,21 +60,21 @@
     'default-hover': change-color($--n-secondary-text-color, $alpha: 1),
     'default-active': change-color($--n-secondary-text-color, $alpha: .75),
     'default-disabled': change-color($--n-disabled-text-color, $alpha: .5),
-    'success': change-color($success-6, $alpha: .5),
-    'success-hover': change-color($success-6, $alpha: 1),
-    'success-active': change-color($success-6, $alpha: .75),
+    'success': change-color($--success-6, $alpha: .5),
+    'success-hover': change-color($--success-6, $alpha: 1),
+    'success-active': change-color($--success-6, $alpha: .75),
     'success-disabled': change-color($--n-disabled-text-color, $alpha: .5),
-    'warning': change-color($warning-6, $alpha: .5),
-    'warning-hover': change-color($warning-6, $alpha: 1),
-    'warning-active': change-color($warning-6, $alpha: .75),
+    'warning': change-color($--warning-6, $alpha: .5),
+    'warning-hover': change-color($--warning-6, $alpha: 1),
+    'warning-active': change-color($--warning-6, $alpha: .75),
     'warning-disabled':change-color($--n-disabled-text-color, $alpha: .5),
-    'info': change-color($info-6, $alpha: .5),
-    'info-hover': change-color($info-6, $alpha: 1),
-    'info-active': change-color($info-6, $alpha: .75),
+    'info': change-color($--info-6, $alpha: .5),
+    'info-hover': change-color($--info-6, $alpha: 1),
+    'info-active': change-color($--info-6, $alpha: .75),
     'info-disabled': change-color($--n-disabled-text-color, $alpha: .5),
-    'error': change-color($error-6, $alpha: .5),
-    'error-hover': change-color($error-6, $alpha: 1),
-    'error-active': change-color($error-6, $alpha: .75),
+    'error': change-color($--error-6, $alpha: .5),
+    'error-hover': change-color($--error-6, $alpha: 1),
+    'error-active': change-color($--error-6, $alpha: .75),
     'error-disabled': change-color($--n-disabled-text-color, $alpha: .5),
   ) !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss
index c9a2bcd8a..91e164b39 100644
--- a/styles/themes/light/index.scss
+++ b/styles/themes/light/index.scss
@@ -19,16 +19,18 @@
 @import "components/Badge.scss";
 @import "components/Dropdown.scss";
 @import "components/Input.scss";
+@import "components/Alert.scss";
+@import "components/Anchor.scss";
 
 @mixin setup-light-theme () {
   @include setup-light-colors();
-  $--n-primary-color: $primary-6 !global;
-  $--n-primary-hover-color: $primary-5 !global;
-  $--n-primary-active-color: $primary-7 !global;
-  $--n-info-color: $info-6 !global;
-  $--n-success-color: $success-6 !global;
-  $--n-warning-color: $warning-6 !global;
-  $--n-error-color: $error-6 !global;
+  $--n-primary-color: $--primary-6 !global;
+  $--n-primary-hover-color: $--primary-5 !global;
+  $--n-primary-active-color: $--primary-7 !global;
+  $--n-info-color: $--info-6 !global;
+  $--n-success-color: $--success-6 !global;
+  $--n-warning-color: $--warning-6 !global;
+  $--n-error-color: $--error-6 !global;
   
   $n-selected-color: $neutral-7 !global;
   $--n-divider-color: $neutral-7 !global;
@@ -61,4 +63,6 @@
   @include setup-light-badge;
   @include setup-light-dropdown;
   @include setup-light-input;
+  @include setup-light-anchor;
+  @include setup-light-alert;
 }
\ No newline at end of file
diff --git a/styles/themes/light/lightColors.bak.scss b/styles/themes/light/lightColors.bak.scss
index 6eca7bc86..85ca376b1 100644
--- a/styles/themes/light/lightColors.bak.scss
+++ b/styles/themes/light/lightColors.bak.scss
@@ -11,54 +11,54 @@
   $neutral-3: rgba(0, 0, 0, 1) !global;
   $neutral-3: rgba(0, 0, 0, 1) !global;
   $neutral-3: rgba(0, 0, 0, 1) !global;
-  $primary-1: #e6ffee !global;
-  $primary-2: #9bf2bb !global;
-  $primary-3: #6ee69e !global;
-  $primary-4: #45d985 !global;
-  $primary-5: #21cc71 !global;
-  $primary-6: #00c060 !global;
-  $primary-7: #009952 !global;
-  $primary-8: #007341 !global;
-  $primary-9: #004d2e !global;
-  $primary-10: #002618 !global;
-  $success-1: #e6ffee !global;
-  $success-2: #9bf2bb !global;
-  $success-3: #6ee69e !global;
-  $success-4: #45d985 !global;
-  $success-5: #21cc71 !global;
-  $success-6: #00c060 !global;
-  $success-7: #009952 !global;
-  $success-8: #007341 !global;
-  $success-9: #004d2e !global;
-  $success-10: #002618 !global;
-  $info-1: #edfaff !global;
-  $info-2: #c4ebff !global;
-  $info-3: #9cdbff !global;
-  $info-4: #73c7ff !global;
-  $info-5: #49affc !global;
-  $info-6: #2090f0 !global;
-  $info-7: #106dc9 !global;
-  $info-8: #054fa3 !global;
-  $info-9: #00367d !global;
-  $info-10: #002357 !global;
-  $warning-1: #fff8f0 !global;
-  $warning-2: #ffead4 !global;
-  $warning-3: #ffd4ab !global;
-  $warning-4: #ffba82 !global;
-  $warning-5: #ff9e59 !global;
-  $warning-6: #ff8030 !global;
-  $warning-7: #d9601e !global;
-  $warning-8: #b34410 !global;
-  $warning-9: #8c2c06 !global;
-  $warning-10: #661c03 !global;
-  $error-1: #fff0f0 !global;
-  $error-2: #ffc7cb !global;
-  $error-3: #ff9ea8 !global;
-  $error-4: #fa7385 !global;
-  $error-5: #ed4763 !global;
-  $error-6: #e02048 !global;
-  $error-7: #ba1138 !global;
-  $error-8: #94062c !global;
-  $error-9: #6e0021 !global;
-  $error-10: #470018 !global;
+  $--primary-1: #e6ffee !global;
+  $--primary-2: #9bf2bb !global;
+  $--primary-3: #6ee69e !global;
+  $--primary-4: #45d985 !global;
+  $--primary-5: #21cc71 !global;
+  $--primary-6: #00c060 !global;
+  $--primary-7: #009952 !global;
+  $--primary-8: #007341 !global;
+  $--primary-9: #004d2e !global;
+  $--primary-10: #002618 !global;
+  $--success-1: #e6ffee !global;
+  $--success-2: #9bf2bb !global;
+  $--success-3: #6ee69e !global;
+  $--success-4: #45d985 !global;
+  $--success-5: #21cc71 !global;
+  $--success-6: #00c060 !global;
+  $--success-7: #009952 !global;
+  $--success-8: #007341 !global;
+  $--success-9: #004d2e !global;
+  $--success-10: #002618 !global;
+  $--info-1: #edfaff !global;
+  $--info-2: #c4ebff !global;
+  $--info-3: #9cdbff !global;
+  $--info-4: #73c7ff !global;
+  $--info-5: #49affc !global;
+  $--info-6: #2090f0 !global;
+  $--info-7: #106dc9 !global;
+  $--info-8: #054fa3 !global;
+  $--info-9: #00367d !global;
+  $--info-10: #002357 !global;
+  $--warning-1: #fff8f0 !global;
+  $--warning-2: #ffead4 !global;
+  $--warning-3: #ffd4ab !global;
+  $--warning-4: #ffba82 !global;
+  $--warning-5: #ff9e59 !global;
+  $--warning-6: #ff8030 !global;
+  $--warning-7: #d9601e !global;
+  $--warning-8: #b34410 !global;
+  $--warning-9: #8c2c06 !global;
+  $--warning-10: #661c03 !global;
+  $--error-1: #fff0f0 !global;
+  $--error-2: #ffc7cb !global;
+  $--error-3: #ff9ea8 !global;
+  $--error-4: #fa7385 !global;
+  $--error-5: #ed4763 !global;
+  $--error-6: #e02048 !global;
+  $--error-7: #ba1138 !global;
+  $--error-8: #94062c !global;
+  $--error-9: #6e0021 !global;
+  $--error-10: #470018 !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/lightColors.scss b/styles/themes/light/lightColors.scss
index 91a71d1c3..a79a5973e 100644
--- a/styles/themes/light/lightColors.scss
+++ b/styles/themes/light/lightColors.scss
@@ -19,54 +19,54 @@
   $neutral-8: rgb(244, 244, 244) !global;
   $neutral-9: rgb(250, 250, 250) !global;
   $neutral-10: rgb(255, 255, 255) !global;
-  $primary-1: #d9f1e1 !global;
-  $primary-2: #a7d4b6 !global;
-  $primary-3: #7dc798 !global;
-  $primary-4: #57ba7f !global;
-  $primary-5: #36ad6a !global;
-  $primary-6: #18a058 !global;
-  $primary-7: #0c7a43 !global;
-  $primary-8: #04542f !global;
-  $primary-9: #002e1a !global;
-  $primary-10: #000805 !global;
-  $success-1: #d3e0d7 !global;
-  $success-2: #a7d4b6 !global;
-  $success-3: #7dc798 !global;
-  $success-4: #57ba7f !global;
-  $success-5: #36b46a !global;
-  $success-6: #18a058 !global;
-  $success-7: #0c7a43 !global;
-  $success-8: #04542f !global;
-  $success-9: #002e1a !global;
-  $success-10: #000805 !global;
-  $info-1: #edfaff !global;
-  $info-2: #c4e8ff !global;
-  $info-3: #9cd4ff !global;
-  $info-4: #73beff !global;
-  $info-5: #4098fc !global;
-  $info-6: #2080f0 !global;
-  $info-7: #1060c9 !global;
-  $info-8: #0544a3 !global;
-  $info-9: #002e7d !global;
-  $info-10: #001d57 !global;
-  $warning-1: #fffbed !global;
-  $warning-2: #fff0c4 !global;
-  $warning-3: #ffe39c !global;
-  $warning-4: #ffd373 !global;
-  $warning-5: #fcb040 !global;
-  $warning-6: #f0a020 !global;
-  $warning-7: #c97c10 !global;
-  $warning-8: #a35c05 !global;
-  $warning-9: #7d4100 !global;
-  $warning-10: #572a00 !global;
-  $error-1: #fff0f0 !global;
-  $error-2: #ffdee0 !global;
-  $error-3: #f7b0b7 !global;
-  $error-4: #eb818f !global;
-  $error-5: #de576d !global;
-  $error-6: #d03050 !global;
-  $error-7: #ab1f3f !global;
-  $error-8: #851130 !global;
-  $error-9: #5e0822 !global;
-  $error-10: #380415 !global;
+  $--primary-1: #d9f1e1 !global;
+  $--primary-2: #a7d4b6 !global;
+  $--primary-3: #7dc798 !global;
+  $--primary-4: #57ba7f !global;
+  $--primary-5: #36ad6a !global;
+  $--primary-6: #18a058 !global;
+  $--primary-7: #0c7a43 !global;
+  $--primary-8: #04542f !global;
+  $--primary-9: #002e1a !global;
+  $--primary-10: #000805 !global;
+  $--success-1: #d3e0d7 !global;
+  $--success-2: #a7d4b6 !global;
+  $--success-3: #7dc798 !global;
+  $--success-4: #57ba7f !global;
+  $--success-5: #36b46a !global;
+  $--success-6: #18a058 !global;
+  $--success-7: #0c7a43 !global;
+  $--success-8: #04542f !global;
+  $--success-9: #002e1a !global;
+  $--success-10: #000805 !global;
+  $--info-1: #edfaff !global;
+  $--info-2: #c4e8ff !global;
+  $--info-3: #9cd4ff !global;
+  $--info-4: #73beff !global;
+  $--info-5: #4098fc !global;
+  $--info-6: #2080f0 !global;
+  $--info-7: #1060c9 !global;
+  $--info-8: #0544a3 !global;
+  $--info-9: #002e7d !global;
+  $--info-10: #001d57 !global;
+  $--warning-1: #fffbed !global;
+  $--warning-2: #fff0c4 !global;
+  $--warning-3: #ffe39c !global;
+  $--warning-4: #ffd373 !global;
+  $--warning-5: #fcb040 !global;
+  $--warning-6: #f0a020 !global;
+  $--warning-7: #c97c10 !global;
+  $--warning-8: #a35c05 !global;
+  $--warning-9: #7d4100 !global;
+  $--warning-10: #572a00 !global;
+  $--error-1: #fff0f0 !global;
+  $--error-2: #ffdee0 !global;
+  $--error-3: #f7b0b7 !global;
+  $--error-4: #eb818f !global;
+  $--error-5: #de576d !global;
+  $--error-6: #d03050 !global;
+  $--error-7: #ab1f3f !global;
+  $--error-8: #851130 !global;
+  $--error-9: #5e0822 !global;
+  $--error-10: #380415 !global;
 }
\ No newline at end of file
diff --git a/styles/themes/vars.scss b/styles/themes/vars.scss
index 0092b5136..9a4fa2c54 100644
--- a/styles/themes/vars.scss
+++ b/styles/themes/vars.scss
@@ -172,7 +172,7 @@ $small-font-size: 12px;
 $normal-font-size: $regular-font-size;
 $meta-font-size: $small-font-size;
 
-$primary-text-color: rgba(255, 255, 255, .8);
+$--primary-text-color: rgba(255, 255, 255, .8);
 $regular-text-color: rgba(255, 255, 255, .6);
 $secondary-text-color: rgba(255, 255, 255, .4);