_variables.scss 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. // @use "sass:math";
  2. @import '../tools/functions.scss';
  3. // 间距基础倍数
  4. $uni-space-root: 2 !default;
  5. // 边框半径默认值
  6. $uni-radius-root:5px !default;
  7. $uni-radius: () !default;
  8. // 边框半径断点
  9. $uni-radius: map-deep-merge(
  10. (
  11. 0: 0,
  12. // TODO 当前版本暂时不支持 sm 属性
  13. // 'sm': math.div($uni-radius-root, 2),
  14. null: $uni-radius-root,
  15. 'lg': $uni-radius-root * 2,
  16. 'xl': $uni-radius-root * 6,
  17. 'pill': 9999px,
  18. 'circle': 50%
  19. ),
  20. $uni-radius
  21. );
  22. // 字体家族
  23. $body-font-family: 'Roboto', sans-serif !default;
  24. // 文本
  25. $heading-font-family: $body-font-family !default;
  26. $uni-headings: () !default;
  27. $letterSpacing: -0.01562em;
  28. $uni-headings: map-deep-merge(
  29. (
  30. 'h1': (
  31. size: 32px,
  32. weight: 300,
  33. line-height: 50px,
  34. // letter-spacing:-0.01562em
  35. ),
  36. 'h2': (
  37. size: 28px,
  38. weight: 300,
  39. line-height: 40px,
  40. // letter-spacing: -0.00833em
  41. ),
  42. 'h3': (
  43. size: 24px,
  44. weight: 400,
  45. line-height: 32px,
  46. // letter-spacing: normal
  47. ),
  48. 'h4': (
  49. size: 20px,
  50. weight: 400,
  51. line-height: 30px,
  52. // letter-spacing: 0.00735em
  53. ),
  54. 'h5': (
  55. size: 16px,
  56. weight: 400,
  57. line-height: 24px,
  58. // letter-spacing: normal
  59. ),
  60. 'h6': (
  61. size: 14px,
  62. weight: 500,
  63. line-height: 18px,
  64. // letter-spacing: 0.0125em
  65. ),
  66. 'subtitle': (
  67. size: 12px,
  68. weight: 400,
  69. line-height: 20px,
  70. // letter-spacing: 0.00937em
  71. ),
  72. 'body': (
  73. font-size: 14px,
  74. font-weight: 400,
  75. line-height: 22px,
  76. // letter-spacing: 0.03125em
  77. ),
  78. 'caption': (
  79. 'size': 12px,
  80. 'weight': 400,
  81. 'line-height': 20px,
  82. // 'letter-spacing': 0.03333em,
  83. // 'text-transform': false
  84. )
  85. ),
  86. $uni-headings
  87. );
  88. // 主色
  89. $uni-primary: #2979ff !default;
  90. $uni-primary-disable:lighten($uni-primary,20%) !default;
  91. $uni-primary-light: lighten($uni-primary,25%) !default;
  92. // 辅助色
  93. // 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
  94. $uni-success: #18bc37 !default;
  95. $uni-success-disable:lighten($uni-success,20%) !default;
  96. $uni-success-light: lighten($uni-success,25%) !default;
  97. $uni-warning: #f3a73f !default;
  98. $uni-warning-disable:lighten($uni-warning,20%) !default;
  99. $uni-warning-light: lighten($uni-warning,25%) !default;
  100. $uni-error: #e43d33 !default;
  101. $uni-error-disable:lighten($uni-error,20%) !default;
  102. $uni-error-light: lighten($uni-error,25%) !default;
  103. $uni-info: #8f939c !default;
  104. $uni-info-disable:lighten($uni-info,20%) !default;
  105. $uni-info-light: lighten($uni-info,25%) !default;
  106. // 中性色
  107. // 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
  108. $uni-main-color: #3a3a3a !default; // 主要文字
  109. $uni-base-color: #6a6a6a !default; // 常规文字
  110. $uni-secondary-color: #909399 !default; // 次要文字
  111. $uni-extra-color: #c7c7c7 !default; // 辅助说明
  112. // 边框颜色
  113. $uni-border-1: #F0F0F0 !default;
  114. $uni-border-2: #EDEDED !default;
  115. $uni-border-3: #DCDCDC !default;
  116. $uni-border-4: #B9B9B9 !default;
  117. // 常规色
  118. $uni-black: #000000 !default;
  119. $uni-white: #ffffff !default;
  120. $uni-transparent: rgba($color: #000000, $alpha: 0) !default;
  121. // 背景色
  122. $uni-bg-color: #f7f7f7 !default;
  123. /* 水平间距 */
  124. $uni-spacing-sm: 8px !default;
  125. $uni-spacing-base: 15px !default;
  126. $uni-spacing-lg: 30px !default;
  127. // 阴影
  128. $uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
  129. $uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
  130. $uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
  131. // 蒙版
  132. $uni-mask: rgba($color: #000000, $alpha: 0.4) !default;