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: (