@appscode/design-system 2.4.27-alpha1 → 2.4.28

package/package.json

@@ -1,25 +1,23 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.4.27-alpha1",
+  "version": "2.4.28",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@appscode/design-system-images": "^0.0.13",
-    "crypto-js": "^4.1.1",
-    "fast-json-stable-stringify": "^2.1.0"
+    "@appscode/design-system-images": "^0.0.13"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/appscode/design-system.git"
   },
   "keywords": [
+    "appscode",
     "design-system",
-    "fluent-ui",
+    "material-ui",
     "ui",
-    "appscode",
     "bulma"
   ],
   "author": "AppsCode Design Team",

package/vue-components/styles/base/utilities/_colors.scss

@@ -56,16 +56,7 @@ $secondary-dark-grey: hsl($secondary-hue, 10%, 10%);
 $secondary-light-gray: hsl($secondary-hue, 10%, 96%);
 $secondary-dark-gray: hsl($secondary-hue, 10%, 10%);
 
-$color-text: hsl($secondary-hue, 10%, 25%);
-$color-heading: hsl($secondary-hue, 10%, 10%);
-$color-label: hsl($secondary-hue, 20%, 30%);
-$color-link: hsl($secondary-hue, 40%, 20%);
-$color-border-light: hsl($secondary-hue, 40%, 95%);
-$color-border: hsl($secondary-hue, 10%, 90%);
-$color-border-dark: hsl($secondary-hue, 10%, 80%);
-
 // tweak sidebar bg color. update value (--sidebar-light)
-$color-sidebar: hsl($primary-hue, $primary-saturation, var(--sidebar-light, 5%));
 
 // green color guides
 $green-hue: 141;
@@ -175,6 +166,31 @@ $gray-93: hsl($gray-hue, $gray-saturation, 93%);
 $gray-95: hsl($gray-hue, $gray-saturation, 95%);
 $gray-97: hsl($gray-hue, $gray-saturation, 97%);
 
+// Slate color guides custom color
+$slate-hue: 229;
+$slate-saturation: 84%;
+$slate-5: #020617;
+$slate-10: #0f172a;
+$slate-20: #1e293b;
+$slate-30: #334155;
+$slate-40: #475569;
+$slate-50: #64748b;
+$slate-60: #94a3b8;
+$slate-70: #cbd5e1;
+$slate-80: #e2e8f0;
+$slate-90: #f1f5f9;
+$slate-95: #f8fafc;
+
+$color-text: $slate-30;
+$color-heading: $slate-5;
+$color-label: $slate-40;
+$color-link: $slate-20;
+$color-border-light: $slate-90;
+$color-border: $slate-80;
+$color-border-dark: $slate-70;
+
+$color-sidebar: hsla($primary-hue, 10%, 5%);
+
 // Box Shadow
 $ac-shadow-1: 0 1px 4px rgba(26, 80, 151, 0.16);
 $ac-shadow-2: 0px 8px 57px rgba(0, 0, 0, 0.16);

package/vue-components/styles/base/utilities/_global.scss

