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.

Sign up for GitHub

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

Jump to bottom

[Fleet][EUI Visual refresh] Rename color variables to use updated names #201989

Closed
3 tasks
Tracked by #202008
criamico opened this issue Nov 27, 2024 · 1 comment · Fixed by #204537
Closed
3 tasks
Tracked by #202008

[Fleet][EUI Visual refresh] Rename color variables to use updated names #201989

criamico opened this issue Nov 27, 2024 · 1 comment · Fixed by #204537
Assignees
@jillguyonnet
Labels
EUI Visual Refresh Team:Fleet Team label for Observability Data Collection Fleet team

Comments

@criamico
Copy link
Contributor

criamico commented Nov 27, 2024 •
edited
Loading

Context

The EUI team is introducing a new theme called "Borealis". As part of this change we need to update some colors in Fleet.
See parent issue: #199715 - it also contains the instructions to run the new theme (see section Instructions for updating and QA)

Checklist

  • Check if Fleet is using any of the following color variables and rename them with the updated ones. Details
# previous color token -> new color token
primaryText -> textPrimary
accentText -> textAccent
between this and textSuccess.
warningText -> textWarning
dangerText -> textDanger
text -> textParagraph
title -> textHeading
subduedText -> textSubdued
disabledText -> textDisabled

➡️ Some of the Fleet occurrences to update:

Definitions of done

  • When testing the changes, test them both with the "old" Amsterdam theme and with the new Borealis theme.
  • Please label the PR with EUI Visual Refresh for cross-team visibility
@criamico criamico added the Team:Fleet Team label for Observability Data Collection Fleet team label Nov 27, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/fleet (Team:Fleet)

@criamico criamico mentioned this issue Nov 27, 2024
Open
9 tasks
@jillguyonnet jillguyonnet mentioned this issue Dec 17, 2024
Merged
JoseLuisGJ pushed a commit to JoseLuisGJ/kibana that referenced this issue Dec 19, 2024
@jillguyonnet @JoseLuisGJ
[Fleet][Eui Visual Refresh] Update text color tokens (elastic#204537)
d059b5b 
## Summary

Closes elastic#201989

This PR updates color variables to the up-to-date naming per
elastic#199715 (comment).

Impacted elements:
1. Read-only icon buttons in Fleet and Integrations top bar.
2. Danger-styled context menu item for deleting package policy from
agent policy.

I have also reviews [all
occurrences](https://github.com/search?q=repo%3Aelastic%2Fkibana+path%3Ax-pack%2Fplugins%2Ffleet%2Fpublic+color%3D%22text&type=code)
of `color="text` throughout fleet and found these to be part of the
following components:
- `EuiButton`
- `EuiButtonEmpty`
- `EuiButtonIcon`
- `EuiIcon`

The use of `color="text"` seems to be valid for these cases.

## Screenshots

### Amsterdam

Read-only Fleet top bar:

<img width="1918" alt="fleet-readonly-amsterdam"
src="https://github.com/user-attachments/assets/c6c58a75-b79b-45a9-abef-f25014a7c8c6"
/>

Read-only Integrations top bar:

<img width="1918" alt="integrations-readonly-amsterdam"
src="https://github.com/user-attachments/assets/fa2a5b10-4aca-46ee-bb59-c0f62091c322"
/>

Delete integration context menu item:

<img width="1918" alt="delete-integration-amsterdam"
src="https://github.com/user-attachments/assets/c2375413-373b-4cdf-b907-0d5f577e1fbe"
/>

### Borealis

Read-only Fleet top bar:

<img width="1918" alt="fleet-readonly-borealis"
src="https://github.com/user-attachments/assets/aad169c6-52b0-4707-87a5-1e0babd59a43"
/>

Read-only Integrations top bar:

<img width="1918" alt="integrations-readonly-borealis"
src="https://github.com/user-attachments/assets/08d1cec7-285d-47a3-958b-63b5a22d9b19"
/>

Delete integration context menu item:

<img width="1918" alt="delete-integration-borealis"
src="https://github.com/user-attachments/assets/9cf20708-2a3f-4252-98ac-1ebca12bd8e6"
/>
benakansara pushed a commit to benakansara/kibana that referenced this issue Jan 2, 2025
@jillguyonnet @benakansara
[Fleet][Eui Visual Refresh] Update text color tokens (elastic#204537)
437e7d7 
## Summary

Closes elastic#201989

This PR updates color variables to the up-to-date naming per
elastic#199715 (comment).

Impacted elements:
1. Read-only icon buttons in Fleet and Integrations top bar.
2. Danger-styled context menu item for deleting package policy from
agent policy.

I have also reviews [all
occurrences](https://github.com/search?q=repo%3Aelastic%2Fkibana+path%3Ax-pack%2Fplugins%2Ffleet%2Fpublic+color%3D%22text&type=code)
of `color="text` throughout fleet and found these to be part of the
following components:
- `EuiButton`
- `EuiButtonEmpty`
- `EuiButtonIcon`
- `EuiIcon`

The use of `color="text"` seems to be valid for these cases.

## Screenshots

### Amsterdam

Read-only Fleet top bar:

<img width="1918" alt="fleet-readonly-amsterdam"
src="https://github.com/user-attachments/assets/c6c58a75-b79b-45a9-abef-f25014a7c8c6"
/>

Read-only Integrations top bar:

<img width="1918" alt="integrations-readonly-amsterdam"
src="https://github.com/user-attachments/assets/fa2a5b10-4aca-46ee-bb59-c0f62091c322"
/>

Delete integration context menu item:

<img width="1918" alt="delete-integration-amsterdam"
src="https://github.com/user-attachments/assets/c2375413-373b-4cdf-b907-0d5f577e1fbe"
/>

### Borealis

Read-only Fleet top bar:

<img width="1918" alt="fleet-readonly-borealis"
src="https://github.com/user-attachments/assets/aad169c6-52b0-4707-87a5-1e0babd59a43"
/>

Read-only Integrations top bar:

<img width="1918" alt="integrations-readonly-borealis"
src="https://github.com/user-attachments/assets/08d1cec7-285d-47a3-958b-63b5a22d9b19"
/>

Delete integration context menu item:

<img width="1918" alt="delete-integration-borealis"
src="https://github.com/user-attachments/assets/9cf20708-2a3f-4252-98ac-1ebca12bd8e6"
/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jillguyonnet jillguyonnet

Labels
EUI Visual Refresh Team:Fleet Team label for Observability Data Collection Fleet team
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Fleet][Eui Visual Refresh] Update text color tokens jillguyonnet/kibana
4 participants
@andreadelrio @elasticmachine @criamico @jillguyonnet