UNPKG

3.37 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 '@material/feature-targeting/feature-targeting';
24@use '@material/theme/keys';
25@use '@material/theme/theme';
26@use '@material/tokens/resolvers';
27@use './button-shared-theme';
28
29$_custom-property-prefix: 'protected-button';
30
31$light-theme: (
32 container-color: primary,
33 container-elevation: 2,
34 container-height: button-shared-theme.$height,
35 container-shadow-color: black,
36 container-shape: button-shared-theme.$shape-radius,
37 disabled-container-color: button-shared-theme.$disabled-container-color,
38 disabled-container-elevation: 0,
39 disabled-label-text-color: button-shared-theme.$disabled-ink-color,
40 focus-container-elevation: 4,
41 focus-label-text-color: null,
42 focus-state-layer-color: on-primary,
43 focus-state-layer-opacity: 0.24,
44 hover-container-elevation: 4,
45 hover-label-text-color: null,
46 hover-state-layer-color: on-primary,
47 hover-state-layer-opacity: 0.08,
48 label-text-color: on-primary,
49 label-text-font: button-font-family,
50 label-text-size: button-font-size,
51 label-text-tracking: button-letter-spacing,
52 label-text-transform: button-text-transform,
53 label-text-weight: button-font-weight,
54 pressed-container-elevation: 8,
55 pressed-label-text-color: null,
56 pressed-state-layer-color: on-primary,
57 pressed-state-layer-opacity: 0.24,
58 with-icon-disabled-icon-color: null,
59 with-icon-focus-icon-color: null,
60 with-icon-hover-icon-color: null,
61 with-icon-icon-color: null,
62 with-icon-icon-size: 18px,
63 with-icon-pressed-icon-color: null,
64);
65
66/// Sets theme based on provided theme configuration.
67/// Only emits theme related styles.
68/// @param {Map} $theme - Theme configuration to use.
69@mixin theme($theme, $resolver: resolvers.$material) {
70 @include theme.validate-theme($light-theme, $theme);
71 $theme: button-shared-theme.resolve-theme-elevation-keys(
72 $theme,
73 $resolver: $resolver
74 );
75 @include keys.declare-custom-properties($theme, $_custom-property-prefix);
76}
77
78@mixin theme-styles(
79 $theme,
80 $resolver: resolvers.$material,
81 $query: feature-targeting.all()
82) {
83 @include theme.validate-theme($light-theme, $theme);
84
85 $theme: keys.create-theme-properties(
86 $theme,
87 $prefix: $_custom-property-prefix
88 );
89 @include button-shared-theme.theme($theme, $resolver, $query: $query);
90}