@appscode/design-system 1.1.0-alpha.8 → 1.1.0-beta.10

package/components/_nested-list.scss

@@ -3,7 +3,7 @@
     li {
       display: flex;
       align-items: center;
-      border: 1px solid $ac-white-light;
+      border: 1px solid $primary-90;
       margin-top: -1px;
       padding: 5px 15px;
 

package/components/_overview-info.scss

@@ -1,15 +1,15 @@
 .cluster-overview {
-  background-color: $ac-white;
+  background-color: $white-100;
   height: calc(100vh - 80px);
 
   .overview-title {
     p {
       font-size: 18px;
       line-height: 1;
-      color: $ac-color-heading;
+      color: $primary-5;
       font-weight: 500;
       padding: 20px;
-      border-bottom: 1px solid $ac-white-light;
+      border-bottom: 1px solid $primary-90;
     }
   }
 
@@ -22,7 +22,7 @@
     }
 
     h3 {
-      color: $ac-color-heading;
+      color: $primary-5;
       font-size: 26px;
       font-weight: 500;
     }
@@ -41,13 +41,13 @@
 
           h4 {
             font-size: 12px;
-            color: $ac-color-value;
+            color: $primary-20;
             font-weight: 500;
             opacity: 0.5;
           }
 
           .button {
-            color: $ac-color-value;
+            color: $primary-20;
             text-decoration: underline;
           }
         }
@@ -70,7 +70,7 @@
                 font-size: 16px;
                 color: #f99a00;
                 font-weight: 500;
-                font-family: $ac-family-heading;
+                font-family: $font-heading;
               }
             }
           }

package/components/_overview-page.scss

@@ -25,14 +25,14 @@
   //  single charge
   .single-charge-inner {
     padding: 10px 0;
-    border-bottom: 1px solid $ac-white-light;
+    border-bottom: 1px solid $primary-90;
 
     &:last-child {
       border-bottom: none;
     }
 
     p.charge {
-      color: $ac-color-text;
+      color: $primary-10;
       font-size: 16px;
     }
 
@@ -45,12 +45,12 @@
       //  bottom: 12px;
 
       a {
-        color: $ac-color-text;
+        color: $primary-10;
         font-size: 16px;
         font-weight: 500;
 
         &:hover {
-          color: $ac-primary;
+          color: $primary;
         }
       }
     }

package/components/_pagination.scss

