[Visual Refresh] Add Borealis theme #199993

mgadewoll · 2024-11-13T12:19:39Z

Summary

This PR introduces the first internal version of the new theme Borealis and ensures that:

themes can be switched between "Amsterdam" and "Borealis"
theme-specific Sass files are available and can be loaded with KBN_OPTIMIZER_THEMES=experimental
legacy JSON variable usage accounts for both themes
static template styles account for both themes

Running locally

// kibana.dev.yml or kibana.yml
uiSettings.experimental.themeSwitcherEnabled: true

Start kibana

KBN_OPTIMIZER_THEMES='v8light,v8dark,borealislight,borealisdark' yarn start

or

KBN_OPTIMIZER_THEMES=experimental yarn start

Checklist

Unit or functional tests were updated or added to match the most common scenarios
Flaky Test Runner was used on any tests changed

github-actions · 2024-11-14T08:41:04Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

/oblt-deploy : Deploy a Kibana instance using the Observability test environments.
run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

…der to only load themes that are supposed to be bundled

This reverts commit 544b270.

This reverts commit 38364d2.

-adds KBN_OPTIMIZER_THEMES=experimental support

elastic_eui_97.3.1_borealis_prerelease_001.tgz

szwarckonrad

DW changes ✅

tkajtoch · 2024-11-18T13:59:06Z

packages/core/rendering/core-rendering-server-internal/src/views/styles.tsx

@@ -8,25 +8,44 @@
 */

 import React, { FC } from 'react';
-import type { DarkModeValue } from '@kbn/core-ui-settings-common';
+import { type DarkModeValue, ThemeName } from '@kbn/core-ui-settings-common';


The type of ThemeName is now string but will get stricter in follow-up PRs

tkajtoch · 2024-11-18T14:17:33Z

x-pack/test/functional/apps/infra/home_page.ts

