@appscode/design-system 2.0.40 → 2.0.41-alpha.2

package/main.scss

@@ -21,3 +21,4 @@
 @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";
+@import "@/components/vue-components/styles/theme/appscode.scss";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.0.40",
+  "version": "2.0.41-alpha.2",
   "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,16 +1,24 @@
+:root {
+  --primary-hue: 208;
+  --primary-saturation: 77%;
+  --primary-light: 40%;
+}
+
 // white and black
 $white-100: hsl(0, 0%, 100%);
 $black-100: hsl(0, 0%, 0%);
 
 // primary color guides
-$primary-hue: 208;
-$primary-saturation: 77%;
+$primary-hue: var(--primary-hue);
+$primary-saturation: var(--primary-saturation);
+$primary-light: var(--primary-light);
+
 $primary-5: hsl($primary-hue, $primary-saturation, 5%);
 $primary-10: hsl($primary-hue, $primary-saturation, 10%);
 $primary-20: hsl($primary-hue, $primary-saturation, 20%);
 $primary-30: hsl($primary-hue, $primary-saturation, 30%);
 $primary-40: hsl($primary-hue, $primary-saturation, 40%);
-$primary: hsl($primary-hue, $primary-saturation, 40%);
+$ac-primary: hsl($primary-hue, $primary-saturation, $primary-light);
 $primary-50: hsl($primary-hue, $primary-saturation, 50%);
 $primary-60: hsl($primary-hue, $primary-saturation, 60%);
 $primary-70: hsl($primary-hue, $primary-saturation, 70%);

package/vue-components/styles/base/utilities/_customize-bulma.scss

@@ -75,7 +75,7 @@ $weight-bold: 700 !default;
 // // Derived-Variables
 
 // $primary: $turquoise !default;
