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

New approach to wide gamut colour #38

Merged
merged 16 commits into from
Jul 27, 2023
Merged

New approach to wide gamut colour #38

merged 16 commits into from
Jul 27, 2023

Conversation

benjaminleonard
Copy link
Collaborator

@benjaminleonard benjaminleonard commented Jul 25, 2023

Previous approaches to P3 colour were slightly janky postcss plugins that would read the hex value, convert to rgb and extra an extra colour value. Unfortunately this does not work with variables because you don't have the value to make that calculation.

I tried another approach here: oxidecomputer/console#1364

Unfortunately that came with its own issues, namely it does not support theming, adds a bunch of extra stuff in the classes and relies on some brittle postcss work.

Here we're generating the p3 var alongside the rgb one. We can then use the @supports css rule to check for display-p3 support and if that's present include the colour.

Last piece to check off is to make sure that colours with an alpha value work okay.

📦 Published PR as canary version: 1.0.0--canary.38.a11788c.0

✨ Test out this PR locally via:

npm install @oxide/[email protected]
# or 
yarn add @oxide/[email protected]

benjaminleonard and others added 6 commits February 2, 2023 16:32
Bumps [json5](https://github.com/json5/json5) from 2.2.1 to 2.2.3.
- [Release notes](https://github.com/json5/json5/releases)
- [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md)
- [Commits](json5/json5@v2.2.1...v2.2.3)

---
updated-dependencies:
- dependency-name: json5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>
Bumps [semver](https://github.com/npm/node-semver) from 5.7.1 to 5.7.2.
- [Release notes](https://github.com/npm/node-semver/releases)
- [Changelog](https://github.com/npm/node-semver/blob/v5.7.2/CHANGELOG.md)
- [Commits](npm/node-semver@v5.7.1...v5.7.2)

---
updated-dependencies:
- dependency-name: semver
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>
Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.4.
- [Release notes](https://github.com/jonschlinkert/word-wrap/releases)
- [Commits](jonschlinkert/word-wrap@1.2.3...1.2.4)

---
updated-dependencies:
- dependency-name: word-wrap
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>
@benjaminleonard benjaminleonard requested a review from zephraph July 25, 2023 12:26
@benjaminleonard benjaminleonard added major Increment the major version when merged minor Increment the minor version when merged and removed major Increment the major version when merged minor Increment the minor version when merged labels Jul 25, 2023
@benjaminleonard benjaminleonard added major Increment the major version when merged and removed minor Increment the minor version when merged labels Jul 27, 2023
@benjaminleonard
Copy link
Collaborator Author

Figured as we launch 1.0.0 of the rack that now is a good time to do the same on the design system.

Included a few other fixes in here, grabbed the latest icons and did a rebuild.

There's probably work that can be done on neatening up the logic in convert-tokens.ts but will leave that for a follow up.

@benjaminleonard benjaminleonard merged commit fea1d6d into master Jul 27, 2023
@benjaminleonard benjaminleonard removed the request for review from zephraph July 27, 2023 08:44
@benjaminleonard benjaminleonard deleted the p3-color-test branch December 2, 2024 17:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
major Increment the major version when merged
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant