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

package/components/_ac-options.scss

@@ -43,16 +43,15 @@
     border: none;
     background-color: transparent;
     transition: 0.3 ease-in-out;
-   
 
     &:hover {
-      color: $ac-primary;
+      color: $primary;
     }
 
     span {
       width: 4px;
       height: 4px;
-      background-color: $ac-color-value;
+      background-color: $primary-20;
       border-radius: 50%;
       margin-bottom: 1px;
     }
@@ -62,11 +61,11 @@
     border-radius: 4px;
     position: absolute;
     z-index: 99;
-    background-color: $ac-white;
+    background-color: $white-100;
     min-width: 160px;
     top: 30px;
     padding: 5px 0;
-    border: 1px solid $ac-white-light;
+    border: 1px solid $primary-90;
 
     li {
       .list-button {
@@ -76,14 +75,14 @@
         cursor: pointer;
         font-weight: 400;
         text-align: left;
-        color: $ac-color-value;
-        font-size: $font-size-small;
+        color: $primary-20;
+        font-size: 13px;
         padding: 10px 30px;
         display: block;
 
         &:hover {
-          background-color: $ac-bg-light-gray;
-          color: $ac-primary;
+          background-color: $black-60;
+          color: $primary;
         }
 
         span {
@@ -96,16 +95,16 @@
       }
 
       a {
-        font-size: $font-size-small;
+        font-size: 13px;
         padding: 7px 15px;
         display: block;
         text-decoration: none !important;
-        color: $ac-color-text !important;
+        color: $primary-10 !important;
         border: none;
 
         &:hover {
-          background-color: $ac-bg-light-gray;
-          color: $ac-primary !important;
+          background-color: $black-60;
+          color: $primary !important;
         }
       }
     }

package/components/_ac-select-box.scss

@@ -1,8 +1,8 @@
 .ac-select-box {
   select {
-    background-color: $ac-blue-light;
+    background-color: $info-light;
     border: 1px solid $ac-label-text;
-    font-size: $font-size-small;
+    font-size: 13px;
     height: 42px;
     padding-left: 20px;
 
@@ -11,13 +11,13 @@
     }
 
     &:hover {
-      border: 1px solid $ac-gray-lightest;
+      border: 1px solid $black-80;
     }
 
     &:focus {
       outline: none;
       box-shadow: none;
-      border: 1px solid $ac-primary;
+      border: 1px solid $primary;
     }
   }
 
@@ -43,7 +43,7 @@
     select {
       background-color: $dark-bg-light;
       color: $ac-full-white;
-      border: 1px solid $ac-white-light;
+      border: 1px solid $primary-90;
     }
   }
 }

package/components/_ac-table.scss

@@ -12,13 +12,13 @@
 
     /* Handle */
     &::-webkit-scrollbar-thumb {
-      background-color: $ac-white-light;
+      background-color: $primary-90;
       border-radius: 10px;
     }
 
     /* Handle on hover */
     &::-webkit-scrollbar-thumb:hover {
-      background-color: $ac-white-light;
+      background-color: $primary-90;
     }
   }
 }
@@ -49,8 +49,8 @@
     tr {
       td {
         border: none;
-        font-size: $font-size-small;
-        color: $ac-color-value;
+        font-size: 13px;
+        color: $primary-20;
         font-weight: 400;
         padding: 3px 0px;
         min-width: 230px;
@@ -58,7 +58,7 @@
         &:first-child {
           font-weight: 400;
           padding-right: 10px;
-          color: $ac-color-heading;
+          color: $primary-5;
         }
       }
     }
