@appscode/design-system 1.1.0-alpha.9 → 1.1.0-beta.2

package/base/utilities/_all.scss

@@ -5,4 +5,4 @@
 @import "typography";
 @import "default";
 @import "grid";
-@import "dark-theme";
+@import "dark-theme";

package/base/utilities/_default.scss

@@ -34,7 +34,7 @@
     .inner-header {
       position: sticky;
       top: 100px;
-      background-color: $ac-white;
+      background-color: $white-100;
       z-index: 997;
     }
 
@@ -89,7 +89,7 @@
           position: fixed;
           top: 140px;
           width: 219px;
-          border-right: 1px solid $ac-white-light;
+          border-right: 1px solid $primary-90;
           height: 100%;
 
           ul.menu-list-wrapper {
@@ -105,8 +105,8 @@
   }
 
   .ac-system-left-sidebar {
-    border-right: 1px solid $ac-white-light;
-    box-shadow: none;
+    // border-right: 1px solid $primary-90;
+    // box-shadow: none;
 
     &.is-expanded {
       z-index: 998;
@@ -121,7 +121,7 @@
 
         &.ac-menu-list {
           width: 270px !important;
-          background-color: $ac-white;
+          background-color: $white-100;
 
           li {
             a {
@@ -155,7 +155,7 @@
 }
 
 .dropdown-content {
-  background-color: $ac-white;
+  background-color: $white-100;
 }
 
 // color swatch start
@@ -195,7 +195,7 @@ input[type="color"]::-moz-color-swatch {
 }
 
 .ac-preloader {
-  color: $ac-color-text;
+  color: $primary-10;
 }
 
 .section-padding {
@@ -211,7 +211,7 @@ input[type="color"]::-moz-color-swatch {
 }
 
 .section-divider {
-  background-color: $ac-white-light;
+  background-color: $primary-90;
 }
 
 .is-auto-hight {
@@ -238,7 +238,7 @@ input[type="color"]::-moz-color-swatch {
 }
 
 .b-1 {
-  border: 1px solid $ac-white-light;
+  border: 1px solid $primary-90;
 }
 
 // border left, right, top, bottom none
@@ -258,7 +258,7 @@ $positions: (
 // border 1px
 @each $key, $position in $positions {
   .b-#{$key}-1 {
-    border-#{$position}: 1px solid $ac-white-light;
+    border-#{$position}: 1px solid $primary-90;
   }
 }
 
@@ -348,13 +348,13 @@ $positions: (
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -395,33 +395,33 @@ $positions: (
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-moz-scrollbar-thumb {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-ms-scrollbar-thumb {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
   }
 
   &::-moz-scrollbar-thumb:hover {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
   }
 
   &::-ms-scrollbar-thumb:hover {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -452,13 +452,13 @@ $positions: (
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
     border-radius: 50px;
     width: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -487,16 +487,16 @@ $positions: (
 .is-error {
   font-size: 12px;
   line-height: 22px;
-  color: $ac-red;
+  color: $danger;
   text-align: left;
 }
 
 p.is-error {
-  color: $ac-red;
+  color: $danger;
 }
 
 code {
-  color: $ac-color-heading;
+  color: $primary-5;
 }
 
 .is-dark-theme {
@@ -506,8 +506,8 @@ code {
   }
 }
 
-.has-text-danger{
-  color: $ac-danger !important;
+.has-text-danger {
+  color: $danger !important;
 }
 
 .responsive-only {
@@ -534,12 +534,12 @@ button {
     top: 12px;
     width: 100%;
     height: 1px;
-    background-color: $ac-white-light;
+    background-color: $primary-90;
   }
 
   h5 {
-    color: $ac-color-text;
-    background-color: $ac-white;
+    color: $primary-10;
+    background-color: $white-100;
     z-index: 2;
     display: inline-block;
     position: relative;
@@ -564,11 +564,11 @@ button {
 // docs preview end
 // background color start
 .is-bg-white {
-  background-color: $ac-white !important;
+  background-color: $white-100 !important;
 }
 
 .bg-white {
-  background-color: $ac-white !important;
+  background-color: $white-100 !important;
 }
 
 // background color end
@@ -699,8 +699,8 @@ $border_color_4: transparent transparent #585d6e transparent;
 
   &.is-button-info {
     .tooltip-inner {
-      background: $ac-white;
-      color: $ac-primary;
+      background: $white-100;
+      color: $primary;
       border-radius: 4px;
       padding: 5px 20px 4px;
       box-shadow: $ac-shadow-1;
@@ -714,14 +714,14 @@ $border_color_4: transparent transparent #585d6e transparent;
       border-style: solid;
       position: absolute;
       margin: 5px;
-      border-color: $ac-white;
+      border-color: $white-100;
     }
   }
 
   &.is-errors-tooltip {
     .tooltip-inner {
-      background: $ac-white;
-      color: $ac-danger;
+      background: $white-100;
+      color: $danger;
       border-radius: 4px;
       padding: 5px 20px 4px;
       box-shadow: $ac-shadow-1;
@@ -741,7 +741,7 @@ $border_color_4: transparent transparent #585d6e transparent;
       border-style: solid;
       position: absolute;
       margin: 5px;
-      border-color: $ac-white;
+      border-color: $white-100;
     }
   }
 
@@ -840,14 +840,14 @@ $border_color_4: transparent transparent #585d6e transparent;
 .ac-footer-action {
   margin-top: 10px;
   padding-top: 10px;
-  background-color: $ac-white;
+  background-color: $white-100;
   padding: 10px 20px;
   margin-left: 0;
   margin-right: 0;
   margin-left: -20px;
   border: none;
   border-radius: 0;
-  border-top: 1px solid $ac-white-light;
+  border-top: 1px solid $primary-90;
 
   &.is-sticky {
     position: sticky;
@@ -856,7 +856,7 @@ $border_color_4: transparent transparent #585d6e transparent;
     margin-bottom: -4px;
     z-index: 999;
     border: none;
-    border-top: 1px solid $ac-white-light;
+    border-top: 1px solid $primary-90;
     box-shadow: none;
   }
 }
@@ -866,8 +866,8 @@ $border_color_4: transparent transparent #585d6e transparent;
   height: 10px;
   width: 10px;
   border-radius: 50%;
-  background-color: $ac-gray-lightest;
-  border: 2px solid $ac-white;
+  background-color: $black-80;
+  border: 2px solid $white-100;
   display: inline-flex;
 
   &.is-success {

package/base/utilities/_derived-variables.scss

@@ -1,16 +1,16 @@
 // color
-$ac-info: $ac-blue;
-$ac-success: $ac-primary;
-$ac-warning: $ac-yellow;
-$ac-danger: $ac-red;
+$info: $blue;
+$success: $primary;
+$warning: $yellow;
+$danger: $danger
 
 // Text colors
-$ac-color-text: var(--ac-text);
-$ac-color-heading: var(--ac-text-heading);
+$primary-10: var(--ac-text);
+$primary-5: var(--ac-text-heading);
 
 // Link colors
-$ac-link: $ac-blue;
-$ac-link-visited: $ac-purple;
+$ac-link: $blue;
+$ac-link-visited: $purple;
 
 // Box Shadow
 $ac-shadow-1: 0 1px 4px rgba(26, 80, 151, 0.16);
@@ -22,4 +22,3 @@ $ac-shadow-sm: 0 1px 4px rgba(26, 80, 151, 0.16);
 $ac-shadow-xl: 0px 8px 57px rgba(0, 0, 0, 0.16);
 $ac-shadow-lg: 0 3px 4px 0 rgba(0, 0, 0, 0.18),
   0 3px 3px -2px rgba(0, 0, 0, 0.16), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
-

package/base/utilities/_extended.scss

@@ -1,4 +1,4 @@
-%card-hover {
+.has-hover-style{
   cursor: pointer;
 
   &::before {

package/base/utilities/_initial-variables.scss

@@ -1,23 +1,23 @@
 // 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");
 
-$ac-family-heading: "Roboto", sans-serif;
-$ac-family-paragraph: "Roboto", sans-serif;
+$font-heading: "Roboto", sans-serif;
+$font-paragraph: "Roboto", sans-serif;
 
 // body font size
-$font-size-medium: 16px;
-$font-size-semi-normal: 15px;
-$font-size-normal: 14px;
-$font-size-small: 13px;
-$font-size-extra-small: 12px;
-$font-size-tiny: 11px;
+16px: 16px;
+15px: 15px;
+14px: 14px;
+13px: 13px;
+12px: 12px;
+11px: 11px;
 
 // Base Color
 $ac-orange: #ff8000;
-$ac-yellow: #f7ad2a;
-$ac-green: #158748;
-$ac-blue: #0aafff;
-$ac-purple: #791e94;
+$warning: #f7ad2a;
+$success: #158748;
+$info: #0aafff;
+$purple: #791e94;
 $ac-red: #ff3729;
 
 // Products Color
@@ -63,7 +63,7 @@ $swift-primary: #3f51b6;
   --dark-bg: #21272e;
   --dark-bg-light: #2e323c;
 
-  --ac-blue-light: #eceff4;
+  // --ac-blue-light: #eceff4;
   --ac-bg-light-gray: #f4f6f9;
   --table-header: #e4e8ef;
   --ac-label-text: #a6abbd;
@@ -72,53 +72,45 @@ $swift-primary: #3f51b6;
   --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-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);
+$primary: var(--ac-primary);
+$primary-20: var(--ac-color-value);
 
 // Colors
 $ac-black: var(--ac-black);
-$ac-color-text-90: var(--ac-color-text-90);
+$primary-10-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);
+$black-40: var(--ac-gray-darker);
+$black-30: 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-lightest: var(--ac-white-lightest);
-$ac-white: var(--ac-white);
+$white-100-light: var(--ac-white-light);
+$white-100-lighter: var(--ac-white-lighter);
+$white-100-lightest: var(--ac-white-lightest);
+$white-100: var(--ac-white);
 $ac-full-white: var(--ac-full-white);
 
-$ac-blue-light: var(--ac-blue-light);
+// $info-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);
@@ -185,10 +177,12 @@ $dark-bg-light: var(--dark-bg-light);
 .mx-auto {
   margin: 0 auto;
 }
-.mr-auto{
+
+.mr-auto {
   margin-right: auto;
 }
-.ml-auto{
+
+.ml-auto {
   margin-left: auto;
 }
 
@@ -203,6 +197,14 @@ $dark-bg-light: var(--dark-bg-light);
   }
 }
 
+.width-auto {
+  width: auto !important;
+}
+
+.height-auto {
+  height: auto !important;
+}
+
 /* Deafult z-index and font-weight*/
 @for $i from 0 through 10 {
   .z-index-#{$i} {
@@ -212,4 +214,4 @@ $dark-bg-light: var(--dark-bg-light);
   .font-weight-#{$i*100} {
     font-weight: #{$i * 100} !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/_typography.scss

@@ -1,10 +1,10 @@
 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;
@@ -15,9 +15,9 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: $ac-family-heading;
+  font-family: $font-heading;
   font-weight: 500;
-  color: $ac-color-heading;
+  color: $primary-5;
 }
 
 h1 {
@@ -46,43 +46,43 @@ 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;
 }
 
 hr {
-  background-color: $ac-bg-light-gray;
+  background-color: $black-60;
   border: none;
   display: block;
   height: 1px;
@@ -90,7 +90,7 @@ hr {
 }
 
 strong {
-  color: $ac-color-value;
+  color: $primary-20;
 }
 
 .is-font-medium {
@@ -100,6 +100,6 @@ 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;