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

feat(theming): add system opacity values to the theme #1797

Merged
merged 3 commits into from Apr 25, 2024

Conversation

jzempel
Copy link
Member

@jzempel jzempel commented Apr 24, 2024

Description

This PR introduces a consistent set of themed opacity values and updates getColor to receive either one of the theme's 100-1200 keys or a value between 0 and 1. Garden will strive to use theme.opacity keys for all v9 opacity/transparency applications.

Detail

I weighed adding opacity under the colors theme structure, but stuck with root placement since CSS opacity applies to more than just color.

Checklist

  • πŸ‘Œ design updates will be Garden Designer approved (add the designer as a reviewer)
  • 🌐 demo is up-to-date (npm start)
  • ⬅️ renders as expected with reversed (RTL) direction
  • 🀘 renders as expected with Bedrock CSS (?bedrock)
  • πŸ’‚β€β™‚οΈ includes new unit tests. Maintain existing coverage (always >= 96%)
  • β™Ώ tested for WCAG 2.1 AA accessibility compliance
  • πŸ“ tested in Chrome, Firefox, Safari, and Edge

@coveralls
Copy link

coveralls commented Apr 24, 2024

Coverage Status

coverage: 96.216% (-0.004%) from 96.22%
when pulling 700f17b on jzempel/theming-opacity
into 55eefa6 on next.

Copy link
Contributor

@geotrev geotrev left a comment

Choose a reason for hiding this comment

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

I was thinking about fallback values when theme.opacity may contain invalid entries, but it may be too heavy handed to force consumers down an unexpected path vs letting getColor provide users with an error.

@@ -25,6 +25,7 @@
- [ ] :ok_hand: design updates will be Garden Designer approved (add the designer as a reviewer)
- [ ] :globe_with_meridians: demo is up-to-date (`npm start`)
- [ ] :arrow_left: renders as expected with reversed (RTL) direction
- [ ] :black_circle: renders as expected in dark mode
Copy link
Contributor

Choose a reason for hiding this comment

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

πŸŽ‰

@jzempel
Copy link
Member Author

jzempel commented Apr 25, 2024

I was thinking about fallback values when theme.opacity may contain invalid entries, but it may be too heavy handed to force consumers down an unexpected path vs letting getColor provide users with an error.

Ah, that reminds me, I wanted to handle invalid opacity references before the rgba function throws a PolishedError. Added now. Later, if we find the need to accept intermediate key values, we'll add an adjust like we currently do with shade. But the current design intent is to stick with these canonical values.

@jzempel jzempel merged commit 876f25e into next Apr 25, 2024
5 checks passed
@jzempel jzempel deleted the jzempel/theming-opacity branch April 25, 2024 14:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

None yet

4 participants