From 92a907142ce39811159c388034e7c3e27e3b6e22 Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Wed, 5 Apr 2023 21:54:37 -0700 Subject: [PATCH] fix(fab): tonal surface update PiperOrigin-RevId: 522242801 --- fab/lib/_shared.scss | 39 +++++++++++------------ fab/lib/fab-shared.ts | 4 +-- tokens/_md-comp-extended-fab-branded.scss | 5 ++- tokens/_md-comp-extended-fab-surface.scss | 5 ++- tokens/_md-comp-fab-branded-large.scss | 5 ++- tokens/_md-comp-fab-branded.scss | 5 ++- tokens/_md-comp-fab-surface-large.scss | 5 ++- tokens/_md-comp-fab-surface-small.scss | 5 ++- tokens/_md-comp-fab-surface.scss | 5 ++- 9 files changed, 35 insertions(+), 43 deletions(-) diff --git a/fab/lib/_shared.scss b/fab/lib/_shared.scss index 193dcca457..8d4f9f64fc 100644 --- a/fab/lib/_shared.scss +++ b/fab/lib/_shared.scss @@ -48,35 +48,34 @@ @include focus-ring.theme( ( - shape: shape.corners-to-shape-token('--_container-shape'), + 'shape': shape.corners-to-shape-token('--_container-shape'), ) ); @include ripple.theme( ( - hover-color: var(--_hover-state-layer-color), - focus-color: var(--_focus-state-layer-color), - pressed-color: var(--_pressed-state-layer-color), - hover-opacity: var(--_hover-state-layer-opacity), - focus-opacity: var(--_focus-state-layer-opacity), - pressed-opacity: var(--_pressed-state-layer-opacity), + 'hover-color': var(--_hover-state-layer-color), + 'focus-color': var(--_focus-state-layer-color), + 'pressed-color': var(--_pressed-state-layer-color), + 'hover-opacity': var(--_hover-state-layer-opacity), + 'focus-opacity': var(--_focus-state-layer-opacity), + 'pressed-opacity': var(--_pressed-state-layer-opacity), ) ); @include elevation.theme( ( // TODO: replace duration with animation tokens - duration: 280ms, - level: var(--_container-elevation), - shadow-color: var(--_container-shadow-color), - surface-tint: var(--_container-surface-tint-layer-color) + 'duration': 280ms, + 'level': var(--_container-elevation), + 'shadow-color': var(--_container-shadow-color) ) ); &.md3-fab--lowered { @include elevation.theme( ( - level: var(--_lowered-container-elevation), + 'level': var(--_lowered-container-elevation), ) ); } @@ -86,14 +85,14 @@ &:focus { @include elevation.theme( ( - level: var(--_focus-container-elevation), + 'level': var(--_focus-container-elevation), ) ); &.md3-fab--lowered { @include elevation.theme( ( - level: var(--_lowered-focus-container-elevation), + 'level': var(--_lowered-focus-container-elevation), ) ); } @@ -104,14 +103,14 @@ @include elevation.theme( ( - level: var(--_hover-container-elevation), + 'level': var(--_hover-container-elevation), ) ); &.md3-fab--lowered { @include elevation.theme( ( - level: var(--_lowered-hover-container-elevation), + 'level': var(--_lowered-hover-container-elevation), ) ); } @@ -122,21 +121,21 @@ @include elevation.theme( ( - level: var(--_pressed-container-elevation), + 'level': var(--_pressed-container-elevation), ) ); &.md3-fab--lowered { @include elevation.theme( ( - level: var(--_lowered-pressed-container-elevation), + 'level': var(--_lowered-pressed-container-elevation), ) ); } } } - md-elevation-surface { + md-elevation { z-index: -1; // Place behind content } @@ -186,7 +185,7 @@ // Adjust the focus ring padding to account for the 1px border in HCM. @include focus-ring.theme( ( - offset: 3px, + 'offset': 3px, ) ); border: 1px solid ButtonText; diff --git a/fab/lib/fab-shared.ts b/fab/lib/fab-shared.ts index 04da9f242c..90c113c853 100644 --- a/fab/lib/fab-shared.ts +++ b/fab/lib/fab-shared.ts @@ -4,7 +4,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import '../../elevation/elevation-surface.js'; +import '../../elevation/elevation.js'; import '../../focus/focus-ring.js'; import '../../ripple/ripple.js'; @@ -87,7 +87,7 @@ export abstract class FabShared extends LitElement { /** @soyTemplate */ protected renderElevation(): TemplateResult { - return html``; + return html``; } /** @soyTemplate */ diff --git a/tokens/_md-comp-extended-fab-branded.scss b/tokens/_md-comp-extended-fab-branded.scss index f23f7b979b..ae2c632622 100644 --- a/tokens/_md-comp-extended-fab-branded.scss +++ b/tokens/_md-comp-extended-fab-branded.scss @@ -7,13 +7,12 @@ @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start +@use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; -// TODO(b/272526637): tonal surface update -@use './v0_161/md-comp-extended-fab-branded'; -@use './v0_161/md-sys-color'; +@use './v0_172/md-comp-extended-fab-branded'; // go/keep-sorted end $_default: ( diff --git a/tokens/_md-comp-extended-fab-surface.scss b/tokens/_md-comp-extended-fab-surface.scss index 779fbf2c32..f1f35c0bfd 100644 --- a/tokens/_md-comp-extended-fab-surface.scss +++ b/tokens/_md-comp-extended-fab-surface.scss @@ -7,13 +7,12 @@ @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start +@use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; -// TODO(b/272526637): tonal surface update -@use './v0_161/md-comp-extended-fab-surface'; -@use './v0_161/md-sys-color'; +@use './v0_172/md-comp-extended-fab-surface'; // go/keep-sorted end $_default: ( diff --git a/tokens/_md-comp-fab-branded-large.scss b/tokens/_md-comp-fab-branded-large.scss index 5292bbf3cd..e90fef1187 100644 --- a/tokens/_md-comp-fab-branded-large.scss +++ b/tokens/_md-comp-fab-branded-large.scss @@ -4,12 +4,11 @@ // // go/keep-sorted start +@use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; -// TODO(b/272526637): tonal surface update -@use './v0_161/md-comp-fab-branded-large'; -@use './v0_161/md-sys-color'; +@use './v0_172/md-comp-fab-branded-large'; // go/keep-sorted end $_default: ( diff --git a/tokens/_md-comp-fab-branded.scss b/tokens/_md-comp-fab-branded.scss index 0da8494341..9672de73bf 100644 --- a/tokens/_md-comp-fab-branded.scss +++ b/tokens/_md-comp-fab-branded.scss @@ -4,12 +4,11 @@ // // go/keep-sorted start +@use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; -// TODO(b/272526637): tonal surface update -@use './v0_161/md-comp-fab-branded'; -@use './v0_161/md-sys-color'; +@use './v0_172/md-comp-fab-branded'; // go/keep-sorted end $_default: ( diff --git a/tokens/_md-comp-fab-surface-large.scss b/tokens/_md-comp-fab-surface-large.scss index 024f1bd8d4..72ef12117c 100644 --- a/tokens/_md-comp-fab-surface-large.scss +++ b/tokens/_md-comp-fab-surface-large.scss @@ -4,12 +4,11 @@ // // go/keep-sorted start +@use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; -// TODO(b/272526637): tonal surface update -@use './v0_161/md-comp-fab-surface-large'; -@use './v0_161/md-sys-color'; +@use './v0_172/md-comp-fab-surface-large'; // go/keep-sorted end $_default: ( diff --git a/tokens/_md-comp-fab-surface-small.scss b/tokens/_md-comp-fab-surface-small.scss index 8b3ef9a5dd..923600cd26 100644 --- a/tokens/_md-comp-fab-surface-small.scss +++ b/tokens/_md-comp-fab-surface-small.scss @@ -4,12 +4,11 @@ // // go/keep-sorted start +@use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; -// TODO(b/272526637): tonal surface update -@use './v0_161/md-comp-fab-surface-small'; -@use './v0_161/md-sys-color'; +@use './v0_172/md-comp-fab-surface-small'; // go/keep-sorted end $_default: ( diff --git a/tokens/_md-comp-fab-surface.scss b/tokens/_md-comp-fab-surface.scss index 7f33919237..9675896819 100644 --- a/tokens/_md-comp-fab-surface.scss +++ b/tokens/_md-comp-fab-surface.scss @@ -4,12 +4,11 @@ // // go/keep-sorted start +@use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; -// TODO(b/272526637): tonal surface update -@use './v0_161/md-comp-fab-surface'; -@use './v0_161/md-sys-color'; +@use './v0_172/md-comp-fab-surface'; // go/keep-sorted end $_default: (