Skip to content

Commit

Permalink
fix(ripple)!: remove "state-layer" from token names
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 509298729
  • Loading branch information
@asyncLiz @copybara-github
asyncLiz authored and copybara-github committed Feb 13, 2023
1 parent 44a8d74 commit ff84a66
Show file tree
Hide file tree
Showing 16 changed files with 185 additions and 222 deletions.
12 changes: 6 additions & 6 deletions button/lib/_shared.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,12 @@

@include ripple.theme(
(
hover-state-layer-color: var(--_hover-state-layer-color),
focus-state-layer-color: var(--_focus-state-layer-color),
pressed-state-layer-color: var(--_pressed-state-layer-color),
hover-state-layer-opacity: var(--_hover-state-layer-opacity),
focus-state-layer-opacity: var(--_focus-state-layer-opacity),
pressed-state-layer-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),
)
);

Expand Down
40 changes: 19 additions & 21 deletions checkbox/lib/_checkbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,42 +145,40 @@ $_checkmark-bottom-left: 7px, -14px;

@include ripple.theme(
(
focus-state-layer-color: var(--_unselected-focus-state-layer-color),
focus-state-layer-opacity: var(--_unselected-focus-state-layer-opacity),
hover-state-layer-color: var(--_unselected-hover-state-layer-color),
hover-state-layer-opacity: var(--_unselected-hover-state-layer-opacity),
pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
pressed-state-layer-opacity:
var(--_unselected-pressed-state-layer-opacity),
state-layer-shape: var(--_state-layer-shape),
focus-color: var(--_unselected-focus-state-layer-color),
focus-opacity: var(--_unselected-focus-state-layer-opacity),
hover-color: var(--_unselected-hover-state-layer-color),
hover-opacity: var(--_unselected-hover-state-layer-opacity),
pressed-color: var(--_unselected-pressed-state-layer-color),
pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
shape: var(--_state-layer-shape),
)
);
}

.selected md-ripple {
@include ripple.theme(
(
focus-state-layer-color: var(--_selected-focus-state-layer-color),
focus-state-layer-opacity: var(--_selected-focus-state-layer-opacity),
hover-state-layer-color: var(--_selected-hover-state-layer-color),
hover-state-layer-opacity: var(--_selected-hover-state-layer-opacity),
pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
pressed-state-layer-opacity:
var(--_selected-pressed-state-layer-opacity),
focus-color: var(--_selected-focus-state-layer-color),
focus-opacity: var(--_selected-focus-state-layer-opacity),
hover-color: var(--_selected-hover-state-layer-color),
hover-opacity: var(--_selected-hover-state-layer-opacity),
pressed-color: var(--_selected-pressed-state-layer-color),
pressed-opacity: var(--_selected-pressed-state-layer-opacity),
)
);
}

