default.scss 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. @import '../mixins/create.scss';
  2. @import '../color/colorPalette.scss';
  3. @import '../color/colors.scss';
  4. $blue-1: genColor($blue, 1);
  5. $blue-2: genColor($blue, 2);
  6. $blue-3: genColor($blue, 3);
  7. $blue-4: genColor($blue, 4);
  8. $blue-5: genColor($blue, 5);
  9. $blue-6: $blue;
  10. $blue-7: genColor($blue, 7);
  11. $blue-8: genColor($blue, 8);
  12. $blue-9: genColor($blue, 9);
  13. $blue-10: genColor($blue, 10);
  14. $info-color-1: genColor($info-color, 1);
  15. $info-color-2: genColor($info-color, 2);
  16. $info-color-3: genColor($info-color, 3);
  17. $info-color-4: genColor($info-color, 4);
  18. $info-color-5: genColor($info-color, 5);
  19. $info-color-6: $info-color;
  20. $info-color-7: genColor($info-color, 7);
  21. $info-color-8: genColor($info-color, 8);
  22. $info-color-9: genColor($info-color, 9);
  23. $info-color-10: genColor($info-color, 10);
  24. $primary-color-1: create-var('primary-color-1', genColor($primary-color, 1)); // 浅色/白底悬浮
  25. $primary-color-2: create-var('primary-color-2', genColor($primary-color, 2)); // 文字禁用
  26. $primary-color-3: create-var('primary-color-3', genColor($primary-color, 3)); // 一般禁用
  27. $primary-color-4: create-var('primary-color-4', genColor($primary-color, 4)); // 特殊场景 禁用
  28. $primary-color-5: create-var('primary-color-5', genColor($primary-color, 5)); // 悬浮
  29. $primary-color-6: create-var('primary-color-6', $primary-color); // 常规
  30. $primary-color-7: create-var('primary-color-7', genColor($primary-color, 7)); // 点击
  31. $primary-color-8: create-var('primary-color-8', genColor($primary-color, 8)); //
  32. $primary-color-9: create-var('primary-color-9', genColor($primary-color, 9));
  33. $primary-color-10: create-var('primary-color-10', genColor($primary-color, 10));
  34. $error-color-1: create-var('error-color-1', genColor($error-color, 1));
  35. $error-color-2: create-var('error-color-2', genColor($error-color, 2));
  36. $error-color-3: create-var('error-color-3', genColor($error-color, 3));
  37. $error-color-4: create-var('error-color-4', genColor($error-color, 4));
  38. $error-color-5: create-var('error-color-5', genColor($error-color, 5));
  39. $error-color-6: create-var('error-color-6', $error-color);
  40. $error-color-7: create-var('error-color-7', genColor($error-color, 7));
  41. $error-color-8: create-var('error-color-8', genColor($error-color, 8));
  42. $error-color-9: create-var('error-color-9', genColor($error-color, 9));
  43. $error-color-10: create-var('error-color-10', genColor($error-color, 10));
  44. $warning-color-1: create-var('warning-color-1', genColor($warning-color, 1));
  45. $warning-color-2: create-var('warning-color-2', genColor($warning-color, 2));
  46. $warning-color-3: create-var('warning-color-3', genColor($warning-color, 3));
  47. $warning-color-4: create-var('warning-color-4', genColor($warning-color, 4));
  48. $warning-color-5: create-var('warning-color-5', genColor($warning-color, 5));
  49. $warning-color-6: create-var('warning-color-6', $warning-color);
  50. $warning-color-7: create-var('warning-color-7', genColor($warning-color, 7));
  51. $warning-color-8: create-var('warning-color-8', genColor($warning-color, 8));
  52. $warning-color-9: create-var('warning-color-9', genColor($warning-color, 9));
  53. $warning-color-10: create-var('warning-color-10', genColor($warning-color, 10));
  54. $success-color-1: create-var('success-color-1', genColor($success-color, 1)); // 浅色/白底悬浮
  55. $success-color-2: create-var('success-color-2', genColor($success-color, 2)); // 文字禁用
  56. $success-color-3: create-var('success-color-3', genColor($success-color, 3)); // 一般禁用
  57. $success-color-4: create-var('success-color-4', genColor($success-color, 4)); // 特殊场景
  58. $success-color-5: create-var('success-color-5', genColor($success-color, 5)); // 悬浮
  59. $success-color-6: create-var('success-color-6', $success-color); // 常规
  60. $success-color-7: create-var('success-color-7', genColor($success-color, 7)); // 点击
  61. $success-color-8: create-var('success-color-8', genColor($success-color, 8));
  62. $success-color-9: create-var('success-color-9', genColor($success-color, 9));
  63. $success-color-10: create-var('success-color-10', genColor($success-color, 10));
  64. $white: create-var('white', #fff);
  65. $gray-1: create-var('gray-1', #f3f3f3);
  66. $gray-2: create-var('gray-2', #eeeeee);
  67. $gray-3: create-var('gray-3', #e7e7e7);
  68. $gray-4: create-var('gray-4', #dcdcdc);
  69. $gray-5: create-var('gray-5', #c5c5c5);
  70. $gray-6: create-var('gray-6', #a6a6a6);
  71. $gray-7: create-var('gray-7', #8b8b8b);
  72. $gray-8: create-var('gray-8', #777777);
  73. $gray-9: create-var('gray-9', #5e5e5e);
  74. $gray-10: create-var('gray-10', #4b4b4b);
  75. $gray-11: create-var('gray-11', #383838);
  76. $gray-12: create-var('gray-12', #2c2c2c);
  77. $gray-13: create-var('gray-13', #242424);
  78. $gray-14: create-var('gray-14', #181818);
  79. $black: create-var('black', #000);
  80. // $text-color-1: create-var('text-color-1', rgba(0,0,0,0.88)); //primary
  81. // $text-color-2: create-var('text-color-2', rgba(0,0,0,0.65)); //secondary
  82. // $text-color-3: create-var('text-color-3', rgba(0,0,0,0.45)); //placeholder
  83. // $text-color-4: create-var('text-color-4', rgba(0,0,0,0.25)); //disabled
  84. $text-color-1: create-var('text-color-1', #000000E0); // primary (rgba(0,0,0,0.88))
  85. $text-color-2: create-var('text-color-2', #000000A6); // secondary (rgba(0,0,0,0.65))
  86. $text-color-3: create-var('text-color-3', #00000073); // placeholder (rgba(0,0,0,0.45))
  87. $text-color-4: create-var('text-color-4', #00000040); // disabled (rgba(0,0,0,0.25))
  88. // 容器
  89. $bg-color-page: create-var('bg-color-page', $gray-1); // 整体背景色 布局
  90. $bg-color-container: create-var('bg-color-container', #fff); // 一级容器背景 组件
  91. $bg-color-elevated: create-var('bg-color-elevated', #fff); // 二级容器背景 浮层
  92. $bg-color-spotlight: create-var('bg-color-spotlight', rgba(0, 0, 0, 0.85)); // 引起注意的如 Tooltip
  93. $bg-color-mask: create-var('bg-color-mask', rgba(0, 0, 0, 0.45)); // 蒙层
  94. // 填充
  95. // $fill-1: create-var('fill-1', rgba(0, 0, 0, 0.15));
  96. // $fill-2: create-var('fill-2', rgba(0, 0, 0, 0.06));
  97. // $fill-3: create-var('fill-3', rgba(0, 0, 0, 0.04));
  98. // $fill-4: create-var('fill-4', rgba(0, 0, 0, 0.02));
  99. $fill-1: create-var('fill-1', #00000026); // rgba(0,0,0,0.15)
  100. $fill-2: create-var('fill-2', #0000000F); // rgba(0,0,0,0.06)
  101. $fill-3: create-var('fill-3', #0000000A); // rgba(0,0,0,0.04)
  102. $fill-4: create-var('fill-4', #00000005); // rgba(0,0,0,0.02)
  103. // 描边
  104. $border-color-1: create-var('border-color-1', $gray-2); // 浅色
  105. $border-color-2: create-var('border-color-2', $gray-3); // 一般
  106. $border-color-3: create-var('border-color-3', $gray-4); // 深/悬浮
  107. $border-color-4: create-var('border-color-4', $gray-6); // 重/按钮描边
  108. $alpha-disabled: create-var('alpha-disabled', 0.5);
  109. $alpha-pressed: create-var('alpha-pressed', 0.07);
  110. // 投影
  111. /* #ifndef UNI-APP-X && APP */
  112. $shadow-1: create-var(
  113. shadow-1,
  114. 0 1px 10px rgba(0, 0, 0, 0.05),
  115. 0 4px 5px rgba(0, 0, 0, 0.08),
  116. 0 2px 4px -1px rgba(0, 0, 0, 0.12)
  117. );
  118. $shadow-2: create-var(
  119. 'shadow-2',
  120. 0 1px 10px rgba(0, 0, 0, 0.05),
  121. 0 4px 5px rgba(0, 0, 0, 0.08),
  122. 0 2px 4px -1px rgba(0, 0, 0, 0.12)
  123. );
  124. $shadow-3: create-var(
  125. shadow-3,
  126. 0 6px 30px 5px rgba(0, 0, 0, 0.05),
  127. 0 16px 24px 2px rgba(0, 0, 0, 0.04),
  128. 0 8px 10px -5px rgba(0, 0, 0, 0.08)
  129. );
  130. /* #endif */
  131. /* #ifdef UNI-APP-X && APP */
  132. $shadow-1: create-var(
  133. shadow-1,
  134. 0 1px 10px rgba(0, 0, 0, 0.05)
  135. );
  136. $shadow-2: create-var(
  137. 'shadow-2',
  138. 0 1px 10px rgba(0, 0, 0, 0.05)
  139. );
  140. $shadow-3: create-var(
  141. shadow-3,
  142. /* #ifdef APP-HARMONY
  143. 0 6px 30px 5px $gray-3
  144. /* #endif */
  145. /* #ifndef APP-HARMONY
  146. 0 6px 30px 5px rgba(0, 0, 0, 0.05)
  147. /* #endif */
  148. );
  149. /* #endif */
  150. $shadow-4: create-var(shadow-4, 0 2px 8px 0 rgba(0, 0, 0, .06));
  151. // 基础颜色的扩展 用于 聚焦 / 禁用 / 点击 等状态
  152. $primary-color-focus: create-var('primary-color-focus', $primary-color-1);// focus态,包括鼠标和键盘
  153. $primary-color-active: create-var('primary-color-active', $primary-color-8);// 点击态
  154. $primary-color-disabled: create-var('primary-color-disabled', $primary-color-3);
  155. $primary-color-light: create-var('primary-color-light', $primary-color-1); // 浅色的选中态
  156. $primary-color-light-active: create-var('primary-color-light-active', $primary-color-2); // 浅色的选中态
  157. $primary-color: create-var(primary-color, $primary-color);
  158. $error-color: create-var(error-color, $error-color);
  159. $warning-color: create-var(warning-color, $warning-color);
  160. $success-color: create-var(success-color, $success-color);
  161. $info-color: create-var(info-color, $info-color);