UNPKG

5.51 kBSCSSView Raw
1//
2// Copyright 2021 Google Inc.
3//
4// Permission is hereby granted, free of charge, to any person obtaining a copy
5// of this software and associated documentation files (the "Software"), to deal
6// in the Software without restriction, including without limitation the rights
7// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8// copies of the Software, and to permit persons to whom the Software is
9// furnished to do so, subject to the following conditions:
10//
11// The above copyright notice and this permission notice shall be included in
12// all copies or substantial portions of the Software.
13//
14// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20// THE SOFTWARE.
21//
22
23@use 'sass:map';
24@use '@material/theme/theme';
25@use '@material/theme/keys';
26@use '@material/tokens/resolvers';
27@use './chip-theme';
28
29$_light-theme: (
30 container-shape: null,
31 container-height: null,
32 elevated-container-shadow-color: null,
33 flat-container-elevation: null,
34 flat-unselected-outline-color: null,
35 flat-unselected-outline-width: null,
36 flat-selected-container-color: null,
37 flat-selected-outline-color: null,
38 flat-selected-outline-width: null,
39 elevated-container-elevation: null,
40 elevated-unselected-container-color: null,
41 elevated-selected-container-color: null,
42 label-text-font: null,
43 label-text-line-height: null,
44 label-text-size: null,
45 label-text-weight: null,
46 label-text-tracking: null,
47 unselected-label-text-color: null,
48 selected-label-text-color: null,
49 with-icon-icon-size: null,
50 with-icon-unselected-icon-color: null,
51 with-icon-selected-icon-color: null,
52 disabled-label-text-color: null,
53 disabled-label-text-opacity: null,
54 flat-disabled-unselected-outline-color: null,
55 flat-disabled-unselected-outline-opacity: null,
56 flat-disabled-selected-outline-color: null,
57 flat-disabled-selected-outline-opacity: null,
58 with-icon-disabled-icon-color: null,
59 with-icon-disabled-icon-opacity: null,
60 elevated-disabled-container-elevation: null,
61 elevated-disabled-container-color: null,
62 elevated-disabled-container-opacity: null,
63 unselected-hover-state-layer-color: null,
64 unselected-hover-state-layer-opacity: null,
65 unselected-hover-label-text-color: null,
66 selected-hover-state-layer-color: null,
67 selected-hover-state-layer-opacity: null,
68 selected-hover-label-text-color: null,
69 with-icon-unselected-hover-icon-color: null,
70 with-icon-selected-hover-icon-color: null,
71 elevated-hover-container-elevation: null,
72 flat-selected-hover-container-elevation: null,
73 flat-unselected-hover-container-elevation: null,
74 unselected-focus-state-layer-color: null,
75 unselected-focus-state-layer-opacity: null,
76 unselected-focus-label-text-color: null,
77 selected-focus-state-layer-color: null,
78 selected-focus-state-layer-opacity: null,
79 selected-focus-label-text-color: null,
80 flat-unselected-focus-outline-color: null,
81 with-icon-unselected-focus-icon-color: null,
82 with-icon-selected-focus-icon-color: null,
83 elevated-focus-container-elevation: null,
84 elevated-pressed-container-elevation: null,
85 flat-selected-focus-container-elevation: null,
86 flat-unselected-focus-container-elevation: null,
87 unselected-pressed-state-layer-color: null,
88 unselected-pressed-state-layer-opacity: null,
89 unselected-pressed-label-text-color: null,
90 selected-pressed-state-layer-color: null,
91 selected-pressed-state-layer-opacity: null,
92 selected-pressed-label-text-color: null,
93 with-icon-unselected-pressed-icon-color: null,
94 with-icon-selected-pressed-icon-color: null,
95 elevated-selected-container-elevation: null,
96 flat-selected-pressed-container-elevation: null,
97 flat-unselected-pressed-container-elevation: null,
98 container-surface-tint-layer-color: null,
99);
100
101$_custom-property-prefix: 'filter-chip';
102
103@mixin theme($theme, $resolvers: resolvers.$material) {
104 @include theme.validate-theme($_light-theme, $theme);
105
106 // Resolve elevation.
107 @each $key
108 in (
109 flat-container-elevation,
110 elevated-container-elevation,
111 elevated-disabled-container-elevation,
112 elevated-hover-container-elevation,
113 elevated-focus-container-elevation,
114 flat-selected-focus-container-elevation,
115 flat-unselected-focus-container-elevation,
116 elevated-selected-container-elevation,
117 flat-selected-pressed-container-elevation,
118 flat-unselected-pressed-container-elevation
119 )
120 {
121 $value: map.get($theme, $key);
122 @if $value {
123 $theme: map.set(
124 $theme,
125 $key,
126 meta.call(
127 $elevation-resolver: map.get($resolvers, elevation),
128 $elevation: $value,
129 $shadow-color: map.get($theme, elevated-container-shadow-color),
130 )
131 );
132 }
133 }
134
135 @include keys.declare-custom-properties(
136 $theme,
137 $prefix: $_custom-property-prefix
138 );
139}
140
141@mixin theme-styles($theme, $resolvers: resolvers.$material) {
142 @include theme.validate-theme($_light-theme, $theme);
143 $theme: keys.create-theme-properties(
144 $theme,
145 $prefix: $_custom-property-prefix
146 );
147 @include chip-theme.theme-styles($theme, $resolvers: $resolvers);
148}