@@ -73,17 +73,17 @@
   margin-bottom: 0;
 
   thead {
-    background-color: $ac-white-lighter;
-    font-size: $font-size-small;
-    font-family: $ac-family-heading;
+    background-color: $white-100-lighter;
+    font-size: 13px;
+    font-family: $font-heading;
     line-height: initial;
 
     tr {
-      border-bottom: 1px solid $ac-white-light;
+      border-bottom: 1px solid $primary-90;
 
       th {
         padding: 6px 20px;
-        color: $ac-color-heading;
+        color: $primary-5;
         border: none;
         font-weight: 500;
 
@@ -93,13 +93,13 @@
 
           &.sorting-asc {
             &::before {
-              color: $ac-color-heading;
+              color: $primary-5;
             }
           }
 
           &.sorting-desc {
             &::after {
-              color: $ac-color-heading;
+              color: $primary-5;
             }
           }
 
@@ -130,7 +130,7 @@
   tbody {
     &.is-selected {
       transform: matrix(1, 0, 0, 1, 0, 0) !important;
-      box-shadow: inset 0 0 0 1px $ac-primary;
+      box-shadow: inset 0 0 0 1px $primary;
       border-radius: 4px;
       border-bottom: none;
       color: $ac-black;
@@ -143,13 +143,13 @@
       border-bottom: 1px solid var(--ac-white-light);
 
       td {
-        font-size: $font-size-small;
+        font-size: 13px;
         padding: 5px 20px;
-        color: $ac-color-text;
+        color: $primary-10;
         border: none;
 
         a {
-          color: $ac-color-heading;
+          color: $primary-5;
           transition: 0.3s ease-in-out;
           font-weight: 400;
         }
@@ -157,19 +157,19 @@
         .tags {
           .tag {
             a {
-              color: $ac-primary;
+              color: $primary;
               font-weight: 500;
               transition: 0.3s ease-in-out;
 
               &:hover {
-                color: $ac-color-heading;
+                color: $primary-5;
               }
             }
           }
         }
 
         &.is-error {
-          color: $ac-danger;
+          color: $danger;
         }
 
         .image-with-status {
@@ -179,14 +179,14 @@
           display: inline-flex;
 
           &.is-danger {
-            background-color: $ac-danger;
+            background-color: $danger;
           }
 
           i.fa {
             position: absolute;
-            background-color: $ac-primary;
-            color: $ac-white;
-            font-size: $font-size-tiny;
+            background-color: $primary;
+            color: $white-100;
+            font-size: 11px;
             width: 15px;
             height: 15px;
             text-align: center;
@@ -196,7 +196,7 @@
             top: 5px;
 
             &.fa-close {
-              background-color: $ac-danger;
+              background-color: $danger;
             }
           }
 
@@ -228,15 +228,15 @@
 
       .options-items {
         a:hover {
-          color: $ac-white;
+          color: $white-100;
           text-decoration: none;
         }
       }
 
       &.is-selected {
-        background-color: $ac-white !important;
+        background-color: $white-100 !important;
         transform: matrix(1, 0, 0, 1, 0, 0) !important;
-        box-shadow: inset 0 0 0 1px $ac-primary;
+        box-shadow: inset 0 0 0 1px $primary;
         border-radius: 4px;
         border-bottom: none;
         color: $ac-black;
@@ -245,7 +245,7 @@
       &.is-hoverless {
         box-shadow: none !important;
         transform: none !important;
-        background-color: $ac-white !important;
+        background-color: $white-100 !important;
       }
 
       transition: 0.3s ease-in-out;
@@ -266,7 +266,7 @@
       right: -451px;
       top: -1px;
       visibility: visible;
-      background-color: $ac-white-lighter;
+      background-color: $white-100-lighter;
     }
   }
 
@@ -282,12 +282,12 @@
     thead {
       tr {
         th {
-          border-top: 1px solid $ac-white-light;
-          border-bottom: 1px solid $ac-white-light;
-          border-right: 1px solid $ac-white-light;
+          border-top: 1px solid $primary-90;
+          border-bottom: 1px solid $primary-90;
+          border-right: 1px solid $primary-90;
 
           &:first-child {
-            border-left: 1px solid $ac-white-light;
+            border-left: 1px solid $primary-90;
           }
         }
       }
@@ -300,18 +300,18 @@
         }
 
         td {
-          font-size: $font-size-small;
-          color: $ac-color-value;
+          font-size: 13px;
+          color: $primary-20;
           background-color: transparent;
-          border-bottom: 1px solid $ac-white-light;
-          border-right: 1px solid $ac-white-light;
+          border-bottom: 1px solid $primary-90;
+          border-right: 1px solid $primary-90;
 
           &:first-child {
-            border-left: 1px solid $ac-white-light;
+            border-left: 1px solid $primary-90;
           }
 
           &:first-child {
-            color: $ac-color-heading;
+            color: $primary-5;
             border-radius: 0;
           }
 
@@ -327,32 +327,32 @@
                 &::before {
                   height: 16px;
                   width: 16px;
-                  background-color: $ac-white-light;
+                  background-color: $primary-90;
                 }
 
                 &::after {
                   top: 6px;
                   left: 6px;
-                  border-color: $ac-gray-lightest;
+                  border-color: $black-80;
                   width: 0.3rem;
                   height: 0.5rem;
                 }
               }
 
               &:checked + label::before {
-                background-color: $ac-primary;
-                border-color: $ac-primary;
+                background-color: $primary;
+                border-color: $primary;
               }
 
               &:checked + label::after {
-                border-color: $ac-white-lighter;
+                border-color: $white-100-lighter;
               }
             }
           }
 
           .is-checkradio[type="checkbox"].ac-checkbox:checked + label::before {
-            background-color: $ac-primary;
-            border-color: $ac-primary;
+            background-color: $primary;
+            border-color: $primary;
           }
 
           .is-checkradio[type="checkbox"] + label::before,
@@ -395,11 +395,11 @@
 
   &.is-dark {
     thead {
-      background-color: $ac-color-heading;
+      background-color: $primary-5;
 
       tr {
         th {
-          color: $ac-white;
+          color: $white-100;
         }
       }
     }
@@ -407,22 +407,22 @@
     tbody {
       tr {
         td {
-          color: $ac-white;
+          color: $white-100;
         }
 
         &:nth-child(odd) {
-          background-color: $ac-color-value;
+          background-color: $primary-20;
         }
 
         &:nth-child(even) {
-          background-color: $ac-color-heading;
+          background-color: $primary-5;
         }
 
         &:hover {
-          background-color: $ac-primary;
+          background-color: $primary;
 
           td {
-            color: $ac-white;
+            color: $white-100;
           }
         }
       }
@@ -432,13 +432,13 @@
 
 .table.ac-table tbody tr:hover td a:not(.tag a) {
   text-decoration: underline;
-  color: $ac-primary;
+  color: $primary;
 }
 
 // table inner shadow
 .table-inner-shadow {
   border-radius: 0px;
-  background: $ac-white-lighter;
+  background: $white-100-lighter;
   box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px #ffffff;
 }
 

package/components/_ac-tabs.scss

@@ -1,19 +1,19 @@
 .tabs {
   &.ac-tabs {
     ul {
-      border-bottom-color: $ac-white-light;
+      border-bottom-color: $primary-90;
     }
 
     &.is-line {
       ul {
-        // border-bottom-color: $ac-white-light;
+        // border-bottom-color: $primary-90;
 
         li {
           &.is-active {
             a {
               font-weight: 500;
-              border-bottom-color: $ac-primary;
-              border-bottom: 2px solid $ac-primary !important;
+              border-bottom-color: $primary;
+              border-bottom: 2px solid $primary !important;
               border-width: 2px;
             }
           }
@@ -21,13 +21,13 @@
           a {
             text-transform: uppercase;
             font-weight: 400;
-            color: $ac-color-heading;
-            font-size: $font-size-small;
+            color: $primary-5;
+            font-size: 13px;
             border-bottom: none;
             padding: 6px 20px;
 
             &:hover {
-              border-bottom-color: $ac-primary;
+              border-bottom-color: $primary;
             }
           }
         }
@@ -39,7 +39,7 @@
 
       a {
         padding: 8px 20px;
-        color: $ac-color-value;
+        color: $primary-20;
 
         &:hover {
           border-bottom-color: transparent;
@@ -53,9 +53,9 @@
         li {
           &.is-active {
             position: relative;
-            border-color: $ac-white-light;
+            border-color: $primary-90;
             z-index: 1;
-            color: $ac-primary;
+            color: $primary;
 
             &:after {
               position: absolute;
@@ -65,16 +65,16 @@
               width: 100%;
               height: 4px;
               border-radius: 4px 4px 0 0;
-              background-color: $ac-primary;
+              background-color: $primary;
             }
 
             a {
-              border-color: $ac-white-light;
-              background-color: $ac-white;
+              border-color: $primary-90;
+              background-color: $white-100;
               padding: 8px 20px;
               font-weight: 500;
               margin-bottom: -2px;
-              font-size: $font-size-small;
+              font-size: 13px;
             }
           }
         }
@@ -90,11 +90,11 @@
             }
 
             a {
-              border: 1px solid $ac-white-light;
+              border: 1px solid $primary-90;
               border-bottom: none;
               margin-bottom: -2px;
-              font-size: $font-size-small;
-              color: $ac-color-value;
+              font-size: 13px;
+              color: $primary-20;
             }
           }
         }
@@ -106,7 +106,7 @@
             li {
               &.is-active {
                 a {
-                  background-color: $ac-white-light;
+                  background-color: $primary-90;
                 }
               }
 
@@ -129,11 +129,11 @@
         li {
           &.is-active {
             a {
-              color: $ac-white;
-              background-color: $ac-primary;
+              color: $white-100;
+              background-color: $primary;
 
               &:hover {
-                background-color: $ac-primary;
+                background-color: $primary;
               }
             }
           }
@@ -160,7 +160,7 @@
         li {
           &.is-active {
             a {
-              border-bottom: 3px solid $ac-primary !important;
+              border-bottom: 3px solid $primary !important;
             }
           }
         }
@@ -178,9 +178,9 @@
         li {
           &.is-active {
             a {
-              border-color: $ac-white-light;
-              background-color: $ac-white;
-              color: $ac-primary;
+              border-color: $primary-90;
+              background-color: $white-100;
+              color: $primary;
             }
           }
         }
@@ -188,14 +188,14 @@
     }
 
     .ac-tab-content {
-      background-color: $ac-white;
-      border: 1px solid $ac-white-light;
+      background-color: $white-100;
+      border: 1px solid $primary-90;
       border-top: none;
       border-radius: 0 0 4px 4px;
 
       &.is-borderless {
         border: 1px solid transparent;
-        background-color: $ac-white-light;
+        background-color: $primary-90;
         border-radius: 4px 4px 4px 4px;
       }
     }
@@ -212,8 +212,8 @@
           li {
             &.is-active {
               a {
-                background-color: $ac-white-lighter;
-                color: $ac-primary;
+                background-color: $white-100-lighter;
+                color: $primary;
               }
             }
           }
@@ -224,7 +224,7 @@
 }
 
 .tabs li.is-active a {
-  color: $ac-primary;
+  color: $primary;
 }
 
 .no-data-available {
@@ -239,7 +239,7 @@
     position: sticky;
     top: 50px;
     z-index: 99;
-    background: $ac-white;
+    background: $white-100;
   }
 }
 
@@ -254,14 +254,14 @@
       }
     }
     a {
-      border-bottom: 1px solid $ac-white-lighter;
+      border-bottom: 1px solid $white-100-lighter;
       color: $ac-full-white;
     }
     &.ac-tabs.is-line {
       ul {
         li.is-active {
           a {
-            color: $ac-color-text;
+            color: $primary-10;
           }
         }
       }
@@ -297,8 +297,8 @@ Responsive Classes
           li {
             &.is-active {
               a {
-                border-color: $ac-white-light;
-                background-color: $ac-white;
+                border-color: $primary-90;
+                background-color: $white-100;
               }
             }
           }