@appscode/design-system 1.0.43-alpha.12 → 1.0.43-alpha.16

package/components/_ac-card.scss

@@ -9,7 +9,7 @@
   padding: 20px;
   border-radius: 4px;
   overflow: hidden;
-  background-color: $ac-white;
+  background-color: $ac-input-bg-color;
   transition: 0.3s ease-in-out;
 
   &.is-selected {
@@ -36,7 +36,7 @@
         .card-status {
           position: absolute;
           content: "";
-          background: #27ae60;
+          background-color: #27ae60;
           border: 2px solid $ac-white;
           box-sizing: border-box;
           box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
@@ -92,7 +92,7 @@
     .ac-card-name {
       p {
         font-size: $font-size-small;
-        color: $ac-link-black;
+        color: $ac-color-text;
         line-height: 1;
 
         &.free {
@@ -112,7 +112,7 @@
       justify-content: space-between;
       align-items: center;
       box-shadow: none;
-      background: transparent;
+      background-color: transparent;
       margin-bottom: 60px;
 
       h3 {
@@ -201,14 +201,14 @@
 
       p {
         font-size: $font-size-small;
-        color: $ac-border-hover;
+        color: $ac-gray-lightest;
       }
     }
   }
 
   .ac-card-body {
     p {
-      color: $ac-border-hover;
+      color: $ac-gray-dark;
       font-size: $font-size-small;
       line-height: 140%;
     }
@@ -222,7 +222,7 @@
   .card-status {
     position: absolute;
     content: "";
-    background: #27ae60;
+    background-color: #27ae60;
     border: 2px solid $ac-white;
     box-sizing: border-box;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
@@ -236,7 +236,7 @@
 // offer card scss start
 .pricing-card-wrpper {
   &.offer-card {
-    background: #fafafa;
+    background-color: #fafafa;
     border: 1px solid $ac-white-light;
     border-radius: 4px;
     display: flex;
@@ -245,7 +245,7 @@
 
     &:after {
       @include absulate-shape($ac-primary, 100%, 4px);
-      background-color: linear-gradient(90deg, #f99a00 0%, #3f19ad 98.84%);
+      background: linear-gradient(90deg, #f99a00 0%, #3f19ad 98.84%);
     }
 
     .offer-highlight {
@@ -342,12 +342,12 @@
 
         a.inline-button {
           font-size: 12px;
-          color: $ac-link-black;
+          color: $ac-color-text;
           text-decoration: underline;
         }
 
         span {
-          color: $ac-link-black;
+          color: $ac-color-text;
           font-size: 12px;
           font-weight: 600;
         }
@@ -355,7 +355,7 @@
         p {
           font-weight: 500;
           font-size: $font-size-small;
-          color: $ac-link-black;
+          color: $ac-color-text;
 
           span {
             font-size: 12px;
@@ -374,7 +374,7 @@
     letter-spacing: 0;
     font-size: 12px;
     border: none;
-    background: #f99a00;
+    background-color: #f99a00;
     /* Old browsers */
     background: -moz-linear-gradient(left, #f99a00 0%, #3f19ad 100%);
     /* FF3.6-15 */
@@ -407,7 +407,7 @@
     }
 
     &.style-three {
-      background: #fafafa;
+      background-color: #fafafa;
       width: 183px;
       padding: 15px 15px 20px;
       height: 115px;
@@ -431,7 +431,7 @@
           font-size: 12px;
           line-height: 14px;
           text-align: center;
-          color: $ac-link-black;
+          color: $ac-color-text;
         }
       }
     }
@@ -482,7 +482,7 @@
       font-weight: 500;
       font-size: $font-size-small;
       line-height: 16px;
-      color: $ac-link-black;
+      color: $ac-color-text;
       margin-bottom: 10px;
     }
   }

package/components/_ac-code-highlight.scss

@@ -1,6 +1,8 @@
 .ac-code-highlight {
   pre {
     font-size: $font-size-small;
+    color: $ac-color-text;
+    background-color: $ac-white-lighter;
   }
   &.is-dark {
     pre {

package/components/_ac-content-layout.scss

@@ -1,5 +1,5 @@
 .ac-content-layout {
-  background: transparent;
+  background-color: transparent;
   padding: 0;
   border-radius: 0;
   height: 100%;
@@ -12,7 +12,7 @@
     border-radius: 4px;
 
     .ac-content-header {
-      background: $table-header;
+      background-color: $table-header;
 
       &.is-bg-white {
         .ac-cheader-left {
@@ -36,7 +36,7 @@
   }
 
   &.is-dark {
-    background-color: $ac-bg-dark;
+    background-color: $ac-color-heading;
 
     .ac-content-header {
       &.drag-n-drop {

package/components/_ac-drag.scss

@@ -19,13 +19,13 @@
   }
 
   .dragable-list-items {
-    background: $ac-bg-light-gray;
+    background-color: $ac-white-lighter;
     border-radius: 4px;
     max-height: 400px;
 
     .is-highlight {
       background-color: $ac-white;
-      border: 1px dashed $ac-border-hover;
+      border: 1px dashed $ac-gray-lightest;
       border-radius: 4px;
       margin: 4px 0;
       overflow: hidden;
@@ -36,7 +36,7 @@
         padding-left: 40px;
 
         &.is-not-change {
-          background-color: $ac-bg-light-gray;
+          background-color: $ac-white-lighter;
           margin-left: -40px !important;
           padding-left: 80px;
         }
@@ -66,7 +66,7 @@
             margin-left: -35px;
 
             &:hover {
-              background: $ac-white;
+              background-color: $ac-white;
               box-shadow: $ac-shadow-1;
               cursor: move;
 
@@ -82,7 +82,7 @@
             }
 
             input[type="text"] {
-              background: $ac-white-light;
+              background-color: $ac-white-light;
               border: none;
               font-weight: 500;
               padding: 4px 5px;
@@ -113,7 +113,7 @@
 
                 button {
                   border: none;
-                  background: transparent;
+                  background-color: transparent;
                   display: block;
                   cursor: pointer;
                   padding: 0 5px;

package/components/_ac-input.scss

@@ -72,7 +72,7 @@
       font-size: $font-size-small;
       padding: 4px 7px;
       height: 30px;
-      background: $ac-white;
+      background-color: $ac-white;
       padding-right: 30px;
 
       &[type="password"] {
@@ -242,7 +242,7 @@
 
   &.is-dark {
     input {
-      background: $ac-bg-dark;
+      background-color: $ac-color-heading;
       border-color: transparent;
       color: $ac-white;
 
@@ -290,7 +290,7 @@
         content: "";
         left: 0;
         top: 50%;
-        background: $ac-white;
+        background-color: $ac-white;
         width: 100%;
         height: 2px;
         margin-top: -1px;
@@ -307,7 +307,7 @@
 
   .button {
     &.is-information {
-      background: transparent;
+      background-color: transparent;
       border: none;
       position: absolute;
       right: 0;
@@ -318,14 +318,14 @@
       &:focus {
         outline: none;
         box-shadow: none;
-        background: #e4e8ef;
+        background-color: #e4e8ef;
         transform: scale(0.8);
       }
     }
   }
 
   .ac-search-button {
-    background: transparent;
+    background-color: transparent;
     border: none;
     position: absolute;
     left: 0;
@@ -339,7 +339,7 @@
 
   .ac-dropdown-content {
     position: absolute;
-    background: $ac-input-bg-color;
+    background-color: $ac-input-bg-color;
     width: 100%;
     height: auto;
     box-shadow: 0px 4px 16px rgba(132, 147, 168, 0.6);
@@ -356,7 +356,7 @@
           transition: 0.3s;
 
           &:hover {
-            background: hsla(
+            background-color: hsla(
               var(--hsl-hue),
               var(--hsl-saturation),
               var(--hsl-lightness),
@@ -397,6 +397,7 @@
   .ac-card,
   textarea {
     background-color: $ac-white;
+    color: $ac-color-text;
     height: 45px;
     font-weight: 400;
     width: 100%;
@@ -406,7 +407,7 @@
     font-size: $font-size-small;
 
     &:hover {
-      border-color: $ac-border-hover;
+      border-color: $ac-gray-lightest;
     }
 
     &.bg-white {
@@ -508,7 +509,7 @@
   }
 
   label {
-    background-color: $ac-input-bg-color;
+    background-color: transparent;
     height: 36px;
     font-weight: 400;
     border-radius: 4px;
@@ -521,7 +522,7 @@
     }
 
     &:hover {
-      border-color: $ac-border-hover;
+      border-color: $ac-gray-lightest;
     }
 
     &.bg-white {
@@ -537,12 +538,12 @@
 }
 
 input#captcha {
-  background-color: #ffffff;
+  background-color: $ac-white;
   height: 36px;
   font-weight: 400;
   width: 100%;
   border-radius: 4px;
-  border: 1px solid #a6abbd;
+  border: 1px solid $ac-white-light;
   padding: 8px 15px;
   font-size: 13px;
   transition: background-color 0.3s ease-in-out;
@@ -573,7 +574,7 @@ input#captcha {
   .is-checkradio[type="checkbox"].ac-checkbox + label::after {
     top: 6px;
     left: 6px;
-    border-color: #54657e;
+    border-color: $ac-gray-lightest;
     width: 0.3rem;
     height: 0.5rem;
   }
@@ -583,7 +584,7 @@ input#captcha {
   }
 
   .is-checkradio[type="checkbox"].ac-checkbox + label {
-    color: $ac-link-black;
+    color: $ac-color-text;
     font-size: 13px !important;
     padding-left: 25px;
     user-select: none;
@@ -594,7 +595,7 @@ input#captcha {
   }
 
   .is-checkradio[type="checkbox"].ac-checkbox + label {
-    color: $ac-link-black;
+    color: $ac-color-text;
     font-size: 13px;
     padding-left: 25px;
     user-select: none;
@@ -625,6 +626,7 @@ input#captcha {
     user-select: none;
     font-size: 13px;
     font-weight: 400;
+    color: $ac-color-text;
 
     &::before {
       background-color: #cad3df;
@@ -709,11 +711,11 @@ input#captcha {
 
   input {
     border: none;
-    background: transparent;
+    background-color: transparent;
     font-size: 18px;
     font-weight: 400;
     font-family: $ac-family-heading;
-    color: #333;
+    color: $ac-color-value;
     width: 100%;
     padding: 5px 0;
 

package/components/_ac-modal.scss

@@ -15,7 +15,7 @@
     top: 0;
     width: 100%;
     height: 100%;
-    background: #000;
+    background-color: $ac-black;
     z-index: -1;
     opacity: 0.5;
   }
@@ -47,13 +47,13 @@
 
   .ac-modal-inner {
     margin: 0 auto;
-    background: $ac-white;
+    background-color: $ac-white;
     border-radius: 4px;
     overflow: hidden;
     box-shadow: 12px 26px 118px rgba(0, 0, 0, 0.16);
 
     .ac-modal-header {
-      background: $ac-white;
+      background-color: $ac-white;
       padding: 10px 20px;
       display: flex;
       align-items: center;
@@ -96,6 +96,7 @@
             &.is-description {
               font-family: $ac-family-heading;
               font-weight: 400;
+              color: $ac-color-value;
 
               strong {
                 font-weight: 500;
@@ -107,7 +108,7 @@
     }
 
     .ac-modal-footer {
-      border-top: 1px solid $ac-modal-header-bg;
+      border-top: 1px solid $ac-white-light;
       padding: 10px 20px;
     }
   }

package/components/_ac-multi-select.scss

@@ -35,7 +35,7 @@
     }
 
     .multiselect__tag {
-      background-color: $ac-border-hover;
+      background-color: $ac-gray-lightest;
       margin-top: 4px;
       margin-bottom: 0;
 
@@ -155,7 +155,7 @@
       &:after {
         position: inherit !important;
         content: "" !important;
-        background: transparent;
+        background-color: transparent;
       }
     }
   }
@@ -216,7 +216,7 @@
         font-size: $font-size-extra-small;
         top: -9px;
         font-weight: 500;
-        color: #000;
+        color: $ac-black;
       }
     }
 
@@ -384,7 +384,7 @@
   .multiselect__select {
     height: calc(100% - 2px);
     border-radius: 0 4px 4px 0;
-    background: transparent !important;
+    background-color: transparent !important;
   }
 
   label {
@@ -410,10 +410,10 @@
       left: 15px;
       padding: 0 5px;
       font-size: $font-size-small;
-      color: #000;
+      color: $ac-black;
 
       &::after {
-        background: $ac-white;
+        background-color: $ac-white;
       }
     }
 
@@ -422,7 +422,7 @@
       content: "";
       left: 0;
       top: 50%;
-      background: $ac-white;
+      background-color: $ac-white;
       width: 100%;
       height: 2px;
       margin-top: -1px;
@@ -468,7 +468,7 @@ li {
 
   .button {
     &.is-information {
-      background: transparent;
+      background-color: transparent;
       border: none;
       position: absolute;
       right: 0;
@@ -480,7 +480,7 @@ li {
       &:focus {
         outline: none;
         box-shadow: none;
-        background: #e4e8ef;
+        background-color: #e4e8ef;
         transform: scale(0.8);
       }
     }

package/components/_ac-options.scss

@@ -39,7 +39,7 @@
     cursor: pointer;
     align-items: flex-start;
     border: none;
-    background: transparent;
+    background-color: transparent;
     transition: 0.3 ease-in-out;
 
     &:hover {
@@ -49,7 +49,7 @@
     span {
       width: 5px;
       height: 5px;
-      background: #333;
+      background-color: $ac-color-value;
       border-radius: 50%;
       margin-bottom: 2px;
     }
@@ -60,30 +60,30 @@
     border-radius: 4px;
     position: absolute;
     z-index: 99;
-    background: $ac-white;
+    background-color: $ac-white;
     min-width: 160px;
     top: 30px;
 
     li {
       .list-button {
         width: 100%;
-        background: transparent;
+        background-color: transparent;
         border: none;
         cursor: pointer;
         font-weight: 400;
         text-align: left;
-        color: #333;
+        color: $ac-color-value;
         font-size: $font-size-small;
         padding: 10px 30px;
         display: block;
 
         &:hover {
-          background: $ac-primary;
+          background-color: $ac-primary;
           color: $ac-white;
         }
 
         span {
-          background: transparent;
+          background-color: transparent;
 
           &.icon {
             margin-right: 5px;
@@ -96,7 +96,7 @@
         padding: 10px 30px;
         display: block;
         text-decoration: none !important;
-        color: #333 !important;
+        color: $ac-color-text !important;
 
         &:hover {
           background-color: $ac-primary;

package/components/_ac-select-box.scss

@@ -1,6 +1,6 @@
 .ac-select-box {
   select {
-    background: $ac-input-bg-color;
+    background-color: $ac-input-bg-color;
     border: 1px solid $ac-border;
     font-size: $font-size-small;
     height: 42px;
@@ -11,7 +11,7 @@
     }
 
     &:hover {
-      border: 1px solid $ac-border-hover;
+      border: 1px solid $ac-gray-lightest;
     }
 
     &:focus {