@@ -1,124 +1,106 @@
-.inner-table-pagination {
-  padding: 5px 20px;
-}
-
-.pagination-item {
-  ul {
-    li {
-      display: inline-block;
-
-      a {
-        display: block;
-        width: 20px;
-        text-align: center;
-        font-size: 13px;
-        font-weight: 500;
-        border-radius: 4px;
-
-        &:hover {
-          background-color: $ac-primary;
-          color: $ac-white;
-          border: 1px solid
-            hsla(
-              var(--hsl-hue),
-              var(--hsl-saturation),
-              calc(var(--hsl-lightness) - 5%),
-              1
-            );
-        }
-      }
-
-      padding: 3px;
-    }
-  }
-}
-
-.counting-page {
-  color: $ac-color-value;
-  font-size: 12px;
-
-  span {
-    color: $ac-color-text;
-    padding: 0 4px;
-    font-weight: 500;
-  }
-}
-
-.pagination-filter {
-  select {
-    border: 1px solid
-      hsla(
-        var(--hsl-hue),
-        var(--hsl-saturation),
-        calc(var(--hsl-lightness) - 5%),
-        1
-      );
-    border-radius: 4px;
-    height: 20px;
-    font-size: 11px;
-    background-color: $ac-white;
-    color: $ac-color-value;
-    &:focus-visible {
-      outline: none;
-    }
-  }
-
-  label {
-    color: $ac-gray-darker;
-    padding-right: 5px;
-    display: inline-block;
-    font-size: 13px;
-  }
-}
-
-ul > li > a.previous {
-  border: 1px solid
-    hsla(
-      var(--hsl-hue),
-      var(--hsl-saturation),
-      calc(var(--hsl-lightness) - 5%),
-      1
-    );
-  background-color: $ac-primary;
-  color: $ac-white;
-
-  &:hover {
-    background-color: $ac-white;
-    color: $ac-primary;
-  }
-}
-
-ul > li > a.next {
-  border: 1px solid
-    hsla(
-      var(--hsl-hue),
-      var(--hsl-saturation),
-      calc(var(--hsl-lightness) - 5%),
-      1
-    );
-  background-color: $ac-primary;
-  color: $ac-white;
-
-  &:hover {
-    background-color: $ac-white;
-    color: $ac-primary;
-  }
-}
-
-.is-current {
-  border: 1px solid
-    hsla(
-      var(--hsl-hue),
-      var(--hsl-saturation),
-      calc(var(--hsl-lightness) - 5%),
-      1
-    );
-}
-
-.is-dark-theme {
-  .pagination-filter {
-    label {
-      $ac-gray-darker: $ac-color-value;
-    }
-  }
-}
+// .inner-table-pagination {
+//   padding: 5px 20px;
+// }
+
+// .pagination-item {
+//   ul {
+//     li {
+//       display: inline-block;
+
+//       a {
+//         display: block;
+//         width: 20px;
+//         text-align: center;
+//         font-size: 13px;
+//         font-weight: 500;
+//         border-radius: 4px;
+
+//         &:hover {
+//           background-color: $primary;
+//           color: $white-100;
+//           border: 1px solid
+//             hsla(
+//               var(--hsl-hue),
+//               var(--hsl-saturation),
+//               calc(var(--hsl-lightness) - 5%),
+//               1
+//             );
+//         }
+//       }
+
+//       padding: 3px;
+//     }
+//   }
+// }
+
+// .counting-page {
+//   color: $primary-20;
+//   font-size: 12px;
+
+//   span {
+//     color: $primary-10;
+//     padding: 0 4px;
+//     font-weight: 500;
+//   }
+// }
+
+// .pagination-filter {
+//   select {
+//     border: 1px solid
+//       hsla(
+//         var(--hsl-hue),
+//         var(--hsl-saturation),
+//         calc(var(--hsl-lightness) - 5%),
+//         1
+//       );
+//     border-radius: 4px;
+//     height: 20px;
+//     font-size: 11px;
+//     background-color: $white-100;
+//     color: $primary-20;
+//     &:focus-visible {
+//       outline: none;
+//     }
+//   }
+
+//   label {
+//     color: $black-40;
+//     padding-right: 5px;
+//     display: inline-block;
+//     font-size: 13px;
+//   }
+// }
+
+// ul > li > a.previous {
+//   border: 1px solid $primary;
+//   background-color: $primary-90;
+//   color: $primary;
+
+
+// }
+
+// ul > li > a.next {
+//   border: 1px solid $primary;
+//   background-color: $primary-90;
+//   color: $primary;
+
+
+// }
+
+// .is-current {
+//   border: 1px solid
+//     hsla(
+//       var(--hsl-hue),
+//       var(--hsl-saturation),
+//       calc(var(--hsl-lightness) - 5%),
+//       1
+//     );
+// }
+
+// .is-dark-theme {
+//   .pagination-filter {
+//     label {
+//       $black-40: $primary-20;
+//     }
+//   }
+// }

package/components/_payment-card.scss

