material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-11-10 20:11:57 +03:00
Code Issues Projects Releases Wiki Activity

chore(sass): update components to use new sass folder

Browse Source 
PiperOrigin-RevId: 407445058
This commit is contained in:
Liz Mitchell 2021-11-03 15:51:16 -07:00 committed by Copybara-Service
parent 0aa1f874f4
commit b2687f942e
17 changed files with 374 additions and 908 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/button/lib/_button-theme.scss
View File

@ -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;
}
}

2
components/button/lib/_button.scss
View File

@ -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 {

33
components/button/lib/_elevated-button-theme.scss
View File

@ -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);
}

136
components/button/lib/_elevation-theme.scss
View File

@ -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,
@include elevation-theme.theme-styles(
(
surface-tint-layer-color:
map.get($theme, container-surface-tint-layer-color),
)
);
$resolved-value: meta.call(
$resolver,
$elevation: $elevation,
$shadow-color: $shadow-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)
);
// Update the key with the resolved value.
$theme: map.set($theme, $key, $resolved-value);
}
}
@return $theme;
}

33
components/button/lib/_filled-button-theme.scss
View File

@ -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);
}

15
components/button/lib/_icon-theme.scss
View File

@ -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;
}
}

39
components/button/lib/_outlined-button-theme.scss
View File

@ -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});
}
}

21
components/button/lib/_text-button-theme.scss
View File

@ -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);
}

33
components/button/lib/_tonal-button-theme.scss
View File

@ -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);
}

7
components/elevation/_elevation-theme.scss
View File

@ -1,7 +0,0 @@
//
// Copyright 2021 Google LLC
// SPDX-License-Identifier: Apache-2.0
//
@forward './lib/elevation-theme' show
resolver;

95
components/elevation/lib/_elevation-overlay-theme.scss
View File

@ -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);
}

424
components/elevation/lib/_elevation-theme.scss
View File

@ -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
);
}
@if $resolver == null {
@return $theme;
}
///
/// 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
$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
);
@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
);
@each $resolved-token, $resolved-value in $elevation-theme {
$theme: map.set($theme, #{$token}-#{$resolved-token}, $resolved-value);
}
///
/// 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));
// clean up unused elevation token
$theme: map.remove($theme, $token);
}
@include state.hover($selectors) {
@include _set-box-shadow(state.get-hover-state($shadow-map));
}
@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)
);
$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);
}
}
// 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;
}
///
/// 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
/// 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 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;
}
$fallback-dp: custom-properties.get-fallback($elevation);
$elevation-varname: custom-properties.get-varname($elevation);
/// @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);
/// 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)
// 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)
);
@return $overlay-opacity;
box-shadow: $gss-custom-prop;
#{var.create-name(elevation-box-shadow-for-gss)}: $fallback;
} @else {
box-shadow: $box-shadow;
}
///
/// 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)
);
}

38
components/elevation/lib/_level-utils.scss
View File

@ -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;
}

40
components/fab/lib/_fab-extended-theme.scss
View File

@ -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);
}

270
components/fab/lib/_fab-shared-theme.scss
View File

@ -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),
default: (
shadow: map.get($theme, container-elevation-shadow),
overlay-opacity: map.get($theme, container-elevation-overlay-opacity),
),
$shadow-color: map.get($theme, container-shadow-color),
$resolver: map.get($resolvers, elevation)
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),
default: (
shadow: map.get($theme, lowered-container-elevation-shadow),
overlay-opacity:
map.get($theme, lowered-container-elevation-overlay-opacity),
),
$shadow-color: map.get($theme, container-shadow-color),
$resolver: map.get($resolvers, elevation)
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,21 +128,38 @@ $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) {
@include state.default($selectors) {
@include _set-container-fill-color(state.get-default-state($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;
}

30
components/fab/lib/_fab-theme.scss
View File

@ -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;
}

6
components/tokens/_resolvers.scss
View File

@ -1,6 +0,0 @@
//
// Copyright 2021 Google LLC
// SPDX-License-Identifier: Apache-2.0
//
@forward "./lib/resolvers" show $material;