Skip to content

Commit

Permalink
refactor(multiple): convert components to theme inspection API
Browse files Browse the repository at this point in the history
  • Loading branch information
@mmalerba
mmalerba committed Aug 30, 2023
1 parent 12d2a12 commit 85111cb
Show file tree
Hide file tree
Showing 17 changed files with 429 additions and 451 deletions.
8 changes: 7 additions & 1 deletion .stylelintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,9 @@
"**/_button-theme.scss",
"**/_card-theme.scss",
"**/_checkbox-theme.scss",
"**/_column-resize-theme.scss",
"**/_core-theme.scss",
"**/_datepicker-theme.scss",
"**/_fab-theme.scss",
"**/_form-field-theme.scss",
"**/_icon-button-theme.scss",
Expand All @@ -159,12 +161,16 @@
"**/_optgroup-theme.scss",
"**/_option-theme.scss",
"**/_paginator-theme.scss",
"**/_popover-edit-theme.scss",
"**/_progress-bar-theme.scss",
"**/_pseudo-checkbox-theme.scss",
"**/_radio-theme.scss",
"**/_ripple-theme.scss",
"**/_slide-toggle-theme.scss",
"**/_slider-theme.scss"
"**/_slider-theme.scss",
"**/_sort-theme.scss",
"**/_stepper-theme.scss",
"**/_tree-theme.scss"
],
"rules": {
"material/theme-mixin-api": false
Expand Down
36 changes: 13 additions & 23 deletions src/material-experimental/column-resize/_column-resize-theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
@use 'sass:map';
@use '@angular/material' as mat;

@mixin color($config-or-theme) {
$config: mat.get-color-config($config-or-theme);
$primary: map.get($config, primary);
$foreground: map.get($config, foreground);

$non-resizable-hover-divider: mat.get-color-from-palette($foreground, divider);
$resizable-hover-divider: mat.get-color-from-palette($primary, 600);
$resizable-active-divider: mat.get-color-from-palette($primary, 600);
@mixin color($theme) {
$non-resizable-hover-divider: mat.private-get-theme-color($theme, foreground, divider);
$resizable-hover-divider: mat.private-get-theme-color($theme, primary, 600);
$resizable-active-divider: mat.private-get-theme-color($theme, primary, 600);

// TODO: these styles don't really belong in the `color` part of the theme.
// We should figure out a better place for them.
Expand Down Expand Up @@ -135,25 +130,20 @@
}
}

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

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

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

@if $color != null {
@include color($color);
@if mat.private-theme-has($theme, color) {
@include color($theme);
}
@if $density != null {
@include density($density);
@if mat.private-theme-has($theme, density) {
@include density($theme);
}
@if $typography != null {
@include typography($typography);
@if mat.private-theme-has($theme, typography) {
@include typography($theme);
}
}
}
43 changes: 16 additions & 27 deletions src/material-experimental/popover-edit/_popover-edit-theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
@use 'sass:map';
@use '@angular/cdk';
@use '@angular/material' as mat;

@function _hover-content-background($direction, $background-color) {
@return linear-gradient($direction, rgba($background-color, 0), $background-color 8px);
}

@mixin color($config-or-theme) {
$config: mat.get-color-config($config-or-theme);
$background: map.get($config, background);
$foreground: map.get($config, foreground);
$primary: map.get($config, primary);
$background-color: mat.get-color-from-palette($background, 'card');
@mixin color($theme) {
$background-color: mat.private-get-theme-color($theme, background, 'card');

// TODO: these structural styles don't belong in the `color` part of a theme.
// We should figure out a better place for them.
Expand Down Expand Up @@ -47,7 +42,7 @@
position: relative;

&::after {
background-color: mat.get-color-from-palette($primary);
background-color: mat.private-get-theme-color($theme, primary);
bottom: 0;
content: '';
height: 2px;
Expand Down Expand Up @@ -81,9 +76,9 @@
}

.mat-edit-pane {
@include mat.private-theme-elevation(2, $config);
@include mat.private-theme-elevation(2, $theme);
background: $background-color;
color: mat.get-color-from-palette($foreground, text);
color: mat.private-get-theme-color($theme, foreground, text);
display: block;
padding: 16px 24px;

Expand Down Expand Up @@ -147,32 +142,26 @@
}
}

@mixin typography($config-or-theme) {
$config: mat.private-typography-to-2018-config(
mat.get-typography-config($config-or-theme));
@mixin typography($theme) {
[mat-edit-title] {
@include mat.typography-level($config, headline-6);
font: mat.private-get-theme-typography($theme, headline-6, font);
letter-spacing: mat.private-get-theme-typography($theme, headline-6, letter-spacing);
}
}


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

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

@if $color != null {
@include color($color);
@if mat.private-theme-has($theme, color) {
@include color($theme);
}
@if $density != null {
@include density($density);
@if mat.private-theme-has($theme, density) {
@include density($theme);
}
@if $typography != null {
@include typography($typography);
@if mat.private-theme-has($theme, typography) {
@include typography($theme);
}
}
}
22 changes: 7 additions & 15 deletions src/material/core/color/_all-color.scss
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,17 @@
@use '../theming/all-theme';
@use '../theming/theming';
@use '../theming/inspection';

// Includes all of the color styles.
@mixin all-component-colors($config-or-theme) {
// In case a theme object has been passed instead of a configuration for
// the color system, extract the color config from the theme object.
$config: if(theming.private-is-theme-object($config-or-theme),
theming.get-color-config($config-or-theme), $config-or-theme);

@if $config == null {
@mixin all-component-colors($theme) {
@if not inspection.theme-has($theme, color) {
@error 'No color configuration specified.';
}

@include all-theme.all-component-themes((
color: $config,
typography: null,
density: null,
));
@include all-theme.all-component-themes(
inspection.theme-remove($theme, base, typography, density));
}

// @deprecated Use `all-component-colors`.
@mixin angular-material-color($config-or-theme) {
@include all-component-colors($config-or-theme);
@mixin angular-material-color($theme) {
@include all-component-colors($theme);
}
73 changes: 34 additions & 39 deletions src/material/core/density/private/_all-density.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@use '../../theming/theming';
@use '../../theming/inspection';
@use '../../../button/button-theme';
@use '../../../button/icon-button-theme';
@use '../../../button/fab-theme';
Expand Down Expand Up @@ -30,13 +30,8 @@
@use '../../../table/table-theme';

// Includes all of the density styles.
@mixin all-component-densities($config-or-theme) {
// In case a theme object has been passed instead of a configuration for
// the density system, extract the density config from the theme object.
$config: if(theming.private-is-theme-object($config-or-theme),
theming.get-density-config($config-or-theme), $config-or-theme);

@if $config == null {
@mixin all-component-densities($theme) {
@if not inspection.theme-has($theme, density) {
@error 'No density configuration specified.';
}

Expand All @@ -45,39 +40,39 @@
// not possible as it would introduce a circular dependency for density because the `mat-core`
// mixin that is transitively loaded by the `all-theme` file, imports `all-density` which
// would then load `all-theme` again. This ultimately results a circular dependency.
@include form-field-theme.density($config);
@include card-theme.density($config);
@include progress-bar-theme.density($config);
@include progress-spinner-theme.density($config);
@include tooltip-theme.density($config);
@include input-theme.density($config);
@include core-theme.density($config);
@include select-theme.density($config);
@include checkbox-theme.density($config);
@include autocomplete-theme.density($config);
@include dialog-theme.density($config);
@include chips-theme.density($config);
@include slide-toggle-theme.density($config);
@include radio-theme.density($config);
@include slider-theme.density($config);
@include menu-theme.density($config);
@include list-theme.density($config);
@include paginator-theme.density($config);
@include tabs-theme.density($config);
@include snack-bar-theme.density($config);
@include button-theme.density($config);
@include icon-button-theme.density($config);
@include fab-theme.density($config);
@include table-theme.density($config);
@include expansion-theme.density($config);
@include stepper-theme.density($config);
@include toolbar-theme.density($config);
@include tree-theme.density($config);
@include button-toggle-theme.density($config);
@include form-field-theme.density($theme);
@include card-theme.density($theme);
@include progress-bar-theme.density($theme);
@include progress-spinner-theme.density($theme);
@include tooltip-theme.density($theme);
@include input-theme.density($theme);
@include core-theme.density($theme);
@include select-theme.density($theme);
@include checkbox-theme.density($theme);
@include autocomplete-theme.density($theme);
@include dialog-theme.density($theme);
@include chips-theme.density($theme);
@include slide-toggle-theme.density($theme);
@include radio-theme.density($theme);
@include slider-theme.density($theme);
@include menu-theme.density($theme);
@include list-theme.density($theme);
@include paginator-theme.density($theme);
@include tabs-theme.density($theme);
@include snack-bar-theme.density($theme);
@include button-theme.density($theme);
@include icon-button-theme.density($theme);
@include fab-theme.density($theme);
@include table-theme.density($theme);
@include expansion-theme.density($theme);
@include stepper-theme.density($theme);
@include toolbar-theme.density($theme);
@include tree-theme.density($theme);
@include button-toggle-theme.density($theme);
}


// @deprecated Use `all-component-densities`.
@mixin angular-material-density($config-or-theme) {
@include all-component-densities($config-or-theme);
@mixin angular-material-density($theme) {
@include all-component-densities($theme);
}
48 changes: 22 additions & 26 deletions src/material/core/focus-indicators/_private.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@use '@angular/cdk';
@use '../style/layout-common';
@use '../theming/theming';
@use '../theming/inspection';

// Private sass variables that will be used as reference throughout component stylesheets.
$default-border-width: 3px;
Expand Down Expand Up @@ -113,65 +114,60 @@ $default-border-radius: 4px;
@include customize-focus-indicators($config, 'mat-mdc');
}

@mixin strong-focus-indicators-color($config-or-theme-or-color) {
@if meta.type-of($config-or-theme-or-color) == 'color' {
@mixin strong-focus-indicators-color($theme-or-color) {
@if meta.type-of($theme-or-color) == 'color' {
@include customize-focus-indicators((
border-color: $config-or-theme-or-color
border-color: $theme-or-color
), 'mat');
}
@else {
$config: theming.get-color-config($config-or-theme-or-color);
$border-color: theming.get-color-from-palette(map.get($config, primary));
$border-color: inspection.get-theme-color($theme-or-color, primary);
@include customize-focus-indicators((
border-color: $border-color
), 'mat');
}
}

@mixin strong-focus-indicators-theme($theme-or-color-config-or-color) {
@if meta.type-of($theme-or-color-config-or-color) == 'color' {
@mixin strong-focus-indicators-theme($theme-or-color) {
@if meta.type-of($theme-or-color) == 'color' {
@include customize-focus-indicators((
border-color: $theme-or-color-config-or-color
border-color: $theme-or-color
), 'mat');
}
@else {
$theme: theming.private-legacy-get-theme($theme-or-color-config-or-color);
@include theming.private-check-duplicate-theme-styles($theme, 'mat-focus-indicators') {
$color: theming.get-color-config($theme);
@if $color != null {
@include strong-focus-indicators-color($color);
@include theming.private-check-duplicate-theme-styles($theme-or-color, 'mat-focus-indicators') {
@if inspection.theme-has($theme-or-color, color) {
@include strong-focus-indicators-color($theme-or-color);
}
}
}
}

@mixin mdc-strong-focus-indicators-color($config-or-theme-or-color) {
@if meta.type-of($config-or-theme-or-color) == 'color' {
@mixin mdc-strong-focus-indicators-color($theme-or-color) {
@if meta.type-of($theme-or-color) == 'color' {
@include customize-focus-indicators((
border-color: $config-or-theme-or-color
border-color: $theme-or-color
), 'mat-mdc');
}
@else {
$config: theming.get-color-config($config-or-theme-or-color);
$border-color: theming.get-color-from-palette(map.get($config, primary));
$border-color: inspection.get-theme-color($theme-or-color, primary);
@include customize-focus-indicators((
border-color: $border-color
), 'mat-mdc');
}
}

@mixin mdc-strong-focus-indicators-theme($theme-or-color-config-or-color) {
@if meta.type-of($theme-or-color-config-or-color) == 'color' {
@mixin mdc-strong-focus-indicators-theme($theme-or-color) {
@if meta.type-of($theme-or-color) == 'color' {
@include customize-focus-indicators((
border-color: $theme-or-color-config-or-color
border-color: $theme-or-color
), 'mat-mdc');
}
@else {
$theme: theming.private-legacy-get-theme($theme-or-color-config-or-color);
@include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-focus-indicators') {
$color: theming.get-color-config($theme);
@if $color != null {
@include mdc-strong-focus-indicators-color($color);
@include theming.private-check-duplicate-theme-styles(
$theme-or-color, 'mat-mdc-focus-indicators') {
@if inspection.theme-has($theme-or-color, color) {
@include mdc-strong-focus-indicators-color($theme-or-color);
}
}
}
Expand Down
Loading

0 comments on commit 85111cb

Please sign in to comment.