Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

feat(fab): Add support for lowered elevation tokens/ #7806

Closed
wants to merge 1 commit into from
Closed

feat(fab): Add support for lowered elevation tokens/ #7806

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/mdc-fab/_extended-fab-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ $_extended-light-theme: (
container-height: 56px,
container-shadow-color: black,
container-shape: 50%,
container-surface-tint-layer-color: null,
focus-container-elevation: null,
focus-icon-color: null,
focus-label-text-color: null,
Expand Down
62 changes: 61 additions & 1 deletion packages/mdc-fab/_fab-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ $_light-theme: (
container-height: 56px,
container-shadow-color: black,
container-shape: $shape-radius,
container-surface-tint-layer-color: null,
container-width: 56px,
focus-container-elevation: null,
focus-icon-color: null,
Expand Down Expand Up @@ -159,13 +160,25 @@ $custom-property-prefix: 'fab';
@include _container-elevation(
map.get($resolvers, elevation),
map.get($theme, container-shadow-color),
map.get($theme, container-surface-tint-layer-color),
(
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),
)
);
@include _lowered-container-elevation(
map.get($resolvers, elevation),
map.get($theme, container-shadow-color),
map.get($theme, container-surface-tint-layer-color),
(
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),
)
);
@include _container-height(map.get($theme, container-height));
@include _container-width(map.get($theme, container-width));
@include icon-size(map.get($theme, icon-size));
Expand Down Expand Up @@ -299,20 +312,22 @@ $custom-property-prefix: 'fab';
}
}

@mixin _container-elevation($resolver, $shadow-color, $map) {
@mixin _container-elevation($resolver, $shadow-color, $container-color, $map) {
&:not(:disabled) {
@include elevation-theme.with-resolver(
$resolver,
$elevation: state.get-default-state($map),
$shadow-color: $shadow-color
);
@include elevation-theme.overlay-container-color($container-color);

&:hover {
@include elevation-theme.with-resolver(
$resolver,
$elevation: state.get-hover-state($map),
$shadow-color: $shadow-color
);
@include elevation-theme.overlay-container-color($container-color);
}

&:focus {
Expand All @@ -321,6 +336,7 @@ $custom-property-prefix: 'fab';
$elevation: state.get-focus-state($map),
$shadow-color: $shadow-color
);
@include elevation-theme.overlay-container-color($container-color);
}

&:active {
Expand All @@ -329,6 +345,7 @@ $custom-property-prefix: 'fab';
$elevation: state.get-pressed-state($map),
$shadow-color: $shadow-color
);
@include elevation-theme.overlay-container-color($container-color);
}
}

Expand All @@ -342,6 +359,49 @@ $custom-property-prefix: 'fab';
}
}

@mixin _lowered-container-elevation(
$resolver,
$shadow-color,
$container-color,
$map
) {
&.mdc-fab--lowered:not(:disabled) {
@include elevation-theme.with-resolver(
$resolver,
$elevation: state.get-default-state($map),
$shadow-color: $shadow-color
);
@include elevation-theme.overlay-container-color($container-color);

&:hover {
@include elevation-theme.with-resolver(
$resolver,
$elevation: state.get-hover-state($map),
$shadow-color: $shadow-color
);
@include elevation-theme.overlay-container-color($container-color);
}

&:focus {
@include elevation-theme.with-resolver(
$resolver,
$elevation: state.get-focus-state($map),
$shadow-color: $shadow-color
);
@include elevation-theme.overlay-container-color($container-color);
}

&:active {
@include elevation-theme.with-resolver(
$resolver,
$elevation: state.get-pressed-state($map),
$shadow-color: $shadow-color
);
@include elevation-theme.overlay-container-color($container-color);
}
}
}

///
/// Sets outline width only when button is in focus. Also sets padding to
/// include outline on focus (Helps prevent size jump on focus).
Expand Down