.error md-ripple {
@include ripple.theme(
(
focus-state-layer-color: var(--_error-focus-state-layer-color),
focus-color: var(--_error-focus-state-layer-color),
// TODO(b/262409702): add once token is added
// focus-state-layer-opacity: var(--_error-focus-state-layer-opacity),
hover-state-layer-color: var(--_error-hover-state-layer-color),
hover-state-layer-opacity: var(--_error-hover-state-layer-opacity),
pressed-state-layer-color: var(--_error-pressed-state-layer-color),
pressed-state-layer-opacity: var(--_error-pressed-state-layer-opacity),
// focus-opacity: var(--_error-focus-state-layer-opacity),
hover-color: var(--_error-hover-state-layer-color),
hover-opacity: var(--_error-hover-state-layer-opacity),
pressed-color: var(--_error-pressed-state-layer-color),
pressed-opacity: var(--_error-pressed-state-layer-opacity),
)
);
}
Expand Down
62 changes: 24 additions & 38 deletions chips/chip/lib/_chip-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -385,42 +385,32 @@ $_custom-property-prefix: 'chip';
);
@include _ripple-theme(
(
focus-state-layer-color: map.get($theme, focus-state-layer-color),
focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity),
hover-state-layer-color: map.get($theme, hover-state-layer-color),
hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),
pressed-state-layer-color: map.get($theme, pressed-state-layer-color),
pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity),
focus-color: map.get($theme, focus-state-layer-color),
focus-opacity: map.get($theme, focus-state-layer-opacity),
hover-color: map.get($theme, hover-state-layer-color),
hover-opacity: map.get($theme, hover-state-layer-opacity),
pressed-color: map.get($theme, pressed-state-layer-color),
pressed-opacity: map.get($theme, pressed-state-layer-opacity),
)
);
@include _selected-ripple-theme(
(
focus-state-layer-color: map.get($theme, selected-focus-state-layer-color),
focus-state-layer-opacity:
map.get($theme, selected-focus-state-layer-opacity),
hover-state-layer-color: map.get($theme, selected-hover-state-layer-color),
hover-state-layer-opacity:
map.get($theme, selected-hover-state-layer-opacity),
pressed-state-layer-color:
map.get($theme, selected-pressed-state-layer-color),
pressed-state-layer-opacity:
map.get($theme, selected-pressed-state-layer-opacity),
focus-color: map.get($theme, selected-focus-state-layer-color),
focus-opacity: map.get($theme, selected-focus-state-layer-opacity),
hover-color: map.get($theme, selected-hover-state-layer-color),
hover-opacity: map.get($theme, selected-hover-state-layer-opacity),
pressed-color: map.get($theme, selected-pressed-state-layer-color),
pressed-opacity: map.get($theme, selected-pressed-state-layer-opacity),
)
);
@include _unselected-ripple-theme(
(
focus-state-layer-color:
map.get($theme, unselected-focus-state-layer-color),
focus-state-layer-opacity:
map.get($theme, unselected-focus-state-layer-opacity),
hover-state-layer-color:
map.get($theme, unselected-hover-state-layer-color),
hover-state-layer-opacity:
map.get($theme, unselected-hover-state-layer-opacity),
pressed-state-layer-color:
map.get($theme, unselected-pressed-state-layer-color),
pressed-state-layer-opacity:
map.get($theme, unselected-pressed-state-layer-opacity),
focus-color: map.get($theme, unselected-focus-state-layer-color),
focus-opacity: map.get($theme, unselected-focus-state-layer-opacity),
hover-color: map.get($theme, unselected-hover-state-layer-color),
hover-opacity: map.get($theme, unselected-hover-state-layer-opacity),
pressed-color: map.get($theme, unselected-pressed-state-layer-color),
pressed-opacity: map.get($theme, unselected-pressed-state-layer-opacity),
)
);
}
Expand Down Expand Up @@ -450,16 +440,12 @@ $_custom-property-prefix: 'chip';
.md3-chip__action--primary {
@include ripple.theme(
(
focus-state-layer-color: map.get($ripple-theme, focus-state-layer-color),
focus-state-layer-opacity:
map.get($ripple-theme, focus-state-layer-opacity),
hover-state-layer-color: map.get($ripple-theme, hover-state-layer-color),
hover-state-layer-opacity:
map.get($ripple-theme, hover-state-layer-opacity),
pressed-state-layer-color:
map.get($ripple-theme, pressed-state-layer-color),
pressed-state-layer-opacity:
map.get($ripple-theme, pressed-state-layer-opacity),
focus-color: map.get($ripple-theme, focus-state-layer-color),
focus-opacity: map.get($ripple-theme, focus-state-layer-opacity),
hover-color: map.get($ripple-theme, hover-state-layer-color),
hover-opacity: map.get($ripple-theme, hover-state-layer-opacity),
pressed-color: map.get($ripple-theme, pressed-state-layer-color),
pressed-opacity: map.get($ripple-theme, pressed-state-layer-opacity),
),
$ripple-target: $ripple-target
);
Expand Down
12 changes: 6 additions & 6 deletions fab/lib/_shared.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,12 @@

@include ripple.theme(
(
hover-state-layer-color: var(--_hover-state-layer-color),
focus-state-layer-color: var(--_focus-state-layer-color),
pressed-state-layer-color: var(--_pressed-state-layer-color),
hover-state-layer-opacity: var(--_hover-state-layer-opacity),
focus-state-layer-opacity: var(--_focus-state-layer-opacity),
pressed-state-layer-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),
)
);

Expand Down
28 changes: 12 additions & 16 deletions iconbutton/lib/_filled-icon-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,12 +73,12 @@ $_custom-property-prefix: 'filled-icon-button';

@include ripple.theme(
(
focus-state-layer-color: var(--_focus-state-layer-color),
focus-state-layer-opacity: var(--_focus-state-layer-opacity),
hover-state-layer-color: var(--_hover-state-layer-color),
hover-state-layer-opacity: var(--_hover-state-layer-opacity),
pressed-state-layer-color: var(--_pressed-state-layer-color),
pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
focus-color: var(--_focus-state-layer-color),
focus-opacity: var(--_focus-state-layer-opacity),
hover-color: var(--_hover-state-layer-color),
hover-opacity: var(--_hover-state-layer-opacity),
pressed-color: var(--_pressed-state-layer-color),
pressed-opacity: var(--_pressed-state-layer-opacity),
)
);
}
Expand All @@ -103,12 +103,9 @@ $_custom-property-prefix: 'filled-icon-button';

