@appscode/design-system 2.0.41-alpha.1 → 2.0.41-alpha.11

package/main.scss

@@ -21,4 +21,4 @@
 @import "@/components/vue-components/styles/components/form-fields/input";
 @import "@/components/vue-components/styles/components/ui-builder/vue-open-api";
 @import "@/components/vue-components/styles/components/ui-builder/ui-builder";
-@import "@/components/vue-components/styles/theme/appscode.scss";
+// @import "@/components/vue-components/styles/theme/appscode.scss";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.0.41-alpha.1",
+  "version": "2.0.41-alpha.11",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/styles/base/utilities/_all.scss

@@ -1,4 +1,6 @@
 // @import "colors";
+@import "root-variables";
+@import "generate-color-classes";
 @import "typography";
 @import "mixin";
 @import "extended";
@@ -6,4 +8,4 @@
 @import "grid";
 @import "spacing";
 @import "layouts";
-// @import "dark-theme";
+// @import "dark-theme";

package/vue-components/styles/base/utilities/_colors.scss

@@ -1,8 +1,6 @@
-:root {
-  --primary-hue: 208;
-  --primary-saturation: 77%;
-  --primary-light: 40%;
-}
+// :root {
+//   --theme-mode: light;
+// }
 
 // white and black
 $white-100: hsl(0, 0%, 100%);
@@ -12,6 +10,7 @@ $black-100: hsl(0, 0%, 0%);
 $primary-hue: var(--primary-hue);
 $primary-saturation: var(--primary-saturation);
 $primary-light: var(--primary-light);
+// $theme-mode: var(--theme-mode);
 
 $primary-5: hsl($primary-hue, $primary-saturation, 5%);
 $primary-10: hsl($primary-hue, $primary-saturation, 10%);
@@ -148,260 +147,6 @@ $black-93: hsl($black-hue, $black-saturation, 93%);
 $black-95: hsl($black-hue, $black-saturation, 95%);
 $black-97: hsl($black-hue, $black-saturation, 97%);
 
