@appscode/design-system 1.0.43-alpha.6 → 1.0.43-alpha.63

package/base/utilities/_default.scss

@@ -4,6 +4,7 @@
   grid-gap: 0px;
   grid-template-columns: 270px calc(100% - 270px);
   padding-top: 50px;
+
   &.is-fullwidth {
     grid-template-columns: auto !important;
 
@@ -25,24 +26,29 @@
   &.has-ui-builder {
     grid-template-columns: 70px calc(100% - 70px);
     grid-gap: 0;
+
     .inner-header {
       position: sticky;
       top: 100px;
-      background-color: #fff;
+      background-color: $ac-white;
       z-index: 997;
     }
+
     .ac-system-content {
       &.pr-15 {
         padding-right: 0 !important;
       }
+
       .ac-terminal {
         width: calc(100% - 290px);
         left: 289px;
       }
     }
+
     .ac-system-left-sidebar.is-expanded {
       z-index: 998;
     }
+
     &.expanded-sidebar {
       grid-gap: 0px;
       z-index: 9;
@@ -70,15 +76,18 @@
     .ac-system-body {
       padding-top: 0;
       grid-template-columns: 220px calc(100% - 440px) 220px;
+
       .ac-system-left-sidebar {
         border-right: none !important;
         height: calc(100vh - 60px);
+
         .ac-left-sidebar-wrapper {
           position: fixed;
           top: 140px;
           width: 219px;
-          border-right: 1px solid #e7e7e7;
+          border-right: 1px solid $ac-white-light;
           height: 100%;
+
           ul.menu-list-wrapper {
             padding-top: 10px;
           }
@@ -92,9 +101,9 @@
   }
 
   .ac-system-left-sidebar {
-    background-color: $ac-white;
     border-right: 1px solid $ac-white-light;
     box-shadow: none;
+
     &.is-expanded {
       z-index: 998;
 
@@ -130,10 +139,51 @@
     }
   }
 }
+
 .form-content {
   width: 720px;
 }
 
+.dropdown-content {
+  background-color: $ac-white;
+}
+
+// color swatch start
+input[type="color"] {
+  -webkit-appearance: none;
+  border: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1px solid #777;
+  margin-left: 3px;
+  padding: 2px;
+  cursor: pointer;
+}
+input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+// input[type="color"]::-moz-color-swatch,
+input[type="color"]::-webkit-color-swatch {
+  border: none;
+  border-radius: 50%;
+}
+input[type="color"]::-moz-color-swatch {
+  border: none;
+  border-radius: 50%;
+}
+// color swatch end
+
+.is-dark-theme {
+  .dropdown-content {
+    background-color: $dark-bg-light;
+  }
+}
+
+.ac-preloader {
+  color: $ac-color-text;
+}
+
 .section-padding {
   padding: 100px 0;
 }
@@ -167,21 +217,27 @@
 .is-not-fixed {
   position: inherit !important;
 }
+
 .b-1 {
   border: 1px solid $ac-white-light;
 }
+
 .b-t-1 {
   border-top: 1px solid $ac-white-light;
 }
+
 .b-b-1 {
   border-bottom: 1px solid $ac-white-light;
 }
+
 .b-l-1 {
   border-left: 1px solid $ac-white-light;
 }
+
 .b-r-1 {
   border-right: 1px solid $ac-white-light;
 }
+
 // border none
 .is-border-none {
   border: none !important;
@@ -207,6 +263,7 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
 .no-data-image {
   img {
     width: 250px;
@@ -268,13 +325,13 @@
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: #929292;
+    background-color: $ac-gray-light;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: #929292;
+    background-color: $ac-gray-light;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -315,33 +372,33 @@
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: #929292;
+    background-color: $ac-gray-light;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-moz-scrollbar-thumb {
-    background-color: #929292;
+    background-color: $ac-gray-light;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-ms-scrollbar-thumb {
-    background-color: #929292;
+    background-color: $ac-gray-light;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: #929292;
+    background-color: $ac-gray-light;
   }
 
   &::-moz-scrollbar-thumb:hover {
-    background-color: #929292;
+    background-color: $ac-gray-light;
   }
 
   &::-ms-scrollbar-thumb:hover {
-    background-color: #929292;
+    background-color: $ac-gray-light;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -372,13 +429,13 @@
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: #929292;
+    background-color: $ac-gray-light;
     border-radius: 50px;
     width: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: #929292;
+    background-color: $ac-gray-light;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -401,7 +458,7 @@
 
 .is-transparent {
   border: none;
-  background: transparent;
+  background-color: transparent;
 }
 
 .is-error {
@@ -410,9 +467,18 @@
   color: $ac-red;
   text-align: left;
 }
+
 code {
   color: $ac-color-heading;
 }
+
+.is-dark-theme {
+  code {
+    background-color: $dark-bg-light;
+    color: $ac-full-white;
+  }
+}
+
 .is-danger:not(.ac-button) {
   color: $ac-danger !important;
 }
@@ -429,42 +495,57 @@ button {
 }
 
 .tag:not(body) {
-  background-color: #e5e9f2;
+  background-color: $ac-white-light;
   font-size: 11px;
   height: 18px;
   letter-spacing: 0.1px;
   color: $ac-color-heading;
+
+  a {
+    &:hover {
+      color: $ac-color-text;
+    }
+  }
+
   &.is-available {
     background-color: #27b064;
     color: $ac-white;
   }
+
   &.is-success {
     background-color: $ac-green;
     color: $ac-white;
+
     &.is-light {
       background-color: rgba(39, 176, 100, 0.2);
       color: $ac-green;
     }
   }
+
   &.is-primary {
     background-color: $ac-primary;
     color: $ac-white;
+
     &.is-light {
       background-color: rgba(25, 113, 189, 0.2);
       color: $ac-primary;
     }
   }
+
   &.is-gray {
     background-color: #e5e9f2;
-    color: #666;
+    color: $ac-gray-darker;
   }
+
   &.is-warning {
     background-color: $ac-warning;
     color: $ac-white !important;
   }
+
   &.is-danger {
     background-color: $ac-red;
     color: $ac-white !important;
+
     &.is-light {
       background-color: rgba(234, 61, 47, 0.2);
       color: $ac-red !important;
@@ -476,6 +557,7 @@ button {
   .icon {
     margin-bottom: 0.5rem;
   }
+
   .tag {
     a {
       font-weight: 500;
@@ -496,12 +578,12 @@ button {
     top: 12px;
     width: 100%;
     height: 1px;
-    background: $ac-white-light;
+    background-color: $ac-white-light;
   }
 
   h5 {
     color: $ac-color-text;
-    background: $ac-white;
+    background-color: $ac-white;
     z-index: 2;
     display: inline-block;
     position: relative;
@@ -660,7 +742,7 @@ $border_color_4: transparent transparent #585d6e transparent;
 .ac-footer-action {
   margin-top: 10px;
   padding-top: 10px;
-  background: $ac-white;
+  background-color: $ac-white;
   padding: 10px 20px;
   margin-left: 0;
   margin-right: 0;
@@ -686,7 +768,7 @@ $border_color_4: transparent transparent #585d6e transparent;
   height: 10px;
   width: 10px;
   border-radius: 50%;
-  background: $ac-grey-lightest;
+  background-color: $ac-gray-lightest;
   border: 2px solid $ac-white;
   display: inline-flex;
 
@@ -702,6 +784,40 @@ $border_color_4: transparent transparent #585d6e transparent;
 // Status css
 // ac-footer sticky end
 
+// terminal scss start
+.ac-terminal {
+  padding: 3px;
+  position: fixed;
+  bottom: 0px;
+  height: 300px;
+  width: 100%;
+  background-color: $ac-white;
+  border: 1px solid var(--ac-white-light);
+
+  color: $ac-white;
+  z-index: 999;
+
+  .terminal-body {
+    font-family: "Inconsolata", monospace;
+    background-color: var(--dark-bg-light);
+    height: 100%;
+    color: $ac-white;
+
+    strong {
+      color: $ac-white;
+    }
+  }
+}
+
+// terminal scss end
+.is-dark-theme {
+  a {
+    &:hover {
+      color: #485fc7;
+    }
+  }
+}
+
 /****************************************
 Responsive Classes
 *****************************************/

package/base/utilities/_derived-variables.scss

@@ -1,28 +1,15 @@
-// Typography
-$ac-size-small: $ac-size-7;
-$ac-size-normal: $ac-size-6;
-$ac-size-medium: $ac-size-5;
-$ac-size-large: $ac-size-4;
-
 // color
 $ac-info: $ac-blue;
 $ac-success: $ac-primary;
 $ac-warning: $ac-yellow;
 $ac-danger: $ac-red;
 
-// bg-color
-$ac-bg-dark: #2c2e42;
-$ac-modal-header-bg: #e8e8e8;
-$ac-input-bg-color: #eceff4;
-$ac-bg-light-gray: #f4f6f9;
-$table-header: #e4e8ef;
 // Text colors
-$ac-color-text: #393e46;
-$ac-color-heading: #1c1c1c;
+$ac-color-text: var(--ac-text);
+$ac-color-heading: var(--ac-text-heading);
 
 // Link colors
 $ac-link: $ac-blue;
-$ac-link-black: #32325d;
 $ac-link-visited: $ac-purple;
 
 // Box Shadow

package/base/utilities/_initial-variables.scss

@@ -1,7 +1,5 @@
 // Typography
-@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
-// font rubik
-@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700&display=swap");
 
 $ac-family-heading: "Roboto", sans-serif;
 $ac-family-paragraph: "Roboto", sans-serif;
@@ -22,72 +20,15 @@ $font-size-small: 13px;
 $font-size-extra-small: 12px;
 $font-size-tiny: 11px;
 
-// Font weight
-$ac-weight-light: 300;
-$ac-weight-normal: 400;
-$ac-weight-medium: 500;
-$ac-weight-semibold: 600;
-$ac-weight-bold: 700;
-$ac-weight-extra: 800;
-$ac-weight-black: 900;
-
-// Miscellaneous
-$ac-easing: ease-out;
-$ac-radius-small: 2px;
-$ac-radius: 4px;
-$ac-radius-large: 6px;
-$ac-radius-rounded: 290486px;
-$ac-speed: 86ms;
-
-// Color Base
+// Base Color
 $ac-orange: #ff8000;
 $ac-yellow: #f7ad2a;
-$ac-green: #27b064;
+$ac-green: #158748;
 $ac-blue: #0aafff;
 $ac-purple: #791e94;
-$ac-red: #ea3d2f;
-$ac-bg: #fff;
+$ac-red: #ff3729;
 
-// Color Border
-$ac-border: #a6abbd;
-$ac-border-hover: #54657e;
-
-// Colors Primary
-$ac-primary: #1971bd;
-$ac-primary-90: #2f7ec3;
-$ac-primary-80: #478dca;
-$ac-primary-70: #5d9bd0;
-$ac-primary-60: #75a9d7;
-$ac-primary-50: #8bb7de;
-$ac-primary-40: #a3c6e5;
-$ac-primary-30: #b9d4eb;
-$ac-primary-20: #d1e2f2;
-$ac-primary-10: #e7f0f8;
-
-// $ac-primary-90: scale-color($ac-primary, $lightness: 90%);
-// $ac-primary-80: scale-color($ac-primary, $lightness: 80%);
-// $ac-primary-70: scale-color($ac-primary, $lightness: 70%);
-// $ac-primary-60: scale-color($ac-primary, $lightness: 60%);
-// $ac-primary-50: scale-color($ac-primary, $lightness: 50%);
-// $ac-primary-40: scale-color($ac-primary, $lightness: 40%);
-// $ac-primary-30: scale-color($ac-primary, $lightness: 30%);
-// $ac-primary-20: scale-color($ac-primary, $lightness: 20%);
-// $ac-primary-10: scale-color($ac-primary, $lightness: 10%);
-
-// Colors black
-$ac-black: #000000;
-$ac-color-text-90: #323232;
-$ac-gray-darker: #494949;
-$ac-gray-dark: #5f5f5f;
-$ac-gray: #767676;
-$ac-gray-light: #8d8d8d;
-$ac-gray-lighter: #a4a4a4;
-$ac-grey-lightest: #d1d1d1;
-$ac-white-light: #e7e7e7;
-$ac-white-lighter: #f1f1f1;
-$ac-white: #ffffff;
-
-// Color Products
+// Products Color
 $voyager-primary: #2d2a78;
 $guard-primary: #d84e27;
 $kubeci-primary: #2c3e50;
@@ -101,11 +42,103 @@ $servicebroker-primary: #29b4a2;
 $stash-primary: #5e2dea;
 $swift-primary: #3f51b6;
 
+// Colors Primary
+// root colors
+:root {
+  --hsl-hue: 208;
+  --hsl-saturation: 77%;
+  --hsl-lightness: 42%;
+  --contrast-threshold: 60%;
+  --ac-bg: #ffffff;
+  --ac-white: #ffffff;
+  --ac-full-white: #ffffff;
+  --ac-gray-dark: #5f5f5f;
+  --ac-gray-light: #8d8d8d;
+  --ac-gray-lightest: #d1d1d1;
+  --ac-white-light: #e7e7e7;
+  --ac-white-lighter: #f1f1f1;
+
+  --ac-black: #000000;
+  --ac-color-text-90: #323232;
+  --ac-link-black: #32325d;
+  --ac-gray-darker: #494949;
+  --ac-gray: #767676;
+  --ac-gray-lighter: #a4a4a4;
+  --ac-white-text: #b4c0cc;
+
+  // theme color
+  --dark-bg: #21272e;
+  --dark-bg-light: #2e323c;
+
+  --ac-blue-light: #eceff4;
+  --ac-bg-light-gray: #f4f6f9;
+  --table-header: #e4e8ef;
+  --ac-label-text: #a6abbd;
+
+  --font-hsl-hue: 0;
+  --font-hsl-saturation: 0%;
+  --font-hsl-lightness: 11%;
+
+  --ac-primary: hsla(
+    var(--hsl-hue),
+    var(--hsl-saturation),
+    var(--hsl-lightness),
+    1
+  );
+
+  --ac-text: hsla(
+    var(--font-hsl-hue),
+    calc(var(--font-hsl-saturation) + 10%),
+    calc(var(--font-hsl-lightness) + 10%),
+    1
+  );
+  --ac-text-heading: hsla(
+    var(--font-hsl-hue),
+    var(--font-hsl-saturation),
+    var(--font-hsl-lightness),
+    1
+  );
+  --ac-color-value: hsl(
+    var(--font-hsl-hue),
+    var(--font-hsl-saturation),
+    calc(var(--font-hsl-lightness) + 25%)
+  );
+}
+
+$ac-bg: var(--ac-bg);
+$ac-primary: var(--ac-primary);
+$ac-color-value: var(--ac-color-value);
+
+// Colors
+$ac-black: var(--ac-black);
+$ac-color-text-90: var(--ac-color-text-90);
+$ac-link-black: var(--ac-link-black);
+$ac-gray-darker: var(--ac-gray-darker);
+$ac-gray-dark: 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);
+$ac-white-light: var(--ac-white-light);
+$ac-white-lighter: var(--ac-white-lighter);
+$ac-white: var(--ac-white);
+$ac-full-white: var(--ac-full-white);
+
+$ac-blue-light: var(--ac-blue-light);
+$ac-bg-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);
+$dark-bg-light: var(--dark-bg-light);
+
 /* Deafult Margin & Padding view-height & view-width */
 @for $i from 0 through 100 {
   .m-#{$i} {
     margin: #{$i}px !important;
   }
+
   .mt-#{$i} {
     margin-top: #{$i}px !important;
   }
@@ -121,9 +154,11 @@ $swift-primary: #3f51b6;
   .mr-#{$i} {
     margin-right: #{$i}px !important;
   }
+
   .p-#{$i} {
     padding: #{$i}px !important;
   }
+
   .pt-#{$i} {
     padding-top: #{$i}px !important;
   }