@appscode/design-system 2.4.27-alpha-4 → 2.4.27-alpha-8

package/package.json

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

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

@@ -85,7 +85,7 @@ $positions: (
   background-color: rgba(255, 255, 255, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.3);
   font-weight: 600;
-  font-size: 14px;
+  font-size: 1rem;
   border-radius: 2px;
   margin-left: 4px;
   padding: 4px;
@@ -445,7 +445,7 @@ button {
       padding: 5px 20px 4px;
       box-shadow: $ac-shadow-1;
       font-weight: 500;
-      font-size: 14px;
+      font-size: 1rem;
     }
 
     .tooltip-arrow {
@@ -466,7 +466,7 @@ button {
       padding: 5px 20px 4px;
       box-shadow: $ac-shadow-1;
       font-weight: 500;
-      font-size: 14px;
+      font-size: 1rem;
 
       .errors-wrapper {
         .error-element {

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

@@ -8,12 +8,12 @@ body {
   background-color: $white-100;
   font-family: $font-paragraph;
   font-weight: $weight-normal;
-  font-size: 14px; // Base font size
+  font-size: 13px; // Base font size
   color: $color-text;
 }
 
 p {
-  font-size: $size-6; // 14px
+  font-size: 1rem; // 13px
   font-family: $font-paragraph;
   font-weight: $weight-normal;
   line-height: 1.5;
@@ -31,44 +31,44 @@ h6 {
 }
 
 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;
+} // 16px
 h6 {
-  font-size: $size-6;
-}
+  font-size: 1rem;
+} // 13px
 
 h6 {
   &.is-tiny {
-    font-size: $size-7;
+    font-size: 0.846rem;
     line-height: 1.2;
   } // 11px
   &.is-extra-small {
-    font-size: 0.857rem;
+    font-size: 0.923rem;
     line-height: 1.2;
   } // 12px
   &.is-small,
   &.is-normal {
-    font-size: $size-6;
+    font-size: 1rem;
     line-height: 1.2;
-  } // 14px
+  } // 13px
   &.is-semi-normal {
-    font-size: 1.071rem;
+    font-size: 1.077rem;
     line-height: 1.2;
-  } // 15px
+  } // 14px
   &.is-medium {
-    font-size: $size-5;
+    font-size: 1.231rem;
     line-height: 1.2;
   } // 16px
 }
@@ -96,37 +96,37 @@ a:not(.ac-button) {
 }
 
 .text-xm {
-  font-size: 0.714rem;
+  font-size: 0.769rem;
 } // 10px
 .text-sm {
-  font-size: $size-7;
+  font-size: 0.846rem;
 } // 11px
 .text-xs {
-  font-size: 0.857rem;
+  font-size: 0.923rem;
 } // 12px
 .text-base {
-  font-size: $size-6;
-} // 14px
+  font-size: 1rem;
+} // 13px
 .text-lg {
-  font-size: $size-5;
-} // 16px
+  font-size: 1.077rem;
+} // 14px
 .text-xl {
-  font-size: 1.286rem;
-} // 18px
+  font-size: 1.231rem;
+} // 16px
 .text-2xl {
-  font-size: 1.429rem;
-} // 20px
+  font-size: 1.385rem;
+} // 18px
 .text-3xl {
-  font-size: 1.714rem;
+  font-size: 1.846rem;
 } // 24px
 .text-4xl {
-  font-size: 2.143rem;
+  font-size: 2.308rem;
 } // 30px
 .text-5xl {
-  font-size: 2.571rem;
+  font-size: 2.769rem;
 } // 36px
 .text-6xl {
-  font-size: 3rem;
+  font-size: 3.231rem;
 } // 42px
 
 hr {

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

@@ -5,7 +5,7 @@
     height: 45px !important;
     padding: 15px !important;
     font-weight: normal !important;
-    font-size: 14px !important;
+    font-size: 1rem !important;
   }
 
   .vc-highlight {
@@ -17,7 +17,7 @@
   .vc-weeks {
     padding: 25px 30px !important;
     font-weight: normal !important;
-    font-size: 14px !important;
+    font-size: 1rem !important;
   }
 
   .vc-weekday {
@@ -27,7 +27,7 @@
     margin-right: -30px !important;
     margin-bottom: 25px !important;
     font-weight: 500;
-    font-size: 14px !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: 14px;
+    font-size: 1rem;
     color: $color-heading;
     background-color: $color-border;
   }
@@ -15,7 +15,7 @@
 
 code[class*="language-"],
 pre[class*="language-"] {
-  font-size: 14px !important;
+  font-size: 1rem !important;
 }
 
 .editor-writable {

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

@@ -45,7 +45,7 @@
 
         span,
         strong {
-          font-size: 14px;
+          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: 14px;
+      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: 14px;
+    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: 14px;
+      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: 14px;
+      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: 14px;
+        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: 14px;
+        font-size: 1rem;
         padding: 10px 30px;
         display: block;
 
@@ -120,7 +120,7 @@
       }
 
       a {
-        font-size: 14px;
+        font-size: 1rem;
         padding: 7px 15px;
         display: block;
         text-decoration: none !important;

package/vue-components/styles/components/_overview-page.scss

@@ -18,7 +18,7 @@
     }
 
     p {
-      font-size: 14px;
+      font-size: 1rem;
     }
   }
 
@@ -37,7 +37,7 @@
     }
 
     span.meta-data {
-      font-size: 14px;
+      font-size: 1rem;
     }
 
     .view-details-button {
@@ -65,7 +65,7 @@
     }
 
     .title-meta {
-      font-size: 14px;
+      font-size: 1rem;
       color: #4a4a4a;
     }
 

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

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

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

@@ -137,7 +137,7 @@
                 font-family: $font-paragraph;
                 font-style: normal;
                 font-weight: 500;
-                font-size: 14px;
+                font-size: 1rem;
                 line-height: 100%;
                 color: $color-heading;
                 border-top: 1px solid $color-border;

package/vue-components/styles/components/_pricing-table.scss

@@ -93,7 +93,7 @@
         z-index: 1;
 
         h5 {
-          font-size: 14px;
+          font-size: 1rem;
           margin-bottom: 10px;
           font-weight: 500;
           overflow: hidden;

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

@@ -17,7 +17,7 @@
         p {
           font-style: normal;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 1rem;
           line-height: 16px;
           cursor: pointer;
           color: $color-text;
@@ -29,7 +29,7 @@
 
         button {
           color: $color-text;
-          font-size: 14px;
+          font-size: 1rem;
         }
       }
 
@@ -45,7 +45,7 @@
 
             font-style: normal;
             font-weight: normal;
-            font-size: 14px;
+            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: 14px;
+    font-size: 1rem;
     line-height: initial;
 
     tr {
@@ -71,7 +71,7 @@
             position: absolute;
             color: #808998;
             top: 10px;
-            font-size: 14px;
+            font-size: 1rem;
             font-weight: 1000;
             display: block;
           }
@@ -128,7 +128,7 @@
         background-color: $white-100 !important;
       }
       td {
-        font-size: 14px;
+        font-size: 1rem;
         padding: 5px 20px;
         color: $color-heading;
         border: none;
@@ -277,7 +277,7 @@
         }
 
         td {
-          font-size: 14px;
+          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: 14px;
+//             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: 14px;
+//               font-size: 1rem;
 //             }
 //           }
 //         }
@@ -94,7 +94,7 @@
 //               border: 1px solid $color-border;
 //               border-bottom: none;
 //               margin-bottom: -2px;
-//               font-size: 14px;
+//               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: 14px;
+  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: 14px;
+            font-size: 1rem;
             border-radius: 0;
             padding: 8px 8px 8px 20px;
             border: none;
@@ -197,7 +197,7 @@
               }
 
               a {
-                font-size: 14px;
+                font-size: 1rem;
                 padding: 10px 20px;
                 justify-content: flex-start;
                 border-bottom: 1px solid $primary-20;

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

@@ -6,7 +6,7 @@
 //     .menu-list-wrapper {
 //       li {
 //         a {
-//           font-size: 14px;
+//           font-size: 1rem;
 //           font-weight: 400;
 //           color: $color-heading;
 //           display: block;
@@ -89,7 +89,7 @@
 //           }
 
 //           a {
-//             font-size: 14px;
+//             font-size: 1rem;
 //             font-weight: 500;
 //             color: $color-heading;
 
@@ -137,7 +137,7 @@
 //     background-color: $color-border;
 
 //     p {
-//       font-size: 14px;
+//       font-size: 1rem;
 //       font-weight: 600;
 //       color: $color-heading;
 //     }
@@ -154,7 +154,7 @@
 //       background-color: $white-100;
 //       text-align: left;
 //       color: $color-heading;
-//       font-size: 14px;
+//       font-size: 1rem;
 //       font-weight: 500;
 
 //       &:hover {

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

@@ -9,7 +9,7 @@
 //   font-family: $font-paragraph;
 //   font-style: normal;
 //   font-weight: normal;
-//   font-size: 14px;
+//   font-size: 1rem;
 //   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: 14px;
+//     font-size: 1rem;
 //     line-height: 16px;
 //     color: $color-heading;
 //     margin-right: 16px;
@@ -127,7 +127,7 @@
 //       font-family: $font-paragraph;
 //       font-style: normal;
 //       font-weight: 500;
-//       font-size: 14px;
+//       font-size: 1rem;
 //       line-height: 19px;
 //       color: $color-heading;
 //     }
@@ -187,7 +187,7 @@
 //       font-family: $font-paragraph;
 //       font-style: normal;
 //       font-weight: 500;
-//       font-size: 14px;
+//       font-size: 1rem;
 //       line-height: 16px;
 //       color: $color-heading;
 //     }
@@ -252,7 +252,7 @@
 //       font-family: $font-paragraph;
 //       font-style: normal;
 //       font-weight: normal;
-//       font-size: 14px;
+//       font-size: 1rem;
 //       line-height: 16px;
 //       color: $color-heading;
 //       display: flex;
@@ -286,7 +286,7 @@
 //       font-family: $font-paragraph;
 //       font-style: normal;
 //       font-weight: normal;
-//       font-size: 14px;
+//       font-size: 1rem;
 //       line-height: 18px;
 //       display: block;
 //       color: $color-heading;
@@ -330,7 +330,7 @@
 //       font-family: $font-paragraph;
 //       font-style: normal;
 //       font-weight: 500;
-//       font-size: 14px;
+//       font-size: 1rem;
 //       line-height: 16px;
 //       display: flex;
 //       align-items: center;
@@ -486,7 +486,7 @@
 //   p {
 //     font-family: $font-paragraph;
 //     font-style: normal;
-//     font-size: 14px;
+//     font-size: 1rem;
 //     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: 14px;
+//     font-size: 1rem;
 //     line-height: 19px;
 //     color: $color-heading;
 //     margin: 0 10px 10px 0;

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

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

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

@@ -1,6 +1,6 @@
 .ac-notification {
   background-color: $primary-95;
-  font-size: 14px;
+  font-size: 1rem;
   color: $ac-primary;
   min-height: 36px;
   display: flex;
@@ -40,7 +40,7 @@
     position: absolute;
     box-shadow: none;
     border: none;
-    font-size: 14px;
+    font-size: 1rem;
     color: $danger;
     width: 40px;
     height: 100%;