-// classes
-@mixin generate-color-classes($type, $color, $h, $s, $from, $to, $step) {
-  $i: $from;
-
-  @while $i <=$to {
-    .#{$type}-#{$color}-#{$i} {
-      #{if($type == "text", "color", "background-color")}: hsl($h, $s, $i * 1%);
-    }
-
-    $i: $i + $step;
-  }
-}
-
-// for primary classes
-@include generate-color-classes(
-  "text",
-  "primary",
-  $primary-hue,
-  $primary-saturation,
-  10,
-  90,
-  10
-);
-
-@include generate-color-classes(
-  "bg",
-  "primary",
-  $primary-hue,
-  $primary-saturation,
-  10,
-  90,
-  10
-);
-
-@include generate-color-classes(
-  "text",
-  "primary",
-  $primary-hue,
-  $primary-saturation,
-  5,
-  5,
-  1
-);
-
-@include generate-color-classes(
-  "bg",
-  "primary",
-  $primary-hue,
-  $primary-saturation,
-  5,
-  5,
-  1
-);
-
-@include generate-color-classes(
-  "text",
-  "primary",
-  $primary-hue,
-  $primary-saturation,
-  93,
-  97,
-  2
-);
-
-@include generate-color-classes(
-  "bg",
-  "primary",
-  $primary-hue,
-  $primary-saturation,
-  93,
-  97,
-  2
-);
-
-// for green classes
-@include generate-color-classes(
-  "text",
-  "green",
-  $green-hue,
-  $green-saturation,
-  10,
-  90,
-  10
-);
-@include generate-color-classes(
-  "bg",
-  "green",
-  $green-hue,
-  $green-saturation,
-  10,
-  90,
-  10
-);
-
-@include generate-color-classes(
-  "text",
-  "green",
-  $green-hue,
-  $green-saturation,
-  5,
-  5,
-  1
-);
-
-@include generate-color-classes(
-  "bg",
-  "green",
-  $green-hue,
-  $green-saturation,
-  5,
-  5,
-  1
-);
-
-@include generate-color-classes(
-  "text",
-  "green",
-  $green-hue,
-  $green-saturation,
-  93,
-  97,
-  2
-);
-
-@include generate-color-classes(
-  "bg",
-  "green",
-  $green-hue,
-  $green-saturation,
-  93,
-  97,
-  2
-);
-
-// for yellow classes
-@include generate-color-classes(
-  "text",
-  "yellow",
-  $yellow-hue,
-  $yellow-saturation,
-  10,
-  90,
-  10
-);
-@include generate-color-classes(
-  "bg",
-  "yellow",
-  $yellow-hue,
-  $yellow-saturation,
-  10,
-  90,
-  10
-);
-
-@include generate-color-classes(
-  "text",
-  "yellow",
-  $yellow-hue,
-  $yellow-saturation,
-  5,
-  5,
-  1
-);
-
-@include generate-color-classes(
-  "bg",
-  "yellow",
-  $yellow-hue,
-  $yellow-saturation,
-  5,
-  5,
-  1
-);
-
-@include generate-color-classes(
-  "text",
-  "yellow",
-  $yellow-hue,
-  $yellow-saturation,
-  93,
-  97,
-  2
-);
-
-@include generate-color-classes(
-  "bg",
-  "yellow",
-  $yellow-hue,
-  $yellow-saturation,
-  93,
-  97,
-  2
-);
-
-// for purple classes
-@include generate-color-classes(
-  "text",
-  "purple",
-  $purple-hue,
-  $purple-saturation,
-  10,
-  90,
-  10
-);
-@include generate-color-classes(
-  "bg",
-  "purple",
-  $purple-hue,
-  $purple-saturation,
-  10,
-  90,
-  10
-);
-
-@include generate-color-classes(
-  "text",
-  "purple",
-  $purple-hue,
-  $purple-saturation,
-  5,
-  5,
-  1
-);
-
-@include generate-color-classes(
-  "bg",
-  "purple",
-  $purple-hue,
-  $purple-saturation,
-  5,
-  5,
-  1
-);
-
-@include generate-color-classes(
-  "text",
-  "purple",
-  $purple-hue,
-  $purple-saturation,
-  93,
-  97,
-  2
-);
-
-@include generate-color-classes(
-  "bg",
-  "purple",
-  $purple-hue,
-  $purple-saturation,
-  93,
-  97,
-  2
-);
-
 // Box Shadow
 $ac-shadow-1: 0 1px 4px rgba(26, 80, 151, 0.16);
 $ac-shadow-2: 0px 8px 57px rgba(0, 0, 0, 0.16);

package/vue-components/styles/base/utilities/_generate-color-classes.scss