-$primary: $primary !default;
+// $primary: hsl(208, 77%, 40) !default;
 $info: $blue !default;
 $success: $success !default;
 $warning: $warning !default;

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: $ac-primary;
   }
 
   &::after {
@@ -26,7 +26,7 @@
     border-right: solid 1px;
     transition: 0.3s;
     transform: scaleY(0);
-    border-color: $primary;
+    border-color: $ac-primary;
   }
 
   &:hover {

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

@@ -486,7 +486,7 @@ $border_color_4: transparent transparent #585d6e transparent;
   &.is-button-info {
     .tooltip-inner {
       background: $white-100;
-      color: $primary;
+      color: $ac-primary;
       border-radius: 4px;
       padding: 5px 20px 4px;
       box-shadow: $ac-shadow-1;
@@ -676,7 +676,7 @@ body:has(.has-info-content) {
 .tag:not(body) {
   &.is-primary {
     &.is-light {
-      color: $primary;
+      color: $ac-primary;
       background-color: $primary-95;
     }
   }

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

@@ -89,9 +89,9 @@ h6 {
 
 a:not(.ac-button) {
   font-family: $font-paragraph;
-  color: $primary;
+  color: $ac-primary;
   &:hover {
-    color: $primary;
+    color: $ac-primary;
   }
 }
 

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

@@ -10,7 +10,7 @@
 
   .vc-highlight {
     width: 45px !important;
-    background-color: $primary !important;
+    background-color: $ac-primary !important;
     height: 45px !important;
   }
 

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

@@ -33,12 +33,12 @@
 //   }
 
 //   &.is-primary {
-//     background-color: $primary;
+//     background-color: $ac-primary;
 //     color: $white-100;
 
 //     &.is-light {
 //       background-color: rgba(25, 113, 189, 0.2);
-//       color: $primary;
+//       color: $ac-primary;
 //     }
 //   }
 

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

@@ -16,7 +16,7 @@
           top: 0;
           width: 4px;
           height: 100%;
-          background-color: $primary;
+          background-color: $ac-primary;
         }
       }
     }

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

@@ -1,4 +1,26 @@
 .button {
+  &.is-primary {
+    background-color: $ac-primary;
+    &:hover {
+      background-color: $primary-30;
+    }
+    &.is-outlined {
+      border-color: $ac-primary;
+      // background-color: $ac-primary;
+      color: $ac-primary;
+      &:hover {
+        border-color: $primary-30;
+        background-color: $ac-primary;
+      }
+      &.is-light {
+        background-color: $primary-95;
+        &:hover {
+          background-color: $ac-primary;
+          color: $white-100;
+        }
+      }
+    }
+  }
   &.ac-button {
     padding: 8px 16px;
     font-weight: 500;
@@ -6,7 +28,7 @@
 
     &.is-primary {
       &.is-light {
-        color: $primary;
+        color: $ac-primary;
         &:focus:not(:hover) {
           color: inherit;
         }
@@ -71,7 +93,7 @@
   }
 }
 button.is-primary {
-  background-color: $primary;
+  background-color: $ac-primary;
 }
 .up-down-buttons {
   border-radius: 4px;
@@ -85,7 +107,7 @@ button.is-primary {
     height: 18px;
     cursor: pointer;
     border: none;
-    color: $primary;
+    color: $ac-primary;
     background-color: $color-border;
     transition: 0.3s ease-in-out;
     margin: 0 !important;
@@ -94,7 +116,7 @@ button.is-primary {
       background-color: $primary-80;
     }
     &.is-primary {
-      background-color: $primary;
+      background-color: $ac-primary;
       color: $white-100;
       &:hover {
         background-color: $primary-30;

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

@@ -6,7 +6,7 @@
 //     color: $color-heading;
 //     margin-bottom: 10px;
 //     .fa {
-//       color: $primary;
+//       color: $ac-primary;
 //     }
 //   }
 

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

@@ -25,7 +25,7 @@
       color: $color-text;
       &:hover {
         background-color: $primary-97;
-        color: $primary;
+        color: $ac-primary;
       }
     }
   }

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

@@ -79,7 +79,7 @@
       }
 
       &.is-active {
-        background-color: $primary;
+        background-color: $ac-primary;
         color: $white-100;
       }
     }

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

@@ -62,7 +62,7 @@
     transition: 0.3 ease-in-out;
 
     &:hover {
-      color: $primary;
+      color: $ac-primary;
     }
 
     span {
@@ -104,7 +104,7 @@
 
         &:hover {
           background-color: $color-border;
-          color: $primary;
+          color: $ac-primary;
         }
 
         span {
@@ -126,7 +126,7 @@
 
         &:hover {
           background-color: $color-border;
-          color: $primary !important;
+          color: $ac-primary !important;
         }
       }
     }

package/vue-components/styles/components/_overview-page.scss

@@ -50,7 +50,7 @@
         font-weight: 500;
 
         &:hover {
-          color: $primary;
+          color: $ac-primary;
         }
       }
     }

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

@@ -16,7 +16,7 @@
 //         border-radius: 4px;
 
 //         &:hover {
-//           background-color: $primary;
+//           background-color: $ac-primary;
 //           color: $white-100;
 //           border: 1px solid
 //             hsla(
@@ -72,16 +72,16 @@
 // }
 
 // ul > li > a.previous {
-//   border: 1px solid $primary;
+//   border: 1px solid $ac-primary;
 //   background-color: $color-border;
-//   color: $primary;
+//   color: $ac-primary;
 
 // }
 
 // ul > li > a.next {
-//   border: 1px solid $primary;
+//   border: 1px solid $ac-primary;
 //   background-color: $color-border;
-//   color: $primary;
+//   color: $ac-primary;
 
 // }
 

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

@@ -14,7 +14,7 @@
   animation: spinner 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
   width: 2em;
   height: 2em;
-  background-color: $primary;
+  background-color: $ac-primary;
 }
 
 .spinner:after {

package/vue-components/styles/components/_preview-modal.scss

@@ -18,7 +18,7 @@
   }
 
   &:hover {
-    background-color: $primary;
+    background-color: $ac-primary;
   }
 }
 
@@ -108,7 +108,7 @@
             li {
               &.is-active {
                 a {
-                  background-color: $primary;
+                  background-color: $ac-primary;
                   border-radius: 5px;
                   color: $white-100;
                   padding: 10px 10px;

package/vue-components/styles/components/_progress-bar.scss

@@ -18,7 +18,7 @@
     border: 1px solid $primary-10;
     border-radius: 10px;
     box-shadow: 0 0 2px $primary-10;
-    color: $primary;
+    color: $ac-primary;
     display: inline-flex;
     font-family: sans-serif;
     font-weight: bold;
@@ -90,7 +90,7 @@
 
   &::-webkit-progress-value {
     border-radius: 5px;
-    background-color: $primary;
+    background-color: $ac-primary;
     background-image: linear-gradient(
       45deg,
       rgba(255, 255, 255, 0.15) 25%,
@@ -106,7 +106,7 @@
 
   &::-moz-progress-bar {
     border-radius: 5px;
-    background-color: $primary;
+    background-color: $ac-primary;
     background-image: linear-gradient(
       45deg,
       rgba(255, 255, 255, 0.15) 25%,
@@ -122,7 +122,7 @@
 
   &::-ms-fill {
     border-radius: 5px;
-    background-color: $primary;
+    background-color: $ac-primary;
     background-image: linear-gradient(
       45deg,
       rgba(255, 255, 255, 0.15) 25%,
@@ -224,19 +224,19 @@
 
     &::-webkit-progress-value {
       border-radius: 5px;
-      background-color: $primary;
+      background-color: $ac-primary;
       background-size: 10px 10px;
     }
 
     &::-moz-progress-bar {
       border-radius: 5px;
-      background-color: $primary;
+      background-color: $ac-primary;
       background-size: 10px 10px;
     }
 
     &::-ms-fill {
       border-radius: 5px;
-      background-color: $primary;
+      background-color: $ac-primary;
       background-size: 10px 10px;
       border: none;
     }

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

@@ -65,7 +65,7 @@
   tbody {
     &.is-selected {
       transform: matrix(1, 0, 0, 1, 0, 0) !important;
-      box-shadow: inset 0 0 0 1px $primary;
+      box-shadow: inset 0 0 0 1px $ac-primary;
       border-radius: 4px;
       border-bottom: none;
       color: $black-5;
@@ -79,7 +79,7 @@
       &.is-selected {
         background-color: $primary-97 !important;
         transform: matrix(1, 0, 0, 1, 0, 0) !important;
-        box-shadow: inset 0 0 0 1.2px $primary;
+        box-shadow: inset 0 0 0 1.2px $ac-primary;
         border-radius: 4px;
         border-bottom: none;
         color: $black-5;
@@ -90,7 +90,7 @@
         &:hover {
           background-color: $primary-95 !important;
           transform: matrix(1, 0, 0, 1, 0, 0) !important;
-          box-shadow: inset 0 0 0 1.2px $primary !important;
+          box-shadow: inset 0 0 0 1.2px $ac-primary !important;
         }
       }
 
@@ -106,7 +106,7 @@
         border: none;
 
         a:not(.tag a) {
-          color: $primary;
+          color: $ac-primary;
           font-weight: 500 !important;
           transition: 0.3s ease-in-out;
           font-weight: 400;
@@ -115,7 +115,7 @@
         .tags {
           .tag {
             a {
-              color: $primary;
+              color: $ac-primary;
               transition: 0.3s ease-in-out;
               font-weight: 500;
 
@@ -142,7 +142,7 @@
 
           i.fa {
             position: absolute;
-            background-color: $primary;
+            background-color: $ac-primary;
             color: $white-100;
             font-size: 11px;
             width: 15px;
@@ -291,8 +291,8 @@
               }
 
               &:checked + label::before {
-                background-color: $primary;
-                border-color: $primary;
+                background-color: $ac-primary;
+                border-color: $ac-primary;
               }
 
               &:checked + label::after {
@@ -302,8 +302,8 @@
           }
 
           .is-checkradio[type="checkbox"].ac-checkbox:checked + label::before {
-            background-color: $primary;
-            border-color: $primary;
+            background-color: $ac-primary;
+            border-color: $ac-primary;
           }
 
           .is-checkradio[type="checkbox"] + label::before,
@@ -370,7 +370,7 @@
         }
 
         &:hover {
-          background-color: $primary;
+          background-color: $ac-primary;
 
           td {
             color: $white-100;
@@ -383,7 +383,7 @@
 
 .table.ac-table tbody tr:hover td a:not(.tag a) {
   text-decoration: underline;
-  color: $primary;
+  color: $ac-primary;
 }
 
 // table inner shadow

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

@@ -13,8 +13,8 @@
 //           &.is-active {
 //             a {
 //               font-weight: 500;
-//               border-bottom-color: $primary;
-//               border-bottom: 2px solid $primary !important;
+//               border-bottom-color: $ac-primary;
+//               border-bottom: 2px solid $ac-primary !important;
 //               border-width: 2px;
 //             }
 //           }
@@ -28,7 +28,7 @@
 //             padding: 6px 16px;
 
 //             &:hover {
-//               border-bottom-color: $primary;
+//               border-bottom-color: $ac-primary;
 //             }
 //           }
 //         }
@@ -56,7 +56,7 @@
 //             position: relative;
 //             border-color: $color-border;
 //             z-index: 1;
-//             color: $primary;
+//             color: $ac-primary;
 
 //             &:after {
 //               position: absolute;
@@ -66,7 +66,7 @@
 //               width: 100%;
 //               height: 4px;
 //               border-radius: 4px 4px 0 0;
-//               background-color: $primary;
+//               background-color: $ac-primary;
 //             }
 
 //             a {
@@ -131,10 +131,10 @@
 //           &.is-active {
 //             a {
 //               color: $white-100;
-//               background-color: $primary;
+//               background-color: $ac-primary;
 
 //               &:hover {
-//                 background-color: $primary;
+//                 background-color: $ac-primary;
 //               }
 //             }
 //           }
@@ -162,7 +162,7 @@
 //         li {
 //           &.is-active {
 //             a {
-//               border-bottom: 3px solid $primary !important;
+//               border-bottom: 3px solid $ac-primary !important;
 //             }
 //           }
 //         }
@@ -182,7 +182,7 @@
 //             a {
 //               border-color: $color-border;
 //               background-color: $white-100;
-//               color: $primary;
+//               color: $ac-primary;
 //             }
 //           }
 //         }
@@ -215,7 +215,7 @@
 //             &.is-active {
 //               a {
 //                 background-color: $color-border;
-//                 color: $primary;
+//                 color: $ac-primary;
 //               }
 //             }
 //           }
@@ -226,7 +226,7 @@
 // }
 
 // .tabs li.is-active a {
-//   color: $primary;
+//   color: $ac-primary;
 // }
 
 // .no-data-available {
@@ -329,8 +329,8 @@
     li {
       &.is-active {
         a {
-          border-bottom-color: $primary;
-          color: $primary;
+          border-bottom-color: $ac-primary;
+          color: $ac-primary;
         }
       }
     }

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

@@ -186,7 +186,7 @@
                 }
 
                 &:hover {
-                  color: $primary !important;
+                  color: $ac-primary !important;
                 }
               }
             }

package/vue-components/styles/components/_widget-menu.scss

@@ -15,7 +15,7 @@
 
 //           &.is-active {
 //             background-color: transparent;
-//             color: $primary;
+//             color: $ac-primary;
 //           }
 
 //           .fa {
@@ -94,7 +94,7 @@
 //             color: $color-heading;
 
 //             &:hover {
-//               color: $primary;
+//               color: $ac-primary;
 //               background-color: transparent;
 //             }
 //           }

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

@@ -536,12 +536,12 @@
 
 //     &:focus {
 //       outline: none;
-//       border: 1px solid $primary;
+//       border: 1px solid $ac-primary;
 //     }
 
 //     &.is-selected {
-//       border: 1px solid $primary;
-//       background-color: $primary;
+//       border: 1px solid $ac-primary;
+//       background-color: $ac-primary;
 //       color: $white-100;
 //     }
 //   }

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

@@ -1,13 +1,13 @@
 .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;
@@ -15,7 +15,7 @@
   min-width: 280px;
 
   p {
-    color: $primary;
+    color: $ac-primary;
 
     .close-icon {
       padding-right: 10px;
@@ -24,7 +24,7 @@
 
     a {
       text-decoration: underline;
-      color: $primary;
+      color: $ac-primary;
 
       &:hover {
         color: hsla(
@@ -81,16 +81,16 @@
     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;
       }
     }

package/vue-components/styles/components/bbum/_card-team.scss

@@ -12,7 +12,7 @@
 
   &:hover {
     // box-shadow: $ac-shadow-1;
-    border: 1px solid $primary;
+    border: 1px solid $ac-primary;
     background-color: $white-100;
   }