// @use 'sass:map';
// @use 'sass:math';

// @use '../common/var.scss' as common;
// @use '../mixins/mixins.scss' as *;
// @use '../color/index.scss' as *;

// $colors: () !default;
// @each $type in common.$types {
//   $colors: map.deep-merge(
//     (
//       $type: (
//         'base': map.get(common.$colors, $type, 'base'),
//       ),
//     ),
//     $colors
//   ) !global;
// }

// // https://sass-lang.com/documentation/values/maps#immutability
// // mix colors with white/black to generate light/dark level
// @mixin set-color-mix-level(
//   $type,
//   $number,
//   $mode: 'light',
//   $mix-color: $color-white
// ) {
//   // hex mix color
//   $colors: map.deep-merge(
//     (
//       $type: (
//         '#{$mode}-#{$number}':
//           mix(
//             $mix-color,
//             map.get($colors, $type, 'base'),
//             math.percentage(math.div($number, 10))
//           ),
//       ),
//     ),
//     $colors
//   ) !global;

//   // for designer to view transparent
//   // $colors: map.deep-merge(
//   //   (
//   //     $type: (
//   //       '#{$mode}-#{$number}':
//   //         rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
//   //     ),
//   //   ),
//   //   $colors
//   // ) !global;
// }

// // Background
// $bg-color: () !default;
// $bg-color: map.merge(
//   (
//     'page': #0a0a0a,
//     '': #141414,
//     'overlay': #1d1e1f,
//   ),
//   $bg-color
// );

// // dark-mode
// @each $type in common.$types {
//   @for $i from 1 through 9 {
//     @include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
//   }
// }
// @each $type in common.$types {
//   @include set-color-mix-level($type, 2, 'dark', common.$color-white);
// }

// // border
// $border-color-base: #f5f8ff;
// $border-color: () !default;
// $border-color: map.merge(
//   (
//     'darker': rgba($border-color-base, 0.35),
//     'dark': rgba($border-color-base, 0.3),
//     '': rgba($border-color-base, 0.25),
//     'light': rgba($border-color-base, 0.2),
//     'lighter': rgba($border-color-base, 0.15),
//     'extra-light': rgba($border-color-base, 0.1),
//   ),
//   $border-color
// );

// // mix to hex to avoid overlay issues
// @each $key, $val in $border-color {
//   $border-color: map.merge(
//     $border-color,
//     (
//       $key: mix-overlay-color($val, map.get($bg-color, '')),
//     )
//   ) !global;
// }

// // Box-shadow
// $box-shadow: () !default;
// $box-shadow: map.merge(
//   (
//     '': (
//       0px 12px 32px 4px rgba(0, 0, 0, 0.36),
//       0px 8px 20px rgba(0, 0, 0, 0.72),
//     ),
//     'light': (
//       0px 0px 12px rgba(0, 0, 0, 0.72),
//     ),
//     'lighter': (
//       0px 0px 6px rgba(0, 0, 0, 0.72),
//     ),
//     'dark': (
//       0px 16px 48px 16px rgba(0, 0, 0, 0.72),
//       0px 12px 32px #000000,
//       0px 8px 16px -8px #000000,
//     ),
//   ),
//   $box-shadow
// );

// // fill
// $fill-color-base: #fafcff;
// $fill-color: () !default;
// $fill-color: map.merge(
//   (
//     'darker': rgba($fill-color-base, 0.2),
//     'dark': rgba($fill-color-base, 0.16),
//     '': rgba($fill-color-base, 0.12),
//     'light': rgba($fill-color-base, 0.08),
//     'lighter': rgba($fill-color-base, 0.04),
//     'extra-light': rgba($fill-color-base, 0.02),
//     'blank': transparent,
//   ),
//   $fill-color
// );

// // mix to hex to avoid overlay issues
// @each $key, $val in $fill-color {
//   @if ($key != 'blank') {
//     $fill-color: map.merge(
//       $fill-color,
//       (
//         $key: mix-overlay-color($val, map.get($bg-color, '')),
//       )
//     ) !global;
//   }
// }

// // text
// $text-color-base: #f0f5ff;
// $text-color: () !default;
// $text-color: map.merge(
//   (
//     'primary': rgba($text-color-base, 0.95),
//     'regular': rgba($text-color-base, 0.85),
//     'secondary': rgba($text-color-base, 0.65),
//     'placeholder': rgba($text-color-base, 0.55),
//     'disabled': rgba($text-color-base, 0.4),
//   ),
//   $text-color
// );
// // mix to hex to avoid overlay issues
// @each $key, $val in $text-color {
//   $text-color: map.merge(
//     $text-color,
//     (
//       $key: mix-overlay-color($val, map.get($bg-color, '')),
//     )
//   ) !global;
// }

// // mask
// $mask-color: () !default;
// $mask-color: map.merge(
//   (
//     '': rgba(0, 0, 0, 0.8),
//     'extra-light': rgba(0, 0, 0, 0.3),
//   ),
//   $mask-color
// );

// // Button
// // css3 var in packages/theme-chalk/src/button.scss
// $button: () !default;
// $button: map.merge(
//   (
//     'disabled-text-color': rgba(255, 255, 255, 0.5),
//   ),
//   $button
// );

// // card
// $card: () !default;
// $card: map.merge(
//   (
//     'bg-color': getCssVar('bg-color', 'overlay'),
//   ),
//   $card
// );

// // Empty
// // css3 var in packages/theme-chalk/src/empty.scss
// $empty: () !default;
// $empty: map.merge(
//   (
//     'fill-color-0': getCssVar('color-black'),
//     'fill-color-1': #4b4b52,
//     'fill-color-2': #36383d,
//     'fill-color-3': #1e1e20,
//     'fill-color-4': #262629,
//     'fill-color-5': #202124,
//     'fill-color-6': #212224,
//     'fill-color-7': #1b1c1f,
//     'fill-color-8': #1c1d1f,
//     'fill-color-9': #18181a,
//   ),
//   $empty
// );