From 5a139321773b49c205f81fbf8121c466fafb5a49 Mon Sep 17 00:00:00 2001 From: ek-so Date: Wed, 15 Jan 2025 10:20:57 +0100 Subject: [PATCH 01/11] Changed mono spinner mapping --- packages/eui-theme-borealis/src/variables/_components.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index fda81fb85f07..8912a0c31c02 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -242,10 +242,10 @@ export const components: _EuiThemeComponents = { listGroupItemBackgroundPrimaryHover: dark_background_colors.backgroundBaseInteractiveHover, - loadingChartMonoBackground0: SEMANTIC_COLORS.shade95, - loadingChartMonoBackground1: SEMANTIC_COLORS.shade105, - loadingChartMonoBackground2: SEMANTIC_COLORS.shade115, - loadingChartMonoBackground3: SEMANTIC_COLORS.shade125, + loadingChartMonoBackground0: SEMANTIC_COLORS.shade110, + loadingChartMonoBackground1: SEMANTIC_COLORS.shade100, + loadingChartMonoBackground2: SEMANTIC_COLORS.shade90, + loadingChartMonoBackground3: SEMANTIC_COLORS.shade80, markBackground: dark_background_colors.backgroundLightPrimary, From 64850e16efb7b2281d725d71076f3992b3df4224 Mon Sep 17 00:00:00 2001 From: ek-so Date: Wed, 15 Jan 2025 10:30:07 +0100 Subject: [PATCH 02/11] Change spinner mapping --- packages/eui/src/components/loading/loading_spinner.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/eui/src/components/loading/loading_spinner.styles.ts b/packages/eui/src/components/loading/loading_spinner.styles.ts index 8133e12ed761..7ae2f908b4a3 100644 --- a/packages/eui/src/components/loading/loading_spinner.styles.ts +++ b/packages/eui/src/components/loading/loading_spinner.styles.ts @@ -44,8 +44,8 @@ export const euiSpinnerBorderColorsCSS = ( colors: EuiLoadingSpinnerColor = {} ): string => { const { - border = euiTheme.colors.lightShade, - highlight = euiTheme.colors.primary, + border = euiTheme.colors.borderBasePlain, + highlight = euiTheme.colors.borderStrongPrimary, } = colors; return `${highlight} ${border} ${border} ${border}`; }; From cf3bc4fa64f62b08ea57503a39b009cc70d64fe2 Mon Sep 17 00:00:00 2001 From: ek-so Date: Wed, 15 Jan 2025 10:31:28 +0100 Subject: [PATCH 03/11] Unit tests --- .../src/components/button/__snapshots__/button.test.tsx.snap | 2 +- .../__snapshots__/_button_display_content.test.tsx.snap | 2 +- .../button_empty/__snapshots__/button_empty.test.tsx.snap | 2 +- .../button/button_icon/__snapshots__/button_icon.test.tsx.snap | 2 +- .../loading/__snapshots__/loading_spinner.test.tsx.snap | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap b/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap index b156af6f1c5f..292eef68701c 100644 --- a/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap +++ b/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap @@ -299,7 +299,7 @@ exports[`EuiButton props isLoading is rendered 1`] = ` aria-label="Loading" class="euiLoadingSpinner emotion-euiLoadingSpinner-m" role="progressbar" - style="border-color: #0077cc currentcolor currentcolor currentcolor;" + style="border-color: #99c9eb currentcolor currentcolor currentcolor;" /> diff --git a/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap b/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap index b0e32a19990e..65bbc9130dec 100644 --- a/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap +++ b/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap @@ -8,7 +8,7 @@ exports[`EuiButtonDisplayContent button icon loading icon renders disabled & loa aria-label="Loading" class="euiLoadingSpinner emotion-euiLoadingSpinner-m" role="progressbar" - style="border-color: #0077cc currentcolor currentcolor currentcolor;" + style="border-color: #99c9eb currentcolor currentcolor currentcolor;" /> `; diff --git a/packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap b/packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap index f5f127e03ee4..838ab3eeac71 100644 --- a/packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap +++ b/packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap @@ -6,7 +6,7 @@ exports[`EuiLoadingSpinner custom colors 1`] = ` aria-label="Loading" class="euiLoadingSpinner emotion-euiLoadingSpinner-m" role="progressbar" - style="border-color: #0077cc white white white;" + style="border-color: #99c9eb white white white;" /> Date: Wed, 15 Jan 2025 10:20:57 +0100 Subject: [PATCH 04/11] Changed mono spinner mapping --- packages/eui-theme-borealis/src/variables/_components.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index fda81fb85f07..8912a0c31c02 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -242,10 +242,10 @@ export const components: _EuiThemeComponents = { listGroupItemBackgroundPrimaryHover: dark_background_colors.backgroundBaseInteractiveHover, - loadingChartMonoBackground0: SEMANTIC_COLORS.shade95, - loadingChartMonoBackground1: SEMANTIC_COLORS.shade105, - loadingChartMonoBackground2: SEMANTIC_COLORS.shade115, - loadingChartMonoBackground3: SEMANTIC_COLORS.shade125, + loadingChartMonoBackground0: SEMANTIC_COLORS.shade110, + loadingChartMonoBackground1: SEMANTIC_COLORS.shade100, + loadingChartMonoBackground2: SEMANTIC_COLORS.shade90, + loadingChartMonoBackground3: SEMANTIC_COLORS.shade80, markBackground: dark_background_colors.backgroundLightPrimary, From 32c8db69e6f0f233ef48ac7c2fba70df108f1867 Mon Sep 17 00:00:00 2001 From: ek-so Date: Wed, 15 Jan 2025 10:30:07 +0100 Subject: [PATCH 05/11] Change spinner mapping --- packages/eui/src/components/loading/loading_spinner.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/eui/src/components/loading/loading_spinner.styles.ts b/packages/eui/src/components/loading/loading_spinner.styles.ts index 8133e12ed761..7ae2f908b4a3 100644 --- a/packages/eui/src/components/loading/loading_spinner.styles.ts +++ b/packages/eui/src/components/loading/loading_spinner.styles.ts @@ -44,8 +44,8 @@ export const euiSpinnerBorderColorsCSS = ( colors: EuiLoadingSpinnerColor = {} ): string => { const { - border = euiTheme.colors.lightShade, - highlight = euiTheme.colors.primary, + border = euiTheme.colors.borderBasePlain, + highlight = euiTheme.colors.borderStrongPrimary, } = colors; return `${highlight} ${border} ${border} ${border}`; }; From d6ee13ae80f2b4ba895ed950ac195fb81ae92afc Mon Sep 17 00:00:00 2001 From: ek-so Date: Wed, 15 Jan 2025 10:31:28 +0100 Subject: [PATCH 06/11] Unit tests --- .../src/components/button/__snapshots__/button.test.tsx.snap | 2 +- .../__snapshots__/_button_display_content.test.tsx.snap | 2 +- .../button_empty/__snapshots__/button_empty.test.tsx.snap | 2 +- .../button/button_icon/__snapshots__/button_icon.test.tsx.snap | 2 +- .../loading/__snapshots__/loading_spinner.test.tsx.snap | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap b/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap index b156af6f1c5f..292eef68701c 100644 --- a/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap +++ b/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap @@ -299,7 +299,7 @@ exports[`EuiButton props isLoading is rendered 1`] = ` aria-label="Loading" class="euiLoadingSpinner emotion-euiLoadingSpinner-m" role="progressbar" - style="border-color: #0077cc currentcolor currentcolor currentcolor;" + style="border-color: #99c9eb currentcolor currentcolor currentcolor;" /> diff --git a/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap b/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap index b0e32a19990e..65bbc9130dec 100644 --- a/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap +++ b/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap @@ -8,7 +8,7 @@ exports[`EuiButtonDisplayContent button icon loading icon renders disabled & loa aria-label="Loading" class="euiLoadingSpinner emotion-euiLoadingSpinner-m" role="progressbar" - style="border-color: #0077cc currentcolor currentcolor currentcolor;" + style="border-color: #99c9eb currentcolor currentcolor currentcolor;" /> `; diff --git a/packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap b/packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap index f5f127e03ee4..838ab3eeac71 100644 --- a/packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap +++ b/packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap @@ -6,7 +6,7 @@ exports[`EuiLoadingSpinner custom colors 1`] = ` aria-label="Loading" class="euiLoadingSpinner emotion-euiLoadingSpinner-m" role="progressbar" - style="border-color: #0077cc white white white;" + style="border-color: #99c9eb white white white;" /> Date: Thu, 16 Jan 2025 12:25:20 +0100 Subject: [PATCH 07/11] Component tokens mapping --- .../eui-theme-borealis/src/variables/_components.ts | 10 ++++++++++ .../src/global_styling/variables/components.ts | 3 +++ .../src/components/loading/loading_spinner.styles.ts | 8 ++++++-- .../amsterdam/global_styling/variables/_components.ts | 11 +++++++++++ 4 files changed, 30 insertions(+), 2 deletions(-) diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index 8912a0c31c02..d98ca8a6521d 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -107,6 +107,11 @@ const component_colors: _EuiThemeComponentColors = { listGroupItemBackgroundPrimaryHover: background_colors.backgroundBaseInteractiveHover, + loadingSpinnerBorder: + border_colors.borderBasePlain, + loadingSpinnerHighlight: + border_colors.borderStrongPrimary, + loadingChartMonoBackground0: SEMANTIC_COLORS.shade20, loadingChartMonoBackground1: SEMANTIC_COLORS.shade30, loadingChartMonoBackground2: SEMANTIC_COLORS.shade40, @@ -242,6 +247,11 @@ export const components: _EuiThemeComponents = { listGroupItemBackgroundPrimaryHover: dark_background_colors.backgroundBaseInteractiveHover, + loadingSpinnerBorder: + dark_border_colors.borderBasePlain, + loadingSpinnerHighlight: + dark_border_colors.borderStrongPrimary, + loadingChartMonoBackground0: SEMANTIC_COLORS.shade110, loadingChartMonoBackground1: SEMANTIC_COLORS.shade100, loadingChartMonoBackground2: SEMANTIC_COLORS.shade90, diff --git a/packages/eui-theme-common/src/global_styling/variables/components.ts b/packages/eui-theme-common/src/global_styling/variables/components.ts index cb559ceba441..b067c0a12131 100644 --- a/packages/eui-theme-common/src/global_styling/variables/components.ts +++ b/packages/eui-theme-common/src/global_styling/variables/components.ts @@ -78,6 +78,9 @@ export type _EuiThemeComponentColors = { listGroupItemBackgroundHover: ColorModeSwitch; listGroupItemBackgroundPrimaryHover: ColorModeSwitch; + loadingSpinnerBorder: ColorModeSwitch; + loadingSpinnerHighlight: ColorModeSwitch; + loadingChartMonoBackground0: ColorModeSwitch; loadingChartMonoBackground1: ColorModeSwitch; loadingChartMonoBackground2: ColorModeSwitch; diff --git a/packages/eui/src/components/loading/loading_spinner.styles.ts b/packages/eui/src/components/loading/loading_spinner.styles.ts index 7ae2f908b4a3..e7124e0b0b08 100644 --- a/packages/eui/src/components/loading/loading_spinner.styles.ts +++ b/packages/eui/src/components/loading/loading_spinner.styles.ts @@ -18,6 +18,10 @@ import { EuiLoadingSpinnerSize, EuiLoadingSpinnerColor, } from './loading_spinner'; +import { + _EuiThemeComponentColors, + _EuiThemeComponents, +} from '@elastic/eui-theme-common'; const _loadingSpinner = keyframes` from { @@ -44,8 +48,8 @@ export const euiSpinnerBorderColorsCSS = ( colors: EuiLoadingSpinnerColor = {} ): string => { const { - border = euiTheme.colors.borderBasePlain, - highlight = euiTheme.colors.borderStrongPrimary, + border = euiTheme.components.loadingSpinnerBorder, + highlight = euiTheme.components.loadingSpinnerHighlight, } = colors; return `${highlight} ${border} ${border} ${border}`; }; diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts index 023ad80ee916..3690b7718f6c 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts @@ -236,10 +236,21 @@ const component_colors: _EuiThemeComponentColors = { ['colors.primary'] ), + loadingSpinnerBorder: computed( + ([lightShade]) => lightShade, + ['colors.lightShade'] + ), + + loadingSpinnerHighlight: computed( + ([primary]) => primary, + ['colors.primary'] + ), + loadingChartMonoBackground0: computed( ([lightShade]) => lightShade, ['colors.lightShade'] ), + loadingChartMonoBackground1: computed( ([lightShade]) => shade(lightShade, 0.04), ['colors.lightShade'] From c49aa15dcb013d5e98f45f6b020ae61dc380e8c4 Mon Sep 17 00:00:00 2001 From: ek-so Date: Thu, 16 Jan 2025 13:18:34 +0100 Subject: [PATCH 08/11] One more time --- .../src/components/button/__snapshots__/button.test.tsx.snap | 2 +- .../__snapshots__/_button_display_content.test.tsx.snap | 2 +- .../button_empty/__snapshots__/button_empty.test.tsx.snap | 2 +- .../button_icon/__snapshots__/button_icon.test.tsx.snap | 2 +- .../loading/__snapshots__/loading_spinner.test.tsx.snap | 2 +- packages/eui/src/components/loading/loading_spinner.styles.ts | 4 ---- .../themes/amsterdam/global_styling/variables/_components.ts | 2 +- 7 files changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap b/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap index 292eef68701c..b156af6f1c5f 100644 --- a/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap +++ b/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap @@ -299,7 +299,7 @@ exports[`EuiButton props isLoading is rendered 1`] = ` aria-label="Loading" class="euiLoadingSpinner emotion-euiLoadingSpinner-m" role="progressbar" - style="border-color: #99c9eb currentcolor currentcolor currentcolor;" + style="border-color: #0077cc currentcolor currentcolor currentcolor;" /> diff --git a/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap b/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap index 65bbc9130dec..b0e32a19990e 100644 --- a/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap +++ b/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap @@ -8,7 +8,7 @@ exports[`EuiButtonDisplayContent button icon loading icon renders disabled & loa aria-label="Loading" class="euiLoadingSpinner emotion-euiLoadingSpinner-m" role="progressbar" - style="border-color: #99c9eb currentcolor currentcolor currentcolor;" + style="border-color: #0077cc currentcolor currentcolor currentcolor;" /> `; diff --git a/packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap b/packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap index 838ab3eeac71..f5f127e03ee4 100644 --- a/packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap +++ b/packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap @@ -6,7 +6,7 @@ exports[`EuiLoadingSpinner custom colors 1`] = ` aria-label="Loading" class="euiLoadingSpinner emotion-euiLoadingSpinner-m" role="progressbar" - style="border-color: #99c9eb white white white;" + style="border-color: #0077cc white white white;" /> lightShade, ['colors.lightShade'] ), - + loadingChartMonoBackground1: computed( ([lightShade]) => shade(lightShade, 0.04), ['colors.lightShade'] From fd10e54fcde57bd225256f685b548b80c7ad76a5 Mon Sep 17 00:00:00 2001 From: ek-so Date: Thu, 16 Jan 2025 13:20:58 +0100 Subject: [PATCH 09/11] Format code --- .../themes/amsterdam/global_styling/variables/_components.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts index f1ee4ea4f1b4..35fa3e763dd7 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts @@ -240,7 +240,6 @@ const component_colors: _EuiThemeComponentColors = { ([lightShade]) => lightShade, ['colors.lightShade'] ), - loadingSpinnerHighlight: computed( ([primary]) => primary, ['colors.primary'] @@ -250,7 +249,6 @@ const component_colors: _EuiThemeComponentColors = { ([lightShade]) => lightShade, ['colors.lightShade'] ), - loadingChartMonoBackground1: computed( ([lightShade]) => shade(lightShade, 0.04), ['colors.lightShade'] From a08d17c40bafc90a2ae302d3213bf2521524c080 Mon Sep 17 00:00:00 2001 From: ek-so Date: Thu, 16 Jan 2025 13:40:47 +0100 Subject: [PATCH 10/11] Format --- .../themes/amsterdam/global_styling/variables/_components.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts index 35fa3e763dd7..0eefc8288b74 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts @@ -241,8 +241,7 @@ const component_colors: _EuiThemeComponentColors = { ['colors.lightShade'] ), loadingSpinnerHighlight: computed( - ([primary]) => primary, - ['colors.primary'] + ([primary]) => primary, ['colors.primary'] ), loadingChartMonoBackground0: computed( From 1b768e78e2455b95441125c2406991ab1fcd8481 Mon Sep 17 00:00:00 2001 From: ek-so Date: Thu, 16 Jan 2025 13:43:19 +0100 Subject: [PATCH 11/11] Format code --- .../themes/amsterdam/global_styling/variables/_components.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts index 0eefc8288b74..64a86d521290 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts @@ -240,9 +240,7 @@ const component_colors: _EuiThemeComponentColors = { ([lightShade]) => lightShade, ['colors.lightShade'] ), - loadingSpinnerHighlight: computed( - ([primary]) => primary, ['colors.primary'] - ), + loadingSpinnerHighlight: computed(([primary]) => primary, ['colors.primary']), loadingChartMonoBackground0: computed( ([lightShade]) => lightShade,