[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 <tomasz.kajtoch@elastic.co>

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 review from joeypoon and 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

Open

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