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

package/main.scss

@@ -1,6 +1,6 @@
 @charset "utf-8";
 // customize bulma css
-@import "@/assets/design-system/base/utilities/_customize-bulma.scss";
+@import "@/components/vue-components/styles/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 "./base/utilities/all";
+@import "@/components/vue-components/styles/base/utilities/all";
 
 // LAYOUTS
-@import "./layouts/all";
+@import "@/components/vue-components/styles/layouts/all";
 
 // COMPONENTS
-@import "./components/all";
+@import "@/components/vue-components/styles/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.1",
+  "version": "2.0.2-alpha.1",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

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

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

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

@@ -26,8 +26,10 @@
 // @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/_button.scss

@@ -0,0 +1,59 @@
+.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;
+}

package/{components → vue-components/styles/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/{components → vue-components/styles/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/vue-components/v3/button/Button.vue

@@ -69,63 +69,5 @@ const showUnpluginIcon = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-.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;
-}
+@import "../../../vue-components/styles/components/button";
 </style>

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

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

package/vue-components/v3/modal/Modal.vue

@@ -101,10 +101,10 @@ watch(
             <header-item>
               <ac-button
                 v-if="!isCloseOptionDisabled"
-                modifier-classes="is-square is-transparent"
+                modifier-classes="is-white"
                 :icon-image="crossIcon"
-                @click.stop="destroyModal"
                 data-testid="modal-generic-close-icon"
+                @click.stop="destroyModal"
               />
             </header-item>
           </header-items>
@@ -152,6 +152,11 @@ watch(
   left: 0;
   top: 0;
   z-index: 9999;
+  .ac-button {
+    &.is-white {
+      margin-right: -10px;
+    }
+  }
 
   &:after {
     position: absolute;