var.scss 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. @use 'sass:map';
  2. @use 'sass:math';
  3. @use '../common/var.scss' as common;
  4. @use '../mixins/mixins.scss' as *;
  5. @use '../color/index.scss' as *;
  6. $colors: () !default;
  7. @each $type in common.$types {
  8. $colors: map.deep-merge(
  9. (
  10. $type: (
  11. 'base': map.get(common.$colors, $type, 'base'),
  12. ),
  13. ),
  14. $colors
  15. ) !global;
  16. }
  17. // https://sass-lang.com/documentation/values/maps#immutability
  18. // mix colors with white/black to generate light/dark level
  19. @mixin set-color-mix-level(
  20. $type,
  21. $number,
  22. $mode: 'light',
  23. $mix-color: $color-white
  24. ) {
  25. // hex mix color
  26. $colors: map.deep-merge(
  27. (
  28. $type: (
  29. '#{$mode}-#{$number}':
  30. mix(
  31. $mix-color,
  32. map.get($colors, $type, 'base'),
  33. math.percentage(math.div($number, 10))
  34. ),
  35. ),
  36. ),
  37. $colors
  38. ) !global;
  39. // for designer to view transparent
  40. // $colors: map.deep-merge(
  41. // (
  42. // $type: (
  43. // '#{$mode}-#{$number}':
  44. // rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
  45. // ),
  46. // ),
  47. // $colors
  48. // ) !global;
  49. }
  50. // Background
  51. $bg-color: () !default;
  52. $bg-color: map.merge(
  53. (
  54. 'page': #0a0a0a,
  55. '': #141414,
  56. 'overlay': #1d1e1f,
  57. ),
  58. $bg-color
  59. );
  60. // dark-mode
  61. @each $type in common.$types {
  62. @for $i from 1 through 9 {
  63. @include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
  64. }
  65. }
  66. @each $type in common.$types {
  67. @include set-color-mix-level($type, 2, 'dark', common.$color-white);
  68. }
  69. // border
  70. $border-color-base: #f5f8ff;
  71. $border-color: () !default;
  72. $border-color: map.merge(
  73. (
  74. 'darker': rgba($border-color-base, 0.35),
  75. 'dark': rgba($border-color-base, 0.3),
  76. '': rgba($border-color-base, 0.25),
  77. 'light': rgba($border-color-base, 0.2),
  78. 'lighter': rgba($border-color-base, 0.15),
  79. 'extra-light': rgba($border-color-base, 0.1),
  80. ),
  81. $border-color
  82. );
  83. // mix to hex to avoid overlay issues
  84. @each $key, $val in $border-color {
  85. $border-color: map.merge(
  86. $border-color,
  87. (
  88. $key: mix-overlay-color($val, map.get($bg-color, '')),
  89. )
  90. ) !global;
  91. }
  92. // Box-shadow
  93. $box-shadow: () !default;
  94. $box-shadow: map.merge(
  95. (
  96. '': (
  97. 0px 12px 32px 4px rgba(0, 0, 0, 0.36),
  98. 0px 8px 20px rgba(0, 0, 0, 0.72),
  99. ),
  100. 'light': (
  101. 0px 0px 12px rgba(0, 0, 0, 0.72),
  102. ),
  103. 'lighter': (
  104. 0px 0px 6px rgba(0, 0, 0, 0.72),
  105. ),
  106. 'dark': (
  107. 0px 16px 48px 16px rgba(0, 0, 0, 0.72),
  108. 0px 12px 32px #000000,
  109. 0px 8px 16px -8px #000000,
  110. ),
  111. ),
  112. $box-shadow
  113. );
  114. // fill
  115. $fill-color-base: #fafcff;
  116. $fill-color: () !default;
  117. $fill-color: map.merge(
  118. (
  119. 'darker': rgba($fill-color-base, 0.2),
  120. 'dark': rgba($fill-color-base, 0.16),
  121. '': rgba($fill-color-base, 0.12),
  122. 'light': rgba($fill-color-base, 0.08),
  123. 'lighter': rgba($fill-color-base, 0.04),
  124. 'extra-light': rgba($fill-color-base, 0.02),
  125. 'blank': transparent,
  126. ),
  127. $fill-color
  128. );
  129. // mix to hex to avoid overlay issues
  130. @each $key, $val in $fill-color {
  131. @if ($key != 'blank') {
  132. $fill-color: map.merge(
  133. $fill-color,
  134. (
  135. $key: mix-overlay-color($val, map.get($bg-color, '')),
  136. )
  137. ) !global;
  138. }
  139. }
  140. // text
  141. $text-color-base: #f0f5ff;
  142. $text-color: () !default;
  143. $text-color: map.merge(
  144. (
  145. 'primary': rgba($text-color-base, 0.95),
  146. 'regular': rgba($text-color-base, 0.85),
  147. 'secondary': rgba($text-color-base, 0.65),
  148. 'placeholder': rgba($text-color-base, 0.55),
  149. 'disabled': rgba($text-color-base, 0.4),
  150. ),
  151. $text-color
  152. );
  153. // mix to hex to avoid overlay issues
  154. @each $key, $val in $text-color {
  155. $text-color: map.merge(
  156. $text-color,
  157. (
  158. $key: mix-overlay-color($val, map.get($bg-color, '')),
  159. )
  160. ) !global;
  161. }
  162. // mask
  163. $mask-color: () !default;
  164. $mask-color: map.merge(
  165. (
  166. '': rgba(0, 0, 0, 0.8),
  167. 'extra-light': rgba(0, 0, 0, 0.3),
  168. ),
  169. $mask-color
  170. );
  171. // Button
  172. // css3 var in packages/theme-chalk/src/button.scss
  173. $button: () !default;
  174. $button: map.merge(
  175. (
  176. 'disabled-text-color': rgba(255, 255, 255, 0.5),
  177. ),
  178. $button
  179. );
  180. // card
  181. $card: () !default;
  182. $card: map.merge(
  183. (
  184. 'bg-color': getCssVar('bg-color', 'overlay'),
  185. ),
  186. $card
  187. );
  188. // Empty
  189. // css3 var in packages/theme-chalk/src/empty.scss
  190. $empty: () !default;
  191. $empty: map.merge(
  192. (
  193. 'fill-color-0': getCssVar('color-black'),
  194. 'fill-color-1': #4b4b52,
  195. 'fill-color-2': #36383d,
  196. 'fill-color-3': #1e1e20,
  197. 'fill-color-4': #262629,
  198. 'fill-color-5': #202124,
  199. 'fill-color-6': #212224,
  200. 'fill-color-7': #1b1c1f,
  201. 'fill-color-8': #1c1d1f,
  202. 'fill-color-9': #18181a,
  203. ),
  204. $empty
  205. );