@include ripple.theme(
(
focus-state-layer-color:
var(--_toggle-unselected-focus-state-layer-color),
hover-state-layer-color:
var(--_toggle-unselected-hover-state-layer-color),
pressed-state-layer-color:
var(--_toggle-unselected-pressed-state-layer-color),
focus-color: var(--_toggle-unselected-focus-state-layer-color),
hover-color: var(--_toggle-unselected-hover-state-layer-color),
pressed-color: var(--_toggle-unselected-pressed-state-layer-color),
)
);
}
Expand All @@ -133,10 +130,9 @@ $_custom-property-prefix: 'filled-icon-button';

@include ripple.theme(
(
focus-state-layer-color: var(--_toggle-selected-focus-state-layer-color),
hover-state-layer-color: var(--_toggle-selected-hover-state-layer-color),
pressed-state-layer-color:
var(--_toggle-selected-pressed-state-layer-color),
focus-color: var(--_toggle-selected-focus-state-layer-color),
hover-color: var(--_toggle-selected-hover-state-layer-color),
pressed-color: var(--_toggle-selected-pressed-state-layer-color),
)
);
}
Expand Down
28 changes: 12 additions & 16 deletions iconbutton/lib/_filled-tonal-icon-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,12 +73,12 @@ $_custom-property-prefix: 'filled-tonal-icon-button';

@include ripple.theme(
(
focus-state-layer-color: var(--_focus-state-layer-color),
focus-state-layer-opacity: var(--_focus-state-layer-opacity),
hover-state-layer-color: var(--_hover-state-layer-color),
hover-state-layer-opacity: var(--_hover-state-layer-opacity),
pressed-state-layer-color: var(--_pressed-state-layer-color),
pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
focus-color: var(--_focus-state-layer-color),
focus-opacity: var(--_focus-state-layer-opacity),
hover-color: var(--_hover-state-layer-color),
hover-opacity: var(--_hover-state-layer-opacity),
pressed-color: var(--_pressed-state-layer-color),
pressed-opacity: var(--_pressed-state-layer-opacity),
)
);
}
Expand All @@ -103,12 +103,9 @@ $_custom-property-prefix: 'filled-tonal-icon-button';

@include ripple.theme(
(
focus-state-layer-color:
var(--_toggle-unselected-focus-state-layer-color),
hover-state-layer-color:
var(--_toggle-unselected-hover-state-layer-color),
pressed-state-layer-color:
var(--_toggle-unselected-pressed-state-layer-color),
focus-color: var(--_toggle-unselected-focus-state-layer-color),
hover-color: var(--_toggle-unselected-hover-state-layer-color),
pressed-color: var(--_toggle-unselected-pressed-state-layer-color),
)
);
}
Expand All @@ -133,10 +130,9 @@ $_custom-property-prefix: 'filled-tonal-icon-button';

@include ripple.theme(
(
focus-state-layer-color: var(--_toggle-selected-focus-state-layer-color),
hover-state-layer-color: var(--_toggle-selected-hover-state-layer-color),
pressed-state-layer-color:
var(--_toggle-selected-pressed-state-layer-color),
focus-color: var(--_toggle-selected-focus-state-layer-color),
hover-color: var(--_toggle-selected-hover-state-layer-color),
pressed-color: var(--_toggle-selected-pressed-state-layer-color),
)
);
}
Expand Down
24 changes: 12 additions & 12 deletions iconbutton/lib/_outlined-icon-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,12 @@ $_custom-property-prefix: 'outlined-icon-button';

@include ripple.theme(
(
focus-state-layer-color: var(--_unselected-focus-state-layer-color),
focus-state-layer-opacity: var(--_focus-state-layer-opacity),
hover-state-layer-color: var(--_unselected-hover-state-layer-color),
hover-state-layer-opacity: var(--_hover-state-layer-opacity),
pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
focus-color: var(--_unselected-focus-state-layer-color),
focus-opacity: var(--_focus-state-layer-opacity),
hover-color: var(--_unselected-hover-state-layer-color),
hover-opacity: var(--_hover-state-layer-opacity),
pressed-color: var(--_unselected-pressed-state-layer-color),
pressed-opacity: var(--_pressed-state-layer-opacity),
)
);

