feat(material/core): expose new @use-based Sass API #22173

crisbeto · 2021-03-10T17:06:58Z

Reworks the public Sass API to take advantage of @use in order to allow for a single
entry point into @angular/material or @angular/cdk. Some mixins and variables were
renamed in order be a better reflection of what they do.

Before:

@import '~@angular/material/theming';
@include mat-core();

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);

$candy-app-theme: mat-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
    warn: $candy-app-warn,
  )
));

@include angular-material-theme($candy-app-theme);

After:

@use '~@angular/material' as mat;
@include mat.core();

$candy-app-primary: mat.define-palette(mat.$indigo-palette);
$candy-app-accent:  mat.define-palette(mat.$pink-palette, A200, A100, A400);
$candy-app-warn:    mat.define-palette(mat.$red-palette);

$candy-app-theme: mat.define-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
    warn: $candy-app-warn,
  )
));

@include mat.all-component-themes($candy-app-theme);

crisbeto · 2021-03-10T17:08:50Z

src/material/_index.scss

@@ -0,0 +1,88 @@
+// Theming APIs
+@forward './core/theming/theming' show define-light-theme, define-dark-theme,


Technically we don't need to list out all the APIs with show, but I liked being explicit about what we expose. I'm open towards changing it since this could result in us forgetting to re-export a new API.

+1, I like this being explicit as well; from here it's easy to see our entire Sass API surface

crisbeto · 2021-03-10T17:09:19Z

src/material/core/typography/_typography-utils.scss

@@ -12,7 +12,7 @@
 }

 // Gets the line height for a level inside a typography config.
