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

package/components/_ac-input.scss

@@ -32,11 +32,11 @@
     input,
     .ac-card,
     textarea {
-      border: 1px solid $ac-primary !important;
+      border: 1px solid $primary !important;
     }
 
     p {
-      color: $ac-primary;
+      color: $primary;
     }
   }
 
@@ -44,11 +44,11 @@
     input,
     .ac-card,
     textarea {
-      border: 1px solid $ac-danger;
+      border: 1px solid $danger;
     }
 
     p {
-      color: $ac-danger;
+      color: $danger;
     }
   }
 
@@ -56,12 +56,12 @@
     input,
     .ac-card,
     textarea {
-      border: 1px solid $ac-info;
+      border: 1px solid $info;
       opacity: 0.5;
     }
 
     p {
-      color: $ac-info;
+      color: $info;
       opacity: 0.5;
     }
   }
@@ -69,10 +69,10 @@
   &.borderless-input {
     input {
       border: none;
-      font-size: $font-size-small;
+      font-size: 13px;
       padding: 4px 7px;
       height: 30px;
-      background-color: $ac-white;
+      background-color: $white-100;
       padding-right: 30px;
 
       &[type="password"] {
@@ -97,7 +97,7 @@
     input {
       height: 45px;
       font-size: 15px;
-      font-family: $ac-family-paragraph;
+      font-family: $font-paragraph;
       font-weight: 400;
     }
 
@@ -119,14 +119,14 @@
 
     label {
       top: 13px;
-      font-size: $font-size-small;
+      font-size: 13px;
 
       &.show-label {
         font-size: 12px;
-        color: $ac-color-value;
+        color: $primary-20;
         top: -9px;
         font-weight: 500;
-        background-color: $ac-white;
+        background-color: $white-100;
       }
     }
 
@@ -135,7 +135,7 @@
         .icon {
           height: 45px;
           width: 30px;
-          font-size: $font-size-small;
+          font-size: 13px;
         }
       }
     }
@@ -144,8 +144,8 @@
   &.is-small {
     input {
       height: 36px;
-      font-size: $font-size-small;
-      font-family: $ac-family-paragraph;
+      font-size: 13px;
+      font-family: $font-paragraph;
       font-weight: 400;
     }
 
@@ -168,7 +168,7 @@
 
     label {
       top: 8px;
-      font-size: $font-size-small;
+      font-size: 13px;
       &.switch-label {
         top: 0;
       }
@@ -177,7 +177,7 @@
         font-size: 12px;
         top: -9px;
         font-weight: 500;
-        color: $ac-color-value;
+        color: $primary-20;
         &.is-required {
           &:after {
             width: calc(100% + 10px);
@@ -191,7 +191,7 @@
         .icon {
           height: 36px;
           width: 25px;
-          font-size: $font-size-small;
+          font-size: 13px;
         }
       }
     }
@@ -200,8 +200,8 @@
   &.is-extra-small {
     input {
       height: 32px;
-      font-size: $font-size-small;
-      font-family: $ac-family-paragraph;
+      font-size: 13px;
+      font-family: $font-paragraph;
       font-weight: 400;
     }
 
@@ -223,7 +223,7 @@
 
     label {
       top: 8px;
-      font-size: $font-size-small;
+      font-size: 13px;
       &.switch-label {
         top: 0;
       }
@@ -239,7 +239,7 @@
         .icon {
           height: 32px;
           width: 25px;
-          font-size: $font-size-small;
+          font-size: 13px;
         }
       }
     }
@@ -251,24 +251,24 @@
 
   &.is-dark {
     input {
-      background-color: $ac-color-heading;
+      background-color: $primary-5;
       border-color: transparent;
-      color: $ac-white;
+      color: $white-100;
 
       &::placeholder {
-        color: $ac-white-light;
+        color: $primary-90;
       }
 
       button {
         i.fa {
-          color: $ac-white;
+          color: $white-100;
         }
       }
     }
   }
 
   label {
-    font-size: $font-size-small;
+    font-size: 13px;
     left: 15px;
     top: 11px;
     cursor: text;
@@ -278,7 +278,7 @@
     transition: 0.3s ease-in-out;
 
     .is-required {
-      color: $ac-danger;
+      color: $danger;
 
       img {
         position: absolute;
@@ -291,15 +291,15 @@
       top: -9px;
       left: 10px;
       padding: 0 5px;
-      font-size: $font-size-small;
-      color: $ac-color-value;
+      font-size: 13px;
+      color: $primary-20;
 
       &:after {
         position: absolute;
         content: "";
         left: 0;
         top: 50%;
-        background-color: $ac-white;
+        background-color: $white-100;
         width: 100%;
         height: 2px;
         margin-top: -1px;
@@ -348,7 +348,7 @@
 
   .ac-dropdown-content {
     position: absolute;
-    background-color: $ac-blue-light;
+    background-color: $info-light;
     width: 100%;
     height: auto;
     box-shadow: 0px 4px 16px rgba(132, 147, 168, 0.6);
@@ -358,9 +358,9 @@
     ul {
       li {
         a {
-          color: $ac-color-text;
+          color: $primary-10;
           display: block;
-          font-size: $font-size-small;
+          font-size: 13px;
           padding: 8px 20px;
           transition: 0.3s;
 
@@ -371,7 +371,7 @@
               var(--hsl-lightness),
               0.2
             );
-            color: $ac-primary;
+            color: $primary;
           }
         }
       }
@@ -397,7 +397,7 @@
 
       &:focus {
         outline: none;
-        border: 1px solid $ac-primary;
+        border: 1px solid $primary;
       }
     }
   }
@@ -405,30 +405,30 @@
   input,
   .ac-card,
   textarea {
-    background-color: $ac-white;
-    color: $ac-color-text;
+    background-color: $white-100;
+    color: $primary-10;
     height: 45px;
     font-weight: 400;
     width: 100%;
     border-radius: 4px;
     border: 1px solid $ac-label-text;
     padding: 8px 15px;
-    font-size: $font-size-small;
+    font-size: 13px;
 
     &:hover {
-      border-color: $ac-gray-lightest;
+      border-color: $black-80;
     }
 
     &.bg-white {
-      background-color: $ac-white;
+      background-color: $white-100;
     }
     &.StripeElement--focus {
-      border: 1px solid $ac-primary;
+      border: 1px solid $primary;
     }
     &:focus {
-      border: 1px solid $ac-primary;
+      border: 1px solid $primary;
       outline: none;
-      background-color: $ac-white;
+      background-color: $white-100;
     }
 
     &[type="password"] {
@@ -452,8 +452,8 @@
   }
 
   b.isRequired {
-    color: $ac-red;
-    font-size: $font-size-small;
+    color: $danger
+    font-size: 13px;
     position: absolute;
     right: 5px;
     z-index: 9;
@@ -473,7 +473,7 @@
   .is-error {
     font-size: 12px;
     line-height: 22px;
-    color: $ac-red;
+    color: $danger;
     text-align: left;
 
     i.fa {
@@ -500,20 +500,20 @@
           left: 180px;
           top: 10px;
           z-index: 1;
-          font-size: $font-size-small;
+          font-size: 13px;
           color: $ac-label-text;
           font-weight: 400;
         }
       }
 
       .file-cta {
-        background-color: $ac-primary;
+        background-color: $primary;
         margin-top: 3.5px;
         margin-left: 3px;
         height: 26px;
 
         .file-label {
-          color: $ac-white;
+          color: $white-100;
           font-weight: 400;
         }
       }
@@ -526,7 +526,7 @@
     font-weight: 400;
     border-radius: 4px;
     border: 1px solid $ac-label-text;
-    font-size: $font-size-small;
+    font-size: 13px;
 
     .file-cta {
       background-color: transparent;
@@ -534,28 +534,28 @@
     }
 
     &:hover {
-      border-color: $ac-gray-lightest;
+      border-color: $black-80;
     }
 
     &.bg-white {
-      background-color: $ac-white;
+      background-color: $white-100;
     }
 
     &:focus {
-      border: 1px solid $ac-primary;
+      border: 1px solid $primary;
       outline: none;
-      background-color: $ac-white;
+      background-color: $white-100;
     }
   }
 }
 
 input#captcha {
-  background-color: $ac-white;
+  background-color: $white-100;
   height: 36px;
   font-weight: 400;
   width: 100%;
   border-radius: 4px;
-  border: 1px solid $ac-white-light;
+  border: 1px solid $primary-90;
   padding: 8px 15px;
   font-size: 13px;
   transition: background-color 0.3s ease-in-out;
@@ -575,39 +575,39 @@ input#captcha {
   .is-checkradio[type="checkbox"].ac-checkbox + label::before {
     height: 16px;
     width: 16px;
-    background-color: $ac-white-light;
+    background-color: $primary-90;
   }
 
   .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"].ac-checkbox + label::after {
     top: 6px;
     left: 6px;
-    border-color: $ac-gray-lightest;
+    border-color: $black-80;
     width: 0.3rem;
     height: 0.5rem;
   }
 
   .is-checkradio[type="checkbox"].ac-checkbox:checked + label::after {
-    border-color: $ac-white;
+    border-color: $white-100;
   }
 
   .is-checkradio[type="checkbox"].ac-checkbox + label {
-    color: $ac-color-text;
+    color: $primary-10;
     font-size: 13px !important;
     padding-left: 25px;
     user-select: none;
   }
 
   .is-checkradio[type="checkbox"].ac-checkbox:checked + label {
-    color: $ac-primary !important;
+    color: $primary !important;
   }
 
   .is-checkradio[type="checkbox"].ac-checkbox + label {
-    color: $ac-color-text;
+    color: $primary-10;
     font-size: 13px;
     padding-left: 25px;
     user-select: none;
@@ -622,7 +622,7 @@ input#captcha {
 .ac-single-radio {
   &.is-selected {
     .is-checkradio[type="radio"].ac-radio + label {
-      color: $ac-primary;
+      color: $primary;
     }
   }
 }
@@ -638,7 +638,7 @@ input#captcha {
     user-select: none;
     font-size: 13px;
     font-weight: 400;
-    color: $ac-color-text;
+    color: $primary-10;
 
     &::before {
       background-color: #cad3df;
@@ -689,27 +689,27 @@ input#captcha {
 
     &.ac-switch {
       &.is-primary {
-        @include ac-switch($ac-primary);
+        @include ac-switch($primary);
       }
 
       &.is-link {
-        @include ac-switch($ac-blue);
+        @include ac-switch($info);
       }
 
       &.is-info {
-        @include ac-switch($ac-info);
+        @include ac-switch($info);
       }
 
       &.is-success {
-        @include ac-switch($ac-success);
+        @include ac-switch($success);
       }
 
       &.is-warning {
-        @include ac-switch($ac-warning);
+        @include ac-switch($warning);
       }
 
       &.is-danger {
-        @include ac-switch($ac-danger);
+        @include ac-switch($danger);
       }
     }
   }
@@ -738,8 +738,8 @@ input#captcha {
     background-color: transparent;
     font-size: 18px;
     font-weight: 400;
-    font-family: $ac-family-heading;
-    color: $ac-color-value;
+    font-family: $font-heading;
+    color: $primary-20;
     width: 100%;
     padding: 5px 0;
 
@@ -759,18 +759,18 @@ input#captcha {
       padding: 0.3rem 0.5rem 0.2rem 1.5rem;
 
       &::after {
-        background-color: $ac-primary;
+        background-color: $primary;
         width: 16px;
         height: 16px;
         top: 5px;
       }
 
       &:after {
-        background-color: $ac-primary;
+        background-color: $primary;
       }
 
       &:before {
-        border-color: $ac-primary;
+        border-color: $primary;
         width: 16px;
         height: 16px;
         top: 5px;
@@ -781,7 +781,7 @@ input#captcha {
       &:not([disabled]) {
         & + label {
           &:before {
-            border-color: $ac-primary !important;
+            border-color: $primary !important;
           }
         }
       }
@@ -790,7 +790,7 @@ input#captcha {
 
   .is-checkradio[type="radio"]:checked {
     & + label {
-      color: $ac-primary;
+      color: $primary;
     }
   }
 }
@@ -820,22 +820,22 @@ Responsive Classes
   .ac-single-input {
     input {
       height: 36px;
-      font-size: $font-size-small;
+      font-size: 13px;
       font-weight: 400;
     }
 
     label {
       top: 9px;
-      font-size: $font-size-small;
+      font-size: 13px;
 
       &.show-label {
         top: -9px;
-        font-size: $font-size-extra-small;
+        font-size: 12px;
       }
     }
 
     textarea {
-      font-size: $font-size-small;
+      font-size: 13px;
     }
 
     span {
@@ -854,7 +854,7 @@ Responsive Classes
   .ac-file-upload {
     label {
       height: 36px;
-      font-size: $font-size-small;
+      font-size: 13px;
     }
   }
 }

package/components/_ac-modal.scss

@@ -47,28 +47,28 @@
 
   .ac-modal-inner {
     margin: 0 auto;
-    background-color: $ac-white;
+    background-color: $white-100;
     border-radius: 4px;
     overflow: hidden;
     box-shadow: 12px 26px 118px rgba(0, 0, 0, 0.16);
 
     .ac-modal-header {
-      background-color: $ac-white;
+      background-color: $white-100;
       padding: 10px 20px;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      border: 1px solid $ac-white-light;
+      border: 1px solid $primary-90;
 
       h6 {
-        color: $ac-color-text;
+        color: $primary-10;
       }
 
       .ms-close-button {
         button {
           cursor: pointer;
           padding: 3px 5px;
-          color: $ac-color-text;
+          color: $primary-10;
         }
       }
     }
@@ -94,9 +94,9 @@
             }
 
             &.is-description {
-              font-family: $ac-family-heading;
+              font-family: $font-heading;
               font-weight: 400;
-              color: $ac-color-value;
+              color: $primary-20;
 
               strong {
                 font-weight: 500;
@@ -108,7 +108,7 @@
     }
 
     .ac-modal-footer {
-      border-top: 1px solid $ac-white-light;
+      border-top: 1px solid $primary-90;
       padding: 10px 20px;
     }
   }