ns-base-module 1.0.0

package/style/default.scss

@@ -0,0 +1,1219 @@
+/**
+ * Default variables
+ */
+// @use "sass:color";
+@import "./mixins/libs/tint";
+
+// rgba转hex
+@function rgba-to-rgb($rgba, $opacity: 0, $background: #fff) {
+  @if $opacity > 0 {
+    @if $opacity < 1 {
+      $opacity: $opacity * 100;
+    }
+    @return mix(
+      mix(
+        rgb(red($rgba), green($rgba), blue($rgba)),
+        $background,
+        alpha($rgba) * 100%
+      ),
+      rgb(255, 255, 255),
+      $opacity
+    );
+  }
+  @return mix(
+    rgb(red($rgba), green($rgba), blue($rgba)),
+    $background,
+    alpha($rgba) * 100%
+  );
+}
+
+$lc_mbHd: 2px;
+
+/**
+ * 品牌色
+ * lc_mbColor_brand_*
+ * lc_mbColor_brand2_*
+ */
+// sketch算法: 叠加9%黑色 color.mix($color_brand, black, 85.1%)
+:root,
+body {
+  --color_brand: #0273b0;
+}
+$color_brand: #315bf4;
+$color_brand_map: (
+  normal: var(--lc_mbColor_brand_normal, $color_brand),
+  press: var(--lc_mbColor_brand_press, #2a4dd0),
+  3: var(--lc_mbColor_brand_3, rgba($color_brand, 0.85)),
+  4: var(--lc_mbColor_brand_4, rgba($color_brand, 0.65)),
+  5: var(--lc_mbColor_brand_5, rgba($color_brand, 0.45)),
+  6: var(--lc_mbColor_brand_6, rgba($color_brand, 0.25)),
+  7: var(--lc_mbColor_brand_7, rgba($color_brand, 0.15)),
+  8: var(--lc_mbColor_brand_8, rgba($color_brand, 0.09)),
+  9: var(--lc_mbColor_brand_9, rgba($color_brand, 0.04)),
+  bg: var(--lc_mbColor_brand_bg, #f5f7fa),
+);
+$lc_mbColor_brand_normal: map-get($color_brand_map, normal);
+$lc_mbColor_brand_press: map-get($color_brand_map, press);
+$lc_mbColor_brand_3: var(--lc_mbColor_brand_3, map-get($color_brand_map, 3));
+$lc_mbColor_brand_4: var(--lc_mbColor_brand_4, map-get($color_brand_map, 4));
+$lc_mbColor_brand_5: var(--lc_mbColor_brand_5, map-get($color_brand_map, 5));
+$lc_mbColor_brand_6: var(--lc_mbColor_brand_6, map-get($color_brand_map, 6));
+$lc_mbColor_brand_7: var(--lc_mbColor_brand_7, map-get($color_brand_map, 7));
+$lc_mbColor_brand_8: var(--lc_mbColor_brand_8, map-get($color_brand_map, 8));
+$lc_mbColor_brand_9: var(--lc_mbColor_brand_9, map-get($color_brand_map, 9));
+$lc_mbColor_brand_bg: var(--lc_mbColor_brand_bg, map-get($color_brand_map, bg));
+@each $name, $value in $color_brand_map {
+  .lc_mbColor_brand_#{$name}_background {
+    background-color: $value;
+  }
+  .lc_mbColor_brand_#{$name} {
+    color: $value;
+  }
+}
+
+$color_brand2: #fe6010;
+$color_brand2_map: (
+  normal: var(--lc_mbColor_brand2_normal, $color_brand2),
+  press: var(--lc_mbColor_brand2_press, #f25a0f),
+  3: var(--lc_mbColor_brand2_3, rgba($color_brand2, 0.85)),
+  4: var(--lc_mbColor_brand2_4, rgba($color_brand2, 0.65)),
+  5: var(--lc_mbColor_brand2_5, rgba($color_brand2, 0.45)),
+  6: var(--lc_mbColor_brand2_6, rgba($color_brand2, 0.25)),
+  7: var(--lc_mbColor_brand2_7, rgba($color_brand2, 0.15)),
+  8: var(--lc_mbColor_brand2_8, rgba($color_brand2, 0.09)),
+  9: var(--lc_mbColor_brand2_9, rgba($color_brand2, 0.04)),
+  gradient_start: var(--lc_mbColor_brand2_gradient_start, #ff9f19),
+  gradient_start_press: var(--lc_mbColor_brand2_gradient_start, #ed902f),
+  gradient_start_disable:
+    var(--lc_mbColor_brand2_gradient_start, rgba(#ff9f19, 0.25)),
+);
+$lc_mbColor_brand2_normal: map-get($color_brand2_map, normal);
+$lc_mbColor_brand2_press: map-get($color_brand2_map, press);
+$lc_mbColor_brand2_3: var(--lc_mbColor_brand2_3, map-get($color_brand2_map, 3));
+$lc_mbColor_brand2_4: var(--lc_mbColor_brand2_4, map-get($color_brand2_map, 4));
+$lc_mbColor_brand2_5: var(--lc_mbColor_brand2_5, map-get($color_brand2_map, 5));
+$lc_mbColor_brand2_6: var(--lc_mbColor_brand2_6, map-get($color_brand2_map, 6));
+$lc_mbColor_brand2_7: var(--lc_mbColor_brand2_7, map-get($color_brand2_map, 7));
+$lc_mbColor_brand2_8: var(--lc_mbColor_brand2_8, map-get($color_brand2_map, 8));
+$lc_mbColor_brand2_9: var(--lc_mbColor_brand2_9, map-get($color_brand2_map, 9));
+@each $name, $value in $color_brand2_map {
+  .lc_mbColor_brand2_#{$name}_background {
+    background-color: $value;
+  }
+  .lc_mbColor_brand2_#{$name} {
+    color: $value;
+  }
+}
+
+// 品牌渐变色
+$lc_mbColor_gradient_270deg_brand2_normal: linear-gradient(
+  to right,
+  map-get($color_brand2_map, gradient_start),
+  map-get($color_brand2_map, normal)
+);
+$lc_mbColor_gradient_360deg_brand2_normal: linear-gradient(
+  to bottom,
+  map-get($color_brand2_map, gradient_start),
+  map-get($color_brand2_map, normal)
+);
+$lc_mbColor_gradient_315deg_brand2_normal: linear-gradient(
+  315deg,
+  map-get($color_brand2_map, normal),
+  map-get($color_brand2_map, gradient_start)
+);
+$lc_mbColor_gradient_270deg_brand2_press: linear-gradient(
+  to right,
+  map-get($color_brand2_map, gradient_start_press),
+  map-get($color_brand2_map, press)
+);
+$lc_mbColor_gradient_360deg_brand2_press: linear-gradient(
+  to bottom,
+  map-get($color_brand2_map, gradient_start_press),
+  map-get($color_brand2_map, press)
+);
+$lc_mbColor_gradient_315deg_brand2_press: linear-gradient(
+  315deg,
+  map-get($color_brand2_map, press),
+  map-get($color_brand2_map, gradient_start_press)
+);
+$lc_mbColor_gradient_270deg_brand2_disable: linear-gradient(
+  to right,
+  map-get($color_brand2_map, gradient_start_disable),
+  map-get($color_brand2_map, 6)
+);
+$lc_mbColor_gradient_360deg_brand2_disable: linear-gradient(
+  to bottom,
+  map-get($color_brand2_map, gradient_start_disable),
+  map-get($color_brand2_map, 6)
+);
+$lc_mbColor_gradient_315deg_brand2_disable: linear-gradient(
+  315deg,
+  map-get($color_brand2_map, 6),
+  map-get($color_brand2_map, gradient_start_disable)
+);
+.lc_mbColor_gradient_270deg_brand2_normal {
+  background-image: $lc_mbColor_gradient_270deg_brand2_normal;
+}
+.lc_mbColor_gradient_360deg_brand2_normal {
+  background-image: $lc_mbColor_gradient_360deg_brand2_normal;
+}
+.lc_mbColor_gradient_315deg_brand2_normal {
+  background-image: $lc_mbColor_gradient_315deg_brand2_normal;
+}
+.lc_mbColor_gradient_270deg_brand2_press {
+  background-image: $lc_mbColor_gradient_270deg_brand2_press;
+}
+.lc_mbColor_gradient_360deg_brand2_press {
+  background-image: $lc_mbColor_gradient_360deg_brand2_press;
+}
+.lc_mbColor_gradient_315deg_brand2_press {
+  background-image: $lc_mbColor_gradient_360deg_brand2_press;
+}
+.lc_mbColor_gradient_270deg_brand2_disable {
+  background-image: $lc_mbColor_gradient_270deg_brand2_disable;
+}
+.lc_mbColor_gradient_360deg_brand2_disable {
+  background-image: $lc_mbColor_gradient_360deg_brand2_disable;
+}
+.lc_mbColor_gradient_315deg_brand2_disable {
+  background-image: $lc_mbColor_gradient_360deg_brand2_disable;
+}
+
+/**
+ * 金额色 lc_mbColor_price*
+ */
+$lc_mbColor_price1: var(--lc_mbColor_price1, #fe6010);
+$lc_mbColor_price2: var(--lc_mbColor_price2, #ff2f2f);
+$lc_mbColor_price3: var(--lc_mbColor_price3, #b38555);
+$lc_mbColor_price4: var(--lc_mbColor_price4, #262626);
+$lc_mbColor_price5: var(--lc_mbColor_price5, #fff);
+$lc_mbColor_price6: var(--lc_mbColor_price6, #ffd1a5);
+
+.lc_mbColor_price1 {
+  color: $lc_mbColor_price1;
+}
+.lc_mbColor_price2 {
+  color: $lc_mbColor_price2;
+}
+.lc_mbColor_price3 {
+  color: $lc_mbColor_price3;
+}
+.lc_mbColor_price4 {
+  color: $lc_mbColor_price4;
+}
+.lc_mbColor_price5 {
+  color: $lc_mbColor_price5;
+}
+.lc_mbColor_price6 {
+  color: $lc_mbColor_price6;
+}
+
+/**
+ * 中性色
+ * lc_mbColor_neutral_*
+ */
+$color_neutral_b: #000;
+$color_neutral_map: (
+  b1: var(--lc_mbColor_neutral_b1, rgba-to-rgb(rgba($color_neutral_b, 0.85))),
+  b2: var(--lc_mbColor_neutral_b2, rgba-to-rgb(rgba($color_neutral_b, 0.65))),
+  b3: var(--lc_mbColor_neutral_b3, rgba-to-rgb(rgba($color_neutral_b, 0.45))),
+  b4: var(--lc_mbColor_neutral_b4, rgba-to-rgb(rgba($color_neutral_b, 0.25))),
+  b5: var(--lc_mbColor_neutral_b5, rgba-to-rgb(rgba($color_neutral_b, 0.15))),
+  b6: var(--lc_mbColor_neutral_b6, rgba-to-rgb(rgba($color_neutral_b, 0.09))),
+  b7: var(--lc_mbColor_neutral_b7, rgba-to-rgb(rgba($color_neutral_b, 0.04))),
+  b8: var(--lc_mbColor_neutral_b8, rgba-to-rgb(rgba($color_neutral_b, 0.02))),
+);
+$lc_mbColor_neutral_b1: map-get($color_neutral_map, b1);
+$lc_mbColor_neutral_b2: map-get($color_neutral_map, b2);
+$lc_mbColor_neutral_b3: map-get($color_neutral_map, b3);
+$lc_mbColor_neutral_b4: map-get($color_neutral_map, b4);
+$lc_mbColor_neutral_b5: map-get($color_neutral_map, b5);
+$lc_mbColor_neutral_b6: map-get($color_neutral_map, b6);
+$lc_mbColor_neutral_b7: map-get($color_neutral_map, b7);
+$lc_mbColor_neutral_b8: map-get($color_neutral_map, b8);
+@each $name, $value in $color_neutral_map {
+  .lc_mbColor_neutral_#{$name}_background {
+    background-color: $value;
+  }
+  .lc_mbColor_neutral_#{$name} {
+    color: $value;
+  }
+}
+
+$color_neutral_w: #fff;
+$color_neutral_map: (
+  w1: var(--lc_mbColor_neutral_w1, rgba($color_neutral_w, 1)),
+  w2: var(--lc_mbColor_neutral_w2, rgba($color_neutral_w, 0.85)),
+  w3: var(--lc_mbColor_neutral_w3, rgba($color_neutral_w, 0.65)),
+  w4: var(--lc_mbColor_neutral_w4, rgba($color_neutral_w, 0.45)),
+  w5: var(--lc_mbColor_neutral_w5, rgba($color_neutral_w, 0.25)),
+  w6: var(--lc_mbColor_neutral_w6, rgba($color_neutral_w, 0.15)),
+  w7: var(--lc_mbColor_neutral_w7, rgba($color_neutral_w, 0.09)),
+  w8: var(--lc_mbColor_neutral_w8, rgba($color_neutral_w, 0.04)),
+);
+$lc_mbColor_neutral_w1: map-get($color_neutral_map, w1);
+$lc_mbColor_neutral_w2: map-get($color_neutral_map, w2);
+$lc_mbColor_neutral_w3: map-get($color_neutral_map, w3);
+$lc_mbColor_neutral_w4: map-get($color_neutral_map, w4);
+$lc_mbColor_neutral_w5: map-get($color_neutral_map, w5);
+$lc_mbColor_neutral_w6: map-get($color_neutral_map, w6);
+$lc_mbColor_neutral_w7: map-get($color_neutral_map, w7);
+$lc_mbColor_neutral_w8: map-get($color_neutral_map, w8);
+@each $name, $value in $color_neutral_map {
+  .lc_mbColor_neutral_#{$name}_background {
+    background-color: $value;
+  }
+  .lc_mbColor_neutral_#{$name} {
+    color: $value;
+  }
+}
+
+/**
+ * 功能色
+ * lc_mbColor_function_*
+ */
+$color_error: #ff2f2f;
+$color_error_map: (
+  normal: var(--lc_mbColor_error_normal, $color_error),
+  press: var(--lc_mb_yxColor_error_press, #d92828),
+  disable: var(--lc_mb_yxColor_error_disable, rgba($color_error, 0.15)),
+  lb: var(--lc_mb_yxColor_error_lb, rgba($color_error, 0.09)),
+);
+$lc_mbColor_error_normal: map-get($color_error_map, normal);
+$lc_mbColor_error_press: map-get($color_error_map, press);
+$lc_mbColor_error_disable: map-get($color_error_map, disable);
+$lc_mbColor_error_lb: map-get($color_error_map, lb);
+@each $name, $value in $color_error_map {
+  .lc_mbColor_error_#{$name}_background {
+    background-color: $value;
+  }
+  .lc_mbColor_error_#{$name} {
+    color: $value;
+  }
+}
+
+$color_warning: #ff910a;
+$color_warning_map: (
+  normal: var(--lc_mbColor_warning_normal, $color_warning),
+  press: var(--lc_mb_yxColor_warning_press, #ed8429),
+  disable: var(--lc_mb_yxColor_warning_disable, rgba($color_warning, 0.15)),
+  lb: var(--lc_mb_yxColor_warning_lb, rgba($color_warning, 0.09)),
+);
+$lc_mbColor_warning_normal: map-get($color_warning_map, normal);
+$lc_mbColor_warning_press: map-get($color_warning_map, press);
+$lc_mbColor_warning_disable: map-get($color_warning_map, disable);
+$lc_mbColor_warning_lb: map-get($color_warning_map, lb);
+@each $name, $value in $color_warning_map {
+  .lc_mbColor_warning_#{$name}_background {
+    background-color: $value;
+  }
+}
+
+$color_success: #4cb94b;
+$color_success_map: (
+  normal: var(--lc_mbColor_success_normal, $color_success),
+  press: var(--lc_mb_yxColor_success_press, #34a84b),
+  disable: var(--lc_mb_yxColor_success_disable, rgba($color_success, 0.15)),
+  lb: var(--lc_mb_yxColor_success_lb, rgba($color_success, 0.09)),
+);
+$lc_mbColor_success_normal: map-get($color_success_map, normal);
+$lc_mbColor_success_press: map-get($color_success_map, press);
+$lc_mbColor_success_disable: map-get($color_success_map, disable);
+$lc_mbColor_success_lb: map-get($color_success_map, lb);
+@each $name, $value in $color_success_map {
+  .lc_mbColor_success_#{$name}_background {
+    background-color: $value;
+  }
+  .lc_mbColor_success_#{$name} {
+    color: $value;
+  }
+}
+
+$color_link: #2c8ae8;
+$color_link_map: (
+  normal: var(--lc_mbColor_link_normal, $color_link),
+  press: var(--lc_mb_yxColor_link_press, #287ed3),
+  disable: var(--lc_mb_yxColor_link_disable, rgba($color_link, 0.15)),
+  lb: var(--lc_mb_yxColor_link_lb, rgba($color_link, 0.09)),
+);
+$lc_mbColor_link_normal: map-get($color_link_map, normal);
+$lc_mbColor_link_press: map-get($color_link_map, press);
+$lc_mbColor_link_disable: map-get($color_link_map, disable);
+$lc_mbColor_link_lb: map-get($color_link_map, lb);
+@each $name, $value in $color_link_map {
+  .lc_mbColor_link_#{$name}_background {
+    background-color: $value;
+  }
+  .lc_mbColor_link_#{$name} {
+    color: $value;
+  }
+}
+
+/**
+ * 辅助色
+ * lc_mbColor_aux_*
+ */
+$color_aux_1: #ffaa18;
+$color_aux_1_map: (
+  1: var(--lc_mbColor_aux_1_1, rgba($color_aux_1, 1)),
+  2: var(--lc_mbColor_aux_1_2, rgba($color_aux_1, 0.85)),
+  3: var(--lc_mbColor_aux_1_3, rgba($color_aux_1, 0.65)),
+  4: var(--lc_mbColor_aux_1_4, rgba($color_aux_1, 0.45)),
+  5: var(--lc_mbColor_aux_1_5, rgba($color_aux_1, 0.25)),
+  6: var(--lc_mbColor_aux_1_6, rgba($color_aux_1, 0.15)),
+  7: var(--lc_mbColor_aux_1_7, rgba($color_aux_1, 0.09)),
+);
+$lc_mbColor_aux_1_1: map-get($color_aux_1_map, 1);
+$lc_mbColor_aux_1_2: map-get($color_aux_1_map, 2);
+$lc_mbColor_aux_1_3: map-get($color_aux_1_map, 3);
+$lc_mbColor_aux_1_4: map-get($color_aux_1_map, 4);
+$lc_mbColor_aux_1_5: map-get($color_aux_1_map, 5);
+$lc_mbColor_aux_1_6: map-get($color_aux_1_map, 6);
+$lc_mbColor_aux_1_7: map-get($color_aux_1_map, 7);
+@each $name, $value in $color_aux_1_map {
+  .lc_mbColor_aux_1_#{$name}_background {
+    background-color: $value;
+  }
+  .lc_mbColor_aux_1_#{$name} {
+    background-color: $value;
+  }
+}
+
+$color_aux_2: #00b578;
+$color_aux_2_map: (
+  1: var(--lc_mbColor_aux_2_1, rgba($color_aux_2, 1)),
+  2: var(--lc_mbColor_aux_2_2, rgba($color_aux_2, 0.85)),
+  3: var(--lc_mbColor_aux_2_3, rgba($color_aux_2, 0.65)),
+  4: var(--lc_mbColor_aux_2_4, rgba($color_aux_2, 0.45)),
+  5: var(--lc_mbColor_aux_2_5, rgba($color_aux_2, 0.25)),
+  6: var(--lc_mbColor_aux_2_6, rgba($color_aux_2, 0.15)),
+  7: var(--lc_mbColor_aux_2_7, rgba($color_aux_2, 0.09)),
+);
+$lc_mbColor_aux_2_1: map-get($color_aux_2_map, 1);
+$lc_mbColor_aux_2_2: map-get($color_aux_2_map, 2);
+$lc_mbColor_aux_2_3: map-get($color_aux_2_map, 3);
+$lc_mbColor_aux_2_4: map-get($color_aux_2_map, 4);
+$lc_mbColor_aux_2_5: map-get($color_aux_2_map, 5);
+$lc_mbColor_aux_2_6: map-get($color_aux_2_map, 6);
+$lc_mbColor_aux_2_7: map-get($color_aux_2_map, 7);
+@each $name, $value in $color_aux_2_map {
+  .lc_mbColor_aux_2_#{$name}_background {
+    background-color: $value;
+  }
+  .lc_mbColor_aux_2_#{$name} {
+    background-color: $value;
+  }
+}
+
+$color_aux_3: #00c8d8;
+$color_aux_3_map: (
+  1: var(--lc_mbColor_aux_3_1, rgba($color_aux_3, 1)),
+  2: var(--lc_mbColor_aux_3_2, rgba($color_aux_3, 0.85)),
+  3: var(--lc_mbColor_aux_3_3, rgba($color_aux_3, 0.65)),
+  4: var(--lc_mbColor_aux_3_4, rgba($color_aux_3, 0.45)),
+  5: var(--lc_mbColor_aux_3_5, rgba($color_aux_3, 0.25)),
+  6: var(--lc_mbColor_aux_3_6, rgba($color_aux_3, 0.15)),
+  7: var(--lc_mbColor_aux_3_7, rgba($color_aux_3, 0.09)),
+);
+$lc_mbColor_aux_3_1: map-get($color_aux_3_map, 1);
+$lc_mbColor_aux_3_2: map-get($color_aux_3_map, 2);
+$lc_mbColor_aux_3_3: map-get($color_aux_3_map, 3);
+$lc_mbColor_aux_3_4: map-get($color_aux_3_map, 4);
+$lc_mbColor_aux_3_5: map-get($color_aux_3_map, 5);
+$lc_mbColor_aux_3_6: map-get($color_aux_3_map, 6);
+$lc_mbColor_aux_3_7: map-get($color_aux_3_map, 7);
+@each $name, $value in $color_aux_3_map {
+  .lc_mbColor_aux_3_#{$name}_background {
+    background-color: $value;
+  }
+  .lc_mbColor_aux_3_#{$name} {
+    background-color: $value;
+  }
+}
+
+$color_aux_4: #1885f2;
+$color_aux_4_map: (
+  1: var(--lc_mbColor_aux_4_1, rgba($color_aux_4, 1)),
+  2: var(--lc_mbColor_aux_4_2, rgba($color_aux_4, 0.85)),
+  3: var(--lc_mbColor_aux_4_3, rgba($color_aux_4, 0.65)),
+  4: var(--lc_mbColor_aux_4_4, rgba($color_aux_4, 0.45)),
+  5: var(--lc_mbColor_aux_4_5, rgba($color_aux_4, 0.25)),
+  6: var(--lc_mbColor_aux_4_6, rgba($color_aux_4, 0.15)),
+  7: var(--lc_mbColor_aux_4_7, rgba($color_aux_4, 0.09)),
+);
+$lc_mbColor_aux_4_1: map-get($color_aux_4_map, 1);
+$lc_mbColor_aux_4_2: map-get($color_aux_4_map, 2);
+$lc_mbColor_aux_4_3: map-get($color_aux_4_map, 3);
+$lc_mbColor_aux_4_4: map-get($color_aux_4_map, 4);
+$lc_mbColor_aux_4_5: map-get($color_aux_4_map, 5);
+$lc_mbColor_aux_4_6: map-get($color_aux_4_map, 6);
+$lc_mbColor_aux_4_7: map-get($color_aux_4_map, 7);
+@each $name, $value in $color_aux_4_map {
+  .lc_mbColor_aux_4_#{$name}_background {
+    background-color: $value;
+  }
+  .lc_mbColor_aux_4_#{$name} {
+    background-color: $value;
+  }
+}
+
+/**
+ * 标签色
+ * lc_mbColor_tag*
+ */
+$color_tag_1: #ff2f2f;
+$color_tag_2: #ffaa18;
+$color_tag_3: #4cb94b;
+$color_tag_4: #2c8ae8;
+$color_tag_5: #fe6010;
+$color_tag_6: #595959;
+
+$lc_mbColor_tag1_dark: var(--lc_mbColor_tag1_dark, $color_tag_1);
+$lc_mbColor_tag1_light: var(
+  --lc_mbColor_tag1_light,
+  rgba-to-rgb(rgba($color_tag_1, 0.09))
+);
+$lc_mbColor_tag2_dark: var(--lc_mbColor_tag2_dark, $color_tag_2);
+$lc_mbColor_tag2_light: var(
+  --lc_mbColor_tag2_light,
+  rgba-to-rgb(rgba($color_tag_2, 0.09))
+);
+$lc_mbColor_tag3_dark: var(--lc_mbColor_tag3_dark, $color_tag_3);
+$lc_mbColor_tag3_light: var(
+  --lc_mbColor_tag3_light,
+  rgba-to-rgb(rgba($color_tag_3, 0.09))
+);
+$lc_mbColor_tag4_dark: var(--lc_mbColor_tag4_dark, $color_tag_4);
+$lc_mbColor_tag4_light: var(
+  --lc_mbColor_tag4_light,
+  rgba-to-rgb(rgba($color_tag_4, 0.09))
+);
+$lc_mbColor_tag5_dark: var(--lc_mbColor_tag5_dark, $color_tag_5);
+$lc_mbColor_tag5_light: var(
+  --lc_mbColor_tag5_light,
+  rgba-to-rgb(rgba($color_tag_5, 0.09))
+);
+$lc_mbColor_tag6_dark: var(--lc_mbColor_tag6_dark, $color_tag_6);
+$lc_mbColor_tag6_light: var(
+  --lc_mbColor_tag6_light,
+  rgba-to-rgb(rgba($color_tag_6, 0.04))
+);
+
+/**
+ * 字体
+ * lc_mbFont_*
+ * lc_mbText_*
+ */
+$font_family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  "Helvetica Neue", Arial, "Microsoft YaHei", "Noto Sans", sans-serif,
+  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+body {
+  font-family: $font_family;
+  font-size: 12px;
+  color: $lc_mbColor_neutral_b1;
+}
+
+$font_size_map: 16, 18, 20, 24, 28, 32, 36, 40, 44, 48, 56;
+
+@each $size in $font_size_map {
+  // yxFont默认行高和字体一致
+  .lc_mbFont_size_#{$size} {
+    font-size: #{$size}px;
+    line-height: 1em;
+  }
+  // Text是带行高的
+  .lc_mbText_size_#{$size} {
+    font-size: #{$size}px;
+    line-height: #{$size}px;
+  }
+}
+
+$font_weight_map: (
+  light: 300,
+  regular: 400,
+  medium: 400,
+  semibold: 600,
+);
+
+@each $type, $value in $font_weight_map {
+  .lc_mbFont_weight_#{$type} {
+    font-weight: $value;
+  }
+}
+
+$number_font_family: DINAlternate-Bold;
+
+.lc_mbFont_family_number {
+  font-family: $number_font_family;
+}
+
+/**
+ * 间距 lc_mbSpacing_*
+ */
+$spacing_size_map: (
+  xl: 24,
+  lg: 16,
+  md: 12,
+  sm: 8,
+  xs: 4,
+);
+
+$spacing_direction_list: left, top, right, bottom;
+
+@each $size, $value in $spacing_size_map {
+  .lc_mbSpacing_#{$size} {
+    padding: $value * $lc_mbHd;
+  }
+  .lc_mbSpacing_horizontal_#{$size} {
+    padding-left: $value * $lc_mbHd;
+    padding-right: $value * $lc_mbHd;
+  }
+  .lc_mbSpacing_vertical_#{$size} {
+    padding-top: $value * $lc_mbHd;
+    padding-bottom: $value * $lc_mbHd;
+  }
+  .lc_mbMargin_#{$size} {
+    margin: $value * $lc_mbHd;
+  }
+  @each $direction in $spacing_direction_list {
+    .lc_mbSpacing_#{$direction}_#{$size} {
+      padding-#{$direction}: $value * $lc_mbHd;
+    }
+  }
+}
+
+@mixin lc_mbFlex_gutter($type, $size) {
+  .lc_mbFlex_gutterHorizontal_#{$type} {
+    padding-left: calc(#{$size * $lc-mbHd} / 2);
+    padding-right: calc(#{$size * $lc-mbHd} / 2);
+    .lc-col {
+      margin-left: calc(#{$size * $lc-mbHd} / 2);
+      margin-right: calc(#{$size * $lc-mbHd} / 2);
+    }
+  }
+  .lc_mbFlex_gutterVertical_#{$type} {
+    > .lc-col {
+      margin-bottom: $size * $lc_mbHd;
+    }
+  }
+}
+@include lc_mbFlex_gutter($type: sm, $size: 8);
+@include lc_mbFlex_gutter($type: md, $size: 16);
+@include lc_mbFlex_gutter($type: lg, $size: 24);
+
+/**
+ * 圆角 lc_mbRadio_*
+ */
+$radius_size_map: (
+  xs: 2,
+  sm: 4,
+  md: 8,
+  lg: 16,
+  xl: 24,
+  circle: 9999,
+);
+
+@each $size, $value in $radius_size_map {
+  .lc_mbRadius_#{$size} {
+    overflow: hidden;
+    border-radius: $value * $lc_mbHd;
+    &:after {
+      border-radius: $value * $lc_mbHd;
+    }
+  }
+}
+
+/**
+ * 分割线 lc_mbDivider_*
+ */
+.lc_mbDivider_horizontal {
+  width: 100%;
+  // @include hairline-bottom($color: $lc_mbColor_neutral_b6);
+}
+.lc_mbDivider_vertical {
+  height: 100%;
+  // @include hairline-left($color: $lc_mbColor_neutral_b6);
+}
+
+/**
+ * 边框 lc_mbBorder_*
+ */
+$border_color_map: (
+  md: $lc_mbColor_neutral_b6,
+  lg: $lc_mbColor_neutral_b5,
+  badge: $lc_mbColor_neutral_w1,
+  dashed: $lc_mbColor_neutral_b4,
+);
+
+$border_size_map: (
+  md: 1px,
+  lg: 2px,
+  badge: 1px,
+  dashed: 1px,
+);
+
+$border_style_map: (
+  md: solid,
+  lg: solid,
+  badge: solid,
+  dashed: dashed,
+);
+
+$border_width_map: (
+  md: 1 + #{"PX"},
+  lg: 2px,
+  badge: 1 + #{"PX"},
+  dashed: 1 + #{"PX"},
+);
+
+@mixin lc_mbBorder_Factory($direction, $type) {
+  $color: map-get($border_color_map, $type);
+  $style: map-get($border_style_map, $type);
+  $width: map-get($border_width_map, $type);
+  .lc_mbBorder_#{$type}_#{$direction} {
+    @if ($direction == default) {
+      // @include hairline-surround($color, $style, $width);
+    }
+    @if ($direction == U) {
+      // @include hairline-top($color, $style, $width);
+    }
+    @if ($direction == D) {
+      // @include hairline-bottom($color, $style, $width);
+    }
+    @if ($direction == L) {
+      // @include hairline-left($color, $style, $width);
+    }
+    @if ($direction == R) {
+      // @include hairline-right($color, $style, $width);
+    }
+    @if ($direction == UD) {
+      // @include hairline-bottom($color, $style, $width);
+      &:after {
+        border-top-width: $width;
+      }
+    }
+    @if ($direction == LD) {
+      // @include hairline-bottom($color, $style, $width);
+      &:after {
+        border-left-width: $width;
+      }
+    }
+    @if ($direction == LRD) {
+      // @include hairline-bottom($color, $style, $width);
+      &:after {
+        border-left-width: $width;
+        border-right-width: $width;
+      }
+    }
+  }
+}
+
+@each $type in md, lg, dashed, badge {
+  @each $direction in default, U, D, L, R, UD, LD, LRD {
+    @include lc_mbBorder_Factory($direction, $type);
+  }
+}
+
+/**
+ * 投影 lc_mbShadow_*
+ */
+$lc_mbShadow_size_map: (
+  sm: 2,
+  md: 4,
+  lg: 8,
+);
+
+$lc_mbShadow_size_color_map: (
+  sm: $lc_mbColor_neutral_b7,
+  md: $lc_mbColor_neutral_b6,
+  lg: $lc_mbColor_neutral_b5,
+);
+
+@each $type, $size in $lc_mbShadow_size_map {
+  $size1: $size * 1px;
+  $size2: $size * 2px;
+  $size3: $size * 4px;
+  $size4: $size * 8px;
+  .lc_mbShadow_float_L_size_#{$type} {
+    box-shadow: -#{$size3}
+      0
+      #{$size4}
+      0
+      map-get($lc_mbShadow_size_color_map, $type);
+  }
+  .lc_mbShadow_float_R_size_#{$type} {
+    box-shadow: #{$size3}
+      0
+      #{$size4}
+      0
+      map-get($lc_mbShadow_size_color_map, $type);
+  }
+  .lc_mbShadow_float_U_size_#{$type} {
+    box-shadow: 0
+      #{$size3}
+      #{$size4}
+      0
+      map-get($lc_mbShadow_size_color_map, $type);
+  }
+  .lc_mbShadow_float_D_size_#{$type} {
+    box-shadow: 0 -#{$size3}
+      #{$size4}
+      0
+      map-get($lc_mbShadow_size_color_map, $type);
+  }
+  .lc_mbShadow_float_all_size_#{$type} {
+    box-shadow: 0 0 #{$size4} 0 map-get($lc_mbShadow_size_color_map, $type);
+  }
+}
+
+/**
+ * taro-ui样式变量
+ */
+$hd: 1 !default; // 基本单位
+
+/* The Color of O2Team Brand */
+$color-brand: #6190e8 !default;
+$color-brand-light: #78a4f4 !default;
+$color-brand-dark: #346fc2 !default;
+
+/* Color */
+$color-success: #13ce66 !default;
+$color-error: #ff4949 !default;
+$color-warning: #ffc82c !default;
+$color-info: #78a4fa !default;
+
+/* Color Palette */
+$color-black-0: #000 !default;
+$color-black-1: #333 !default;
+$color-black-2: #7f7f7f !default;
+$color-black-3: #b2b2b2 !default;
+
+$color-grey-0: #333 !default;
+$color-grey-1: #666 !default;
+$color-grey-2: #999 !default;
+$color-grey-3: #ccc !default;
+$color-grey-4: #e5e5e5 !default;
+$color-grey-5: #f0f0f0 !default;
+$color-grey-6: #f7f7f7 !default;
+
+$color-white: #fff !default;
+
+/* Text Color */
+$color-text-base: #333 !default; // 文字的基本色
+$color-text-base-inverse: #fff !default; // 反色
+$color-text-secondary: #36d57d !default; // 辅助色
+$color-text-placeholder: #c9c9c9 !default;
+$color-text-disabled: #ccc !default;
+$color-text-title: #2c405a !default; // 文章标题
+$color-text-paragraph: #3f536e !default; // 文章段落
+
+/* Link */
+$color-link: #6190e8 !default;
+$color-link-hover: #79a1eb !default;
+$color-link-active: #4f7de2 !default;
+$color-link-disabled: #bfbfbf !default;
+
+/* 背景色 */
+$color-bg: #fff !default;
+$color-bg-base: #fafbfc !default;
+$color-bg-light: #ecf5fd !default;
+$color-bg-lighter: tint($color-bg-light, 50%) !default;
+$color-bg-grey: #f7f7f7 !default;
+
+/* 边框颜色 */
+$color-border-base: #c5d9e8 !default;
+$color-border-split: tint($color-border-base, 20%) !default; // 分割线
+$color-border-light: tint($color-border-base, 30%) !default;
+$color-border-lighter: tint($color-border-base, 50%) !default;
+$color-border-lightest: tint($color-border-base, 80%) !default;
+$color-border-grey: #ccc !default;
+
+/* 图标颜色 */
+$color-icon-base: #ccc !default;
+
+/* Border Radius */
+$border-radius-sm: 2px * $hd !default;
+$border-radius-md: 4px * $hd !default;
+$border-radius-lg: 6px * $hd !default;
+$border-radius-circle: 50% !default;
+
+/* 透明度 */
+$opacity-active: 0.6 !default; // Button 等组件点击态额透明度
+$opacity-disabled: 0.3 !default; // Button 等组件禁用态的透明度
+
+/* Font */
+$font-size-xs: 10px * $hd !default; // 非常用字号，用于标签 //正文
+$font-size-sm: 12px * $hd !default; // 用于辅助信息 //修改标题
+$font-size-base: 14px * $hd !default; // 常用字号
+$font-size-lg: 16px * $hd !default; // 常规标题
+$font-size-xl: 18px * $hd !default; // 大标题
+$font-size-xxl: 20px * $hd !default; // 用于大号的数字
+
+/* Line Height */
+$line-height-base: 1 !default; // 单行
+$line-height-en: 1.3 !default; // 英文多行
+$line-height-zh: 1.5 !default; // 中文多行
+
+/* 水平间距 */
+$spacing-h-sm: 5px * $hd !default;
+$spacing-h-md: 8px * $hd !default;
+$spacing-h-lg: 12px * $hd !default;
+$spacing-h-xl: 16px * $hd !default;
+
+/* 垂直间距 */
+$spacing-v-xs: 3px * $hd !default;
+$spacing-v-sm: 6px * $hd !default;
+$spacing-v-md: 9px * $hd !default;
+$spacing-v-lg: 12px * $hd !default;
+$spacing-v-xl: 15px * $hd !default;
+
+/* 图标尺寸 */
+$icon-size-sm: 18px * $hd !default;
+$icon-size-md: 22px * $hd !default;
+$icon-size-lg: 36px * $hd !default;
+
+/* z-index */
+$zindex-divider: 100 !default;
+$zindex-steps: 500 !default;
+$zindex-tab: 600 !default;
+$zindex-form: 700 !default;
+$zindex-nav: 800 !default;
+$zindex-search-bar: 800 !default;
+$zindex-indexes: 805 !default;
+$zindex-flot-layout: 810 !default;
+$zindex-drawer: 900 !default;
+$zindex-modal: 1000 !default;
+$zindex-action-sheet: 1010 !default;
+$zindex-picker: 1010 !default;
+$zindex-curtain: 1080 !default;
+$zindex-message: 1090 !default;
+$zindex-toast: 1090 !default;
+
+/* timing function */
+$timing-func: cubic-bezier(0.36, 0.66, 0.04, 1) !default;
+
+/**
+* CSS cubic-bezier timing functions
+* http://bourbon.io/docs/#timing-functions
+*/
+$ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53) !default;
+$ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19) !default;
+$ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22) !default;
+$ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06) !default;
+$ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715) !default;
+$ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035) !default;
+$ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335) !default;
+$ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045) !default;
+
+$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94) !default;
+$ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1) !default;
+$ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1) !default;
+$ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1) !default;
+$ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1) !default;
+$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1) !default;
+$ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1) !default;
+$ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275) !default;
+
+$ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955) !default;
+$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1) !default;
+$ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1) !default;
+$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1) !default;
+$ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95) !default;
+$ease-in-out-expo: cubic-bezier(1, 0, 0, 1) !default;
+$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86) !default;
+$ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55) !default;
+
+/**
+ * 组件变量
+ */
+
+/* Accordion */
+$at-accordion-color-arrow: $color-grey-3 !default;
+
+/* Activity Indicator */
+$at-activity-indicator-font-size: 28px !default;
+$at-activity-indicator-font-color: $color-grey-2 !default;
+
+/* Avatar */
+$at-avatar-color: $color-white !default;
+$at-avatar-bg-color: $color-grey-4 !default;
+$at-avatar-size-sm: 80px !default;
+$at-avatar-size-md: 100px !default;
+$at-avatar-size-lg: 120px !default;
+
+/* Badge */
+$at-badge-color: $color-white !default;
+$at-badge-bg-color: $color-error !default;
+$at-badge-bg: $at-badge-bg-color !default;
+$at-badge-font-size: $font-size-xs !default;
+$at-badge-dot-size: 20px !default;
+
+/* Button */
+$at-button-height: 92px !default;
+$at-button-height-sm: 60px !default;
+$at-button-color: $color-brand !default;
+$at-button-border-color-primary: $color-brand !default;
+$at-button-border-color-secondary: $color-brand !default;
+$at-button-bg: $at-button-color !default;
+
+/* Float Button */
+$at-fab-size: 56px * $hd !default;
+$at-fab-size-sm: 40px * $hd !default;
+$at-fab-icon-size: 24px * $hd !default;
+$at-fab-bg-color: $color-brand;
+$at-fab-bg-color-active: $color-brand-dark;
+$at-fab-box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.2),
+  0 12px 20px 0 rgba(0, 0, 0, 0.14), 0 2px 36px 0 rgba(0, 0, 0, 0.12) !default;
+$at-fab-box-shadow-active: 0 14px 16px -8px rgba(0, 0, 0, 0.2),
+  0 24px 34px 4px rgba(0, 0, 0, 0.14), 0 10px 44px 8px rgba(0, 0, 0, 0.12) !default;
+
+/* Calendar */
+$at-calendar-day-size: 72px !default;
+$at-calendar-mark-size: 8px !default;
+$at-calendar-header-color: #b8bfc6 !default;
+$at-calendar-main-color: $color-brand !default;
+$at-calendar-day-color: #7c86a2 !default;
+
+/* Card */
+$at-card-thumb-size: 32px !default;
+$at-card-icon-size: 32px !default;
+$at-card-title-color: $color-text-title !default;
+$at-card-extra-color: $color-text-title !default;
+$at-card-info-color: $color-text-base !default;
+$at-card-note-color: $color-grey-2 !default;
+
+/* Checkbox */
+$at-checkbox-circle-size: 40px !default;
+$at-checkbox-icon-size: $font-size-sm !default;
+$at-checkbox-icon-color: $color-brand !default;
+$at-checkbox-icon-color-checked: $color-white !default;
+$at-checkbox-title-color: $color-text-base !default;
+$at-checkbox-title-font-size: $font-size-lg !default;
+$at-checkbox-desc-font-size: $font-size-sm !default;
+$at-checkbox-desc-color: $color-grey-2 !default;
+
+/* Countdown */
+$at-countdown-font-size: $font-size-lg !default;
+$at-countdown-num-color: $color-text-base !default;
+$at-countdown-card-num-color: #ff4949 !default;
+$at-countdown-card-num-bg-color: $color-white !default;
+
+/* Curtain */
+$at-curtain-btn-color: $color-white !default;
+
+/* Divider */
+$at-divider-height: 112px;
+$at-divider-content-color: $color-brand !default;
+$at-divider-font-size: $font-size-lg !default;
+$at-divider-line-color: $color-grey-3 !default;
+
+/* Drawer */
+$at-drawer-content-width: 460px !default;
+
+/* FloatLayout */
+$float-layout-height-min: 600px !default;
+$float-layout-height-max: 950px !default;
+$float-layout-header-bg-color: $color-bg-grey !default;
+$float-layout-title-color: $color-text-base !default;
+$float-layout-title-font-size: $font-size-lg !default;
+$float-layout-btn-color: $color-grey-3 !default;
+
+/* Grid */
+$at-grid-text-color: $color-text-base !default;
+$at-grid-font-size: $font-size-lg !default;
+$at-grid-img-size: 80px !default;
+$at-gird-img-size-sm: 50px !default;
+
+/* ImagePicker */
+$at-image-picker-btn-add-color: $color-grey-3 !default;
+$at-image-picker-btn-remove-color: $color-white !default;
+$at-image-picker-btn-remove-bg-color: $color-grey-2 !default;
+
+/* Indexes */
+$at-indexes-nav-color: $color-link !default;
+$at-indexes-nav-font-size: $font-size-sm !default;
+$at-indexes-title-color: $color-black-2 !default;
+$at-indexes-title-font-size: $font-size-sm !default;
+$at-indexes-title-bg-color: $color-grey-6 !default;
+
+/* InputNumber */
+$at-input-number-text-color: $color-text-base !default;
+$at-input-number-font-size: $font-size-base !default;
+$at-input-number-font-size-lg: $font-size-xl !default;
+$at-input-number-btn-color: $color-brand !default;
+$at-input-number-btn-size: 30px !default;
+$at-input-number-btn-size-lg: 36px !default;
+$at-input-number-width-min: 80px !default;
+$at-input-number-width-min-lg: 120px !default;
+
+/* Input */
+$at-input-label-color: $color-text-base !default;
+$at-input-text-color: $color-text-base !default;
+$at-input-font-size: $font-size-lg !default;
+$at-input-placeholder-color: $color-grey-3 !default;
+
+/* List */
+$at-list-thumb-size: 56px !default;
+$at-list-arrow-color: $color-grey-3 !default;
+$at-list-text-color: $color-text-base !default;
+$at-list-content-color: $color-grey-2 !default;
+$at-list-extra-color: $color-grey-2 !default;
+$at-list-extra-width: 235px !default;
+
+/* LoadMore */
+$at-load-more-height: 80px !default;
+$at-load-more-tips-color: $color-grey-1 !default;
+$at-load-more-tips-size: $font-size-lg !default;
+
+/* Loading */
+$at-loading-size: 36px !default;
+$at-loading-color: $color-brand !default;
+
+/* Message */
+$at-message-color: $color-white !default;
+$at-message-font-size: $font-size-base !default;
+$at-message-bg-color: $color-info !default;
+
+/* Modal */
+$at-modal-width: 540px !default;
+$at-modal-header-text-color: $color-text-base !default;
+$at-modal-content-text-color: $color-text-base !default;
+$at-modal-btn-default-color: $color-text-base !default;
+$at-modal-btn-confirm-color: $color-brand !default;
+$at-modal-bg-color: $color-white !default;
+
+/* NavBar */
+$at-nav-bar-title-color: $color-text-base !default;
+$at-nav-bar-link-color: $color-brand !default;
+
+/* NoticeBar */
+$at-noticebar-text-color: #de8c17 !default;
+$at-noticebar-bg-color: #fcf6ed !default;
+$at-noticebar-font-size: $font-size-sm !default;
+$at-noticebar-icon-size: 30px !default;
+$at-noticebar-btn-close-size: 32px !default;
+$at-noticebar-btn-close-color: $color-grey-3 !default;
+
+/* Pagination */
+$at-pagination-margin: 40px !default;
+$at-pagination-num-color: $color-text-base !default;
+$at-pagination-num-font-size: $font-size-base !default;
+$at-pagination-current-num-color: $color-brand !default;
+$at-pagination-icon-color: $color-text-base !default;
+$at-pagination-icon-font-size: 32px !default;
+
+/* Progress */
+$at-progress-height: 16px !default;
+$at-progress-text-size: $font-size-sm !default;
+$at-progress-icon-size: $font-size-xl !default;
+$at-progress-inner-bg-color: $color-grey-6 !default;
+$at-progress-bar-bg-color: $color-brand-light !default;
+$at-progress-bar-bg-color-active: $color-white !default;
+
+/* Radio */
+$at-radio-title-color: $color-text-base !default;
+$at-radio-title-size: $font-size-lg !default;
+$at-radio-desc-color: $color-grey-2 !default;
+$at-radio-desc-size: $font-size-sm !default;
+$at-radio-check-color: $color-brand !default;
+
+/* Range */
+$at-range-slider-size: 28px !default;
+$at-range-rail-height: 2px !default;
+$at-range-rail-bg-color: #e9e9e9 !default;
+$at-range-track-bg-color: $color-brand !default;
+$at-range-slider-color: $color-white !default;
+$at-range-slider-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2) !default;
+
+/* Rate */
+$at-rate-icon-size: 20px !default;
+$at-rate-star-color: #ececec !default;
+$at-rate-star-color-on: #ffca3e !default;
+
+/* SearchBar */
+$at-search-bar-btn-color: $color-white !default;
+$at-search-bar-btn-bg-color: $color-brand !default;
+
+/* SegmentedControl */
+$at-segmented-control-color: $color-brand !default;
+$at-segmented-control-color-active: $color-white !default;
+$at-segmented-control-bg-color: transparent !default;
+$at-segmented-control-font-size: $font-size-base !default;
+
+/* Slider */
+$at-slider-text-color: $color-grey-2 !default;
+$at-slider-text-size: $font-size-base !default;
+
+/* Steps */
+$at-steps-circle-size: 56px !default;
+$at-steps-icon-size: $font-size-sm !default;
+$at-steps-color: $color-white !default;
+$at-steps-color-active: $color-grey-2 !default;
+$at-steps-bg-color: $color-grey-4 !default;
+$at-steps-bg-color-active: $color-brand !default;
+$at-steps-line-color: $color-grey-3 !default;
+$at-steps-title-color: $color-black-0 !default;
+$at-steps-title-size: $font-size-lg !default;
+$at-steps-desc-color: $color-grey-3 !default;
+$at-steps-desc-size: $font-size-sm !default;
+
+/* SwipeAction */
+$at-swipe-action-color: $color-white !default;
+$at-swipe-action-font-size: $font-size-base !default;
+$at-swipe-action-bg-color: $color-white !default;
+$at-swipe-action-option-bg-color: $color-grey-2 !default;
+
+/* Switch */
+$at-switch-title-color: $color-text-base !default;
+$at-switch-title-size: $font-size-base !default;
+
+/* TabBar */
+$at-tab-bar-bg-color: $color-white !default;
+$at-tab-bar-color: $color-text-base !default;
+$at-tab-bar-color-active: $color-brand !default;
+$at-tab-bar-font-size: $font-size-base !default;
+$at-tab-bar-icon-color: $color-grey-0 !default;
+$at-tab-bar-icon-font-size: 48px !default;
+$at-tab-bar-icon-image-size: 50px !default;
+
+/* Tabs */
+$at-tabs-color: $color-text-base !default;
+$at-tabs-color-active: $color-brand !default;
+$at-tabs-font-size: $font-size-base !default;
+$at-tabs-line-height: 1px !default;
+$at-tabs-underline-color: $color-grey-5 !default;
+$at-tabs-bg-color: $color-bg !default;
+
+/* Tag */
+$at-tag-height: 60px !default;
+$at-tag-height-sm: 40px !default;
+$at-tag-color: $color-grey-1 !default;
+$at-tag-color-primary: $color-grey-1 !default;
+$at-tag-color-active: $color-brand-light !default;
+$at-tag-color-primary-active: $color-text-base-inverse !default;
+$at-tag-font-size: $font-size-base !default;
+$at-tag-font-size-sm: $font-size-xs !default;
+$at-tag-bg-color: $color-bg-grey !default;
+$at-tag-bg-color-primary: $color-bg-grey !default;
+$at-tag-bg-color-active: $color-white !default;
+$at-tag-bg-color-primary-active: $at-tag-color-active !default;
+$at-tag-border-color: $at-tag-bg-color !default;
+$at-tag-border-color-primary: $at-tag-bg-color !default;
+$at-tag-border-color-active: $at-tag-color-active !default;
+
+/* Textarea */
+$at-textarea-font-size: $font-size-lg !default;
+$at-textarea-tips-color: $color-text-placeholder !default;
+$at-textarea-tips-size: $font-size-base !default;
+
+/* Timeline */
+$at-timeline-offset-left: 40px !default;
+$at-timeline-title-color: $color-grey-0 !default;
+$at-timeline-title-font-size: $font-size-base !default;
+$at-timeline-desc-color: $color-grey-1 !default;
+$at-timeline-desc-font-size: $font-size-sm !default;
+$at-timeline-dot-size: 24px !default;
+$at-timeline-dot-color: $color-bg !default;
+$at-timeline-dot-border-color: $color-brand-light !default;
+$at-timeline-line-color: $color-border-lighter !default;