@appscode/design-system 1.0.43-alpha.99 → 1.1.0

package/base/utilities/_all.scss

@@ -0,0 +1,7 @@
+@import "initial-variables";
+@import "derived-variables";
+@import "mixin";
+@import "typography";
+@import "default";
+@import "grid";
+@import "dark-theme";

package/base/utilities/_customize-bulma.scss

@@ -0,0 +1,191 @@
+$primary : hsl(208, 77%, 42%);
+
+// Colors
+// $black:        hsl(0, 0%, 4%) !default;
+// $black-bis:    hsl(0, 0%, 7%) !default;
+// $black-ter:    hsl(0, 0%, 14%) !default;
+
+// $grey-darker:  hsl(0, 0%, 21%) !default;
+// $grey-dark:    hsl(0, 0%, 29%) !default;
+// $grey:         hsl(0, 0%, 48%) !default;
+// $grey-light:   hsl(0, 0%, 71%) !default;
+// $grey-lighter: hsl(0, 0%, 86%) !default;
+// $grey-lightest: hsl(0, 0%, 93%) !default;
+
+// $white-ter:    hsl(0, 0%, 96%) !default;
+// $white-bis:    hsl(0, 0%, 98%) !default;
+// $white:        hsl(0, 0%, 100%) !default;
+
+$orange:        hsl(30, 100%, 50%) !default;
+$yellow:      	hsl(38, 93%, 57%) !default;
+$green:        hsl(147, 73%, 31%) !default;
+// $turquoise:    hsl(171, 100%, 41%) !default;
+// $cyan:         hsl(207, 61%,  53%) !default;
+// $blue:         hsl(229, 53%,  53%) !default;
+$purple:       hsl(286, 66%, 35%) !default;
+$red:          hsl(4, 100%, 58%) !default;
+
+// // Typography
+// $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
+// $family-monospace: monospace !default;
+// $render-mode: optimizeLegibility !default;
+
+// $size-1: 3rem !default;
+// $size-2: 2.5rem !default;
+// $size-3: 2rem !default;
+// $size-4: 1.5rem !default;
+// $size-5: 1.25rem !default;
+// $size-6: 1rem !default;
+// $size-7: 0.75rem !default;
+
+// $weight-light: 300 !default;
+// $weight-normal: 400 !default;
+// $weight-medium: 500 !default;
+// $weight-semibold: 600 !default;
+// $weight-bold: 700 !default;
+
+// // Spacing
+// $block-spacing: 1.5rem !default;
+
+// // Responsiveness
+// // The container horizontal gap, which acts as the offset for breakpoints
+// $gap: 32px !default;
+// // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
+// $tablet: 769px !default;
+// // 960px container + 4rem
+// $desktop: 960px + (2 * $gap) !default;
+// // 1152px container + 4rem
+// $widescreen: 1152px + (2 * $gap) !default;
+// $widescreen-enabled: true !default;
+// // 1344px container + 4rem
+// $fullhd: 1344px + (2 * $gap) !default;
+// $fullhd-enabled: true !default;
+// $breakpoints: ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd)) !default;
+
+// // Miscellaneous
+// $easing: ease-out !default;
+// $radius-small: 2px !default;
+// $radius: 4px !default;
+// $radius-large: 6px !default;
+// $radius-rounded: 9999px !default;
+// $speed: 86ms !default;
+
+// // Flags
+// $variable-columns: true !default;
+// $rtl: false !default;
+
+
+
+// // Derived-Variables 
+
+// $primary: $turquoise !default;
+
+// $info: $cyan !default;
+// $success: $green !default;
+// $warning: $yellow !default;
+// $danger: $red !default;
+
+// $light: $white-ter !default;
+// $dark: $grey-darker !default;
+
+// // Invert colors
+
+// $orange-invert: findColorInvert($orange) !default;
+// $yellow-invert: findColorInvert($yellow) !default;
+// $green-invert: findColorInvert($green) !default;
+// $turquoise-invert: findColorInvert($turquoise) !default;
+// $cyan-invert: findColorInvert($cyan) !default;
+// $blue-invert: findColorInvert($blue) !default;
+// $purple-invert: findColorInvert($purple) !default;
+// $red-invert: findColorInvert($red) !default;
+
+// $primary-invert: findColorInvert($primary) !default;
+// $primary-light: findLightColor($primary) !default;
+// $primary-dark: findDarkColor($primary) !default;
+// $info-invert: findColorInvert($info) !default;
+// $info-light: findLightColor($info) !default;
+// $info-dark: findDarkColor($info) !default;
+// $success-invert: findColorInvert($success) !default;
+// $success-light: findLightColor($success) !default;
+// $success-dark: findDarkColor($success) !default;
+// $warning-invert: findColorInvert($warning) !default;
+// $warning-light: findLightColor($warning) !default;
+// $warning-dark: findDarkColor($warning) !default;
+// $danger-invert: findColorInvert($danger) !default;
+// $danger-light: findLightColor($danger) !default;
+// $danger-dark: findDarkColor($danger) !default;
+// $light-invert: findColorInvert($light) !default;
+// $dark-invert: findColorInvert($dark) !default;
+
+// // General colors
+
+// $scheme-main: $white !default;
+// $scheme-main-bis: $white-bis !default;
+// $scheme-main-ter: $white-ter !default;
+// $scheme-invert: $black !default;
+// $scheme-invert-bis: $black-bis !default;
+// $scheme-invert-ter: $black-ter !default;
+
+// $background: $white-ter !default;
+
+// $border: $grey-lighter !default;
+// $border-hover: $grey-light !default;
+// $border-light: $grey-lightest !default;
+// $border-light-hover: $grey-light !default;
+
+// // Text colors
+
+// $text: $grey-dark !default;
+// $text-invert: findColorInvert($text) !default;
+// $text-light: $grey !default;
+// $text-strong: $grey-darker !default;
+
+// // Code colors
+
+// $code: darken($red, 15%) !default;
+// $code-background: $background !default;
+
+// $pre: $text !default;
+// $pre-background: $background !default;
+
+// // Link colors
+
+// $link: $blue !default;
+// $link-invert: findColorInvert($link) !default;
+// $link-light: findLightColor($link) !default;
+// $link-dark: findDarkColor($link) !default;
+// $link-visited: $purple !default;
+
+// $link-hover: $grey-darker !default;
+// $link-hover-border: $grey-light !default;
+
+// $link-focus: $grey-darker !default;
+// $link-focus-border: $blue !default;
+
+// $link-active: $grey-darker !default;
+// $link-active-border: $grey-dark !default;
+
+// // Typography
+
+// $family-primary: $family-sans-serif !default;
+// $family-secondary: $family-sans-serif !default;
+// $family-code: $family-monospace !default;
+
+// $size-small: $size-7 !default;
+// $size-normal: $size-6 !default;
+// $size-medium: $size-5 !default;
+// $size-large: $size-4 !default;
+
+// // Effects
+
+// $shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default;
+
+// // Lists and maps
+// $custom-colors: null !default;
+// $custom-shades: null !default;
+
+// $colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default;
+
+// $shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default;
+
+// $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;

