-
Notifications
You must be signed in to change notification settings - Fork 4
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
Lib: Add colors to be aligned with the design #106
base: main
Are you sure you want to change the base?
Lib: Add colors to be aligned with the design #106
Conversation
✅ Deploy Preview for ods-charts ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Ok to merge this PR and create a technicall one to rename CategoricalColors and SequentialColors to Colors. ( ODSChartsColorsSet, ODSChartsColor, ODSChartsCustomColor, ...) |
Before merging it, we need to define/precise the exact rules with the designers. |
Tried my best to provide 2 new sets of colors based on the design work.
Things to tackle maybe after this PR:
Draft notes/* Light mode
hue: color, grayed | color/white, gray/white |
Blue:
600: #085edb, #4f4f4f | 5.77, 8.19 |
500: #237eca, #6b6b6b | 4.27, 5.32 |
400: #3e9dd6, #878787 | 3.00, 3.59 |
Purple:
600: #492191, #3a3a3a | 10.99, 11.37 |
500: #6e4aa7, #5f5f5f | 6.56, 6.38 |
400: #9373bd, #858585 | 3.86, 3.69 |
Pink:
600: #bc4d9a, #777777 | 4.50, 4.47 |
500: #d573bb, #999999 | 3.00, 2.84 |
Green:
600: #0a6e31, #494949 | 6.38, 9.00 |
500: #198c51, #636363 | 4.21, 6.00 |
400: #27a971, #7c7c7c | 3.00, 4.17 |
Yellow:
600: #9d6e06, #707070 | 4.50, 4.95 |
500: #b98f11, #8d8d8d | 3.00, 3.31 |
*/
/* Dark mode
hue: color, grayed | color/black-dark, gray/black-dark | 3.5+ 5 < x < 13
Blue:
400: #3e9dd6, #878787 | 6.99, 5.84 |
300: #4bb4e6, #9a9a9a | 8.97, 7.46 |
200: #80ceef, #bababa | 11.99, 10.82 |
Purple:
400: #9373bd, #858585 | 5.42, 5.69 |
300: #a885d8, #999999 | 7.01, 7.37 |
200: #c1a4e4, #b4b4b4 | 9.69, 10.12 |
Pink:
500: #d573bb, #999999 | 6.99, 7.37 |
400: #ff8ad4, #b5b5b5 | 9.83, 10.24 |
300: #ffb4e6, #d0d0d0 | 12.92, 13.61 |
Green:
400: #27a971, #7c7c7c | 6.14, 4.41 |
300: #50be87, #979797 | 7.94, 6.30 |
200: #84d5af, #b8b8b8 | 10.63, 9.28 |
Yellow:
500: #b98f11, #8d8d8d | 6.14, 5.55 |
400: #ffb400, #b6b6b6 | 10.33, 9.08 |
300: #ffd200, #c8c8c8 | 12.69, 11.01 |
*/ |
…rmonized + contrasted
Note: Please transform
- [ ]
into- (NA)
in the description when things are not applicableRelated issues
Closes #103.
Description
Provide sequential pink, sequential yellow, default categorical colors and emphasized categorical colors.
Motivation & Context
More colors and flexibility for people.
Realign colors with the design with 9bec574.
Proposal to make lighter colors darker on dark mode with cd3f335. Feel free to separate this commit from the PR.
Proposal to handle axis colors differently (even if I can't spot any visual change) with 2dab014. Feel free to separate this commit from the PR.
categoricalColors
, here are some ideas:color
as ApacheEcharts does, imo it can be disturbing for newcomersodsColor
maybe we should prefix all our parametersodsGraphColor
to be more understandableTypes of change
Test checklist
Please check that the following tests projects are still working:
docs/examples
test/angular-ngx-echarts
test/angular-echarts
test/html
test/react
test/vue
test/examples/bar-line-chart
test/examples/single-line-chart
test/examples/timeseries-chart