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

package/components/_app-drawer.scss

@@ -37,7 +37,7 @@
     li {
       a {
         display: block;
-        color: $ac-color-text !important;
+        color: $primary-10 !important;
         padding: 10px 20px !important;
         font-size: 13px !important;
         transition: 0.2s;
@@ -50,7 +50,7 @@
           .media-content {
             .content {
               p {
-                color: $ac-white;
+                color: $white-100;
               }
             }
           }
@@ -78,7 +78,7 @@
                 strong {
                   font-weight: 600;
                   font-size: 17px;
-                  font-family: $ac-family-heading;
+                  font-family: $font-heading;
                 }
 
                 span {
@@ -94,7 +94,7 @@
 
       &:hover {
         > a {
-          background-color: $ac-white;
+          background-color: $white-100;
         }
       }
 

package/components/_basic-card.scss

@@ -1,124 +1,118 @@
-.card-details {
-  border: 1px solid #d2e7f9;
-  padding: 30px 20px;
-  width: calc(33.3% - 8px);
-  min-width: 400px;
-  max-width: 525px;
-  // border-radius: 4px;
-  transition: 0.3s ease-in-out;
-  position: relative;
-  z-index: 1;
-  @extend %card-hover;
+// .card-details {
+//   border: 1px solid #d2e7f9;
+//   padding: 30px 20px;
+//   width: calc(33.3% - 8px);
+//   min-width: 400px;
+//   max-width: 525px;
+//   // border-radius: 4px;
+//   transition: 0.3s ease-in-out;
+//   position: relative;
+//   z-index: 1;
 
-  // &:hover {
-  //   border: 1px solid #1971bd;
-  // }
+//   .c-header {
+//     display: flex;
+//     margin-bottom: 20px;
 
-  .c-header {
-    display: flex;
-    margin-bottom: 20px;
+//     .c-logo {
+//       width: 54px;
+//       height: 54px;
+//       background: #e8f3fc;
+//       border-radius: 50%;
+//       display: flex;
+//       align-items: center;
+//       justify-content: center;
+//       margin-right: 24px;
 
-    .c-logo {
-      width: 54px;
-      height: 54px;
-      background: #e8f3fc;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 24px;
+//       img {
+//         height: 24px;
+//       }
+//     }
 
-      img {
-        height: 24px;
-      }
-    }
+//     .c-content {
+//       width: calc(100% - 78px);
+//       h4 {
+//         font-size: 18px;
+//         line-height: 130%;
+//         color: #030d17;
+//       }
+//       .icon {
+//         color: #0c365a;
+//         cursor: pointer;
+//         position: relative;
+//         z-index: 1;
+//         &:after {
+//           position: absolute;
+//           content: "";
+//           border-radius: 50%;
+//           width: 32px;
+//           height: 32px;
+//           background: #e8f3fc;
+//           opacity: 0;
+//           visibility: hidden;
+//           transition: 0.3s ease-in-out;
+//           z-index: -1;
+//         }
+//         &:hover {
+//           &:after {
+//             opacity: 1;
+//             visibility: visible;
+//           }
+//         }
+//       }
+//       .tags {
+//         margin-top: 12px;
+//       }
+//     }
+//   }
 
-    .c-content {
-      width: calc(100% - 78px);
-      h4 {
-        font-size: 18px;
-        line-height: 130%;
-        color: #030d17;
-      }
-      .icon {
-        color: #0c365a;
-        cursor: pointer;
-        position: relative;
-        z-index: 1;
-        &:after {
-          position: absolute;
-          content: "";
-          border-radius: 50%;
-          width: 32px;
-          height: 32px;
-          background: #e8f3fc;
-          opacity: 0;
-          visibility: hidden;
-          transition: 0.3s ease-in-out;
-          z-index: -1;
-        }
-        &:hover {
-          &:after {
-            opacity: 1;
-            visibility: visible;
-          }
-        }
-      }
-      .tags {
-        margin-top: 12px;
-      }
-    }
-  }
+//   .c-body {
+//     display: flex;
+//     flex-wrap: wrap;
+//     gap: 20px;
+//     justify-content: space-between;
+//     p {
+//       width: calc(25% - 16px);
 
-  .c-body {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    justify-content: space-between;
-    p {
-      width: calc(25% - 16px);
+//       span {
+//         font-size: 11px;
+//         color: #666666;
+//         display: block;
+//       }
+//       strong {
+//         color: #061b2d;
+//         font-size: 13px;
+//         font-weight: 400;
+//       }
+//     }
+//   }
+// }
 
-      span {
-        font-size: 11px;
-        color: #666666;
-        display: block;
-      }
-      strong {
-        color: #061b2d;
-        font-size: 13px;
-        font-weight: 400;
-      }
-    }
-  }
-}
+// // ac card
+// .card-basic {
+//   padding: 20px;
+//   width: calc(25% - 8px);
+//   max-width: 390px;
+//   min-width: 290px;
+//   position: relative;
 
-// ac card
-.card-basic {
-  padding: 20px;
-  width: calc(25% - 8px);
-  max-width: 390px;
-  min-width: 290px;
-  position: relative;
-  @extend %card-hover;
+//   .required {
+//     position: absolute;
+//     left: 20px;
+//     top: -9px;
+//   }
+//   .c-header {
+//     .c-title {
 
-  .required {
-    position: absolute;
-    left: 20px;
-    top: -9px;
-  }
-  .c-header {
-    .c-title {
+//       h4 {
+//         font-size: 18px;
+//         color: #061b2d;
+//       }
+//     }
+//   }
 
-      h4 {
-        font-size: 18px;
-        color: #061b2d;
-      }
-    }
-  }
-
-  .c-body {
-    p {
-      color: #0C365A;
-    }
-  }
-}
+//   .c-body {
+//     p {
+//       color: #0C365A;
+//     }
+//   }
+// }

package/components/_breadcumb.scss

@@ -1,11 +1,11 @@
 /* breadcumb style */
 .ac-breadcrumb {
   padding: 13px 20px;
-  border-bottom: 1px solid $ac-white-light;
+  border-bottom: 1px solid $primary-90;
   position: sticky;
   top: 50px;
   height: 50px;
-  background-color: $ac-white;
+  background-color: $white-100;
   z-index: 998;
   display: flex;
   align-items: center;
@@ -13,17 +13,17 @@
 
 .breadcrumb {
   a {
-    color: $ac-color-value;
+    color: $primary-20;
     font-size: 13px;
     padding: 0px 3px;
     &:hover {
-      color: $ac-color-text;
+      color: $primary-10;
     }
   }
 
   li.is-active {
     a {
-      color: $ac-color-text;
+      color: $primary-10;
       font-weight: 500;
     }
   }

package/components/_buttons.scss

@@ -3,12 +3,12 @@
 
   // ac-button
   &.ac-button {
-    border-color: $ac-primary;
+    border-color: $primary;
     border-radius: 4px;
     font-size: 14px;
-    font-family: $ac-family-paragraph;
+    font-family: $font-paragraph;
     letter-spacing: 0.2px;
-    color: $ac-primary;
+    color: $primary;
     font-weight: 500;
     height: 36px;
     padding-left: 25px;
@@ -41,7 +41,7 @@
       letter-spacing: 1px;
 
       &.is-primary {
-        color: $ac-primary;
+        color: $primary;
         background-color: transparent;
 
         &:hover {
@@ -60,8 +60,8 @@
 
     .ac-icon {
       margin-left: 25px;
-      background-color: $ac-white;
-      color: $ac-primary;
+      background-color: $white-100;
+      color: $primary;
       padding: 2px 6px;
       border-radius: 4px;
       width: 20px;
@@ -137,12 +137,12 @@
       padding: 0;
       &:hover {
         svg {
-          color: $ac-white;
+          color: $white-100;
         }
       }
       &.is-gray {
-        background-color: $ac-white-light;
-        color: $ac-gray-lightest;
+        background-color: $primary-90;
+        color: $black-80;
         border-color: transparent;
 
         img {
@@ -151,30 +151,30 @@
 
         i.fa {
           font-size: 18px;
-          color: $ac-gray-lightest;
+          color: $black-80;
         }
 
         &:hover {
-          background-color: $ac-gray-lightest;
+          background-color: $black-80;
         }
       }
 
       &.is-outlined-gray {
-        border: 1px solid $ac-white-light;
+        border: 1px solid $primary-90;
         font-size: 15px;
       }
 
       &.is-transparent {
         background-color: transparent;
-        color: $ac-gray-darker;
+        color: $black-40;
 
         &:hover {
-          background-color: $ac-white-lighter;
+          background-color: $white-100-lighter;
           color: $ac-black;
         }
 
         &:focus {
-          background-color: $ac-white-lighter;
+          background-color: $white-100-lighter;
           color: $ac-black;
         }
       }
@@ -223,25 +223,25 @@
       font-size: 14px;
       font-weight: 500;
       background-color: transparent;
-      color: $ac-color-text;
+      color: $primary-10;
 
       &.is-primary {
         background-color: transparent;
-        color: $ac-primary;
+        color: $primary;
 
         &:hover {
           background-color: transparent;
-          color: $ac-primary;
+          color: $primary;
         }
       }
 
       &.is-danger {
         background-color: transparent;
-        color: $ac-danger;
+        color: $danger;
 
         &:hover {
           background-color: transparent;
-          color: $ac-danger;
+          color: $danger;
         }
       }
 
@@ -257,12 +257,12 @@
     }
 
     &.is-white {
-      background-color: $ac-white;
+      background-color: $white-100;
       border: none;
     }
 
     &.is-light {
-      background-color: $ac-white-light;
+      background-color: $primary-90;
       border: none;
 
       &:hover {
@@ -271,19 +271,19 @@
     }
 
     &.is-dark {
-      background-color: $ac-gray-dark;
+      background-color: $black-30;
       border: none;
-      color: $ac-white;
+      color: $white-100;
 
       &:hover {
-        background-color: $ac-color-value;
+        background-color: $primary-20;
       }
     }
 
     &.is-black {
-      background-color: $ac-color-text;
+      background-color: $primary-10;
       border: none;
-      color: $ac-white;
+      color: $white-100;
 
       &:hover {
         background-color: hsla(0, 0, calc(var(--hsl-lightness) - 9%), 1);
@@ -291,7 +291,7 @@
     }
 
     &.is-text {
-      background-color: $ac-white;
+      background-color: $white-100;
       border: none;
 
       &:hover {
@@ -319,37 +319,37 @@
 
     &.is-static {
       border: none;
-      background-color: $ac-white-light;
-      color: $ac-white;
+      background-color: $primary-90;
+      color: $white-100;
     }
 
     // ac-button from mixin
     &.is-primary {
-      @include ac-button($ac-primary);
+      @include ac-button($primary);
     }
 
     &.is-link {
-      @include ac-button($ac-blue);
+      @include ac-button($info);
     }
 
     &.is-info {
-      @include ac-button($ac-info);
+      @include ac-button($info);
     }
 
     &.is-success {
-      @include ac-button($ac-success);
+      @include ac-button($success);
     }
 
     &.is-warning {
-      @include ac-button($ac-warning);
+      @include ac-button($warning);
     }
 
     &.is-danger {
-      @include ac-button($ac-danger);
+      @include ac-button($danger);
     }
 
     &.is-green {
-      @include ac-button($ac-green);
+      @include ac-button($success);
     }
   }
 
@@ -359,8 +359,8 @@
     height: 60px;
     background-color: transparent;
     transition: 0.3s ease-in-out;
-    border: 2px solid $ac-gray-dark;
-    color: $ac-gray-dark;
+    border: 2px solid $black-30;
+    color: $black-30;
 
     i.fa {
       padding-left: 5px;
@@ -368,27 +368,27 @@
 
     // ac-button from mixin
     &.is-primary {
-      @include ac-play-button($ac-primary);
+      @include ac-play-button($primary);
     }
 
     &.is-link {
-      @include ac-play-button($ac-blue);
+      @include ac-play-button($info);
     }
 
     &.is-info {
-      @include ac-play-button($ac-info);
+      @include ac-play-button($info);
     }
 
     &.is-success {
-      @include ac-play-button($ac-success);
+      @include ac-play-button($success);
     }
 
     &.is-warning {
-      @include ac-play-button($ac-warning);
+      @include ac-play-button($warning);
     }
 
     &.is-danger {
-      @include ac-play-button($ac-danger);
+      @include ac-play-button($danger);
     }
 
     &.is-large {
@@ -396,7 +396,7 @@
       display: inline-block;
       padding: 0 25px 0 4px;
       height: 53px;
-      border: 1px solid $ac-primary;
+      border: 1px solid $primary;
 
       .ac-play {
         width: 44px;
@@ -404,7 +404,7 @@
         font-size: 16px;
         line-height: 44px;
         display: inline-block;
-        border: 1px solid $ac-primary;
+        border: 1px solid $primary;
         border-radius: 50%;
         margin-right: 10px;
       }
@@ -412,7 +412,7 @@
       span {
         font-size: 16px;
         font-weight: 600;
-        color: $ac-primary;
+        color: $primary;
       }
     }
   }
@@ -427,10 +427,10 @@
     width: 52px;
     margin-bottom: 0;
     margin-right: 10px;
-    background-color: $ac-primary;
+    background-color: $primary;
 
     i.fa {
-      color: $ac-white;
+      color: $white-100;
     }
   }
 
@@ -438,7 +438,7 @@
     font-size: 16px;
     font-weight: 600;
     display: block;
-    color: $ac-color-text;
+    color: $primary-10;
 
     span {
       font-size: 12px;
@@ -449,7 +449,7 @@
 
   &:hover {
     p {
-      color: $ac-primary;
+      color: $primary;
     }
   }
 }
@@ -477,7 +477,7 @@
       padding: 10px;
       font-size: 15px;
       font-weight: 500;
-      color: $ac-color-value;
+      color: $primary-20;
       background-color: transparent;
       width: 100%;
       -moz-appearance: textfield;
@@ -491,7 +491,7 @@
 
       &:focus {
         outline: none;
-        background-color: $ac-white;
+        background-color: $white-100;
       }
     }
   }
@@ -503,7 +503,7 @@
 
   .ac-counter-arrow-wrapper {
     height: 100%;
-    color: $ac-color-text;
+    color: $primary-10;
     border-left: 1px solid $ac-label-text;
 
     .ac-counter-arrow {
@@ -514,7 +514,7 @@
       height: 23px;
 
       &:hover {
-        color: $ac-color-text;
+        color: $primary-10;
       }
 
       &:first-child {
@@ -545,7 +545,7 @@
   }
 
   .up-down-button {
-    background-color: $ac-white-light;
+    background-color: $primary-90;
     border: none;
     display: block;
     cursor: pointer;
@@ -554,8 +554,8 @@
     color: #a4a4a4;
 
     &.is-info {
-      background-color: $ac-primary;
-      color: $ac-white;
+      background-color: $primary;
+      color: $white-100;
       transition: 0.3s;
     }
 
@@ -577,7 +577,7 @@
       width: 5px;
       height: 5px;
       border-radius: 50%;
-      background-color: $ac-color-value;
+      background-color: $primary-20;
       margin-bottom: 3px;
 
       &:last-child {
@@ -590,15 +590,15 @@
 // dark theme start
 .is-dark-theme {
   .button.ac-button.is-primary.is-light {
-    background-color: $ac-primary;
-    color: $ac-white;
+    background-color: $primary;
+    color: $white-100;
     &:hover {
       opacity: 0.8;
     }
   }
   .button.ac-button.is-danger.is-light {
-    background-color: $ac-danger;
-    color: $ac-white;
+    background-color: $danger;
+    color: $white-100;
     &:hover {
       opacity: 0.8;
     }