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

Update CSS token per new design system theming capability #185

Merged
merged 3 commits into from
Oct 30, 2023

Conversation

fajar-apri-alaska
Copy link
Contributor

@fajar-apri-alaska fajar-apri-alaska commented Oct 2, 2023

Alaska Airlines Pull Request

Fixes: #183

Summary:

  • Update the design tokens to reflect the new theming conventions regarding tokens from the AuroDesignTokens and JetstreamDesignTokens repo.

Type of change:

Please delete options that are not relevant.

  • Revision of an existing capability

Checklist:

  • My update follows the CONTRIBUTING guidelines of this project
  • I have performed a self-review of my own update

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!

-- Auro Design System Team

@fajar-apri-alaska fajar-apri-alaska self-assigned this Oct 2, 2023
This was linked to issues Oct 2, 2023
src/style.scss Outdated
@@ -82,6 +83,7 @@

&--ondark {
&:hover {
// This somehow doesn't refer to anywhere
color: var(--auro-hyperlink-ondark-hover-color);
Copy link
Member

Choose a reason for hiding this comment

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

This new --ds- token doesn't exist.

We should figure out what the old token resolved to for the value and then find a token in the new DS tokens with the same value.

Copy link
Contributor Author

@fajar-apri-alaska fajar-apri-alaska Oct 5, 2023

Choose a reason for hiding this comment

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

Agree, and I'd love to do that. Problem is I couldn't find the old reference for --auro-hyperlink-ondark-hover-color.
Not sure if this token name refers to this figma, or there is custom token that specifically created for hyperlink only.

image

If it is, then maybe the real token name is --auro-color-text-primary-on-light or --ds-color-text-primary-default based on the blueprint.

Please advise, thank you.

Copy link
Member

Choose a reason for hiding this comment

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

@leeejune can you help us figure out what token should be used here?

Copy link
Contributor

Choose a reason for hiding this comment

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

The real token name for --auro-color-text-primary-on-light is --ds-color-text-primary-default. The -on-light has been converted to -default and -on-dark is now -inverse

Copy link
Member

Choose a reason for hiding this comment

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

@fajar-apri-alaska talked with @leeejune directly and it seems we should go ahead and use --auro-color-ui-hover-on-dark here.

@fajar-apri-alaska fajar-apri-alaska force-pushed the fajarapri/updateCSSToken branch 3 times, most recently from a8452e9 to 5a8b365 Compare October 5, 2023 17:54
@fajar-apri-alaska fajar-apri-alaska marked this pull request as ready for review October 5, 2023 17:56
@fajar-apri-alaska fajar-apri-alaska requested a review from a team as a code owner October 5, 2023 17:56
@fajar-apri-alaska fajar-apri-alaska force-pushed the fajarapri/updateCSSToken branch 2 times, most recently from 83053b0 to a69c6ae Compare October 6, 2023 07:50
package.json Show resolved Hide resolved
package.json Show resolved Hide resolved
Changes to be committed:
	modified:   demo/index.html
	modified:   package-lock.json
	modified:   package.json
	modified:   src/style.scss
Changes to be committed:
	modified:   src/style.scss
package.json Show resolved Hide resolved
Changes to be committed:
	modified:   package-lock.json
	modified:   package.json
@fajar-apri-alaska
Copy link
Contributor Author

I have pushed a new commit per your feedback @jason-capsule42. Thanks.

@jason-capsule42 jason-capsule42 merged commit 17fdaac into main Oct 30, 2023
2 checks passed
@jason-capsule42 jason-capsule42 deleted the fajarapri/updateCSSToken branch October 30, 2023 20:55
@blackfalcon
Copy link
Member

🎉 This PR is included in version 3.3.7 🎉

The release is available on:

Your semantic-release bot 📦🚀

@blackfalcon blackfalcon added the released Completed work has been released label Oct 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
released Completed work has been released
Projects
None yet
Development

Successfully merging this pull request may close these issues.

auro-hyperlink: Theming support
4 participants