npm - @appscode/design-system - Versions diffs - 2.4.26 → 2.4.27-alpha-2 - Mend

@appscode/design-system 2.4.26 → 2.4.27-alpha-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (64) hide show

package/main.scss CHANGED Viewed

@@ -16,11 +16,15 @@
 // COMPONENTS
 // @import "@/components/vue-components/styles/components/all";
 @import "@/components/vue-components/styles/components/button";
+@import "@/components/vue-components/styles/components/avatar";
 @import "@/components/vue-components/styles/components/terminal";
 @import "@/components/vue-components/styles/components/steps";
 @import "@/components/vue-components/styles/components/code-preview/all";
 @import "@/components/vue-components/styles/components/form-fields/input";
+@import "@/components/vue-components/styles/components/form-fields/check-radio-switch";
 @import "@/components/vue-components/styles/components/form-fields/custom-selectbox";
+@import "@/components/vue-components/styles/components/inbox/all";
 @import "@/components/vue-components/styles/components/ui-builder/vue-open-api";
 @import "@/components/vue-components/styles/components/ui-builder/ui-builder";
+@import "@/components/vue-components/styles/components/dropdown.scss";
 // @import "@/components/vue-components/styles/theme/appscode.scss";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.4.26",
+  "version": "2.4.27-alpha-2",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

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

@@ -56,7 +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%, 35%);
+$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%);
@@ -175,6 +175,21 @@ $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;
 // 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/_customize-bulma.scss CHANGED Viewed

@@ -33,7 +33,7 @@ $size-2: 2rem !default; //26px
 $size-3: 1.692rem !default; //22px
 $size-4: 1.385rem !default; //18px
 $size-5: 1.213rem !default; //16px
-$size-6: 1rem !default; //13px
+$size-6: 1rem !default; //14px
 $size-7: 0.846rem !default; //11px
 $weight-light: 300 !default;

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

@@ -333,6 +333,19 @@ hr {
   }
 }
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+.overflow-y-auto {
+  overflow-y: auto;
+}
+.overflow-x-auto {
+  overflow-x: auto;
+}
 .is-transparent-bg {
   background-color: transparent !important;
 }
@@ -432,7 +445,7 @@ button {
       padding: 5px 20px 4px;
       box-shadow: $ac-shadow-1;
       font-weight: 500;
-      font-size: 13px;
+      font-size: 14px;
     }
     .tooltip-arrow {
@@ -453,7 +466,7 @@ button {
       padding: 5px 20px 4px;
       box-shadow: $ac-shadow-1;
       font-weight: 500;
-      font-size: 13px;
+      font-size: 14px;
       .errors-wrapper {
         .error-element {

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

@@ -9,8 +9,8 @@ body {
   background-color: $white-100;
   font-family: $font-paragraph;
   font-weight: 400;
-  font-size: 13px;
-  color: $color-heading;
+  font-size: 14px;
+  color: $color-text;
 }
 p {
@@ -67,8 +67,8 @@ h6 {
   }
   &.is-small {
-    font-size: 13px;
-    line-height: 13px + 10;
+    font-size: 14px;
+    line-height: 14px + 10;
   }
   &.is-normal {
@@ -121,7 +121,7 @@ a:not(.ac-button) {
 }
 .text-base {
-  font-size: 1rem; //13px
+  font-size: 1rem; //14px
 }
 .text-lg {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/vue-components/styles/components/_preview-modal.scss CHANGED Viewed

@@ -145,7 +145,7 @@
                 span {
                   img {
                     margin-right: 5px;
-                    height: 13px;
+                    height: 14px;
                   }
                 }
               }

package/vue-components/styles/components/_progress-bar.scss CHANGED Viewed

@@ -37,7 +37,7 @@
       border: 7px solid transparent;
       border-top-color: $gray-60;
       position: absolute;
-      bottom: -13px;
+      bottom: -14px;
       left: 50%;
       transform: translateX(-50%);
       border-width: 8px;
@@ -52,7 +52,7 @@
       border: 7px solid transparent;
       border-top-color: $gray-60;
       position: absolute;
-      bottom: -13px;
+      bottom: -14px;
       left: 50%;
       transform: translateX(-50%);
       z-index: 1;

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

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

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

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

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

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

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

@@ -12,7 +12,7 @@
   bottom: 0;
   background-color: var(--terminal-bg);
   color: $white-100;
-  font-size: 13px;
+  font-size: 14px;
   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: 14px;
             border-radius: 0;
             padding: 8px 8px 8px 20px;
             border: none;
@@ -197,7 +197,7 @@
               }
               a {
-                font-size: 13px;
+                font-size: 14px;
                 padding: 10px 20px;
                 justify-content: flex-start;
                 border-bottom: 1px solid $primary-20;

package/vue-components/styles/components/_widget-menu.scss CHANGED Viewed

@@ -6,7 +6,7 @@
 //     .menu-list-wrapper {
 //       li {
 //         a {
-//           font-size: 13px;
+//           font-size: 14px;
 //           font-weight: 400;
 //           color: $color-heading;
 //           display: block;
@@ -80,7 +80,7 @@
 //           &::after {
 //             position: absolute;
 //             content: "";
-//             left: 13px;
+//             left: 14px;
 //             top: 18.4px;
 //             width: 20px;
 //             height: 1px;
@@ -89,7 +89,7 @@
 //           }
 //           a {
-//             font-size: 13px;
+//             font-size: 14px;
 //             font-weight: 500;
 //             color: $color-heading;
@@ -118,7 +118,7 @@
 //     p {
 //       font-weight: 500;
-//       font-weight: 13px;
+//       font-weight: 14px;
 //     }
 //     i.fa-check-circle {
@@ -137,7 +137,7 @@
 //     background-color: $color-border;
 //     p {
-//       font-size: 13px;
+//       font-size: 14px;
 //       font-weight: 600;
 //       color: $color-heading;
 //     }
@@ -154,7 +154,7 @@
 //       background-color: $white-100;
 //       text-align: left;
 //       color: $color-heading;
-//       font-size: 13px;
+//       font-size: 14px;
 //       font-weight: 500;
 //       &:hover {

package/vue-components/styles/components/_wizard.scss CHANGED Viewed

@@ -9,7 +9,7 @@
 //   font-family: $font-paragraph;
 //   font-style: normal;
 //   font-weight: normal;
-//   font-size: 13px;
+//   font-size: 14px;
 //   line-height: 100%;
 //   color: $color-heading;
 //   margin-bottom: 10px;
@@ -83,7 +83,7 @@
 //     font-family: $font-paragraph;
 //     font-style: normal;
 //     font-weight: 500;
-//     font-size: 13px;
+//     font-size: 14px;
 //     line-height: 16px;
 //     color: $color-heading;
 //     margin-right: 16px;
@@ -187,7 +187,7 @@
 //       font-family: $font-paragraph;
 //       font-style: normal;
 //       font-weight: 500;
-//       font-size: 13px;
+//       font-size: 14px;
 //       line-height: 16px;
 //       color: $color-heading;
 //     }
@@ -252,7 +252,7 @@
 //       font-family: $font-paragraph;
 //       font-style: normal;
 //       font-weight: normal;
-//       font-size: 13px;
+//       font-size: 14px;
 //       line-height: 16px;
 //       color: $color-heading;
 //       display: flex;
@@ -286,7 +286,7 @@
 //       font-family: $font-paragraph;
 //       font-style: normal;
 //       font-weight: normal;
-//       font-size: 13px;
+//       font-size: 14px;
 //       line-height: 18px;
 //       display: block;
 //       color: $color-heading;
@@ -330,7 +330,7 @@
 //       font-family: $font-paragraph;
 //       font-style: normal;
 //       font-weight: 500;
-//       font-size: 13px;
+//       font-size: 14px;
 //       line-height: 16px;
 //       display: flex;
 //       align-items: center;
@@ -486,7 +486,7 @@
 //   p {
 //     font-family: $font-paragraph;
 //     font-style: normal;
-//     font-size: 13px;
+//     font-size: 14px;
 //     line-height: 18px;
 //     color: $white-100;
 //     font-weight: 400;
@@ -529,7 +529,7 @@
 //     text-align: center;
 //     font-family: $font-paragraph;
 //     font-weight: 500;
-//     font-size: 13px;
+//     font-size: 14px;
 //     line-height: 19px;
 //     color: $color-heading;
 //     margin: 0 10px 10px 0;

package/vue-components/styles/components/ac-toaster/_ac-toasted.scss CHANGED Viewed

@@ -3,7 +3,7 @@
   min-width: 350px !important;
   min-height: 40px !important;
   justify-content: flex-start !important;
-  font-size: 13px !important;
+  font-size: 14px !important;
   font-weight: 500 !important;
   padding-right: 35px !important;
   box-shadow: none !important;
@@ -49,7 +49,7 @@
 }
 .ac-toast-action {
-  font-size: 13px !important;
+  font-size: 14px !important;
   font-weight: 400 !important;
   color: inherit !important;
   font-family: Roboto, sans-serif !important;

package/vue-components/styles/components/alert/_alert.scss CHANGED Viewed

@@ -1,6 +1,6 @@
 .ac-notification {
   background-color: $primary-95;
-  font-size: 13px;
+  font-size: 14px;
   color: $ac-primary;
   min-height: 36px;
   display: flex;

package/vue-components/styles/components/alert/_toast.scss CHANGED Viewed

@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 13px;
+  font-size: 14px;
   border-radius: 4px;
   position: relative;
   padding-right: 30px;

package/vue-components/styles/components/bbum/_card-team.scss CHANGED Viewed

@@ -73,7 +73,7 @@
     }
     .meta {
-      font-size: 13px;
+      font-size: 14px;
       color: $color-text;
       margin-bottom: 20px;
     }
@@ -87,7 +87,7 @@
         &:not(:first-child) {
           list-style: disc;
         }
-        font-size: 13px;
+        font-size: 14px;
         color: $color-text;
       }
     }

package/vue-components/styles/components/bbum/_left-sidebar.scss CHANGED Viewed

@@ -20,7 +20,7 @@
       .user-info {
         h3 {
-          font-size: 13px;
+          font-size: 14px;
           line-height: 1;
           margin-bottom: 5px;
         }
@@ -38,7 +38,7 @@
         li {
           a {
             display: flex;
-            font-size: 13px;
+            font-size: 14px;
             color: $color-heading;
             align-items: center;
             font-weight: 500;

package/vue-components/styles/components/bbum/_sign-up-notification.scss CHANGED Viewed

@@ -44,7 +44,7 @@
     right: 10px;
     top: 10px;
     background-color: lighten($color: $danger, $amount: 40);
-    font-size: 13px;
+    font-size: 14px;
     transition: 0.3s ease-in-out;
     &:hover {
       background-color: $danger;
@@ -75,7 +75,7 @@
     p {
       color: $color-heading;
-      font-size: 13px;
+      font-size: 14px;
       margin-bottom: 10px;
     }
   }

package/vue-components/styles/components/bbum/_single-post-preview.scss CHANGED Viewed

@@ -72,7 +72,7 @@
     p {
       color: $color-heading;
-      font-size: 13px;
+      font-size: 14px;
       line-height: 160%;
     }

package/vue-components/styles/components/bbum/_user-profile.scss CHANGED Viewed

@@ -92,7 +92,7 @@
           display: flex;
           align-items: center;
           margin-bottom: 10px;
-          font-size: 13px;
+          font-size: 14px;
           &:last-child {
             margin-bottom: 0;
           }

package/vue-components/styles/components/cards/_cluster.scss CHANGED Viewed

@@ -91,7 +91,7 @@
       }
       strong {
         color: $color-heading;
-        font-size: 13px;
+        font-size: 14px;
         font-weight: 400;
       }
     }

package/vue-components/styles/components/cards/_info.scss CHANGED Viewed

@@ -43,7 +43,7 @@
       }
       strong {
-        font-size: 13px;
+        font-size: 14px;
         font-weight: 400;
         color: $color-heading;
       }