@appscode/design-system 2.0.35-alpha.5 → 2.0.35

package/main.scss

@@ -1,6 +1,4 @@
 @charset "utf-8";
-$secondary-hue: 208;
-$secondary-saturation: 77%;
 // customize bulma css
 @import "@/components/vue-components/styles/base/utilities/_customize-bulma.scss";
 
@@ -20,6 +18,3 @@ $secondary-saturation: 77%;
 
 // COMPONENTS
 // @import "@/components/vue-components/styles/components/all";
-@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";

package/package.json

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

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

@@ -1,3 +1,46 @@
+// ===================================PREVIOUS STYLE========================================
+// root colors
+// :root {
+//   --hsl-hue: 208;
+//   --hsl-saturation: 77%;
+//   --hsl-lightness: 40%;
+
+//   --ac-primary: hsla(var(--hsl-hue),
+//       var(--hsl-saturation),
+//       var(--hsl-lightness),
+//       1);
+// }
+
+// transparent: var(--ac-bg);
+// $primary: var(--ac-primary);
+// $primary-20: var(--ac-color-value);
+
+// Colors
+// $ac-black: var(--ac-black);
+// $primary-10-90: var(--ac-color-text-90);
+// $ac-link-black: var(--ac-link-black);
+// $black-40: var(--ac-gray-darker);
+// $black-30: var(--ac-gray-dark);
+// $ac-gray: var(--ac-gray);
+// $ac-gray-light: var(--ac-gray-light);
+// $ac-gray-lighter: var(--ac-gray-lighter);
+// $ac-gray-lightest: var(--ac-gray-lightest);
+// $white-100: var(--ac-white-light);
+// $white-100er: var(--ac-white-lighter);
+// $white-100est: var(--ac-white-lightest);
+// $white-100: var(--ac-white);
+// $ac-full-white: var(--ac-full-white);
+
+// $info-light: var(--ac-blue-light);
+// transparent-light-gray: var(--ac-bg-light-gray);
+// $table-header: var(--table-header);
+// $ac-label-text: var(--ac-label-text);
+
+// for dark theme CSS
+// $dark-bg: var(--dark-bg);
+// $black-8: var(--dark-bg-light);
+// ===================================PREVIOUS STYLE========================================
+
 // white and black
 $white-100: hsl(0, 0%, 100%);
 $black-100: hsl(0, 0%, 0%);
@@ -20,38 +63,6 @@ $primary-93: hsl($primary-hue, $primary-saturation, 93%);
 $primary-95: hsl($primary-hue, $primary-saturation, 95%);
 $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 color guides
-$secondary-hue: 197;
-$secondary-saturation: 50%;
-$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%);
-$secondary-60: hsl($secondary-hue, $secondary-saturation, 60%);
-$secondary-70: hsl($secondary-hue, $secondary-saturation, 70%);
-$secondary-80: hsl($secondary-hue, $secondary-saturation, 80%);
-$secondary-90: hsl($secondary-hue, $secondary-saturation, 90%);
-$secondary-93: hsl($secondary-hue, $secondary-saturation, 93%);
-$secondary-95: hsl($secondary-hue, $secondary-saturation, 95%);
-$secondary-97: hsl($secondary-hue, $secondary-saturation, 97%);
-
-$secondary-light-grey: hsl($secondary-hue, 30%, 96%);
-$secondary-dark-grey: hsl($secondary-hue, 30%, 10%);
-
-$color-text: hsl($secondary-hue, 10%, 35%);
-$color-heading: hsl($secondary-hue, 10%, 10%);
-$color-label: hsl($secondary-hue, 20%, 50%);
-$color-link: hsl($secondary-hue, 40%, 20%);
-$color-border-light: hsl($primary-hue, 40%, 95%);
-$color-border: hsl($primary-hue, 50%, 90%);
-$color-border-dark: hsl($primary-hue, 10%, 80%);
-
 // green color guides
 $green-hue: 141;
 $green-saturation: 53%;
@@ -294,6 +305,7 @@ $black-97: hsl($black-hue, $black-saturation, 97%);
   2
 );
 
+
 // for yellow classes
 @include generate-color-classes(
   "text",

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

@@ -12,7 +12,7 @@
     border-bottom: solid 1px;
     transition: 0.3s;
     transform: scaleX(0);
-    border-color: $primary;
+    border-color: #1971bd;
   }
 
   &::after {
@@ -26,7 +26,7 @@
     border-right: solid 1px;
     transition: 0.3s;
     transform: scaleY(0);
-    border-color: $primary;
+    border-color: #1971bd;
   }
 
   &:hover {

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

@@ -15,13 +15,13 @@ $positions: (
 // border position 1px
 @each $key, $position in $positions {
   .b-#{$key}-1 {
-    border-#{$position}: 1px solid $color-border;
+    border-#{$position}: 1px solid $primary-90;
   }
 }
 
 // border 1px
 .b-1 {
-  border: 1px solid $color-border;
+  border: 1px solid $primary-90;
 }
 
 .is-rounded-0 {
@@ -71,6 +71,10 @@ $positions: (
   width: 800px;
 }
 
+// .dropdown-content {
+//   background-color: $white-100;
+// }
+
 // color swatch start
 input[type="color"] {
   -webkit-appearance: none;
@@ -100,9 +104,37 @@ input[type="color"]::-moz-color-swatch {
 }
 
 hr {
-  background-color: $color-border;
+  background-color: $primary-90;
 }
 
+// color swatch end
+
+// .is-dark-theme {
+//   .dropdown-content {
+//     background-color: $black-80;
+//   }
+// }
+
+// .ac-preloader {
+//   color: $primary-10;
+// }
+
+// .section-padding {
+//   padding: 100px 0;
+// }
+
+// .section-padding-60 {
+//   padding: 60px 0;
+// }
+
+// .short-section-padding {
+//   padding: 50px 0;
+// }
+
+// .section-divider {
+//   background-color: $primary-90;
+// }
+
 .is-auto-hight {
   height: auto !important;
   min-height: auto !important;
@@ -166,6 +198,18 @@ hr {
   vertical-align: middle;
 }
 
+// .is-flex-start {
+//   justify-content: flex-start !important;
+// }
+
+// .is-flex-center {
+//   justify-content: center !important;
+// }
+
+// .is-flex-end {
+//   justify-content: flex-end;
+// }
+
 .ac-vcentered {
   display: flex;
   justify-content: space-between;
@@ -322,12 +366,19 @@ hr {
   background-color: transparent;
 }
 
+// .is-danger {
+//   font-size: 12px;
+//   line-height: 22px;
+//   color: $danger;
+//   text-align: left;
+// }
+
 p.is-danger {
   color: $danger;
 }
 
 code {
-  color: $color-heading;
+  color: $primary-5;
 }
 
 .is-dark-theme {
@@ -341,6 +392,10 @@ code {
   color: $danger !important;
 }
 
+// .responsive-only {
+//   display: none;
+// }
+
 button {
   &:focus {
     box-shadow: none;
@@ -348,6 +403,47 @@ button {
   }
 }
 
+// line title global start
+// .ac-line-title {
+//   position: relative;
+//   z-index: 1;
+//   margin-bottom: 10px;
+
+//   &:after {
+//     position: absolute;
+//     content: "";
+//     left: 0;
+//     top: 12px;
+//     width: 100%;
+//     height: 1px;
+//     background-color: $primary-90;
+//   }
+
+//   h5 {
+//     color: $primary-10;
+//     background-color: $white-100;
+//     z-index: 2;
+//     display: inline-block;
+//     position: relative;
+//     padding-right: 5px;
+//     font-family: "roboto";
+//   }
+// }
+
+// line title global end
+// docs preview start
+// .docs-preview {
+//   pre {
+//     margin: 0;
+//     display: inline-flex;
+//     align-items: center;
+//     font-size: 12px;
+//     font-weight: 600;
+//     padding: 2px 5px;
+//   }
+// }
+
+// docs preview end
 // background color start
 .is-bg-white {
   background-color: $white-100 !important;
@@ -622,6 +718,31 @@ $border_color_4: transparent transparent #585d6e transparent;
 
 // Customize tooltip end
 
+// ac-footer sticky start
+// .ac-footer-action {
+//   margin-top: 10px;
+//   padding-top: 10px;
+//   background-color: $white-100;
+//   padding: 10px 20px;
+//   margin-left: 0;
+//   margin-right: 0;
+//   margin-left: -20px;
+//   border: none;
+//   border-radius: 0;
+//   border-top: 1px solid $primary-90;
+
+//   &.is-sticky {
+//     position: sticky;
+//     bottom: 0;
+//     width: calc(100% + 20px);
+//     margin-bottom: -4px;
+//     z-index: 999;
+//     border: none;
+//     border-top: 1px solid $primary-90;
+//     box-shadow: none;
+//   }
+// }
+
 // status css
 .status {
   height: 10px;
@@ -658,7 +779,7 @@ body:has(.has-info-content) {
   height: 100vh;
   overflow-y: auto;
   padding: 20px;
-  border-left: 1px solid $color-border;
+  border-left: 1px solid $primary-90;
   width: 550px;
   margin-left: auto;
   position: fixed;

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

@@ -10,7 +10,7 @@ body {
   font-family: $font-paragraph;
   font-weight: 400;
   font-size: 13px;
-  color: $color-heading;
+  color: $primary-10;
 }
 
 p {
@@ -28,7 +28,7 @@ h5,
 h6 {
   font-family: $font-heading;
   font-weight: 600;
-  color: $color-heading;
+  color: $primary-5;
 }
 
 h1 {
@@ -87,12 +87,9 @@ h6 {
   }
 }
 
-a:not(.ac-button) {
+a {
   font-family: $font-paragraph;
   color: $primary;
-  &:hover {
-    color: $primary;
-  }
 }
 
 .text-xm {
@@ -124,7 +121,7 @@ hr {
 }
 
 strong {
-  color: $color-text;
+  color: $primary-20;
 }
 
 .is-font-medium {
@@ -137,4 +134,4 @@ strong {
 
 .material-icons {
   font-size: 1em;
-}
+}

package/vue-components/styles/components/_ac-code-highlight.scss

@@ -1,8 +1,8 @@
 .ac-code-highlight {
   pre {
     font-size: 13px;
-    color: $color-heading;
-    background-color: $color-border;
+    color: $primary-10;
+    background-color: $primary-90;
   }
 
   &.is-dark {
@@ -34,21 +34,16 @@ pre[class*="language-"] {
 Responsive Classes
 *****************************************/
 // Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-}
+@media (max-width: 575.98px) {}
 
 // Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-}
+@media (min-width: 576px) and (max-width: 767.98px) {}
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-}
+@media (min-width: 768px) and (max-width: 991.98px) {}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-}
+@media (min-width: 992px) and (max-width: 1199.98px) {}
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+@media (min-width: 1200px) {}

package/vue-components/styles/components/_ac-drag.scss

@@ -13,13 +13,13 @@
     h5 {
       font-size: 16px;
       font-family: $font-paragraph;
-      color: $color-heading;
+      color: $primary-10;
       font-weight: 500;
     }
   }
 
   .dragable-list-items {
-    background-color: $color-border;
+    background-color: $primary-90;
     border-radius: 4px;
     max-height: 400px;
 
@@ -38,7 +38,7 @@
         padding-bottom: 4px;
 
         &.is-not-change {
-          background-color: $color-border;
+          background-color: $primary-90;
           margin-left: -40px !important;
           padding-left: 80px;
         }
@@ -46,7 +46,7 @@
         span,
         strong {
           font-size: 13px;
-          color: $color-heading;
+          color: $primary-10;
           padding: 0 5px;
           font-weight: 500;
           display: block;
@@ -84,7 +84,7 @@
             }
 
             input[type="text"] {
-              background-color: $color-border;
+              background-color: $primary-90;
               border: none;
               font-weight: 500;
               padding: 4px 5px;
@@ -135,6 +135,7 @@
 
         ul {
           li {
+
             span,
             strong {
               font-weight: 400;
@@ -243,5 +244,4 @@ Responsive Classes
 }
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+@media (min-width: 1200px) {}

package/vue-components/styles/components/_ac-tags.scss

@@ -1,11 +1,11 @@
 // .tag:not(body) {
-//   background-color: $color-border;
+//   background-color: $primary-90;
 //   font-size: 10px;
 //   height: 18px;
 //   font-weight: 500;
 //   line-height: 1;
 //   letter-spacing: 0px;
-//   color: $color-heading;
+//   color: $primary-5;
 //   &.is-outlined {
 //     border: 1px solid;
 //     background-color: transparent;
@@ -13,7 +13,7 @@
 
 //   a {
 //     &:hover {
-//       color: $color-heading;
+//       color: $primary-10;
 //     }
 //   }
 

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

@@ -27,7 +27,7 @@
     padding: 15px 20px;
     margin-bottom: 15px;
     border-radius: 4px;
-    border: 1px solid $color-border;
+    border: 1px solid $primary-90;
 
     &.open {
       .accordion-heading {
@@ -56,7 +56,7 @@
       .icon {
         width: 20px;
         height: 20px;
-        border: 1px solid $color-border;
+        border: 1px solid $primary-90;
         line-height: 20px;
         display: flex;
         justify-content: center;
@@ -74,7 +74,7 @@
 
       p {
         font-size: 13px;
-        color: $color-text;
+        color: $primary-20;
         line-height: 1.6;
       }
     }
@@ -114,4 +114,4 @@ Responsive Classes
 
 // Extra large devices (large desktops, 1200px and up)
 @media (min-width: 1200px) {
-}
+}

package/vue-components/styles/components/_add-card.scss

@@ -17,7 +17,7 @@
 //       font-weight: 600;
 //       font-size: 25px;
 //       line-height: 29px;
-//       color: $color-heading;
+//       color: $primary-5;
 //       margin-left: 20px;
 //     }
 //   }

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

@@ -1,6 +1,6 @@
 .ac-breadcrumb {
   padding: 8px 20px;
-  border-bottom: 1px solid $color-border-light;
+  border-bottom: 1px solid $primary-95;
   position: sticky;
   top: 50px;
   height: auto;
@@ -12,20 +12,20 @@
 
 .breadcrumb {
   a {
-    color: $color-text;
+    color: $primary-20;
     font-size: 13px;
     padding: 0 3px;
     font-weight: 500;
     font-style: normal;
 
     &:hover {
-      color: $color-heading;
+      color: $primary-10;
     }
   }
 
   li.is-active {
     a {
-      color: $color-heading;
+      color: $primary-10;
       font-weight: 500;
     }
   }

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

@@ -86,7 +86,7 @@ button.is-primary {
     cursor: pointer;
     border: none;
     color: $primary;
-    background-color: $color-border;
+    background-color: $primary-90;
     transition: 0.3s ease-in-out;
     margin: 0 !important;
     border-radius: 0;

package/vue-components/styles/components/_card-body-wrapper.scss

@@ -14,7 +14,7 @@
 //         font-weight: 500;
 //         font-size: 14px;
 //         line-height: 16px;
-//         color: $color-heading;
+//         color: $primary-5;
 
 //         .require {
 //           color: #ff0000;
@@ -24,7 +24,7 @@
 //           font-weight: normal;
 //           font-size: 14px;
 //           line-height: 16px;
-//           color: $color-text;
+//           color: $primary-20;
 //           margin-top: 10px;
 //         }
 //       }

package/vue-components/styles/components/_direct-deploy.scss

@@ -3,7 +3,7 @@
 //     font-weight: 500;
 //     font-size: 18px;
 //     line-height: 21px;
-//     color: $color-heading;
+//     color: $primary-5;
 //     margin-bottom: 10px;
 //     .fa {
 //       color: $primary;
@@ -13,7 +13,7 @@
 //   p {
 //     font-size: 14px;
 //     line-height: 160%;
-//     color: $color-heading;
+//     color: $primary-5;
 //     margin-bottom: 20px;
 //   }
 
@@ -21,7 +21,7 @@
 //     font-weight: normal;
 //     font-size: 14px;
 //     line-height: 16px;
-//     color: $color-heading;
+//     color: $primary-5;
 //   }
 
 //   .button {
@@ -31,7 +31,7 @@
 //   .msg {
 //     font-size: 12px;
 //     line-height: 14px;
-//     color: $color-text;
+//     color: $primary-20;
 //   }
 //   .buttons {
 //     &.is-gray {
@@ -50,7 +50,7 @@
 //     font-weight: 500;
 //     font-size: 16px;
 //     line-height: 19px;
-//     color: $color-text;
+//     color: $primary-20;
 //   }
 // }
 // .is-gray {

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

@@ -7,13 +7,13 @@
     max-width: 500px;
     max-height: calc(100vh - 200px);
     overflow-y: auto;
-    border: 1px solid $color-border;
+    border: 1px solid $primary-90;
 
     label {
       padding: 8px 16px;
       display: flex;
-      border-bottom: 1px solid $color-border-light;
-      color: $color-text;
+      border-bottom: 1px solid $primary-95;
+      color: $primary-20;
       font-weight: 500;
     }
     .dropdown-item {
@@ -22,11 +22,11 @@
       gap: 8px;
       font-size: 13px;
       padding: 8px 16px;
-      color: $color-text;
+      color: $primary-20;
       &:hover {
         background-color: $primary-97;
         color: $primary;
       }
     }
   }
-}
+}