-
Notifications
You must be signed in to change notification settings - Fork 1.8k
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(themes): enable dynamic values for interactive color tokens #5269
feat(themes): enable dynamic values for interactive color tokens #5269
Conversation
Deploy preview for carbon-elements ready! Built with commit 233a67e |
Deploy preview for carbon-components-react ready! Built with commit 233a67e https://deploy-preview-5269--carbon-components-react.netlify.com |
Happy birthday @sadekbazaraa |
I can use the function for the rest of the interactive tokens if we like this approach. |
…remove-static-interactive-colors
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thanks for adding the tests!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it looks like these tests are failing locally
FAIL packages/themes/__tests__/themes-test.js (7.658s)
● themes.scss › tokens › hoverDanger should match the default theme
expect(received).toEqual(expected) // deep equality
Expected: "#b81921"
Received: "#ba1b23"
55 | // param-case to camelCase and that values are correctly mapped over for
56 | // strings and numbers
> 57 | expect(formatObjectKeys(convert(calls[1][0]))).toEqual(
| ^
58 | defaultTheme[token]
59 | );
60 | }
at _callee$ (packages/themes/__tests__/themes-test.js:57:56)
at tryCatch (node_modules/regenerator-runtime/runtime.js:45:40)
at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:271:22)
at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:97:21)
at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
● themes.scss › carbon--theme › should export tokens that match the default theme
expect(received).toEqual(expected) // deep equality
Expected: "#ba1b23"
Received: "#b81921"
71 |
72 | Object.keys(defaultTheme).forEach(token => {
> 73 | expect(defaultTheme[token]).toEqual(
| ^
74 | formatObjectKeys(theme[formatTokenName(token)])
75 | );
76 | });
at forEach (packages/themes/__tests__/themes-test.js:73:37)
at Array.forEach (<anonymous>)
at _callee2$ (packages/themes/__tests__/themes-test.js:72:33)
at tryCatch (node_modules/regenerator-runtime/runtime.js:45:40)
at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:271:22)
at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:97:21)
at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
@emyarod you have to run build inside the theme package and generate new scss. |
thanks, I guess my yarn install, build, and test commands were out of order |
Closes #4049
Today, interactive UI colors (e.g.
hover-danger
) are hard-coded in to the themes. This means when the color pallet was updated, all of the interactive tokens became outdated. They're still currently the static values generated from thev1
color pallet.Changelog
New
color
pacakges to the@carbon/themes
.color
is a popular tool for immutable CSS color conversion and manipulation. Using this tool to process interactive tokens according to [Tokens] Implement lighten/darken method for color change across states. Deprecate Hover tokens. #4049 (comment) will prevent tokens from becoming outdated.adjustLightness
: helper function for adjusting a given token's lightness by a specified number of percentage pointsChanged
adjustLightness
forhover-danger
tokens as proof of concept.Testing
Compare generated hex values to the hex values in the
v2
sketch kit. You can select the square and view the hex code in sketch's color selector.