@@ -0,0 +1,253 @@
+// classes
+@mixin generate-color-classes($type, $color, $h, $s, $from, $to, $step) {
+  $i: $from;
+
+  @while $i <=$to {
+    .#{$type}-#{$color}-#{$i} {
+      #{if($type == "text", "color", "background-color")}: hsl($h, $s, $i * 1%);
+    }
+
+    $i: $i + $step;
+  }
+}
+
+// for primary classes
+@include generate-color-classes(
+  "text",
+  "primary",
+  $primary-hue,
+  $primary-saturation,
+  10,
+  90,
+  10
+);
+
+@include generate-color-classes(
+  "bg",
+  "primary",
+  $primary-hue,
+  $primary-saturation,
+  10,
+  90,
+  10
+);
+
+@include generate-color-classes(
+  "text",
+  "primary",
+  $primary-hue,
+  $primary-saturation,
+  5,
+  5,
+  1
+);
+
+@include generate-color-classes(
+  "bg",
+  "primary",
+  $primary-hue,
+  $primary-saturation,
+  5,
+  5,
+  1
+);
+
+@include generate-color-classes(
+  "text",
+  "primary",
+  $primary-hue,
+  $primary-saturation,
+  93,
+  97,
+  2
+);
+
+@include generate-color-classes(
+  "bg",
+  "primary",
+  $primary-hue,
+  $primary-saturation,
+  93,
+  97,
+  2
+);
+
+// for green classes
+@include generate-color-classes(
+  "text",
+  "green",
+  $green-hue,
+  $green-saturation,
+  10,
+  90,
+  10
+);
+@include generate-color-classes(
+  "bg",
+  "green",
+  $green-hue,
+  $green-saturation,
+  10,
+  90,
+  10
+);
+
+@include generate-color-classes(
+  "text",
+  "green",
+  $green-hue,
+  $green-saturation,
+  5,
+  5,
+  1
+);
+
+@include generate-color-classes(
+  "bg",
+  "green",
+  $green-hue,
+  $green-saturation,
+  5,
+  5,
+  1
+);
+
+@include generate-color-classes(
+  "text",
+  "green",
+  $green-hue,
+  $green-saturation,
+  93,
+  97,
+  2
+);
+
+@include generate-color-classes(
+  "bg",
+  "green",
+  $green-hue,
+  $green-saturation,
+  93,
+  97,
+  2
+);
+
+// for yellow classes
+@include generate-color-classes(
+  "text",
+  "yellow",
+  $yellow-hue,
+  $yellow-saturation,
+  10,
+  90,
+  10
+);
+@include generate-color-classes(
+  "bg",
+  "yellow",
+  $yellow-hue,
+  $yellow-saturation,
+  10,
+  90,
+  10
+);
+
+@include generate-color-classes(
+  "text",
+  "yellow",
+  $yellow-hue,
+  $yellow-saturation,
+  5,
+  5,
+  1
+);
+
+@include generate-color-classes(
+  "bg",
+  "yellow",
+  $yellow-hue,
+  $yellow-saturation,
+  5,
+  5,
+  1
+);
+
+@include generate-color-classes(
+  "text",
+  "yellow",
+  $yellow-hue,
+  $yellow-saturation,
+  93,
+  97,
+  2
+);
+
+@include generate-color-classes(
+  "bg",
+  "yellow",
+  $yellow-hue,
+  $yellow-saturation,
+  93,
+  97,
+  2
+);
+
+// for purple classes
+@include generate-color-classes(
+  "text",
+  "purple",
+  $purple-hue,
+  $purple-saturation,
+  10,
+  90,
+  10
+);
+@include generate-color-classes(
+  "bg",
+  "purple",
+  $purple-hue,
+  $purple-saturation,
+  10,
+  90,
+  10
+);
+
+@include generate-color-classes(
+  "text",
+  "purple",
+  $purple-hue,
+  $purple-saturation,
+  5,
+  5,
+  1
+);
+
+@include generate-color-classes(
+  "bg",
+  "purple",
+  $purple-hue,
+  $purple-saturation,
+  5,
+  5,
+  1
+);
+
+@include generate-color-classes(
+  "text",
+  "purple",
+  $purple-hue,
+  $purple-saturation,
+  93,
+  97,
+  2
+);
+
+@include generate-color-classes(
+  "bg",
+  "purple",
+  $purple-hue,
+  $purple-saturation,
+  93,
+  97,
+  2
+);

package/vue-components/styles/base/utilities/_global.scss

@@ -154,7 +154,7 @@ hr {
 .is-dark-theme {
   .toasted-container {
     i.fa {
-      color: #ffffff !important;
+      color: $white-100 !important;
     }
   }
 }
@@ -663,7 +663,7 @@ body:has(.has-info-content) {
   margin-left: auto;
   position: fixed;
   right: 0;
-  background: #fff;
+  background: $white-100;
   top: 0;
   z-index: 99999;
   box-shadow: -3px 2px 10px 3px rgba(0, 0, 0, 0.1);
@@ -675,6 +675,8 @@ body:has(.has-info-content) {
 
 .tag:not(body) {
   &.is-primary {
+    background-color: $ac-primary;
+    color: $white-100;
     &.is-light {
       color: $ac-primary;
       background-color: $primary-95;

package/vue-components/styles/base/utilities/_root-variables.scss

@@ -0,0 +1,5 @@
+:root {
+  --primary-hue: 208;
+  --primary-saturation: 77%;
+  --primary-light: 40%;
+}

package/vue-components/styles/base/utilities/_typography.scss

@@ -6,7 +6,7 @@ $font-paragraph: "Roboto", sans-serif;
 
 html,
 body {
-  background-color: transparent;
+  background-color: $white-100;
   font-family: $font-paragraph;
   font-weight: 400;
   font-size: 13px;
@@ -87,6 +87,20 @@ h6 {
   }
 }
 
+.content {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $color-heading;
+  }
+  p {
+    color: $color-text;
+  }
+}
+
 a:not(.ac-button) {
   font-family: $font-paragraph;
   color: $ac-primary;
@@ -138,3 +152,6 @@ strong {
 .material-icons {
   font-size: 1em;
 }
+.has-text-primary {
+  color: $ac-primary;
+}

package/vue-components/styles/components/_button.scss

@@ -1,38 +1,41 @@
 .button {
-  &.is-primary {
-    background-color: $ac-primary;
-    &:hover {
-      background-color: $primary-30;
-    }
-    &.is-outlined {
-      border-color: $ac-primary;
-      // background-color: $ac-primary;
-      color: $ac-primary;
-      &:hover {
-        border-color: $primary-30;
-        background-color: $ac-primary;
-      }
-      &.is-light {
-        background-color: $primary-95;
-        &:hover {
-          background-color: $ac-primary;
-          color: $white-100;
-        }
-      }
-    }
-  }
+  color: $color-text;
+  background-color: $white-100;
+
   &.ac-button {
     padding: 8px 16px;
     font-weight: 500;
     line-height: 1;
 
     &.is-primary {
+      background-color: $ac-primary;
+      &:hover {
+        background-color: $primary-30;
+      }
       &.is-light {
         color: $ac-primary;
+        background-color: $primary-95;
+        &:hover {
+          background-color: $primary-90;
+        }
         &:focus:not(:hover) {
           color: inherit;
         }
       }
+      &:disabled:not(.is-light) {
+        background-color: $ac-primary;
+        border-color: $ac-primary;
+      }
+      &.is-outlined {
+        border-color: $ac-primary;
+        color: $ac-primary;
+        background-color: transparent;
+        &:hover {
+          border-color: $primary-30;
+          background-color: $ac-primary;
+          color: $white-100;
+        }
+      }
     }
     &.is-warning {
       &.is-light {

package/vue-components/styles/components/_table.scss

@@ -390,7 +390,7 @@
 .table-inner-shadow {
   border-radius: 0px;
   background: $color-border;
-  box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px #ffffff;
+  box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px $white-100;
 }
 
 @keyframes expand {

package/vue-components/styles/components/_terminal.scss

@@ -233,7 +233,7 @@
         text-align: center;
         padding: 4px 20px;
         border-radius: 4px;
-        color: #ffffff !important;
+        color: $white-100 !important;
         text-transform: uppercase;
 
         &.is-success {

package/vue-components/styles/components/cards/_cluster.scss

@@ -1,4 +1,5 @@
 // cluster-card
+
 .card-details.cluster {
   border: 1px solid $color-border;
   padding: 24px 20px;
@@ -42,10 +43,10 @@
       h4 {
         font-size: 18px;
         line-height: 130%;
-        color: #030d17;
+        color: $color-heading;
       }
       .icon {
-        color: #0c365a;
+        color: $color-text;
         cursor: pointer;
         position: relative;
         z-index: 1;
@@ -84,11 +85,11 @@
 
       span {
         font-size: 11px;
-        color: #666666;
+        color: $color-label;
         display: block;
       }
       strong {
-        color: #061b2d;
+        color: $color-heading;
         font-size: 13px;
         font-weight: 400;
       }

package/vue-components/styles/components/cards/_monitoring.scss

@@ -5,6 +5,7 @@
   min-width: 290px;
   position: relative;
   border-radius: 2px;
+  background-color: $white-100;
 
   .required {
     position: absolute;

package/vue-components/styles/components/cards/_vendor.scss

@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background-color: $primary-97;
+  background-color: $primary-light-grey;
   min-width: 215px;
   padding: 30px 20px 20px;
   cursor: pointer;

package/vue-components/styles/components/form-fields/_input.scss

@@ -516,6 +516,11 @@
   border-color: $primary-30 !important;
 }
 
+.switch[type="checkbox"].is-primary:checked + label::before,
+.switch[type="checkbox"].is-primary:checked + label:before {
+  background-color: $ac-primary;
+}
+
 .is-checkradio[type="checkbox"] + label::after,
 .is-checkradio[type="checkbox"] + label:after {
   border-width: 0.2rem;

package/vue-components/styles/components/header/_header.scss

@@ -1,6 +1,6 @@
 .inner-header {
   padding: 6px 20px;
-  border-bottom: 1px solid $color-border;
+  border-bottom: 1px solid $color-border-light;
   position: sticky;
   background: $white-100;
   z-index: 99;

package/vue-components/styles/theme/_appscode.scss

@@ -1,28 +1,13 @@
-$primary-hue: 149;
-$primary-saturation: 100%;
-$primary-5: hsl($primary-hue, $primary-saturation, 5%);
-$primary-10: hsl($primary-hue, $primary-saturation, 10%);
-$primary-20: hsl($primary-hue, $primary-saturation, 20%);
-$primary: hsl($primary-hue, $primary-saturation, 30%);
-$primary-30: hsl($primary-hue, $primary-saturation, 30%);
-$primary-40: hsl($primary-hue, $primary-saturation, 40%);
-$primary-50: hsl($primary-hue, $primary-saturation, 50%);
-$primary-60: hsl($primary-hue, $primary-saturation, 60%);
-$primary-70: hsl($primary-hue, $primary-saturation, 70%);
-$primary-80: hsl($primary-hue, $primary-saturation, 80%);
-$primary-90: hsl($primary-hue, $primary-saturation, 90%);
-$primary-93: hsl($primary-hue, $primary-saturation, 93%);
-$primary-95: hsl($primary-hue, $primary-saturation, 95%);
-$primary-97: hsl($primary-hue, $primary-saturation, 97%);
+:root {
+  --primary-hue: 149;
+  --primary-saturation: 100%;
+  --primary-light: 30%;
+}
+$primary-hue: var(--primary-hue);
+$primary-saturation: var(--primary-saturation);
+$primary-light: var(--primary-light);
 
-$primary-light-grey: hsl($primary-hue, 30%, 96%);
-$primary-dark-grey: hsl($primary-hue, 30%, 10%);
+$ac-primary: hsl($primary-hue, $primary-saturation, $primary-light);
 
-$color-text: hsl($primary-hue, 10%, 35%);
-$color-heading: hsl($primary-hue, 10%, 10%);
-$color-label: hsl($primary-hue, 20%, 50%);
-$color-link: hsl($primary-hue, 40%, 20%);
-$color-border-light: hsl($primary-hue, 30%, 95%);
 $color-border: hsl($primary-hue, 30%, 90%);
-$color-border-dark: hsl($primary-hue, 10%, 80%);
 $color-sidebar: hsl($primary-hue, $primary-saturation, 5%);

package/vue-components/styles/theme/_dark.scss

@@ -0,0 +1,48 @@
+// :root {
+//   --primary-hue: 208;
+//   --primary-saturation: 77%;
+//   --primary-light: 40%;
+// }
+// :root {
+//   --theme-mode: dark;
+// }
+// // primary color guides
+// $primary-hue: var(--primary-hue);
+// $primary-saturation: var(--primary-saturation);
+// $primary-light: var(--primary-light);
+// $theme-mode: var(--theme-mode);
+
+// $primary-5: hsl($primary-hue, $primary-saturation, 95%);
+// $primary-10: hsl($primary-hue, $primary-saturation, 90%);
+// $primary-20: hsl($primary-hue, $primary-saturation, 80%);
+// $primary-30: hsl($primary-hue, $primary-saturation, 70%);
+// $primary-40: hsl($primary-hue, $primary-saturation, 60%);
+// $ac-primary: hsl($primary-hue, $primary-saturation, $primary-light);
+// $primary-50: hsl($primary-hue, $primary-saturation, 50%);
+// $primary-60: hsl($primary-hue, $primary-saturation, 40%);
+// $primary-70: hsl($primary-hue, $primary-saturation, 30%);
+// $primary-80: hsl($primary-hue, $primary-saturation, 20%);
+// $primary-90: hsl($primary-hue, $primary-saturation, 10%);
+// $primary-93: hsl($primary-hue, $primary-saturation, 7%);
+// $primary-95: hsl($primary-hue, $primary-saturation, 5%);
+// $primary-97: hsl($primary-hue, $primary-saturation, 3%);
+
+// $primary-light-grey: hsl($primary-hue, 30%, 20%);
+// $primary-dark-grey: hsl($primary-hue, 30%, 90%);
+
+// // white and black
+// $white-100: hsl($primary-hue, 50%, 5%);
+// $black-100: hsl(0, 0%, 90%);
+
+// $color-text: hsl($primary-hue, 10%, 80%);
+// $color-heading: hsl($primary-hue, 10%, 90%);
+// $color-label: hsl($primary-hue, 20%, 50%);
+// $color-link: hsl($primary-hue, 40%, 80%);
+// $color-border-light: hsl($primary-hue, 30%, 20%);
+// $color-border: hsl($primary-hue, 30%, 20%);
+// $color-border-dark: hsl($primary-hue, 10%, 30%);
+// $color-sidebar: hsl($primary-hue, $primary-saturation, 10%);
+
+// .ac-left-sidebar .menu-list.ac-menu-list li a {
+//   color: $color-text;
+// }

package/vue-components/v3/navbar/User.vue

@@ -85,7 +85,8 @@ const setTheme = (val: string) => {
   emit("set:theme", val);
 };
 
-const pathName = window.location.origin;
+const locationOrigin = window.location.origin;
+const isDocsUi = window.location.pathname.startsWith("/docs/");
 
 watch(dropDownStatus, (n) => {
   if (n === "open") {
@@ -116,19 +117,11 @@ watch(dropDownStatus, (n) => {
     <template #navbar-content>
       <navbar-item-content class="navbar-dropdown-wrapper">
         <div v-if="user.username" class="user-profile-wrapper">
-          <a
-            :href="`${serverDomain}/${user.username}`"
-            :title="user.username.toUpperCase()"
-            data-testid="user-profile-link"
-            class="line-break-anywhere is-ellipsis-1 has-text-weight-medium"
-          >
+          <a :href="`${serverDomain}/${user.username}`" :title="user.username.toUpperCase()"
+            data-testid="user-profile-link" class="line-break-anywhere is-ellipsis-1 has-text-weight-medium">
             <div class="profile-area">
               <div class="profile-photo">
-                <img
-                  :src="user.avatar_url"
-                  alt="User Photo"
-                  class="width-32 height-32"
-                />
+                <img :src="user.avatar_url" alt="User Photo" class="width-32 height-32" />
                 <button class="camera-icon"></button>
               </div>
               <div class="profile-info" style="width: calc(100% - 60px)">
@@ -136,142 +129,92 @@ watch(dropDownStatus, (n) => {
                 <p>
                   {{
                     user.isPersonalAccount || user.is_admin
-                      ? "Personal Account"
-                      : "Organization"
+                    ? "Personal Account"
+                    : "Organization"
                   }}
                 </p>
               </div>
             </div>
           </a>
-          <transition-group
-            name="list"
-            tag="ul"
-            class="list-items ac-scrollbar py-2"
-          >
-            <li key="settings" v-if="serverDomain !== pathName">
-              <a
-                v-if="user.isPersonalAccount"
-                data-testid="user-settings-link"
-                :href="`${serverDomain}/user/settings/`"
-              >
-                <span class="icon"><HeroiconsCog6Tooth /></span>
+          <transition-group name="list" tag="ul" class="list-items ac-scrollbar py-2">
+            <li key="settings" v-if="serverDomain !== locationOrigin || isDocsUi">
+              <a v-if="user.isPersonalAccount" data-testid="user-settings-link" :href="`${serverDomain}/user/settings/`">
+                <span class="icon">
+                  <HeroiconsCog6Tooth />
+                </span>
                 <span>Settings</span>
               </a>
-              <a
-                v-else
-                data-testid="user-settings-link"
-                :href="`${serverDomain}/${user.username}/settings`"
-              >
-                <span class="icon"><HeroiconsCog6Tooth /></span
-                ><span>Settings</span>
+              <a v-else data-testid="user-settings-link" :href="`${serverDomain}/${user.username}/settings`">
+                <span class="icon">
+                  <HeroiconsCog6Tooth />
+                </span><span>Settings</span>
               </a>
             </li>
             <li key="settings-platform" v-else>
-              <NuxtLink
-                v-if="user.isPersonalAccount"
-                data-testid="user-settings-link"
-                :to="`/user/settings/`"
-              >
-                <span class="icon"><HeroiconsCog6Tooth /></span>
+              <NuxtLink v-if="user.isPersonalAccount" data-testid="user-settings-link" :to="`/user/settings/`">
+                <span class="icon">
+                  <HeroiconsCog6Tooth />
+                </span>
                 <span>Settings</span>
               </NuxtLink>
-              <NuxtLink
-                v-else
-                data-testid="user-settings-link"
-                :to="`/${user.username}/settings`"
-              >
-                <span class="icon"><HeroiconsCog6Tooth /></span
-                ><span>Settings</span>
+              <NuxtLink v-else data-testid="user-settings-link" :to="`/${user.username}/settings`">
+                <span class="icon">
+                  <HeroiconsCog6Tooth />
+                </span><span>Settings</span>
               </NuxtLink>
             </li>
 
-            <li
-              v-if="showAccountSwitcher"
-              :class="`is-${dropDownStatus}`"
-              key="switcher"
-            >
-              <a
-                class="ac-dropdown-button is-fullwidth is-flex is-justify-content-space-between is-align-items-center"
-                @click="toggleList()"
-              >
+            <li v-if="showAccountSwitcher" :class="`is-${dropDownStatus}`" key="switcher">
+              <a class="ac-dropdown-button is-fullwidth is-flex is-justify-content-space-between is-align-items-center"
+                @click="toggleList()">
                 <div class="is-flex gap-8">
-                  <span class="icon"><HeroiconsUserGroup /></span
-                  ><span>Switch Account</span>
+                  <span class="icon">
+                    <HeroiconsUserGroup />
+                  </span><span>Switch Account</span>
                 </div>
-                <span
-                  ><i
-                    :class="`fa fa-angle-${
-                      dropDownStatus === 'open' ? 'up' : 'down'
-                    }`"
-                  ></i
-                ></span>
+                <span><i :class="`fa fa-angle-${dropDownStatus === 'open' ? 'up' : 'down'
+                  }`"></i></span>
               </a>
-              <transition-group
-                name="list"
-                tag="ul"
-                class="ac-vscrollbar"
-                ref="dropdownItems"
-                :style="{ maxHeight: dropDownSectionHeight }"
-              >
-                <li
-                  v-for="(org, idx) in formattedOrganizations"
-                  :key="org.username"
-                >
-                  <a
-                    class="is-flex is-align-items-center"
-                    @click="onOrganizationClick(org.username)"
-                  >
-                    <div class="width-30 height-30 image">
-                      <img
-                        :src="org.avatar_url"
-                        class="ac-user-profile is-rounded"
-                        alt="icon"
-                      />
-                    </div>
-                    <div
-                      class="is-flex is-align-items-center is-justify-content-space-between is-fullwidth ml-10"
-                    >
-                      <div class="org-info">
-                        <strong
-                          :title="org.username"
-                          class="line-break-anywhere is-ellipsis-1"
-                          >{{ org.username }}</strong
-                        >
-                        <p>
-                          {{
-                            org.isPersonalAccount
-                              ? "Personal Account"
-                              : "Organization"
-                          }}
-                        </p>
-                      </div>
-                      <span
-                        v-if="idx === 0"
-                        class="material-icons font-size-18 ml-10 is-pulled-right"
-                      >
-                        <HeroiconsCheck />
-                      </span>
-                    </div>
-                  </a>
-                </li>
-              </transition-group>
-            </li>
-            <li v-if="isLoggedinUserAdmin || user.is_admin" key="site-admin">
-              <a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"
-                ><span class="icon"><HeroiconsWrenchScrewdriver /></span
-                ><span>Site Administration</span></a
-              >
-            </li>
-            <li key="signout" @click="$emit('on-logout')">
-              <a
-                data-testid="user-logout-link"
-                :href="`${accountsDomain}/user/logout`"
-              >
-                <span class="icon"><HeroiconsPower /></span>
-                <span>Sign out</span>
+              <transition-group name="list" tag="ul" class="ac-vscrollbar" ref="dropdownItems"
+                :style="{ maxHeight: dropDownSectionHeight }">
+            <li v-for="(org, idx) in formattedOrganizations" :key="org.username">
+              <a class="is-flex is-align-items-center" @click="onOrganizationClick(org.username)">
+                <div class="width-30 height-30 image">
+                  <img :src="org.avatar_url" class="ac-user-profile is-rounded" alt="icon" />
+                </div>
+                <div class="is-flex is-align-items-center is-justify-content-space-between is-fullwidth ml-10">
+                  <div class="org-info">
+                    <strong :title="org.username" class="line-break-anywhere is-ellipsis-1">{{ org.username }}</strong>
+                    <p>
+                      {{
+                        org.isPersonalAccount
+                        ? "Personal Account"
+                        : "Organization"
+                      }}
+                    </p>
+                  </div>
+                  <span v-if="idx === 0" class="material-icons font-size-18 ml-10 is-pulled-right">
+                    <HeroiconsCheck />
+                  </span>
+                </div>
               </a>
             </li>
-            <!-- <li key="theme" v-if="showThemeMode">
+          </transition-group>
+          </li>
+          <li v-if="isLoggedinUserAdmin || user.is_admin" key="site-admin">
+            <a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"><span class="icon">
+                <HeroiconsWrenchScrewdriver />
+              </span><span>Site Administration</span></a>
+          </li>
+          <li key="signout" @click="$emit('on-logout')">
+            <a data-testid="user-logout-link" :href="`${accountsDomain}/user/logout`">
+              <span class="icon">
+                <HeroiconsPower />
+              </span>
+              <span>Sign out</span>
+            </a>
+          </li>
+          <!-- <li key="theme" v-if="showThemeMode">
               <theme-mode @set:theme="setTheme" />
             </li> -->
           </transition-group>

package/vue-components/v3/notification/AlertBox.vue

@@ -256,7 +256,7 @@ AC Toast
 
 // is-primary
 .ac-toast.is-primary {
-  @include acToast($primary);
+  @include acToast($ac-primary);
 }
 
 // is-info

package/vue-components/v3/sidebar/Steps.vue

@@ -88,7 +88,7 @@ ul {
     cursor: pointer;
     strong {
       /* colors/white */
-      color: #ffffff;
+      color: $white-100;
       display: flex;
       align-items: center;
 

package/vue-components/v3/table/InfoTable.vue

@@ -91,7 +91,7 @@ const isFullTableLoaderActive = computed(() => {
 // INFO TABLE START
 .table.ac-info-table {
   background-color: transparent;
-  border-top: 1px solid $color-border-light;
+  border-top: 1px solid $color-border;
 
   &.is-fullwidth {
     tbody {