mirror of
https://github.com/material-components/material-web.git
synced 2026-03-09 00:09:23 +08:00
65 lines
1.9 KiB
SCSS
65 lines
1.9 KiB
SCSS
/**
|
|
* @license
|
|
* Copyright 2021 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
@use 'sass:map';
|
|
@use '@material/theme/keys';
|
|
@use '@material/theme/theme';
|
|
@use '@material/tokens/resolvers';
|
|
@use './button-theme';
|
|
@use './elevation-theme';
|
|
@use './icon-theme';
|
|
|
|
$_custom-property-prefix: 'elevated-button';
|
|
$light-theme: map.merge(
|
|
button-theme.$light-theme,
|
|
(
|
|
container-color: #6200ee,
|
|
container-elevation: 2,
|
|
container-shadow-color: #000,
|
|
disabled-container-color: rgba(#000, 0.12),
|
|
disabled-container-elevation: 0,
|
|
disabled-label-text-color: rgba(#000, 0.38),
|
|
focus-container-elevation: 4,
|
|
focus-label-text-color: #fff,
|
|
focus-state-layer-color: #fff,
|
|
focus-state-layer-opacity: 0.24,
|
|
hover-container-elevation: 4,
|
|
hover-label-text-color: #fff,
|
|
hover-state-layer-color: #fff,
|
|
hover-state-layer-opacity: 0.08,
|
|
label-text-color: #fff,
|
|
pressed-container-elevation: 8,
|
|
pressed-label-text-color: #fff,
|
|
pressed-state-layer-color: #fff,
|
|
pressed-state-layer-opacity: 0.24,
|
|
with-icon-disabled-icon-color: rgba(#000, 0.38),
|
|
with-icon-focus-icon-color: #fff,
|
|
with-icon-hover-icon-color: #fff,
|
|
with-icon-icon-color: #fff,
|
|
with-icon-pressed-icon-color: #fff,
|
|
)
|
|
);
|
|
|
|
@mixin theme($theme, $resolvers: resolvers.$material) {
|
|
@include theme.validate-theme($light-theme, $theme);
|
|
$theme: elevation-theme.resolve-theme-elevation-keys(
|
|
$theme,
|
|
$resolver: map.get($resolvers, elevation)
|
|
);
|
|
@include keys.declare-custom-properties($theme, $_custom-property-prefix);
|
|
}
|
|
|
|
@mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
|
$theme: keys.create-theme-properties(
|
|
$theme,
|
|
$prefix: $_custom-property-prefix
|
|
);
|
|
|
|
@include button-theme.theme-styles($theme, $resolvers: $resolvers);
|
|
@include icon-theme.theme-styles($theme, $resolvers: $resolvers);
|
|
@include elevation-theme.theme-styles($theme, $resolvers: $resolvers);
|
|
}
|