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

package/components/_ac-tags.scss

@@ -1,11 +1,11 @@
 .tag:not(body) {
-  background-color: $ac-white-light;
+  background-color: $primary-90;
   font-size: 10px;
   height: 18px;
   font-weight: 500;
   line-height: 1;
   letter-spacing: 0px;
-  color: $ac-color-heading;
+  color: $primary-5;
   &.is-outlined {
     border: 1px solid;
     background-color: transparent;
@@ -13,43 +13,43 @@
 
   a {
     &:hover {
-      color: $ac-color-text;
+      color: $primary-10;
     }
   }
 
   &.is-available {
     background-color: #27b064;
-    color: $ac-white;
+    color: $white-100;
   }
 
   &.is-success {
-    background-color: $ac-green;
-    color: $ac-white;
+    background-color: $success;
+    color: $white-100;
 
     &.is-light {
       background-color: rgba(39, 176, 100, 0.2);
-      color: $ac-green;
+      color: $success;
     }
   }
 
   &.is-primary {
-    background-color: $ac-primary;
-    color: $ac-white;
+    background-color: $primary;
+    color: $white-100;
 
     &.is-light {
       background-color: rgba(25, 113, 189, 0.2);
-      color: $ac-primary;
+      color: $primary;
     }
   }
 
   &.is-gray {
     background-color: #e5e9f2;
-    color: $ac-gray-darker;
+    color: $black-40;
   }
 
   &.is-warning {
-    background-color: $ac-warning;
-    color: $ac-white;
+    background-color: $warning;
+    color: $white-100;
 
     &.is-light {
       background-color: #ffd58b42;
@@ -58,12 +58,12 @@
   }
 
   &.is-danger {
-    background-color: $ac-red;
-    color: $ac-white !important;
+    background-color: $danger;
+    color: $white-100 !important;
 
     &.is-light {
       background-color: rgba(234, 61, 47, 0.2);
-      color: $ac-red !important;
+      color: $danger !important;
     }
   }
 }
@@ -85,13 +85,13 @@
   align-items: center;
 
   li {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
     list-style: none;
     padding: 2px 10px;
     border-radius: 4px;
     font-size: 12px;
     line-height: 1;
-    border: 1px solid $ac-color-value;
+    border: 1px solid $primary-20;
     margin-right: 5px;
 
     &:last-child {
@@ -99,18 +99,18 @@
     }
 
     &.is-warning {
-      @include ac-tags($ac-yellow);
+      @include ac-tags($warning);
     }
 
     &.is-primary {
-      @include ac-tags($ac-primary);
+      @include ac-tags($primary);
     }
 
     &.is-danger {
-      @include ac-tags($ac-danger);
+      @include ac-tags($danger);
     }
     &.is-dark {
-      @include ac-tags($ac-gray-dark);
+      @include ac-tags($black-30);
     }
   }
 }

package/components/_ac-terminal.scss

@@ -1,270 +1,270 @@
-// terminal scss start
-.ac-terminal {
-  width: 100%;
+// // terminal scss start
+// .ac-terminal {
+//   width: 100%;
 
-  .terminal-body {
-    font-family: "Inconsolata", monospace;
-    background-color: var(--dark-bg-light);
-    height: 100%;
-    color: $ac-white;
+//   .terminal-body {
+//     font-family: "Inconsolata", monospace;
+//     background-color: var(--dark-bg-light);
+//     height: 100%;
+//     color: $white-100;
 
-    strong {
-      color: $ac-white;
-    }
-  }
-}
+//     strong {
+//       color: $white-100;
+//     }
+//   }
+// }
 
-.ac-terminal {
-  border-top: 1px solid var(--ac-white-light);
-  padding: 0;
-  position: fixed;
-  width: calc(100% - 270px);
-  bottom: 0;
-  background-color: $ac-white;
-  color: $ac-white;
-  font-size: 13px;
-  height: 360px;
-  z-index: 999;
-  transition: 0.3s ease-in-out;
-  &.is-collapsed {
-    height: 40px !important;
-    bottom: 0px;
-    .terminal-setting,
-    .terminal-body {
-      opacity: 0;
-      visibility: hidden;
-    }
-  }
-  .resize-handler {
-    width: 100%;
-    position: absolute;
-    background: transparent;
-    z-index: 9;
-    cursor: row-resize;
-    top: -15px;
-    &:hover {
-      border-bottom: 3px solid $ac-white-light;
-    }
-  }
-  .terminal-header {
-    border-top: 1px solid $ac-white-lighter;
-    box-shadow: 1px -2px 5px 1px rgba(0, 0, 0, 0.08%);
-    .tabs {
-      padding: 0 20px 0 20px;
-      background-color: $ac-white-lighter;
-      overflow: inherit;
-      height: 40px;
-      ul {
-        border-bottom: none;
-        padding-left: 0;
-        max-width: 1340px;
-        overflow-x: auto;
-        overflow-y: hidden;
-        li {
-          a {
-            margin-bottom: 0 !important;
-          }
-        }
-        &::-webkit-scrollbar {
-          border-radius: 50px;
-          height: 3px;
-        }
+// .ac-terminal {
+//   border-top: 1px solid var(--ac-white-light);
+//   padding: 0;
+//   position: fixed;
+//   width: calc(100% - 270px);
+//   bottom: 0;
+//   background-color: $white-100;
+//   color: $white-100;
+//   font-size: 13px;
+//   height: 360px;
+//   z-index: 999;
+//   transition: 0.3s ease-in-out;
+//   &.is-collapsed {
+//     height: 40px !important;
+//     bottom: 0px;
+//     .terminal-setting,
+//     .terminal-body {
+//       opacity: 0;
+//       visibility: hidden;
+//     }
+//   }
+//   .resize-handler {
+//     width: 100%;
+//     position: absolute;
+//     background: transparent;
+//     z-index: 9;
+//     cursor: row-resize;
+//     top: -15px;
+//     &:hover {
+//       border-bottom: 3px solid $primary-90;
+//     }
+//   }
+//   .terminal-header {
+//     border-top: 1px solid $white-100-lighter;
+//     box-shadow: 1px -2px 5px 1px rgba(0, 0, 0, 0.08%);
+//     .tabs {
+//       padding: 0 20px 0 20px;
+//       background-color: $white-100-lighter;
+//       overflow: inherit;
+//       height: 40px;
+//       ul {
+//         border-bottom: none;
+//         padding-left: 0;
+//         max-width: 1340px;
+//         overflow-x: auto;
+//         overflow-y: hidden;
+//         li {
+//           a {
+//             margin-bottom: 0 !important;
+//           }
+//         }
+//         &::-webkit-scrollbar {
+//           border-radius: 50px;
+//           height: 3px;
+//         }
 
-        &::-webkit-scrollbar:hover {
-          height: 7px;
-        }
+//         &::-webkit-scrollbar:hover {
+//           height: 7px;
+//         }
 
-        &::-webkit-scrollbar-thumb {
-          background-color: $ac-gray-light;
-          border-radius: 50px;
-          height: 2px !important;
-        }
+//         &::-webkit-scrollbar-thumb {
+//           background-color: $ac-gray-light;
+//           border-radius: 50px;
+//           height: 2px !important;
+//         }
 
-        &::-webkit-scrollbar-thumb:hover {
-          background-color: $ac-gray-light;
-        }
+//         &::-webkit-scrollbar-thumb:hover {
+//           background-color: $ac-gray-light;
+//         }
 
-        &:hover::-webkit-scrollbar-corner {
-          height: 40px;
-        }
-        .is-active {
-          box-shadow: none !important;
-          margin-right: 0 !important;
-          &:after {
-            height: 2px;
-          }
-          a {
-            background-color: $ac-white;
-          }
-        }
-        li:not(.is-active) {
-          margin-right: -1px;
-          border-right: 1px solid $ac-white-lighter;
-        }
-        li {
-          a {
-            margin-bottom: 0px;
-            font-size: 13px;
-            border-radius: 0;
-            padding: 5px 10px 5px 20px;
-            border: none;
-            height: 40px;
-            .name-of-tab {
-              width: 120px;
-              overflow: hidden;
-            }
-            .terminal-icon {
-              img {
-                width: 15px;
-                margin-right: 10px;
-                margin-top: 5px;
-              }
-            }
+//         &:hover::-webkit-scrollbar-corner {
+//           height: 40px;
+//         }
+//         .is-active {
+//           box-shadow: none !important;
+//           margin-right: 0 !important;
+//           &:after {
+//             height: 2px;
+//           }
+//           a {
+//             background-color: $white-100;
+//           }
+//         }
+//         li:not(.is-active) {
+//           margin-right: -1px;
+//           border-right: 1px solid $white-100-lighter;
+//         }
+//         li {
+//           a {
+//             margin-bottom: 0px;
+//             font-size: 13px;
+//             border-radius: 0;
+//             padding: 5px 10px 5px 20px;
+//             border: none;
+//             height: 40px;
+//             .name-of-tab {
+//               width: 120px;
+//               overflow: hidden;
+//             }
+//             .terminal-icon {
+//               img {
+//                 width: 15px;
+//                 margin-right: 10px;
+//                 margin-top: 5px;
+//               }
+//             }
 
-            .button {
-              img {
-                width: 10px;
-              }
-            }
-          }
-        }
-      }
-      .options-items {
-        top: 15px;
-        left: 40px;
-        .items-inner {
-          border: none;
-          li {
-            border: none;
-            border-right: none !important;
-            border-bottom: 1px solid $ac-white-lighter;
-            width: 100%;
-            &:last-child {
-              border-bottom: none;
-            }
-            a {
-              font-size: 13px;
-              padding: 10px 20px;
-              &:hover {
-                color: $ac-primary !important;
-              }
-            }
-          }
-        }
-      }
+//             .button {
+//               img {
+//                 width: 10px;
+//               }
+//             }
+//           }
+//         }
+//       }
+//       .options-items {
+//         top: 15px;
+//         left: 40px;
+//         .items-inner {
+//           border: none;
+//           li {
+//             border: none;
+//             border-right: none !important;
+//             border-bottom: 1px solid $white-100-lighter;
+//             width: 100%;
+//             &:last-child {
+//               border-bottom: none;
+//             }
+//             a {
+//               font-size: 13px;
+//               padding: 10px 20px;
+//               &:hover {
+//                 color: $primary !important;
+//               }
+//             }
+//           }
+//         }
+//       }
 
-      .right-control {
-        .button {
-          .fa {
-            font-size: 20px;
-          }
-          img {
-            width: 11px;
-          }
-        }
-      }
-    }
-  }
-  .terminal-setting {
-    background-color: var(--dark-bg);
-    padding: 5px 20px;
+//       .right-control {
+//         .button {
+//           .fa {
+//             font-size: 20px;
+//           }
+//           img {
+//             width: 11px;
+//           }
+//         }
+//       }
+//     }
+//   }
+//   .terminal-setting {
+//     background-color: var(--dark-bg);
+//     padding: 5px 20px;
 
-    .left-content {
-      .ac-select-box-wrapper {
-        margin-right: 10px;
-        .multi-select-wrapper {
-          min-width: 200px;
-        }
-        .multiselect .multiselect__tags .multiselect__input,
-        .multiselect .multiselect__tags .multiselect__single {
-          background-color: #3b3030;
-        }
-      }
-    }
+//     .left-content {
+//       .ac-select-box-wrapper {
+//         margin-right: 10px;
+//         .multi-select-wrapper {
+//           min-width: 200px;
+//         }
+//         .multiselect .multiselect__tags .multiselect__input,
+//         .multiselect .multiselect__tags .multiselect__single {
+//           background-color: #3b3030;
+//         }
+//       }
+//     }
 
-    .right-content {
-      .status-message {
-        background-color: #666666 !important;
-        text-align: center;
-        padding: 4px 20px;
-        border-radius: 4px;
-        color: #ffffff !important;
-        text-transform: uppercase;
-        &.is-success {
-          background-color: #27b064 !important;
-        }
-        &.is-danger {
-          background-color: $ac-red !important;
-        }
-      }
-    }
-  }
-  .terminal-body {
-    p {
-      font-family: Fira Code;
-      .code-static {
-        color: #0ff05c;
-        font-weight: 500;
-      }
+//     .right-content {
+//       .status-message {
+//         background-color: #666666 !important;
+//         text-align: center;
+//         padding: 4px 20px;
+//         border-radius: 4px;
+//         color: #ffffff !important;
+//         text-transform: uppercase;
+//         &.is-success {
+//           background-color: #27b064 !important;
+//         }
+//         &.is-danger {
+//           background-color: $danger !important;
+//         }
+//       }
+//     }
+//   }
+//   .terminal-body {
+//     p {
+//       font-family: Fira Code;
+//       .code-static {
+//         color: #0ff05c;
+//         font-weight: 500;
+//       }
 
-      .code-input {
-        color: #acd9ff;
-      }
-    }
-  }
-  .button {
-    &.is-transparent {
-      &:hover {
-        background-color: $ac-white-light;
-      }
-    }
-  }
-  .multiselect.multiselect--active {
-    .multiselect__tags {
-      border: 1px solid $ac-white !important;
-      .multiselect__input {
-        color: $ac-white !important;
-      }
-    }
-  }
-  .multiselect .multiselect__tags {
-    background-color: $ac-color-text;
-    border: 1px solid $ac-color-value;
-    span {
-      color: $ac-white;
-    }
-  }
-}
+//       .code-input {
+//         color: #acd9ff;
+//       }
+//     }
+//   }
+//   .button {
+//     &.is-transparent {
+//       &:hover {
+//         background-color: $primary-90;
+//       }
+//     }
+//   }
+//   .multiselect.multiselect--active {
+//     .multiselect__tags {
+//       border: 1px solid $white-100 !important;
+//       .multiselect__input {
+//         color: $white-100 !important;
+//       }
+//     }
+//   }
+//   .multiselect .multiselect__tags {
+//     background-color: $primary-10;
+//     border: 1px solid $primary-20;
+//     span {
+//       color: $white-100;
+//     }
+//   }
+// }
 
-// dark theme start
-.is-dark-theme {
-  // ac-terminal
-  .ac-terminal {
-    .terminal-setting {
-      --ac-color-value: var(--dark-bg-light);
+// // dark theme start
+// .is-dark-theme {
+//   // ac-terminal
+//   .ac-terminal {
+//     .terminal-setting {
+//       --ac-color-value: var(--dark-bg-light);
 
-      .left-content .ac-select-box-wrapper .multiselect .multiselect__tags {
-        .multiselect__input {
-          background-color: var(--dark-bg-light);
-          color: var(--ac-white-text);
-        }
+//       .left-content .ac-select-box-wrapper .multiselect .multiselect__tags {
+//         .multiselect__input {
+//           background-color: var(--dark-bg-light);
+//           color: var(--ac-white-text);
+//         }
 
-        .multiselect__single {
-          background-color: var(--dark-bg-light);
-          color: var(--ac-white-text);
-        }
-      }
-    }
+//         .multiselect__single {
+//           background-color: var(--dark-bg-light);
+//           color: var(--ac-white-text);
+//         }
+//       }
+//     }
 
-    .multiselect {
-      .multiselect__tags {
-        background-color: transparent;
+//     .multiselect {
+//       .multiselect__tags {
+//         background-color: transparent;
 
-        span {
-          color: var(--ac-white-text);
-        }
-      }
-    }
-  }
-}
-// dark theme end
+//         span {
+//           color: var(--ac-white-text);
+//         }
+//       }
+//     }
+//   }
+// }
+// // dark theme end

package/components/_add-card.scss

@@ -8,7 +8,7 @@
       border: none;
       height: 46px;
       width: 46px;
-      background-color: $ac-white;
+      background-color: $white-100;
       border-radius: 4px 0 0 0;
       font-size: 16px;
     }
@@ -17,13 +17,13 @@
       font-weight: 600;
       font-size: 25px;
       line-height: 29px;
-      color: $ac-color-heading;
+      color: $primary-5;
       margin-left: 20px;
     }
   }
 
   .card-body {
-    background-color: $ac-white;
+    background-color: $white-100;
     padding: 20px;
 
     .card-information {