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

[ObsUX]All "Custom colors" have been replaced with EUI color tokens. #200960

Closed
Tracked by #200580
MiriamAparicio opened this issue Nov 20, 2024 · 7 comments
Closed
Tracked by #200580
Assignees
Labels
EUI Visual Refresh Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team v9.0.0

Comments

@MiriamAparicio
Copy link
Contributor

MiriamAparicio commented Nov 20, 2024

Here is an example of usage of custom colors:

https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability_solution/apm/public/utils/http_status_code_to_color.ts

What to do

  • Replace the hardcoded colors
  • use eui theme and use the needed tokens
@MiriamAparicio MiriamAparicio changed the title All "Custom colors" have been replaced with EUI color tokens. [ObsUX]All "Custom colors" have been replaced with EUI color tokens. Nov 20, 2024
@botelastic botelastic bot added the needs-team Issues missing a team label label Nov 20, 2024
@MiriamAparicio MiriamAparicio added the Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team label Nov 20, 2024
@botelastic botelastic bot removed the needs-team Issues missing a team label label Nov 20, 2024
@MiriamAparicio MiriamAparicio added v9.0.0 EUI Visual Refresh and removed Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team labels Nov 20, 2024
@botelastic botelastic bot added the needs-team Issues missing a team label label Nov 20, 2024
@MiriamAparicio MiriamAparicio added Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team and removed needs-team Issues missing a team label labels Nov 21, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

@bryce-b bryce-b self-assigned this Dec 2, 2024
@bryce-b
Copy link
Contributor

bryce-b commented Dec 6, 2024

HTTP badge colors

Before

Image
Image
Image
Image

After

Image
Image
Image
Image

Note : 1XX will look the same as 3XX

@bryce-b
Copy link
Contributor

bryce-b commented Dec 6, 2024

Mobile Geo Map

Before

Image

After

Image

@bryce-b
Copy link
Contributor

bryce-b commented Dec 6, 2024

#203348

@bryce-b
Copy link
Contributor

bryce-b commented Dec 7, 2024

Service Group create

Before

Image

After

Image

bryce-b added a commit that referenced this issue Dec 12, 2024
## Summary

This PR replaces a couple of places where hardcoded colors are used in
the APM portion of Kibana with EUITheme colors.
Before & After screenshots can be seen in the associated issue, #200960.
However, I was unable to find an example for the
[.../alert_details_app_section/failed_transaction_chart.tsx](https://github.com/elastic/kibana/pull/203348/files#diff-9d9e4bbfe128f4d2f6ff7f027cf746d679a6c06805ef77240cceb2770a837a28).
It seems like this chart in the alert creation flyout will never render
with annotations.

### Checklist

Check the PR satisfies following conditions. 
Reviewers should verify this PR satisfies this list as well.

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: Miriam <[email protected]>
@bryce-b
Copy link
Contributor

bryce-b commented Dec 13, 2024

#204133 Infra portion to be merged shortly.

@crespocarlos crespocarlos self-assigned this Dec 17, 2024
@MiriamAparicio
Copy link
Contributor Author

Closing this issue, will open a new one for the remaining work in Profiling

CAWilson94 pushed a commit to CAWilson94/kibana that referenced this issue Jan 13, 2025
## Summary

This PR replaces a couple of places where hardcoded colors are used in
the APM portion of Kibana with EUITheme colors.
Before & After screenshots can be seen in the associated issue, elastic#200960.
However, I was unable to find an example for the
[.../alert_details_app_section/failed_transaction_chart.tsx](https://github.com/elastic/kibana/pull/203348/files#diff-9d9e4bbfe128f4d2f6ff7f027cf746d679a6c06805ef77240cceb2770a837a28).
It seems like this chart in the alert creation flyout will never render
with annotations.

### Checklist

Check the PR satisfies following conditions. 
Reviewers should verify this PR satisfies this list as well.

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: Miriam <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
EUI Visual Refresh Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team v9.0.0
Projects
None yet
Development

No branches or pull requests

4 participants