-@function height($config, $level) {
+@function line-height($config, $level) {


This fixes an accidental rename that happened during the automated migration.

jelbourn

Overall amazing, text-field is the only actual comment. I'll start a presubmit now, though, and see what comes up

src/cdk/_index.scss

src/dev-app/theme.scss

jelbourn · 2021-03-10T20:01:00Z

src/material/_index.scss

@@ -0,0 +1,88 @@
+// Theming APIs
+@forward './core/theming/theming' show define-light-theme, define-dark-theme,


+1, I like this being explicit as well; from here it's easy to see our entire Sass API surface

jelbourn · 2021-03-10T20:35:04Z

Ah, we should also add the deprecations to the commit for the changelog

crisbeto · 2021-03-11T20:35:31Z

@jelbourn I've addressed the feedback by doing the following:

Switched a few of our internal themes to use the new API (dev app, e2e app etc). I had to revert my changes to the prebuilt themes, because I couldn't figure out how to format the path correctly. It would have to be something like @use '../../index' as mat;, but the compiler complained about it.
Split up the text-field mixin from the CDK into text-field-autosize and text-field-autofill.

Note that the CI is currently failing, because CircleCI is down. I'll make sure that it's green once Circle is back up.

src/material/core/theming/_theming-deprecated.scss

jelbourn

LGTM

@include

Reworks the public Sass API to take advantage of `@use` in order to allow for a single entry point into `@angular/material` or `@angular/cdk`. Some mixins and variables were renamed in order be a better reflection of what they do. Before: ``` @import '~@angular/material/theming'; @include mat-core(); $candy-app-primary: mat-palette($mat-indigo); $candy-app-accent: mat-palette($mat-pink, A200, A100, A400); $candy-app-warn: mat-palette($mat-red); $candy-app-theme: mat-light-theme(( color: ( primary: $candy-app-primary, accent: $candy-app-accent, warn: $candy-app-warn, ) )); @include angular-material-theme($candy-app-theme); ``` After: ``` @use '~@angular/material' as mat; @include mat.core(); $candy-app-primary: mat.define-palette(mat.$indigo-palette); $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); $candy-app-warn: mat.define-palette(mat.$red-palette); $candy-app-theme: mat.define-light-theme(( color: ( primary: $candy-app-primary, accent: $candy-app-accent, warn: $candy-app-warn, ) )); @include mat.all-component-themes($candy-app-theme); ```

This change completely rewrites the theming guide to be more complete, correct, and concise. Summary of changes: * Explain the concepts of palettes, hues, and themes. * Ensure all content is conceptual and not task-based. * Use the new Sass `@use` API introduced in angular#22173 * Document usage of the theming system with shadow dom * Document the fact that CSS overrides are strongly discouraged * Be more explicit about which palettes we provide * Consolidate on a single approach to including theme CSS in an app (assuming Angular CLI) I will send follow-up PRs for the typography, theming-your-components, and customizing-component-styles guides.

This change completely rewrites the theming guide to be more complete, correct, and concise. Summary of changes: * Explain the concepts of palettes, hues, and themes. * Ensure all content is conceptual and not task-based. * Use the new Sass `@use` API introduced in #22173 * Document usage of the theming system with shadow dom * Document the fact that CSS overrides are strongly discouraged * Be more explicit about which palettes we provide * Consolidate on a single approach to including theme CSS in an app (assuming Angular CLI) I will send follow-up PRs for the typography, theming-your-components, and customizing-component-styles guides.

This change completely rewrites the typography guide to be more complete, correct, and concise. Summary of changes: * Explain the concepts of "typography level" and "typography config". * Ensure all content is conceptual and not task-based. * Use new Sass `@use` API introduiced in angular#22173 * Split up level descriptions from CSS classes * Clarify that the system currently uses the 2014-era typography levels This is the second PR in a series, following angular#22268. After this will be PRs for theming-your-components, customizing-component-styles, and new docs for strong focus indicators.

This change completely rewrites the typography guide to be more complete, correct, and concise. Summary of changes: * Explain the concepts of "typography level" and "typography config". * Ensure all content is conceptual and not task-based. * Use new Sass `@use` API introduiced in #22173 * Split up level descriptions from CSS classes * Clarify that the system currently uses the 2014-era typography levels This is the second PR in a series, following #22268. After this will be PRs for theming-your-components, customizing-component-styles, and new docs for strong focus indicators.

This change completely rewrites the theming-your-components guide to be more complete, correct, and concise. Summary of changes: * Start document with some explanatory content before diving into step-by-step tutorial. * Use new Sass `@use` API introduced in angular#22173 * Document (and expose) `get-color-config` and `get-typography-config`

This change completely rewrites the theming-your-components guide to be more complete, correct, and concise. Summary of changes: * Start document with some explanatory content before diving into step-by-step tutorial. * Use new Sass `@use` API introduced in #22173 * Document (and expose) `get-color-config` and `get-typography-config`

angular-automatic-lock-bot · 2021-04-19T00:04:34Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

google-cla bot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Mar 10, 2021

crisbeto commented Mar 10, 2021

View reviewed changes

crisbeto force-pushed the sass-api-revamp branch 4 times, most recently from 956ad5d to 36ddb8b Compare March 10, 2021 17:25

crisbeto marked this pull request as ready for review March 10, 2021 17:30

crisbeto requested review from andrewseguin, devversion, jelbourn, mmalerba and a team as code owners March 10, 2021 17:30

crisbeto assigned jelbourn Mar 10, 2021

crisbeto added P2 The issue is important to a large percentage of users, with a workaround target: major This PR is targeted for the next major release labels Mar 10, 2021

crisbeto added this to the 12.0.0 milestone Mar 10, 2021

josephperrott removed the request for review from a team March 10, 2021 17:32

jelbourn reviewed Mar 10, 2021

View reviewed changes

crisbeto force-pushed the sass-api-revamp branch 4 times, most recently from b38346a to b757526 Compare March 11, 2021 20:29

jelbourn reviewed Mar 11, 2021

View reviewed changes

src/material/core/theming/_theming-deprecated.scss Outdated Show resolved Hide resolved

crisbeto force-pushed the sass-api-revamp branch from b757526 to bdb6ff3 Compare March 11, 2021 21:52

jelbourn approved these changes Mar 11, 2021

View reviewed changes

jelbourn added merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note action: merge The PR is ready for merge by the caretaker labels Mar 11, 2021

crisbeto force-pushed the sass-api-revamp branch 8 times, most recently from f1270bc to dd6ae86 Compare March 15, 2021 22:21

crisbeto force-pushed the sass-api-revamp branch from dd6ae86 to 38b392a Compare March 17, 2021 06:45

jelbourn mentioned this pull request Mar 17, 2021

docs(material/theming): rewrite theming guide for @use #22268

Merged

andrewseguin merged commit 40ceda2 into angular:master Mar 19, 2021

jelbourn mentioned this pull request Mar 30, 2021

docs(material/theming): rewrite typography guide for @use #22366

Merged

jelbourn mentioned this pull request Apr 12, 2021

docs(material/theming): rewrite theming-your-components guide #22465

Merged

angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 19, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(material/core): expose new @use-based Sass API #22173

feat(material/core): expose new @use-based Sass API #22173

Uh oh!

crisbeto commented Mar 10, 2021 •

edited

Loading

Uh oh!

crisbeto Mar 10, 2021

Uh oh!

jelbourn Mar 10, 2021

Uh oh!

crisbeto Mar 10, 2021

Uh oh!

jelbourn left a comment

Uh oh!

Uh oh!

Uh oh!

jelbourn Mar 10, 2021

Uh oh!

jelbourn commented Mar 10, 2021 •

edited

Loading

Uh oh!

crisbeto commented Mar 11, 2021 •

edited

Loading

Uh oh!

Uh oh!

jelbourn left a comment

Uh oh!

angular-automatic-lock-bot bot commented Apr 19, 2021

Uh oh!

Uh oh!

		@@ -0,0 +1,88 @@
		// Theming APIs
		@forward './core/theming/theming' show define-light-theme, define-dark-theme,

feat(material/core): expose new @use-based Sass API #22173

feat(material/core): expose new @use-based Sass API #22173

Uh oh!

Conversation

crisbeto commented Mar 10, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

crisbeto Mar 10, 2021

Choose a reason for hiding this comment

Uh oh!

jelbourn Mar 10, 2021

Choose a reason for hiding this comment

Uh oh!

crisbeto Mar 10, 2021

Choose a reason for hiding this comment

Uh oh!

jelbourn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jelbourn Mar 10, 2021

Choose a reason for hiding this comment

Uh oh!

jelbourn commented Mar 10, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

crisbeto commented Mar 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

jelbourn left a comment

Choose a reason for hiding this comment

Uh oh!

angular-automatic-lock-bot bot commented Apr 19, 2021

Uh oh!

Uh oh!

crisbeto commented Mar 10, 2021 •

edited

Loading

jelbourn commented Mar 10, 2021 •

edited

Loading

crisbeto commented Mar 11, 2021 •

edited

Loading