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

package/components/_wizard.scss

@@ -1,17 +1,17 @@
 .single-wizard-section {
   padding: 20px;
-  background-color: $ac-white;
-  border: 1px solid $ac-white-light;
+  background-color: $white-100;
+  border: 1px solid $primary-90;
   border-radius: 4px;
 }
 
 .wizard-description {
-  font-family: $ac-family-paragraph;
+  font-family: $font-paragraph;
   font-style: normal;
   font-weight: normal;
-  font-size: $font-size-small;
+  font-size: 13px;
   line-height: 100%;
-  color: $ac-color-text;
+  color: $primary-10;
   margin-bottom: 10px;
 }
 
@@ -80,12 +80,12 @@
   }
 
   strong {
-    font-family: $ac-family-paragraph;
+    font-family: $font-paragraph;
     font-style: normal;
     font-weight: 500;
-    font-size: $font-size-small;
+    font-size: 13px;
     line-height: 16px;
-    color: $ac-color-text;
+    color: $primary-10;
     margin-right: 16px;
   }
 }
@@ -114,8 +114,8 @@
 .card-select {
   height: 94px;
   padding: 10px;
-  background-color: $ac-white;
-  border: 1px solid $ac-white-light;
+  background-color: $white-100;
+  border: 1px solid $primary-90;
   box-sizing: border-box;
   border-radius: 4px;
   transition: 0.3s ease-in-out;
@@ -162,16 +162,16 @@
       border: none;
 
       label {
-        color: $ac-primary !important;
+        color: $primary !important;
       }
     }
 
     .ac-single-radio,
     .ac-single-checkbox {
       label {
-        font-size: $font-size-small;
+        font-size: 13px;
         line-height: 20px;
-        color: $ac-color-heading;
+        color: $primary-5;
         padding-left: 25px !important;
       }
 
@@ -192,13 +192,13 @@
       background-color: transparent;
 
       label {
-        color: $ac-color-text;
+        color: $primary-10;
         cursor: not-allowed;
       }
     }
 
     .ac-single-radio .is-checkradio[type="radio"]:checked + label {
-      color: $ac-primary;
+      color: $primary;
     }
 
     .ac-single-radio {
@@ -207,7 +207,7 @@
   }
 
   &.is-disabled {
-    background-color: $ac-white-lighter;
+    background-color: $white-100-lighter;
     cursor: not-allowed;
     opacity: 0.8;
 
@@ -223,7 +223,7 @@
   }
 
   &.is-selected {
-    border: 1px solid $ac-primary;
+    border: 1px solid $primary;
   }
 
   &:last-child {
@@ -269,7 +269,7 @@
     z-index: 2;
     right: 10px;
     top: 10px;
-    background-color: $ac-white;
+    background-color: $white-100;
     box-shadow: $ac-shadow-2;
     display: inline-block;
     border-radius: 4px;
@@ -283,22 +283,22 @@
       position: absolute;
       right: -5px;
       top: -5px;
-      border: 1px solid $ac-gray-lightest;
+      border: 1px solid $black-80;
       font-size: 10px;
       height: 25px;
       width: 25px;
       text-align: center;
-      background-color: $ac-white;
+      background-color: $white-100;
       border-radius: 50%;
       cursor: pointer;
-      color: $ac-danger;
+      color: $danger;
       transition: 0.3s ease-in-out;
       display: block;
 
       &:hover {
-        color: $ac-white;
-        background-color: $ac-danger;
-        border: 1px solid $ac-danger;
+        color: $white-100;
+        background-color: $danger;
+        border: 1px solid $danger;
       }
     }
 
@@ -308,13 +308,13 @@
       a {
         display: block;
         padding: 5px 10px 5px 0;
-        color: $ac-color-value;
-        font-size: $font-size-tiny;
+        color: $primary-20;
+        font-size: 11px;
         text-decoration: underline;
         font-weight: 400;
 
         &:hover {
-          color: $ac-primary;
+          color: $primary;
         }
       }
     }
