mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 14:07:17 +03:00
89 lines
2.1 KiB
SCSS
89 lines
2.1 KiB
SCSS
//
|
|
// Copyright 2021 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
@use 'sass:map';
|
|
@use 'sass:meta';
|
|
@use '@material/web/sass/theme';
|
|
@use '@material/web/sass/var';
|
|
@use './elevation-overlay-theme';
|
|
|
|
@function resolve-theme(
|
|
$theme,
|
|
$resolver,
|
|
$shadow-color-token,
|
|
$elevation-tokens
|
|
) {
|
|
@if $resolver == null {
|
|
@return $theme;
|
|
}
|
|
|
|
$shadow-color: map.get($theme, $shadow-color-token);
|
|
|
|
// Resolve the value for each state key.
|
|
@each $token in $elevation-tokens {
|
|
$value: map.get($theme, $token);
|
|
$elevation-theme: meta.call(
|
|
$resolver,
|
|
$elevation: $value,
|
|
$shadow-color: $shadow-color
|
|
);
|
|
|
|
@each $resolved-token, $resolved-value in $elevation-theme {
|
|
$theme: map.set($theme, #{$token}-#{$resolved-token}, $resolved-value);
|
|
}
|
|
|
|
// clean up unused elevation token
|
|
$theme: map.remove($theme, $token);
|
|
}
|
|
|
|
// clean up unused shadow color token
|
|
$theme: map.remove($theme, $shadow-color-token);
|
|
|
|
@return $theme;
|
|
}
|
|
|
|
/// Represents the configurable values of the elevation theme.
|
|
$_flat-theme: map.merge(
|
|
elevation-overlay-theme.$transparent-theme,
|
|
(
|
|
shadow: none,
|
|
)
|
|
);
|
|
|
|
/// Applies the given theme styles.
|
|
///
|
|
/// @param {Map} $theme - @see $_flat-theme for accepted theme properties.
|
|
@mixin theme-styles($theme) {
|
|
$theme: theme.validate-theme-styles(
|
|
$_flat-theme,
|
|
$theme,
|
|
$require-all: false
|
|
);
|
|
|
|
@include _box-shadow(map.get($theme, shadow));
|
|
@include elevation-overlay-theme.theme-styles($theme);
|
|
}
|
|
|
|
/// Sets the box shadow of the element.
|
|
///
|
|
/// @param {String} $box-shadow - The shadow to apply to the element.
|
|
@mixin _box-shadow($box-shadow) {
|
|
@if var.is-var($box-shadow) {
|
|
// TODO(b/185188458): Set box-shadow directly once resolved
|
|
$fallback: var.deep-fallback($box-shadow);
|
|
|
|
// var(--<box-shadow-prop>, var(--elevation-box-shadow-for-gss))
|
|
$gss-custom-prop: var.deep-set-fallback(
|
|
$box-shadow,
|
|
var.create(elevation-box-shadow-for-gss)
|
|
);
|
|
#{var.create-name(elevation-box-shadow-for-gss)}: $fallback;
|
|
|
|
box-shadow: $gss-custom-prop;
|
|
} @else {
|
|
box-shadow: $box-shadow;
|
|
}
|
|
}
|