@appscode/design-system 2.0.41-alpha.8 → 2.0.41-alpha.9

package/main.scss

@@ -21,4 +21,3 @@
 @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.41-alpha.8",
+  "version": "2.0.41-alpha.9",
   "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,28 +1,16 @@
-:root {
-  --primary-hue: 208;
-  --primary-saturation: 77%;
-  --primary-light: 40%;
-}
-:root {
-  --theme-mode: light;
-}
-
 // white and black
 $white-100: hsl(0, 0%, 100%);
 $black-100: hsl(0, 0%, 0%);
 
 // primary color guides
-$primary-hue: var(--primary-hue);
-$primary-saturation: var(--primary-saturation);
-$primary-light: var(--primary-light);
-$theme-mode: var(--theme-mode);
-
+$primary-hue: 208;
+$primary-saturation: 77%;
 $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%);
-$ac-primary: hsl($primary-hue, $primary-saturation, $primary-light);
+$primary: hsl($primary-hue, $primary-saturation, 40%);
 $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: hsl(208, 77%, 40) !default;
+$primary: $primary !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: $ac-primary;
+    border-color: $primary;
   }
 
   &::after {
@@ -26,7 +26,7 @@
     border-right: solid 1px;
     transition: 0.3s;
     transform: scaleY(0);
-    border-color: $ac-primary;
+    border-color: $primary;
   }
 
   &:hover {

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

@@ -154,7 +154,7 @@ hr {
 .is-dark-theme {
   .toasted-container {
     i.fa {
-      color: $white-100 !important;
+      color: #ffffff !important;
     }
   }
 }
@@ -486,7 +486,7 @@ $border_color_4: transparent transparent #585d6e transparent;
   &.is-button-info {
     .tooltip-inner {
       background: $white-100;
-      color: $ac-primary;
+      color: $primary;
       border-radius: 4px;
       padding: 5px 20px 4px;
       box-shadow: $ac-shadow-1;
@@ -663,7 +663,7 @@ body:has(.has-info-content) {
   margin-left: auto;
   position: fixed;
   right: 0;
-  background: $white-100;
+  background: #fff;
   top: 0;
   z-index: 99999;
   box-shadow: -3px 2px 10px 3px rgba(0, 0, 0, 0.1);
@@ -675,10 +675,8 @@ body:has(.has-info-content) {
 
 .tag:not(body) {
   &.is-primary {
-    background-color: $ac-primary;
-    color: $white-100;
     &.is-light {
-      color: $ac-primary;
+      color: $primary;
       background-color: $primary-95;
     }
   }

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

@@ -6,7 +6,7 @@ $font-paragraph: "Roboto", sans-serif;
 
 html,
 body {
-  background-color: $white-100;
+  background-color: transparent;
   font-family: $font-paragraph;
   font-weight: 400;
   font-size: 13px;
@@ -87,25 +87,11 @@ h6 {
   }
 }
 
-.content {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: $color-heading;
-  }
-  p {
-    color: $color-text;
-  }
-}
-
 a:not(.ac-button) {
   font-family: $font-paragraph;
-  color: $ac-primary;
+  color: $primary;
   &:hover {
-    color: $ac-primary;
+    color: $primary;
   }
 }
 
@@ -152,6 +138,3 @@ strong {
 .material-icons {
   font-size: 1em;
 }
-.has-text-primary {
-  color: $ac-primary;
-}

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

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

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

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

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

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

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

@@ -1,41 +1,16 @@
 .button {
-  color: $color-text;
-  background-color: $white-100;
-
   &.ac-button {
     padding: 8px 16px;
     font-weight: 500;
     line-height: 1;
 
     &.is-primary {
-      background-color: $ac-primary;
-      &:hover {
-        background-color: $primary-30;
-      }
       &.is-light {
-        color: $ac-primary;
-        background-color: $primary-95;
-        &:hover {
-          background-color: $primary-90;
-        }
+        color: $primary;
         &:focus:not(:hover) {
           color: inherit;
         }
       }
-      &:disabled:not(.is-light) {
-        background-color: $ac-primary;
-        border-color: $ac-primary;
-      }
-      &.is-outlined {
-        border-color: $ac-primary;
-        color: $ac-primary;
-        background-color: transparent;
-        &:hover {
-          border-color: $primary-30;
-          background-color: $ac-primary;
-          color: $white-100;
-        }
-      }
     }
     &.is-warning {
       &.is-light {
@@ -96,7 +71,7 @@
   }
 }
 button.is-primary {
-  background-color: $ac-primary;
+  background-color: $primary;
 }
 .up-down-buttons {
   border-radius: 4px;
@@ -110,7 +85,7 @@ button.is-primary {
     height: 18px;
     cursor: pointer;
     border: none;
-    color: $ac-primary;
+    color: $primary;
     background-color: $color-border;
     transition: 0.3s ease-in-out;
     margin: 0 !important;
@@ -119,7 +94,7 @@ button.is-primary {
       background-color: $primary-80;
     }
     &.is-primary {
-      background-color: $ac-primary;
+      background-color: $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: $ac-primary;
+//       color: $primary;
 //     }
 //   }
 

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

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

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

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

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

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

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

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

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

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

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

@@ -18,7 +18,7 @@
   }
 
   &:hover {
-    background-color: $ac-primary;
+    background-color: $primary;
   }
 }
 
@@ -108,7 +108,7 @@
             li {
               &.is-active {
                 a {
-                  background-color: $ac-primary;
+                  background-color: $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: $ac-primary;
+    color: $primary;
     display: inline-flex;
     font-family: sans-serif;
     font-weight: bold;
@@ -90,7 +90,7 @@
 
   &::-webkit-progress-value {
     border-radius: 5px;
-    background-color: $ac-primary;
+    background-color: $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: $ac-primary;
+    background-color: $primary;
     background-image: linear-gradient(
       45deg,
       rgba(255, 255, 255, 0.15) 25%,
@@ -122,7 +122,7 @@
 
   &::-ms-fill {
     border-radius: 5px;
-    background-color: $ac-primary;
+    background-color: $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: $ac-primary;
+      background-color: $primary;
       background-size: 10px 10px;
     }
 
     &::-moz-progress-bar {
       border-radius: 5px;
-      background-color: $ac-primary;
+      background-color: $primary;
       background-size: 10px 10px;
     }
 
     &::-ms-fill {
       border-radius: 5px;
-      background-color: $ac-primary;
+      background-color: $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 $ac-primary;
+      box-shadow: inset 0 0 0 1px $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 $ac-primary;
+        box-shadow: inset 0 0 0 1.2px $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 $ac-primary !important;
+          box-shadow: inset 0 0 0 1.2px $primary !important;
         }
       }
 
@@ -106,7 +106,7 @@
         border: none;
 
         a:not(.tag a) {
-          color: $ac-primary;
+          color: $primary;
           font-weight: 500 !important;
           transition: 0.3s ease-in-out;
           font-weight: 400;
@@ -115,7 +115,7 @@
         .tags {
           .tag {
             a {
-              color: $ac-primary;
+              color: $primary;
               transition: 0.3s ease-in-out;
               font-weight: 500;
 
@@ -142,7 +142,7 @@
 
           i.fa {
             position: absolute;
-            background-color: $ac-primary;
+            background-color: $primary;
             color: $white-100;
             font-size: 11px;
             width: 15px;
@@ -291,8 +291,8 @@
               }
 
               &:checked + label::before {
-                background-color: $ac-primary;
-                border-color: $ac-primary;
+                background-color: $primary;
+                border-color: $primary;
               }
 
               &:checked + label::after {
@@ -302,8 +302,8 @@
           }
 
           .is-checkradio[type="checkbox"].ac-checkbox:checked + label::before {
-            background-color: $ac-primary;
-            border-color: $ac-primary;
+            background-color: $primary;
+            border-color: $primary;
           }
 
           .is-checkradio[type="checkbox"] + label::before,
@@ -370,7 +370,7 @@
         }
 
         &:hover {
-          background-color: $ac-primary;
+          background-color: $primary;
 
           td {
             color: $white-100;
@@ -383,14 +383,14 @@
 
 .table.ac-table tbody tr:hover td a:not(.tag a) {
   text-decoration: underline;
-  color: $ac-primary;
+  color: $primary;
 }
 
 // table inner shadow
 .table-inner-shadow {
   border-radius: 0px;
   background: $color-border;
-  box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px $white-100;
+  box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px #ffffff;
 }
 
 @keyframes expand {

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

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

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

@@ -186,7 +186,7 @@
                 }
 
                 &:hover {
-                  color: $ac-primary !important;
+                  color: $primary !important;
                 }
               }
             }
@@ -233,7 +233,7 @@
         text-align: center;
         padding: 4px 20px;
         border-radius: 4px;
-        color: $white-100 !important;
+        color: #ffffff !important;
         text-transform: uppercase;
 
         &.is-success {

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

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