vcomply-design-system 1.2.2 → 1.2.3

package/css-build/less/color/color.less

@@ -1,613 +1,801 @@
-@import url('../mixin/mixin.less');
+@import url("../mixin/mixin.less");
 
 // Text Color
 .vx-txt-red {
-    color: @error;
+  color: @error;
 }
 
 .vx-txt-blue {
-    color: @primaryBlue;
+  color: @primaryBlue;
 }
 
 .vx-txt-white {
-    color: @white;
+  color: @white;
 }
 
 .vx-paragraph-txt {
-    color: @lightText;
+  color: @lightText;
 }
 
 .vx-label-txt {
-    color: @darkText;
+  color: @darkText;
 }
 
 // Background
 .vx-bg-grey {
-    background: @greyMain;
+  background: @greyMain;
 }
 
 .vx-bg-white {
-    background: @white;
+  background: @white;
 }
 
 .vx-bg-red {
-    background: @error;
+  background: @error;
 }
 
 .vx-bg-vColor {
-    background: @vColor;
+  background: @vColor;
 }
 
 .vx-bg-blue {
-    background: @primaryBlue;
+  background: @primaryBlue;
 }
 .vx-bg-light-text {
-    background: @lightText;
-} 
+  background: @lightText;
+}
 
 // Border
 .vx-dark-border {
-    border-color: @darkText;
+  border-color: @darkText;
 }
 
 .vx-grey-border {
-    border-color: @greyMain;
+  border-color: @greyMain;
 }
 
 .vx-red-border {
-    border-color: @error;
+  border-color: @error;
 }
 
 .vx-blue-border {
-    border-color: @primaryBlue;
+  border-color: @primaryBlue;
 }
 
-
 // mixin
