@appscode/design-system 1.1.0 → 2.0.1

package/base/utilities/_layouts.scss

@@ -0,0 +1,19 @@
+// 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;
+  }
+
+}
+// sidebar collapsed 
+.sidebar-collapsed {
+  .ac-system-body {
+    grid-template-columns: 60px calc(100% - 60px);
+  }
+}

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;
+  background-color: transparent;
+  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;
 }