svelte-material-ui/packages/site/src/routes/demo/switch/_Colored.scss at master · hperrin/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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
@use 'sass:color';
@use '@smui/switch/styles' as switch;
@use '@smui/common/theme/color-palette';

$base-color: color-palette.$green-600;
$on-base-color: color-palette.$green-200;
$inverse-color: color.scale($base-color, $lightness: 75%);
$color-state-content: color.scale($base-color, $blackness: 50%);

$disabled-base-color: color-palette.$green-900;
$disabled-inverse-color: color.scale($disabled-base-color, $lightness: 75%);

.my-colored-switch {
  @include switch.theme(
    (
      selected-focus-handle-color: $color-state-content,
      selected-focus-state-layer-color: $base-color,
      selected-focus-track-color: $inverse-color,
      selected-handle-color: $base-color,
      selected-hover-handle-color: $color-state-content,
      selected-hover-state-layer-color: $base-color,
      selected-hover-track-color: $inverse-color,
      selected-icon-color: $on-base-color,
      selected-pressed-handle-color: $color-state-content,
      selected-pressed-state-layer-color: $base-color,
      selected-pressed-track-color: $inverse-color,
      selected-track-color: $inverse-color,

      disabled-selected-handle-color: $disabled-base-color,
      disabled-selected-track-color: $disabled-inverse-color,
    )
  );
}

.my-fully-colored-switch {
  @include switch.theme(
    (
      selected-focus-handle-color: $color-state-content,
      selected-focus-state-layer-color: $base-color,
      selected-focus-track-color: $inverse-color,
      selected-handle-color: $base-color,
      selected-hover-handle-color: $color-state-content,
      selected-hover-state-layer-color: $base-color,
      selected-hover-track-color: $inverse-color,
      selected-icon-color: $on-base-color,
      selected-pressed-handle-color: $color-state-content,
      selected-pressed-state-layer-color: $base-color,
      selected-pressed-track-color: $inverse-color,
      selected-track-color: $inverse-color,

      disabled-selected-handle-color: $disabled-base-color,
      disabled-selected-track-color: $disabled-inverse-color,

      unselected-focus-handle-color: $color-state-content,
      unselected-focus-state-layer-color: $on-base-color,
      unselected-focus-track-color: $inverse-color,
      unselected-handle-color: $base-color,
      unselected-hover-handle-color: $color-state-content,
      unselected-hover-state-layer-color: $on-base-color,
      unselected-hover-track-color: $inverse-color,
      unselected-icon-color: $on-base-color,
      unselected-pressed-handle-color: $color-state-content,
      unselected-pressed-state-layer-color: $on-base-color,
      unselected-pressed-track-color: $inverse-color,
      unselected-track-color: $inverse-color,

      disabled-unselected-handle-color: $disabled-base-color,
      disabled-unselected-track-color: $disabled-inverse-color,
    )
  );
}