Skip to content

Conversation

crisbeto
Copy link
Member

Usually the theme divider color is rgba, which means that it can look differently, depending on the color behind it. As a result, the border of a selected button toggle is different from a deselected one, because its background color is darker. These changes switch to using a solid color to ensure that we have always have a consistent border.

These changes also add a new theming utility function that converts an rgba color to hex, if the consumer knows the background. We've been using it in a couple of places already, but now it's being moved out into a reusable function.

For reference:
angular_material_-_google_chrome_2018-11-23_21-34-01
angular_material_-_google_chrome_2018-11-23_21-39-43

@crisbeto crisbeto added the target: patch This PR is targeted for the next patch release label Nov 23, 2018
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Nov 23, 2018
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

I was just asking for naming purposes

@jelbourn jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Dec 19, 2018
@crisbeto crisbeto force-pushed the button-toggle-solid-border branch 2 times, most recently from cb8dca9 to 6b623b8 Compare February 17, 2019 20:21
@mmalerba mmalerba added aaa and removed aaa labels Apr 25, 2019
@crisbeto crisbeto force-pushed the button-toggle-solid-border branch from 6b623b8 to cd14147 Compare October 5, 2019 11:41
@crisbeto crisbeto added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Oct 5, 2019
@mmalerba mmalerba removed the lgtm label Jul 31, 2020
@crisbeto crisbeto force-pushed the button-toggle-solid-border branch from cd14147 to 9c45770 Compare August 23, 2020 10:40
@andrewseguin andrewseguin added needs rebase and removed cla: yes PR author has agreed to Google's Contributor License Agreement labels Dec 29, 2021
@crisbeto crisbeto changed the title fix(button-toggle): use solid border color fix(material/button-toggle): use solid border color Mar 1, 2022
Usually the theme divider color is rgba, which means that it can look differently, depending on the color behind it. As a result, the border of a selected button toggle is different from a deselected one, because its background color is darker. These changes switch to using a solid color to ensure that we have always have a consistent border.

These changes also add a new theming utility function that converts an rgba color to hex, if the consumer knows the background. We've been using it in a couple of places already, but now it's being moved out into a reusable function.
@crisbeto crisbeto force-pushed the button-toggle-solid-border branch from 9c45770 to 91aa950 Compare March 1, 2022 08:02
@crisbeto crisbeto merged commit 175937e into angular:master Mar 1, 2022
crisbeto added a commit that referenced this pull request Mar 1, 2022
Usually the theme divider color is rgba, which means that it can look differently, depending on the color behind it. As a result, the border of a selected button toggle is different from a deselected one, because its background color is darker. These changes switch to using a solid color to ensure that we have always have a consistent border.

These changes also add a new theming utility function that converts an rgba color to hex, if the consumer knows the background. We've been using it in a couple of places already, but now it's being moved out into a reusable function.

(cherry picked from commit 175937e)
@peintnermax
Copy link

peintnermax commented Mar 8, 2022

When using a custom palette and having set a css variable for changing colors at runtime, the new utility function returns an error. Would a seperate variable in the theme-background-palette maps make sense such that the color could be customized and be a little more definitive?

crapStone pushed a commit to Calciumdibromid/CaBr2 that referenced this pull request Mar 8, 2022
This PR contains the following updates:

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

---

### Release Notes

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

### [`v13.2.5`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#&#8203;1325-satin-sash-2022-03-02)

[Compare Source](angular/components@13.2.4...13.2.5)

##### cdk

