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

[8.x] [Security Solution][THI] - remove usages of EUI tint, shade and transparentize functions (#205223) #210652

Merged
merged 1 commit into from
Feb 11, 2025

Conversation

PhilippeOberti
Copy link
Contributor

Backport

This will backport the following commits from main to 8.x:

Questions ?

Please refer to the Backport tool documentation

…parentize functions (elastic#205223)

## Summary

This PR is part of a list of PRs to perform the changes necessary to get
the new Borealis theme working correctly. It focuses on removing the
`shade()`, `tint()`, `shadeOrTint()`, `tintOrShade()` and
`transparentize()` functions.

2 places have been impacted:

- the expandable flyout preview shadow

#### Light
| before  | after |
| ------------- | ------------- |
|
![flyout-preview-main-light](https://github.com/user-attachments/assets/f305263c-8163-4752-8699-40aad36bbb51)
|
![flyout-preview-new-light](https://github.com/user-attachments/assets/1fd9c640-91c5-4ca6-9b2a-137d3d72f943)
|

#### Dark
| before  | after |
| ------------- | ------------- |
|
![flyout-preview-main-dark](https://github.com/user-attachments/assets/54d60c07-812b-48da-9d43-3e0b2f50184d)
|
![flyout-preview-new-dark](https://github.com/user-attachments/assets/2e4307ba-8616-40c3-b07e-0284a228806b)
|

- the unified data table
- for row hover background color (I tried a few options here, this
change is the one that looked the best to me, despite being identical
color to the odd row background... I'm opened to suggestions here!)

#### Light
| before  | after |
| ------------- | ------------- |
|
![table-hover-main-light](https://github.com/user-attachments/assets/7d4e3629-ed06-4688-a2b1-e10065c863c0)
|
![table-hover-new-light](https://github.com/user-attachments/assets/74fc0b16-2167-4605-a940-cf4750bd1401)
|

#### Dark
| before  | after |
| ------------- | ------------- |
|
![table-hover-main-dark](https://github.com/user-attachments/assets/5c1d0981-0cee-4dae-a67a-c129ec200940)
|
![table-hover-new-dark](https://github.com/user-attachments/assets/2d92df66-0185-4661-aae8-a209e89df60f)
|

  - for row comparison

#### Light
| before  | after |
| ------------- | ------------- |
|
![table-compare-main-light](https://github.com/user-attachments/assets/965e7a60-5105-48ed-891a-95f5c386cd18)
|
![table-compare-new-light](https://github.com/user-attachments/assets/ce1f600b-9f1a-4832-b775-5d53b016539a)
|

#### Dark
| before  | after |
| ------------- | ------------- |
|
![table-compare-main-dark](https://github.com/user-attachments/assets/04b3edac-f0a3-4d56-91e8-3d0dea8b1218)
|
![table-compare-new-dark](https://github.com/user-attachments/assets/6607b4cf-d19e-45e5-af78-bace6475b9fa)
|

_Notes: one usage of the `transparentize` function was left untouched
[here](https://github.com/elastic/kibana/blob/main/x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx#L30).
This is a custom OverlayMask and this code replicates what's being done
in the EUI codebase. I checked and EUI is still using the
`transparentize` method with that color, so I figured I would keep this
untouched for now..._

elastic#201888

---------

Co-authored-by: Davis McPhee <davis.mcphee@elastic.co>
(cherry picked from commit 3057eac)

# Conflicts:
#	x-pack/solutions/security/packages/expandable-flyout/src/components/preview_section.tsx
@PhilippeOberti PhilippeOberti merged commit cf113bc into elastic:8.x Feb 11, 2025
11 checks passed
@PhilippeOberti PhilippeOberti deleted the backport/8.x/pr-205223 branch February 11, 2025 19:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants