Skip to content

Commit

Permalink
feat(iconbutton): add disabled container opacity tokens
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 530791227
  • Loading branch information
@asyncLiz @copybara-github
asyncLiz authored and copybara-github committed May 10, 2023
1 parent 5841e43 commit d84d48c
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 90 deletions.
31 changes: 23 additions & 8 deletions iconbutton/lib/_filled-icon-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
// go/keep-sorted start
@use '../../ripple/ripple';
@use '../../tokens';
@use './shared';
// go/keep-sorted end

@mixin theme($tokens) {
Expand All @@ -24,8 +23,6 @@
)
);

$tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled');

@each $token, $value in $tokens {
@if list.index($supported-tokens, $token) == null {
@error 'Token `#{$token}` is not a supported token.';
Expand All @@ -39,7 +36,6 @@

@mixin styles() {
$tokens: tokens.md-comp-filled-icon-button-values();
$tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled');

:host {
@each $token, $value in $tokens {
Expand All @@ -66,7 +62,6 @@
}

.icon-button {
background-color: var(--_container-color);
color: var(--_icon-color);

&:hover {
Expand All @@ -82,7 +77,6 @@
}

&:disabled {
background-color: var(--_disabled-container-color);
color: var(--_disabled-icon-color);
}

Expand All @@ -98,13 +92,27 @@
);
}

.icon-button::before {
// Background color, separate node for opacity changes
background-color: var(--_container-color);
border-radius: inherit;
content: '';
inset: 0;
position: absolute;
z-index: -1; // place behind content
}

.icon-button:disabled::before {
background-color: var(--_disabled-container-color);
opacity: var(--_disabled-container-opacity);
}

.icon-button:disabled .icon {
opacity: var(--_disabled-icon-opacity);
}

.toggle-filled {
&:not(:disabled) {
background-color: var(--_unselected-container-color);
color: var(--_toggle-unselected-icon-color);

&:hover {
Expand All @@ -129,9 +137,12 @@
);
}

.toggle-filled:not(:disabled)::before {
background-color: var(--_unselected-container-color);
}

.selected {
&:not(:disabled) {
background-color: var(--_selected-container-color);
color: var(--_toggle-selected-icon-color);

&:hover {
Expand All @@ -155,4 +166,8 @@
)
);
}

.selected:not(:disabled)::before {
background-color: var(--_selected-container-color);
}
}
31 changes: 23 additions & 8 deletions iconbutton/lib/_filled-tonal-icon-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
// go/keep-sorted start
@use '../../ripple/ripple';
@use '../../tokens';
@use './shared';
// go/keep-sorted end

$_custom-property-prefix: 'filled-tonal-icon-button';
Expand All @@ -26,8 +25,6 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
)
);

$tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled-tonal');

@each $token, $value in $tokens {
@if list.index($supported-tokens, $token) == null {
@error 'Token `#{$token}` is not a supported token.';
Expand All @@ -41,7 +38,6 @@ $_custom-property-prefix: 'filled-tonal-icon-button';

@mixin styles() {
$tokens: tokens.md-comp-filled-tonal-icon-button-values();
$tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled-tonal');

:host {
@each $token, $value in $tokens {
Expand All @@ -68,7 +64,6 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
}

.icon-button {
background-color: var(--_container-color);
color: var(--_icon-color);

&:hover {
Expand All @@ -84,7 +79,6 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
}

&:disabled {
background-color: var(--_disabled-container-color);
color: var(--_disabled-icon-color);
}

Expand All @@ -100,13 +94,27 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
);
}

.icon-button::before {
// Background color, separate node for opacity changes
background-color: var(--_container-color);
border-radius: inherit;
content: '';
inset: 0;
position: absolute;
z-index: -1; // place behind content
}

.icon-button:disabled::before {
background-color: var(--_disabled-container-color);
opacity: var(--_disabled-container-opacity);
}

.icon-button:disabled .icon {
opacity: var(--_disabled-icon-opacity);
}

.toggle-filled-tonal {
&:not(:disabled) {
background-color: var(--_unselected-container-color);
color: var(--_toggle-unselected-icon-color);

&:hover {
Expand All @@ -131,9 +139,12 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
);
}

.toggle-filled-tonal:not(:disabled)::before {
background-color: var(--_unselected-container-color);
}

.selected {
&:not(:disabled) {
background-color: var(--_selected-container-color);
color: var(--_toggle-selected-icon-color);

&:hover {
Expand All @@ -157,4 +168,8 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
)
);
}

.selected:not(:disabled)::before {
background-color: var(--_selected-container-color);
}
}
19 changes: 10 additions & 9 deletions iconbutton/lib/_outlined-icon-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
// go/keep-sorted end
// go/keep-sorted start
@use '../../ripple/ripple';
@use '../../sass/color';
@use '../../tokens';
@use './shared';
// go/keep-sorted end
Expand All @@ -25,8 +24,6 @@
)
);

$tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined');

@each $token, $value in $tokens {
@if list.index($supported-tokens, $token) == null {
@error 'Token `#{$token}` is not a supported token.';
Expand All @@ -40,7 +37,6 @@

@mixin styles() {
$tokens: tokens.md-comp-outlined-icon-button-values();
$tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined');

:host {
@each $token, $value in $tokens {
Expand Down Expand Up @@ -122,6 +118,7 @@
inset: 0;
pointer-events: none;
position: absolute;
z-index: -1; // place behind content
}

// Selected toggle buttons have no outline.
Expand All @@ -132,7 +129,6 @@
// Selected icon button toggle.
.selected {
&:not(:disabled) {
background-color: var(--_selected-container-color);
color: var(--_selected-icon-color);

&:hover {
Expand All @@ -148,10 +144,6 @@
}
}

&:disabled {
background-color: var(--_disabled-selected-container-color);
}

@include ripple.theme(
(
focus-color: var(--_selected-focus-state-layer-color),
Expand All @@ -164,6 +156,15 @@
);
}

.selected:not(:disabled)::before {
background-color: var(--_selected-container-color);
}

.selected:disabled::before {
background-color: var(--_disabled-selected-container-color);
opacity: var(--_disabled-selected-container-opacity);
}

@media (forced-colors: active) {
// Selected button in HCM has an outline.
.selected {
Expand Down
63 changes: 1 addition & 62 deletions iconbutton/lib/_shared.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
// go/keep-sorted start
@use '../../focus/focus-ring';
@use '../../icon/icon';
@use '../../sass/color';
@use '../../sass/touch-target';
@use '../../tokens';
// go/keep-sorted end
Expand Down Expand Up @@ -42,6 +41,7 @@

.icon-button {
align-items: center;
background: none;
border: none;
box-sizing: border-box;
cursor: pointer;
Expand Down Expand Up @@ -99,64 +99,3 @@
@include touch-target.touch-target;
}
}

///
// Flattens disabled colors for icon button theme keys (across all variants).
/// @param {String} $variant - The variant, specified as one of ('filled',
/// 'outlined', 'standard').
///
@function flatten-disabled-colors($theme, $variant: 'standard') {
// If opacity value is null (e.g. for dark theme map, only the color
// changes, so the opacity value is null), use the default opacity value.
// Otherwise, the color is not flattened, meaning that the color would
// be applied without any opacity, which is incorrect.
$opacity-keys: [ 'disabled-container-opacity',
'disabled-selected-container-opacity' ];

@each $opacity-key in $opacity-keys {
// If opacity value is null, use the opacity value from the default tokens.
@if not map.get($theme, $opacity-key) {
$light-theme-value: map.get(
tokens.md-comp-icon-button-values(),
$opacity-key
);
$light-theme-filled-value: map.get(
tokens.md-comp-filled-icon-button-values(),
$opacity-key
);
$light-theme-filled-tonal-value: map.get(
tokens.md-comp-filled-tonal-icon-button-values(),
$opacity-key
);
$light-theme-outlined-value: map.get(
tokens.md-comp-outlined-icon-button-values(),
$opacity-key
);

@if $variant == 'standard' and $light-theme-value {
$theme: map.set($theme, $opacity-key, $light-theme-value);
} @else if $variant == 'filled' and $light-theme-filled-value {
$theme: map.set($theme, $opacity-key, $light-theme-filled-value);
} @else if $variant == 'filled-tonal' and $light-theme-filled-tonal-value
{
$theme: map.set($theme, $opacity-key, $light-theme-filled-tonal-value);
} @else if $variant == 'outlined' and $light-theme-outlined-value {
$theme: map.set($theme, $opacity-key, $light-theme-outlined-value);
}
}
}

@return color.join-color-and-opacity-pairs(
$theme,
(
(
color-key: 'disabled-container-color',
opacity-key: 'disabled-container-opacity'
),
(
color-key: 'disabled-selected-container-color',
opacity-key: 'disabled-selected-container-opacity'
)
)
);
}
3 changes: 0 additions & 3 deletions iconbutton/lib/_standard-icon-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,10 @@
@use '../../focus/focus-ring';
@use '../../ripple/ripple';
@use '../../tokens';
@use './shared';
// go/keep-sorted end

@mixin theme($tokens) {
$supported-tokens: tokens.$md-comp-icon-button-supported-tokens;
$tokens: shared.flatten-disabled-colors($tokens);

@each $token, $value in $tokens {
@if list.index($supported-tokens, $token) == null {
Expand All @@ -31,7 +29,6 @@

@mixin styles() {
$tokens: tokens.md-comp-icon-button-values();
$tokens: shared.flatten-disabled-colors($tokens);

:host {
@each $token, $value in $tokens {
Expand Down

0 comments on commit d84d48c

Please sign in to comment.