@appscode/design-system 2.0.2-alpha.1 → 2.0.4

package/{vue-components/styles/base → base}/utilities/_colors.scss

@@ -305,6 +305,67 @@ $black-97: hsl($black-hue, $black-saturation, 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",

package/{vue-components/styles/base → base}/utilities/_grid.scss

@@ -22,7 +22,7 @@
   grid-column: auto;
 }
 
-@for $i from 0 through 32 {
+@for $i from 0 through 30 {
   .gap-#{$i} {
     gap: #{$i}px;
   }

package/{vue-components/styles/components → components}/_all.scss

@@ -26,10 +26,8 @@
 // @import "bbum/all";
 // @import "wizard";
 
-// @import "button";
-
 @import "terminal";
-// @import "input";
+@import "input";
 @import "multi-select";
 @import "report";
 @import "getkeeper";

package/{vue-components/styles/components → components}/ui-builder/_ui-builder.scss

@@ -403,24 +403,24 @@
   }
 }
 // buttons
-// .button {
-//   &.ac-button {
-//     &.is-medium {
-//       font-size: 1rem;
-//       height: 36px;
-//     }
-//     &.is-tinny {
-//       height: 24px;
-//       padding: 0 8px;
-//     }
-//   }
-// }
+.button {
+  &.ac-button {
+    &.is-medium {
+      font-size: 1rem;
+      height: 36px;
+    }
+    &.is-tinny {
+      height: 24px;
+      padding: 0 8px;
+    }
+  }
+}
 
-// .button[disabled] {
-//   &.is-ghost {
-//     border-color: transparent !important;
-//   }
-// }
+.button[disabled] {
+  &.is-ghost {
+    border-color: transparent !important;
+  }
+}
 
 p.is-error,
 span.is-error {

package/{vue-components/styles/components → components}/ui-builder/_vue-open-api.scss

@@ -619,41 +619,41 @@
 }
 
 // button scss
