for_client/public/plugins/element-plus/theme-chalk/src/dark/var.scss

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

@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}':
          color.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
);