@@ -426,8 +426,8 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
          expect(nodesWithValue).to.eql([
            { name: 'host-5', value: 10, color: '#6092c0' },
            { name: 'host-4', value: 30, color: '#9ab6d5' },
-            { name: 'host-1', value: 50, color: '#f1d9b9' },
-            { name: 'host-2', value: 70, color: '#eba47a' },
+            { name: 'host-1', value: 50, color: '#f6e0b9' },


These values change because we updated how colors are calculated. The changes should be pretty much indistinguishable.

#f1d9b9 -> #f6e0b9

#eba47a -> #eda77a

Thanks for doing this, was actually on my list of things we needed to look into with the change of the theme

afharo

Core changes LGTM

packages/core/rendering/core-rendering-server-internal/src/views/styles.tsx

tkajtoch · 2024-11-18T16:26:38Z

FYI I'm investigating the increased bundle size

MichaelMarcialis

Left one curiosity question, but otherwise this LGTM. Assuming there is a good reason to hardcode those color values I'm asking about, I'll approve now to not hold you up.

packages/core/rendering/core-rendering-server-internal/src/views/styles.tsx

nickofthyme · 2024-11-19T00:30:27Z

packages/core/ui-settings/core-ui-settings-common/src/theme.ts

There appears to be a slight issue with the aggs-based visualization tooltips. They used to be dark even for light theme so I can tweaks this in a follow-up to work with the new themes.

Before

After

elasticmachine · 2024-11-19T10:22:09Z

⏳ Build in-progress

Buildkite Build
Commit: d84e16e
Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-199993-d84e16efc7d3

History

💚 Build #251946 succeeded 1900003
💚 Build #251882 succeeded a9c14b6
💔 Build #251553 failed 4f4198f
💔 Build #251504 failed ad59135
💔 Build #251482 failed 00df65d

sebelga

LGTM! I added a comment to create an issue to not lose track of the work to be done when Borealis is in public beta.
Approving to unblock you but it would be great to have it. Cheers 👍

sebelga · 2024-11-19T14:29:40Z

packages/core/ui-settings/core-ui-settings-common/src/theme.ts

@@ -52,6 +52,11 @@ export function parseThemeTags(input?: unknown): ThemeTags {
    return DEFAULT_THEME_TAGS;
  }

+  // TODO: remove when Borealis is in public beta


Can we create an issue for this to not forget to remove this condition? And then update the comment with the link to the issue?

Surely! I'm going to create an issue shortly and will update the comment in a follow-up PR so that we don't need to wait for CI to pass again. Thanks for catching it!

This reverts commit ee49986.

## Summary This PR introduces the first internal version of the new theme `Borealis` and ensures that: - themes can be switched between "Amsterdam" and "Borealis" - theme-specific Sass files are available and can be loaded with `KBN_OPTIMIZER_THEMES=experimental` - legacy JSON variable usage accounts for both themes - static template styles account for both themes ## Running locally ```yml // kibana.dev.yml or kibana.yml uiSettings.experimental.themeSwitcherEnabled: true ``` Start kibana ``` KBN_OPTIMIZER_THEMES='v8light,v8dark,borealislight,borealisdark' yarn start or KBN_OPTIMIZER_THEMES=experimental yarn start ``` ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed --------- Co-authored-by: Tomasz Kajtoch <[email protected]>

>[!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 release_note:skip Skip the PR/issue when compiling release notes backport:skip This commit does not require backporting v9.0.0 ci:cloud-deploy Create or update a Cloud deployment labels Nov 13, 2024

mgadewoll force-pushed the eui/theme-borealis branch 3 times, most recently from 1cc9b49 to b33a410 Compare November 14, 2024 08:17

mgadewoll added ci:project-deploy-observability Create an Observability project and removed ci:cloud-deploy Create or update a Cloud deployment labels Nov 14, 2024

mgadewoll force-pushed the eui/theme-borealis branch 6 times, most recently from cb7491a to 00df65d Compare November 14, 2024 17:50

tkajtoch and others added 13 commits November 18, 2024 12:55

feat: add basic support for experimental theme switching

ec3b7ed

add theme utilities to core-ui-settings-common and refactor theme loa…

9e406c8

…der to only load themes that are supposed to be bundled

Revert "add @kbn/react-kibana-context-theme to shared deps"

c217b09

This reverts commit 544b270.

Revert "Revert "add @kbn/react-kibana-context-theme to shared deps""

416d0bd

This reverts commit 38364d2.

feat: add EUI borealis theme

dfbeb3c

feat: add new theme sass files

66ecffd

-adds KBN_OPTIMIZER_THEMES=experimental support

feat: support new theme legacy JSON tokens

2232ff9

feat: support theme-specific template styles

3167de2

refactor: update token to ensure brand color

ea5fcfd

test: update tests and snapshots

9c99298

chore: increase dataViewManagement optimizer limit slightly

668faeb

chore: update aipos optimizer limit slightly

f02d68d

chore: add release packages

a9c14b6

mgadewoll force-pushed the eui/theme-borealis branch from 4f4198f to a9c14b6 Compare November 18, 2024 12:07

tkajtoch requested a review from szwarckonrad November 18, 2024 12:22

tkajtoch reviewed Nov 18, 2024

View reviewed changes

elastic_eui_97.3.1_borealis_prerelease_001.tgz Outdated Show resolved Hide resolved

SiddharthMantri self-requested a review November 18, 2024 12:42

szwarckonrad approved these changes Nov 18, 2024

View reviewed changes

tkajtoch added 2 commits November 18, 2024 14:45

remove unnecessary package files

9a16af4

update version of @elastic/eui in license checker config

1900003

tkajtoch reviewed Nov 18, 2024

View reviewed changes

rmyz approved these changes Nov 18, 2024

View reviewed changes

miloszmarcinkowski approved these changes Nov 18, 2024

View reviewed changes

afharo approved these changes Nov 18, 2024

View reviewed changes

packages/core/rendering/core-rendering-server-internal/src/views/styles.tsx Outdated Show resolved Hide resolved

MichaelMarcialis approved these changes Nov 18, 2024

View reviewed changes

packages/core/rendering/core-rendering-server-internal/src/views/styles.tsx Show resolved Hide resolved

nickofthyme approved these changes Nov 19, 2024

View reviewed changes

Ikuni17 approved these changes Nov 19, 2024

View reviewed changes

refactor: reduce calls of getThemeStyles helper

d84e16e

SiddharthMantri approved these changes Nov 19, 2024

View reviewed changes

joeypoon approved these changes Nov 19, 2024

View reviewed changes

sebelga approved these changes Nov 19, 2024

View reviewed changes

nreese approved these changes Nov 19, 2024

View reviewed changes

mgadewoll merged commit ee49986 into elastic:main Nov 19, 2024
46 checks passed

tsullivan added a commit to tsullivan/kibana that referenced this pull request Nov 21, 2024

Revert "[Visual Refresh] Add Borealis theme (elastic#199993)"

56c00b9

This reverts commit ee49986.

nickofthyme mentioned this pull request Nov 21, 2024

[Visual Refresh][Maps] Update EMS styles to Borealis #201269

Open

maryam-saeidi added a commit to maryam-saeidi/kibana that referenced this pull request Nov 26, 2024

Revert "[Visual Refresh] Add Borealis theme (elastic#199993)"

b86fecb

This reverts commit ee49986.

tsullivan mentioned this pull request Nov 26, 2024

[Observability] Nested EuiProvider error #201805

Open

mgadewoll mentioned this pull request Dec 19, 2024

[8.x] Upgrade EUI to v98.2.1-borealis.1 #204783

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Visual Refresh] Add Borealis theme #199993

[Visual Refresh] Add Borealis theme #199993

mgadewoll commented Nov 13, 2024 •

edited

Loading

github-actions bot commented Nov 14, 2024

szwarckonrad left a comment

tkajtoch Nov 18, 2024

tkajtoch Nov 18, 2024

MiriamAparicio Nov 18, 2024

afharo left a comment

tkajtoch commented Nov 18, 2024

MichaelMarcialis left a comment

nickofthyme Nov 19, 2024

elasticmachine commented Nov 19, 2024

sebelga left a comment

sebelga Nov 19, 2024

tkajtoch Nov 19, 2024

[Visual Refresh] Add Borealis theme #199993

[Visual Refresh] Add Borealis theme #199993

Conversation

mgadewoll commented Nov 13, 2024 • edited Loading

Summary

Running locally

Checklist

github-actions bot commented Nov 14, 2024

🤖 GitHub comments

szwarckonrad left a comment

Choose a reason for hiding this comment

tkajtoch Nov 18, 2024

Choose a reason for hiding this comment

tkajtoch Nov 18, 2024

Choose a reason for hiding this comment

MiriamAparicio Nov 18, 2024

Choose a reason for hiding this comment

afharo left a comment

Choose a reason for hiding this comment

tkajtoch commented Nov 18, 2024

MichaelMarcialis left a comment

Choose a reason for hiding this comment

nickofthyme Nov 19, 2024

Choose a reason for hiding this comment

Before

After

elasticmachine commented Nov 19, 2024

⏳ Build in-progress

History

sebelga left a comment

Choose a reason for hiding this comment

sebelga Nov 19, 2024

Choose a reason for hiding this comment

tkajtoch Nov 19, 2024

Choose a reason for hiding this comment

mgadewoll commented Nov 13, 2024 •

edited

Loading