Skip to content

[Visual Refresh] Set darker shade for subdued text #8224

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

[Visual Refresh] Set darker shade for subdued text #8224

ryankeairns merged 2 commits into from
Dec 12, 2024

Conversation

@ryankeairns
Copy link
Contributor

@ryankeairns ryankeairns commented Dec 12, 2024 •
edited
Loading

Closes https://github.com/elastic/platform-ux-team/issues/563
^ This change stemmed from a contrast check on breadcrumbs.
@ek-so proposed we change the shade for subdued text, globally.

Note

This PR merges into a feature branch.

Changes

Color token changes

  • updates subdued text with darker shade

QA notes

Shade95 translates to hex #516381

  • This can be seen on the Colors > Text colors page
  • Contrast for the last breadcrumb can be seen on the Header page
  • This only impact light mode; contrast on dark mode was sufficient

@ryankeairns ryankeairns added skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) visual refresh labels Dec 12, 2024
@ryankeairns ryankeairns marked this pull request as ready for review December 12, 2024 18:20
@ryankeairns ryankeairns requested a review from a team as a code owner December 12, 2024 18:20
mgadewoll
mgadewoll reviewed Dec 12, 2024
View reviewed changes
packages/eui-theme-borealis/src/eui_theme_borealis_light.json
Copy link
Contributor

@mgadewoll mgadewoll Dec 12, 2024

Choose a reason for hiding this comment

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

One small note: This file is currently not the one used in Kibana (there were issues loading this file somehow from this new package 🤷‍♀️) so we decided to duplicate the file for now into eui.
We need to update this file here too to keep them in sync.

Copy link
Contributor

@mgadewoll mgadewoll Dec 12, 2024

Choose a reason for hiding this comment

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

@ryankeairns I went ahead to add the small update, I hope you don't mind! (commit)

Copy link
Contributor Author

@ryankeairns ryankeairns Dec 12, 2024

Choose a reason for hiding this comment

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

Yay, thank you!

@kibanamachine
Copy link

kibanamachine commented Dec 12, 2024

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

elasticmachine commented Dec 12, 2024

💚 Build Succeeded

History

@ryankeairns ryankeairns merged commit 04e5d78 into eui-theme/borealis Dec 12, 2024
4 checks passed
@ryankeairns ryankeairns deleted the rk/563-subdued-text-shade branch December 12, 2024 20:58
tkajtoch pushed a commit that referenced this pull request Dec 16, 2024
@ryankeairns @mgadewoll @tkajtoch
[Visual Refresh] Set darker shade for subdued text (#8224)
8ebee7b 
Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
@mgadewoll mgadewoll mentioned this pull request Dec 16, 2024
Merged
tkajtoch pushed a commit that referenced this pull request Dec 17, 2024
@ryankeairns @mgadewoll @tkajtoch
[Visual Refresh] Set darker shade for subdued text (#8224)
c934fe7 
Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
@mgadewoll mgadewoll mentioned this pull request Dec 18, 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
@ryankeairns @mgadewoll
[Visual Refresh] Set darker shade for subdued text (#8224)
cd2ad55 
Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
mgadewoll added a commit to elastic/kibana that referenced this pull request Jan 8, 2025
@mgadewoll
[8.x] Upgrade EUI to v98.2.1-borealis.1 (#204783)
1384ced 
>[!IMPORTANT]
This PR introduces the Borealis enabled EUI package to `8.x`.
The intention is to support new features being developed that need to
live in `main` as well as `8.x`.


>[!IMPORTANT]
All `8.x` versions should continue to use the current Amsterdam theme.
To ensure this even with upcoming changes to the default theme for EUI,
we're adding `euiThemeAmsterdam` on `EuiProvider` usages manually.

## Description

This PR introduces all previous Borealis related PR changes but excludes
the specific changes to support `@elastic/eui-theme-borealis` as only
Amsterdam is supported as theme in `8.x`.

Previous PRs

- #199993
- #201049
- #202073

---

`v97.3.1`⏩`v98.2.1-borealis.1`

_[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))

---

# `@elastic/eui`

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

- Updated `EuiBetaBadge` with a new `warning` color variant
([#8177](elastic/eui#8177))

**Accessibility**

- Ensures `autoFocus` on `EuiSelectableList` triggers initial focus
([#8091](elastic/eui#8091))
- Improved the accessibility of `EuiSearchBarFilters` by:
([#8091](elastic/eui#8091))
  - adding a more descriptive `aria-label` to selection filter buttons
- ensuring the selection listbox is initially focused when opening a
selection popover
- Improved the accessibility experience of tabs (EuiTab, EuiTabs): tab
group is a tab stop and tabs can be traversed with arrow keys.
([#8116](elastic/eui#8116))
- Updated `EuiCodeBlock` with a new `copyAriaLabel` prop, which allows
setting a custom screen reader label on the copy button.
([#8176](elastic/eui#8176))

**CSS-in-JS conversions**

- Removed the following global Sass variables:
([#8169](elastic/eui#8169))
  - `$euiButtonMinWidth`
  - `$euiDatePickerCalendarWidth`
- Removed the following Sass animations:
([#8169](elastic/eui#8169))
  - `euiAnimFadeIn`
  - `euiGrow`
  - `focusRingAnimate`
  - `focusRingAnimateLarge`
  - `euiButtonActive`
- Removed the following Sass mixins:
([#8169](elastic/eui#8169))
  - `euiFullHeight`
  - `euiSlightShadowHover`
  - `datePickerArrow`

# Borealis updates

- [Visual Refresh] Fix euiColorFullShade Sass variable mapping
(elastic/eui#8178)

---

# `@elastic/eui`

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

**Bug fixes**

- Fixed an `EuiDataGrid` bug where column actions where not clickable
when `EuiDataGrid` with `columnVisibility.canDragAndDropColumns` was
used inside a modal ([#8135](elastic/eui#8135))

**Breaking changes**

- Removed `EuiFormRow`'s deprecated `columnCompressedSwitch` display
prop. Use `columnCompressed` instead
([#8113](elastic/eui#8113))

# Borealis updates

**Bug fixes**

- Fixed computed border token mapping
(elastic/eui#8170)
mgadewoll added a commit to mgadewoll/eui that referenced this pull request Jan 20, 2025
@ryankeairns @mgadewoll
[Visual Refresh] Set darker shade for subdued text (elastic#8224)
3126680 
Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
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

@mgadewoll mgadewoll mgadewoll 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.

5 participants

@ryankeairns @kibanamachine @elasticmachine @mgadewoll