@appscode/design-system 1.1.0-alpha.8 → 1.1.0-beta.10

package/base/utilities/_layouts.scss

@@ -0,0 +1,157 @@
+// default layout css
+.ac-system-body {
+  display: grid;
+  grid-gap: 0px;
+  grid-template-columns: 250px calc(100% - 250px);
+  padding-top: 50px;
+  transition: 0.3s ease-in-out;
+
+  &.is-fullwidth {
+    grid-template-columns: auto !important;
+
+    // &.has-info-content {
+    //   grid-template-columns: 250px calc(100% - 540px) 250px;
+    // }
+  }
+
+  // &.has-info-content {
+  //   grid-template-columns: 250px calc(100% - 540px) 250px;
+
+  //   .ac-system-content {
+  //     &.pr-15 {
+  //       padding-right: 0 !important;
+  //     }
+  //   }
+  // }
+
+  // &.in-ui-builder {
+  //   grid-template-columns: calc(100% - 250px) 250px !important;
+  // }
+
+  // &.has-ui-builder {
+  //   grid-template-columns: 70px calc(100% - 70px);
+  //   grid-gap: 0;
+
+  //   .inner-header {
+  //     position: sticky;
+  //     top: 100px;
+  //     background-color: $white-100;
+  //     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;
+  //   //   grid-template-columns: 250px calc(100% - 250px);
+
+  //   //   .is-fullwidth {
+  //   //     .ac-system-content {
+  //   //       padding-left: 0;
+  //   //     }
+  //   //   }
+  //   // }
+
+  //   // .is-fullwidth {
+  //   //   grid-template-columns: auto;
+
+  //   //   &.has-info-content {
+  //   //     grid-template-columns: calc(100% - 260px) 240px;
+  //   //   }
+
+  //   //   .ac-system-content {
+  //   //     padding-left: 20px;
+  //   //   }
+  //   // }
+
+  //   // .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 $primary-90;
+  //   //       height: 100%;
+
+  //   //       ul.menu-list-wrapper {
+  //   //         padding-top: 10px;
+  //   //       }
+  //   //     }
+  //   //   }
+  //   // }
+  // }
+
+  // &.has-deploy-flow {
+  //   grid-template-columns: 65% 35%;
+  // }
+
+  // .ac-system-left-sidebar {
+  //   // border-right: 1px solid $primary-90;
+  //   // box-shadow: none;
+
+  //   &.is-expanded {
+  //     z-index: 998;
+
+  //     .ac-product-logo {
+  //       width: 250px !important;
+  //       justify-content: flex-start !important;
+  //     }
+
+  //     .menu-list {
+  //       box-shadow: 2px -1px 8px rgba(26, 80, 151, 0.16);
+
+  //       &.ac-menu-list {
+  //         width: 250px !important;
+  //         background-color: $white-100;
+
+  //         li {
+  //           a {
+  //             strong {
+  //               display: block !important;
+  //             }
+  //           }
+
+  //           ul {
+  //             li {
+  //               a {
+  //                 padding-left: 50px !important;
+  //               }
+  //             }
+  //           }
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
+}
+// sidebar collapsed 
+.sidebar-collapsed {
+  .ac-system-body {
+    grid-template-columns: 60px calc(100% - 60px);
+  }
+}
+// .ac-system-body {
+//   &.is-preview-step {
+//     grid-template-columns: calc(100% - 250px) 250px !important;
+//   }
+// }

package/base/utilities/_mixin.scss