@@ -445,7 +445,7 @@ button {
       padding: 5px 20px 4px;
       box-shadow: $ac-shadow-1;
       font-weight: 500;
-      font-size: 13px;
+      font-size: 1rem;
     }
 
     .tooltip-arrow {
@@ -466,7 +466,7 @@ button {
       padding: 5px 20px 4px;
       box-shadow: $ac-shadow-1;
       font-weight: 500;
-      font-size: 13px;
+      font-size: 1rem;
 
       .errors-wrapper {
         .error-element {

package/vue-components/styles/base/utilities/_typography.scss

@@ -1,4 +1,3 @@
-// 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;
@@ -8,16 +7,16 @@ html,
 body {
   background-color: $white-100;
   font-family: $font-paragraph;
-  font-weight: 400;
-  font-size: 13px;
+  font-weight: $weight-normal;
+  font-size: 13px; // Base font size
   color: $color-text;
 }
 
 p {
-  font-size: 1rem;
+  font-size: 1rem; // 13px
   font-family: $font-paragraph;
-  font-weight: 400;
-  line-height: 150%;
+  font-weight: $weight-normal;
+  line-height: 1.5;
 }
 
 h1,
@@ -27,64 +26,55 @@ h4,
 h5,
 h6 {
   font-family: $font-heading;
-  font-weight: 600;
+  font-weight: $weight-semibold;
   color: $color-heading;
 }
 
 h1 {
-  font-size: $size-1;
-}
-
+  font-size: 2.462rem;
+} // 32px
 h2 {
-  font-size: $size-2;
-}
-
+  font-size: 2rem;
+} // 26px
 h3 {
-  font-size: $size-3;
-}
-
+  font-size: 1.692rem;
+} // 22px
 h4 {
-  font-size: $size-4;
-}
-
+  font-size: 1.385rem;
+} // 18px
 h5 {
-  font-size: $size-5;
-}
-
+  font-size: 1.231rem;
+  font-weight: 600;
+  letter-spacing: normal;
+} // 16px
 h6 {
-  font-size: $size-6;
-}
+  font-size: 1rem;
+  letter-spacing: 0;
+  font-weight: normal;
+} // 13px
 
 h6 {
   &.is-tiny {
-    font-size: 11px;
-    line-height: 11px + 10;
-  }
-
+    font-size: 0.846rem;
+    line-height: 1.2;
+  } // 11px
   &.is-extra-small {
-    font-size: 12px;
-    line-height: 12px + 10;
-  }
-
-  &.is-small {
-    font-size: 13px;
-    line-height: 13px + 10;
-  }
-
+    font-size: 0.923rem;
+    line-height: 1.2;
+  } // 12px
+  &.is-small,
   &.is-normal {
-    font-size: 14px;
-    line-height: 14px + 10;
-  }
-
+    font-size: 1rem;
+    line-height: 1.2;
+  } // 13px
   &.is-semi-normal {
-    font-size: 15px;
-    line-height: 15px + 10;
-  }
-
+    font-size: 1.077rem;
+    line-height: 1.2;
+  } // 14px
   &.is-medium {
-    font-size: 16px;
-    line-height: 16px + 10;
-  }
+    font-size: 1.231rem;
+    line-height: 1.2;
+  } // 16px
 }
 
 .content {
@@ -104,33 +94,44 @@ h6 {
 a:not(.ac-button) {
   font-family: $font-paragraph;
   color: $ac-primary;
-  p {
-    color: $color-text;
-  }
   &:hover {
     color: $ac-primary;
   }
 }
 
 .text-xm {
-  font-size: 0.769rem; //10px
-}
-
+  font-size: 0.769rem;
+} // 10px
 .text-sm {
-  font-size: 0.846rem; //11px
-}
-
+  font-size: 0.846rem;
+} // 11px
+.text-xs {
+  font-size: 0.923rem;
+} // 12px
 .text-base {
-  font-size: 1rem; //13px
-}
-
+  font-size: 1rem;
+} // 13px
 .text-lg {
-  font-size: 1.077rem; //14px
-}
-
+  font-size: 1.077rem;
+} // 14px
 .text-xl {
-  font-size: 1.231rem; //16px
-}
+  font-size: 1.231rem;
+} // 16px
+.text-2xl {
+  font-size: 1.385rem;
+} // 18px
+.text-3xl {
+  font-size: 1.846rem;
+} // 24px
+.text-4xl {
+  font-size: 2.308rem;
+} // 30px
+.text-5xl {
+  font-size: 2.769rem;
+} // 36px
+.text-6xl {
+  font-size: 3.231rem;
+} // 42px
 
 hr {
   background-color: $gray-60;
@@ -144,12 +145,17 @@ strong {
   color: $color-text;
 }
 
+.is-font-light {
+  font-weight: $weight-light;
+}
 .is-font-medium {
-  font-weight: 500;
+  font-weight: $weight-medium;
+}
+.is-font-semibold {
+  font-weight: $weight-semibold;
 }
-
 .is-font-bold {
-  font-weight: 700;
+  font-weight: $weight-bold;
 }
 
 .material-icons {

package/vue-components/styles/components/_ac-calendar.scss

@@ -5,7 +5,7 @@
     height: 45px !important;
     padding: 15px !important;
     font-weight: normal !important;
-    font-size: 13px !important;
+    font-size: 1rem !important;
   }
 
   .vc-highlight {
@@ -17,7 +17,7 @@
   .vc-weeks {
     padding: 25px 30px !important;
     font-weight: normal !important;
-    font-size: 13px !important;
+    font-size: 1rem !important;
   }
 
   .vc-weekday {
@@ -27,7 +27,7 @@
     margin-right: -30px !important;
     margin-bottom: 25px !important;
     font-weight: 500;
-    font-size: 13px !important;
+    font-size: 1rem !important;
   }
 
   .vc-bg-blue-200 {

package/vue-components/styles/components/_ac-code-highlight.scss

@@ -1,6 +1,6 @@
 .ac-code-highlight {
   pre {
-    font-size: 13px;
+    font-size: 1rem;
     color: $color-heading;
     background-color: $color-border;
   }

package/vue-components/styles/components/_ac-drag.scss

@@ -45,7 +45,7 @@
 
         span,
         strong {
-          font-size: 13px;
+          font-size: 1rem;
           color: $color-heading;
           padding: 0 5px;
           font-weight: 500;

package/vue-components/styles/components/_accordion.scss

@@ -57,7 +57,7 @@
     // transition: max-height 0.3s ease-in-out;
 
     p {
-      font-size: 13px;
+      font-size: 1rem;
       color: $color-text;
       line-height: 1.6;
     }

package/vue-components/styles/components/_breadcrumb.scss

@@ -13,7 +13,7 @@
 .breadcrumb {
   a {
     color: $color-text;
-    font-size: 13px;
+    font-size: 1rem;
     padding: 0 3px;
     font-weight: 500;
     font-style: normal;

package/vue-components/styles/components/_card-body-wrapper.scss

@@ -12,7 +12,7 @@
 //     .left-content {
 //       p {
 //         font-weight: 500;
-//         font-size: 14px;
+//         font-size: 1rem;
 //         line-height: 16px;
 //         color: $color-heading;
 
@@ -22,7 +22,7 @@
 
 //         &.description {
 //           font-weight: normal;
-//           font-size: 14px;
+//           font-size: 1rem;
 //           line-height: 16px;
 //           color: $color-text;
 //           margin-top: 10px;
@@ -43,7 +43,7 @@
 //     p {
 //       &.cluster-title {
 //         font-weight: normal;
-//         font-size: 14px;
+//         font-size: 1rem;
 //         line-height: 16px;
 //         color: $gray-40;
 //         margin-top: 30px;

package/vue-components/styles/components/_direct-deploy.scss

@@ -11,7 +11,7 @@
 //   }
 
 //   p {
-//     font-size: 14px;
+//     font-size: 1rem;
 //     line-height: 160%;
 //     color: $color-heading;
 //     margin-bottom: 20px;
@@ -19,7 +19,7 @@
 
 //   .check-permission {
 //     font-weight: normal;
-//     font-size: 14px;
+//     font-size: 1rem;
 //     line-height: 16px;
 //     color: $color-heading;
 //   }

package/vue-components/styles/components/_dropdown.scss

@@ -20,7 +20,7 @@
       display: flex;
       align-items: center;
       gap: 8px;
-      font-size: 13px;
+      font-size: 1rem;
       padding: 8px 16px;
       color: $color-text;
       &:hover {

package/vue-components/styles/components/_getkeeper.scss

@@ -70,7 +70,7 @@
       border-radius: 4px;
       padding: 12px 20px;
       font-weight: 500;
-      font-size: 13px;
+      font-size: 1rem;
       color: $color-heading;
       cursor: pointer;
       transition: 0.3s ease-in-out;

package/vue-components/styles/components/_graph.scss

@@ -19,7 +19,7 @@
           color: $color-heading;
         }
         padding: 4px 0;
-        font-size: 13px;
+        font-size: 1rem;
       }
     }
   }

package/vue-components/styles/components/_options.scss

@@ -101,7 +101,7 @@
         font-weight: 400;
         text-align: left;
         color: $color-text;
-        font-size: 13px;
+        font-size: 1rem;
         padding: 10px 30px;
         display: block;
 
@@ -120,7 +120,7 @@
       }
 
       a {
-        font-size: 13px;
+        font-size: 1rem;
         padding: 7px 15px;
         display: block;
         text-decoration: none !important;

package/vue-components/styles/components/_pagination.scss

@@ -11,7 +11,7 @@
 //         display: block;
 //         width: 20px;
 //         text-align: center;
-//         font-size: 13px;
+//         font-size: 1rem;
 //         font-weight: 500;
 //         border-radius: 4px;
 
@@ -67,7 +67,7 @@
 //     color: $gray-40;
 //     padding-right: 5px;
 //     display: inline-block;
-//     font-size: 13px;
+//     font-size: 1rem;
 //   }
 // }
 

package/vue-components/styles/components/_steps.scss

@@ -6,13 +6,12 @@
     // gap: 48px;
     &.is-column {
       flex-direction: column;
-      align-items: self-start;
       li {
         --line: 2px;
         flex-direction: row;
         gap: 8px;
         text-align: left;
-        align-items: baseline;
+        align-items: flex-start;
         padding-bottom: 24px;
         .step-header {
           margin: 0;
@@ -44,6 +43,17 @@
         }
       }
     }
+    &.is-row {
+      li {
+        &.is-active {
+          &:not(&:first-child) {
+            &::before {
+              background-color: $ac-primary;
+            }
+          }
+        }
+      }
+    }
     li {
       display: flex;
       flex: 1 1 0%;

package/vue-components/styles/components/_table-of-content.scss

@@ -17,7 +17,7 @@
         p {
           font-style: normal;
           font-weight: 500;
-          font-size: 13px;
+          font-size: 1rem;
           line-height: 16px;
           cursor: pointer;
           color: $color-text;
@@ -29,7 +29,7 @@
 
         button {
           color: $color-text;
-          font-size: 13px;
+          font-size: 1rem;
         }
       }
 
@@ -45,7 +45,7 @@
 
             font-style: normal;
             font-weight: normal;
-            font-size: 13px;
+            font-size: 1rem;
             line-height: 16px;
             padding: 8px 0;
             color: $color-text;

package/vue-components/styles/components/_table.scss

@@ -34,7 +34,7 @@
 
   thead {
     // background-color: $primary-95;
-    font-size: 13px;
+    font-size: 1rem;
     line-height: initial;
 
     tr {
@@ -71,7 +71,7 @@
             position: absolute;
             color: #808998;
             top: 10px;
-            font-size: 13px;
+            font-size: 1rem;
             font-weight: 1000;
             display: block;
           }
@@ -128,7 +128,7 @@
         background-color: $white-100 !important;
       }
       td {
-        font-size: 13px;
+        font-size: 1rem;
         padding: 5px 20px;
         color: $color-heading;
         border: none;
@@ -277,7 +277,7 @@
         }
 
         td {
-          font-size: 13px;
+          font-size: 1rem;
           color: $color-text;
           background-color: transparent;
           border-bottom: 1px solid $color-border-light;

package/vue-components/styles/components/_tabs.scss

@@ -23,7 +23,7 @@
 //             // text-transform: uppercase;
 //             font-weight: 400;
 //             color: $color-heading;
-//             font-size: 13px;
+//             font-size: 1rem;
 //             border-bottom: none;
 //             padding: 6px 16px;
 
@@ -36,7 +36,7 @@
 //     }
 
 //     &.is-boxed {
-//       font-size: 14px;
+//       font-size: 1rem;
 
 //       a {
 //         padding: 8px 20px;
@@ -75,7 +75,7 @@
 //               padding: 8px 20px;
 //               font-weight: 500;
 //               margin-bottom: -2px;
-//               font-size: 13px;
+//               font-size: 1rem;
 //             }
 //           }
 //         }
@@ -94,7 +94,7 @@
 //               border: 1px solid $color-border;
 //               border-bottom: none;
 //               margin-bottom: -2px;
-//               font-size: 13px;
+//               font-size: 1rem;
 //               color: $color-text;
 //             }
 //           }

package/vue-components/styles/components/_terminal.scss

@@ -12,7 +12,7 @@
   bottom: 0;
   background-color: var(--terminal-bg);
   color: $white-100;
-  font-size: 13px;
+  font-size: 1rem;
   height: 360px;
   z-index: 999;
   transition: 0.3s ease-in-out;
@@ -123,7 +123,7 @@
         li {
           a {
             margin-bottom: 0px;
-            font-size: 13px;
+            font-size: 1rem;
             border-radius: 0;
             padding: 8px 8px 8px 20px;
             border: none;
@@ -197,7 +197,7 @@
               }
 
               a {
-                font-size: 13px;
+                font-size: 1rem;
                 padding: 10px 20px;
                 justify-content: flex-start;
                 border-bottom: 1px solid $primary-20;
@@ -251,7 +251,7 @@
 
     .right-content {
       .status-message {
-        background-color: #666666 !important;
+        background-color: $color-text !important;
         text-align: center;
         padding: 4px 20px;
         border-radius: 4px;