| Commit | Type | Description |
| -- | -- | -- |
| [9e34a0f69f](angular/components@9e34a0f) | fix | **drag-drop:** error if preview dimensions are accessed too early ([#&#8203;24498](angular/components#24498)) |
| [9be3c46b01](angular/components@9be3c46) | fix | **testing:** TestElement sendKeys method should throw if no keys have been specified ([#&#8203;18271](angular/components#18271)) |
| [8e57a89cba](angular/components@8e57a89) | perf | **overlay:** add event listeners for overlay dispatchers outside of zone ([#&#8203;24408](angular/components#24408)) |

##### material

| Commit | Type | Description |
| -- | -- | -- |
| [ed2f516401](angular/components@ed2f516) | fix | **autocomplete:** auto-highlighted first option not display correctly if the floating label is disabled ([#&#8203;14507](angular/components#14507)) |
| [502102116e](angular/components@5021021) | fix | **autocomplete:** don't block default arrow keys when using modifiers ([#&#8203;11987](angular/components#11987)) |
| [f31fd3f066](angular/components@f31fd3f) | fix | **autocomplete:** reopen panel on input click ([#&#8203;16020](angular/components#16020)) |
| [5a79042d7d](angular/components@5a79042) | fix | **button-toggle:** use solid border color ([#&#8203;14253](angular/components#14253)) |
| [e2d4eecfcb](angular/components@e2d4eec) | fix | **checkbox:** inconsistent disabled color ([#&#8203;23083](angular/components#23083)) |
| [005ec323de](angular/components@005ec32) | fix | **checkbox:** incorrect text color when placed inside an overlay with a dark theme ([#&#8203;19054](angular/components#19054)) |
| [d7cbd1315f](angular/components@d7cbd13) | fix | **datepicker:** matDatepickerParse error not being added on first invalid value ([#&#8203;11524](angular/components#11524)) |
| [046022f31d](angular/components@046022f) | fix | **datepicker:** use aria-live over cdkAriaLive on period button ([#&#8203;24398](angular/components#24398)) |
| [37f69dbf7e](angular/components@37f69db) | fix | **dialog:** use passed in ComponentFactoryResolver to resolve dialog content ([#&#8203;17710](angular/components#17710)) |
| [2e15f54a9f](angular/components@2e15f54) | fix | **menu:** focus lost if active item is removed ([#&#8203;14039](angular/components#14039)) |
| [ea07fa8e64](angular/components@ea07fa8) | fix | **progress-spinner:** unable to change mode on spinner directive ([#&#8203;14514](angular/components#14514)) |
| [1a498a6a81](angular/components@1a498a6) | fix | **sort:** remove role from header when disabled ([#&#8203;24477](angular/components#24477)) |
| [72019531db](angular/components@7201953) | fix | **tooltip:** don't hide when pointer moves to tooltip ([#&#8203;24475](angular/components#24475)) |

##### material-experimental

| Commit | Type | Description |
| -- | -- | -- |
| [7b85cc077c](angular/components@7b85cc0) | fix | **mdc-button:** density styles being overwritten by structural styles ([#&#8203;22736](angular/components#22736)) |
| [aeb1426e4c](angular/components@aeb1426) | fix | **mdc-chips:** expose avatar harness ([#&#8203;24499](angular/components#24499)) |

#### Special Thanks

Andrew Seguin, Artur Androsovych, Jeri Peier, Kristiyan Kostadinov, Paul Gschwendtner, Yousaf Nawaz and Zach Arend

<!-- CHANGELOG SPLIT MARKER -->

</details>

---

### Configuration

📅 **Schedule**: 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, click this checkbox.

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).

Co-authored-by: cabr2-bot <[email protected]>
Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1199
Reviewed-by: Epsilon_02 <[email protected]>
Co-authored-by: Calciumdibromid Bot <[email protected]>
Co-committed-by: Calciumdibromid Bot <[email protected]>
forsti0506 pushed a commit to forsti0506/components that referenced this pull request Apr 3, 2022
Usually the theme divider color is rgba, which means that it can look differently, depending on the color behind it. As a result, the border of a selected button toggle is different from a deselected one, because its background color is darker. These changes switch to using a solid color to ensure that we have always have a consistent border.

These changes also add a new theming utility function that converts an rgba color to hex, if the consumer knows the background. We've been using it in a couple of places already, but now it's being moved out into a reusable function.
@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 Apr 8, 2022
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 P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants