SZYGM1.0/src/theme/lighting/var.scss

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

@use 'element-plus/theme-chalk/src/common/var.scss' as common;
@use 'element-plus/theme-chalk/src/mixins/mixins.scss' as *;
@use 'element-plus/theme-chalk/src/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/lighting 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
);

// lighting-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, 'lighting', common.$color-white);
}

// border
$border-color-base: #f5f8ff;
$border-color: () !default;
$border-color: map.merge(
  (
    'lightinger': rgba($border-color-base, 0.35),
    'lighting': 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)
    ),
    'lighting': (
      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(
  (
    'lightinger': rgba($fill-color-base, 0.2),
    'lighting': 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
);