UNPKG

4.08 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// stylelint-disable selector-class-pattern --
24// Selector '.mdc-*' should only be used in this project.
25
26@use 'sass:map';
27@use '@material/feature-targeting/feature-targeting';
28@use '@material/theme/keys';
29@use '@material/theme/theme';
30@use '@material/tokens/resolvers';
31@use './button-shared-theme';
32
33$_custom-property-prefix: 'text-button';
34
35$light-theme: (
36 container-height: button-shared-theme.$height,
37 container-shape: button-shared-theme.$shape-radius,
38 disabled-label-text-color: button-shared-theme.$disabled-ink-color,
39 focus-label-text-color: null,
40 focus-state-layer-color: primary,
41 focus-state-layer-opacity: 0.12,
42 hover-label-text-color: null,
43 hover-state-layer-color: primary,
44 hover-state-layer-opacity: 0.04,
45 label-text-color: primary,
46 label-text-font: button-font-family,
47 label-text-size: button-font-size,
48 label-text-tracking: button-letter-spacing,
49 label-text-transform: button-text-transform,
50 label-text-weight: button-font-weight,
51 pressed-label-text-color: null,
52 pressed-state-layer-color: primary,
53 pressed-state-layer-opacity: 0.12,
54 with-icon-disabled-icon-color: null,
55 with-icon-focus-icon-color: null,
56 with-icon-hover-icon-color: null,
57 with-icon-icon-color: null,
58 with-icon-icon-size: 18px,
59 with-icon-pressed-icon-color: null,
60);
61
62/// Sets theme based on provided theme configuration.
63/// Only emits theme related styles.
64/// @param {Map} $theme - Theme configuration to use.
65@mixin theme($theme, $resolver: resolvers.$material) {
66 @include theme.validate-theme($light-theme, $theme);
67 $theme: button-shared-theme.resolve-theme-elevation-keys(
68 $theme,
69 $resolver: $resolver
70 );
71 @include keys.declare-custom-properties($theme, $_custom-property-prefix);
72}
73
74@mixin theme-styles(
75 $theme,
76 $resolver: resolvers.$material,
77 $query: feature-targeting.all()
78) {
79 @include theme.validate-theme-keys($light-theme, $theme);
80 $theme: keys.create-theme-properties(
81 $theme,
82 $prefix: $_custom-property-prefix
83 );
84 @include theme-styles-internal($theme, $resolver: $resolver, $query: $query);
85}
86
87@mixin theme-styles-internal(
88 $theme,
89 $resolver: resolvers.$material,
90 $query: feature-targeting.all()
91) {
92 @include theme.validate-theme-keys($light-theme, $theme);
93 @include button-shared-theme.theme($theme, $resolver, $query: $query);
94}
95
96@mixin deprecated-theme-styles($query: feature-targeting.all()) {
97 $theme: map.merge(
98 $light-theme,
99 (
100 focus-state-layer-color: null,
101 focus-state-layer-opacity: null,
102 hover-state-layer-color: null,
103 hover-state-layer-opacity: null,
104 pressed-state-layer-color: null,
105 pressed-state-layer-opacity: null,
106 label-text-font: null,
107 label-text-size: null,
108 label-text-tracking: null,
109 label-text-transform: null,
110 label-text-weight: null,
111 )
112 );
113
114 .mdc-button {
115 @include button-shared-theme.theme(
116 $theme,
117 resolvers.$material,
118 $query: $query
119 );
120 }
121}