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

[Security Solution][Explore][EUI visual refresh] remove color functions in favor of color tokens #202505

Open
angorayc opened this issue Dec 2, 2024 · 4 comments
Open

[Security Solution][Explore][EUI visual refresh] remove color functions in favor of color tokens #202505

angorayc opened this issue Dec 2, 2024 · 4 comments
Assignees
@angorayc
Labels
Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting:Explore Team:Threat Hunting Security Solution Threat Hunting Team
Milestone
8.18

Comments

@angorayc
Copy link
Contributor

angorayc commented Dec 2, 2024

Context

Changes are made to EUI that will be visible to end-users in Kibana:

  • Updated all colors in EUI
  • Reduce the topmost font weights and sizes (think titles and headings)
    These changes are available in a new theme called Borealis.

See parent ticket for how to use the new theme and labels to add to the PR for tracking

Description

All usages of color functions have been removed in favor of color tokens, where possible.

shade()
tint()
shadeOrTint()
tintOrShade()
transparentize()

EUI provides color utility functions. Please discontinue use of these and replace them with an EUI color token. These will be deprecated as they create unpredictable results.
@angorayc angorayc added Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting Security Solution Threat Hunting Team Team:Threat Hunting:Explore labels Dec 2, 2024
@angorayc angorayc added this to the 8.18 milestone Dec 2, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/security-solution (Team: SecuritySolution)

@elasticmachine
Copy link
Contributor

Pinging @elastic/security-threat-hunting-explore (Team:Threat Hunting:Explore)

@elasticmachine
Copy link
Contributor

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

@angorayc angorayc mentioned this issue Dec 17, 2024
Open
@angorayc
Copy link
Contributor Author

angorayc commented Dec 19, 2024 •
edited
Loading

TBD

Assistant

kibana/x-pack/solutions/security/plugins/security_solution/public/assistant/get_comments/stream/message_text.tsx

Line 56 in da25d13

background: ${transparentize(euiThemeVars.euiColorDarkShade, 0.25)};

Rules creation

kibana/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/duration_input/index.tsx

Line 72 in da25d13

background: ${transparentize(

kibana/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_field/schedule_item_field.tsx

Line 65 in 639143a

transparentize(theme.eui.euiColorPrimary, 0.1)} !important; // Override focus states etc.

Entity analytics

kibana/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/common/index.tsx

Line 28 in da25d13

background-color: ${transparentize(theme.eui.euiColorDanger, 0.2)};

Timeline

kibana/x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx

Line 30 in da25d13

background: ${transparentize(euiTheme.colors.ink, 0.5)};

Console Manager

kibana/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/side_panel/side_panel_flex_item.tsx

Line 18 in da25d13

${({ theme: { eui } }) => transparentize(eui.euiShadowColor, 0.04)};

@angorayc angorayc mentioned this issue Dec 19, 2024
Merged
@angorayc angorayc mentioned this issue Dec 30, 2024
Merged
@angorayc angorayc self-assigned this Dec 30, 2024
angorayc added a commit that referenced this issue Dec 30, 2024
@angorayc
[Security Solution][Entity Analytics] EUI refresh: Remove color funct…
f349f61 
…ions (#205262)

## Summary

#202505
#204921

### Running Kibana with the Borealis theme
In order to run Kibana with Borealis, you'll need to do the following:

Set the following in kibana.dev.yml:
uiSettings.experimental.themeSwitcherEnabled: true

Run Kibana with the following environment variable set:
KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn
start

This will expose a toggle under Stack Management > Advanced Settings >
Theme version, which you can use to toggle between Amsterdam and
Borealis.



![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05)
angorayc added a commit that referenced this issue Dec 30, 2024
@angorayc @kibanamachine
[Security Solution][threat hunting explore] EUI refresh: Remove color…
dfeb169 
… functions (#204921)

## Summary

#202505

### Running Kibana with the Borealis theme
In order to run Kibana with Borealis, you'll need to do the following:

Set the following in kibana.dev.yml:
uiSettings.experimental.themeSwitcherEnabled: true

Run Kibana with the following environment variable set:
KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn
start

This will expose a toggle under Stack Management > Advanced Settings >
Theme version, which you can use to toggle between Amsterdam and
Borealis.



![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
stratoula pushed a commit to stratoula/kibana that referenced this issue Jan 2, 2025
@angorayc @stratoula
[Security Solution][Entity Analytics] EUI refresh: Remove color funct…
0eb5c1d 
…ions (elastic#205262)

## Summary

elastic#202505
elastic#204921

### Running Kibana with the Borealis theme
In order to run Kibana with Borealis, you'll need to do the following:

Set the following in kibana.dev.yml:
uiSettings.experimental.themeSwitcherEnabled: true

Run Kibana with the following environment variable set:
KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn
start

This will expose a toggle under Stack Management > Advanced Settings >
Theme version, which you can use to toggle between Amsterdam and
Borealis.



![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05)
stratoula pushed a commit to stratoula/kibana that referenced this issue Jan 2, 2025
@angorayc @kibanamachine @stratoula
[Security Solution][threat hunting explore] EUI refresh: Remove color…
3acbb79 
… functions (elastic#204921)

## Summary

elastic#202505

### Running Kibana with the Borealis theme
In order to run Kibana with Borealis, you'll need to do the following:

Set the following in kibana.dev.yml:
uiSettings.experimental.themeSwitcherEnabled: true

Run Kibana with the following environment variable set:
KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn
start

This will expose a toggle under Stack Management > Advanced Settings >
Theme version, which you can use to toggle between Amsterdam and
Borealis.



![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
benakansara pushed a commit to benakansara/kibana that referenced this issue Jan 2, 2025
@angorayc @benakansara
[Security Solution][Entity Analytics] EUI refresh: Remove color funct…
360fcb5 
…ions (elastic#205262)

## Summary

elastic#202505
elastic#204921

### Running Kibana with the Borealis theme
In order to run Kibana with Borealis, you'll need to do the following:

Set the following in kibana.dev.yml:
uiSettings.experimental.themeSwitcherEnabled: true

Run Kibana with the following environment variable set:
KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn
start

This will expose a toggle under Stack Management > Advanced Settings >
Theme version, which you can use to toggle between Amsterdam and
Borealis.



![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05)
benakansara pushed a commit to benakansara/kibana that referenced this issue Jan 2, 2025
@angorayc @kibanamachine @benakansara
[Security Solution][threat hunting explore] EUI refresh: Remove color…
19a8ace 
… functions (elastic#204921)

## Summary

elastic#202505

### Running Kibana with the Borealis theme
In order to run Kibana with Borealis, you'll need to do the following:

Set the following in kibana.dev.yml:
uiSettings.experimental.themeSwitcherEnabled: true

Run Kibana with the following environment variable set:
KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn
start

This will expose a toggle under Stack Management > Advanced Settings >
Theme version, which you can use to toggle between Amsterdam and
Borealis.



![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
cqliu1 pushed a commit to cqliu1/kibana that referenced this issue Jan 2, 2025
@angorayc @cqliu1
[Security Solution][Entity Analytics] EUI refresh: Remove color funct…
61aea65 
…ions (elastic#205262)

## Summary

elastic#202505
elastic#204921

### Running Kibana with the Borealis theme
In order to run Kibana with Borealis, you'll need to do the following:

Set the following in kibana.dev.yml:
uiSettings.experimental.themeSwitcherEnabled: true

Run Kibana with the following environment variable set:
KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn
start

This will expose a toggle under Stack Management > Advanced Settings >
Theme version, which you can use to toggle between Amsterdam and
Borealis.



![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05)
cqliu1 pushed a commit to cqliu1/kibana that referenced this issue Jan 2, 2025
@angorayc @kibanamachine @cqliu1
[Security Solution][threat hunting explore] EUI refresh: Remove color…
9bfe2c8 
… functions (elastic#204921)

## Summary

elastic#202505

### Running Kibana with the Borealis theme
In order to run Kibana with Borealis, you'll need to do the following:

Set the following in kibana.dev.yml:
uiSettings.experimental.themeSwitcherEnabled: true

Run Kibana with the following environment variable set:
KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn
start

This will expose a toggle under Stack Management > Advanced Settings >
Theme version, which you can use to toggle between Amsterdam and
Borealis.



![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@angorayc angorayc

Labels
Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting:Explore Team:Threat Hunting Security Solution Threat Hunting Team
Projects
None yet
Milestone
8.18
Development

No branches or pull requests
2 participants
@angorayc @elasticmachine