@@ -3,7 +3,7 @@
 }
 
 .payment-bg-2 {
-  background-image: url("~@appscode/design-system-images/payment-card/payment-card-bg-2.svg");
+  background-image: url("https://bb-developer-v1.web.app/_nuxt/img/payment-card-bg-2.8f32252.svg");
 }
 
 .ac-payment-card-wrapper {
@@ -34,7 +34,7 @@
   &.add-card {
     background-color: transparent;
     box-shadow: none;
-    border: 2px dashed $ac-white-light;
+    border: 2px dashed $primary-90;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -54,8 +54,8 @@
       top: 5px;
       width: 14px;
       height: 14px;
-      background-color: $ac-white;
-      border: 1px solid $ac-primary;
+      background-color: $white-100;
+      border: 1px solid $primary;
       z-index: 1;
       border-radius: 50%;
     }
@@ -63,7 +63,7 @@
     &::before {
       width: 6px;
       height: 6px;
-      background-color: $ac-primary;
+      background-color: $primary;
       border: none;
       left: 9px;
       top: 9px;
@@ -92,19 +92,19 @@
     }
 
     &.is-expired {
-      color: $ac-danger;
+      color: $danger;
     }
 
     p {
-      font-size: $font-size-extra-small;
-      color: $ac-white;
+      font-size: 12px;
+      color: $white-100;
       text-align: center;
       padding: 3px 0px;
     }
   }
 
   .default-status {
-    color: $ac-white;
+    color: $white-100;
 
     i.fa {
       padding-right: 6px;
@@ -113,12 +113,12 @@
 
   .p-card-expiry {
     p {
-      font-size: $font-size-extra-small;
+      font-size: 12px;
       color: #ededed;
 
       span {
         display: block;
-        font-size: $font-size-small;
+        font-size: 13px;
       }
     }
   }
@@ -138,9 +138,9 @@
         display: flex;
 
         .user-name {
-          font-size: $font-size-normal;
+          font-size: 14px;
           font-weight: 500;
-          color: $ac-white;
+          color: $white-100;
           margin-right: 10px;
         }
       }
@@ -151,7 +151,7 @@
         .ac-options {
           .option-dots {
             span {
-              background-color: $ac-white;
+              background-color: $white-100;
             }
           }
 
@@ -160,11 +160,11 @@
 
             li {
               a {
-                color: $ac-color-text;
+                color: $primary-10;
 
                 &:hover {
-                  background-color: $ac-primary;
-                  color: $ac-color-text;
+                  background-color: $primary;
+                  color: $primary-10;
                 }
               }
             }
@@ -187,13 +187,13 @@
       p {
         font-size: 22px;
         font-weight: 600;
-        color: $ac-white;
+        color: $white-100;
       }
 
       span {
         width: 7px;
         height: 7px;
-        background-color: $ac-white;
+        background-color: $white-100;
         display: inline-block;
         margin: 2px;
         border-radius: 50%;
@@ -206,8 +206,8 @@
       justify-content: space-between;
 
       p.user-name {
-        font-size: $font-size-normal;
-        color: $ac-white;
+        font-size: 14px;
+        color: $white-100;
         margin-top: 10px;
       }
 

package/components/_preloader.scss

@@ -14,7 +14,7 @@
   animation: spinner 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
   width: 2em;
   height: 2em;
-  background-color: $ac-primary;
+  background-color: $primary;
 }
 
 .spinner:after {

package/components/_preview-modal.scss

@@ -9,7 +9,7 @@
   top: 400px;
   border: none;
   cursor: pointer;
-  color: $ac-white;
+  color: $white-100;
   z-index: 9999;
   transition: 0.3s ease-in-out;
 
@@ -18,7 +18,7 @@
   }
 
   &:hover {
-    background-color: $ac-primary;
+    background-color: $primary;
   }
 }
 
@@ -44,7 +44,7 @@
   }
 
   .ac-preview-inner {
-    background-color: $ac-white;
+    background-color: $white-100;
     border-radius: 10px 0px 0px 10px;
     height: calc(100% - 90px);
 
@@ -55,39 +55,39 @@
       top: -50px;
       width: calc(100% + 90px);
       height: 100%;
-      background-color: $ac-white;
+      background-color: $white-100;
 
-      // remove opacity for fix cluster ui project 
+      // remove opacity for fix cluster ui project
       // opacity: 0.8;
       z-index: -1;
     }
 
     .ac-preview-header {
       padding: 20px;
-      border-bottom: 1px solid $ac-bg-light-gray;
+      border-bottom: 1px solid $black-60;
 
       h5 {
-        font-family: $ac-family-paragraph;
+        font-family: $font-paragraph;
         font-style: normal;
         font-weight: 500;
         font-size: 24px;
         line-height: 28px;
 
-        color: $ac-color-text;
+        color: $primary-10;
       }
 
       .ms-back-button {
         .is-transparent {
-          font-family: $ac-family-paragraph;
+          font-family: $font-paragraph;
           font-style: normal;
           font-weight: normal;
           font-size: 16px;
           line-height: 100%;
-          color: $ac-gray-lightest;
+          color: $black-80;
           cursor: pointer;
 
           i.fa {
-            color: $ac-gray-lightest;
+            color: $black-80;
             padding-left: 5px;
           }
         }
@@ -108,9 +108,9 @@
             li {
               &.is-active {
                 a {
-                  background-color: $ac-primary;
+                  background-color: $primary;
                   border-radius: 5px;
-                  color: $ac-white;
+                  color: $white-100;
                   padding: 10px 10px;
                   margin-left: -10px;
                   border-top: 1px solid transparent;
@@ -134,13 +134,13 @@
               a {
                 padding: 10px 0px;
                 display: flex;
-                font-family: $ac-family-paragraph;
+                font-family: $font-paragraph;
                 font-style: normal;
                 font-weight: 500;
                 font-size: 14px;
                 line-height: 100%;
-                color: $ac-color-text;
-                border-top: 1px solid $ac-white-light;
+                color: $primary-10;
+                border-top: 1px solid $primary-90;
 
                 span {
                   img {
@@ -152,7 +152,7 @@
 
               &:last-child {
                 a {
-                  border-bottom: 1px solid $ac-white-light;
+                  border-bottom: 1px solid $primary-90;
                 }
               }
             }
@@ -164,7 +164,7 @@
         width: 100%;
 
         .code-preview {
-          background-color: $ac-white-light;
+          background-color: $primary-90;
           border-radius: 4px;
           display: flex;
 

package/components/_pricing-table.scss

@@ -1,13 +1,13 @@
 .pricing-table {
-  border: 1px solid $ac-white-light;
-  background-color: $ac-white-lighter;
+  border: 1px solid $primary-90;
+  background-color: $white-100-lighter;
   border-radius: 4px;
 
   .pricing-title {
     display: grid;
     grid-template-columns: 50px auto 50px;
     align-content: center;
-    background-color: $ac-white-light;
+    background-color: $primary-90;
 
     button {
       border: none;
@@ -16,7 +16,7 @@
     }
 
     .back-button {
-      background-color: $ac-white;
+      background-color: $white-100;
     }
 
     h4 {
@@ -32,7 +32,7 @@
     display: flex;
 
     .single-pricing-table {
-      border: 1px solid $ac-white-light;
+      border: 1px solid $primary-90;
       border-radius: 4px;
       margin-right: 10px;
       position: relative;
@@ -58,7 +58,7 @@
         background-color: #f9f4ec;
 
         &:after {
-          @include absulate-shape($ac-yellow, 100%, 4px);
+          @include absulate-shape($warning, 100%, 4px);
         }
       }
 
@@ -66,7 +66,7 @@
         background-color: #f4f3f7;
 
         &:after {
-          @include absulate-shape($ac-primary, 100%, 4px);
+          @include absulate-shape($primary, 100%, 4px);
         }
       }
 
@@ -74,7 +74,7 @@
         background-color: #f2f7f4;
 
         &:after {
-          @include absulate-shape($ac-green, 100%, 4px);
+          @include absulate-shape($success, 100%, 4px);
         }
       }
 
@@ -82,7 +82,7 @@
         background-color: #f8f3f5;
 
         &:after {
-          @include absulate-shape($ac-danger, 100%, 4px);
+          @include absulate-shape($danger, 100%, 4px);
         }
       }
 
@@ -143,7 +143,7 @@
           text-align: center;
           color: $ac-link-black;
           display: block;
-          border-top: 1px solid $ac-white-light;
+          border-top: 1px solid $primary-90;
           padding: 10px;
           overflow: hidden;
           text-overflow: ellipsis;