package/base/utilities/_default.scss

@@ -144,6 +144,12 @@
   }
 }
 
+.ac-system-body {
+  &.is-preview-step {
+    grid-template-columns: calc(100% - 270px) 270px !important;
+  }
+}
+
 .form-content {
   width: 720px;
 }
@@ -164,18 +170,22 @@ input[type="color"] {
   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 {
@@ -222,45 +232,47 @@ input[type="color"]::-moz-color-swatch {
   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;
 }
 
-.b-b-n {
-  border-bottom: none !important;
+.b-1 {
+  border: 1px solid $ac-white-light;
 }
 
-.b-t-n {
-  border-top: none !important;
+// border left, right, top, bottom none
+$positions: (
+  "b": "bottom",
+  "t": "top",
+  "l": "left",
+  "r": "right",
+);
+
+@each $key, $position in $positions {
+  .b-#{$key}-n {
+    border-#{$position}: none !important;
+  }
 }
 
-.b-l-n {
-  border-left: none !important;
+// border 1px
+@each $key, $position in $positions {
+  .b-#{$key}-1 {
+    border-#{$position}: 1px solid $ac-white-light;
+  }
 }
 
-.b-r-n {
-  border-right: none !important;
+// for ellipsis
+@for $i from 0 through 10 {
+  .is-ellipsis-#{$i} {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: #{$i};
+    -webkit-line-clamp: #{$i};
+    box-orient: vertical;
+    -webkit-box-orient: vertical;
+  }
 }
 
 .is-disabled {
@@ -276,28 +288,18 @@ input[type="color"]::-moz-color-swatch {
   }
 }
 
-// for ellipsis
-@for $i from 0 through 10 {
-  .is-ellipsis-#{$i} {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    line-clamp: #{$i};
-    -webkit-line-clamp: #{$i};
-    box-orient: vertical;
-    -webkit-box-orient: vertical;
-  }
-}
 // toast css third-party
 
 .toasted-container {
   .ac-toast-action.mr-10 {
     text-decoration: underline !important;
   }
+
   .has-report-issue {
     padding-right: 140px !important;
   }
 }
+
 .is-dark-theme {
   .toasted-container {
     i.fa {
@@ -346,13 +348,13 @@ input[type="color"]::-moz-color-swatch {
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -393,33 +395,33 @@ input[type="color"]::-moz-color-swatch {
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-moz-scrollbar-thumb {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-ms-scrollbar-thumb {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
   }
 
   &::-moz-scrollbar-thumb:hover {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
   }
 
   &::-ms-scrollbar-thumb:hover {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -450,13 +452,13 @@ input[type="color"]::-moz-color-swatch {
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
     border-radius: 50px;
     width: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -489,6 +491,10 @@ input[type="color"]::-moz-color-swatch {
   text-align: left;
 }
 
+p.is-error {
+  color: $ac-red;
+}
+
 code {
   color: $ac-color-heading;
 }
@@ -500,7 +506,7 @@ code {
   }
 }
 
-.is-danger:not(.ac-button) {
+.has-text-danger{
   color: $ac-danger !important;
 }
 
@@ -515,77 +521,6 @@ button {
   }
 }
 
-.tag:not(body) {
-  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: $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;
-    }
-  }
-}
-
-.tags {
-  .icon {
-    margin-bottom: 0.5rem;
-  }
-
-  .tag {
-    a {
-      font-weight: 500;
-    }
-  }
-}
-
 // line title global start
 .ac-line-title {
   position: relative;
@@ -756,6 +691,7 @@ $border_color_4: transparent transparent #585d6e transparent;
     }
   }
 }
+
 // tooltip in vue-open-api
 .tooltip {
   display: block !important;
@@ -946,8 +882,6 @@ $border_color_4: transparent transparent #585d6e transparent;
 // Status css
 // ac-footer sticky end
 
-
-
 // terminal scss end
 .is-dark-theme {
   a {

package/base/utilities/_derived-variables.scss

@@ -17,3 +17,9 @@ $ac-shadow-1: 0 1px 4px rgba(26, 80, 151, 0.16);
 $ac-shadow-2: 0px 8px 57px rgba(0, 0, 0, 0.16);
 $ac-shadow-3: 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);
+
+$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/_grid.scss

@@ -0,0 +1,29 @@
+.grid {
+  display: grid;
+}
+
+@for $i from 1 through 12 {
+  .grid-cols-#{$i} {
+    grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+  }
+}
+
+.grid-cols-none {
+  grid-template-columns: none;
+}
+
+@for $i from 1 through 12 {
+  .col-span-#{$i} {
+    grid-column: span #{$i} / span #{$i};
+  }
+}
+
+.col-auto {
+  grid-column: auto;
+}
+
+@for $i from 0 through 30 {
+  .gap-#{$i} {
+    gap: #{$i}px;
+  }
+}

package/base/utilities/_initial-variables.scss

@@ -4,14 +4,6 @@
 $ac-family-heading: "Roboto", sans-serif;
 $ac-family-paragraph: "Roboto", sans-serif;
 
-$ac-size-1: 48px;
-$ac-size-2: 36px;
-$ac-size-3: 28px;
-$ac-size-4: 22px;
-$ac-size-5: 18px;
-$ac-size-6: 16px;
-$ac-size-7: 14px;
-
 // body font size
 $font-size-medium: 16px;
 $font-size-semi-normal: 15px;
@@ -56,7 +48,8 @@ $swift-primary: #3f51b6;
   --ac-gray-light: #8d8d8d;
   --ac-gray-lightest: #d1d1d1;
   --ac-white-light: #e7e7e7;
-  --ac-white-lighter: #f1f1f1;
+  --ac-white-lighter: #f2f5f8;
+  --ac-white-lightest: #f8f9fb;
 
   --ac-black: #000000;
   --ac-color-text-90: #323232;
@@ -121,6 +114,7 @@ $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);
 $ac-full-white: var(--ac-full-white);
 
@@ -188,6 +182,16 @@ $dark-bg-light: var(--dark-bg-light);
   }
 }
 
+.mx-auto {
+  margin: 0 auto;
+}
+.mr-auto{
+  margin-right: auto;
+}
+.ml-auto{
+  margin-left: auto;
+}
+
 /* Deafult height & widht */
 @for $i from 0 through 300 {
   .height-#{$i} {

package/base/utilities/_typography.scss

@@ -21,33 +21,27 @@ h6 {
 }
 
 h1 {
-  font-size: $ac-size-1;
-  line-height: $ac-size-1 + 10;
+  font-size: $size-1;
 }
 
 h2 {
-  font-size: $ac-size-2;
-  line-height: $ac-size-2 + 10;
+  font-size: $size-2;
 }
 
 h3 {
-  font-size: $ac-size-3;
-  line-height: $ac-size-3 + 10;
+  font-size: $size-3;
 }
 
 h4 {
-  font-size: $ac-size-4;
-  line-height: $ac-size-4 + 10;
+  font-size: $size-4;
 }
 
 h5 {
-  font-size: $ac-size-5;
-  line-height: $ac-size-5 + 10;
+  font-size: $size-5;
 }
 
 h6 {
-  font-size: $ac-size-6;
-  line-height: $ac-size-6 + 10;
+  font-size: $size-6;
 }
 
 h6 {

package/base/utilities/dark-theme.scss

@@ -14,6 +14,7 @@ $dark-bg-light: var(--dark-bg-light);
   --ac-gray-lightest: #777777;
   --ac-white-light: #3f3f3f;
   --ac-white-lighter: #2e323c;
+  --ac-white-lightest: #1f2229;
   --ac-label-text: #8c8c8c;
   --ac-bg-light-gray: #252830;
 

package/components/_ac-accordion.scss

@@ -27,6 +27,13 @@
     padding: 15px 20px;
     margin-bottom: 15px;
     border-radius: 4px;
+    border: 1px solid $ac-white-light;
+
+    &.open {
+      .accordion-heading {
+        margin-bottom: 10px;
+      }
+    }
 
     &:last-child {
       margin-bottom: 0;
@@ -36,7 +43,6 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: 10px;
 
       h3 {
         cursor: pointer;
@@ -48,10 +54,13 @@
       }
 
       .icon {
-        width: 16px;
-        height: 16px;
-        border: 1px solid $ac-color-heading;
-        line-height: 16px;
+        width: 20px;
+        height: 20px;
+        border: 1px solid $ac-white-light;
+        line-height: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         font-size: 10px;
         border-radius: 50%;
         cursor: pointer;