Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(material/core): better handling of css variables in theme palettes #26260

Merged
merged 1 commit into from Dec 14, 2022

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Dec 14, 2022

Technically we don't support theming using CSS variables, but the community has started depending on it anyway since it happened to work. This was broken during the switch to MDC which is blocking users from updating to v15.

These changes make a best effort to avoid all the errors and reduce the amount of warnings as much as possible.

A couple of disclaimers:

  • All the places where we were manipulating colors are going to compile now, but they might not look great. This is only going to affect some MDC components though, the legacy components will work as expected.
  • One warning might be logged from the themes for components based on MDC's list. They will compile and look acceptable, but I couldn't find a good way to avoid the warning with our current setup. We will be able to avoid the warning once we switch the components to the token theming APIs.

Relates to #25981.

@crisbeto crisbeto added P2 The issue is important to a large percentage of users, with a workaround target: patch This PR is targeted for the next patch release labels Dec 14, 2022
@crisbeto crisbeto marked this pull request as ready for review December 14, 2022 10:50
Technically we don't support theming using CSS variables, but the community has started depending on it anyway since it happened to work. This was broken during the switch to MDC which is blocking users from updating to v15.

These changes make a best effort to avoid all the errors and reduce the amount of warnings as much as possible.

A couple of disclaimers:
* All the places where we were manipulating colors are going to compile now, but they might not look great. This is only going to affect some MDC components though, the legacy components will work as expected.
* One warning might be logged from the themes for components based on MDC's list. They will compile and look acceptable, but I couldn't find a good way to avoid the error with our current setup. We will be able to avoid the warning once we switch the components to the token theming APIs.

Relates to angular#25981.
@crisbeto crisbeto added the action: merge The PR is ready for merge by the caretaker label Dec 14, 2022
@crisbeto crisbeto merged commit f8dd018 into angular:main Dec 14, 2022
crisbeto added a commit that referenced this pull request Dec 14, 2022
#26260)

Technically we don't support theming using CSS variables, but the community has started depending on it anyway since it happened to work. This was broken during the switch to MDC which is blocking users from updating to v15.

These changes make a best effort to avoid all the errors and reduce the amount of warnings as much as possible.

A couple of disclaimers:
* All the places where we were manipulating colors are going to compile now, but they might not look great. This is only going to affect some MDC components though, the legacy components will work as expected.
* One warning might be logged from the themes for components based on MDC's list. They will compile and look acceptable, but I couldn't find a good way to avoid the error with our current setup. We will be able to avoid the warning once we switch the components to the token theming APIs.

Relates to #25981.

(cherry picked from commit f8dd018)
crapStone pushed a commit to Calciumdibromid/CaBr2 that referenced this pull request Dec 24, 2022
This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@angular/cdk](https://github.com/angular/components) | dependencies | patch | [`15.0.1` -> `15.0.3`](https://renovatebot.com/diffs/npm/@angular%2fcdk/15.0.1/15.0.3) |
| [@angular/material](https://github.com/angular/components) | dependencies | patch | [`15.0.1` -> `15.0.3`](https://renovatebot.com/diffs/npm/@angular%2fmaterial/15.0.1/15.0.3) |

---

### Release Notes

<details>
<summary>angular/components</summary>

### [`v15.0.3`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#&#8203;1503-velvet-village-2022-12-14)

[Compare Source](angular/components@15.0.2...15.0.3)

##### cdk

| Commit | Type | Description |
| -- | -- | -- |
| [325475774f](angular/components@3254757) | fix | **stepper:** set focus origin when navigating with keyboard ([#&#8203;26239](angular/components#26239)) |

##### material

| Commit | Type | Description |
| -- | -- | -- |
| [80c4321ddd](angular/components@80c4321) | fix | **core:** better handling of css variables in theme palettes ([#&#8203;26260](angular/components#26260)) |
| [67db1a6043](angular/components@67db1a6) | fix | **form-field:** allow getting harness by validity ([#&#8203;26232](angular/components#26232)) |
| [df7ac2709a](angular/components@df7ac27) | fix | **form-field:** prevent focus overlay stealing clicks ([#&#8203;26229](angular/components#26229)) |
| [1e93df3ab3](angular/components@1e93df3) | fix | **menu:** add selector for projecting non-Material icons ([#&#8203;26235](angular/components#26235)) |
| [83825bd5c3](angular/components@83825bd) | fix | **schematics:** fix card tmpl migration ([#&#8203;26169](angular/components#26169)) |
| [ae3c77835a](angular/components@ae3c778) | fix | **schematics:** fix transform for FloatLabelType ([#&#8203;26234](angular/components#26234)) |
| [fee5d0b7d3](angular/components@fee5d0b) | fix | **slider:** avoid manual fixing values on pointer up ([#&#8203;26215](angular/components#26215)) |
| [15c77e0950](angular/components@15c77e0) | fix | **tabs:** allow both foreground and background colors to be set ([#&#8203;26212](angular/components#26212)) |
| [0ca8c77349](angular/components@0ca8c77) | fix | **toolbar:** don't override colors of themed buttons ([#&#8203;26222](angular/components#26222)) |

#### Special Thanks

Kristiyan Kostadinov, Miles Malerba, Ruslan Nevecheria and Wagner Maciel

<!-- CHANGELOG SPLIT MARKER -->

### [`v15.0.2`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#&#8203;1502-polystyrene-penguin-2022-12-08)

[Compare Source](angular/components@15.0.1...15.0.2)

##### cdk

| Commit | Type | Description |
| -- | -- | -- |
| [dac9e81f78](angular/components@dac9e81) | fix | **listbox:** set initial focus to selected option ([#&#8203;26174](angular/components#26174)) |

##### material

| Commit | Type | Description |
| -- | -- | -- |
| [c388758606](angular/components@c388758) | fix | **button:** ensure svg icon is centered ([#&#8203;26146](angular/components#26146)) |
| [afd6e1a277](angular/components@afd6e1a) | fix | **chips:** set correct cursor on interactive chips ([#&#8203;26171](angular/components#26171)) |
| [639fa52ff1](angular/components@639fa52) | fix | **dialog:** change width to not cut off form field in component example ([#&#8203;26157](angular/components#26157)) |
| [976562f35e](angular/components@976562f) | fix | **form-field:** allow ng-container to be used as prefix/suffix ([#&#8203;26127](angular/components#26127)) |
| [0a617d6f0f](angular/components@0a617d6) | fix | **list:** remove previously removed API ([#&#8203;26165](angular/components#26165)) |
| [679df1a074](angular/components@679df1a) | fix | **schematics:** some snack bar styles not being migrated ([#&#8203;26180](angular/components#26180)) |
| [1ab52961b0](angular/components@1ab5296) | fix | **schematics:** update flat button styles class name mapping ([#&#8203;26158](angular/components#26158)) |
| [3bb07ae9d9](angular/components@3bb07ae) | fix | **tabs:** icons not centered inside tab ([#&#8203;26053](angular/components#26053)) |
| [356aab723c](angular/components@356aab7) | perf | **core:** delegate trigger events ([#&#8203;26147](angular/components#26147)) |
| [a526ede4af](angular/components@a526ede) | perf | **tabs:** reduce amount of CSS generated for background color ([#&#8203;26186](angular/components#26186)) |

#### Special Thanks

Amy Sorto, Kristiyan Kostadinov, Miles Malerba, Shauni and Wagner Maciel

<!-- CHANGELOG SPLIT MARKER -->

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about these updates again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC43MC4wIiwidXBkYXRlZEluVmVyIjoiMzQuNzAuNCJ9-->

Co-authored-by: cabr2-bot <cabr2.help@gmail.com>
Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1686
Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org>
Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 14, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker P2 The issue is important to a large percentage of users, with a workaround target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants