Skip to content

Commit

Permalink
refactor(multiple): convert components to theme inspection API
Browse files Browse the repository at this point in the history 
Converts: button, icon-button, fab, paginator.
  • Loading branch information
@mmalerba
mmalerba committed Aug 28, 2023
1 parent 3998103 commit 7d534ae
Show file tree
Hide file tree
Showing 10 changed files with 120 additions and 165 deletions.
6 changes: 3 additions & 3 deletions src/material/button/_button-base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,9 @@
}
}

// Changes a button theme to exclude the ripple styles.
@function mat-private-button-remove-ripple($theme) {
@return map.merge($theme, (
// Changes a button token set to exclude the ripple styles.
@function mat-private-button-remove-ripple($tokens) {
@return map.merge($tokens, (
focus-state-layer-color: null,
focus-state-layer-opacity: null,
hover-state-layer-color: null,
Expand Down
5 changes: 3 additions & 2 deletions src/material/button/_button-theme-private.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,15 @@
@use '@material/theme/theme-color' as mdc-theme-color;

@use '../core/mdc-helpers/mdc-helpers';
@use '../core/theming/inspection';

@mixin _ripple-color($color) {
--mat-mdc-button-persistent-ripple-color: #{$color};
--mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
}

@mixin ripple-theme-styles($config, $is-filled) {
$opacities: if(map.get($config, is-dark),
@mixin ripple-theme-styles($theme, $is-filled) {
$opacities: if(inspection.get-theme-type($theme) == dark,
mdc-ripple-theme.$light-ink-opacities, mdc-ripple-theme.$dark-ink-opacities);

// Ideally these styles would be structural, but MDC bases some of the opacities on the theme.
Expand Down
42 changes: 18 additions & 24 deletions src/material/button/_button-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
@use './button-theme-private';
@use '../core/mdc-helpers/mdc-helpers';
@use '../core/theming/theming';
@use '../core/theming/inspection';
@use '../core/typography/typography';

@mixin _button-variant($color) {
Expand Down Expand Up @@ -38,10 +39,9 @@
));
}

@mixin color($config-or-theme) {
$config: theming.get-color-config($config-or-theme);
@include mdc-helpers.using-mdc-theme($config) {
$is-dark: map.get($config, is-dark);
@mixin color($theme) {
@include mdc-helpers.using-mdc-theme($theme) {
$is-dark: inspection.get-theme-type($theme) == dark;
$on-surface: mdc-theme-color.prop-value(on-surface);
$surface: mdc-theme-color.prop-value(surface);
$disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
Expand Down Expand Up @@ -174,25 +174,24 @@

// Ripple colors
.mat-mdc-button, .mat-mdc-outlined-button {
@include button-theme-private.ripple-theme-styles($config, false);
@include button-theme-private.ripple-theme-styles($theme, false);
}

.mat-mdc-raised-button, .mat-mdc-unelevated-button {
@include button-theme-private.ripple-theme-styles($config, true);
@include button-theme-private.ripple-theme-styles($theme, true);
}
}
}

@mixin typography($config-or-theme) {
$config: typography.private-typography-to-2018-config(
theming.get-typography-config($config-or-theme));
@include mdc-helpers.using-mdc-typography($config) {
@mixin typography($theme) {
@include mdc-helpers.using-mdc-typography($theme) {
@include mdc-button.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
}
}

@mixin density($config-or-theme) {
$density-scale: theming.get-density-config($config-or-theme);
@mixin density($theme) {
$density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);

.mat-mdc-button,
.mat-mdc-raised-button,
.mat-mdc-unelevated-button,
Expand All @@ -205,21 +204,16 @@
}
}

@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@mixin theme($theme) {
@include theming.private-check-duplicate-theme-styles($theme, 'mat-button') {
$color: theming.get-color-config($theme);
$density: theming.get-density-config($theme);
$typography: theming.get-typography-config($theme);

@if $color != null {
@include color($color);
@if inspection.theme-has($theme, color) {
@include color($theme);
}
@if $density != null {
@include density($density);
@if inspection.theme-has($theme, density) {
@include density($theme);
}
@if $typography != null {
@include typography($typography);
@if inspection.theme-has($theme, typography) {
@include typography($theme);
}
}
}
79 changes: 31 additions & 48 deletions src/material/button/_fab-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@
@use '../core/mdc-helpers/mdc-helpers';
@use '../core/style/sass-utils';
@use '../core/theming/theming';
@use '../core/theming/inspection';
@use '../core/tokens/m2/mdc/fab' as tokens-mdc-fab;
@use '../core/tokens/m2/mdc/extended-fab' as tokens-mdc-extended-fab;
@use '../core/typography/typography';

@mixin base($config-or-theme) {
@mixin base($theme) {
// Add default values for tokens not related to color, typography, or density.
@include sass-utils.current-selector-or-root() {
@include mdc-fab-theme.theme(tokens-mdc-fab.get-unthemable-tokens());
Expand All @@ -21,17 +22,11 @@
}
}

@mixin _fab-variant($config, $foreground, $background) {
$color-config: map.merge(
$config,
(
primary: (
default: $background,
default-contrast: $foreground,
),
)
@mixin _fab-variant($foreground, $background) {
$color-tokens: (
container-color: $background,
icon-color: $foreground
);
$color-tokens: tokens-mdc-fab.get-color-tokens($color-config);
@include mdc-fab-theme.theme($color-tokens);

--mat-mdc-fab-color: #{$foreground};
Expand All @@ -41,90 +36,78 @@
@return if(mdc-helpers.variable-safe-contrast-tone($color, $is-dark) == 'dark', #000, #fff);
}

@mixin color($config-or-theme) {
$config: theming.get-color-config($config-or-theme);
@mixin color($theme) {
$is-dark: inspection.get-theme-type($theme) == dark;

$is-dark: map.get($config, is-dark);
$background: map.get($config, background);

$surface: theming.get-color-from-palette($background, card);
$primary: theming.get-color-from-palette(map.get($config, primary));
$accent: theming.get-color-from-palette(map.get($config, accent));
$warn: theming.get-color-from-palette(map.get($config, warn));
$surface: inspection.get-theme-color($theme, background, card);
$primary: inspection.get-theme-color($theme, primary);
$accent: inspection.get-theme-color($theme, accent);
$warn: inspection.get-theme-color($theme, warn);

$on-surface: white-or-black($surface, $is-dark);
$on-primary: white-or-black($primary, $is-dark);
$on-accent: white-or-black($accent, $is-dark);
$on-warn: white-or-black($warn, $is-dark);

$disabled: rgba($on-surface, 0.12);
$on-disabled: rgba($on-surface, if(map.get($config, is-dark), 0.5, 0.38));
$on-disabled: rgba($on-surface, if($is-dark, 0.5, 0.38));

.mat-mdc-fab,
.mat-mdc-mini-fab {
// TODO(wagnermaciel): The ripple-theme-styles mixin depends heavily on
// being wrapped by using-mdc-theme. This workaround needs to be
// revisited w/ a more holistic solution.
@include mdc-helpers.using-mdc-theme($config) {
@include button-theme-private.ripple-theme-styles($config, true);
@include mdc-helpers.using-mdc-theme($theme) {
@include button-theme-private.ripple-theme-styles($theme, true);
}

@include button-theme-private.apply-disabled-style() {
@include _fab-variant($config, $on-disabled, $disabled);
@include _fab-variant($on-disabled, $disabled);
}

&.mat-unthemed {
@include _fab-variant($config, $on-surface, $surface);
@include _fab-variant($on-surface, $surface);
}

&.mat-primary {
@include _fab-variant($config, $on-primary, $primary);
@include _fab-variant($on-primary, $primary);
}

&.mat-accent {
@include _fab-variant($config, $on-accent, $accent);
@include _fab-variant($on-accent, $accent);
}

&.mat-warn {
@include _fab-variant($config, $on-warn, $warn);
@include _fab-variant($on-warn, $warn);
}
}
}

@mixin typography($config-or-theme) {
$config: typography.private-typography-to-2018-config(
theming.get-typography-config($config-or-theme)
);

@include mdc-helpers.using-mdc-typography($config) {
@mixin typography($theme) {
@include mdc-helpers.using-mdc-typography($theme) {
@include mdc-fab.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
}

$typography-tokens: tokens-mdc-extended-fab.get-typography-tokens($config);
$typography-tokens: tokens-mdc-extended-fab.get-typography-tokens($theme);
.mat-mdc-extended-fab {
@include mdc-extended-fab-theme.theme($typography-tokens);
}
}

@mixin density($config-or-theme) {
@mixin density($theme) {
}

@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@mixin theme($theme) {
@include theming.private-check-duplicate-theme-styles($theme, 'mat-fab') {
$color: theming.get-color-config($theme);
$density: theming.get-density-config($theme);
$typography: theming.get-typography-config($theme);

@include base($theme);
@if $color != null {
@include color($color);
@if inspection.theme-has($theme, color) {
@include color($theme);
}
@if $density != null {
@include density($density);
@if inspection.theme-has($theme, density) {
@include density($theme);
}
@if $typography != null {
@include typography($typography);
@if inspection.theme-has($theme, typography) {
@include typography($theme);
}
}
}
44 changes: 19 additions & 25 deletions src/material/button/_icon-button-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

@use './button-theme-private';
@use '../core/theming/theming';
@use '../core/theming/inspection';

$_icon-size: 24px;

Expand All @@ -23,33 +24,31 @@ $_icon-size: 24px;
@return if($is-dark, 'light', 'dark');
}

@mixin color($config-or-theme) {
$config: theming.get-color-config($config-or-theme);
$color-tokens: tokens-mdc-icon-button.get-color-tokens($config);
$background-palette: map.get($config, background);
$surface: theming.get-color-from-palette($background-palette, card);
$is-dark: map.get($config, is-dark);
@mixin color($theme) {
$color-tokens: tokens-mdc-icon-button.get-color-tokens($theme);
$surface: inspection.get-theme-color($theme, background, card);
$is-dark: inspection.get-theme-type($theme) == dark;
$on-surface: if(_variable-safe-contrast-tone($surface, $is-dark) == 'dark', #000, #fff);

.mat-mdc-icon-button {
@include button-theme-private.ripple-theme-styles($config, false);
@include button-theme-private.ripple-theme-styles($theme, false);
@include mdc-icon-button-theme.theme($color-tokens);
@include _ripple-color($on-surface);

&.mat-primary {
$color: theming.get-color-from-palette(map.get($config, primary));
$color: inspection.get-theme-color($theme, primary);
@include mdc-icon-button-theme.theme((icon-color: $color));
@include _ripple-color($color);
}

&.mat-accent {
$color: theming.get-color-from-palette(map.get($config, accent));
$color: inspection.get-theme-color($theme, accent);
@include mdc-icon-button-theme.theme((icon-color: $color));
@include _ripple-color($color);
}

&.mat-warn {
$color: theming.get-color-from-palette(map.get($config, warn));
$color: inspection.get-theme-color($theme, warn);
@include mdc-icon-button-theme.theme((icon-color: $color));
@include _ripple-color($color);
}
Expand All @@ -64,11 +63,11 @@ $_icon-size: 24px;
}
}

@mixin typography($config-or-theme) {
@mixin typography($theme) {
}

@mixin density($config-or-theme) {
$density-scale: theming.get-density-config($config-or-theme);
@mixin density($theme) {
$density-scale: inspection.get-theme-density($theme);
// Manually apply the expected density theming, and include the padding
// as it was applied before
$calculated-size: mdc-density-functions.prop-value(
Expand Down Expand Up @@ -104,21 +103,16 @@ $_icon-size: 24px;
}
}

@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@mixin theme($theme) {
@include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') {
$color: theming.get-color-config($theme);
$density: theming.get-density-config($theme);
$typography: theming.get-typography-config($theme);

@if $color != null {
@include color($color);
@if inspection.theme-has($theme, color) {
@include color($theme);
}
@if $density != null {
@include density($density);
@if inspection.theme-has($theme, density) {
@include density($theme);
}
@if $typography != null {
@include typography($typography);
@if inspection.theme-has($theme, typography) {
@include typography($theme);
}
}
}
Loading

0 comments on commit 7d534ae

Please sign in to comment.