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

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

package/components/_subscription-card.scss

@@ -3,8 +3,8 @@
 }
 
 .single-subscription-card {
-  border: 1px solid $ac-blue-light;
-  background-color: $ac-white;
+  border: 1px solid $info-light;
+  background-color: $white-100;
   padding: 10px;
   transition: 0.3s ease-in-out;
   border-radius: 4px;
@@ -18,13 +18,13 @@
   }
 
   &::after {
-    @include absulate-shape($ac-primary, 100%, 0px);
+    @include absulate-shape($primary, 100%, 0px);
     border-radius: 4px 4px 0 0;
   }
 
   &:hover {
     box-shadow: 0px 8px 16px rgba(111, 111, 141, 0.2);
-    background-color: $ac-white;
+    background-color: $white-100;
     border: 1px solid transparent;
 
     &::after {
@@ -34,7 +34,7 @@
 
   &.is-selected {
     box-shadow: 0px 8px 16px rgba(111, 111, 141, 0.2);
-    background-color: $ac-white;
+    background-color: $white-100;
     border: 1px solid transparent;
 
     &::after {
@@ -44,13 +44,13 @@
 
   .card-header {
     box-shadow: none;
-    border-bottom: 1px solid $ac-white-light;
+    border-bottom: 1px solid $primary-90;
     margin-bottom: 10px;
     background-color: transparent;
     padding: 0;
 
     h5 {
-      font-family: $ac-family-heading;
+      font-family: $font-heading;
       font-style: normal;
       font-weight: 600;
       font-size: 14px;
@@ -66,25 +66,25 @@
 
     ul {
       .name {
-        font-family: $ac-family-paragraph;
+        font-family: $font-paragraph;
         font-style: normal;
         font-weight: normal;
         font-size: 12px;
         line-height: 14px;
-        color: $ac-color-value;
+        color: $primary-20;
       }
 
       li {
-        font-family: $ac-family-paragraph;
+        font-family: $font-paragraph;
         font-style: normal;
         font-weight: normal;
         font-size: 14px;
         line-height: 16px;
         padding-bottom: 8px;
-        color: $ac-color-value;
+        color: $primary-20;
 
         .fa {
-          color: $ac-color-value;
+          color: $primary-20;
           margin-right: 10px;
         }
       }
@@ -99,7 +99,7 @@
     justify-content: flex-end;
 
     &::after {
-      @include absulate-shape($ac-yellow, 100%, 1px);
+      @include absulate-shape($warning, 100%, 1px);
       top: 50%;
       margin-top: -0.5px;
       z-index: -1;
@@ -111,7 +111,7 @@
       font-weight: normal;
       font-size: 12px;
       line-height: 14px;
-      color: $ac-white;
+      color: $white-100;
       padding: 5px 12px;
 
       span {

package/components/_table-of-content.scss

@@ -1,6 +1,6 @@
 .ac-accordion-wrapper {
   &.table-of-content {
-    background-color: $ac-white-light;
+    background-color: $primary-90;
     padding: 5px 15px;
     border-radius: 4px;
 
@@ -17,7 +17,7 @@
         p {
           font-style: normal;
           font-weight: 500;
-          font-size: $font-size-small;
+          font-size: 13px;
           line-height: 16px;
           cursor: pointer;
           color: $ac-link-black;
@@ -29,7 +29,7 @@
 
         button {
           color: $ac-link-black;
-          font-size: $font-size-small;
+          font-size: 13px;
         }
       }
 
@@ -45,7 +45,7 @@
 
             font-style: normal;
             font-weight: normal;
-            font-size: $font-size-small;
+            font-size: 13px;
             line-height: 16px;
             padding: 8px 0;
             color: $ac-link-black;

package/components/_tfa.scss

@@ -1,5 +1,5 @@
 .qr-code-wrapper {
-  background: $ac-blue-light;
+  background: $info-light;
   width: 240px;
   height: 240px;
   padding: 20px;
@@ -31,8 +31,8 @@
         top: 0;
         width: 20px;
         height: 20px;
-        border-top: 1px solid $ac-color-heading;
-        border-left: 1px solid $ac-color-heading;
+        border-top: 1px solid $primary-5;
+        border-left: 1px solid $primary-5;
       }
       &.shape-1:before {
         position: absolute;
@@ -41,8 +41,8 @@
         top: 0;
         width: 20px;
         height: 20px;
-        border-top: 1px solid $ac-color-heading;
-        border-right: 1px solid $ac-color-heading;
+        border-top: 1px solid $primary-5;
+        border-right: 1px solid $primary-5;
       }
       &.shape-2:after {
         position: absolute;
@@ -51,8 +51,8 @@
         bottom: 0;
         width: 20px;
         height: 20px;
-        border-bottom: 1px solid $ac-color-heading;
-        border-left: 1px solid $ac-color-heading;
+        border-bottom: 1px solid $primary-5;
+        border-left: 1px solid $primary-5;
       }
       &.shape-2:before {
         position: absolute;
@@ -61,8 +61,8 @@
         bottom: 0;
         width: 20px;
         height: 20px;
-        border-bottom: 1px solid $ac-color-heading;
-        border-right: 1px solid $ac-color-heading;
+        border-bottom: 1px solid $primary-5;
+        border-right: 1px solid $primary-5;
       }
     }
   }