@@ -330,25 +330,25 @@
     }
 
     label {
-      font-family: $ac-family-heading;
+      font-family: $font-heading;
       font-style: normal;
       font-weight: 500;
-      font-size: $font-size-small;
+      font-size: 13px;
       line-height: 24px;
-      color: $ac-color-heading;
+      color: $primary-5;
     }
   }
 
   p {
-    font-family: $ac-family-paragraph;
+    font-family: $font-paragraph;
     font-style: normal;
     font-weight: normal;
-    font-size: $font-size-small;
+    font-size: 13px;
     line-height: 140%;
-    color: $ac-color-text;
+    color: $primary-10;
 
     &.is-warning {
-      color: $ac-danger;
+      color: $danger;
     }
 
     a {
@@ -377,12 +377,12 @@
   .ac-single-checkbox {
     .is-checkradio[type="checkbox"] {
       &.ac-checkbox + label {
-        font-family: $ac-family-heading;
+        font-family: $font-heading;
         font-style: normal;
         font-weight: 500;
         font-size: 13px;
         line-height: 20px;
-        color: $ac-color-heading;
+        color: $primary-5;
       }
     }
   }
@@ -400,12 +400,12 @@
 
   .state-left {
     h5 {
-      font-family: $ac-family-paragraph;
+      font-family: $font-paragraph;
       font-style: normal;
       font-weight: 500;
-      font-size: $font-size-normal;
+      font-size: 14px;
       line-height: 19px;
-      color: $ac-color-text;
+      color: $primary-10;
     }
 
     img {
@@ -449,7 +449,7 @@
 // final state end
 
 .circle-list-shape {
-  border: 3px solid $ac-color-text;
+  border: 3px solid $primary-10;
   border-radius: 50%;
   width: 10px;
   height: 10px;
@@ -460,12 +460,12 @@
 .ac-selected-item {
   .selected-left {
     .item-name {
-      font-family: $ac-family-paragraph;
+      font-family: $font-paragraph;
       font-style: normal;
       font-weight: 500;
-      font-size: $font-size-small;
+      font-size: 13px;
       line-height: 16px;
-      color: $ac-color-text;
+      color: $primary-10;
     }
 
     button {
@@ -502,11 +502,11 @@
 .ac-certificate-area {
   box-shadow: $ac-shadow-1;
   border-radius: 4px;
-  background-color: $ac-white;
+  background-color: $white-100;
 
   .list-items {
     padding: 10px;
-    border-bottom: 1px solid $ac-white-light;
+    border-bottom: 1px solid $primary-90;
 
     &:last-child {
       border-bottom: none;
@@ -519,18 +519,18 @@
 
       li {
         font-weight: 500;
-        color: $ac-color-heading;
+        color: $primary-5;
       }
     }
 
     li {
       width: 20%;
-      font-family: $ac-family-paragraph;
+      font-family: $font-paragraph;
       font-style: normal;
       font-weight: normal;
-      font-size: $font-size-small;
+      font-size: 13px;
       line-height: 16px;
-      color: $ac-color-text;
+      color: $primary-10;
       display: flex;
       align-items: center;
 
@@ -543,7 +543,7 @@
 
 .ac-certificate-info {
   padding: 10px 15px;
-  background-color: $ac-bg-light-gray;
+  background-color: $black-60;
   border-radius: 4px;
 
   .single-name-title {
@@ -559,13 +559,13 @@
     }
 
     label:not(.wizard-title) {
-      font-family: $ac-family-paragraph;
+      font-family: $font-paragraph;
       font-style: normal;
       font-weight: normal;
-      font-size: $font-size-small;
+      font-size: 13px;
       line-height: 18px;
       display: block;
-      color: $ac-color-text;
+      color: $primary-10;
       margin-bottom: 5px;
     }
   }
@@ -578,16 +578,16 @@
   }
 
   button.button.ac-button.is-square.is-white {
-    background-color: $ac-white;
+    background-color: $white-100;
 
     &:hover {
-      background-color: $ac-white-light;
+      background-color: $primary-90;
     }
   }
 
   .line-title {
     span {
-      background-color: $ac-bg-light-gray;
+      background-color: $black-60;
     }
   }
 }
@@ -603,17 +603,17 @@
     }
 
     strong {
-      font-family: $ac-family-paragraph;
+      font-family: $font-paragraph;
       font-style: normal;
       font-weight: 500;
-      font-size: $font-size-small;
+      font-size: 13px;
       line-height: 16px;
       display: flex;
       align-items: center;
 
       /* Gray 1 */
 
-      color: $ac-color-text;
+      color: $primary-10;
     }
   }
 }
@@ -640,7 +640,7 @@ label {
       display: block;
 
       span {
-        background-color: $ac-white;
+        background-color: $white-100;
         padding-right: 8px;
       }
 
@@ -652,18 +652,18 @@ label {
         margin-top: -0.5px;
         width: 100%;
         height: 1px;
-        background-color: $ac-blue-light;
+        background-color: $info-light;
         z-index: -1;
       }
     }
 
     span.inline-description {
-      font-family: $ac-family-paragraph;
+      font-family: $font-paragraph;
       font-style: normal;
       font-weight: normal;
-      font-size: $font-size-extra-small;
+      font-size: 12px;
       line-height: 160%;
-      color: $ac-color-text;
+      color: $primary-10;
       transform: translate(5px, -2px);
       display: inline-block;
     }
@@ -718,7 +718,7 @@ button {
 
 h5 {
   &.wizard-title {
-    color: $ac-color-text;
+    color: $primary-10;
 
     .is-required {
       transform: translateY(-2px);
@@ -743,10 +743,10 @@ h5 {
 
   h5 {
     margin-bottom: 10px;
-    font-family: $ac-family-paragraph;
+    font-family: $font-paragraph;
     font-style: normal;
     font-weight: 500;
-    color: $ac-color-heading;
+    color: $primary-5;
   }
 }
 
@@ -754,30 +754,30 @@ h5 {
 
 // Wizard Notification Area Start
 .wizard-notification-area {
-  background-color: $ac-gray-lightest;
+  background-color: $black-80;
   border-radius: 10px;
   padding: 10px;
   width: 100%;
 
   p {
-    font-family: $ac-family-paragraph;
+    font-family: $font-paragraph;
     font-style: normal;
-    font-size: $font-size-small;
+    font-size: 13px;
     line-height: 18px;
-    color: $ac-white;
+    color: $white-100;
     font-weight: 400;
 
     b {
       font-weight: 500;
 
       &.star-dots {
-        font-family: $ac-family-paragraph;
+        font-family: $font-paragraph;
         font-style: normal;
         font-weight: bold;
         font-size: 20px;
         line-height: 23px;
         letter-spacing: 8px;
-        color: $ac-white;
+        color: $white-100;
         margin-top: 10px;
         display: block;
       }
@@ -796,29 +796,29 @@ h5 {
   }
 
   .ac-counter {
-    border: 1px solid $ac-white-light;
+    border: 1px solid $primary-90;
     padding: 10px 5px;
     height: 40px;
     width: 60px;
     background-color: transparent;
     border-radius: 4px;
     text-align: center;
-    font-family: $ac-family-paragraph;
+    font-family: $font-paragraph;
     font-weight: 500;
-    font-size: $font-size-small;
+    font-size: 13px;
     line-height: 19px;
-    color: $ac-color-text;
+    color: $primary-10;
     margin: 0 10px 10px 0;
 
     &:focus {
       outline: none;
-      border: 1px solid $ac-primary;
+      border: 1px solid $primary;
     }
 
     &.is-selected {
-      border: 1px solid $ac-primary;
-      background-color: $ac-primary;
-      color: $ac-white;
+      border: 1px solid $primary;
+      background-color: $primary;
+      color: $white-100;
     }
   }
 }
@@ -828,7 +828,7 @@ h5 {
 // dark theme start
 .is-dark-theme {
   h6.wizard-title.has-line:after {
-    --ac-blue-light: $ac-color-value;
+    --ac-blue-light: $primary-20;
   }
 
   .ac-certificate-info {

package/components/ac-toaster/_ac-toasted.scss

@@ -10,7 +10,7 @@
   border-radius: 4px !important;
 
   * {
-    color: $ac-white !important;
+    color: $white-100 !important;
   }
 
   p {

package/components/bbum/_activities-header.scss

@@ -8,7 +8,7 @@
     h3 {
       font-size: 16px;
       line-height: 26px;
-      font-family: $ac-family-paragraph;
+      font-family: $font-paragraph;
     }
 
     button {

package/components/bbum/_card-team.scss

@@ -1,5 +1,5 @@
 .single-team-card {
-  border: 1px solid $ac-white-light;
+  border: 1px solid $primary-90;
   background-color: hsla(
     var(--hsl-hue),
     var(--hsl-saturation),
@@ -12,8 +12,8 @@
 
   &:hover {
     // box-shadow: $ac-shadow-1;
-    border: 1px solid $ac-primary;
-    background-color: $ac-white;
+    border: 1px solid $primary;
+    background-color: $white-100;
   }
 
   .card-header {
@@ -21,11 +21,11 @@
     align-items: center;
     justify-content: space-between;
     padding: 15px 20px;
-    border-bottom: 1px solid $ac-white-light;
+    border-bottom: 1px solid $primary-90;
     box-shadow: none;
 
     strong {
-      font-size: $font-size-medium;
+      font-size: 16px;
       line-height: 1.2;
       color: #1c2d41;
     }
@@ -59,8 +59,8 @@
             height: 30px;
             border-radius: 50%;
             overflow: hidden;
-            border: 2px solid $ac-white;
-            background-color: $ac-white;
+            border: 2px solid $white-100;
+            background-color: $white-100;
 
             img {
               width: 100%;
@@ -71,15 +71,15 @@
 
       a {
         display: block;
-        font-size: $font-size-tiny;
+        font-size: 11px;
         font-weight: 500;
         margin-bottom: 20px;
       }
     }
 
     .meta {
-      font-size: $font-size-small;
-      color: $ac-color-value;
+      font-size: 13px;
+      color: $primary-20;
       margin-bottom: 20px;
     }
 
@@ -92,8 +92,8 @@
         &:not(:first-child) {
           list-style: disc;
         }
-        font-size: $font-size-small;
-        color: $ac-color-value;
+        font-size: 13px;
+        color: $primary-20;
       }
     }
   }

package/components/bbum/_information-center.scss

@@ -1,23 +1,23 @@
 .information-center {
   .information-center-inner {
-    background-color: $ac-white;
+    background-color: $white-100;
     position: sticky;
     top: 50px;
     height: calc(100vh - 50px);
-    border-left: 1px solid $ac-white-light;
+    border-left: 1px solid $primary-90;
 
     .info-title {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 15px;
-      border-bottom: 1px solid $ac-white-light;
+      border-bottom: 1px solid $primary-90;
       height: 50px;
       padding: 0 20px;
 
       h3 {
         font-size: 16px;
-        font-family: $ac-family-paragraph;
+        font-family: $font-paragraph;
         line-height: 24px;
       }
     }
@@ -53,17 +53,17 @@
       p {
         font-size: 12px;
         line-height: 160%;
-        color: $ac-color-text;
+        color: $primary-10;
       }
 
       hr {
-        background-color: $ac-white-light;
+        background-color: $primary-90;
       }
 
       h3 {
         font-size: 16px;
         line-height: 26px;
-        font-family: $ac-family-paragraph;
+        font-family: $font-paragraph;
       }
 
       .video-thambnail {
@@ -72,7 +72,7 @@
         height: 160px;
         background-size: cover;
         background-position: center;
-        background-color: $ac-gray-lightest;
+        background-color: $black-80;
         position: relative;
         z-index: 1;
 
@@ -119,21 +119,21 @@
           button {
             background-color: transparent;
             padding: 10px;
-            color: $ac-white;
+            color: $white-100;
             border: none;
             cursor: pointer;
             font-size: 16px;
             transition: 0.3s;
 
             &:hover {
-              color: $ac-gray-lightest;
+              color: $black-80;
             }
           }
         }
       }
 
       .block-list {
-        background-color: $ac-blue-light;
+        background-color: $info-light;
         padding: 7px;
         border-radius: 4px;
 
@@ -151,7 +151,7 @@
 
         li {
           font-size: 12px;
-          color: $ac-color-text;
+          color: $primary-10;
           display: block;
           padding: 3px 0;
 
@@ -162,7 +162,7 @@
             left: 0;
             padding-right: 8px;
             margin-top: -3px;
-            color: $ac-color-text;
+            color: $primary-10;
           }
         }
       }