mirror of
https://github.com/material-components/material-web.git
synced 2024-09-21 02:27:12 +03:00
chore(sass): update components to use new sass folder
PiperOrigin-RevId: 407445058
This commit is contained in:
Liz Mitchell
Copybara-Service
parent
0aa1f874f4
commit
b2687f942e
@ -5,9 +5,7 @@
|
||||
|
||||
@use 'sass:map';
|
||||
@use '@material/ripple/ripple-theme';
|
||||
@use '@material/shape/shape';
|
||||
@use '@material/theme/state';
|
||||
@use '@material/theme/theme';
|
||||
@use '@material/typography/typography';
|
||||
|
||||
$light-theme: (
|
||||
@ -17,7 +15,7 @@ $light-theme: (
|
||||
label-text-size: 14px,
|
||||
label-text-tracking: typography.px-to-rem(0.1px),
|
||||
label-text-weight: 500,
|
||||
with-icon-icon-size: 18px,
|
||||
with-icon-icon-size: typography.px-to-rem(18px),
|
||||
);
|
||||
|
||||
$selectors: (
|
||||
@ -30,14 +28,13 @@ $selectors: (
|
||||
pressed: ':active'
|
||||
);
|
||||
|
||||
@mixin theme-styles($theme, $resolvers) {
|
||||
@mixin theme-styles($theme) {
|
||||
@include _set-label-text-typography(
|
||||
(
|
||||
family: map.get($theme, label-text-font),
|
||||
size: map.get($theme, label-text-size),
|
||||
tracking: map.get($theme, label-text-tracking),
|
||||
weight: map.get($theme, label-text-weight),
|
||||
transform: map.get($theme, label-text-transform),
|
||||
)
|
||||
);
|
||||
|
||||
@ -121,23 +118,22 @@ $selectors: (
|
||||
}
|
||||
|
||||
@mixin _set-height($height) {
|
||||
@include theme.property(height, $height);
|
||||
height: $height;
|
||||
}
|
||||
|
||||
@mixin _set-shape-radius($radius) {
|
||||
@include shape.radius($radius);
|
||||
|
||||
&,
|
||||
.md3-button__ripple {
|
||||
@include shape.radius($radius);
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _set-container-fill-color($color) {
|
||||
@include theme.property(background-color, $color);
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
@mixin _set-ink-color($color) {
|
||||
@include theme.property(color, $color);
|
||||
color: $color;
|
||||
}
|
||||
|
||||
@mixin _set-label-text-typography($typography-map) {
|
||||
@ -147,24 +143,24 @@ $selectors: (
|
||||
$weight: map.get($typography-map, weight);
|
||||
$transform: map.get($typography-map, transform);
|
||||
|
||||
@include theme.property(font-family, $family);
|
||||
@include theme.property(font-size, $size);
|
||||
@include theme.property(letter-spacing, $tracking);
|
||||
@include theme.property(font-weight, $weight);
|
||||
@include theme.property(text-transform, $transform);
|
||||
font-family: $family;
|
||||
font-size: $size;
|
||||
letter-spacing: $tracking;
|
||||
font-weight: $weight;
|
||||
text-transform: $transform;
|
||||
}
|
||||
|
||||
@mixin container-padding($padding) {
|
||||
@include theme.property(padding-inline-start, $padding);
|
||||
@include theme.property(padding-inline-end, $padding);
|
||||
padding-inline-start: $padding;
|
||||
padding-inline-end: $padding;
|
||||
}
|
||||
|
||||
@mixin container-with-icon-padding($icon-padding) {
|
||||
&.md3-button--icon-trailing {
|
||||
@include theme.property(padding-inline-end, $icon-padding);
|
||||
padding-inline-end: $icon-padding;
|
||||
}
|
||||
|
||||
&.md3-button--icon-leading {
|
||||
@include theme.property(padding-inline-start, $icon-padding);
|
||||
padding-inline-start: $icon-padding;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
@use '@material/touch-target/touch-target';
|
||||
@use '@material/theme/selector-ext';
|
||||
@use 'third_party/javascript/material_web_components/m3/elevation/lib/surface' as elevation-surface;
|
||||
@use '@material/mwc-../elevation/lib/surface' as elevation-surface;
|
||||
|
||||
@mixin static-styles() {
|
||||
:host {
|
||||
|
||||
@ -4,9 +4,8 @@
|
||||
//
|
||||
|
||||
@use 'sass:map';
|
||||
@use '@material/theme/keys';
|
||||
@use '@material/theme/theme';
|
||||
@use 'third_party/javascript/material_web_components/m3/tokens/resolvers';
|
||||
@use '@material/mwc-../sass/resolvers';
|
||||
@use '@material/mwc-../sass/theme';
|
||||
@use './button-theme';
|
||||
@use './elevation-theme';
|
||||
@use './icon-theme';
|
||||
@ -43,22 +42,24 @@ $light-theme: map.merge(
|
||||
)
|
||||
);
|
||||
|
||||
@function _resolve-theme($theme, $resolvers) {
|
||||
@return elevation-theme.resolve-theme($theme, $resolvers);
|
||||
}
|
||||
|
||||
@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);
|
||||
$theme: theme.validate-theme($light-theme, $theme);
|
||||
$theme: _resolve-theme($theme, $resolvers);
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
||||
$theme: keys.create-theme-properties(
|
||||
$theme,
|
||||
$prefix: $_custom-property-prefix
|
||||
);
|
||||
$theme: theme.validate-theme-styles($light-theme, $theme);
|
||||
$theme: _resolve-theme($theme, $resolvers);
|
||||
$theme: theme.create-theme-vars($theme, $_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);
|
||||
@include button-theme.theme-styles($theme);
|
||||
@include icon-theme.theme-styles($theme);
|
||||
@include elevation-theme.theme-styles($theme);
|
||||
}
|
||||
|
||||
@ -7,86 +7,84 @@
|
||||
@use 'sass:meta';
|
||||
@use '@material/ripple/ripple-theme';
|
||||
@use '@material/theme/state';
|
||||
@use '@material/theme/theme';
|
||||
@use 'third_party/javascript/material_web_components/m3/tokens/resolvers';
|
||||
@use 'third_party/javascript/material_web_components/m3/elevation/lib/elevation-theme';
|
||||
@use 'third_party/javascript/material_web_components/m3/elevation/lib/elevation-overlay-theme';
|
||||
|
||||
@use '@material/mwc-../elevation/lib/elevation-theme';
|
||||
@use './button-theme';
|
||||
|
||||
$_selectors: button-theme.$selectors;
|
||||
|
||||
@mixin theme-styles($theme, $resolvers) {
|
||||
$elevation-resolver: map.get($resolvers, elevation);
|
||||
@include _elevation(
|
||||
$elevation-resolver,
|
||||
$elevation-map: (
|
||||
default: map.get($theme, container-elevation),
|
||||
disabled: map.get($theme, disabled-container-elevation),
|
||||
focus: map.get($theme, focus-container-elevation),
|
||||
hover: map.get($theme, hover-container-elevation),
|
||||
pressed: map.get($theme, pressed-container-elevation)
|
||||
),
|
||||
$shadow-color: map.get($theme, container-shadow-color),
|
||||
$overlay-tint-color: map.get($theme, container-surface-tint-layer-color)
|
||||
);
|
||||
}
|
||||
|
||||
@mixin _elevation(
|
||||
$elevation-resolver,
|
||||
$elevation-map,
|
||||
$shadow-color,
|
||||
$overlay-tint-color
|
||||
) {
|
||||
@include elevation-theme.with-resolver(
|
||||
$elevation-resolver,
|
||||
$selectors: $_selectors,
|
||||
$elevation: $elevation-map,
|
||||
$shadow-color: $shadow-color
|
||||
);
|
||||
|
||||
@include elevation-overlay-theme.theme-styles(
|
||||
(
|
||||
surface-tint-layer-color: $overlay-tint-color,
|
||||
@function resolve-theme($theme, $resolvers) {
|
||||
@return elevation-theme.resolve-theme(
|
||||
$theme,
|
||||
map.get($resolvers, elevation),
|
||||
$shadow-color-token: container-shadow-color,
|
||||
$elevation-tokens: (
|
||||
container-elevation,
|
||||
disabled-container-elevation,
|
||||
focus-container-elevation,
|
||||
hover-container-elevation,
|
||||
pressed-container-elevation
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@function resolve-theme-elevation-keys($theme, $resolver) {
|
||||
@if $resolver == null {
|
||||
@return $theme;
|
||||
}
|
||||
$shadow-color: map.get($theme, container-shadow-color);
|
||||
|
||||
$elevation-keys: (
|
||||
container-elevation,
|
||||
hover-container-elevation,
|
||||
focus-container-elevation,
|
||||
pressed-container-elevation,
|
||||
disabled-container-elevation
|
||||
@mixin theme-styles($theme) {
|
||||
@include _elevation(
|
||||
(
|
||||
default: (
|
||||
shadow: map.get($theme, container-elevation-shadow),
|
||||
overlay-opacity: map.get($theme, container-elevation-overlay-opacity),
|
||||
),
|
||||
hover: (
|
||||
shadow: map.get($theme, hover-container-elevation-shadow),
|
||||
overlay-opacity:
|
||||
map.get($theme, hover-container-elevation-overlay-opacity),
|
||||
),
|
||||
focus: (
|
||||
shadow: map.get($theme, focus-container-elevation-shadow),
|
||||
overlay-opacity:
|
||||
map.get($theme, focus-container-elevation-overlay-opacity),
|
||||
),
|
||||
pressed: (
|
||||
shadow: map.get($theme, pressed-container-elevation-shadow),
|
||||
overlay-opacity:
|
||||
map.get($theme, pressed-container-elevation-overlay-opacity),
|
||||
),
|
||||
disabled: (
|
||||
shadow: map.get($theme, disabled-container-elevation-shadow),
|
||||
overlay-opacity:
|
||||
map.get($theme, disabled-container-elevation-overlay-opacity),
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
@each $key in $elevation-keys {
|
||||
$elevation-level: map.get($theme, $key);
|
||||
@if $elevation-level != null {
|
||||
// Unlike `theme-styles`, which delegates to elevation module to resolve
|
||||
// each state's elevation and place it under the correct selector, for
|
||||
// runtime theming the state is managed here and the elevation resolver is
|
||||
// passed a stateless (default state) value. This allows us to cleanly
|
||||
// attach each state's resolved value to its corresponding key in
|
||||
// $elevation-keys, without worrying about having to strip state prefixes
|
||||
// from the resolved keys to match the `theme-styles` CSS custom prop names.
|
||||
$elevation: (
|
||||
default: $elevation-level,
|
||||
);
|
||||
$resolved-value: meta.call(
|
||||
$resolver,
|
||||
$elevation: $elevation,
|
||||
$shadow-color: $shadow-color
|
||||
);
|
||||
// Update the key with the resolved value.
|
||||
$theme: map.set($theme, $key, $resolved-value);
|
||||
}
|
||||
}
|
||||
@return $theme;
|
||||
@include elevation-theme.theme-styles(
|
||||
(
|
||||
surface-tint-layer-color:
|
||||
map.get($theme, container-surface-tint-layer-color),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@mixin _elevation($elevations) {
|
||||
@include state.default($_selectors) {
|
||||
@include elevation-theme.theme-styles(state.get-default-state($elevations));
|
||||
}
|
||||
|
||||
@include state.hover($_selectors) {
|
||||
@include elevation-theme.theme-styles(state.get-hover-state($elevations));
|
||||
}
|
||||
|
||||
@include state.focus($_selectors) {
|
||||
@include elevation-theme.theme-styles(state.get-focus-state($elevations));
|
||||
}
|
||||
|
||||
@include state.pressed($_selectors) {
|
||||
@include elevation-theme.theme-styles(state.get-pressed-state($elevations));
|
||||
}
|
||||
|
||||
@include state.disabled($_selectors) {
|
||||
@include elevation-theme.theme-styles(
|
||||
state.get-disabled-state($elevations)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,9 +4,8 @@
|
||||
//
|
||||
|
||||
@use 'sass:map';
|
||||
@use '@material/theme/keys';
|
||||
@use '@material/theme/theme';
|
||||
@use 'third_party/javascript/material_web_components/m3/tokens/resolvers';
|
||||
@use '@material/mwc-../sass/resolvers';
|
||||
@use '@material/mwc-../sass/theme';
|
||||
@use './button-theme';
|
||||
@use './elevation-theme';
|
||||
@use './icon-theme';
|
||||
@ -42,22 +41,24 @@ $light-theme: map.merge(
|
||||
)
|
||||
);
|
||||
|
||||
@function _resolve-theme($theme, $resolvers) {
|
||||
@return elevation-theme.resolve-theme($theme, $resolvers);
|
||||
}
|
||||
|
||||
@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);
|
||||
$theme: theme.validate-theme($light-theme, $theme);
|
||||
$theme: _resolve-theme($theme, $resolvers);
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
||||
$theme: keys.create-theme-properties(
|
||||
$theme,
|
||||
$prefix: $_custom-property-prefix
|
||||
);
|
||||
$theme: theme.validate-theme-styles($light-theme, $theme);
|
||||
$theme: _resolve-theme($theme, $resolvers);
|
||||
$theme: theme.create-theme-vars($theme, $_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);
|
||||
@include button-theme.theme-styles($theme);
|
||||
@include icon-theme.theme-styles($theme);
|
||||
@include elevation-theme.theme-styles($theme);
|
||||
}
|
||||
|
||||
@ -6,13 +6,11 @@
|
||||
@use 'sass:map';
|
||||
@use '@material/ripple/ripple-theme';
|
||||
@use '@material/theme/state';
|
||||
@use '@material/theme/theme';
|
||||
@use '@material/typography/typography';
|
||||
@use './button-theme';
|
||||
|
||||
$_selectors: button-theme.$selectors;
|
||||
|
||||
@mixin theme-styles($theme, $resolvers) {
|
||||
@mixin theme-styles($theme) {
|
||||
@include _set-icon-color(
|
||||
(
|
||||
default: map.get($theme, with-icon-icon-color),
|
||||
@ -51,16 +49,15 @@ $_selectors: button-theme.$selectors;
|
||||
@mixin _icon-color($color) {
|
||||
::slotted([slot='icon']),
|
||||
.md3-button__icon {
|
||||
@include theme.property(color, $color);
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _set-icon-size($size-px) {
|
||||
$size-rem: typography.px-to-rem($size-px);
|
||||
@mixin _set-icon-size($size) {
|
||||
::slotted([slot='icon']),
|
||||
.md3-button__icon {
|
||||
@include theme.property(font-size, $size-rem);
|
||||
@include theme.property(width, $size-rem);
|
||||
@include theme.property(height, $size-rem);
|
||||
font-size: $size;
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,10 +5,9 @@
|
||||
|
||||
@use 'sass:map';
|
||||
@use '@material/shape/shape';
|
||||
@use '@material/theme/keys';
|
||||
@use '@material/theme/state';
|
||||
@use '@material/theme/theme';
|
||||
@use 'third_party/javascript/material_web_components/m3/tokens/resolvers';
|
||||
@use '@material/mwc-../sass/resolvers';
|
||||
@use '@material/mwc-../sass/theme';
|
||||
@use './button-theme';
|
||||
@use './icon-theme';
|
||||
|
||||
@ -44,18 +43,18 @@ $light-theme: map.merge(
|
||||
);
|
||||
|
||||
@mixin theme($theme, $resolvers: resolvers.$material) {
|
||||
@include theme.validate-theme($light-theme, $theme);
|
||||
@include keys.declare-custom-properties($theme, $_custom-property-prefix);
|
||||
$theme: theme.validate-theme($light-theme, $theme);
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
||||
$theme: keys.create-theme-properties(
|
||||
$theme,
|
||||
$prefix: $_custom-property-prefix
|
||||
);
|
||||
$theme: theme.validate-theme-styles($light-theme, $theme);
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
@include button-theme.theme-styles($theme, $resolvers: $resolvers);
|
||||
@include icon-theme.theme-styles($theme, $resolvers: $resolvers);
|
||||
@include button-theme.theme-styles($theme);
|
||||
@include icon-theme.theme-styles($theme);
|
||||
@include _shape-radius(map.get($theme, container-shape));
|
||||
@include _outline-color(
|
||||
(
|
||||
@ -69,7 +68,7 @@ $light-theme: map.merge(
|
||||
|
||||
@mixin _shape-radius($radius) {
|
||||
.md3-button__outline {
|
||||
@include shape.radius($radius);
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@ -97,26 +96,18 @@ $light-theme: map.merge(
|
||||
|
||||
@mixin _set-outline-color($color) {
|
||||
.md3-button__outline {
|
||||
@include theme.property(border-color, $color);
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _outline-width($width) {
|
||||
.md3-button__outline,
|
||||
.md3-button__ripple {
|
||||
@include theme.property(border-width, $width);
|
||||
border-width: $width;
|
||||
}
|
||||
|
||||
.md3-button__ripple {
|
||||
@include theme.property(
|
||||
width,
|
||||
'calc(100% - 2 * outline-width)',
|
||||
$replace: (outline-width: $width)
|
||||
);
|
||||
@include theme.property(
|
||||
height,
|
||||
'calc(100% - 2 * outline-width)',
|
||||
$replace: (outline-width: $width)
|
||||
);
|
||||
width: calc(100% - 2 * #{$width});
|
||||
height: calc(100% - 2 * #{$width});
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,9 +4,8 @@
|
||||
//
|
||||
|
||||
@use 'sass:map';
|
||||
@use '@material/theme/keys';
|
||||
@use '@material/theme/theme';
|
||||
@use 'third_party/javascript/material_web_components/m3/tokens/resolvers';
|
||||
@use '@material/mwc-../sass/resolvers';
|
||||
@use '@material/mwc-../sass/theme';
|
||||
@use './button-theme';
|
||||
@use './icon-theme';
|
||||
|
||||
@ -35,16 +34,16 @@ $light-theme: map.merge(
|
||||
);
|
||||
|
||||
@mixin theme($theme, $resolvers: resolvers.$material) {
|
||||
@include theme.validate-theme($light-theme, $theme);
|
||||
@include keys.declare-custom-properties($theme, $_custom-property-prefix);
|
||||
$theme: theme.validate-theme($light-theme, $theme);
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
||||
$theme: keys.create-theme-properties(
|
||||
$theme,
|
||||
$prefix: $_custom-property-prefix
|
||||
);
|
||||
$theme: theme.validate-theme-styles($light-theme, $theme);
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
@include button-theme.theme-styles($theme, $resolvers: $resolvers);
|
||||
@include icon-theme.theme-styles($theme, $resolvers: $resolvers);
|
||||
@include button-theme.theme-styles($theme);
|
||||
@include icon-theme.theme-styles($theme);
|
||||
}
|
||||
|
||||
@ -4,9 +4,8 @@
|
||||
//
|
||||
|
||||
@use 'sass:map';
|
||||
@use '@material/theme/keys';
|
||||
@use '@material/theme/theme';
|
||||
@use 'third_party/javascript/material_web_components/m3/tokens/resolvers';
|
||||
@use '@material/mwc-../sass/resolvers';
|
||||
@use '@material/mwc-../sass/theme';
|
||||
@use './button-theme';
|
||||
@use './elevation-theme';
|
||||
@use './icon-theme';
|
||||
@ -42,22 +41,24 @@ $light-theme: map.merge(
|
||||
)
|
||||
);
|
||||
|
||||
@function _resolve-theme($theme, $resolvers) {
|
||||
@return elevation-theme.resolve-theme($theme, $resolvers);
|
||||
}
|
||||
|
||||
@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);
|
||||
$theme: theme.validate-theme($light-theme, $theme);
|
||||
$theme: _resolve-theme($theme, $resolvers);
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
||||
$theme: keys.create-theme-properties(
|
||||
$theme,
|
||||
$prefix: $_custom-property-prefix
|
||||
);
|
||||
$theme: theme.validate-theme-styles($light-theme, $theme);
|
||||
$theme: _resolve-theme($theme, $resolvers);
|
||||
$theme: theme.create-theme-vars($theme, $_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);
|
||||
@include button-theme.theme-styles($theme);
|
||||
@include icon-theme.theme-styles($theme);
|
||||
@include elevation-theme.theme-styles($theme);
|
||||
}
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
//
|
||||
// Copyright 2021 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
@forward './lib/elevation-theme' show
|
||||
resolver;
|
||||
@ -4,102 +4,25 @@
|
||||
//
|
||||
|
||||
@use 'sass:map';
|
||||
@use '@material/theme/state';
|
||||
@use '@material/theme/theme';
|
||||
@use './level-utils';
|
||||
|
||||
$_default-theme: (
|
||||
surface-tint-layer-color: transparent,
|
||||
$transparent-theme: (
|
||||
overlay-opacity: 0,
|
||||
disabled-overlay-opacity: 0,
|
||||
focus-overlay-opacity: 0,
|
||||
hover-overlay-opacity: 0,
|
||||
pressed-overlay-opacity: 0,
|
||||
surface-tint-layer-color: transparent,
|
||||
);
|
||||
|
||||
$_selectors: (
|
||||
enabled: ':enabled',
|
||||
disabled: ':disabled',
|
||||
focus: ':focus',
|
||||
hover: ':hover',
|
||||
pressed: ':active',
|
||||
);
|
||||
|
||||
@mixin theme-styles($theme, $selectors: $_selectors) {
|
||||
@include _set-overlay-color(map.get($theme, surface-tint-layer-color));
|
||||
|
||||
@include _overlay-opacity(
|
||||
(
|
||||
default: map.get($theme, overlay-opacity),
|
||||
disabled: map.get($theme, disabled-overlay-opacity),
|
||||
focus: map.get($theme, focus-overlay-opacity),
|
||||
hover: map.get($theme, hover-overlay-opacity),
|
||||
pressed: map.get($theme, pressed-overlay-opacity),
|
||||
),
|
||||
$selectors
|
||||
);
|
||||
@mixin theme-styles($theme) {
|
||||
@include _overlay-color(map.get($theme, surface-tint-layer-color));
|
||||
@include _overlay-opacity(map.get($theme, overlay-opacity));
|
||||
}
|
||||
|
||||
@mixin _set-overlay-color($color) {
|
||||
@mixin _overlay-color($color) {
|
||||
.md3-elevation-overlay {
|
||||
@include theme.property(background-color, $color);
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _overlay-opacity($opacity-map, $selectors: $_selectors) {
|
||||
@include state.default($selectors) {
|
||||
@include _set-overlay-opacity(state.get-default-state($opacity-map));
|
||||
}
|
||||
|
||||
@include state.disabled($selectors) {
|
||||
@include _set-overlay-opacity(state.get-disabled-state($opacity-map));
|
||||
}
|
||||
|
||||
@include state.hover($selectors) {
|
||||
@include _set-overlay-opacity(state.get-hover-state($opacity-map));
|
||||
}
|
||||
|
||||
@include state.focus($selectors) {
|
||||
@include _set-overlay-opacity(state.get-focus-state($opacity-map));
|
||||
}
|
||||
|
||||
@include state.pressed($selectors) {
|
||||
@include _set-overlay-opacity(state.get-pressed-state($opacity-map));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _set-overlay-opacity($opacity) {
|
||||
@mixin _overlay-opacity($opacity) {
|
||||
.md3-elevation-overlay {
|
||||
@include theme.property(opacity, $opacity);
|
||||
opacity: $opacity;
|
||||
}
|
||||
}
|
||||
|
||||
///
|
||||
/// Returns the appropriate shadow for the given dp and shadow color.
|
||||
///
|
||||
/// @throw If the provided dp does not map to an elevation level.
|
||||
/// @param {number|null} $dp - the dp of the elevation system
|
||||
/// @return {number|null} - the opacity or null
|
||||
///
|
||||
@function overlay-opacity-by-dp($dp) {
|
||||
$level: level-utils.dp-to-level($dp);
|
||||
@return get-overlay-opacity($level);
|
||||
}
|
||||
|
||||
$_overlay-opacity: (
|
||||
0: 0,
|
||||
1: 0.05,
|
||||
2: 0.08,
|
||||
3: 0.11,
|
||||
4: 0.12,
|
||||
5: 0.14,
|
||||
);
|
||||
|
||||
///
|
||||
/// Returns the appropriate overlay opacity for the given level.
|
||||
/// @param {number} $level - the level of the elevation system
|
||||
/// @return {number|null} - the opacity or null
|
||||
///
|
||||
@function get-overlay-opacity($level) {
|
||||
@return map.get($_overlay-opacity, $level);
|
||||
}
|
||||
|
||||
@ -5,406 +5,84 @@
|
||||
|
||||
@use 'sass:map';
|
||||
@use 'sass:meta';
|
||||
@use '@material/theme/css';
|
||||
@use '@material/theme/custom-properties';
|
||||
@use '@material/theme/state';
|
||||
@use '@material/theme/theme';
|
||||
@use './level-utils';
|
||||
@use '@material/mwc-../sass/theme';
|
||||
@use '@material/mwc-../sass/var';
|
||||
@use './elevation-overlay-theme';
|
||||
|
||||
$_baseline-color: #000;
|
||||
$_key-opacity: 0.3;
|
||||
$_ambient-opacity: 0.15;
|
||||
|
||||
$_shadow-map: (
|
||||
0: (
|
||||
key: '0px 0px 0px 0px',
|
||||
ambient: '0px 0px 0px 0px',
|
||||
),
|
||||
1: (
|
||||
key: '0px 1px 2px 0px',
|
||||
ambient: '0px 1px 3px 1px',
|
||||
),
|
||||
2: (
|
||||
key: '0px 1px 2px 0px',
|
||||
ambient: '0px 2px 6px 2px',
|
||||
),
|
||||
3: (
|
||||
key: '0px 1px 3px 0px',
|
||||
ambient: '0px 4px 8px 3px',
|
||||
),
|
||||
4: (
|
||||
key: '0px 2px 3px 0px',
|
||||
ambient: '0px 6px 10px 4px',
|
||||
),
|
||||
5: (
|
||||
key: '0px 4px 4px 0px',
|
||||
ambient: '0px 8px 12px 6px',
|
||||
),
|
||||
);
|
||||
|
||||
///
|
||||
/// Represents the configurable values of the elevation theme.
|
||||
///
|
||||
$_theme-values: (
|
||||
disabled-shadow: null,
|
||||
disabled-overlay-opacity: null,
|
||||
focus-shadow: null,
|
||||
focus-overlay-opacity: null,
|
||||
hover-shadow: null,
|
||||
hover-overlay-opacity: null,
|
||||
overlay-opacity: null,
|
||||
pressed-overlay-opacity: null,
|
||||
pressed-shadow: null,
|
||||
shadow: null,
|
||||
);
|
||||
|
||||
///
|
||||
/// Applies the shadow theme-styles with the given $resolver function.
|
||||
/// @param {Function} $resolver - a function that returns a valid theme config.
|
||||
/// @see resolver for an example and expected arguments and return value.
|
||||
/// Accepts the following optional keyword args:
|
||||
/// @param {Map} $elevation - A state map of DP levels in the elevation system.
|
||||
/// @param {String} $shadow-color - the color used for the shadow.
|
||||
///
|
||||
@mixin with-resolver(
|
||||
@function resolve-theme(
|
||||
$theme,
|
||||
$resolver,
|
||||
$selectors: elevation-overlay-theme.$selectors,
|
||||
$args...
|
||||
$shadow-color-token,
|
||||
$elevation-tokens
|
||||
) {
|
||||
@if $resolver {
|
||||
@include theme-styles(
|
||||
meta.call($resolver, $args...),
|
||||
$selectors: $selectors
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
///
|
||||
/// Applies the given theme styles.
|
||||
/// @param {Map} $theme - @see $_theme-values for accepted theme properties.
|
||||
///
|
||||
@mixin theme-styles(
|
||||
$theme: (),
|
||||
$selectors: elevation-overlay-theme.$selectors
|
||||
) {
|
||||
@include _box-shadow(
|
||||
(
|
||||
default: map.get($theme, shadow),
|
||||
disabled: map.get($theme, disabled-shadow),
|
||||
focus: map.get($theme, focus-shadow),
|
||||
hover: map.get($theme, hover-shadow),
|
||||
pressed: map.get($theme, pressed-shadow),
|
||||
),
|
||||
$selectors: $selectors
|
||||
);
|
||||
|
||||
@include elevation-overlay-theme.theme-styles(
|
||||
(
|
||||
overlay-opacity: map.get($theme, overlay-opacity),
|
||||
disabled-overlay-opacity: map.get($theme, disabled-overlay-opacity),
|
||||
focus-overlay-opacity: map.get($theme, focus-overlay-opacity),
|
||||
hover-overlay-opacity: map.get($theme, hover-overlay-opacity),
|
||||
pressed-overlay-opacity: map.get($theme, pressed-overlay-opacity),
|
||||
),
|
||||
$selectors: $selectors
|
||||
);
|
||||
}
|
||||
|
||||
///
|
||||
/// Applies the styles for a state map of box shadows
|
||||
/// @param {Map} $shadow-map - state map of box shadow values
|
||||
/// @param {Map} $selectors - selector map for the state module
|
||||
///
|
||||
@mixin _box-shadow($shadow-map, $selectors) {
|
||||
@include state.default($selectors) {
|
||||
@include _set-box-shadow(state.get-default-state($shadow-map));
|
||||
@if $resolver == null {
|
||||
@return $theme;
|
||||
}
|
||||
|
||||
@include state.hover($selectors) {
|
||||
@include _set-box-shadow(state.get-hover-state($shadow-map));
|
||||
}
|
||||
$shadow-color: map.get($theme, $shadow-color-token);
|
||||
|
||||
@include state.focus($selectors) {
|
||||
@include _set-box-shadow(state.get-focus-state($shadow-map));
|
||||
}
|
||||
|
||||
@include state.pressed($selectors) {
|
||||
@include _set-box-shadow(state.get-pressed-state($shadow-map));
|
||||
}
|
||||
|
||||
@include state.disabled($selectors) {
|
||||
@include _set-box-shadow(state.get-disabled-state($shadow-map));
|
||||
}
|
||||
}
|
||||
|
||||
///
|
||||
/// Sets the box shadow of the element.
|
||||
///
|
||||
/// @param {String} $box-shadow - The shadow to apply to the element.
|
||||
///
|
||||
@mixin _set-box-shadow($box-shadow) {
|
||||
@if custom-properties.is-custom-prop($box-shadow) {
|
||||
// TODO(b/185188458): Use theme.property() once resolved.
|
||||
$fallback: custom-properties.get-fallback($box-shadow);
|
||||
|
||||
// var(--<box-shadow-prop>, var(--elevation-box-shadow-for-gss))
|
||||
$gss-custom-prop: custom-properties.create(
|
||||
custom-properties.get-varname($box-shadow),
|
||||
custom-properties.create(elevation-box-shadow-for-gss)
|
||||
// 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
|
||||
);
|
||||
|
||||
$value: custom-properties.create-var($gss-custom-prop);
|
||||
@include css.declaration(box-shadow, $value, $fallback-value: $fallback);
|
||||
@include custom-properties.declaration(
|
||||
custom-properties.create(elevation-box-shadow-for-gss, $fallback)
|
||||
);
|
||||
} @else {
|
||||
@include theme.property(box-shadow, $box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
///
|
||||
/// Returns the appropriate elevation theme for the given args.
|
||||
/// Warning: this is not to be called by end-user code. Any teams depending
|
||||
/// on this function are effectively out of SLO and will be expected to
|
||||
/// fix forward any unexpected breakages.
|
||||
///
|
||||
@function resolver($args...) {
|
||||
$opts: meta.keywords($args);
|
||||
$elevation-map: map.get($opts, elevation);
|
||||
$shadow-color: map.get($opts, shadow-color);
|
||||
$elevation-is-null: _is-map-null($elevation-map);
|
||||
|
||||
@if $elevation-is-null and $shadow-color == null {
|
||||
@return ();
|
||||
}
|
||||
|
||||
@if $elevation-is-null and $shadow-color != null {
|
||||
@debug 'no elevation provided (both elevation and shadow-color are required)';
|
||||
@return ();
|
||||
}
|
||||
|
||||
@if $shadow-color == null and $elevation-is-null {
|
||||
@debug 'no shadow-color provided (both shadow-color and elevation are required)';
|
||||
@return ();
|
||||
}
|
||||
|
||||
$shadow-map: _resolve-box-shadow($elevation-map, $shadow-color);
|
||||
$opacity-map: _resolve-overlay-opacity($elevation-map);
|
||||
|
||||
$theme: (
|
||||
shadow: state.get-default-state($shadow-map),
|
||||
disabled-shadow: state.get-disabled-state($shadow-map),
|
||||
focus-shadow: state.get-focus-state($shadow-map),
|
||||
hover-shadow: state.get-hover-state($shadow-map),
|
||||
pressed-shadow: state.get-pressed-state($shadow-map),
|
||||
overlay-opacity: state.get-default-state($opacity-map),
|
||||
disabled-overlay-opacity: state.get-disabled-state($opacity-map),
|
||||
focus-overlay-opacity: state.get-focus-state($opacity-map),
|
||||
hover-overlay-opacity: state.get-hover-state($opacity-map),
|
||||
pressed-overlay-opacity: state.get-pressed-state($opacity-map),
|
||||
);
|
||||
|
||||
// remove null values
|
||||
$keys: map.keys($theme);
|
||||
@each $key in $keys {
|
||||
@if (map.get($theme, $key) == null) {
|
||||
$theme: map.remove($theme, $key);
|
||||
@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;
|
||||
}
|
||||
|
||||
@function _is-map-null($map-or-null) {
|
||||
@if $map-or-null == null {
|
||||
@return true;
|
||||
}
|
||||
|
||||
$map: $map-or-null;
|
||||
$keys: map.keys($map);
|
||||
$is-null: true;
|
||||
@each $key in $keys {
|
||||
$is-null: map.get($map, $key) == null and $is-null;
|
||||
}
|
||||
|
||||
@return $is-null;
|
||||
}
|
||||
/// Represents the configurable values of the elevation theme.
|
||||
$_flat-theme: map.merge(
|
||||
elevation-overlay-theme.$transparent-theme,
|
||||
(
|
||||
shadow: none,
|
||||
)
|
||||
);
|
||||
|
||||
/// Applies the given theme styles.
|
||||
///
|
||||
/// Resolves an elevation state map into a state map of box shadows
|
||||
/// @param {Map} $elevation-map - a state map of elevation DPs
|
||||
/// @param {color} $shadow-color - the color of the shadow
|
||||
/// @return {Map} - State map of box shadows
|
||||
///
|
||||
@function _resolve-box-shadow($elevation-map, $shadow-color) {
|
||||
@return (
|
||||
default:
|
||||
_resolve-box-shadow-by-dp(
|
||||
state.get-default-state($elevation-map),
|
||||
$shadow-color
|
||||
),
|
||||
disabled:
|
||||
_resolve-box-shadow-by-dp(
|
||||
state.get-disabled-state($elevation-map),
|
||||
$shadow-color
|
||||
),
|
||||
focus:
|
||||
_resolve-box-shadow-by-dp(
|
||||
state.get-focus-state($elevation-map),
|
||||
$shadow-color
|
||||
),
|
||||
hover:
|
||||
_resolve-box-shadow-by-dp(
|
||||
state.get-hover-state($elevation-map),
|
||||
$shadow-color
|
||||
),
|
||||
pressed:
|
||||
_resolve-box-shadow-by-dp(
|
||||
state.get-pressed-state($elevation-map),
|
||||
$shadow-color
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
///
|
||||
/// Resolves an elevation state map into a state map of overlay opacities
|
||||
/// @param {Map} $elevation-map - a state map of elevation DPs
|
||||
/// @return {Map} - State map of overlay opacities
|
||||
///
|
||||
@function _resolve-overlay-opacity($elevation-map) {
|
||||
@return (
|
||||
default:
|
||||
_resolve-overlay-opacity-by-dp(state.get-default-state($elevation-map)),
|
||||
disabled:
|
||||
_resolve-overlay-opacity-by-dp(state.get-disabled-state($elevation-map)),
|
||||
focus: _resolve-overlay-opacity-by-dp(state.get-focus-state($elevation-map)),
|
||||
hover: _resolve-overlay-opacity-by-dp(state.get-hover-state($elevation-map)),
|
||||
pressed:
|
||||
_resolve-overlay-opacity-by-dp(state.get-pressed-state($elevation-map))
|
||||
);
|
||||
}
|
||||
|
||||
///
|
||||
/// Resolves an elevation into a box-shadow
|
||||
/// @param {number|null} $elevation - The elevation in DPs
|
||||
/// @param {color} $shadow-color - The color of the shadow
|
||||
/// @return {string|null} - Box shadow for given elevation. null if elevation
|
||||
/// is null
|
||||
///
|
||||
@function _resolve-box-shadow-by-dp($elevation, $shadow-color) {
|
||||
@if custom-properties.is-custom-prop($elevation) {
|
||||
@return _resolve-custom-prop-shadow($elevation, $shadow-color);
|
||||
}
|
||||
|
||||
@return _box-shadow-by-dp($elevation, $shadow-color);
|
||||
}
|
||||
|
||||
///
|
||||
/// Resolves an elevation into an overlay-opacity
|
||||
/// @param {number|null} $elevation - The elevation in DPs
|
||||
/// @return {number|null} - Overlay opacity for given elevation. null if
|
||||
/// elevation is null
|
||||
///
|
||||
@function _resolve-overlay-opacity-by-dp($elevation) {
|
||||
@if custom-properties.is-custom-prop($elevation) {
|
||||
@return _resolve-custom-prop-overlay-opacity($elevation);
|
||||
}
|
||||
|
||||
@return elevation-overlay-theme.overlay-opacity-by-dp($elevation);
|
||||
}
|
||||
|
||||
///
|
||||
/// Resolve the shadow as a CSS custom property.
|
||||
///
|
||||
@function _resolve-custom-prop-shadow($elevation, $shadow-color) {
|
||||
@if $elevation == null {
|
||||
@return null;
|
||||
}
|
||||
$fallback-dp: custom-properties.get-fallback($elevation);
|
||||
$fallback-shadow-color: custom-properties.get-fallback($shadow-color);
|
||||
$elevation-varname: custom-properties.get-varname($elevation);
|
||||
|
||||
/// Create new custom properties derived from the elevation varname. These
|
||||
/// will look like so:
|
||||
/// --<prefix>-<component>-container-elevation-shadow
|
||||
|
||||
$shadow: custom-properties.create(
|
||||
$elevation-varname + '-shadow',
|
||||
_box-shadow-by-dp($fallback-dp, $fallback-shadow-color)
|
||||
/// @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
|
||||
);
|
||||
|
||||
@return $shadow;
|
||||
@include _box-shadow(map.get($theme, shadow));
|
||||
@include elevation-overlay-theme.theme-styles($theme);
|
||||
}
|
||||
|
||||
/// Sets the box shadow of the element.
|
||||
///
|
||||
/// Resolve the overlay opacity as a CSS custom property.
|
||||
///
|
||||
@function _resolve-custom-prop-overlay-opacity($elevation) {
|
||||
@if $elevation == null {
|
||||
@return null;
|
||||
/// @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)
|
||||
);
|
||||
|
||||
box-shadow: $gss-custom-prop;
|
||||
#{var.create-name(elevation-box-shadow-for-gss)}: $fallback;
|
||||
} @else {
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
$fallback-dp: custom-properties.get-fallback($elevation);
|
||||
$elevation-varname: custom-properties.get-varname($elevation);
|
||||
|
||||
/// Create new custom properties derived from the elevation varname. These
|
||||
/// will look like so:
|
||||
/// --<prefix>-<component>-container-elevation-overlay-opacity
|
||||
|
||||
$overlay-opacity: custom-properties.create(
|
||||
$elevation-varname + '-overlay-opacity',
|
||||
elevation-overlay-theme.overlay-opacity-by-dp($fallback-dp)
|
||||
);
|
||||
|
||||
@return $overlay-opacity;
|
||||
}
|
||||
|
||||
///
|
||||
/// Returns the appropriate shadow for the given dp and shadow color.
|
||||
///
|
||||
/// @throw If the provided dp does not map to an elevation level.
|
||||
/// @param {number|null} $dp - the elevation dp
|
||||
/// @param {color|null} $shadow-color - the color of the shadow
|
||||
/// @return {list|string|null} - the constructed shadow, none, or null
|
||||
///
|
||||
@function _box-shadow-by-dp($dp, $shadow-color) {
|
||||
@if $dp == null {
|
||||
@return null;
|
||||
}
|
||||
|
||||
$level: level-utils.dp-to-level($dp);
|
||||
@return _box-shadow-by-level($level, $shadow-color);
|
||||
}
|
||||
|
||||
///
|
||||
/// Returns the appropriate shadow for the given level and shadow color.
|
||||
/// @param {number} $level - the level of the elevation system
|
||||
/// @param {color} $shadow-color - the color of the shadow
|
||||
/// @return {list|string|null} - the constructed shadow, none, or null
|
||||
///
|
||||
@function _box-shadow-by-level($level, $shadow-color) {
|
||||
// 5 is the max level of GM elevation.
|
||||
@if $level == null or $level < 0 or $level > 5 or $shadow-color == null {
|
||||
@return null;
|
||||
}
|
||||
|
||||
@if $level == 0 {
|
||||
@return none;
|
||||
}
|
||||
|
||||
$spread: map.get($_shadow-map, $level);
|
||||
$key-spread: map.get($spread, key);
|
||||
$ambient-spread: map.get($spread, ambient);
|
||||
$colors: colors($shadow-color);
|
||||
$key-color: map.get($colors, key);
|
||||
$ambient-color: map.get($colors, ambient);
|
||||
@return (#{$key-spread} #{$key-color}, #{$ambient-spread} #{$ambient-color});
|
||||
}
|
||||
|
||||
@function colors($color) {
|
||||
@return (
|
||||
key: rgba($color, $_key-opacity),
|
||||
ambient: rgba($color, $_ambient-opacity)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
//
|
||||
// Copyright 2021 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
@use 'sass:map';
|
||||
|
||||
///
|
||||
/// $_dp-to-level-map associates elevation dps to elevation levels.
|
||||
///
|
||||
$_dp-to-level-map: (
|
||||
// TODO: pull the keys from tokens
|
||||
0: 0,
|
||||
1: 1,
|
||||
3: 2,
|
||||
6: 3,
|
||||
8: 4,
|
||||
12: 5
|
||||
);
|
||||
|
||||
/// Returns the appropriate elevation level for a given dp.
|
||||
///
|
||||
/// @throw If the provided dp does not map to an elevation level.
|
||||
/// @param {number|null} $dp The dp to convert to an elevation level.
|
||||
/// @return {number|null} The level of the elevation system, or null if the dp
|
||||
/// is null.
|
||||
@function dp-to-level($dp) {
|
||||
@if $dp == null {
|
||||
@return null;
|
||||
}
|
||||
|
||||
$level: map.get($_dp-to-level-map, $dp);
|
||||
@if $level == null {
|
||||
@error '#{$dp} is not a valid Material You elevation dp level. Must be one of #{map.keys($_dp-to-level-map)}.';
|
||||
}
|
||||
|
||||
@return $level;
|
||||
}
|
||||
@ -4,11 +4,10 @@
|
||||
//
|
||||
|
||||
@use 'sass:map';
|
||||
@use '@material/theme/keys';
|
||||
@use '@material/theme/state';
|
||||
@use '@material/theme/theme';
|
||||
@use '@material/typography/typography';
|
||||
@use '@material/mwc-../tokens/lib/resolvers';
|
||||
@use '@material/mwc-../sass/resolvers';
|
||||
@use '@material/mwc-../sass/theme';
|
||||
@use './fab-shared-theme';
|
||||
|
||||
$_elevation-1-dp: 1;
|
||||
@ -79,19 +78,24 @@ $dark-theme: (
|
||||
pressed-label-text-color: $dark-primary,
|
||||
);
|
||||
|
||||
@mixin theme($theme, $resolvers: resolvers.$material) {
|
||||
@include theme.validate-theme($light-theme, $theme);
|
||||
@function _resolve-theme($theme, $resolvers) {
|
||||
@return fab-shared-theme.resolve-theme($theme, $resolvers);
|
||||
}
|
||||
|
||||
$theme: fab-shared-theme.resolve-theme($theme, $resolvers);
|
||||
@include keys.declare-custom-properties($theme, fab-extended);
|
||||
@mixin theme($theme, $resolvers: resolvers.$material) {
|
||||
$theme: theme.validate-theme($light-theme, $theme);
|
||||
$theme: _resolve-theme($theme, $resolvers);
|
||||
$theme: theme.create-theme-vars($theme, fab-extended);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
||||
@include theme.validate-theme($light-theme, $theme);
|
||||
$theme: theme.validate-theme-styles($light-theme, $theme);
|
||||
$theme: _resolve-theme($theme, $resolvers);
|
||||
$theme: theme.create-theme-vars($theme, fab-extended);
|
||||
|
||||
$theme: keys.create-theme-properties($theme, fab-extended);
|
||||
|
||||
@include fab-shared-theme.theme-styles($theme, $resolvers);
|
||||
@include fab-shared-theme.theme-styles($theme);
|
||||
|
||||
@include _set-container-height(map.get($theme, container-height));
|
||||
|
||||
@ -116,7 +120,7 @@ $dark-theme: (
|
||||
}
|
||||
|
||||
@mixin _set-container-height($height) {
|
||||
@include theme.property(height, $height);
|
||||
height: $height;
|
||||
}
|
||||
|
||||
@mixin _label-color($color-or-map) {
|
||||
@ -139,14 +143,14 @@ $dark-theme: (
|
||||
|
||||
@mixin _set-label-color($color) {
|
||||
.md3-fab__label {
|
||||
@include theme.property(color, $color);
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _label-typography($typography-map) {
|
||||
@include theme.property(font-family, map.get($typography-map, font));
|
||||
@include theme.property(line-height, map.get($typography-map, line-height));
|
||||
@include theme.property(font-size, map.get($typography-map, size));
|
||||
@include theme.property(font-weight, map.get($typography-map, weight));
|
||||
@include theme.property(letter-spacing, map.get($typography-map, tracking));
|
||||
font-family: map.get($typography-map, font);
|
||||
line-height: map.get($typography-map, line-height);
|
||||
font-size: map.get($typography-map, size);
|
||||
font-weight: map.get($typography-map, weight);
|
||||
letter-spacing: map.get($typography-map, tracking);
|
||||
}
|
||||
|
||||
@ -5,13 +5,12 @@
|
||||
|
||||
@use 'sass:map';
|
||||
@use 'sass:meta';
|
||||
@use '@material/shape/shape';
|
||||
@use '@material/theme/state';
|
||||
@use '@material/theme/theme';
|
||||
@use 'third_party/javascript/material_web_components/ripple/ripple-theme';
|
||||
@use '@material/mwc-../elevation/lib/elevation-overlay-theme';
|
||||
@use '@material/mwc-../elevation/lib/elevation-theme';
|
||||
@use '@material/mwc-../tokens/lib/resolvers';
|
||||
@use '@material/mwc-../sass/elevation';
|
||||
@use '@material/mwc-../sass/resolvers';
|
||||
@use '@material/mwc-../sass/theme';
|
||||
|
||||
$selectors: (
|
||||
// May have to change to :not(:disabled) if we decide to support anchor tags
|
||||
@ -22,34 +21,80 @@ $selectors: (
|
||||
pressed: ':active'
|
||||
);
|
||||
|
||||
@mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
||||
@function resolve-theme($theme, $resolvers) {
|
||||
$theme: elevation-theme.resolve-theme(
|
||||
$theme,
|
||||
map.get($resolvers, elevation),
|
||||
$shadow-color-token: container-shadow-color,
|
||||
$elevation-tokens: (
|
||||
container-elevation,
|
||||
focus-container-elevation,
|
||||
hover-container-elevation,
|
||||
pressed-container-elevation,
|
||||
lowered-container-elevation,
|
||||
lowered-focus-container-elevation,
|
||||
lowered-hover-container-elevation,
|
||||
lowered-pressed-container-elevation
|
||||
)
|
||||
);
|
||||
|
||||
@return $theme;
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme) {
|
||||
@include _elevation(
|
||||
(
|
||||
default: map.get($theme, container-elevation),
|
||||
hover: map.get($theme, hover-container-elevation),
|
||||
focus: map.get($theme, focus-container-elevation),
|
||||
pressed: map.get($theme, pressed-container-elevation),
|
||||
),
|
||||
$shadow-color: map.get($theme, container-shadow-color),
|
||||
$resolver: map.get($resolvers, elevation)
|
||||
default: (
|
||||
shadow: map.get($theme, container-elevation-shadow),
|
||||
overlay-opacity: map.get($theme, container-elevation-overlay-opacity),
|
||||
),
|
||||
hover: (
|
||||
shadow: map.get($theme, hover-container-elevation-shadow),
|
||||
overlay-opacity:
|
||||
map.get($theme, hover-container-elevation-overlay-opacity),
|
||||
),
|
||||
focus: (
|
||||
shadow: map.get($theme, focus-container-elevation-shadow),
|
||||
overlay-opacity:
|
||||
map.get($theme, focus-container-elevation-overlay-opacity),
|
||||
),
|
||||
pressed: (
|
||||
shadow: map.get($theme, pressed-container-elevation-shadow),
|
||||
overlay-opacity:
|
||||
map.get($theme, pressed-container-elevation-overlay-opacity),
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
@include _lowered-elevation(
|
||||
(
|
||||
default: map.get($theme, lowered-container-elevation),
|
||||
hover: map.get($theme, lowered-hover-container-elevation),
|
||||
focus: map.get($theme, lowered-focus-container-elevation),
|
||||
pressed: map.get($theme, lowered-pressed-container-elevation),
|
||||
),
|
||||
$shadow-color: map.get($theme, container-shadow-color),
|
||||
$resolver: map.get($resolvers, elevation)
|
||||
default: (
|
||||
shadow: map.get($theme, lowered-container-elevation-shadow),
|
||||
overlay-opacity:
|
||||
map.get($theme, lowered-container-elevation-overlay-opacity),
|
||||
),
|
||||
hover: (
|
||||
shadow: map.get($theme, lowered-hover-container-elevation-shadow),
|
||||
overlay-opacity:
|
||||
map.get($theme, lowered-hover-container-elevation-overlay-opacity),
|
||||
),
|
||||
focus: (
|
||||
shadow: map.get($theme, lowered-focus-container-elevation-shadow),
|
||||
overlay-opacity:
|
||||
map.get($theme, lowered-focus-container-elevation-overlay-opacity),
|
||||
),
|
||||
pressed: (
|
||||
shadow: map.get($theme, lowered-pressed-container-elevation-shadow),
|
||||
overlay-opacity:
|
||||
map.get($theme, lowered-pressed-container-elevation-overlay-opacity),
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
@include elevation-overlay-theme.theme-styles(
|
||||
@include elevation-theme.theme-styles(
|
||||
(
|
||||
surface-tint-layer-color: map.get($theme, surface-tint-layer-color),
|
||||
),
|
||||
$selectors
|
||||
)
|
||||
);
|
||||
|
||||
@include _container-fill-color(
|
||||
@ -83,19 +128,36 @@ $selectors: (
|
||||
);
|
||||
}
|
||||
|
||||
@mixin _lowered-elevation($elevation-map, $shadow-color, $resolver) {
|
||||
@mixin _lowered-elevation($elevation-map) {
|
||||
&.md3-fab--lowered {
|
||||
@include _elevation($elevation-map, $shadow-color, $resolver);
|
||||
@include _elevation($elevation-map);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _elevation($elevation-map, $shadow-color, $resolver) {
|
||||
@include elevation-theme.with-resolver(
|
||||
$resolver,
|
||||
$selectors: $selectors,
|
||||
$elevation: $elevation-map,
|
||||
$shadow-color: $shadow-color
|
||||
);
|
||||
@mixin _elevation($elevation-map) {
|
||||
@include state.default($selectors) {
|
||||
@include elevation-theme.theme-styles(
|
||||
state.get-default-state($elevation-map)
|
||||
);
|
||||
}
|
||||
|
||||
@include state.hover($selectors) {
|
||||
@include elevation-theme.theme-styles(
|
||||
state.get-hover-state($elevation-map)
|
||||
);
|
||||
}
|
||||
|
||||
@include state.focus($selectors) {
|
||||
@include elevation-theme.theme-styles(
|
||||
state.get-focus-state($elevation-map)
|
||||
);
|
||||
}
|
||||
|
||||
@include state.pressed($selectors) {
|
||||
@include elevation-theme.theme-styles(
|
||||
state.get-pressed-state($elevation-map)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _container-fill-color($color-or-map) {
|
||||
@ -105,13 +167,13 @@ $selectors: (
|
||||
}
|
||||
|
||||
@mixin _set-container-fill-color($color) {
|
||||
@include theme.property(background-color, $color);
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
@mixin _set-container-shape($radius) {
|
||||
&,
|
||||
.md3-fab__ripple {
|
||||
@include shape.radius($radius);
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@ -135,16 +197,16 @@ $selectors: (
|
||||
|
||||
@mixin _set-icon-color($color) {
|
||||
.md3-fab__icon {
|
||||
@include theme.property(color, $color);
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _set-icon-size($size) {
|
||||
.md3-fab__icon {
|
||||
@include theme.property(width, $size);
|
||||
@include theme.property(height, $size);
|
||||
@include theme.property(font-size, $size);
|
||||
@include theme.property(--mdc-icon-size, $size);
|
||||
width: $size;
|
||||
height: $size;
|
||||
font-size: $size;
|
||||
--mdc-icon-size: $size;
|
||||
}
|
||||
}
|
||||
|
||||
@ -153,141 +215,3 @@ $selectors: (
|
||||
@include ripple-theme.theme($ripple-theme);
|
||||
}
|
||||
}
|
||||
|
||||
@function resolve-theme($theme, $resolvers) {
|
||||
@return map.merge(
|
||||
$theme,
|
||||
_resolve-theme-elevation(
|
||||
$theme,
|
||||
map.get($resolvers, elevation),
|
||||
$elevation-map: (
|
||||
default: map.get($theme, container-elevation),
|
||||
focus: map.get($theme, focus-container-elevation),
|
||||
hover: map.get($theme, hover-container-elevation),
|
||||
pressed: map.get($theme, pressed-container-elevation)
|
||||
),
|
||||
$lowered-elevation-map: (
|
||||
default: map.get($theme, lowered-container-elevation),
|
||||
focus: map.get($theme, lowered-focus-container-elevation),
|
||||
hover: map.get($theme, lowered-hover-container-elevation),
|
||||
pressed: map.get($theme, lowered-pressed-container-elevation)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@function _resolve-theme-elevation(
|
||||
$theme,
|
||||
$resolver,
|
||||
$elevation-map,
|
||||
$lowered-elevation-map
|
||||
) {
|
||||
@if $resolver == null {
|
||||
@return $theme;
|
||||
}
|
||||
|
||||
// Resolve the value for each state key.
|
||||
$elevation-theme: meta.call(
|
||||
$resolver,
|
||||
$elevation: $elevation-map,
|
||||
$shadow-color: map.get($theme, container-shadow-color)
|
||||
);
|
||||
|
||||
$lowered-elevation-theme: meta.call(
|
||||
$resolver,
|
||||
$elevation: $lowered-elevation-map,
|
||||
$shadow-color: map.get($theme, container-shadow-color)
|
||||
);
|
||||
|
||||
$resolved-theme-values: _elevation-theme-to-fab-theme-props(
|
||||
$elevation-theme,
|
||||
$lowered-elevation-theme
|
||||
);
|
||||
|
||||
// clean up unresolved elevation vals
|
||||
$theme: map.remove(
|
||||
$theme,
|
||||
container-shadow-color,
|
||||
container-elevation,
|
||||
focus-container-elevation,
|
||||
hover-container-elevation,
|
||||
pressed-container-elevation,
|
||||
lowered-container-elevation,
|
||||
lowered-focus-container-elevation,
|
||||
lowered-hover-container-elevation,
|
||||
lowered-pressed-container-elevation
|
||||
);
|
||||
|
||||
// Update the theme with the resolved value.
|
||||
$resolved-theme: map.merge($theme, $resolved-theme-values);
|
||||
|
||||
@return $resolved-theme;
|
||||
}
|
||||
|
||||
///
|
||||
/// Transforms an elevation theme and a lowered theme into fab theme props.
|
||||
/// @example
|
||||
/// (
|
||||
/// shadow: X,
|
||||
/// overlay-opacity: Y,
|
||||
/// hover-shadow: A,
|
||||
/// hover-overlay-opacity: B
|
||||
/// ) -> (
|
||||
/// container-elevation-shadow: X,
|
||||
/// container-overlay-opacity: Y,
|
||||
/// hover-container-elevation-shadow: A,
|
||||
/// hover-container-overlay-opacity: B
|
||||
/// )
|
||||
/// @param {Map} $elevation-theme - A theme for elevation
|
||||
/// @see elevation-theme.$_theme-values
|
||||
/// @param {Map} $lowered-elevation-theme - A theme for elevation for lowered
|
||||
/// fab values @see elevation-theme.$_theme-values
|
||||
/// @return {Map} - A theme map of elevation values to be turned into custom
|
||||
/// props.
|
||||
///
|
||||
@function _elevation-theme-to-fab-theme-props(
|
||||
$elevation-theme,
|
||||
$lowered-elevation-theme
|
||||
) {
|
||||
$resolved-theme-values: (
|
||||
container-elevation-shadow: map.get($elevation-theme, shadow),
|
||||
container-elevation-overlay-opacity:
|
||||
map.get($elevation-theme, overlay-opacity),
|
||||
focus-container-elevation-shadow: map.get($elevation-theme, focus-shadow),
|
||||
focus-container-elevation-overlay-opacity:
|
||||
map.get($elevation-theme, focus-overlay-opacity),
|
||||
hover-container-elevation-shadow: map.get($elevation-theme, hover-shadow),
|
||||
hover-container-elevation-overlay-opacity:
|
||||
map.get($elevation-theme, hover-overlay-opacity),
|
||||
pressed-container-elevation-shadow:
|
||||
map.get($elevation-theme, pressed-shadow),
|
||||
pressed-container-elevation-overlay-opacity:
|
||||
map.get($elevation-theme, pressed-overlay-opacity),
|
||||
lowered-container-elevation-shadow:
|
||||
map.get($lowered-elevation-theme, shadow),
|
||||
lowered-container-elevation-overlay-opacity:
|
||||
map.get($lowered-elevation-theme, overlay-opacity),
|
||||
lowered-focus-container-elevation-shadow:
|
||||
map.get($lowered-elevation-theme, focus-shadow),
|
||||
lowered-focus-container-elevation-overlay-opacity:
|
||||
map.get($lowered-elevation-theme, focus-overlay-opacity),
|
||||
lowered-hover-container-elevation-shadow:
|
||||
map.get($lowered-elevation-theme, hover-shadow),
|
||||
lowered-hover-container-elevation-overlay-opacity:
|
||||
map.get($lowered-elevation-theme, hover-overlay-opacity),
|
||||
lowered-pressed-container-elevation-shadow:
|
||||
map.get($lowered-elevation-theme, pressed-shadow),
|
||||
lowered-pressed-container-elevation-overlay-opacity:
|
||||
map.get($lowered-elevation-theme, pressed-overlay-opacity),
|
||||
);
|
||||
|
||||
// remove null values
|
||||
$keys: map.keys($resolved-theme-values);
|
||||
@each $key in $keys {
|
||||
@if (map.get($resolved-theme-values, $key) == null) {
|
||||
$resolved-theme-values: map.remove($resolved-theme-values, $key);
|
||||
}
|
||||
}
|
||||
|
||||
@return $resolved-theme-values;
|
||||
}
|
||||
|
||||
@ -4,9 +4,8 @@
|
||||
//
|
||||
|
||||
@use 'sass:map';
|
||||
@use '@material/theme/keys';
|
||||
@use '@material/theme/theme';
|
||||
@use '@material/mwc-../tokens/lib/resolvers';
|
||||
@use '@material/mwc-../sass/resolvers';
|
||||
@use '@material/mwc-../sass/theme';
|
||||
@use './fab-shared-theme';
|
||||
|
||||
$_elevation-1-dp: 1;
|
||||
@ -65,19 +64,24 @@ $dark-theme: (
|
||||
pressed-state-layer-color: $dark-primary,
|
||||
);
|
||||
|
||||
@mixin theme($theme, $resolvers: resolvers.$material) {
|
||||
@include theme.validate-theme($light-theme, $theme);
|
||||
@function _resolve-theme($theme, $resolvers) {
|
||||
@return fab-shared-theme.resolve-theme($theme, $resolvers);
|
||||
}
|
||||
|
||||
$theme: fab-shared-theme.resolve-theme($theme, $resolvers);
|
||||
@include keys.declare-custom-properties($theme, fab);
|
||||
@mixin theme($theme, $resolvers: resolvers.$material) {
|
||||
$theme: theme.validate-theme($light-theme, $theme);
|
||||
$theme: _resolve-theme($theme, $resolvers);
|
||||
$theme: theme.create-theme-vars($theme, fab);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
||||
@include theme.validate-theme($light-theme, $theme);
|
||||
$theme: theme.validate-theme-styles($light-theme, $theme);
|
||||
$theme: _resolve-theme($theme, $resolvers);
|
||||
$theme: theme.create-theme-vars($theme, fab);
|
||||
|
||||
$theme: keys.create-theme-properties($theme, fab);
|
||||
|
||||
@include fab-shared-theme.theme-styles($theme, $resolvers);
|
||||
@include fab-shared-theme.theme-styles($theme);
|
||||
|
||||
@include _set-container-dimensions(
|
||||
map.get($theme, container-width),
|
||||
@ -86,6 +90,6 @@ $dark-theme: (
|
||||
}
|
||||
|
||||
@mixin _set-container-dimensions($width, $height) {
|
||||
@include theme.property(width, $height);
|
||||
@include theme.property(height, $height);
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
//
|
||||
// Copyright 2021 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
@forward "./lib/resolvers" show $material;
|
||||
Loading…
Reference in New Issue
Block a user