-// .button {
-//   &.ac-button {
-//     padding: 8px 16px;
-//     font-weight: 500;
-//     line-height: 1;
-
-//     &.is-light {
-//       &.is-loading {
-//         &::after {
-//           border-color: transparent transparent #1c1c1c #1c1c1c !important;
-//         }
-//       }
-//     }
-//     &.is-ghost {
-//       border-color: transparent !important;
-//     }
-//     &.is-square {
-//       border: 1px solid $primary-95;
-//     }
-//     &.is-small {
-//       padding: 4px 9px;
-//     }
-//     &.is-medium {
-//       font-size: 1rem;
-//       height: 36px;
-//     }
-//   }
-//   &:focus {
-//     outline: none;
-//     box-shadow: none;
-//   }
-// }
-// button.is-primary {
-//   background-color: $primary;
-// }
+.button {
+  &.ac-button {
+    padding: 8px 16px;
+    font-weight: 500;
+    line-height: 1;
+
+    &.is-light {
+      &.is-loading {
+        &::after {
+          border-color: transparent transparent #1c1c1c #1c1c1c !important;
+        }
+      }
+    }
+    &.is-ghost {
+      border-color: transparent !important;
+    }
+    &.is-square {
+      border: 1px solid $primary-95;
+    }
+    &.is-small {
+      padding: 4px 9px;
+    }
+    &.is-medium {
+      font-size: 1rem;
+      height: 36px;
+    }
+  }
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+}
+button.is-primary {
+  background-color: $primary;
+}
 
 .is-refresh {
   i.fa {

package/main.scss

@@ -1,6 +1,6 @@
 @charset "utf-8";
 // customize bulma css
-@import "@/components/vue-components/styles/base/utilities/_customize-bulma.scss";
+@import "@/assets/design-system/base/utilities/_customize-bulma.scss";
 
 // Third party CSS
 @import "../node_modules/bulma/bulma.sass";
@@ -11,13 +11,13 @@
 @import "vue-multiselect/dist/vue-multiselect.css";
 
 // BASE
-@import "@/components/vue-components/styles/base/utilities/all";
+@import "./base/utilities/all";
 
 // LAYOUTS
-@import "@/components/vue-components/styles/layouts/all";
+@import "./layouts/all";
 
 // COMPONENTS
-@import "@/components/vue-components/styles/components/all";
+@import "./components/all";
 
 // //BASE - Base styles, variables, mixins
 // @import "base/video-player";

package/package.json

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

package/vue-components/v3/button/Button.vue

@@ -69,5 +69,63 @@ const showUnpluginIcon = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-@import "../../../vue-components/styles/components/button";
+.button {
+  &.ac-button {
+    padding: 8px 16px;
+    font-weight: 500;
+    line-height: 1;
+
+    &.is-primary {
+      &.is-light {
+        color: $primary;
+        &:focus:not(:hover) {
+          color: inherit;
+        }
+      }
+    }
+    &.is-warning {
+      &.is-light {
+        color: $yellow-30;
+        &:focus:not(:hover) {
+          color: inherit;
+        }
+      }
+    }
+
+    &.is-success {
+      &.is-light {
+        color: $green-30;
+        &:focus:not(:hover) {
+          color: inherit;
+        }
+      }
+    }
+    &.is-light {
+      &.is-loading {
+        &::after {
+          border-color: transparent transparent #1c1c1c #1c1c1c !important;
+        }
+      }
+      &.is-outlined {
+        &:hover {
+          border-color: inherit;
+        }
+      }
+    }
+
+    &.is-small {
+      padding: 4px 12px;
+      &:not(.is-rounded) {
+        border-radius: 4px;
+      }
+    }
+    &.is-medium {
+      font-size: 1rem;
+      height: 36px;
+    }
+  }
+}
+button.is-primary {
+  background-color: $primary;
+}
 </style>

package/vue-components/v3/form-fields/AcSingleInput.vue

@@ -18,6 +18,4 @@ withDefaults(defineProps<Props>(), {
   </div>
 </template>
 
-<style lang="scss">
-@import "../../../vue-components/styles/components/input";
-</style>
+<style lang="scss"></style>

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

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from "vue";
+
 interface Props {
   isColorpickerEnabled?: boolean;
-  hideBorder?: boolean;
+  hideFooter?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   isColorpickerEnabled: false,
-  hideBorder: false,
+  hideFooter: false,
 });
+
 defineEmits(["toggleSidebar"]);
 const AccentColorPicker = defineAsyncComponent(
   () => import("./AccentColorPicker.vue")
@@ -16,10 +18,11 @@ const AccentColorPicker = defineAsyncComponent(
 </script>
 
 <template>
-  <div class="sidebar-footer" :class="{ 'b-t-n': hideBorder }">
+  <div class="sidebar-footer" :class="{ 'b-t-n': hideFooter }">
     <!-- back button  -->
     <button
       class="back-button is-transparent"
+      :class="{ 'back-button-hide': hideFooter }"
       data-testid="sidebar-footer-back-button"
       @click="$emit('toggleSidebar')"
     >
@@ -64,6 +67,13 @@ const AccentColorPicker = defineAsyncComponent(
   height: 30px;
   border-top: 1px solid #3d5e7c;
 
+  .back-button-hide {
+    display: none !important;
+    color: $primary-20;
+    margin-bottom: 10px !important;
+    background-color: transparent;
+  }
+
   .back-button {
     display: flex;
     padding: 5px 16px;

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

@@ -1,59 +0,0 @@
-.button {
-  &.ac-button {
-    padding: 8px 16px;
-    font-weight: 500;
-    line-height: 1;
-
-    &.is-primary {
-      &.is-light {
-        color: $primary;
-        &:focus:not(:hover) {
-          color: inherit;
-        }
-      }
-    }
-    &.is-warning {
-      &.is-light {
-        color: $yellow-30;
-        &:focus:not(:hover) {
-          color: inherit;
-        }
-      }
-    }
-
-    &.is-success {
-      &.is-light {
-        color: $green-30;
-        &:focus:not(:hover) {
-          color: inherit;
-        }
-      }
-    }
-    &.is-light {
-      &.is-loading {
-        &::after {
-          border-color: transparent transparent $primary-5 $primary-5 !important;
-        }
-      }
-      &.is-outlined {
-        &:hover {
-          border-color: inherit;
-        }
-      }
-    }
-
-    &.is-small {
-      padding: 4px 12px;
-      &:not(.is-rounded) {
-        border-radius: 4px;
-      }
-    }
-    &.is-medium {
-      font-size: 1rem;
-      height: 36px;
-    }
-  }
-}
-button.is-primary {
-  background-color: $primary;
-}