Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
Apq
/
semi-design
peilaus alkaen https://github.com/DouyinFE/semi-design.git
1
0
Haarauta 0
Tiedostot Esitykset 0 Wiki
Haara: refactor-treeSelect-checkbox
Haarat Tunnisteet
semi-design
/
packages
/
semi-theme-default
/
scss
/
global.scss

global.scss 13 KB
Pysyvä linkki Historia Raaka

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 
  1. @import "./_palette.scss";
    2. 

  2. 

  3. body, body[theme-mode="dark"] .semi-always-light {
    4. 

  4.     font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    5. 

  5.     -webkit-font-smoothing: antialiased;
    6. 

  6.     --semi-color-white: rgba(var(--semi-white), 1); // 浅色模式下深色背景内容Inverse
    7. 

  7.     --semi-color-black: rgba(var(--semi-black), 1); // 深色模式下浅色背景内容Inverse
    8. 

  8. 

  9.     --semi-color-primary: rgba(var(--semi-blue-5), 1); // 主要颜色。仅在需要非常强调的情况下使用。
    10. 

  10.     --semi-color-primary-hover: rgba(var(--semi-blue-6), 1); // 主要颜色悬浮态
    11. 

  11.     --semi-color-primary-active: rgba(var(--semi-blue-7), 1); // 主要颜色激活态
    12. 

  12.     --semi-color-primary-disabled: rgba(var(--semi-blue-2), 1); // 主要颜色禁用态
    13. 

  13.     --semi-color-primary-light-default: rgba(var(--semi-blue-0), 1); // 浅版主要颜色（多用于背景）。仅在需要非常强调的情况下使用。
    14. 

  14.     --semi-color-primary-light-hover: rgba(var(--semi-blue-1), 1); // 浅版主要颜色悬浮态
    15. 

  15.     --semi-color-primary-light-active: rgba(var(--semi-blue-2), 1); // 浅版主要颜色激活态
    16. 

  16. 

  17.     --semi-color-secondary: rgba(var(--semi-light-blue-5), 1); // 次要颜色。强调作用次于主要颜色，但仍然具有强调作用。
    18. 

  18.     --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1); // 次要颜色悬浮态
    19. 

  19.     --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1); // 次要颜色激活态
    20. 

  20.     --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1); // 次要颜色禁用态
    21. 

  21.     --semi-color-secondary-light-default: rgba(var(--semi-light-blue-0), 1); // 浅版次要颜色（多用于背景）。强调作用次于主要颜色，但仍然具有强调作用。
    22. 

  22.     --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-1), 1); // 浅版次要颜色悬浮态
    23. 

  23.     --semi-color-secondary-light-active: rgba(var(--semi-light-blue-2), 1); // 浅版次要颜色激活态
    24. 

  24. 

  25.     --semi-color-tertiary: rgba(var(--semi-grey-5), 1); // 第三颜色，可以在页面上多次使用
    26. 

  26.     --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1); // 第三颜色悬浮态
    27. 

  27.     --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1); // 第三颜色激活态
    28. 

  28.     --semi-color-tertiary-light-default: rgba(var(--semi-grey-0), 1); // 浅版第三颜色（多用于背景），可以在页面上多次使用
    29. 

  29.     --semi-color-tertiary-light-hover: rgba(var(--semi-grey-1), 1); // 浅版第三颜色悬浮态
    30. 

  30.     --semi-color-tertiary-light-active: rgba(var(--semi-grey-2), 1); // 浅版第三颜色激活态
    31. 

  31. 

  32.     --semi-color-default: rgba(var(--semi-grey-0), 1); // 不建议使用
    33. 

  33.     --semi-color-default-hover: rgba(var(--semi-grey-1), 1); // 不建议使用
    34. 

  34.     --semi-color-default-active: rgba(var(--semi-grey-2), 1); // 不建议使用
    35. 

  35. 

  36.     --semi-color-info: rgba(var(--semi-blue-5), 1); // 信息色, 通常用于表达客观、中立信息
    37. 

  37.     --semi-color-info-hover: rgba(var(--semi-blue-6), 1); // 信息色悬浮态
    38. 

  38.     --semi-color-info-active: rgba(var(--semi-blue-7), 1); // 信息色激活态
    39. 

  39.     --semi-color-info-disabled: rgba(var(--semi-blue-2), 1); // 信息色禁用态
    40. 

  40.     --semi-color-info-light-default: rgba(var(--semi-blue-0), 1); // 浅版信息色（多用于背景），通常用于表达客观、中立信息
    41. 

  41.     --semi-color-info-light-hover: rgba(var(--semi-blue-1), 1); // 浅版信息色悬浮态
    42. 

  42.     --semi-color-info-light-active: rgba(var(--semi-blue-2), 1); // 浅版信息色激活态
    43. 

  43. 

  44.     --semi-color-success: rgba(var(--semi-green-5), 1); // 成功色，表示安全、成功、开启的状态
    45. 

  45.     --semi-color-success-hover: rgba(var(--semi-green-6), 1); // 成功色悬浮态
    46. 

  46.     --semi-color-success-active: rgba(var(--semi-green-7), 1); // 成功色激活态
    47. 

  47.     --semi-color-success-disabled: rgba(var(--semi-green-2), 1); // 成功色禁用态
    48. 

  48.     --semi-color-success-light-default: rgba(var(--semi-green-0), 1); // 浅版成功色（多用于背景），表示安全、成功、开启的状态
    49. 

  49.     --semi-color-success-light-hover: rgba(var(--semi-green-1), 1); // 浅版成功色悬浮态
    50. 

  50.     --semi-color-success-light-active: rgba(var(--semi-green-2), 1); // 浅版成功色激活态
    51. 

  51. 

  52.     --semi-color-danger: rgba(var(--semi-red-5), 1); // 危险色，表示危险的操作、或需要特别注意的危险信息
    53. 

  53.     --semi-color-danger-hover: rgba(var(--semi-red-6), 1); // 危险色悬浮态
    54. 

  54.     --semi-color-danger-active: rgba(var(--semi-red-7), 1); // 危险色激活态
    55. 

  55.     --semi-color-danger-light-default: rgba(var(--semi-red-0), 1); // 浅版危险色（多用于背景），表示危险的操作、或需要特别注意的危险信息
    56. 

  56.     --semi-color-danger-light-hover: rgba(var(--semi-red-1), 1); // 浅版危险色悬浮态
    57. 

  57.     --semi-color-danger-light-active: rgba(var(--semi-red-2), 1); // 浅版危险色激活态
    58. 

  58. 

  59.     --semi-color-warning: rgba(var(--semi-orange-5), 1); // 警示色，表示警告、不安全的状态
    60. 

  60.     --semi-color-warning-hover: rgba(var(--semi-orange-6), 1); // 警示色悬浮态
    61. 

  61.     --semi-color-warning-active: rgba(var(--semi-orange-7), 1); // 警示色激活态
    62. 

  62.     --semi-color-warning-light-default: rgba(var(--semi-orange-0), 1); // 浅版警示色（多用于背景），表示警告、不安全的状态
    63. 

  63.     --semi-color-warning-light-hover: rgba(var(--semi-orange-1), 1); // 浅版警示色悬浮态
    64. 

  64.     --semi-color-warning-light-active: rgba(var(--semi-orange-2), 1); // 浅版警示色激活态
    65. 

  65. 

  66.     --semi-color-focus-border: rgba(var(--semi-blue-5), 1); // 多用于边框激活态颜色
    67. 

  67. 

  68.     --semi-color-disabled-text: rgba(var(--semi-grey-9), .35); // 禁用态 - 文字
    69. 

  69.     --semi-color-disabled-border: rgba(var(--semi-grey-1), 1); // 禁用态 - 描边
    70. 

  70.     --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1); // 禁用态 - 背景
    71. 

  71.     --semi-color-disabled-fill: rgba(var(--semi-grey-8), .04); // 禁用态 - 填充
    72. 

  72. 

  73.     --semi-color-shadow: rgba(var(--semi-black), .04); // 用于模拟描边的阴影颜色
    74. 

  74. 

  75.     --semi-color-link: rgba(var(--semi-blue-5), 1); // 链接颜色
    76. 

  76.     --semi-color-link-hover: rgba(var(--semi-blue-6), 1); // 链接颜色 - 悬浮态
    77. 

  77.     --semi-color-link-active: rgba(var(--semi-blue-7), 1); // 链接颜色 - 激活态
    78. 

  78.     --semi-color-link-visited: rgba(var(--semi-blue-5), 1); // 链接颜色 - 已访问
    79. 

  79. 

  80.     --semi-color-border: rgba(var(--semi-grey-9), .08); // 默认描边颜色
    81. 

  81.     --semi-color-nav-bg: rgba(var(--semi-white), 1); // 导航背景色
    82. 

  82. 

  83.     --semi-color-overlay-bg: rgba(22, 22, 26, .6); // 蒙层背景色
    84. 

  84. 

  85.     --semi-color-fill-0: rgba(var(--semi-grey-8), .05); // 填充色 - 默认态
    86. 

  86.     --semi-color-fill-1: rgba(var(--semi-grey-8), .09); // 填充色 - 悬浮态
    87. 

  87.     --semi-color-fill-2: rgba(var(--semi-grey-8), .13); // 填充色 - 激活态
    88. 

  88.     --semi-color-bg-0: rgba(var(--semi-white), 1); // 背景色 - 最下层（底部页面）
    89. 

  89.     --semi-color-bg-1: rgba(var(--semi-white), 1); // 背景色 - 次下层（页面中需要提升的内容）
    90. 

  90.     --semi-color-bg-2: rgba(var(--semi-white), 1); // 背景色 - 中间层（模态等容器）
    91. 

  91.     --semi-color-bg-3: rgba(var(--semi-white), 1); // 背景色 - 次上层（通知，Toast等）
    92. 

  92.     --semi-color-bg-4: rgba(var(--semi-white), 1); // 背景色 - 最上层（特殊）
    93. 

  93.     --semi-color-text-0: rgba(var(--semi-grey-9), 1); // 文本/图标颜色 - 最主要
    94. 

  94.     --semi-color-text-1: rgba(var(--semi-grey-9), .8); // 文本/图标颜色 - 稍次要
    95. 

  95.     --semi-color-text-2: rgba(var(--semi-grey-9), .62); // 文本/图标颜色 - 次要
    96. 

  96.     --semi-color-text-3: rgba(var(--semi-grey-9), .35); // 文本/图标颜色 - 最次要
    97. 

  97.     --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1); // 用于toast, modal, popover等需要提升层级的界面元素
    98. 

  98.     --semi-border-radius-extra-small: 3px; // 超小圆角，用于 checkbox 内圆角
    99. 

  99.     --semi-border-radius-small: 3px; // 小圆角, 用于 button、tag、tabs 等大多数组件, 比较常用
    100. 

  100.     --semi-border-radius-medium: 6px; // 中圆角, 用于 dropdown、scrollist、transfer 等菜单类组件
    101. 

  101.     --semi-border-radius-large: 12px; // 大圆角, 用于 modal
    102. 

  102.     --semi-border-radius-circle: 50%; // 全圆角, 用于 avatar, badge 等组件
    103. 

  103.     --semi-border-radius-full: 9999px; // 用于创建全尺寸圆角，如胶囊标签等
    104. 

  104. }
    105. 

  105. 

  106. body[theme-mode="dark"], body .semi-always-dark {
    107. 

  107.     font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    108. 

  108.     -webkit-font-smoothing: antialiased;
    109. 

  109.     --semi-color-white: rgba(228, 231, 245, 1);
    110. 

  110.     --semi-color-black: rgba(var(--semi-black), 1);
    111. 

  111.     --semi-color-primary: rgba(var(--semi-blue-5), 1);
    112. 

  112.     --semi-color-primary-hover: rgba(var(--semi-blue-6), 1);
    113. 

  113.     --semi-color-primary-active: rgba(var(--semi-blue-7), 1);
    114. 

  114.     --semi-color-primary-disabled: rgba(var(--semi-blue-2), 1);
    115. 

  115.     --semi-color-primary-light-default: rgba(var(--semi-blue-5), .2);
    116. 

  116.     --semi-color-primary-light-hover: rgba(var(--semi-blue-5), .3);
    117. 

  117.     --semi-color-primary-light-active: rgba(var(--semi-blue-5), .4);
    118. 

  118.     --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
    119. 

  119.     --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
    120. 

  120.     --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
    121. 

  121.     --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
    122. 

  122.     --semi-color-secondary-light-default: rgba(var(--semi-light-blue-5), .2);
    123. 

  123.     --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-5), .3);
    124. 

  124.     --semi-color-secondary-light-active: rgba(var(--semi-light-blue-5), .4);
    125. 

  125.     --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
    126. 

  126.     --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
    127. 

  127.     --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
    128. 

  128.     --semi-color-tertiary-light-default: rgba(var(--semi-grey-5), .2);
    129. 

  129.     --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5), .3);
    130. 

  130.     --semi-color-tertiary-light-active: rgba(var(--semi-grey-5), .4);
    131. 

  131.     --semi-color-default: rgba(var(--semi-grey-0), 1);
    132. 

  132.     --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
    133. 

  133.     --semi-color-default-active: rgba(var(--semi-grey-2), 1);
    134. 

  134.     --semi-color-info: rgba(var(--semi-blue-5), 1);
    135. 

  135.     --semi-color-info-hover: rgba(var(--semi-blue-6), 1);
    136. 

  136.     --semi-color-info-active: rgba(var(--semi-blue-7), 1);
    137. 

  137.     --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
    138. 

  138.     --semi-color-info-light-default: rgba(var(--semi-blue-5), .2);
    139. 

  139.     --semi-color-info-light-hover: rgba(var(--semi-blue-5), .3);
    140. 

  140.     --semi-color-info-light-active: rgba(var(--semi-blue-5), .4);
    141. 

  141.     --semi-color-success: rgba(var(--semi-green-5), 1);
    142. 

  142.     --semi-color-success-hover: rgba(var(--semi-green-6), 1);
    143. 

  143.     --semi-color-success-active: rgba(var(--semi-green-7), 1);
    144. 

  144.     --semi-color-success-disabled: rgba(var(--semi-green-2), 1);
    145. 

  145.     --semi-color-success-light-default: rgba(var(--semi-green-5), .2);
    146. 

  146.     --semi-color-success-light-hover: rgba(var(--semi-green-5), .3);
    147. 

  147.     --semi-color-success-light-active: rgba(var(--semi-green-5), .4);
    148. 

  148.     --semi-color-danger: rgba(var(--semi-red-5), 1);
    149. 

  149.     --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
    150. 

  150.     --semi-color-danger-active: rgba(var(--semi-red-7), 1);
    151. 

  151.     --semi-color-danger-light-default: rgba(var(--semi-red-5), .2);
    152. 

  152.     --semi-color-danger-light-hover: rgba(var(--semi-red-5), .3);
    153. 

  153.     --semi-color-danger-light-active: rgba(var(--semi-red-5), .4);
    154. 

  154.     --semi-color-warning: rgba(var(--semi-orange-5), 1);
    155. 

  155.     --semi-color-warning-hover: rgba(var(--semi-orange-6), 1);
    156. 

  156.     --semi-color-warning-active: rgba(var(--semi-orange-7), 1);
    157. 

  157.     --semi-color-warning-light-default: rgba(var(--semi-orange-5), .2);
    158. 

  158.     --semi-color-warning-light-hover: rgba(var(--semi-orange-5), .3);
    159. 

  159.     --semi-color-warning-light-active: rgba(var(--semi-orange-5), .4);
    160. 

  160.     --semi-color-focus-border: rgba(var(--semi-blue-5), 1);
    161. 

  161.     --semi-color-disabled-text: rgba(var(--semi-grey-9), .35);
    162. 

  162.     --semi-color-disabled-border: rgba(var(--semi-grey-1), 1);
    163. 

  163.     --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
    164. 

  164.     --semi-color-disabled-fill: rgba(var(--semi-grey-8), .04);
    165. 

  165.     --semi-color-link: rgba(var(--semi-blue-5), 1);
    166. 

  166.     --semi-color-link-hover: rgba(var(--semi-blue-6), 1);
    167. 

  167.     --semi-color-link-active: rgba(var(--semi-blue-7), 1);
    168. 

  168.     --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
    169. 

  169.     --semi-color-nav-bg: rgba(35, 36, 41, 1);
    170. 

  170.     --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25);
    171. 

  171.     --semi-color-overlay-bg: rgba(22, 22, 26, .6);
    172. 

  172.     --semi-color-fill-0: rgba(var(--semi-white), .12);
    173. 

  173.     --semi-color-fill-1: rgba(var(--semi-white), .16);
    174. 

  174.     --semi-color-fill-2: rgba(var(--semi-white), .20);
    175. 

  175.     --semi-color-border: rgba(var(--semi-white), .08);
    176. 

  176.     --semi-color-shadow: rgba(var(--semi-black), .04);
    177. 

  177.     --semi-color-bg-0: rgba(22, 22, 26, 1);
    178. 

  178.     --semi-color-bg-1: rgba(35, 36, 41, 1);
    179. 

  179.     --semi-color-bg-2: rgba(53, 54, 60, 1);
    180. 

  180.     --semi-color-bg-3: rgba(67, 68, 74, 1);
    181. 

  181.     --semi-color-bg-4: rgba(79, 81, 89, 1);
    182. 

  182.     --semi-color-text-0: rgba(var(--semi-grey-9), 1);
    183. 

  183.     --semi-color-text-1: rgba(var(--semi-grey-9), .8);
    184. 

  184.     --semi-color-text-2: rgba(var(--semi-grey-9), .6);
    185. 

  185.     --semi-color-text-3: rgba(var(--semi-grey-9), .35);
    186. 

  186.     --semi-border-radius-extra-small: 3px;
    187. 

  187.     --semi-border-radius-small: 3px;
    188. 

  188.     --semi-border-radius-medium: 6px;
    189. 

  189.     --semi-border-radius-large: 12px;
    190. 

  190.     --semi-border-radius-circle: 50%;
    191. 

  191.     --semi-border-radius-full: 9999px;
    192. 

  192. }
    193.