@appscode/design-system 2.0.37 → 2.0.39

package/package.json

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

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

@@ -672,3 +672,12 @@ body:has(.has-info-content) {
     display: flex;
   }
 }
+
+.tag:not(body) {
+  &.is-primary {
+    &.is-light {
+      color: $primary;
+      background-color: $primary-95;
+    }
+  }
+}

package/vue-components/styles/components/alert/_alert.scss

@@ -1,5 +1,5 @@
 .ac-notification {
-  background-color: #dee7f5;
+  background-color: $primary-95;
   font-size: 13px;
   color: $primary;
   min-height: 36px;

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

@@ -18,12 +18,12 @@ $primary-97: hsl($primary-hue, $primary-saturation, 97%);
 $primary-light-grey: hsl($primary-hue, 30%, 96%);
 $primary-dark-grey: hsl($primary-hue, 30%, 10%);
 
-$secondary-hue: 197;
-$secondary-saturation: 50%;
+$secondary-hue: 149;
+$secondary-saturation: 100%;
+$secondary: hsl($secondary-hue, $secondary-saturation, 5%);
 $secondary-5: hsl($secondary-hue, $secondary-saturation, 5%);
 $secondary-10: hsl($secondary-hue, $secondary-saturation, 10%);
 $secondary-20: hsl($secondary-hue, $secondary-saturation, 20%);
-$secondary: hsl($secondary-hue, $secondary-saturation, 20%);
 $secondary-30: hsl($secondary-hue, $secondary-saturation, 30%);
 $secondary-40: hsl($secondary-hue, $secondary-saturation, 40%);
 $secondary-50: hsl($secondary-hue, $secondary-saturation, 50%);
@@ -45,12 +45,3 @@ $color-link: hsl($secondary-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%);
-
-.tag:not(body) {
-  &.is-primary {
-    &.is-light {
-      color: $primary;
-      background-color: $primary-95;
-    }
-  }
-}

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

@@ -68,7 +68,7 @@ const getSanitizedHtml = (content: string) => {
 <style lang="scss" scoped>
 // for alert message
 .ac-notification {
-  background-color: #dee7f5;
+  background-color: $primary-95;
   font-size: 13px;
   color: $primary;
   min-height: 36px;

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

@@ -65,7 +65,7 @@ const AccentColorPicker = defineAsyncComponent(
   align-items: center;
   justify-content: space-between;
   height: 30px;
-  border-top: 1px solid $secondary-30;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
   .back-button-hide {
     display: none !important;
     color: $color-text;

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

@@ -82,7 +82,7 @@ withDefaults(defineProps<Props>(), {
 
 .sidebar-header {
   background-color: transparent;
-  border-bottom: 1px solid $secondary-30;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   height: 50px;
   display: flex;
   // justify-content: space-between;