-@blue1 : #1e5dd3;
-@blue2 : #4681ef;
-@blue3 : #7aa6f7;
-@blue4 : #d4e2fc;
-@green1 : #34aa44;
-@green2 : #66bf72;
-@green3 : #97d2a0;
-@green4 : #d6f2da;
-@red1 : #d93b41;
-@red2 : #e75151;
-@red3 : #f77272;
-@red4 : #ffeaea;
-@orange1 : #f6882f;
-@orange2 : #f5a05b;
-@orange3 : #f9b883;
-@orange4 : #fbe1cc;
-@yellow1 : #f0b819;
-@yellow2 : #f4c84a;
-@yellow3 : #fadd8a;
-@yellow4 : #fff4d6;
-@dark1 : #000000;
-@dark2 : #161b2f;
-@dark3 : #747576;
-@boxShadow : rgba(30, 93, 211, 0.27);
-@boxShadowActive : rgba(30, 93, 210, 0.9);
-
+@blue1: #1e5dd3;
+@blue2: #4681ef;
+@blue3: #7aa6f7;
+@blue4: #d4e2fc;
+@green1: #34aa44;
+@green2: #66bf72;
+@green3: #97d2a0;
+@green4: #d6f2da;
+@red1: #d93b41;
+@red2: #e75151;
+@red3: #f77272;
+@red4: #ffeaea;
+@orange1: #f6882f;
+@orange2: #f5a05b;
+@orange3: #f9b883;
+@orange4: #fbe1cc;
+@yellow1: #f0b819;
+@yellow2: #f4c84a;
+@yellow3: #fadd8a;
+@yellow4: #fff4d6;
+@dark1: #000000;
+@dark2: #161b2f;
+@dark3: #747576;
+@boxShadow: rgba(30, 93, 211, 0.27);
+@boxShadowActive: rgba(30, 93, 210, 0.9);
 
 // Mix color
 .vx-color-palette {
-    min-height: 80px;
+  min-height: 80px;
+  width: 100%;
+  border-radius: 0;
+  color: @white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin-bottom: 20px;
+  input {
+    font-size: 12px;
+    font-weight: 400;
+    color: @neutral-100;
+    border: none;
+    background: transparent;
+    outline: none;
     width: 100%;
-    border-radius: 0;
-    color: @white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    margin-bottom: 20px;
-    input {
-        font-size:12px;
-        font-weight: 400;
-        color: @neutral-100;
-        border: none;
-        background: transparent;
-        outline: none;
-        width: 100%;
-        text-align: center;
-        position: absolute;
-        bottom: -20px;
-        left: 0;
-        right: 0;
-    }
-    &.bg {
-        &.blue {
-            &-10 {
-                background: #F4F8FF;
-            }
-            &-20 {
-                background: #E2ECFF;
-            }
-            &-30 {
-                background: #BCD0F6;
-            }
-            &-40 {
-                background: #7AA7F7;
-            }
-            &-50 {
-                background: #4681EF;
-            }
-            &-60 {
-                background: #1E5DD3;
-            }
-            &-70 {
-                background: #1146A8;
-            }
-            &-80 {
-                background: #042E7D;
-            }
-            &-90 {
-                background: #0D2556;
-            }
-            &-100 {
-                background: #161B2F;
-            }
-        }
-        &.green {
-            &-10 {
-                background: #DDF4E0;
-            }
-            &-20 {
-                background: #CAEBCF;
-            }
-            &-30 {
-                background: #B7E2BD;
-            }
-            &-40 {
-                background: #97D2A0;
-            }
-            &-50 {
-                background: #66BF72;
-            }
-            &-60 {
-                background: #34AA44;
-            }
-            &-70 {
-                background: #1C802A;
-            }
-            &-80 {
-                background: #04550F;
-            }
-            &-90 {
-                background: #023C0A;
-            }
-            &-100 {
-                background: #021D05;
-            }
-        }
-        &.red {
-            &-10 {
-                background: #FFEEEB;
-            }
-            &-20 {
-                background: #FDD9D1;
-            }
-            &-30 {
-                background: #FAC3B7;
-            }
-            &-40 {
-                background: #E38B7A;
-            }
-            &-50 {
-                background: #D5624B;
-            }
-            &-60 {
-                background: #C7381B;
-            }
-            &-70 {
-                background: #A82A1D;
-            }
-            &-80 {
-                background: #781C17;
-            }
-            &-90 {
-                background: #470E10;
-            }
-            &-100 {
-                background: #2F090A;
-            }
-        }
-        &.orange {
-            &-10 {
-                background: #FDF1E8;
-            }
-            &-20 {
-                background: #FBE3D0;
-            }
-            &-30 {
-                background: #F7C8A1;
-            }
-            &-40 {
-                background: #F2AC73;
-            }
-            &-50 {
-                background: #EE9044;
-            }
-            &-60 {
-                background: #E87315;
-            }
-            &-70 {
-                background: #BB5D11;
-            }
-            &-80 {
-                background: #8C460D;
-            }
-            &-90 {
-                background: #5E2F08;
-            }
-            &-100 {
-                background: #2F1704;
-            }
-        }
-        &.yellow {
-            &-10 {
-                background: #FEF8E7;
-            }
-            &-20 {
-                background: #FCF2CF;
-            }
-            &-30 {
-                background: #FAE6A3;
-            }
-            &-40 {
-                background: #F7D873;
-            }
-            &-50 {
-                background: #F5CC48;
-            }
-            &-60 {
-                background: #F2BF19;
-            }
-            &-70 {
-                background: #CB9E0B;
-            }
-            &-80 {
-                background: #967508;
-            }
-            &-90 {
-                background: #654F06;
-            }
-            &-100 {
-                background: #302603;
-            }
-        }
-        &.gray {
-            &-10 {
-                background: #F9F9FA;
-            }
-            &-20 {
-                background: #F2F2F5;
-            }
-            &-30 {
-                background: #E3E3E9;
-            }
-            &-40 {
-                background: #CDCED6;
-            }
-            &-50 {
-                background: #A9AAB6;
-            }
-            &-60 {
-                background: #787A8C;
-            }
-            &-70 {
-                background: #565A6F;
-            }
-            &-80 {
-                background: #343952;
-            }
-            &-90 {
-                background: #282E48;
-            }
-            &-100 {
-                background: #242940;
-            }
-        }
-        &.neutral {
-            &-100 {
-                background: #000000;
-            }
-            &-0 {
-                background: #FFFFFF;
-            }
-        }
+    text-align: center;
+    position: absolute;
+    bottom: -20px;
+    left: 0;
+    right: 0;
+  }
+  &.bg {
+    &.blue {
+      &-10 {
+        background: #f4f8ff;
+      }
+      &-20 {
+        background: #e2ecff;
+      }
+      &-30 {
+        background: #bcd0f6;
+      }
+      &-40 {
+        background: #7aa7f7;
+      }
+      &-50 {
+        background: #4681ef;
+      }
+      &-60 {
+        background: #1e5dd3;
+      }
+      &-70 {
+        background: #1146a8;
+      }
+      &-80 {
+        background: #042e7d;
+      }
+      &-90 {
+        background: #0d2556;
+      }
+      &-100 {
+        background: #161b2f;
+      }
+    }
+    &.green {
+      &-10 {
+        background: #ddf4e0;
+      }
+      &-20 {
+        background: #caebcf;
+      }
+      &-30 {
+        background: #b7e2bd;
+      }
+      &-40 {
+        background: #97d2a0;
+      }
+      &-50 {
+        background: #66bf72;
+      }
+      &-60 {
+        background: #34aa44;
+      }
+      &-70 {
+        background: #1c802a;
+      }
+      &-80 {
+        background: #04550f;
+      }
+      &-90 {
+        background: #023c0a;
+      }
+      &-100 {
+        background: #021d05;
+      }
+    }
+    &.red {
+      &-10 {
+        background: #ffeeeb;
+      }
+      &-20 {
+        background: #fdd9d1;
+      }
+      &-30 {
+        background: #fac3b7;
+      }
+      &-40 {
+        background: #e38b7a;
+      }
+      &-50 {
+        background: #d5624b;
+      }
+      &-60 {
+        background: #c7381b;
+      }
+      &-70 {
+        background: #a82a1d;
+      }
+      &-80 {
+        background: #781c17;
+      }
+      &-90 {
+        background: #470e10;
+      }
+      &-100 {
+        background: #2f090a;
+      }
+    }
+    &.orange {
+      &-10 {
+        background: #fdf1e8;
+      }
+      &-20 {
+        background: #fbe3d0;
+      }
+      &-30 {
+        background: #f7c8a1;
+      }
+      &-40 {
+        background: #f2ac73;
+      }
+      &-50 {
+        background: #ee9044;
+      }
+      &-60 {
+        background: #e87315;
+      }
+      &-70 {
+        background: #bb5d11;
+      }
+      &-80 {
+        background: #8c460d;
+      }
+      &-90 {
+        background: #5e2f08;
+      }
+      &-100 {
+        background: #2f1704;
+      }
     }
+    &.yellow {
+      &-10 {
+        background: #fef8e7;
+      }
+      &-20 {
+        background: #fcf2cf;
+      }
+      &-30 {
+        background: #fae6a3;
+      }
+      &-40 {
+        background: #f7d873;
+      }
+      &-50 {
+        background: #f5cc48;
+      }
+      &-60 {
+        background: #f2bf19;
+      }
+      &-70 {
+        background: #cb9e0b;
+      }
+      &-80 {
+        background: #967508;
+      }
+      &-90 {
+        background: #654f06;
+      }
+      &-100 {
+        background: #302603;
+      }
+    }
+    &.gray {
+      &-10 {
+        background: #f9f9fa;
+      }
+      &-20 {
+        background: #f2f2f5;
+      }
+      &-30 {
+        background: #e3e3e9;
+      }
+      &-40 {
+        background: #cdced6;
+      }
+      &-50 {
+        background: #a9aab6;
+      }
+      &-60 {
+        background: #787a8c;
+      }
+      &-70 {
+        background: #565a6f;
+      }
+      &-80 {
+        background: #343952;
+      }
+      &-90 {
+        background: #282e48;
+      }
+      &-100 {
+        background: #242940;
+      }
+    }
+    &.neutral {
+      &-100 {
+        background: #000000;
+      }
+      &-0 {
+        background: #ffffff;
+      }
+    }
+  }
 }
 
 // New css color
 // Blue
-@blue-10 : #F4F8FF;
-@blue-20 : #E2ECFF;
-@blue-30 : #BCD0F6;
-@blue-40 : #7AA7F7;
-@blue-50 : #4681EF;
-@blue-60 : #1E5DD3;
-@blue-70 : #1146A8;
-@blue-80 : #042E7D;
-@blue-90 : #0D2556;
-@blue-100 : #161B2F;
-
+@blue-10: #f4f8ff;
+@blue-20: #e2ecff;
+@blue-30: #bcd0f6;
+@blue-40: #7aa7f7;
+@blue-50: #4681ef;
+@blue-60: #1e5dd3;
+@blue-70: #1146a8;
+@blue-80: #042e7d;
+@blue-90: #0d2556;
+@blue-100: #161b2f;
 
 // Green
-@green-10 : #DDF4E0;
-@green-20 : #CAEBCF;
-@green-30 : #B7E2BD;
-@green-40 : #97D2A0;
-@green-50 : #66BF72;
-@green-60 : #34AA44;
-@green-70 : #1C802A;
-@green-80 : #04550F;
-@green-90 : #023C0A;
-@green-100 : #021D05;
-
+@green-10: #ddf4e0;
+@green-20: #caebcf;
+@green-30: #b7e2bd;
+@green-40: #97d2a0;
+@green-50: #66bf72;
+@green-60: #34aa44;
+@green-70: #1c802a;
+@green-80: #04550f;
+@green-90: #023c0a;
+@green-100: #021d05;
 
 // Red
-@red-10 : #FFEEEB;
-@red-20 : #FDD9D1;
-@red-30 : #FAC3B7;
-@red-40 : #E38B7A;
-@red-50 : #D5624B;
-@red-60 : #C7381B;
-@red-70 : #A82A1D;
-@red-80 : #781C17;
-@red-90 : #470E10;
-@red-100 : #2F090A;
-
+@red-10: #ffeeeb;
+@red-20: #fdd9d1;
+@red-30: #fac3b7;
+@red-40: #e38b7a;
+@red-50: #d5624b;
+@red-60: #c7381b;
+@red-70: #a82a1d;
+@red-80: #781c17;
+@red-90: #470e10;
+@red-100: #2f090a;
 
 // Orange
-@orange-10 : #FDF1E8;
-@orange-20 : #FBE3D0;
-@orange-30 : #F7C8A1;
-@orange-40 : #F2AC73;
-@orange-50 : #EE9044;
-@orange-60 : #E87315;
-@orange-70 : #BB5D11;
-@orange-80 : #8C460D;
-@orange-90 : #5E2F08;
-@orange-100 : #2F1704;
-
+@orange-10: #fdf1e8;
+@orange-20: #fbe3d0;
+@orange-30: #f7c8a1;
+@orange-40: #f2ac73;
+@orange-50: #ee9044;
+@orange-60: #e87315;
+@orange-70: #bb5d11;
+@orange-80: #8c460d;
+@orange-90: #5e2f08;
+@orange-100: #2f1704;
 
 // Yellow
-@yellow-10 : #FEF8E7;
-@yellow-20 : #FCF2CF;
-@yellow-30 : #FAE6A3;
-@yellow-40 : #F7D873;
-@yellow-50 : #F5CC48;
-@yellow-60 : #F2BF19;
-@yellow-70 : #CB9E0B;
-@yellow-80 : #967508;
-@yellow-90 : #654F06;
-@yellow-100 : #302603;
-
+@yellow-10: #fef8e7;
+@yellow-20: #fcf2cf;
+@yellow-30: #fae6a3;
+@yellow-40: #f7d873;
+@yellow-50: #f5cc48;
+@yellow-60: #f2bf19;
+@yellow-70: #cb9e0b;
+@yellow-80: #967508;
+@yellow-90: #654f06;
+@yellow-100: #302603;
 
 // Gray
-@gray-10 : #F9F9FA;
-@gray-20 : #F2F2F5;
-@gray-30 : #E3E3E9;
-@gray-40 : #CDCED6;
-@gray-50 : #A9AAB6;
-@gray-60 : #787A8C;
-@gray-70 : #565A6F;
-@gray-80 : #343952;
-@gray-90 : #282E48;
-@gray-100 : #242940;
-
+@gray-10: #f9f9fa;
+@gray-20: #f2f2f5;
+@gray-30: #e3e3e9;
+@gray-40: #cdced6;
+@gray-50: #a9aab6;
+@gray-60: #787a8c;
+@gray-70: #565a6f;
+@gray-80: #343952;
+@gray-90: #282e48;
+@gray-100: #242940;
 
 // Neutral
-@neutral-100 : #000000;
-@neutral-0 : #FFFFFF;
-
-
+@neutral-100: #000000;
+@neutral-0: #ffffff;
 
 // New class color
 // Blue
 .vx-blue-10 {
-    color: #F4F8FF;
+  color: #f4f8ff;
 }
 .vx-blue-20 {
-    color: #E2ECFF;
+  color: #e2ecff;
 }
 .vx-blue-30 {
-    color: #BCD0F6;
+  color: #bcd0f6;
 }
 .vx-blue-40 {
-    color: #7AA7F7;
+  color: #7aa7f7;
 }
 .vx-blue-50 {
-    color: #4681EF;
+  color: #4681ef;
 }
 .vx-blue-60 {
-    color: #1E5DD3;
+  color: #1e5dd3;
 }
 .vx-blue-70 {
-    color: #1146A8;
+  color: #1146a8;
 }
 .vx-blue-80 {
-    color: #042E7D;
+  color: #042e7d;
 }
 .vx-blue-90 {
-    color: #0D2556;
+  color: #0d2556;
 }
 .vx-blue-100 {
-    color: #161B2F;
+  color: #161b2f;
 }
 
-
 // Green
 .vx-green-10 {
-    color: #DDF4E0;
+  color: #ddf4e0;
 }
 .vx-green-20 {
-    color: #CAEBCF;
+  color: #caebcf;
 }
 .vx-green-30 {
-    color: #B7E2BD;
+  color: #b7e2bd;
 }
 .vx-green-40 {
-    color: #97D2A0;
+  color: #97d2a0;
 }
 .vx-green-50 {
-    color: #66BF72;
+  color: #66bf72;
 }
 .vx-green-60 {
-    color: #34AA44;
+  color: #34aa44;
 }
 .vx-green-70 {
-    color: #1C802A;
+  color: #1c802a;
 }
 .vx-green-80 {
-    color: #04550F;
+  color: #04550f;
 }
 .vx-green-90 {
-    color: #023C0A;
+  color: #023c0a;
 }
 .vx-green-100 {
-    color: #021D05;
+  color: #021d05;
 }
 
-
 // Red
 .vx-red-10 {
-    color: #FFEEEB;
+  color: #ffeeeb;
 }
 .vx-red-20 {
-    color: #FDD9D1;
+  color: #fdd9d1;
 }
 .vx-red-30 {
-    color: #FAC3B7;
+  color: #fac3b7;
 }
 .vx-red-40 {
-    color: #E38B7A;
+  color: #e38b7a;
 }
 .vx-red-50 {
-    color: #D5624B;
+  color: #d5624b;
 }
 .vx-red-60 {
-    color: #C7381B;
+  color: #c7381b;
 }
 .vx-red-70 {
-    color: #A82A1D;
+  color: #a82a1d;
 }
 .vx-red-80 {
-    color: #781C17;
+  color: #781c17;
 }
 .vx-red-90 {
-    color: #470E10;
+  color: #470e10;
 }
 .vx-red-100 {
-    color: #2F090A;
+  color: #2f090a;
 }
 
-
 // Orange
 .vx-orange-10 {
-    color: #FDF1E8;
+  color: #fdf1e8;
 }
 .vx-orange-20 {
-    color: #FBE3D0;
+  color: #fbe3d0;
 }
 .vx-orange-30 {
-    color: #F7C8A1;
+  color: #f7c8a1;
 }
 .vx-orange-40 {
-    color: #F2AC73;
+  color: #f2ac73;
 }
 .vx-orange-50 {
-    color: #EE9044;
+  color: #ee9044;
 }
 .vx-orange-60 {
-    color: #E87315;
+  color: #e87315;
 }
 .vx-orange-70 {
-    color: #BB5D11;
+  color: #bb5d11;
 }
 .vx-orange-80 {
-    color: #8C460D;
+  color: #8c460d;
 }
 .vx-orange-90 {
-    color: #5E2F08;
+  color: #5e2f08;
 }
 .vx-orange-100 {
-    color: #2F1704;
+  color: #2f1704;
 }
 
-
 // Yellow
 .vx-yellow-10 {
-    color: #FEF8E7;
+  color: #fef8e7;
 }
 .vx-yellow-20 {
-    color: #FCF2CF;
+  color: #fcf2cf;
 }
 .vx-yellow-30 {
-    color: #FAE6A3;
+  color: #fae6a3;
 }
 .vx-yellow-40 {
-    color: #F7D873;
+  color: #f7d873;
 }
 .vx-yellow-50 {
-    color: #F5CC48;
+  color: #f5cc48;
 }
 .vx-yellow-60 {
-    color: #F2BF19;
+  color: #f2bf19;
 }
 .vx-yellow-70 {
-    color: #CB9E0B;
+  color: #cb9e0b;
 }
 .vx-yellow-80 {
-    color: #967508;
+  color: #967508;
 }
 .vx-yellow-90 {
-    color: #654F06;
+  color: #654f06;
 }
 .vx-yellow-100 {
-    color: #302603;
+  color: #302603;
 }
 
-
 // Gray
 .vx-gray-10 {
-    color: #F9F9FA;
+  color: #f9f9fa;
 }
 .vx-gray-20 {
-    color: #F2F2F5;
+  color: #f2f2f5;
 }
 .vx-gray-30 {
-    color: #E3E3E9;
+  color: #e3e3e9;
 }
 .vx-gray-40 {
-    color: #CDCED6;
+  color: #cdced6;
 }
 .vx-gray-50 {
-    color: #A9AAB6;
+  color: #a9aab6;
 }
 .vx-gray-60 {
-    color: #787A8C;
+  color: #787a8c;
 }
 .vx-gray-70 {
-    color: #565A6F;
+  color: #565a6f;
 }
 .vx-gray-80 {
-    color: #343952;
+  color: #343952;
 }
 .vx-gray-90 {
-    color: #282E48;
+  color: #282e48;
 }
 .vx-gray-100 {
-    color: #242940;
+  color: #242940;
 }
 
-
 // Neutral
 .vx-neutral-100 {
-    color: #000000;
+  color: #000000;
 }
 .vx-neutral-0 {
-    color: #FFFFFF;
+  color: #ffffff;
+}
+
+// Background
+.vx-bg {
+  &-blue {
+    &-10 {
+      background: #f4f8ff;
+    }
+    &-20 {
+      background: #e2ecff;
+    }
+    &-30 {
+      background: #bcd0f6;
+    }
+    &-40 {
+      background: #7aa7f7;
+    }
+    &-50 {
+      background: #4681ef;
+    }
+    &-60 {
+      background: #1e5dd3;
+    }
+    &-70 {
+      background: #1146a8;
+    }
+    &-80 {
+      background: #042e7d;
+    }
+    &-90 {
+      background: #0d2556;
+    }
+    &-100 {
+      background: #161b2f;
+    }
+  }
+  &-green {
+    &-10 {
+      background: #ddf4e0;
+    }
+    &-20 {
+      background: #caebcf;
+    }
+    &-30 {
+      background: #b7e2bd;
+    }
+    &-40 {
+      background: #97d2a0;
+    }
+    &-50 {
+      background: #66bf72;
+    }
+    &-60 {
+      background: #34aa44;
+    }
+    &-70 {
+      background: #1c802a;
+    }
+    &-80 {
+      background: #04550f;
+    }
+    &-90 {
+      background: #023c0a;
+    }
+    &-100 {
+      background: #021d05;
+    }
+  }
+  &-red {
+    &-10 {
+      background: #ffeeeb;
+    }
+    &-20 {
+      background: #fdd9d1;
+    }
+    &-30 {
+      background: #fac3b7;
+    }
+    &-40 {
+      background: #e38b7a;
+    }
+    &-50 {
+      background: #d5624b;
+    }
+    &-60 {
+      background: #c7381b;
+    }
+    &-70 {
+      background: #a82a1d;
+    }
+    &-80 {
+      background: #781c17;
+    }
+    &-90 {
+      background: #470e10;
+    }
+    &-100 {
+      background: #2f090a;
+    }
+  }
+  &-orange {
+    &-10 {
+      background: #fdf1e8;
+    }
+    &-20 {
+      background: #fbe3d0;
+    }
+    &-30 {
+      background: #f7c8a1;
+    }
+    &-40 {
+      background: #f2ac73;
+    }
+    &-50 {
+      background: #ee9044;
+    }
+    &-60 {
+      background: #e87315;
+    }
+    &-70 {
+      background: #bb5d11;
+    }
+    &-80 {
+      background: #8c460d;
+    }
+    &-90 {
+      background: #5e2f08;
+    }
+    &-100 {
+      background: #2f1704;
+    }
+  }
+  &-yellow {
+    &-10 {
+      background: #fef8e7;
+    }
+    &-20 {
+      background: #fcf2cf;
+    }
+    &-30 {
+      background: #fae6a3;
+    }
+    &-40 {
+      background: #f7d873;
+    }
+    &-50 {
+      background: #f5cc48;
+    }
+    &-60 {
+      background: #f2bf19;
+    }
+    &-70 {
+      background: #cb9e0b;
+    }
+    &-80 {
+      background: #967508;
+    }
+    &-90 {
+      background: #654f06;
+    }
+    &-100 {
+      background: #302603;
+    }
+  }
+  &-gray {
+    &-10 {
+      background: #f9f9fa;
+    }
+    &-20 {
+      background: #f2f2f5;
+    }
+    &-30 {
+      background: #e3e3e9;
+    }
+    &-40 {
+      background: #cdced6;
+    }
+    &-50 {
+      background: #a9aab6;
+    }
+    &-60 {
+      background: #787a8c;
+    }
+    &-70 {
+      background: #565a6f;
+    }
+    &-80 {
+      background: #343952;
+    }
+    &-90 {
+      background: #282e48;
+    }
+    &-100 {
+      background: #242940;
+    }
+  }
+  &-neutral {
+    &-100 {
+      background: #000000;
+    }
+    &-0 {
+      background: #ffffff;
+    }
+  }
 }