@@ -1,7 +1,7 @@
 // ac-buttons
 @mixin ac-button($colorName) {
   background-color: $colorName;
-  color: $ac-white;
+  color: $white-100;
   border: none;
 
   &:hover {
@@ -62,7 +62,7 @@
 
     &:hover {
       background-color: $colorName;
-      color: $ac-white;
+      color: $white-100;
     }
   }
 
@@ -82,7 +82,7 @@
 
     &:hover {
       background-color: $colorName;
-      color: $ac-white;
+      color: $white-100;
       box-shadow: none;
 
       img {
@@ -92,7 +92,7 @@
   }
 
   &.is-inverted {
-    background-color: $ac-white;
+    background-color: $white-100;
     color: $colorName;
 
     &:hover {
@@ -110,11 +110,11 @@
 
     &.is-outlined {
       background-color: transparent;
-      border: 1px solid $ac-white;
-      color: $ac-white;
+      border: 1px solid $white-100;
+      color: $white-100;
 
       &:hover {
-        background-color: $ac-white;
+        background-color: $white-100;
         color: $colorName;
       }
     }
@@ -128,7 +128,7 @@
 
   &:hover {
     background-color: $colorName;
-    color: $ac-white;
+    color: $white-100;
 
     @if (type_of($colorName) == "color") {
       box-shadow: 0px 6px 12px scale-color($color: $colorName, $lightness: 70%);
@@ -168,14 +168,14 @@
     &:hover {
       background-color: $colorName;
       box-shadow: none;
-      color: $ac-white;
+      color: $white-100;
 
       .ac-play {
-        border: 1px solid $ac-white;
+        border: 1px solid $white-100;
       }
 
       span {
-        color: $ac-white;
+        color: $white-100;
       }
     }
   }

package/base/utilities/_spacing.scss

@@ -0,0 +1,96 @@
+/*  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;
+  }
+
+  .mb-#{$i} {
+    margin-bottom: #{$i}px !important;
+  }
+
+  .ml-#{$i} {
+    margin-left: #{$i}px !important;
+  }
+
+  .mr-#{$i} {
+    margin-right: #{$i}px !important;
+  }
+
+  .p-#{$i} {
+    padding: #{$i}px !important;
+  }
+
+  .pt-#{$i} {
+    padding-top: #{$i}px !important;
+  }
+
+  .pb-#{$i} {
+    padding-bottom: #{$i}px !important;
+  }
+
+  .pl-#{$i} {
+    padding-left: #{$i}px !important;
+  }
+
+  .pr-#{$i} {
+    padding-right: #{$i}px !important;
+  }
+
+  .vh-#{$i} {
+    height: #{$i}vh !important;
+  }
+
+  .vw-#{$i} {
+    width: #{$i}vw !important;
+  }
+
+  .font-#{$i} {
+    font-size: #{$i}px !important;
+  }
+}
+
+/* Deafult height & widht */
+@for $i from 0 through 300 {
+  .height-#{$i} {
+    height: #{$i}px !important;
+  }
+
+  .width-#{$i} {
+    width: #{$i}px !important;
+  }
+}
+
+.height-auto {
+  height: auto !important;
+}
+
+.width-auto {
+  width: auto !important;
+}
+
+/* Deafult z-index and font-weight*/
+@for $i from 0 through 10 {
+  .z-index-#{$i} {
+    z-index: #{$i} !important;
+  }
+
+  .font-weight-#{$i*100} {
+    font-weight: #{$i * 100} !important;
+  }
+}
+
+.mx-auto {
+  margin: 0 auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.ml-auto {
+  margin-left: auto;
+}

package/base/utilities/_typography.scss

@@ -1,23 +1,34 @@
+// Typography
+@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");
+
+$font-heading: "Roboto", sans-serif;
+$font-paragraph: "Roboto", sans-serif;
+
 html,
 body {
   background-color: $ac-bg;
-  font-family: $ac-family-paragraph;
+  font-family: $font-paragraph;
   font-weight: 400;
   font-size: 13px;
-  color: $ac-color-text;
+  color: $primary-10;
 }
+
 p {
-  font-size: 13px;
+  font-size: 1rem;
+  font-family: $font-paragraph;
+  font-weight: 400;
+  line-height: 150%;
 }
+
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  font-family: $ac-family-heading;
-  font-weight: 500;
-  color: $ac-color-heading;
+  font-family: $font-heading;
+  font-weight: 600;
+  color: $primary-5;
 }
 
 h1 {
@@ -46,43 +57,63 @@ h6 {
 
 h6 {
   &.is-tiny {
-    font-size: $font-size-tiny;
-    line-height: $font-size-tiny + 10;
+    font-size: 11px;
+    line-height: 11px + 10;
   }
 
   &.is-extra-small {
-    font-size: $font-size-extra-small;
-    line-height: $font-size-extra-small + 10;
+    font-size: 12px;
+    line-height: 12px + 10;
   }
 
   &.is-small {
-    font-size: $font-size-small;
-    line-height: $font-size-small + 10;
+    font-size: 13px;
+    line-height: 13px + 10;
   }
 
   &.is-normal {
-    font-size: $font-size-normal;
-    line-height: $font-size-normal + 10;
+    font-size: 14px;
+    line-height: 14px + 10;
   }
 
   &.is-semi-normal {
-    font-size: $font-size-semi-normal;
-    line-height: $font-size-semi-normal + 10;
+    font-size: 15px;
+    line-height: 15px + 10;
   }
 
   &.is-medium {
-    font-size: $font-size-medium;
-    line-height: $font-size-medium + 10;
+    font-size: 16px;
+    line-height: 16px + 10;
   }
 }
 
 a {
-  font-family: $ac-family-paragraph;
-  color: $ac-primary;
+  font-family: $font-paragraph;
+  color: $primary;
+}
+
+.text-xm {
+  font-size: 0.769rem; //10px
+}
+
+.text-sm {
+  font-size: 0.846rem; //11px
+}
+
+.text-base {
+  font-size: 1rem; //13px
+}
+
+.text-lg {
+  font-size: 1.077rem; //14px
+}
+
+.text-xl {
+  font-size: 1.231rem; //16px
 }
 
 hr {
-  background-color: $ac-bg-light-gray;
+  background-color: $black-60;
   border: none;
   display: block;
   height: 1px;
@@ -90,7 +121,7 @@ hr {
 }
 
 strong {
-  color: $ac-color-value;
+  color: $primary-20;
 }
 
 .is-font-medium {
@@ -100,6 +131,7 @@ strong {
 .is-font-bold {
   font-weight: 700;
 }
-.material-icons{
+
+.material-icons {
   font-size: 1em;
-}
+}

package/base/utilities/dark-theme.scss

@@ -8,7 +8,7 @@ $dark-bg-light: var(--dark-bg-light);
   --ac-black: var(--ac-white-text);
   --ac-text-heading: var(--ac-white-text);
   --ac-text: #98a6b4;
-  --ac-blue-light: #2e323c;
+  // --ac-blue-light: #2e323c;
   --ac-gray-darker: #a6a6a6;
   --ac-gray-light: #424242;
   --ac-gray-lightest: #777777;