Expand Down Expand Up @@ -136,12 +136,12 @@ $_custom-property-prefix: 'outlined-icon-button';

@include ripple.theme(
(
focus-state-layer-color: var(--_selected-focus-state-layer-color),
focus-state-layer-opacity: var(--_focus-state-layer-opacity),
hover-state-layer-color: var(--_selected-hover-state-layer-color),
hover-state-layer-opacity: var(--_hover-state-layer-opacity),
pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
focus-color: var(--_selected-focus-state-layer-color),
focus-opacity: var(--_focus-state-layer-opacity),
hover-color: var(--_selected-hover-state-layer-color),
hover-opacity: var(--_hover-state-layer-opacity),
pressed-color: var(--_selected-pressed-state-layer-color),
pressed-opacity: var(--_pressed-state-layer-opacity),
)
);
}
Expand Down
28 changes: 13 additions & 15 deletions iconbutton/lib/_standard-icon-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,15 +59,14 @@ $_shape-property: 'state-layer-shape';

@include ripple.theme(
(
focus-state-layer-color: var(--_unselected-focus-state-layer-color),
focus-state-layer-opacity: var(--_unselected-focus-state-layer-opacity),
hover-state-layer-color: var(--_unselected-hover-state-layer-color),
hover-state-layer-opacity: var(--_unselected-hover-state-layer-opacity),
pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
pressed-state-layer-opacity:
var(--_unselected-pressed-state-layer-opacity),
focus-color: var(--_unselected-focus-state-layer-color),
focus-opacity: var(--_unselected-focus-state-layer-opacity),
hover-color: var(--_unselected-hover-state-layer-color),
hover-opacity: var(--_unselected-hover-state-layer-opacity),
pressed-color: var(--_unselected-pressed-state-layer-color),
pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
// TODO(b/263517885): replace with ripple.theme(state-layer-shape)
state-layer-shape: var(--_state-layer-shape-start-start),
shape: var(--_state-layer-shape-start-start),
)
);

Expand Down Expand Up @@ -107,13 +106,12 @@ $_shape-property: 'state-layer-shape';

@include ripple.theme(
(
focus-state-layer-color: var(--_selected-focus-state-layer-color),
focus-state-layer-opacity: var(--_selected-focus-state-layer-opacity),
hover-state-layer-color: var(--_selected-hover-state-layer-color),
hover-state-layer-opacity: var(--_selected-hover-state-layer-opacity),
pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
pressed-state-layer-opacity:
var(--_selected-pressed-state-layer-opacity),
focus-color: var(--_selected-focus-state-layer-color),
focus-opacity: var(--_selected-focus-state-layer-opacity),
hover-color: var(--_selected-hover-state-layer-color),
hover-opacity: var(--_selected-hover-state-layer-opacity),
pressed-color: var(--_selected-pressed-state-layer-color),
pressed-opacity: var(--_selected-pressed-state-layer-opacity),
)
);
}
Expand Down
13 changes: 6 additions & 7 deletions list/lib/listitem/_list-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,12 @@
);
@include ripple.theme(
(
hover-state-layer-color: var(--_list-item-hover-state-layer-color),
hover-state-layer-opacity: var(--_list-item-hover-state-layer-opacity),
pressed-state-layer-color: var(--_list-item-pressed-state-layer-color),
pressed-state-layer-opacity:
var(--_list-item-pressed-state-layer-opacity),
focus-state-layer-color: var(--_list-item-focus-state-layer-color),
focus-state-layer-opacity: var(--_list-item-focus-state-layer-opacity),
hover-color: var(--_list-item-hover-state-layer-color),
hover-opacity: var(--_list-item-hover-state-layer-opacity),
pressed-color: var(--_list-item-pressed-state-layer-color),
pressed-opacity: var(--_list-item-pressed-state-layer-opacity),
focus-color: var(--_list-item-focus-state-layer-color),
focus-opacity: var(--_list-item-focus-state-layer-opacity),
)
);
}
Expand Down
2 changes: 1 addition & 1 deletion menu/lib/menuitem/_menu-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ $_custom-property-prefix: 'menu';
*/
@include ripple.theme(
(
hover-state-layer-opacity: 0,
hover-opacity: 0,
)
);
}
Expand Down
Loading

0 comments on commit ff84a66

Please sign in to comment.