var.less 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. // Color Palette
  2. @black: #000;
  3. @white: #fff;
  4. @gray-1: #f7f8fa;
  5. @gray-2: #f2f3f5;
  6. @gray-3: #ebedf0;
  7. @gray-4: #dcdee0;
  8. @gray-5: #c8c9cc;
  9. @gray-6: #969799;
  10. @gray-7: #646566;
  11. @gray-8: #323233;
  12. @red: #ee0a24;
  13. @blue: #1989fa;
  14. @orange: #ff976a;
  15. @orange-dark: #ed6a0c;
  16. @orange-light: #fffbe8;
  17. @green: #07c160;
  18. // Gradient Colors
  19. @gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
  20. @gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
  21. // Component Colors
  22. @primary-color: var(--van-blue);
  23. @success-color: var(--van-green);
  24. @danger-color: var(--van-red);
  25. @warning-color: var(--van-orange);
  26. @text-color: var(--van-gray-8);
  27. @text-color-2: var(--van-gray-6);
  28. @text-color-3: var(--van-gray-5);
  29. @text-link-color: #576b95;
  30. @active-color: var(--van-gray-2);
  31. @active-opacity: 0.6;
  32. @disabled-opacity: 0.5;
  33. @background-color: var(--van-gray-1);
  34. @background-color-light: var(--van-white);
  35. // Padding
  36. @padding-base: 4px;
  37. @padding-xs: @padding-base * 2;
  38. @padding-sm: @padding-base * 3;
  39. @padding-md: @padding-base * 4;
  40. @padding-lg: @padding-base * 6;
  41. @padding-xl: @padding-base * 8;
  42. // Font
  43. @font-size-xs: 10px;
  44. @font-size-sm: 12px;
  45. @font-size-md: 14px;
  46. @font-size-lg: 16px;
  47. @font-weight-bold: 500;
  48. @line-height-xs: 14px;
  49. @line-height-sm: 18px;
  50. @line-height-md: 20px;
  51. @line-height-lg: 22px;
  52. @base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
  53. Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
  54. 'Microsoft Yahei', sans-serif;
  55. @price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
  56. sans-serif;
  57. // Animation
  58. @animation-duration-base: 0.3s;
  59. @animation-duration-fast: 0.2s;
  60. @animation-timing-function-enter: ease-out;
  61. @animation-timing-function-leave: ease-in;
  62. // Border
  63. @border-color: var(--van-gray-3);
  64. @border-width-base: 1px;
  65. @border-radius-sm: 2px;
  66. @border-radius-md: 4px;
  67. @border-radius-lg: 8px;
  68. @border-radius-max: 999px;