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

refactor(breadcrumb): use new step color tokens #28930

Merged
merged 5 commits into from
Jan 31, 2024
Merged

refactor(breadcrumb): use new step color tokens #28930

merged 5 commits into from
Jan 31, 2024

Conversation

mapsandapps
Copy link
Contributor

@mapsandapps mapsandapps commented Jan 30, 2024

Issue number: Internal


What is the current behavior?

The breadcrumbs use the --ion-color-step tokens or a fallback.

What is the new behavior?

  • The breadcrumb text colors use the --ion-color-step tokens or the --ion-text-color-step tokens or a fallback
  • The breadcrumb background colors use the --ion-color-step tokens or the --ion-background-color-step tokens or a fallback

Does this introduce a breaking change?

  • Yes
  • No

@github-actions github-actions bot added the package: core @ionic/core package label Jan 30, 2024
@mapsandapps mapsandapps marked this pull request as ready for review January 31, 2024 15:54
@mapsandapps mapsandapps requested a review from a team as a code owner January 31, 2024 15:54
@mapsandapps mapsandapps requested review from averyjohnston and removed request for a team January 31, 2024 15:54
core/src/components/breadcrumb/breadcrumb.ios.vars.scss Outdated Show resolved Hide resolved
@@ -4,22 +4,22 @@
// --------------------------------------------------

/// @prop - Color of the breadcrumb
$breadcrumb-ios-color: var(--ion-color-step-850, #2d4665) !default;
$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-850, #2d4665)) !default;
Copy link
Contributor

Choose a reason for hiding this comment

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

My understanding from looking at the design doc was that for text colors, the step count needs to be flipped (e.g. 850 -> 150). I think there aren't any diffs because these all have fallback colors? I'm not 100% confident I know how it all works, to be honest 😆

Copy link
Contributor

@liamdebeasi liamdebeasi Jan 31, 2024

Choose a reason for hiding this comment

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

Your understanding is correct. The legacy stepped colors go from white (the background) to black (the text color). However, when using the new text step colors those always go from black (the text color) to white (the background) when in light mode. That's why we need to invert the numbers for the text color tokens only.

@mapsandapps mapsandapps marked this pull request as draft January 31, 2024 16:09
@mapsandapps mapsandapps marked this pull request as ready for review January 31, 2024 16:29
@mapsandapps mapsandapps marked this pull request as draft January 31, 2024 19:00
@mapsandapps mapsandapps marked this pull request as ready for review January 31, 2024 20:24
@mapsandapps mapsandapps marked this pull request as draft January 31, 2024 20:36
@mapsandapps mapsandapps marked this pull request as ready for review January 31, 2024 20:55
@mapsandapps
Copy link
Contributor Author

Ok, I think this is finally good to go. We decided that

  • None of the --ion-color-step values should change
  • Text step colors should be equal to 1000 minus the --ion-color-step value
  • Even though most non-text things should use the background colors, icons that are inline with text like this should use the text colors

Copy link
Contributor

@liamdebeasi liamdebeasi left a comment

Choose a reason for hiding this comment

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

Thank you!

@mapsandapps mapsandapps merged commit 35e8bf4 into FW-5747 Jan 31, 2024
44 checks passed
@mapsandapps mapsandapps deleted the FW-5836 branch January 31, 2024 21:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants