Skip to content

[Visual Refresh] Fix transparent color variable definitions #8249

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
Merged
tkajtoch merged 2 commits into from
Dec 18, 2024
Merged

[Visual Refresh] Fix transparent color variable definitions #8249

tkajtoch merged 2 commits into from
Dec 18, 2024

Conversation

@mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Dec 18, 2024 •
edited by tkajtoch
Loading

Summary

Important

This PR merges into a feature branch

This PR fixes the values for transparent colors calculated using chroma as added here.

The usage was not correct and still returned a hex code, which does not work as value used in rgba().
I complete missed that 😭

Additionally it reverts a change of the EuiDatagrid border color from plain to subdued.

QA

  • ensure that transparent colors are output properly in Borealis, e.g. here for the following examples:
  • verify EuiDataGrid uses borderBasePlain borders in Borealis

@mgadewoll mgadewoll added skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) visual refresh labels Dec 18, 2024
@mgadewoll mgadewoll changed the base branch from main to eui-theme/borealis December 18, 2024 16:47
@kibanamachine
Copy link

kibanamachine commented Dec 18, 2024

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

elasticmachine commented Dec 18, 2024

💚 Build Succeeded

@mgadewoll mgadewoll marked this pull request as ready for review December 18, 2024 17:56
@mgadewoll mgadewoll requested a review from a team as a code owner December 18, 2024 17:56
tkajtoch
tkajtoch approved these changes Dec 18, 2024
View reviewed changes
Copy link
Member

@tkajtoch tkajtoch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@tkajtoch tkajtoch merged commit e136ce3 into elastic:eui-theme/borealis Dec 18, 2024
4 checks passed
@mgadewoll mgadewoll mentioned this pull request Dec 19, 2024
Merged
mgadewoll added a commit to elastic/kibana that referenced this pull request Dec 19, 2024
@mgadewoll @kibanamachine
Upgrade EUI to v98.2.1 (#204482)
a0ebb1d 
`v98.1.0-borealis.0`⏩`v98.2.1-borealis.2`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

# `@elastic/eui`

## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1)

- Updated the EUI theme color values to use a full 6 char hex code
format ([#8244](elastic/eui#8244))

## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0)

- Added two new icons: `contrast` and `contrastHigh`
([#8216](elastic/eui#8216))
- Updated `EuiDataGrid` content to have a transparent background.
([#8220](elastic/eui#8220))

**Accessibility**

- When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used
inside components that handle the Escape key (like `EuiFlyout` or
`EuiModal`), pressing the Escape key will now only close the tooltip and
not the entire wrapping component.
([#8140](elastic/eui#8140))
- Improved the accessibility of `EuiCodeBlock`s by
([#8195](elastic/eui#8195))
  - adding screen reader only labels
  - adding `role="dialog"` on in fullscreen mode
  - ensuring focus is returned on closing fullscreen mode
  
# Borealis updates
  
- [Visual Refresh] Update color token mappings
([#8211](elastic/eui#8211))
- [Visual Refresh] Introduce shared popover arrow styles to Borealis
([#8212](elastic/eui#8212))
- [Visual Refresh] Add forms.maxWidth token
([#8221](elastic/eui#8221))
- [Visual Refresh] Set darker shade for subdued text
([#8224](elastic/eui#8224))
- [Visual Refresh] Remove support for accentSecondary badges
([#8224](elastic/eui#8227))
- [Visual Refresh] Add severity vis colors
([#8247](elastic/eui#8247))
- [Visual Refresh] Fix transparent color variable definitions
([8249](elastic/eui#8249))
- [Visual Refresh] Update EuiToken colors
([8250](elastic/eui#8250))

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
stratoula pushed a commit to stratoula/kibana that referenced this pull request Jan 2, 2025
@mgadewoll @kibanamachine @stratoula
Upgrade EUI to v98.2.1 (elastic#204482)
69e2e87 
`v98.1.0-borealis.0`⏩`v98.2.1-borealis.2`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

# `@elastic/eui`

## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1)

- Updated the EUI theme color values to use a full 6 char hex code
format ([elastic#8244](elastic/eui#8244))

## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0)

- Added two new icons: `contrast` and `contrastHigh`
([elastic#8216](elastic/eui#8216))
- Updated `EuiDataGrid` content to have a transparent background.
([elastic#8220](elastic/eui#8220))

**Accessibility**

- When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used
inside components that handle the Escape key (like `EuiFlyout` or
`EuiModal`), pressing the Escape key will now only close the tooltip and
not the entire wrapping component.
([elastic#8140](elastic/eui#8140))
- Improved the accessibility of `EuiCodeBlock`s by
([elastic#8195](elastic/eui#8195))
  - adding screen reader only labels
  - adding `role="dialog"` on in fullscreen mode
  - ensuring focus is returned on closing fullscreen mode
  
# Borealis updates
  
- [Visual Refresh] Update color token mappings
([elastic#8211](elastic/eui#8211))
- [Visual Refresh] Introduce shared popover arrow styles to Borealis
([elastic#8212](elastic/eui#8212))
- [Visual Refresh] Add forms.maxWidth token
([elastic#8221](elastic/eui#8221))
- [Visual Refresh] Set darker shade for subdued text
([elastic#8224](elastic/eui#8224))
- [Visual Refresh] Remove support for accentSecondary badges
([elastic#8224](elastic/eui#8227))
- [Visual Refresh] Add severity vis colors
([elastic#8247](elastic/eui#8247))
- [Visual Refresh] Fix transparent color variable definitions
([8249](elastic/eui#8249))
- [Visual Refresh] Update EuiToken colors
([8250](elastic/eui#8250))

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
benakansara pushed a commit to benakansara/kibana that referenced this pull request Jan 2, 2025
@mgadewoll @kibanamachine @benakansara
Upgrade EUI to v98.2.1 (elastic#204482)
d4664ef 
`v98.1.0-borealis.0`⏩`v98.2.1-borealis.2`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

# `@elastic/eui`

## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1)

- Updated the EUI theme color values to use a full 6 char hex code
format ([elastic#8244](elastic/eui#8244))

## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0)

- Added two new icons: `contrast` and `contrastHigh`
([elastic#8216](elastic/eui#8216))
- Updated `EuiDataGrid` content to have a transparent background.
([elastic#8220](elastic/eui#8220))

**Accessibility**

- When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used
inside components that handle the Escape key (like `EuiFlyout` or
`EuiModal`), pressing the Escape key will now only close the tooltip and
not the entire wrapping component.
([elastic#8140](elastic/eui#8140))
- Improved the accessibility of `EuiCodeBlock`s by
([elastic#8195](elastic/eui#8195))
  - adding screen reader only labels
  - adding `role="dialog"` on in fullscreen mode
  - ensuring focus is returned on closing fullscreen mode
  
# Borealis updates
  
- [Visual Refresh] Update color token mappings
([elastic#8211](elastic/eui#8211))
- [Visual Refresh] Introduce shared popover arrow styles to Borealis
([elastic#8212](elastic/eui#8212))
- [Visual Refresh] Add forms.maxWidth token
([elastic#8221](elastic/eui#8221))
- [Visual Refresh] Set darker shade for subdued text
([elastic#8224](elastic/eui#8224))
- [Visual Refresh] Remove support for accentSecondary badges
([elastic#8224](elastic/eui#8227))
- [Visual Refresh] Add severity vis colors
([elastic#8247](elastic/eui#8247))
- [Visual Refresh] Fix transparent color variable definitions
([8249](elastic/eui#8249))
- [Visual Refresh] Update EuiToken colors
([8250](elastic/eui#8250))

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
mgadewoll added a commit that referenced this pull request Jan 7, 2025
@mgadewoll
[Visual Refresh] Fix transparent color variable definitions (#8249)
63410a1
mgadewoll added a commit to mgadewoll/eui that referenced this pull request Jan 20, 2025
@mgadewoll
[Visual Refresh] Fix transparent color variable definitions (elastic#…
ee7bed2 
…8249)
viduni94 pushed a commit to viduni94/kibana that referenced this pull request Jan 23, 2025
@mgadewoll @kibanamachine @viduni94
Upgrade EUI to v98.2.1 (elastic#204482)
a843896 
`v98.1.0-borealis.0`⏩`v98.2.1-borealis.2`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

# `@elastic/eui`

## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1)

- Updated the EUI theme color values to use a full 6 char hex code
format ([elastic#8244](elastic/eui#8244))

## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0)

- Added two new icons: `contrast` and `contrastHigh`
([elastic#8216](elastic/eui#8216))
- Updated `EuiDataGrid` content to have a transparent background.
([elastic#8220](elastic/eui#8220))

**Accessibility**

- When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used
inside components that handle the Escape key (like `EuiFlyout` or
`EuiModal`), pressing the Escape key will now only close the tooltip and
not the entire wrapping component.
([elastic#8140](elastic/eui#8140))
- Improved the accessibility of `EuiCodeBlock`s by
([elastic#8195](elastic/eui#8195))
  - adding screen reader only labels
  - adding `role="dialog"` on in fullscreen mode
  - ensuring focus is returned on closing fullscreen mode
  
# Borealis updates
  
- [Visual Refresh] Update color token mappings
([elastic#8211](elastic/eui#8211))
- [Visual Refresh] Introduce shared popover arrow styles to Borealis
([elastic#8212](elastic/eui#8212))
- [Visual Refresh] Add forms.maxWidth token
([elastic#8221](elastic/eui#8221))
- [Visual Refresh] Set darker shade for subdued text
([elastic#8224](elastic/eui#8224))
- [Visual Refresh] Remove support for accentSecondary badges
([elastic#8224](elastic/eui#8227))
- [Visual Refresh] Add severity vis colors
([elastic#8247](elastic/eui#8247))
- [Visual Refresh] Fix transparent color variable definitions
([8249](elastic/eui#8249))
- [Visual Refresh] Update EuiToken colors
([8250](elastic/eui#8250))

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
@mgadewoll mgadewoll mentioned this pull request Mar 3, 2025
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tkajtoch tkajtoch tkajtoch approved these changes

Assignees

No one assigned

Labels

skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) visual refresh

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@mgadewoll @kibanamachine @elasticmachine @tkajtoch