@appscode/design-system 2.0.41-alpha.9 → 2.0.41

package/vue-components/v3/alert/AlertMessage.vue

@@ -42,5 +42,5 @@ withDefaults(defineProps<Props>(), {
 </template>
 
 <style lang="scss" scoped>
-@import "../../../vue-components/styles/components/alert/alert-message";
+@import "../../../vue-components/styles/components/alert/_alert-message.scss";
 </style>

package/vue-components/v3/header/Header.vue

@@ -61,7 +61,7 @@ withDefaults(defineProps<Props>(), {
 //   min-height: 75px;
 //   display: table;
 //   width: 100%;
-//   border-left: 5px solid $primary;
+//   border-left: 5px solid $ac-primary;
 //   border-bottom: 1px solid $color-border;
 //   border-top: 1px solid $color-border;
 //   border-right: 1px solid $color-border;

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

@@ -129,7 +129,7 @@ watch(themeMode, (n) => {
 
     &.is-active {
       background: $color-border;
-      color: $primary;
+      color: $ac-primary;
     }
   }
 }

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

@@ -70,13 +70,13 @@ const getSanitizedHtml = (content: string) => {
 .ac-notification {
   background-color: $primary-95;
   font-size: 13px;
-  color: $primary;
+  color: $ac-primary;
   min-height: 36px;
   display: flex;
   align-items: center;
   padding: 8px 16px;
   overflow: hidden;
-  border: 1px solid $primary;
+  border: 1px solid $ac-primary;
   border-radius: 4px;
   justify-content: flex-start;
   position: relative;
@@ -84,7 +84,7 @@ const getSanitizedHtml = (content: string) => {
   min-width: 280px;
 
   p {
-    color: $primary;
+    color: $ac-primary;
     margin-bottom: 0;
 
     .close-icon {
@@ -94,7 +94,7 @@ const getSanitizedHtml = (content: string) => {
 
     a {
       text-decoration: underline;
-      color: $primary;
+      color: $ac-primary;
 
       &:hover {
         color: hsla(
@@ -151,16 +151,16 @@ const getSanitizedHtml = (content: string) => {
     0.2
   );
   color: $white-100;
-  border-color: $primary;
+  border-color: $ac-primary;
 
   p {
-    color: $primary;
+    color: $ac-primary;
 
     a {
-      color: $primary;
+      color: $ac-primary;
 
       &:hover {
-        color: $primary;
+        color: $ac-primary;
         opacity: 0.8;
       }
     }
@@ -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/pagination/Pagination.vue

@@ -183,11 +183,11 @@ watch(
         font-weight: 500;
         border-radius: 4px;
         border: 1px solid $color-border;
-        color: $primary;
+        color: $ac-primary;
         margin-left: 4px;
 
         &:hover {
-          background-color: $primary !important;
+          background-color: $ac-primary !important;
           color: $white-100;
           border: 1px solid $color-border;
         }
@@ -201,7 +201,7 @@ watch(
         }
 
         &.is-current {
-          background-color: $primary;
+          background-color: $ac-primary;
           color: $white-100;
         }
       }
@@ -232,7 +232,7 @@ watch(
     &:focus,
     &:active,
     &:focus-visible {
-      border: 1px solid $primary;
+      border: 1px solid $ac-primary;
       outline: none;
     }
   }

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;
 
@@ -105,7 +105,7 @@ ul {
         color: $primary-80;
         font-size: 16px;
         &.is-active {
-          background-color: $primary;
+          background-color: $ac-primary;
           color: $white-100;
           border: 1px solid $color-border;
         }
@@ -119,7 +119,7 @@ ul {
         &.is-active {
           strong {
             .step-count {
-              background-color: $primary;
+              background-color: $ac-primary;
               color: $white-100;
               border: 1px solid $color-border;
             }

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 {