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

package/components/_monaco-editor.scss

@@ -1,6 +1,6 @@
 .editor {
   border: none;
-  background-color: $ac-white-light !important;
+  background-color: $white-100-light !important;
 }
 
 .decorationsOverviewRuler {

package/components/_navbar.scss

@@ -1,5 +1,5 @@
 .ac-navbar-area {
-  background-color: $ac-primary;
+  background-color: $primary;
   box-shadow: $ac-shadow-3;
   position: fixed;
   width: 100%;
@@ -7,7 +7,7 @@
   z-index: 999;
 
   &.is-light {
-    background-color: $ac-white;
+    background-color: $white-100;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
 
     .ac-navbar-menu .ac-menu-item .ac-nav-button.ac-profile-button {
@@ -15,7 +15,7 @@
     }
 
     .drawer-icon svg {
-      fill: $ac-color-text !important;
+      fill: $primary-10 !important;
     }
   }
 
@@ -32,7 +32,7 @@
       .logo {
         font-size: 20px;
         font-weight: 600;
-        color: $ac-white;
+        color: $white-100;
       }
 
       img {
@@ -48,21 +48,21 @@
       border-radius: 4px;
 
       span {
-        color: $ac-white;
+        color: $white-100;
       }
 
       input {
         background-color: transparent;
         border: none;
-        color: $ac-white;
-        font-size: $font-size-small;
+        color: $white-100;
+        font-size: 13px;
         font-weight: 600;
-        font-family: $ac-family-heading;
+        font-family: $font-heading;
         width: 100%;
         padding-left: 15px;
 
         &::placeholder {
-          color: $ac-white-lighter;
+          color: $white-100-lighter;
           font-weight: 500;
         }
 
@@ -89,7 +89,7 @@
           height: 26px;
           border-radius: 50%;
           overflow: hidden;
-          border: 2px solid $ac-white;
+          border: 2px solid $white-100;
 
           &:last-child {
             margin-right: 0;
@@ -98,10 +98,10 @@
 
             .more-items {
               text-align: center;
-              color: $ac-white;
+              color: $white-100;
               z-index: 99;
               position: absolute;
-              font-size: $font-size-extra-small;
+              font-size: 12px;
               font-weight: 500;
             }
 
@@ -150,7 +150,7 @@
         &:hover {
           .ac-nav-button:not(.ac-profile-button) {
             i.fa {
-              color: $ac-white;
+              color: $white-100;
             }
           }
 
@@ -167,7 +167,7 @@
               overflow-y: auto;
               border-radius: 4px;
               left: 0;
-              background-color: $ac-white;
+              background-color: $white-100;
 
               ul {
                 li {
@@ -179,8 +179,8 @@
                   cursor: pointer;
 
                   &.is-active {
-                    color: $ac-white;
-                    background: $ac-primary;
+                    color: $white-100;
+                    background: $primary;
                   }
                 }
               }
@@ -195,7 +195,7 @@
               content: "";
               right: 15px;
               top: -6px;
-              background-color: $ac-white;
+              background-color: $white-100;
               width: 15px;
               height: 15px;
               transform: rotate(45deg);
@@ -212,12 +212,12 @@
         .ac-nav-button {
           background-color: transparent;
           border: none;
-          color: $ac-white-lighter;
+          color: $white-100-lighter;
           padding: 0 14px;
           margin-left: 15px;
 
           &.ac-profile-button {
-            color: $ac-white;
+            color: $white-100;
           }
 
           &:last-child {
@@ -230,11 +230,11 @@
             right: 5px;
             width: 15px;
             height: 15px;
-            background-color: $ac-white;
+            background-color: $white-100;
             font-size: 12px;
             line-height: 15px;
             border-radius: 50%;
-            color: $ac-primary;
+            color: $primary;
             z-index: 9;
           }
 
@@ -245,10 +245,10 @@
 
           &.ac-profile-button {
             strong {
-              color: $ac-white;
+              color: $white-100;
               margin-left: 16px;
               font-weight: 500;
-              font-size: $font-size-small;
+              font-size: 13px;
             }
 
             .ac-user-profile {
@@ -280,14 +280,14 @@
           }
 
           .user-profile-wrapper {
-            background-color: $ac-white;
+            background-color: $white-100;
             padding: 20px;
             border-radius: 4px;
 
             .profile-area {
               display: flex;
               align-items: center;
-              border-bottom: 1px solid $ac-white-light;
+              border-bottom: 1px solid $primary-90;
               padding-bottom: 10px;
               margin-bottom: 10px;
 
@@ -316,14 +316,14 @@
 
               .profile-info {
                 p {
-                  color: $ac-color-text;
-                  font-size: $font-size-small;
+                  color: $primary-10;
+                  font-size: 13px;
                   font-weight: 500;
                   line-height: 1.3;
                 }
 
                 a {
-                  font-size: $font-size-extra-small;
+                  font-size: 12px;
                   color: #74818d;
                   line-height: 1.3;
                 }
@@ -336,8 +336,8 @@
                   padding: 8px 0px;
 
                   &:hover {
-                    background-color: transparent;
-                    color: $ac-primary;
+                    // background-color: transparent;
+                    color: $primary;
                   }
                 }
               }
@@ -345,7 +345,7 @@
           }
 
           &.quick-access {
-            background-color: $ac-white;
+            background-color: $white-100;
             padding: 20px;
             min-width: 260px !important;
             max-height: 250px;
@@ -356,19 +356,19 @@
               display: flex;
               justify-content: space-between;
               align-items: center;
-              border-bottom: 1px solid $ac-white-light;
+              border-bottom: 1px solid $primary-90;
               padding-bottom: 20px;
 
               p {
-                font-size: $font-size-small;
-                color: $ac-color-text;
+                font-size: 13px;
+                color: $primary-10;
               }
 
               button {
                 background-color: transparent;
                 border: none;
                 cursor: pointer;
-                color: $ac-color-value;
+                color: $primary-20;
               }
             }
 
@@ -376,8 +376,8 @@
               margin-top: 20px;
 
               p {
-                font-size: $font-size-small;
-                color: $ac-color-text;
+                font-size: 13px;
+                color: $primary-10;
               }
 
               .organizations {
@@ -401,7 +401,7 @@
                   .remove {
                     border: none;
                     padding: 0;
-                    font-size: $font-size-tiny;
+                    font-size: 11px;
                     color: #eb5757;
                     background-color: transparent;
                   }
@@ -437,7 +437,7 @@
 
           &.is-notification {
             right: 0;
-            background-color: $ac-white;
+            background-color: $white-100;
             box-shadow: 0px 4px 8px rgba(84, 101, 126, 0.2);
             border-radius: 4px;
             min-width: 330px;
@@ -453,7 +453,7 @@
               .left-content {
                 p {
                   font-weight: 500;
-                  font-size: $font-size-small;
+                  font-size: 13px;
                   line-height: 19px;
                   margin-bottom: 15px;
 
@@ -462,7 +462,7 @@
                   }
 
                   &.date {
-                    font-size: $font-size-tiny;
+                    font-size: 11px;
                     line-height: 14px;
                     font-weight: normal;
                     margin-bottom: 0;
@@ -475,11 +475,11 @@
                   border: none;
                   margin: 0;
                   padding: 10px;
-                  font-size: $font-size-small;
+                  font-size: 13px;
 
                   &.is-active {
-                    background-color: $ac-primary;
-                    color: $ac-white;
+                    background-color: $primary;
+                    color: $white-100;
 
                     img {
                       filter: brightness(100);
@@ -487,8 +487,8 @@
                   }
 
                   &:hover {
-                    background-color: $ac-primary;
-                    color: $ac-white;
+                    background-color: $primary;
+                    color: $white-100;
 
                     img {
                       filter: brightness(100);
@@ -501,7 +501,7 @@
             .notification-body {
               .single-notification-item {
                 display: block;
-                border-top: 1px solid $ac-white-light;
+                border-top: 1px solid $primary-90;
                 padding: 15px 20px;
                 font-weight: 500;
 
@@ -514,8 +514,8 @@
                 }
 
                 p {
-                  color: $ac-color-text;
-                  font-size: $font-size-extra-small;
+                  color: $primary-10;
+                  font-size: 12px;
                 }
 
                 .notification-status {
@@ -525,19 +525,19 @@
                   justify-content: space-between;
 
                   p {
-                    font-size: $font-size-tiny;
+                    font-size: 11px;
                     color: $ac-label-text;
 
                     &.is-success {
-                      color: $ac-success;
+                      color: $success;
                     }
 
                     &.is-danger {
-                      color: $ac-danger;
+                      color: $danger;
                     }
 
                     &.is-warning {
-                      color: $ac-warning;
+                      color: $warning;
                     }
                   }
                 }
@@ -545,18 +545,18 @@
             }
 
             .see-all-message {
-              border-top: 1px solid $ac-white-light;
+              border-top: 1px solid $primary-90;
               text-align: center;
               font-weight: 500;
-              font-size: $font-size-small;
-              color: $ac-color-text;
+              font-size: 13px;
+              color: $primary-10;
               display: block;
               padding: 10px 20px;
             }
           }
 
           ul {
-            background-color: $ac-white;
+            background-color: $white-100;
             padding: 0;
             border-radius: 4px;
             overflow: hidden;
@@ -565,13 +565,13 @@
               a {
                 display: block;
                 padding: 8px 15px;
-                color: $ac-color-text;
+                color: $primary-10;
                 transition: 0.3s ease-in-out;
-                font-size: $font-size-small;
+                font-size: 13px;
 
                 &:hover {
-                  background-color: $ac-primary;
-                  color: $ac-white;
+                  background-color: $primary;
+                  color: $white-100;
                 }
               }
             }
@@ -612,10 +612,10 @@
 }
 
 .theme-choicee {
-  border: 1px solid $ac-white-light;
+  border: 1px solid $primary-90;
 
   li {
-    border-right: 1px solid $ac-white-light;
+    border-right: 1px solid $primary-90;
     cursor: pointer;
     transition: 0.3s ease-in-out;
 
@@ -628,8 +628,8 @@
     }
 
     &.is-active {
-      background-color: $ac-primary;
-      color: $ac-white;
+      background-color: $primary;
+      color: $white-100;
     }
   }
 }

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