mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 14:07:17 +03:00
108 lines
3.2 KiB
SCSS
108 lines
3.2 KiB
SCSS
//
|
|
// Copyright 2022 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
// stylelint-disable selector-class-pattern --
|
|
// Selector '.md3-*' should only be used in this project.
|
|
|
|
@use 'sass:map';
|
|
|
|
@use '@material/web/ripple/ripple-theme';
|
|
@use '@material/web/sass/theme';
|
|
@use '@material/web/tokens';
|
|
|
|
@use './icon-button-theme';
|
|
|
|
$_custom-property-prefix: 'icon-button';
|
|
|
|
$light-theme: tokens.md-comp-icon-button-values();
|
|
$dark-theme: tokens.md-comp-icon-button-values(
|
|
(
|
|
md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
|
|
),
|
|
$exclude-hardcoded-values: true
|
|
);
|
|
|
|
@mixin theme($theme) {
|
|
$theme: theme.validate-theme($light-theme, $theme);
|
|
$theme: icon-button-theme.flatten-disabled-colors($theme);
|
|
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
|
|
|
@include theme.emit-theme-vars($theme);
|
|
}
|
|
|
|
@mixin theme-styles($theme) {
|
|
$theme: theme.validate-theme-styles(
|
|
$light-theme,
|
|
$theme,
|
|
$require-all: false
|
|
);
|
|
$theme: icon-button-theme.flatten-disabled-colors($theme);
|
|
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
|
|
|
@include icon-button-theme.icon-size(map.get($theme, icon-size));
|
|
@include icon-button-theme.state-layer-size(
|
|
$size: map.get($theme, state-layer-size)
|
|
);
|
|
|
|
@include icon-button-theme.icon-color(
|
|
(
|
|
default: map.get($theme, unselected-icon-color),
|
|
disabled: map.get($theme, disabled-icon-color),
|
|
focus: map.get($theme, unselected-focus-icon-color),
|
|
hover: map.get($theme, unselected-hover-icon-color),
|
|
pressed: map.get($theme, unselected-pressed-icon-color),
|
|
)
|
|
);
|
|
|
|
&.md3-icon-button--on {
|
|
@include icon-button-theme.icon-color(
|
|
(
|
|
default: map.get($theme, selected-icon-color),
|
|
disabled: map.get($theme, disabled-icon-color),
|
|
focus: map.get($theme, selected-focus-icon-color),
|
|
hover: map.get($theme, selected-hover-icon-color),
|
|
pressed: map.get($theme, selected-pressed-icon-color),
|
|
)
|
|
);
|
|
}
|
|
|
|
// States styles
|
|
@include ripple-theme.theme(
|
|
(
|
|
focus-state-layer-color:
|
|
map.get($theme, unselected-focus-state-layer-color),
|
|
focus-state-layer-opacity:
|
|
map.get($theme, unselected-focus-state-layer-opacity),
|
|
hover-state-layer-color:
|
|
map.get($theme, unselected-hover-state-layer-color),
|
|
hover-state-layer-opacity:
|
|
map.get($theme, unselected-hover-state-layer-opacity),
|
|
pressed-state-layer-color:
|
|
map.get($theme, unselected-pressed-state-layer-color),
|
|
pressed-state-layer-opacity:
|
|
map.get($theme, unselected-pressed-state-layer-opacity),
|
|
)
|
|
);
|
|
|
|
&.md3-icon-button--on {
|
|
@include ripple-theme.theme(
|
|
(
|
|
focus-state-layer-color:
|
|
map.get($theme, selected-focus-state-layer-color),
|
|
focus-state-layer-opacity:
|
|
map.get($theme, selected-focus-state-layer-opacity),
|
|
hover-state-layer-color:
|
|
map.get($theme, selected-hover-state-layer-color),
|
|
hover-state-layer-opacity:
|
|
map.get($theme, selected-hover-state-layer-opacity),
|
|
pressed-state-layer-color:
|
|
map.get($theme, selected-pressed-state-layer-color),
|
|
pressed-state-layer-opacity:
|
|
map.get($theme, selected-pressed-state-layer-opacity),
|
|
)
|
|
);
|
|
}
|
|
}
|