svelte-material-ui/packages/switch/_mixins.scss at master · BonaFideIT/svelte-material-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
@use 'sass:color';
@use '@material/feature-targeting/index' as feature-targeting;
@use '@material/theme/theme-color';
@use '@material/theme/index' as theme;
@use '@material/switch/index' as switch;

$margin: 14px !default;

$_inverse-secondary: color.scale(
  theme-color.prop-value(secondary),
  $lightness: 75%
);
$_secondary-state-content: color.scale(
  theme-color.prop-value(secondary),
  $blackness: 50%
);

@mixin core-styles($query: feature-targeting.all()) {
  .mdc-switch {
    margin: $margin;
  }

  .mdc-switch.smui-switch--color-secondary {
    // See: https://github.com/material-components/material-components-web/blob/v14.0.0/packages/mdc-switch/_switch-theme.scss#L76
    @include switch.theme(
      (
        disabled-selected-icon-color: on-secondary,
        disabled-unselected-icon-color: on-secondary,
        selected-focus-handle-color: $_secondary-state-content,
        selected-focus-state-layer-color: secondary,
        selected-focus-track-color: $_inverse-secondary,
        selected-handle-color: secondary,
        selected-hover-handle-color: $_secondary-state-content,
        selected-hover-state-layer-color: secondary,
        selected-hover-track-color: $_inverse-secondary,
        selected-icon-color: on-secondary,
        selected-pressed-handle-color: $_secondary-state-content,
        selected-pressed-state-layer-color: secondary,
        selected-pressed-track-color: $_inverse-secondary,
        selected-track-color: $_inverse-secondary,
        unselected-icon-color: on-secondary,
      )
    );
  }
}