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

package/components/_pagination.scss

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

package/components/_payment-card.scss

@@ -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;

package/components/_progress-bar.scss

@@ -14,11 +14,11 @@
 
   .progress-tooltip-info {
     align-items: center;
-    background-color: $ac-bg-light-gray;
+    background-color: $black-60;
     border: 1px solid $ac-label-text;
     border-radius: 10px;
     box-shadow: 0 0 2px $ac-label-text;
-    color: $ac-primary;
+    color: $primary;
     display: inline-flex;
     font-family: sans-serif;
     font-weight: bold;
@@ -35,7 +35,7 @@
       content: "";
       display: inline-block;
       border: 7px solid transparent;
-      border-top-color: $ac-bg-light-gray;
+      border-top-color: $black-60;
       position: absolute;
       bottom: -13px;
       left: 50%;
@@ -50,7 +50,7 @@
       content: "";
       display: inline-block;
       border: 7px solid transparent;
-      border-top-color: $ac-bg-light-gray;
+      border-top-color: $black-60;
       position: absolute;
       bottom: -13px;
       left: 50%;
@@ -90,7 +90,7 @@
 
   &::-webkit-progress-value {
     border-radius: 5px;
-    background-color: $ac-primary;
+    background-color: $primary;
     background-image: linear-gradient(
       45deg,
       rgba(255, 255, 255, 0.15) 25%,
@@ -106,7 +106,7 @@
 
   &::-moz-progress-bar {
     border-radius: 5px;
-    background-color: $ac-primary;
+    background-color: $primary;
     background-image: linear-gradient(
       45deg,
       rgba(255, 255, 255, 0.15) 25%,
@@ -122,7 +122,7 @@
 
   &::-ms-fill {
     border-radius: 5px;
-    background-color: $ac-primary;
+    background-color: $primary;
     background-image: linear-gradient(
       45deg,
       rgba(255, 255, 255, 0.15) 25%,
@@ -143,7 +143,7 @@
     animation-name: ac-move-infinity;
     animation-timing-function: linear;
     background-color: #5e9cd1;
-    background-image: linear-gradient(to right, $ac-primary 30%, #5e9cd1 30%);
+    background-image: linear-gradient(to right, $primary 30%, #5e9cd1 30%);
     background-position: top left;
     background-repeat: no-repeat;
     background-size: 150% 150%;
@@ -200,7 +200,7 @@
     display: flex;
     justify-content: space-between;
     font-size: 12px;
-    color: $ac-color-value;
+    color: $primary-20;
     margin-bottom: 5px;
   }
   .progress-line {
@@ -223,19 +223,19 @@
 
     &::-webkit-progress-value {
       border-radius: 5px;
-      background-color: $ac-primary;
+      background-color: $primary;
       background-size: 10px 10px;
     }
 
     &::-moz-progress-bar {
       border-radius: 5px;
-      background-color: $ac-primary;
+      background-color: $primary;
       background-size: 10px 10px;
     }
 
     &::-ms-fill {
       border-radius: 5px;
-      background-color: $ac-primary;
+      background-color: $primary;
       background-size: 10px 10px;
       border: none;
     }