From 1798eed2e1fcbb05489379d507560f75ea3777c0 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Wed, 4 Dec 2024 10:59:44 +0100 Subject: [PATCH 01/22] refactor: remove base semantic colors from theme colors - this was a mistake as those colors are borealis specific and don't exist in amsterdam --- .../eui-theme-borealis/src/variables/colors/_colors_dark.ts | 1 - .../eui-theme-borealis/src/variables/colors/_colors_light.ts | 1 - packages/eui-theme-borealis/src/variables/colors/index.ts | 2 ++ .../eui-theme-common/src/global_styling/variables/colors.ts | 4 ++++ .../src/themes/amsterdam/global_styling/variables/_colors.ts | 2 ++ 5 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts index dd372c8fc61a..c9a209feef11 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts @@ -166,7 +166,6 @@ export const dark_special_colors: _EuiThemeSpecialColors = { }; export const dark_colors: _EuiThemeColorsMode = { - ...SEMANTIC_COLORS, ...dark_brand_colors, ...dark_shades, ...dark_special_colors, diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts index f219df5a310e..4ecfe96f2d9e 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts @@ -166,7 +166,6 @@ export const special_colors: _EuiThemeSpecialColors = { }; export const light_colors: _EuiThemeColorsMode = { - ...SEMANTIC_COLORS, ...brand_colors, ...shade_colors, ...special_colors, diff --git a/packages/eui-theme-borealis/src/variables/colors/index.ts b/packages/eui-theme-borealis/src/variables/colors/index.ts index e59c0fbff876..a6e61366653d 100644 --- a/packages/eui-theme-borealis/src/variables/colors/index.ts +++ b/packages/eui-theme-borealis/src/variables/colors/index.ts @@ -16,6 +16,8 @@ import { colorVis } from './_colors_vis'; export const colors: _EuiThemeColors = { ghost: SEMANTIC_COLORS.plainLight, ink: SEMANTIC_COLORS.plainDark, + plainLight: SEMANTIC_COLORS.plainLight, + plainDark: SEMANTIC_COLORS.plainDark, LIGHT: light_colors, DARK: dark_colors, vis: colorVis, diff --git a/packages/eui-theme-common/src/global_styling/variables/colors.ts b/packages/eui-theme-common/src/global_styling/variables/colors.ts index b0d36f3eab84..71fd768fd938 100644 --- a/packages/eui-theme-common/src/global_styling/variables/colors.ts +++ b/packages/eui-theme-common/src/global_styling/variables/colors.ts @@ -316,6 +316,10 @@ export type _EuiThemeConstantColors = { * @deprecated */ ink: string; + + plainLight: string; + plainDark: string; + vis: _EuiThemeVisColors; }; diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts index 31177267cf5d..d9283eaa16dd 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts @@ -590,6 +590,8 @@ export const dark_colors_ams: _EuiThemeColorsMode = { export const colors: _EuiThemeColors = { ghost: '#FFF', ink: '#000', + plainLight: '#FFF', + plainDark: '#000', LIGHT: light_colors, DARK: dark_colors_ams, vis: colorVis, From 307afaa38da2199730b61d72f26eeae97709fbf2 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Wed, 4 Dec 2024 11:22:56 +0100 Subject: [PATCH 02/22] refactor: update primitive color values --- .../src/variables/colors/_primitive_colors.ts | 48 +++++++++---------- .../variables/colors/_semantic_colors.scss | 48 +++++++++---------- 2 files changed, 48 insertions(+), 48 deletions(-) diff --git a/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts b/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts index 2693e39a52fb..33d6f70f93c8 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts @@ -117,12 +117,12 @@ export const PRIMITIVE_COLORS = { blueGrey140: '#111C2C', blueGrey145: '#0B1628', - blue10: '#E5F3FF', - blue20: '#D6E9FF', - blue30: '#B4D5FF', - blue40: '#96C3FF', - blue50: '#78B0FF', - blue60: '#599DFF', + blue10: '#E8F1FF', + blue20: '#D9E8FF', + blue30: '#BFDBFF', + blue40: '#A3CBFF', + blue50: '#85B7FF', + blue60: '#61A2FF', blue70: '#3788FF', blue80: '#2476F0', blue90: '#0B64DD', @@ -134,10 +134,10 @@ export const PRIMITIVE_COLORS = { teal10: '#E2F9F7', teal20: '#C9F3F0', - teal30: '#98E6E2', - teal40: '#5DD8D2', - teal50: '#2ECCC7', - teal60: '#00BEB8', + teal30: '#A6EDEA', + teal40: '#77E5E0', + teal50: '#51D6D2', + teal60: '#16C5C0', teal70: '#00B0AA', teal80: '#009E99', teal90: '#008B87', @@ -149,10 +149,10 @@ export const PRIMITIVE_COLORS = { pink10: '#FFEBF5', pink20: '#FDDDE9', - pink30: '#FFBED5', - pink40: '#FBA3C4', - pink50: '#F588B3', - pink60: '#ED6BA2', + pink30: '#FFC7DB', + pink40: '#FBADCA', + pink50: '#F58EB7', + pink60: '#EE72A6', pink70: '#E54A91', pink80: '#D13680', pink90: '#BC1E70', @@ -164,10 +164,10 @@ export const PRIMITIVE_COLORS = { green10: '#E2F8F0', green20: '#C9F3E3', - green30: '#9DEDCE', - green40: '#6EDEB7', - green50: '#3ACFA0', - green60: '#23BE8F', + green30: '#AEE8D2', + green40: '#88E3C3', + green50: '#59CFAA', + green60: '#24C292', green70: '#04AE7E', green80: '#00996B', green90: '#008A5E', @@ -179,10 +179,10 @@ export const PRIMITIVE_COLORS = { yellow10: '#FDF3D8', yellow20: '#FDE9B5', - yellow30: '#FCD279', + yellow30: '#FCD883', yellow40: '#FACB3D', yellow50: '#F5BC00', - yellow60: '#E6AB01', + yellow60: '#EAAE01', yellow70: '#CA9601', yellow80: '#AD7E00', yellow90: '#966B03', @@ -194,10 +194,10 @@ export const PRIMITIVE_COLORS = { red10: '#FFE8E5', red20: '#FDDDD8', - red30: '#FFC0B8', - red40: '#FFA59C', - red50: '#FC8A80', - red60: '#F66D64', + red30: '#FFC9C2', + red40: '#FFB5AD', + red50: '#FC9188', + red60: '#F6726A', red70: '#EE4C48', red80: '#DA3737', red90: '#C61E25', diff --git a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss index 5852aebb6f3c..e6496b3d183d 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss @@ -59,12 +59,12 @@ $euiColorTransparentBlueGrey140: rgba(5, 15, 33, 0.92) !default; $euiColorPlainLight: $euiColorWhite !default; $euiColorPlainDark: $euiColorBlueBlack !default; -$euiColorPrimary10: #E5F3FF !default; -$euiColorPrimary20: #D6E9FF !default; -$euiColorPrimary30: #B4D5FF !default; -$euiColorPrimary40: #96C3FF !default; -$euiColorPrimary50: #78B0FF !default; -$euiColorPrimary60: #599DFF !default; +$euiColorPrimary10: #E8F1FF !default; +$euiColorPrimary20: #D9E8FF !default; +$euiColorPrimary30: #BFDBFF !default; +$euiColorPrimary40: #A3CBFF !default; +$euiColorPrimary50: #85B7FF !default; +$euiColorPrimary60: #61A2FF !default; $euiColorPrimary70: #3788FF !default; $euiColorPrimary80: #2476F0 !default; $euiColorPrimary90: #0B64DD !default; @@ -76,10 +76,10 @@ $euiColorPrimary140: #0A2342 !default; $euiColorAccent10: #FFEBF5 !default; $euiColorAccent20: #FDDDE9 !default; -$euiColorAccent30: #FFBED5 !default; -$euiColorAccent40: #FBA3C4 !default; -$euiColorAccent50: #F588B3 !default; -$euiColorAccent60: #ED6BA2 !default; +$euiColorAccent30: #FFC7DB !default; +$euiColorAccent40: #FBADCA !default; +$euiColorAccent50: #F58EB7 !default; +$euiColorAccent60: #EE72A6 !default; $euiColorAccent70: #E54A91 !default; $euiColorAccent80: #D13680 !default; $euiColorAccent90: #BC1E70 !default; @@ -91,10 +91,10 @@ $euiColorAccent140: #351725 !default; $euiColorAccentSecondary10: #E2F9F7 !default; $euiColorAccentSecondary20: #C9F3F0 !default; -$euiColorAccentSecondary30: #98E6E2 !default; -$euiColorAccentSecondary40: #5DD8D2 !default; -$euiColorAccentSecondary50: #2ECCC7 !default; -$euiColorAccentSecondary60: #00BEB8 !default; +$euiColorAccentSecondary30: #A6EDEA !default; +$euiColorAccentSecondary40: #77E5E0 !default; +$euiColorAccentSecondary50: #51D6D2 !default; +$euiColorAccentSecondary60: #16C5C0 !default; $euiColorAccentSecondary70: #00B0AA !default; $euiColorAccentSecondary80: #009E99 !default; $euiColorAccentSecondary90: #008B87 !default; @@ -106,10 +106,10 @@ $euiColorAccentSecondary140: #03282B !default; $euiColorSuccess10: #E2F8F0 !default; $euiColorSuccess20: #C9F3E3 !default; -$euiColorSuccess30: #9DEDCE !default; -$euiColorSuccess40: #6EDEB7 !default; -$euiColorSuccess50: #3ACFA0 !default; -$euiColorSuccess60: #23BE8F !default; +$euiColorSuccess30: #AEE8D2 !default; +$euiColorSuccess40: #88E3C3 !default; +$euiColorSuccess50: #59CFAA !default; +$euiColorSuccess60: #24C292 !default; $euiColorSuccess70: #04AE7E !default; $euiColorSuccess80: #00996B !default; $euiColorSuccess90: #008A5E !default; @@ -121,10 +121,10 @@ $euiColorSuccess140: #092A26 !default; $euiColorWarning10: #FDF3D8 !default; $euiColorWarning20: #FDE9B5 !default; -$euiColorWarning30: #FCD279 !default; +$euiColorWarning30: #FCD883 !default; $euiColorWarning40: #FACB3D !default; $euiColorWarning50: #F5BC00 !default; -$euiColorWarning60: #E6AB01 !default; +$euiColorWarning60: #EAAE01 !default; $euiColorWarning70: #CA9601 !default; $euiColorWarning80: #AD7E00 !default; $euiColorWarning90: #966B03 !default; @@ -136,10 +136,10 @@ $euiColorWarning140: #2C2721 !default; $euiColorDanger10: #FFE8E5 !default; $euiColorDanger20: #FDDDD8 !default; -$euiColorDanger30: #FFC0B8 !default; -$euiColorDanger40: #FFA59C !default; -$euiColorDanger50: #FC8A80 !default; -$euiColorDanger60: #F66D64 !default; +$euiColorDanger30: #FFC9C2 !default; +$euiColorDanger40: #FFB5AD !default; +$euiColorDanger50: #FC9188 !default; +$euiColorDanger60: #F6726A !default; $euiColorDanger70: #EE4C48 !default; $euiColorDanger80: #DA3737 !default; $euiColorDanger90: #C61E25 !default; From 50ef8064cf7523c3dfcaf0e01b8b8a61f1d6bc29 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Thu, 5 Dec 2024 14:27:25 +0100 Subject: [PATCH 03/22] refactor: update legacy JSON token values --- .../src/eui_theme_borealis_dark.json | 120 +++++++++--------- .../src/eui_theme_borealis_light.json | 80 ++++++------ .../theme/_json/eui_theme_borealis_dark.json | 120 +++++++++--------- .../theme/_json/eui_theme_borealis_light.json | 80 ++++++------ 4 files changed, 200 insertions(+), 200 deletions(-) diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json index 37c668610c40..8bdfb30f0658 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json @@ -36,78 +36,78 @@ "euiButtonColorDisabledText": "#6A7FA0", "euiButtonColorGhostDisabled": "#1D2A3E", "euiButtonTypes": { - "primary": "#599DFF", - "accent": "#ED6BA2", - "accentSecondary": "#00BEB8", - "success": "#23BE8F", - "warning": "#FCD279", - "danger": "#F66D64", + "primary": "#61A2FF", + "accent": "#EE72A6", + "accentSecondary": "#16C5C0", + "success": "#24C292", + "warning": "#FCD883", + "danger": "#F6726A", "ghost": "#07101F", "text": "#8E9FBC" }, "euiPaletteColorBlind": { "euiColorVis0": { - "graphic": "#00BEB8", - "behindText": "#00BEB8" + "graphic": "#16C5C0", + "behindText": "#16C5C0" }, "euiColorVis1": { - "graphic": "#98E6E2", - "behindText": "#98E6E2" + "graphic": "#A6EDEA", + "behindText": "#A6EDEA" }, "euiColorVis2": { - "graphic": "#599DFF", - "behindText": "#599DFF" + "graphic": "#61A2FF", + "behindText": "#61A2FF" }, "euiColorVis3": { - "graphic": "#B4D5FF", - "behindText": "#B4D5FF" + "graphic": "#BFDBFF", + "behindText": "#BFDBFF" }, "euiColorVis4": { - "graphic": "#ED6BA2", - "behindText": "#ED6BA2" + "graphic": "#EE72A6", + "behindText": "#EE72A6" }, "euiColorVis5": { - "graphic": "#FFBED5", - "behindText": "#FFBED5" + "graphic": "#FFC7DB", + "behindText": "#FFC7DB" }, "euiColorVis6": { - "graphic": "#F66D64", - "behindText": "#F66D64" + "graphic": "#F6726A", + "behindText": "#F6726A" }, "euiColorVis7": { - "graphic": "#FFC0B8", - "behindText": "#FFC0B8" + "graphic": "#FFC9C2", + "behindText": "#FFC9C2" }, "euiColorVis8": { - "graphic": "#E6AB01", - "behindText": "#E6AB01" + "graphic": "#EAAE01", + "behindText": "#EAAE01" }, "euiColorVis9": { - "graphic": "#FCD279", - "behindText": "#FCD279" + "graphic": "#FCD883", + "behindText": "#FCD883" } }, "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'", - "euiColorVis0": "#00BEB8", - "euiColorVis1": "#98E6E2", - "euiColorVis2": "#599DFF", - "euiColorVis3": "#B4D5FF", - "euiColorVis4": "#ED6BA2", - "euiColorVis5": "#FFBED5", - "euiColorVis6": "#F66D64", - "euiColorVis7": "#FFC0B8", - "euiColorVis8": "#E6AB01", - "euiColorVis9": "#FCD279", - "euiColorVis0_behindText": "#00BEB8", - "euiColorVis1_behindText": "#98E6E2", - "euiColorVis2_behindText": "#599DFF", - "euiColorVis3_behindText": "#B4D5FF", - "euiColorVis4_behindText": "#ED6BA2", - "euiColorVis5_behindText": "#FFBED5", - "euiColorVis6_behindText": "#F66D64", - "euiColorVis7_behindText": "#FFC0B8", - "euiColorVis8_behindText": "#E6AB01", - "euiColorVis9_behindText": "#FCD279", + "euiColorVis0": "#16C5C0", + "euiColorVis1": "#A6EDEA", + "euiColorVis2": "#61A2FF", + "euiColorVis3": "#BFDBFF", + "euiColorVis4": "#EE72A6", + "euiColorVis5": "#FFC7DB", + "euiColorVis6": "#F6726A", + "euiColorVis7": "#FFC9C2", + "euiColorVis8": "#EAAE01", + "euiColorVis9": "#FCD883", + "euiColorVis0_behindText": "#16C5C0", + "euiColorVis1_behindText": "#A6EDEA", + "euiColorVis2_behindText": "#61A2FF", + "euiColorVis3_behindText": "#BFDBFF", + "euiColorVis4_behindText": "#EE72A6", + "euiColorVis5_behindText": "#FFC7DB", + "euiColorVis6_behindText": "#F6726A", + "euiColorVis7_behindText": "#FFC9C2", + "euiColorVis8_behindText": "#EAAE01", + "euiColorVis9_behindText": "#FCD883", "euiFontWeightLight": 300, "euiFontWeightRegular": 400, "euiFontWeightMedium": 450, @@ -207,7 +207,7 @@ "euiScrollBar": "16px", "euiScrollBarCorner": "4px", "euiScrollBarCornerThin": "6px", - "euiFocusRingColor": "#599DFF", + "euiFocusRingColor": "#61A2FF", "euiFocusRingAnimStartColor": "rgba(0, 0, 0, 0)", "euiFocusRingAnimStartSize": "2px", "euiFocusRingAnimStartSizeLarge": "10px", @@ -282,12 +282,12 @@ "euiZContent": 0, "euiColorGhost": "#FFFFFF", "euiColorInk": "#000000", - "euiColorPrimary": "#599DFF", - "euiColorAccent": "#ED6BA2", - "euiColorAccentSecondary": "#00BEB8", - "euiColorSuccess": "#23BE8F", - "euiColorWarning": "#FCD279", - "euiColorDanger": "#F66D64", + "euiColorPrimary": "#61A2FF", + "euiColorAccent": "#EE72A6", + "euiColorAccentSecondary": "#16C5C0", + "euiColorSuccess": "#24C292", + "euiColorWarning": "#FCD883", + "euiColorDanger": "#F6726A", "euiColorEmptyShade": "#0B1628", "euiColorLightestShade": "#172336", "euiColorLightShade": "#243147", @@ -301,14 +301,14 @@ "euiTitleColor": "#ECF1F9", "euiTextSubduedColor": "#8E9FBC", "euiColorDisabled": "#1D2A3E", - "euiColorPrimaryText": "#599DFF", - "euiColorSuccessText": "#23BE8F", - "euiColorAccentText": "#ED6BA2", - "euiColorAccentSecondaryText": "#00BEB8", - "euiColorWarningText": "#FCD279", - "euiColorDangerText": "#F66D64", + "euiColorPrimaryText": "#61A2FF", + "euiColorSuccessText": "#24C292", + "euiColorAccentText": "#EE72A6", + "euiColorAccentSecondaryText": "#16C5C0", + "euiColorWarningText": "#FCD883", + "euiColorDangerText": "#F6726A", "euiColorDisabledText": "#6A7FA0", - "euiLinkColor": "#599DFF", + "euiLinkColor": "#61A2FF", "euiColorChartLines": "#7186A8", "euiColorChartBand": "#243147" } diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json index 25537e2d6d9d..1a0a3a6219ae 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json @@ -47,67 +47,67 @@ }, "euiPaletteColorBlind": { "euiColorVis0": { - "graphic": "#00BEB8", - "behindText": "#00BEB8" + "graphic": "#16C5C0", + "behindText": "#16C5C0" }, "euiColorVis1": { "graphic": "#98E6E2", "behindText": "#98E6E2" }, "euiColorVis2": { - "graphic": "#599DFF", - "behindText": "#599DFF" + "graphic": "#61A2FF", + "behindText": "#61A2FF" }, "euiColorVis3": { - "graphic": "#B4D5FF", - "behindText": "#B4D5FF" + "graphic": "#BFDBFF", + "behindText": "#BFDBFF" }, "euiColorVis4": { - "graphic": "#ED6BA2", - "behindText": "#ED6BA2" + "graphic": "#EE72A6", + "behindText": "#EE72A6" }, "euiColorVis5": { - "graphic": "#FFBED5", - "behindText": "#FFBED5" + "graphic": "#FFC7DB", + "behindText": "#FFC7DB" }, "euiColorVis6": { - "graphic": "#F66D64", - "behindText": "#F66D64" + "graphic": "#F6726A", + "behindText": "#F6726A" }, "euiColorVis7": { - "graphic": "#FFC0B8", - "behindText": "#FFC0B8" + "graphic": "#FFC9C2", + "behindText": "#FFC9C2" }, "euiColorVis8": { - "graphic": "#E6AB01", - "behindText": "#E6AB01" + "graphic": "#EAAE01", + "behindText": "#EAAE01" }, "euiColorVis9": { - "graphic": "#FCD279", - "behindText": "#FCD279" + "graphic": "#FCD883", + "behindText": "#FCD883" } }, "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'", - "euiColorVis0": "#00BEB8", - "euiColorVis1": "#98E6E2", - "euiColorVis2": "#599DFF", - "euiColorVis3": "#B4D5FF", - "euiColorVis4": "#ED6BA2", - "euiColorVis5": "#FFBED5", - "euiColorVis6": "#F66D64", - "euiColorVis7": "#FFC0B8", - "euiColorVis8": "#E6AB01", - "euiColorVis9": "#FCD279", - "euiColorVis0_behindText": "#00BEB8", - "euiColorVis1_behindText": "#98E6E2", - "euiColorVis2_behindText": "#599DFF", + "euiColorVis0": "#16C5C0", + "euiColorVis1": "#A6EDEA", + "euiColorVis2": "#61A2FF", + "euiColorVis3": "#BFDBFF", + "euiColorVis4": "#EE72A6", + "euiColorVis5": "#FFC7DB", + "euiColorVis6": "#F6726A", + "euiColorVis7": "#FFC9C2", + "euiColorVis8": "#EAAE01", + "euiColorVis9": "#FCD883", + "euiColorVis0_behindText": "#16C5C0", + "euiColorVis1_behindText": "#A6EDEA", + "euiColorVis2_behindText": "#61A2FF", "euiColorVis3_behindText": "#B4D5FF", - "euiColorVis4_behindText": "#ED6BA2", - "euiColorVis5_behindText": "#FFBED5", - "euiColorVis6_behindText": "#F66D64", - "euiColorVis7_behindText": "#FFC0B8", - "euiColorVis8_behindText": "#E6AB01", - "euiColorVis9_behindText": "#FCD279", + "euiColorVis4_behindText": "#EE72A6", + "euiColorVis5_behindText": "#FFC7DB", + "euiColorVis6_behindText": "#F6726A", + "euiColorVis7_behindText": "#FFC9C2", + "euiColorVis8_behindText": "#EAAE01", + "euiColorVis9_behindText": "#FCD883", "euiFontWeightLight": 300, "euiFontWeightRegular": 400, "euiFontWeightMedium": 450, @@ -162,7 +162,7 @@ "euiHeaderBackgroundColor": "#FFFFFF", "euiHeaderDarkBackgroundColor": "#0B1628", "euiHeaderBorderColor": "#E3E8F2", - "euiHeaderBreadcrumbColor": "#D6E9FF", + "euiHeaderBreadcrumbColor": "#D9E8FF", "euiHeaderHeight": "48px", "euiHeaderChildSize": "40px", "euiHeaderHeightCompensation": "48px", @@ -183,7 +183,7 @@ "subdued": "#F6F9FC", "accent": "#FFEBF5", "accentSecondary": "#E2F9F7", - "primary": "#E5F3FF", + "primary": "#E8F1FF", "success": "#E2F8F0", "warning": "#FDF3D8", "danger": "#FFE8E5" @@ -296,7 +296,7 @@ "euiColorDarkestShade": "#2B394F", "euiColorFullShade": "#07101F", "euiPageBackgroundColor": "#F6F9FC", - "euiColorHighlight": "#E5F3FF", + "euiColorHighlight": "#E8F1FF", "euiTextColor": "#172336", "euiTitleColor": "#111C2C", "euiTextSubduedColor": "#5A6D8C", diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json index 37c668610c40..8bdfb30f0658 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json @@ -36,78 +36,78 @@ "euiButtonColorDisabledText": "#6A7FA0", "euiButtonColorGhostDisabled": "#1D2A3E", "euiButtonTypes": { - "primary": "#599DFF", - "accent": "#ED6BA2", - "accentSecondary": "#00BEB8", - "success": "#23BE8F", - "warning": "#FCD279", - "danger": "#F66D64", + "primary": "#61A2FF", + "accent": "#EE72A6", + "accentSecondary": "#16C5C0", + "success": "#24C292", + "warning": "#FCD883", + "danger": "#F6726A", "ghost": "#07101F", "text": "#8E9FBC" }, "euiPaletteColorBlind": { "euiColorVis0": { - "graphic": "#00BEB8", - "behindText": "#00BEB8" + "graphic": "#16C5C0", + "behindText": "#16C5C0" }, "euiColorVis1": { - "graphic": "#98E6E2", - "behindText": "#98E6E2" + "graphic": "#A6EDEA", + "behindText": "#A6EDEA" }, "euiColorVis2": { - "graphic": "#599DFF", - "behindText": "#599DFF" + "graphic": "#61A2FF", + "behindText": "#61A2FF" }, "euiColorVis3": { - "graphic": "#B4D5FF", - "behindText": "#B4D5FF" + "graphic": "#BFDBFF", + "behindText": "#BFDBFF" }, "euiColorVis4": { - "graphic": "#ED6BA2", - "behindText": "#ED6BA2" + "graphic": "#EE72A6", + "behindText": "#EE72A6" }, "euiColorVis5": { - "graphic": "#FFBED5", - "behindText": "#FFBED5" + "graphic": "#FFC7DB", + "behindText": "#FFC7DB" }, "euiColorVis6": { - "graphic": "#F66D64", - "behindText": "#F66D64" + "graphic": "#F6726A", + "behindText": "#F6726A" }, "euiColorVis7": { - "graphic": "#FFC0B8", - "behindText": "#FFC0B8" + "graphic": "#FFC9C2", + "behindText": "#FFC9C2" }, "euiColorVis8": { - "graphic": "#E6AB01", - "behindText": "#E6AB01" + "graphic": "#EAAE01", + "behindText": "#EAAE01" }, "euiColorVis9": { - "graphic": "#FCD279", - "behindText": "#FCD279" + "graphic": "#FCD883", + "behindText": "#FCD883" } }, "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'", - "euiColorVis0": "#00BEB8", - "euiColorVis1": "#98E6E2", - "euiColorVis2": "#599DFF", - "euiColorVis3": "#B4D5FF", - "euiColorVis4": "#ED6BA2", - "euiColorVis5": "#FFBED5", - "euiColorVis6": "#F66D64", - "euiColorVis7": "#FFC0B8", - "euiColorVis8": "#E6AB01", - "euiColorVis9": "#FCD279", - "euiColorVis0_behindText": "#00BEB8", - "euiColorVis1_behindText": "#98E6E2", - "euiColorVis2_behindText": "#599DFF", - "euiColorVis3_behindText": "#B4D5FF", - "euiColorVis4_behindText": "#ED6BA2", - "euiColorVis5_behindText": "#FFBED5", - "euiColorVis6_behindText": "#F66D64", - "euiColorVis7_behindText": "#FFC0B8", - "euiColorVis8_behindText": "#E6AB01", - "euiColorVis9_behindText": "#FCD279", + "euiColorVis0": "#16C5C0", + "euiColorVis1": "#A6EDEA", + "euiColorVis2": "#61A2FF", + "euiColorVis3": "#BFDBFF", + "euiColorVis4": "#EE72A6", + "euiColorVis5": "#FFC7DB", + "euiColorVis6": "#F6726A", + "euiColorVis7": "#FFC9C2", + "euiColorVis8": "#EAAE01", + "euiColorVis9": "#FCD883", + "euiColorVis0_behindText": "#16C5C0", + "euiColorVis1_behindText": "#A6EDEA", + "euiColorVis2_behindText": "#61A2FF", + "euiColorVis3_behindText": "#BFDBFF", + "euiColorVis4_behindText": "#EE72A6", + "euiColorVis5_behindText": "#FFC7DB", + "euiColorVis6_behindText": "#F6726A", + "euiColorVis7_behindText": "#FFC9C2", + "euiColorVis8_behindText": "#EAAE01", + "euiColorVis9_behindText": "#FCD883", "euiFontWeightLight": 300, "euiFontWeightRegular": 400, "euiFontWeightMedium": 450, @@ -207,7 +207,7 @@ "euiScrollBar": "16px", "euiScrollBarCorner": "4px", "euiScrollBarCornerThin": "6px", - "euiFocusRingColor": "#599DFF", + "euiFocusRingColor": "#61A2FF", "euiFocusRingAnimStartColor": "rgba(0, 0, 0, 0)", "euiFocusRingAnimStartSize": "2px", "euiFocusRingAnimStartSizeLarge": "10px", @@ -282,12 +282,12 @@ "euiZContent": 0, "euiColorGhost": "#FFFFFF", "euiColorInk": "#000000", - "euiColorPrimary": "#599DFF", - "euiColorAccent": "#ED6BA2", - "euiColorAccentSecondary": "#00BEB8", - "euiColorSuccess": "#23BE8F", - "euiColorWarning": "#FCD279", - "euiColorDanger": "#F66D64", + "euiColorPrimary": "#61A2FF", + "euiColorAccent": "#EE72A6", + "euiColorAccentSecondary": "#16C5C0", + "euiColorSuccess": "#24C292", + "euiColorWarning": "#FCD883", + "euiColorDanger": "#F6726A", "euiColorEmptyShade": "#0B1628", "euiColorLightestShade": "#172336", "euiColorLightShade": "#243147", @@ -301,14 +301,14 @@ "euiTitleColor": "#ECF1F9", "euiTextSubduedColor": "#8E9FBC", "euiColorDisabled": "#1D2A3E", - "euiColorPrimaryText": "#599DFF", - "euiColorSuccessText": "#23BE8F", - "euiColorAccentText": "#ED6BA2", - "euiColorAccentSecondaryText": "#00BEB8", - "euiColorWarningText": "#FCD279", - "euiColorDangerText": "#F66D64", + "euiColorPrimaryText": "#61A2FF", + "euiColorSuccessText": "#24C292", + "euiColorAccentText": "#EE72A6", + "euiColorAccentSecondaryText": "#16C5C0", + "euiColorWarningText": "#FCD883", + "euiColorDangerText": "#F6726A", "euiColorDisabledText": "#6A7FA0", - "euiLinkColor": "#599DFF", + "euiLinkColor": "#61A2FF", "euiColorChartLines": "#7186A8", "euiColorChartBand": "#243147" } diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json index 25537e2d6d9d..1a0a3a6219ae 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json @@ -47,67 +47,67 @@ }, "euiPaletteColorBlind": { "euiColorVis0": { - "graphic": "#00BEB8", - "behindText": "#00BEB8" + "graphic": "#16C5C0", + "behindText": "#16C5C0" }, "euiColorVis1": { "graphic": "#98E6E2", "behindText": "#98E6E2" }, "euiColorVis2": { - "graphic": "#599DFF", - "behindText": "#599DFF" + "graphic": "#61A2FF", + "behindText": "#61A2FF" }, "euiColorVis3": { - "graphic": "#B4D5FF", - "behindText": "#B4D5FF" + "graphic": "#BFDBFF", + "behindText": "#BFDBFF" }, "euiColorVis4": { - "graphic": "#ED6BA2", - "behindText": "#ED6BA2" + "graphic": "#EE72A6", + "behindText": "#EE72A6" }, "euiColorVis5": { - "graphic": "#FFBED5", - "behindText": "#FFBED5" + "graphic": "#FFC7DB", + "behindText": "#FFC7DB" }, "euiColorVis6": { - "graphic": "#F66D64", - "behindText": "#F66D64" + "graphic": "#F6726A", + "behindText": "#F6726A" }, "euiColorVis7": { - "graphic": "#FFC0B8", - "behindText": "#FFC0B8" + "graphic": "#FFC9C2", + "behindText": "#FFC9C2" }, "euiColorVis8": { - "graphic": "#E6AB01", - "behindText": "#E6AB01" + "graphic": "#EAAE01", + "behindText": "#EAAE01" }, "euiColorVis9": { - "graphic": "#FCD279", - "behindText": "#FCD279" + "graphic": "#FCD883", + "behindText": "#FCD883" } }, "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'", - "euiColorVis0": "#00BEB8", - "euiColorVis1": "#98E6E2", - "euiColorVis2": "#599DFF", - "euiColorVis3": "#B4D5FF", - "euiColorVis4": "#ED6BA2", - "euiColorVis5": "#FFBED5", - "euiColorVis6": "#F66D64", - "euiColorVis7": "#FFC0B8", - "euiColorVis8": "#E6AB01", - "euiColorVis9": "#FCD279", - "euiColorVis0_behindText": "#00BEB8", - "euiColorVis1_behindText": "#98E6E2", - "euiColorVis2_behindText": "#599DFF", + "euiColorVis0": "#16C5C0", + "euiColorVis1": "#A6EDEA", + "euiColorVis2": "#61A2FF", + "euiColorVis3": "#BFDBFF", + "euiColorVis4": "#EE72A6", + "euiColorVis5": "#FFC7DB", + "euiColorVis6": "#F6726A", + "euiColorVis7": "#FFC9C2", + "euiColorVis8": "#EAAE01", + "euiColorVis9": "#FCD883", + "euiColorVis0_behindText": "#16C5C0", + "euiColorVis1_behindText": "#A6EDEA", + "euiColorVis2_behindText": "#61A2FF", "euiColorVis3_behindText": "#B4D5FF", - "euiColorVis4_behindText": "#ED6BA2", - "euiColorVis5_behindText": "#FFBED5", - "euiColorVis6_behindText": "#F66D64", - "euiColorVis7_behindText": "#FFC0B8", - "euiColorVis8_behindText": "#E6AB01", - "euiColorVis9_behindText": "#FCD279", + "euiColorVis4_behindText": "#EE72A6", + "euiColorVis5_behindText": "#FFC7DB", + "euiColorVis6_behindText": "#F6726A", + "euiColorVis7_behindText": "#FFC9C2", + "euiColorVis8_behindText": "#EAAE01", + "euiColorVis9_behindText": "#FCD883", "euiFontWeightLight": 300, "euiFontWeightRegular": 400, "euiFontWeightMedium": 450, @@ -162,7 +162,7 @@ "euiHeaderBackgroundColor": "#FFFFFF", "euiHeaderDarkBackgroundColor": "#0B1628", "euiHeaderBorderColor": "#E3E8F2", - "euiHeaderBreadcrumbColor": "#D6E9FF", + "euiHeaderBreadcrumbColor": "#D9E8FF", "euiHeaderHeight": "48px", "euiHeaderChildSize": "40px", "euiHeaderHeightCompensation": "48px", @@ -183,7 +183,7 @@ "subdued": "#F6F9FC", "accent": "#FFEBF5", "accentSecondary": "#E2F9F7", - "primary": "#E5F3FF", + "primary": "#E8F1FF", "success": "#E2F8F0", "warning": "#FDF3D8", "danger": "#FFE8E5" @@ -296,7 +296,7 @@ "euiColorDarkestShade": "#2B394F", "euiColorFullShade": "#07101F", "euiPageBackgroundColor": "#F6F9FC", - "euiColorHighlight": "#E5F3FF", + "euiColorHighlight": "#E8F1FF", "euiTextColor": "#172336", "euiTitleColor": "#111C2C", "euiTextSubduedColor": "#5A6D8C", From eb67a851a3668d12e22ab61d5dd58a1091585fd5 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Thu, 5 Dec 2024 16:28:16 +0100 Subject: [PATCH 04/22] refactor: remove transparent scales, add specific transparent semantic tokens instead --- .../src/variables/colors/_colors_dark.scss | 10 +- .../src/variables/colors/_colors_dark.ts | 12 +-- .../src/variables/colors/_colors_light.scss | 14 +-- .../src/variables/colors/_colors_light.ts | 14 +-- .../src/variables/colors/_primitive_colors.ts | 48 +--------- .../variables/colors/_semantic_colors.scss | 94 +++++++------------ .../src/variables/colors/_semantic_colors.ts | 47 +++++++--- 7 files changed, 93 insertions(+), 146 deletions(-) diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss index 9a6c67e28588..30e6d2a94cbc 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss @@ -42,11 +42,11 @@ $euiColorBackgroundBaseDisabled: $euiColorShade130 !default; $euiColorBackgroundBaseFormsPrepend: $euiColorShade125 !default; $euiColorBackgroundBaseFormsControlDisabled: $euiColorShade120 !default; -$euiColorBackgroundBaseInteractiveHover: $euiColorTransparentWhite10 !default; +$euiColorBackgroundBaseInteractiveHover: $euiColorPlainLightAlpha6 !default; $euiColorBackgroundBaseInteractiveSelect: $euiColorShade125 !default; -$euiColorBackgroundBaseInteractiveOverlay: $euiColorShadeTransparent80 !default; -$euiColorBackgroundBaseSkeletonEdge: $euiColorTransparentWhite10 !default; -$euiColorBackgroundBaseSkeletonMiddle: $euiColorTransparentWhite30 !default; +$euiColorBackgroundBaseInteractiveOverlay: $euiColorShade120Alpha70 !default; +$euiColorBackgroundBaseSkeletonEdge: $euiColorPlainLightAlpha16 !default; +$euiColorBackgroundBaseSkeletonMiddle: $euiColorPlainLightAlpha6 !default; $euiColorBackgroundLightPrimary: $euiColorPrimary130 !default; $euiColorBackgroundLightAccent: $euiColorAccent130 !default; @@ -106,7 +106,7 @@ $euiColorBorderBasePlain: $euiColorShade100; $euiColorBorderBaseSubdued: $euiColorShade120; $euiColorBorderBaseDisabled: $euiColorShade100; $euiColorBorderBaseFloating: $euiColorShade120; -$euiColorBorderBaseFormsColorSwatch: $euiColorTransparentWhite30; +$euiColorBorderBaseFormsColorSwatch: $euiColorPlainLightAlpha32; $euiColorBorderBaseFormsControl: $euiColorShade80; $euiColorStrongBasePrimary: $euiColorPrimary60; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts index c9a209feef11..ce1ccee133a0 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts @@ -90,12 +90,12 @@ export const dark_background_colors: _EuiThemeBackgroundColors = { backgroundBaseFormsPrepend: SEMANTIC_COLORS.shade125, backgroundBaseFormsControlDisabled: SEMANTIC_COLORS.shade120, - backgroundBaseInteractiveHover: PRIMITIVE_COLORS.transparent.white10, + backgroundBaseInteractiveHover: SEMANTIC_COLORS.plainLightAlpha6, backgroundBaseInteractiveSelect: SEMANTIC_COLORS.shade125, - backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shadeTransparent80, + backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shade120Alpha70, - backgroundBaseSkeletonEdge: PRIMITIVE_COLORS.transparent.white30, - backgroundBaseSkeletonMiddle: PRIMITIVE_COLORS.transparent.white10, + backgroundBaseSkeletonEdge: SEMANTIC_COLORS.plainLightAlpha16, + backgroundBaseSkeletonMiddle: SEMANTIC_COLORS.plainLightAlpha6, backgroundLightPrimary: SEMANTIC_COLORS.primary130, backgroundLightAccent: SEMANTIC_COLORS.accent130, @@ -121,7 +121,7 @@ export const dark_background_colors: _EuiThemeBackgroundColors = { */ export const dark_transparent_background_colors: _EuiThemeTransparentBackgroundColors = { - backgroundTransparent: PRIMITIVE_COLORS.transparent.white0, + backgroundTransparent: PRIMITIVE_COLORS.transparent, backgroundTransparentPrimary: dark_background_colors.backgroundBasePrimary, backgroundTransparentAccent: dark_background_colors.backgroundBaseAccent, backgroundTransparentAccentSecondary: @@ -146,7 +146,7 @@ export const dark_border_colors: _EuiThemeBorderColors = { borderBaseDisabled: SEMANTIC_COLORS.shade100, borderBaseFloating: SEMANTIC_COLORS.shade120, - borderBaseFormsColorSwatch: PRIMITIVE_COLORS.transparent.white30, + borderBaseFormsColorSwatch: SEMANTIC_COLORS.plainLightAlpha32, borderBaseFormsControl: SEMANTIC_COLORS.shade80, borderStrongPrimary: SEMANTIC_COLORS.primary60, diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss index 4314e654af55..f0e30001492d 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss @@ -43,11 +43,11 @@ $euiColorBackgroundBaseDisabled: $euiColorShade15 !default; $euiColorBackgroundBaseFormsPrepend: $euiColorShade15 !default; $euiColorBackgroundBaseFormsControlDisabled: $euiColorShade30 !default; -$euiColorBackgroundBaseInteractiveHover: $euiColorShadeTransparent10 !default; +$euiColorBackgroundBaseInteractiveHover: $euiColorPrimary100Alpha4 !default; $euiColorBackgroundBaseInteractiveSelect: $euiColorShade15 !default; -$euiColorBackgroundBaseInteractiveOverlay: $euiColorShadeTransparent80 !default; -$euiColorBackgroundBaseSkeletonEdge: $euiColorShadeTransparent30 !default; -$euiColorBackgroundBaseSkeletonMiddle: $euiColorShadeTransparent10 !default; +$euiColorBackgroundBaseInteractiveOverlay: $euiColorShade100Alpha70 !default; +$euiColorBackgroundBaseSkeletonEdge: $euiColorShade100Alpha16 !default; +$euiColorBackgroundBaseSkeletonMiddle: $euiColorShade100Alpha4 !default; $euiColorBackgroundLightPrimary: $euiColorPrimary20 !default; $euiColorBackgroundLightAccent: $euiColorAccent20 !default; @@ -61,7 +61,7 @@ $euiColorBackgroundFilledPrimary: $euiColorPrimary90 !default; $euiColorBackgroundFilledAccent: $euiColorAccent90 !default; $euiColorBackgroundFilledAccentSecondary: $euiColorAccentSecondary90 !default; $euiColorBackgroundFilledSuccess: $euiColorSuccess90 !default; -$euiColorBackgroundFilledWarning: $euiColorWarning90 !default; +$euiColorBackgroundFilledWarning: $euiColorWarning40 !default; $euiColorBackgroundFilledDanger: $euiColorDanger90 !default; $euiColorBackgroundFilledText: $euiColorShade90 !default; @@ -106,9 +106,9 @@ $euiColorBorderBaseDanger: $euiColorDanger30; $euiColorBorderBasePlain: $euiColorShade30; $euiColorBorderBaseSubdued: $euiColorShade20; $euiColorBorderBaseDisabled: $euiColorShade30; -$euiColorBorderBaseFloating: $euiColorTransparentWhite0; +$euiColorBorderBaseFloating: $euiColorTransparent; -$euiColorBorderBaseFormsColorSwatch: $euiColorShadeTransparent30; +$euiColorBorderBaseFormsColorSwatch: $euiColorShade100Alpha24; $euiColorBorderBaseFormsControl: $euiColorShade60; $euiColorBorderStrongPrimary: $euiColorPrimary100; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts index 4ecfe96f2d9e..8cc92e047e00 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts @@ -90,12 +90,12 @@ export const background_colors: _EuiThemeBackgroundColors = { backgroundBaseFormsPrepend: SEMANTIC_COLORS.shade15, backgroundBaseFormsControlDisabled: SEMANTIC_COLORS.shade30, - backgroundBaseInteractiveHover: SEMANTIC_COLORS.shadeTransparent10, + backgroundBaseInteractiveHover: SEMANTIC_COLORS.primary100Alpha4, backgroundBaseInteractiveSelect: SEMANTIC_COLORS.shade15, - backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shadeTransparent80, + backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shade100Alpha70, - backgroundBaseSkeletonEdge: SEMANTIC_COLORS.shadeTransparent30, - backgroundBaseSkeletonMiddle: SEMANTIC_COLORS.shadeTransparent10, + backgroundBaseSkeletonEdge: SEMANTIC_COLORS.shade100Alpha16, + backgroundBaseSkeletonMiddle: SEMANTIC_COLORS.shade100Alpha4, backgroundLightPrimary: SEMANTIC_COLORS.primary20, backgroundLightAccent: SEMANTIC_COLORS.accent20, @@ -121,7 +121,7 @@ export const background_colors: _EuiThemeBackgroundColors = { */ export const transparent_background_colors: _EuiThemeTransparentBackgroundColors = { - backgroundTransparent: PRIMITIVE_COLORS.transparent.white0, + backgroundTransparent: PRIMITIVE_COLORS.transparent, backgroundTransparentPrimary: background_colors.backgroundBasePrimary, backgroundTransparentAccent: background_colors.backgroundBaseAccent, backgroundTransparentAccentSecondary: @@ -144,9 +144,9 @@ export const border_colors: _EuiThemeBorderColors = { borderBasePlain: SEMANTIC_COLORS.shade30, borderBaseSubdued: SEMANTIC_COLORS.shade20, borderBaseDisabled: SEMANTIC_COLORS.shade30, - borderBaseFloating: PRIMITIVE_COLORS.transparent.white0, + borderBaseFloating: PRIMITIVE_COLORS.transparent, - borderBaseFormsColorSwatch: SEMANTIC_COLORS.shadeTransparent30, + borderBaseFormsColorSwatch: SEMANTIC_COLORS.shade100Alpha24, borderBaseFormsControl: SEMANTIC_COLORS.shade60, borderStrongPrimary: SEMANTIC_COLORS.primary100, diff --git a/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts b/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts index 33d6f70f93c8..128d145f947b 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts @@ -11,53 +11,7 @@ export const PRIMITIVE_COLORS = { black: '#000000', mutedBlack: '#0E0F12', blueBlack: '#07101F', - transparent: { - white0: 'transparent', - white10: 'rgba(255, 255, 255, 0.06)', - white20: 'rgba(255, 255, 255, 0.10)', - white30: 'rgba(255, 255, 255, 0.16)', - white40: 'rgba(255, 255, 255, 0.22)', - white50: 'rgba(255, 255, 255, 0.28)', - white60: 'rgba(255, 255, 255, 0.34)', - white70: 'rgba(255, 255, 255, 0.42)', - white80: 'rgba(255, 255, 255, 0.50)', - white90: 'rgba(255, 255, 255, 0.58)', - white100: 'rgba(255, 255, 255, 0.66)', - white110: 'rgba(255, 255, 255, 0.74)', - white120: 'rgba(255, 255, 255, 0.8)', - white130: 'rgba(255, 255, 255, 0.84)', - white140: 'rgba(255, 255, 255, 0.88)', - - mutedGrey10: 'rgba(54, 95, 178, 0.06)', - mutedGrey20: 'rgba(50, 88, 163, 0.10)', - mutedGrey30: 'rgba(44, 75, 138, 0.15)', - mutedGrey40: 'rgba(37, 60, 111, 0.19)', - mutedGrey50: 'rgba(31, 48, 84, 0.24)', - mutedGrey60: 'rgba(24, 35, 58, 0.32)', - mutedGrey70: 'rgba(18, 22, 32, 0.40)', - mutedGrey80: 'rgba(14, 15, 18, 0.50)', - mutedGrey90: 'rgba(14, 15, 18, 0.60)', - mutedGrey100: 'rgba(14, 15, 18, 0.68)', - mutedGrey110: 'rgba(14, 15, 18, 0.76)', - mutedGrey120: 'rgba(14, 15, 18, 0.84)', - mutedGrey130: 'rgba(14, 15, 18, 0.88)', - mutedGrey140: 'rgba(14, 15, 18, 0.92)', - - blueGrey10: 'rgba(54, 95, 178, 0.06)', - blueGrey20: 'rgba(54, 95, 178, 0.10)', - blueGrey30: 'rgba(54, 95, 178, 0.16)', - blueGrey40: 'rgba(54, 95, 178, 0.22)', - blueGrey50: 'rgba(47, 84, 158, 0.28)', - blueGrey60: 'rgba(35, 65, 123, 0.36)', - blueGrey70: 'rgba(24, 45, 88, 0.44)', - blueGrey80: 'rgba(11, 25, 51, 0.52)', - blueGrey90: 'rgba(5, 15, 33, 0.60)', - blueGrey100: 'rgba(5, 15, 33, 0.68)', - blueGrey110: 'rgba(5, 15, 33, 0.76)', - blueGrey120: 'rgba(5, 15, 33, 0.84)', - blueGrey130: 'rgba(5, 15, 33, 0.88)', - blueGrey140: 'rgba(5, 15, 33, 0.92)', - }, + transparent: 'transparent', mutedGrey10: '#F6F9FC', mutedGrey15: '#EDEFF3', diff --git a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss index e6496b3d183d..ce0ac211ff73 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss @@ -9,56 +9,16 @@ $euiColorWhite: #FFF !default; $euiColorBlack: #000 !default; $euiColorMutedBlack: #0E0F12 !default; $euiColorBlueBlack: #050F21 !default; - -$euiColorTransparentWhite0: 'transparent' !default; -$euiColorTransparentWhite10: rgba(255, 255, 255, 0.06) !default; -$euiColorTransparentWhite20: rgba(255, 255, 255, 0.10) !default; -$euiColorTransparentWhite30: rgba(255, 255, 255, 0.16) !default; -$euiColorTransparentWhite40: rgba(255, 255, 255, 0.22) !default; -$euiColorTransparentWhite50: rgba(255, 255, 255, 0.28) !default; -$euiColorTransparentWhite60: rgba(255, 255, 255, 0.34) !default; -$euiColorTransparentWhite70: rgba(255, 255, 255, 0.42) !default; -$euiColorTransparentWhite80: rgba(255, 255, 255, 0.50) !default; -$euiColorTransparentWhite90: rgba(255, 255, 255, 0.58) !default; -$euiColorTransparentWhite100: rgba(255, 255, 255, 0.66) !default; -$euiColorTransparentWhite110: rgba(255, 255, 255, 0.74) !default; -$euiColorTransparentWhite120: rgba(255, 255, 255, 0.8) !default; -$euiColorTransparentWhite130: rgba(255, 255, 255, 0.84) !default; -$euiColorTransparentWhite140: rgba(255, 255, 255, 0.88) !default; - -$euiColorTransparentMutedGrey10: rgba(54, 95, 178, 0.06) !default; -$euiColorTransparentMutedGrey20: rgba(50, 88, 163, 0.10) !default; -$euiColorTransparentMutedGrey30: rgba(44, 75, 138, 0.15) !default; -$euiColorTransparentMutedGrey40: rgba(37, 60, 111, 0.19) !default; -$euiColorTransparentMutedGrey50: rgba(31, 48, 84, 0.24) !default; -$euiColorTransparentMutedGrey60: rgba(24, 35, 58, 0.32) !default; -$euiColorTransparentMutedGrey70: rgba(18, 22, 32, 0.40) !default; -$euiColorTransparentMutedGrey80: rgba(14, 15, 18, 0.50) !default; -$euiColorTransparentMutedGrey90: rgba(14, 15, 18, 0.60) !default; -$euiColorTransparentMutedGrey100: rgba(14, 15, 18, 0.68) !default; -$euiColorTransparentMutedGrey110: rgba(14, 15, 18, 0.76) !default; -$euiColorTransparentMutedGrey120: rgba(14, 15, 18, 0.84) !default; -$euiColorTransparentMutedGrey130: rgba(14, 15, 18, 0.88) !default; -$euiColorTransparentMutedGrey140: rgba(14, 15, 18, 0.92) !default; - -$euiColorTransparentBlueGrey10: rgba(54, 95, 178, 0.06) !default; -$euiColorTransparentBlueGrey20: rgba(54, 95, 178, 0.10) !default; -$euiColorTransparentBlueGrey30: rgba(54, 95, 178, 0.16) !default; -$euiColorTransparentBlueGrey40: rgba(54, 95, 178, 0.22) !default; -$euiColorTransparentBlueGrey50: rgba(47, 84, 158, 0.28) !default; -$euiColorTransparentBlueGrey60: rgba(35, 65, 123, 0.36) !default; -$euiColorTransparentBlueGrey70: rgba(24, 45, 88, 0.44) !default; -$euiColorTransparentBlueGrey80: rgba(11, 25, 51, 0.52) !default; -$euiColorTransparentBlueGrey90: rgba(5, 15, 33, 0.60) !default; -$euiColorTransparentBlueGrey100: rgba(5, 15, 33, 0.68) !default; -$euiColorTransparentBlueGrey110: rgba(5, 15, 33, 0.76) !default; -$euiColorTransparentBlueGrey120: rgba(5, 15, 33, 0.84) !default; -$euiColorTransparentBlueGrey130: rgba(5, 15, 33, 0.88) !default; -$euiColorTransparentBlueGrey140: rgba(5, 15, 33, 0.92) !default; +$euiColorTransparent: 'transparent' !default; $euiColorPlainLight: $euiColorWhite !default; $euiColorPlainDark: $euiColorBlueBlack !default; +$euiColorPlainLightAlpha6: 'rgba(255, 255, 255, 0.06)' !default; +$euiColorPlainLightAlpha12: 'rgba(255, 255, 255, 0.12)' !default; +$euiColorPlainLightAlpha16: 'rgba(255, 255, 255, 0.16)' !default; +$euiColorPlainLightAlpha32: 'rgba(255, 255, 255, 0.32)' !default; + $euiColorPrimary10: #E8F1FF !default; $euiColorPrimary20: #D9E8FF !default; $euiColorPrimary30: #BFDBFF !default; @@ -74,6 +34,13 @@ $euiColorPrimary120: #123778 !default; $euiColorPrimary130: #0D2F5E !default; $euiColorPrimary140: #0A2342 !default; +$euiColorPrimary70Alpha12: 'rgba(55, 136, 255, 0.12)' !default; +$euiColorPrimary70Alpha16: 'rgba(55, 136, 255, 0.16)' !default; + +$euiColorPrimary100Alpha4: 'rgba(23, 80, 186, 0.04)' !default; +$euiColorPrimary100Alpha8: 'rgba(23, 80, 186, 0.08)' !default; +$euiColorPrimary100Alpha12: 'rgba(23, 80, 186, 0.12)' !default; + $euiColorAccent10: #FFEBF5 !default; $euiColorAccent20: #FDDDE9 !default; $euiColorAccent30: #FFC7DB !default; @@ -89,6 +56,9 @@ $euiColorAccent120: #5E2140 !default; $euiColorAccent130: #481E32 !default; $euiColorAccent140: #351725 !default; +$euiColorAccent70Alpha12: 'rgba(229, 74, 145, 0.12)' !default; +$euiColorAccent70Alpha16: 'rgba(229, 74, 145, 0.16)' !default; + $euiColorAccentSecondary10: #E2F9F7 !default; $euiColorAccentSecondary20: #C9F3F0 !default; $euiColorAccentSecondary30: #A6EDEA !default; @@ -104,6 +74,9 @@ $euiColorAccentSecondary120: #044949 !default; $euiColorAccentSecondary130: #023436 !default; $euiColorAccentSecondary140: #03282B !default; +$euiColorAccentSecondary70Alpha12: 'rgba(0, 176, 170, 0.12)' !default; +$euiColorAccentSecondary70Alpha16: 'rgba(0, 176, 170, 0.16)' !default; + $euiColorSuccess10: #E2F8F0 !default; $euiColorSuccess20: #C9F3E3 !default; $euiColorSuccess30: #AEE8D2 !default; @@ -119,6 +92,9 @@ $euiColorSuccess120: #094837 !default; $euiColorSuccess130: #0D362B !default; $euiColorSuccess140: #092A26 !default; +$euiColorSuccess70Alpha12: 'rgba(4, 174, 126, 0.12)' !default; +$euiColorSuccess70Alpha16: 'rgba(4, 174, 126, 0.16)' !default; + $euiColorWarning10: #FDF3D8 !default; $euiColorWarning20: #FDE9B5 !default; $euiColorWarning30: #FCD883 !default; @@ -134,6 +110,9 @@ $euiColorWarning120: #513910 !default; $euiColorWarning130: #3D3014 !default; $euiColorWarning140: #2C2721 !default; +$euiColorWarning40Alpha12: 'rgba(250, 203, 61, 0.12)' !default; +$euiColorWarning40Alpha24: 'rgba(250, 203, 61, 0.24)' !default; + $euiColorDanger10: #FFE8E5 !default; $euiColorDanger20: #FDDDD8 !default; $euiColorDanger30: #FFC9C2 !default; @@ -149,6 +128,9 @@ $euiColorDanger120: #5E2129 !default; $euiColorDanger130: #491D27 !default; $euiColorDanger140: #351721 !default; +$euiColorDanger70Alpha12: 'rgba(238, 75, 72, 0.12)' !default; +$euiColorDanger70Alpha16: 'rgba(238, 75, 72, 0.16)' !default; + $euiColorAssistance10: #F3ECFE !default; $euiColorAssistance20: #ECE2FE !default; $euiColorAssistance30: #DECDFE !default; @@ -193,19 +175,11 @@ $euiColorShade135: #172336 !default; $euiColorShade140: #111C2C !default; $euiColorShade145: #0B1628 !default; -$euiColorShadeTransparent10: $euiColorTransparentBlueGrey10 !default; -$euiColorShadeTransparent20: $euiColorTransparentBlueGrey20 !default; -$euiColorShadeTransparent30: $euiColorTransparentBlueGrey30 !default; -$euiColorShadeTransparent40: $euiColorTransparentBlueGrey40 !default; -$euiColorShadeTransparent50: $euiColorTransparentBlueGrey50 !default; -$euiColorShadeTransparent60: $euiColorTransparentBlueGrey60 !default; -$euiColorShadeTransparent70: $euiColorTransparentBlueGrey70 !default; -$euiColorShadeTransparent80: $euiColorTransparentBlueGrey80 !default; -$euiColorShadeTransparent90: $euiColorTransparentBlueGrey90 !default; -$euiColorShadeTransparent100: $euiColorTransparentBlueGrey100 !default; -$euiColorShadeTransparent110: $euiColorTransparentBlueGrey110 !default; -$euiColorShadeTransparent120: $euiColorTransparentBlueGrey120 !default; -$euiColorShadeTransparent130: $euiColorTransparentBlueGrey130 !default; -$euiColorShadeTransparent140: $euiColorTransparentBlueGrey140 !default; +$euiColorShade100Alpha4: 'rgba(72, 89, 117, 0.04)' !default; +$euiColorShade100Alpha16: 'rgba(72, 89, 117, 0.16)' !default; +$euiColorShade100Alpha24: 'rgba(72, 89, 117, 0.24)' !default; +$euiColorShade100Alpha70: 'rgba(72, 89, 117, 0.7)' !default; + +$euiColorShade120Alpha70: 'rgba(43, 57, 79, 0.7)' !default; \ No newline at end of file diff --git a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts index c148d592631c..9a75b777846c 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts @@ -12,6 +12,11 @@ export const SEMANTIC_COLORS = { plainLight: PRIMITIVE_COLORS.white, plainDark: PRIMITIVE_COLORS.blueBlack, + plainLightAlpha6: 'rgba(255, 255, 255, 0.06)', + plainLightAlpha12: 'rgba(255, 255, 255, 0.12)', + plainLightAlpha16: 'rgba(255, 255, 255, 0.16)', + plainLightAlpha32: 'rgba(255, 255, 255, 0.32)', + primary10: PRIMITIVE_COLORS.blue10, primary20: PRIMITIVE_COLORS.blue20, primary30: PRIMITIVE_COLORS.blue30, @@ -27,6 +32,13 @@ export const SEMANTIC_COLORS = { primary130: PRIMITIVE_COLORS.blue130, primary140: PRIMITIVE_COLORS.blue140, + primary70Alpha12: 'rgba(55, 136, 255, 0.12)', + primary70Alpha16: 'rgba(55, 136, 255, 0.16)', + + primary100Alpha4: 'rgba(23, 80, 186, 0.04)', + primary100Alpha8: 'rgba(23, 80, 186, 0.08)', + primary100Alpha12: 'rgba(23, 80, 186, 0.12)', + accent10: PRIMITIVE_COLORS.pink10, accent20: PRIMITIVE_COLORS.pink20, accent30: PRIMITIVE_COLORS.pink30, @@ -42,6 +54,9 @@ export const SEMANTIC_COLORS = { accent130: PRIMITIVE_COLORS.pink130, accent140: PRIMITIVE_COLORS.pink140, + accent70Alpha12: 'rgba(229, 74, 145, 0.12)', + accent70Alpha16: 'rgba(229, 74, 145, 0.16)', + accentSecondary10: PRIMITIVE_COLORS.teal10, accentSecondary20: PRIMITIVE_COLORS.teal20, accentSecondary30: PRIMITIVE_COLORS.teal30, @@ -57,6 +72,9 @@ export const SEMANTIC_COLORS = { accentSecondary130: PRIMITIVE_COLORS.teal130, accentSecondary140: PRIMITIVE_COLORS.teal140, + accentSecondary70Alpha12: 'rgba(0, 176, 170, 0.12)', + accentSecondary70Alpha16: 'rgba(0, 176, 170, 0.16)', + success10: PRIMITIVE_COLORS.green10, success20: PRIMITIVE_COLORS.green20, success30: PRIMITIVE_COLORS.green30, @@ -72,6 +90,9 @@ export const SEMANTIC_COLORS = { success130: PRIMITIVE_COLORS.green130, success140: PRIMITIVE_COLORS.green140, + success70Alpha12: 'rgba(4, 174, 126, 0.12)', + success70Alpha16: 'rgba(4, 174, 126, 0.16)', + warning10: PRIMITIVE_COLORS.yellow10, warning20: PRIMITIVE_COLORS.yellow20, warning30: PRIMITIVE_COLORS.yellow30, @@ -87,6 +108,9 @@ export const SEMANTIC_COLORS = { warning130: PRIMITIVE_COLORS.yellow130, warning140: PRIMITIVE_COLORS.yellow140, + warning40Alpha12: 'rgba(250, 203, 61, 0.12)', + warning40Alpha24: 'rgba(250, 203, 61, 0.24)', + danger10: PRIMITIVE_COLORS.red10, danger20: PRIMITIVE_COLORS.red20, danger30: PRIMITIVE_COLORS.red30, @@ -102,6 +126,9 @@ export const SEMANTIC_COLORS = { danger130: PRIMITIVE_COLORS.red130, danger140: PRIMITIVE_COLORS.red140, + danger70Alpha12: 'rgba(238, 75, 72, 0.12)', + danger70Alpha16: 'rgba(238, 75, 72, 0.16)', + assistance10: PRIMITIVE_COLORS.purple10, assistance20: PRIMITIVE_COLORS.purple20, assistance30: PRIMITIVE_COLORS.purple30, @@ -146,18 +173,10 @@ export const SEMANTIC_COLORS = { shade140: PRIMITIVE_COLORS.blueGrey140, shade145: PRIMITIVE_COLORS.blueGrey145, - shadeTransparent10: PRIMITIVE_COLORS.transparent.blueGrey10, - shadeTransparent20: PRIMITIVE_COLORS.transparent.blueGrey20, - shadeTransparent30: PRIMITIVE_COLORS.transparent.blueGrey30, - shadeTransparent40: PRIMITIVE_COLORS.transparent.blueGrey40, - shadeTransparent50: PRIMITIVE_COLORS.transparent.blueGrey50, - shadeTransparent60: PRIMITIVE_COLORS.transparent.blueGrey60, - shadeTransparent70: PRIMITIVE_COLORS.transparent.blueGrey70, - shadeTransparent80: PRIMITIVE_COLORS.transparent.blueGrey80, - shadeTransparent90: PRIMITIVE_COLORS.transparent.blueGrey90, - shadeTransparent100: PRIMITIVE_COLORS.transparent.blueGrey100, - shadeTransparent110: PRIMITIVE_COLORS.transparent.blueGrey110, - shadeTransparent120: PRIMITIVE_COLORS.transparent.blueGrey120, - shadeTransparent130: PRIMITIVE_COLORS.transparent.blueGrey130, - shadeTransparent140: PRIMITIVE_COLORS.transparent.blueGrey140, + shade100Alpha4: 'rgba(72, 89, 117, 0.04)', + shade100Alpha16: 'rgba(72, 89, 117, 0.16)', + shade100Alpha24: 'rgba(72, 89, 117, 0.24)', + shade100Alpha70: 'rgba(72, 89, 117, 0.7)', + + shade120Alpha70: 'rgba(43, 57, 79, 0.7)', }; From 0876442cad650041a0e7f77f342c865571b3606b Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Thu, 5 Dec 2024 16:28:25 +0100 Subject: [PATCH 05/22] fix: update subdued badge background mapping --- packages/eui-theme-borealis/src/variables/_components.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index c10426fe094c..6eb80e4e468e 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -30,7 +30,7 @@ import { import { colorVis } from './colors/_colors_vis'; const component_colors: _EuiThemeComponentColors = { - badgeBackgroundSubdued: background_colors.backgroundBaseSubdued, + badgeBackgroundSubdued: background_colors.backgroundLightText, badgeBorderColorHollow: border_colors.borderBasePlain, badgeIconButtonBackgroundHover: background_colors.backgroundBaseInteractiveHover, @@ -162,7 +162,7 @@ export const components: _EuiThemeComponents = { DARK: { ...component_colors, - badgeBackgroundSubdued: dark_background_colors.backgroundBaseSubdued, + badgeBackgroundSubdued: dark_background_colors.backgroundLightText, badgeBorderColorHollow: dark_border_colors.borderBasePlain, badgeIconButtonBackgroundHover: dark_background_colors.backgroundBaseInteractiveHover, From 45c76bc47a642cfb89a5480c97ee8ba2d46504ff Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Thu, 5 Dec 2024 16:28:51 +0100 Subject: [PATCH 06/22] refactor: fix docs sass and JSON token loading; remove unexpected deprectation label - the CSS hook is useful to prevent having to define variant styles per component --- .../src/components/with_theme/theme_context.tsx | 16 ++++++++++------ .../src/views/theme/_json/_get_json_vars.js | 4 ++-- .../src/views/theme/color/_color_sass.tsx | 2 ++ packages/eui/src/global_styling/mixins/_color.ts | 2 -- 4 files changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/eui/src-docs/src/components/with_theme/theme_context.tsx b/packages/eui/src-docs/src/components/with_theme/theme_context.tsx index 6352458b1a16..759c67973856 100644 --- a/packages/eui/src-docs/src/components/with_theme/theme_context.tsx +++ b/packages/eui/src-docs/src/components/with_theme/theme_context.tsx @@ -16,9 +16,10 @@ import { applyTheme, registerTheme } from '../../services'; // @ts-ignore Sass import amsterdamThemeLight from '../../theme_light.scss'; // @ts-ignore Sass -import borealisThemeLight from '../../theme_borealis_light.scss'; -// @ts-ignore Sass import amsterdamThemeDark from '../../theme_dark.scss'; + +// @ts-ignore Sass +import borealisThemeLight from '../../theme_borealis_light.scss'; // @ts-ignore Sass import borealisThemeDark from '../../theme_borealis_dark.scss'; @@ -93,12 +94,15 @@ export class ThemeProvider extends React.Component { super(props); const theme = localStorage.getItem('theme') || undefined; - applyTheme(theme && THEME_NAMES.includes(theme) ? theme : THEME_NAMES[0]); - const colorMode = (localStorage.getItem('colorMode') as EuiThemeColorModeStandard) || undefined; + applyTheme( + theme && THEME_NAMES.includes(theme) ? theme : THEME_NAMES[0], + colorMode + ); + const themeLanguage = this.getThemeLanguage(); this.state = { @@ -124,8 +128,8 @@ export class ThemeProvider extends React.Component { localStorage.setItem(key, String(this.state[key])); // Side effects - if (key === 'theme') { - applyTheme(this.state.theme); + if (key === 'theme' || key === 'colorMode') { + applyTheme(this.state.theme, this.state.colorMode); } if (key === 'themeLanguage') { this.setThemeLanguageParam(this.state.themeLanguage!); diff --git a/packages/eui/src-docs/src/views/theme/_json/_get_json_vars.js b/packages/eui/src-docs/src/views/theme/_json/_get_json_vars.js index 278f7b704113..4873b5ce27c5 100644 --- a/packages/eui/src-docs/src/views/theme/_json/_get_json_vars.js +++ b/packages/eui/src-docs/src/views/theme/_json/_get_json_vars.js @@ -17,8 +17,8 @@ export const useJsonVars = () => { const lightTokens = isNewTheme ? borealisLightColors : lightColors; let palette; - switch (themeContext.theme) { - case 'dark': + switch (themeContext.colorMode) { + case 'DARK': palette = darkTokens; break; default: diff --git a/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx b/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx index c39d808a29e9..fa9c5b9de336 100644 --- a/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx +++ b/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx @@ -139,6 +139,8 @@ export const ShadeSass: FunctionComponent = ({ description }) => { export const ShadeValuesSass = () => { const values = useJsonVars(); + console.log('values', values, values.euiColorEmptyShade); + return ( <> }, {} as Record<_EuiBackgroundColor, SerializedStyles>); /** - * @deprecated - use background tokens directly * Hook to retrieve background style for a background color variant * @returns An object map of color keys to CSS, * e.g. { danger: css``, success: css``, ... } From 74d9510ba8afbc1f8797eb6506ddb42a4aea6c7b Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Fri, 6 Dec 2024 12:11:08 +0100 Subject: [PATCH 07/22] refactor: update text and title color token values --- .../eui-theme-borealis/src/eui_theme_borealis_dark.json | 4 ++-- .../eui-theme-borealis/src/eui_theme_borealis_light.json | 2 +- .../src/variables/colors/_colors_dark.scss | 8 ++++---- .../src/variables/colors/_colors_dark.ts | 8 ++++---- .../src/variables/colors/_colors_light.scss | 4 ++-- .../src/variables/colors/_colors_light.ts | 4 ++-- .../src/views/theme/_json/eui_theme_borealis_dark.json | 4 ++-- .../src/views/theme/_json/eui_theme_borealis_light.json | 2 +- 8 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json index 8bdfb30f0658..5cb09778a979 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json @@ -297,8 +297,8 @@ "euiColorFullShade": "#FFFFFF", "euiPageBackgroundColor": "#07101F", "euiColorHighlight": "#1750BA", - "euiTextColor": "#E3E8F2", - "euiTitleColor": "#ECF1F9", + "euiTextColor": "#CAD3E2", + "euiTitleColor": "#E3E8F2", "euiTextSubduedColor": "#8E9FBC", "euiColorDisabled": "#1D2A3E", "euiColorPrimaryText": "#61A2FF", diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json index 1a0a3a6219ae..2e752c4161b2 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json @@ -297,7 +297,7 @@ "euiColorFullShade": "#07101F", "euiPageBackgroundColor": "#F6F9FC", "euiColorHighlight": "#E8F1FF", - "euiTextColor": "#172336", + "euiTextColor": "#1D2A3E", "euiTitleColor": "#111C2C", "euiTextSubduedColor": "#5A6D8C", "euiColorDisabled": "#E3E8F2", diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss index 30e6d2a94cbc..bd85a158d6a5 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss @@ -65,16 +65,16 @@ $euiColorBackgroundFilledDanger: $euiColorDanger60 !default; $euiColorBackgroundFilledText: $euiColorShade60 !default; // Texts (legacy) -$euiTextColor: $euiColorShade20 !default; -$euiTitleColor: $euiColorShade15 !default; +$euiTextColor: $euiColorShade30 !default; +$euiTitleColor: $euiColorShade20 !default; $euiTextSubduedColor: $euiColorShade60 !default; $euiColorDisabled: $euiColorBackgroundBaseDisabled !default; $euiColorDisabledText: $euiColorShade80 !default; $euiLinkColor: $euiColorPrimary60 !default; // Texts -$euiColorTextParagraph: $euiColorShade20 !default; -$euiColorTextHeading: $euiColorShade15 !default; +$euiColorTextParagraph: $euiColorShade30 !default; +$euiColorTextHeading: $euiColorShade20 !default; $euiColorTextSubdued: $euiColorShade60 !default; $euiColorTextDisabled: $euiColorShade80 !default; $euiColorTextInverse: $euiColorPlainDark !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts index ce1ccee133a0..b69ab17f237d 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts @@ -53,14 +53,14 @@ export const dark_brand_text_colors: _EuiThemeBrandTextColors = { export const dark_text_colors: _EuiThemeTextColors = { /* Legacy colors */ - text: SEMANTIC_COLORS.shade20, - title: SEMANTIC_COLORS.shade15, + text: SEMANTIC_COLORS.shade30, + title: SEMANTIC_COLORS.shade20, subduedText: SEMANTIC_COLORS.shade60, link: SEMANTIC_COLORS.primary60, /* New colors */ - textParagraph: SEMANTIC_COLORS.shade20, - textHeading: SEMANTIC_COLORS.shade15, + textParagraph: SEMANTIC_COLORS.shade30, + textHeading: SEMANTIC_COLORS.shade20, textSubdued: SEMANTIC_COLORS.shade60, textDisabled: SEMANTIC_COLORS.shade80, textInverse: SEMANTIC_COLORS.plainDark, diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss index f0e30001492d..663ffe69b943 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss @@ -66,7 +66,7 @@ $euiColorBackgroundFilledDanger: $euiColorDanger90 !default; $euiColorBackgroundFilledText: $euiColorShade90 !default; // Texts (legacy) -$euiTextColor: $euiColorShade135 !default; +$euiTextColor: $euiColorShade130 !default; $euiTitleColor: $euiColorShade140 !default; $euiTextSubduedColor: $euiColorShade90 !default; $euiColorDisabled: $euiColorBackgroundBaseDisabled !default; @@ -74,7 +74,7 @@ $euiColorDisabledText: $euiColorShade70 !default; $euiLinkColor: $euiColorPrimary100 !default; // Texts -$euiColorTextParagraph: $euiColorShade135 !default; +$euiColorTextParagraph: $euiColorShade130 !default; $euiColorTextHeading: $euiColorShade140 !default; $euiColorTextSubdued: $euiColorShade90 !default; $euiColorTextDisabled: $euiColorShade70 !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts index 8cc92e047e00..7011023b517b 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts @@ -53,13 +53,13 @@ export const brand_text_colors: _EuiThemeBrandTextColors = { export const text_colors: _EuiThemeTextColors = { /* Legacy colors */ - text: SEMANTIC_COLORS.shade135, + text: SEMANTIC_COLORS.shade130, title: SEMANTIC_COLORS.shade140, subduedText: SEMANTIC_COLORS.shade90, link: SEMANTIC_COLORS.primary100, /* New colors */ - textParagraph: SEMANTIC_COLORS.shade135, + textParagraph: SEMANTIC_COLORS.shade130, textHeading: SEMANTIC_COLORS.shade140, textSubdued: SEMANTIC_COLORS.shade90, textDisabled: SEMANTIC_COLORS.shade70, diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json index 8bdfb30f0658..5cb09778a979 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json @@ -297,8 +297,8 @@ "euiColorFullShade": "#FFFFFF", "euiPageBackgroundColor": "#07101F", "euiColorHighlight": "#1750BA", - "euiTextColor": "#E3E8F2", - "euiTitleColor": "#ECF1F9", + "euiTextColor": "#CAD3E2", + "euiTitleColor": "#E3E8F2", "euiTextSubduedColor": "#8E9FBC", "euiColorDisabled": "#1D2A3E", "euiColorPrimaryText": "#61A2FF", diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json index 1a0a3a6219ae..2e752c4161b2 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json @@ -297,7 +297,7 @@ "euiColorFullShade": "#07101F", "euiPageBackgroundColor": "#F6F9FC", "euiColorHighlight": "#E8F1FF", - "euiTextColor": "#172336", + "euiTextColor": "#1D2A3E", "euiTitleColor": "#111C2C", "euiTextSubduedColor": "#5A6D8C", "euiColorDisabled": "#E3E8F2", From 49a9d5c170c5be536479bf96811c3737a947353a Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Fri, 6 Dec 2024 12:11:32 +0100 Subject: [PATCH 08/22] refactor: update beacon successcolor mapping --- packages/eui/src/components/beacon/beacon.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/eui/src/components/beacon/beacon.styles.ts b/packages/eui/src/components/beacon/beacon.styles.ts index 1a9c03a17e8a..c5d09d2fa2db 100644 --- a/packages/eui/src/components/beacon/beacon.styles.ts +++ b/packages/eui/src/components/beacon/beacon.styles.ts @@ -94,9 +94,9 @@ export const euiBeaconStyles = ({ euiTheme }: UseEuiTheme) => ({ } } `, - subdued: css(_colorCSS(euiTheme.colors.subduedText)), + subdued: css(_colorCSS(euiTheme.colors.textSubdued)), primary: css(_colorCSS(euiTheme.colors.primary)), - success: css(_colorCSS(euiTheme.colors.success)), + success: css(_colorCSS(euiTheme.colors.accentSecondary)), warning: css(_colorCSS(euiTheme.colors.warning)), danger: css(_colorCSS(euiTheme.colors.danger)), accent: css(_colorCSS(euiTheme.colors.accent)), From ad469fdcca801536e608167bca145164a0359b06 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Fri, 6 Dec 2024 12:21:46 +0100 Subject: [PATCH 09/22] refactor: update beta_badge mappings --- .../components/badge/beta_badge/beta_badge.styles.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts index cf83354a8c6e..49c4e00801d3 100644 --- a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts +++ b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts @@ -21,6 +21,8 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme, colorMode } = euiThemeContext; const badgeColors = euiBadgeColors(euiThemeContext); + const hasVisColorAdjustment = euiTheme.flags?.hasVisColorAdjustment; + return { euiBetaBadge: css` display: inline-block; @@ -41,8 +43,12 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { } `, // Colors - accent: css(badgeColors.accentText), - accentSecondary: css(badgeColors.accentSecondaryText), + accent: hasVisColorAdjustment + ? css(badgeColors.accentText) + : css(badgeColors.accent), + accentSecondary: hasVisColorAdjustment + ? css(badgeColors.accentSecondaryText) + : css(badgeColors.accentSecondary), subdued: css(badgeColors.subdued), hollow: css` color: ${badgeColors.hollow.color}; From 813e38be185354a66b88c12cfee144a6fc3658a8 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Fri, 6 Dec 2024 12:22:07 +0100 Subject: [PATCH 10/22] chore: update deprecation description --- .../eui-theme-common/src/global_styling/variables/colors.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/eui-theme-common/src/global_styling/variables/colors.ts b/packages/eui-theme-common/src/global_styling/variables/colors.ts index 71fd768fd938..f898bfdcb924 100644 --- a/packages/eui-theme-common/src/global_styling/variables/colors.ts +++ b/packages/eui-theme-common/src/global_styling/variables/colors.ts @@ -79,7 +79,7 @@ export type _EuiThemeBrandTextColors = { export type _EuiThemeShadeColors = { /** * Used as the background color of primary **page content and panels** including modals and flyouts. - * @deprecated - use `white` + * @deprecated - use specific semantic color tokens instead */ emptyShade: ColorModeSwitch; /** @@ -109,7 +109,7 @@ export type _EuiThemeShadeColors = { darkestShade: ColorModeSwitch; /** * The opposite of `emptyShade` - * @deprecated - use`black` + * @deprecated - use specific semantic color tokens instead */ fullShade: ColorModeSwitch; }; From 762cbf7081b8e1e85d62c806298bef2a601a5b2b Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Sun, 8 Dec 2024 13:50:25 +0100 Subject: [PATCH 11/22] refactor: update select background color token mapping --- .../eui-theme-borealis/src/variables/colors/_colors_dark.scss | 2 +- .../eui-theme-borealis/src/variables/colors/_colors_dark.ts | 2 +- .../eui-theme-borealis/src/variables/colors/_colors_light.scss | 2 +- .../eui-theme-borealis/src/variables/colors/_colors_light.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss index bd85a158d6a5..562b1fbf1013 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss @@ -43,7 +43,7 @@ $euiColorBackgroundBaseFormsPrepend: $euiColorShade125 !default; $euiColorBackgroundBaseFormsControlDisabled: $euiColorShade120 !default; $euiColorBackgroundBaseInteractiveHover: $euiColorPlainLightAlpha6 !default; -$euiColorBackgroundBaseInteractiveSelect: $euiColorShade125 !default; +$euiColorBackgroundBaseInteractiveSelect: $euiColorPrimary130 !default; $euiColorBackgroundBaseInteractiveOverlay: $euiColorShade120Alpha70 !default; $euiColorBackgroundBaseSkeletonEdge: $euiColorPlainLightAlpha16 !default; $euiColorBackgroundBaseSkeletonMiddle: $euiColorPlainLightAlpha6 !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts index b69ab17f237d..9e3df83ed327 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts @@ -91,7 +91,7 @@ export const dark_background_colors: _EuiThemeBackgroundColors = { backgroundBaseFormsControlDisabled: SEMANTIC_COLORS.shade120, backgroundBaseInteractiveHover: SEMANTIC_COLORS.plainLightAlpha6, - backgroundBaseInteractiveSelect: SEMANTIC_COLORS.shade125, + backgroundBaseInteractiveSelect: SEMANTIC_COLORS.primary130, backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shade120Alpha70, backgroundBaseSkeletonEdge: SEMANTIC_COLORS.plainLightAlpha16, diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss index 663ffe69b943..16ae319951f5 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss @@ -44,7 +44,7 @@ $euiColorBackgroundBaseFormsPrepend: $euiColorShade15 !default; $euiColorBackgroundBaseFormsControlDisabled: $euiColorShade30 !default; $euiColorBackgroundBaseInteractiveHover: $euiColorPrimary100Alpha4 !default; -$euiColorBackgroundBaseInteractiveSelect: $euiColorShade15 !default; +$euiColorBackgroundBaseInteractiveSelect: $euiColorPrimary10 !default; $euiColorBackgroundBaseInteractiveOverlay: $euiColorShade100Alpha70 !default; $euiColorBackgroundBaseSkeletonEdge: $euiColorShade100Alpha16 !default; $euiColorBackgroundBaseSkeletonMiddle: $euiColorShade100Alpha4 !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts index 7011023b517b..a9ce0c656245 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts @@ -91,7 +91,7 @@ export const background_colors: _EuiThemeBackgroundColors = { backgroundBaseFormsControlDisabled: SEMANTIC_COLORS.shade30, backgroundBaseInteractiveHover: SEMANTIC_COLORS.primary100Alpha4, - backgroundBaseInteractiveSelect: SEMANTIC_COLORS.shade15, + backgroundBaseInteractiveSelect: SEMANTIC_COLORS.primary10, backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shade100Alpha70, backgroundBaseSkeletonEdge: SEMANTIC_COLORS.shade100Alpha16, From 27c8f2b9e4fd31d2981961edcb3075e543b05559 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Sun, 8 Dec 2024 14:46:09 +0100 Subject: [PATCH 12/22] refactor: update datagrid border and select color mappings - ensures docs example work as expected for both themes --- .../src/variables/_components.ts | 5 +++ .../global_styling/variables/components.ts | 2 ++ .../eui/src-docs/src/services/theme/theme.js | 7 +++++ .../src/views/datagrid/_datagrid.scss | 4 +++ .../components/datagrid/data_grid.styles.ts | 31 +++++++++++-------- .../global_styling/variables/_components.ts | 5 +++ .../data_grid_style_and_display.mdx | 22 ++++++++++++- 7 files changed, 62 insertions(+), 14 deletions(-) diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index 6eb80e4e468e..422d5297ae3e 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -72,9 +72,12 @@ const component_colors: _EuiThemeComponentColors = { collapsibleNavGroupBackgroundDark: dark_background_colors.backgroundBaseSubdued, + dataGridBorderColor: border_colors.borderBasePlain, dataGridVerticalLineBorderColor: border_colors.borderBasePlain, dataGridRowBackgroundStriped: background_colors.backgroundBaseSubdued, dataGridRowBackgroundHover: background_colors.backgroundBaseInteractiveHover, + dataGridRowBackgroundSelect: + background_colors.backgroundBaseInteractiveSelect, dragDropDraggingBackground: background_colors.backgroundBaseSuccess, dragDropDraggingOverBackground: background_colors.backgroundLightSuccess, @@ -207,6 +210,8 @@ export const components: _EuiThemeComponents = { dataGridRowBackgroundStriped: dark_background_colors.backgroundBaseSubdued, dataGridRowBackgroundHover: dark_background_colors.backgroundBaseInteractiveHover, + dataGridRowBackgroundSelect: + dark_background_colors.backgroundBaseInteractiveSelect, dragDropDraggingBackground: dark_background_colors.backgroundBaseSuccess, dragDropDraggingOverBackground: 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 ad0681fbec4c..b0ea359ab5e2 100644 --- a/packages/eui-theme-common/src/global_styling/variables/components.ts +++ b/packages/eui-theme-common/src/global_styling/variables/components.ts @@ -51,9 +51,11 @@ export type _EuiThemeComponentColors = { collapsibleNavGroupBackground: ColorModeSwitch; collapsibleNavGroupBackgroundDark: ColorModeSwitch; + dataGridBorderColor: ColorModeSwitch; dataGridVerticalLineBorderColor: ColorModeSwitch; dataGridRowBackgroundStriped: ColorModeSwitch; dataGridRowBackgroundHover: ColorModeSwitch; + dataGridRowBackgroundSelect: ColorModeSwitch; dragDropDraggingBackground: ColorModeSwitch; dragDropDraggingOverBackground: ColorModeSwitch; diff --git a/packages/eui/src-docs/src/services/theme/theme.js b/packages/eui/src-docs/src/services/theme/theme.js index 316ac207bc6d..5f28eed39ff2 100644 --- a/packages/eui/src-docs/src/services/theme/theme.js +++ b/packages/eui/src-docs/src/services/theme/theme.js @@ -8,5 +8,12 @@ export function applyTheme(newTheme, colorMode = 'LIGHT') { Object.keys(themes).forEach((theme) => Object.values(themes[theme]).forEach((cssFile) => cssFile.unuse()) ); + themes[newTheme]?.[colorMode]?.use(); + + if (newTheme.toLowerCase().includes('borealis')) { + document?.body.classList.add('euiTheme--borealis'); + } else { + document?.body.classList.remove('euiTheme--borealis'); + } } diff --git a/packages/eui/src-docs/src/views/datagrid/_datagrid.scss b/packages/eui/src-docs/src/views/datagrid/_datagrid.scss index 0638086e908c..ecf3b822e855 100644 --- a/packages/eui/src-docs/src/views/datagrid/_datagrid.scss +++ b/packages/eui/src-docs/src/views/datagrid/_datagrid.scss @@ -23,3 +23,7 @@ .euiDataGridRow--rowClassesDemoSelected { background: $euiColorHighlight; } + +.euiTheme--borealis .euiDataGridRow--rowClassesDemoSelected { + background: $euiColorBackgroundBaseInteractiveSelect; +} diff --git a/packages/eui/src/components/datagrid/data_grid.styles.ts b/packages/eui/src/components/datagrid/data_grid.styles.ts index 38d7d22ed08f..08e930cac568 100644 --- a/packages/eui/src/components/datagrid/data_grid.styles.ts +++ b/packages/eui/src/components/datagrid/data_grid.styles.ts @@ -47,6 +47,8 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => { const { cellPadding, lineHeight, fontSize } = euiDataGridVariables(euiThemeContext); + const border = `${euiTheme.border.width.thin} solid ${euiTheme.components.dataGridBorderColor}`; + return { euiDataGrid: css` display: flex; @@ -133,16 +135,16 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => { .euiDataGridRowCell:not(.euiDataGridFooterCell), .euiDataGridFooter, &:not(.euiDataGrid--headerUnderline) .euiDataGridHeader { - ${logicalCSS('border-bottom', euiTheme.border.thin)} + ${logicalCSS('border-bottom', border)} } &:not(.euiDataGrid--footerOverline) .euiDataGridFooter { - ${logicalCSS('border-top', euiTheme.border.thin)} + ${logicalCSS('border-top', border)} ${logicalCSS('margin-top', `-${euiTheme.border.width.thin}`)} } .euiDataGridHeader { - ${logicalCSS('border-top', euiTheme.border.thin)} + ${logicalCSS('border-top', border)} } `, all: css` @@ -150,7 +152,7 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => { .euiDataGridRowCell { &:not(.euiDataGridFooterCell) { - ${logicalCSS('border-bottom', euiTheme.border.thin)} + ${logicalCSS('border-bottom', border)} ${logicalCSS( 'border-right', // Visually lighten vertical borders @@ -159,42 +161,45 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => { } &--firstColumn { - ${logicalCSS('border-left', euiTheme.border.thin)} + ${logicalCSS('border-left', border)} } &--lastColumn { - ${logicalCSS('border-right-color', euiTheme.border.color)} + ${logicalCSS( + 'border-right-color', + euiTheme.components.dataGridBorderColor + )} } } .euiDataGridFooterCell, .euiDataGridHeaderCell { - ${logicalCSS('border-right', euiTheme.border.thin)} + ${logicalCSS('border-right', border)} &:first-of-type { - ${logicalCSS('border-left', euiTheme.border.thin)} + ${logicalCSS('border-left', border)} } } .euiDataGridFooter { - ${logicalCSS('border-bottom', euiTheme.border.thin)} + ${logicalCSS('border-bottom', border)} } &:not(.euiDataGrid--footerOverline) .euiDataGridFooter { - ${logicalCSS('border-top', euiTheme.border.thin)} + ${logicalCSS('border-top', border)} ${logicalCSS('margin-top', `-${euiTheme.border.width.thin}`)} } &:not(.euiDataGrid--headerUnderline) .euiDataGridHeader { - ${logicalCSS('border-bottom', euiTheme.border.thin)} + ${logicalCSS('border-bottom', border)} } &:is(.euiDataGrid--noControls) .euiDataGridHeader { - ${logicalCSS('border-top', euiTheme.border.thin)} + ${logicalCSS('border-top', border)} } .euiDataGrid__controls { - border: ${euiTheme.border.thin}; + border: ${border}; background-color: ${euiTheme.colors.body}; } `, 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 25947b1a5219..1261f97b45a2 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts @@ -152,6 +152,7 @@ const component_colors: _EuiThemeComponentColors = { ['colors.darkestShade'] ), + dataGridBorderColor: computed(([color]) => color, ['border.color']), dataGridVerticalLineBorderColor: computed( ([color]) => tint(color, 0.3), ['border.color'] @@ -164,6 +165,10 @@ const component_colors: _EuiThemeComponentColors = { ([highlight]) => highlight, ['colors.highlight'] ), + dataGridRowBackgroundSelect: computed( + ([highlight]) => highlight, + ['colors.highlight'] + ), dragDropDraggingBackground: computed( ([success]) => transparentize(success, 0.1), diff --git a/packages/website/docs/components/tabular_content/data_grid_style_and_display.mdx b/packages/website/docs/components/tabular_content/data_grid_style_and_display.mdx index a8c95f726513..e4e1ac208908 100644 --- a/packages/website/docs/components/tabular_content/data_grid_style_and_display.mdx +++ b/packages/website/docs/components/tabular_content/data_grid_style_and_display.mdx @@ -146,7 +146,7 @@ import React, { useState, useMemo, } from 'react'; -import { EuiDataGrid, EuiCheckbox, EuiButtonEmpty } from '@elastic/eui'; +import { EuiDataGrid, EuiCheckbox, EuiButtonEmpty, useEuiTheme } from '@elastic/eui'; import { faker } from '@faker-js/faker'; /** @@ -256,6 +256,8 @@ const leadingControlColumns = [ * Data grid */ export default () => { + const { euiTheme } = useEuiTheme(); + const [visibleColumns, setVisibleColumns] = useState( columns.map(({ id }) => id) ); @@ -300,6 +302,24 @@ export default () => { additionalControls: , }} gridStyle={{ rowClasses, rowHover: 'none' }} + css={{ + '--datagridRow-stripeColor': euiTheme.colors.lightShade, + '.euiDataGridRow--rowClassesDemoSelected': { + backgroundColor: euiTheme.components.dataGridRowBackgroundSelect, + }, + '.euiDataGridRow--rowClassesDemo': { + backgroundImage: `linear-gradient(135deg, + ${euiTheme.colors.emptyShade} 41.67%, + var(--datagridRow-stripeColor) 41.67%, + var(--datagridRow-stripeColor) 50%, + ${euiTheme.colors.emptyShade} 50%, + ${euiTheme.colors.emptyShade} 91.67%, + var(--datagridRow-stripeColor) 91.67%, + var(--datagridRow-stripeColor) 100% + )`, + backgroundSize: '8.49px 8.49px', + } + }} /> ); From aec9180f0cc9b99ad970111d7e406cdd7feb554d Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Mon, 9 Dec 2024 09:51:59 +0100 Subject: [PATCH 13/22] feat: add backgroundBaseHighlighted color token --- .../src/variables/colors/_colors_dark.scss | 1 + .../src/variables/colors/_colors_dark.ts | 3 +++ .../src/variables/colors/_colors_light.scss | 1 + .../src/variables/colors/_colors_light.ts | 2 ++ .../src/global_styling/variables/colors.ts | 3 +++ packages/eui/src/global_styling/mixins/_color.ts | 1 + .../global_styling/variables/_colors.ts | 16 ++++++++++++++++ 7 files changed, 27 insertions(+) diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss index 562b1fbf1013..54eee28fe390 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss @@ -39,6 +39,7 @@ $euiColorBackgroundBaseDanger: $euiColorDanger140 !default; $euiColorBackgroundBaseSubdued: $euiColorPlainDark !default; $euiColorBackgroundBasePlain: $euiColorShade145 !default; $euiColorBackgroundBaseDisabled: $euiColorShade130 !default; +$euiColorBackgroundBaseHighlighted: $euiColorShade135 !default; $euiColorBackgroundBaseFormsPrepend: $euiColorShade125 !default; $euiColorBackgroundBaseFormsControlDisabled: $euiColorShade120 !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts index 9e3df83ed327..32f9b338bff0 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts @@ -86,6 +86,7 @@ export const dark_background_colors: _EuiThemeBackgroundColors = { backgroundBaseSubdued: SEMANTIC_COLORS.plainDark, backgroundBasePlain: SEMANTIC_COLORS.shade145, backgroundBaseDisabled: SEMANTIC_COLORS.shade130, + backgroundBaseHighlighted: SEMANTIC_COLORS.shade135, backgroundBaseFormsPrepend: SEMANTIC_COLORS.shade125, backgroundBaseFormsControlDisabled: SEMANTIC_COLORS.shade120, @@ -130,6 +131,8 @@ export const dark_transparent_background_colors: _EuiThemeTransparentBackgroundC backgroundTransparentWarning: dark_background_colors.backgroundBaseWarning, backgroundTransparentDanger: dark_background_colors.backgroundBaseDanger, backgroundTransparentSubdued: dark_background_colors.backgroundBaseSubdued, + backgroundTransparentHighlighted: + dark_background_colors.backgroundBaseSubdued, backgroundTransparentPlain: dark_background_colors.backgroundBasePlain, }; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss index 16ae319951f5..e70eae21c447 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss @@ -40,6 +40,7 @@ $euiColorBackgroundBaseDanger: $euiColorDanger10 !default; $euiColorBackgroundBaseSubdued: $euiColorShade10 !default; $euiColorBackgroundBasePlain: $euiColorPlainLight !default; $euiColorBackgroundBaseDisabled: $euiColorShade15 !default; +$euiColorBackgroundBaseHighlighted: $euiColorShade10 !default; $euiColorBackgroundBaseFormsPrepend: $euiColorShade15 !default; $euiColorBackgroundBaseFormsControlDisabled: $euiColorShade30 !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts index a9ce0c656245..a1c27cfb261a 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts @@ -86,6 +86,7 @@ export const background_colors: _EuiThemeBackgroundColors = { backgroundBaseSubdued: SEMANTIC_COLORS.shade10, backgroundBasePlain: SEMANTIC_COLORS.plainLight, backgroundBaseDisabled: SEMANTIC_COLORS.shade15, + backgroundBaseHighlighted: SEMANTIC_COLORS.shade10, backgroundBaseFormsPrepend: SEMANTIC_COLORS.shade15, backgroundBaseFormsControlDisabled: SEMANTIC_COLORS.shade30, @@ -130,6 +131,7 @@ export const transparent_background_colors: _EuiThemeTransparentBackgroundColors backgroundTransparentWarning: background_colors.backgroundBaseWarning, backgroundTransparentDanger: background_colors.backgroundBaseDanger, backgroundTransparentSubdued: SEMANTIC_COLORS.shade15, + backgroundTransparentHighlighted: SEMANTIC_COLORS.shade15, backgroundTransparentPlain: SEMANTIC_COLORS.shade15, }; diff --git a/packages/eui-theme-common/src/global_styling/variables/colors.ts b/packages/eui-theme-common/src/global_styling/variables/colors.ts index f898bfdcb924..0bf994e7f586 100644 --- a/packages/eui-theme-common/src/global_styling/variables/colors.ts +++ b/packages/eui-theme-common/src/global_styling/variables/colors.ts @@ -181,6 +181,7 @@ export type _EuiThemeBackgroundColors = { backgroundBaseSubdued: ColorModeSwitch; backgroundBasePlain: ColorModeSwitch; backgroundBaseDisabled: ColorModeSwitch; + backgroundBaseHighlighted: ColorModeSwitch; backgroundBaseFormsPrepend: ColorModeSwitch; backgroundBaseFormsControlDisabled: ColorModeSwitch; backgroundBaseInteractiveHover: ColorModeSwitch; @@ -225,6 +226,8 @@ export type _EuiThemeTransparentBackgroundColors = { /** @deprecated */ backgroundTransparentSubdued: ColorModeSwitch; /** @deprecated */ + backgroundTransparentHighlighted: ColorModeSwitch; + /** @deprecated */ backgroundTransparentPlain: ColorModeSwitch; }; diff --git a/packages/eui/src/global_styling/mixins/_color.ts b/packages/eui/src/global_styling/mixins/_color.ts index 0fa145972d68..a0d62dff58ad 100644 --- a/packages/eui/src/global_styling/mixins/_color.ts +++ b/packages/eui/src/global_styling/mixins/_color.ts @@ -19,6 +19,7 @@ export const BACKGROUND_COLORS = [ 'transparent', 'plain', 'subdued', + 'highlighted', 'accent', 'accentSecondary', 'primary', diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts index d9283eaa16dd..fa3e68d2b3a1 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts @@ -128,6 +128,10 @@ export const background_colors: _EuiThemeBackgroundColors = { ([disabled]) => disabled, ['colors.disabled'] ), + backgroundBaseHighlighted: computed( + ([backgroundBaseSubdued]) => backgroundBaseSubdued, + ['colors.backgroundBaseSubdued'] + ), backgroundBasePlain: computed( ([emptyShade]) => emptyShade, ['colors.emptyShade'] @@ -244,6 +248,10 @@ export const transparent_background_colors: _EuiThemeTransparentBackgroundColors ([lightShade]) => transparentize(lightShade, 0.2), ['colors.lightShade'] ), + backgroundTransparentHighlighted: computed( + ([backgroundTransparentSubdued]) => backgroundTransparentSubdued, + ['colors.backgroundTransparentSubdued'] + ), backgroundTransparentPlain: computed( ([ghost]) => transparentize(ghost, 0.2), ['colors.ghost'] @@ -381,6 +389,10 @@ export const dark_background_colors: _EuiThemeBackgroundColors = { ([disabled]) => disabled, ['colors.disabled'] ), + backgroundBaseHighlighted: computed( + ([backgroundBaseSubdued]) => backgroundBaseSubdued, + ['colors.backgroundBaseSubdued'] + ), backgroundBasePlain: computed( ([emptyShade]) => emptyShade, ['colors.emptyShade'] @@ -464,6 +476,10 @@ export const dark_transparent_background_colors: _EuiThemeTransparentBackgroundC ([lightShade]) => transparentize(lightShade, 0.4), ['colors.lightShade'] ), + backgroundTransparentHighlighted: computed( + ([backgroundTransparentSubdued]) => backgroundTransparentSubdued, + ['colors.backgroundTransparentSubdued'] + ), }; export const dark_border_colors: _EuiThemeBorderColors = { From e33d51f4e1de0e7c898678a0f9f03aff1243e419 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Mon, 9 Dec 2024 10:22:20 +0100 Subject: [PATCH 14/22] feat: support generic highlighted background usage --- .../src/variables/_components.ts | 8 ++--- .../card/__snapshots__/card.test.tsx.snap | 33 +++++++++++++++++++ .../components/comment_list/comment_event.tsx | 7 ++-- .../__snapshots__/empty_prompt.test.tsx.snap | 14 ++++++++ .../empty_prompt/empty_prompt.styles.ts | 5 ++- .../__snapshots__/page_section.test.tsx.snap | 10 ++++++ .../panel/__snapshots__/panel.test.tsx.snap | 6 ++++ packages/eui/src/components/panel/panel.tsx | 2 +- .../mixins/__snapshots__/_color.test.ts.snap | 8 +++++ .../global_styling/variables/_components.ts | 5 +++ 10 files changed, 89 insertions(+), 9 deletions(-) diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index 422d5297ae3e..abffb0657a31 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -44,7 +44,7 @@ const component_colors: _EuiThemeComponentColors = { buttonGroupBorderColorSelected: border_colors.borderBasePlain, buttonGroupFocusColor: brand_text_colors.textPrimary, - codeBackground: background_colors.backgroundBaseFormsPrepend, + codeBackground: background_colors.backgroundBaseHighlighted, codeBackgroundSelected: 'inherit', codeColor: text_colors.textParagraph, codeInlineColor: colorVis.euiColorVisAsTextLight6, @@ -153,7 +153,7 @@ const component_colors: _EuiThemeComponentColors = { tooltipBorder: dark_border_colors.borderBaseSubdued, tooltipBorderFloating: border_colors.borderBaseFloating, - tourFooterBackground: background_colors.backgroundBaseSubdued, + tourFooterBackground: background_colors.backgroundBaseHighlighted, treeViewItemBackgroundHover: background_colors.backgroundBaseInteractiveHover, }; @@ -178,7 +178,7 @@ export const components: _EuiThemeComponents = { buttonGroupBorderColorSelected: dark_border_colors.borderBasePlain, buttonGroupFocusColor: dark_brand_text_colors.textPrimary, - codeBackground: dark_background_colors.backgroundBaseFormsPrepend, + codeBackground: dark_background_colors.backgroundBaseHighlighted, codeBackgroundSelected: 'inherit', codeColor: dark_text_colors.textParagraph, codeInlineColor: colorVis.euiColorVisAsTextDark6, @@ -286,7 +286,7 @@ export const components: _EuiThemeComponents = { tooltipBorderFloating: dark_border_colors.borderBaseFloating, - tourFooterBackground: dark_background_colors.backgroundBaseSubdued, + tourFooterBackground: dark_background_colors.backgroundBaseHighlighted, treeViewItemBackgroundHover: dark_background_colors.backgroundBaseInteractiveHover, diff --git a/packages/eui/src/components/card/__snapshots__/card.test.tsx.snap b/packages/eui/src/components/card/__snapshots__/card.test.tsx.snap index 08c02136b53b..6d19ab13803a 100644 --- a/packages/eui/src/components/card/__snapshots__/card.test.tsx.snap +++ b/packages/eui/src/components/card/__snapshots__/card.test.tsx.snap @@ -413,6 +413,39 @@ exports[`EuiCard props display danger is rendered 1`] = ` `; +exports[`EuiCard props display highlighted is rendered 1`] = ` +
+
+
+

+ + Card title + +

+
+

+ Card description +

+
+
+
+
+`; + exports[`EuiCard props display plain is rendered 1`] = `
= ({ } if (isTypeRegular && !eventColor) { - eventColor = 'subdued'; + eventColor = 'highlighted'; } if (isTypeUpdate && !eventColor) { eventColor = 'transparent'; @@ -118,20 +118,21 @@ export const EuiCommentEvent: FunctionComponent = ({ /** * Styles */ + const borderColor = eventColor === 'highlighted' ? 'subdued' : eventColor; const borderStyles = useEuiBorderColorCSS(); const styles = useEuiMemoizedStyles(euiCommentEventStyles); const cssStyles = [ styles.euiCommentEvent, showEventBorders && styles.border, - showEventBorders && borderStyles[eventColor!], + showEventBorders && borderStyles[borderColor!], ]; const headerStyles = useEuiMemoizedStyles(euiCommentEventHeaderStyles); const cssHeaderStyles = [ headerStyles.euiCommentEvent__header, showEventBorders && headerStyles.border, - showEventBorders && borderStyles[eventColor!], + showEventBorders && borderStyles[borderColor!], ]; const bodyStyles = useEuiMemoizedStyles(euiCommentEventBodyStyles); diff --git a/packages/eui/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap b/packages/eui/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap index cfa5274a5ee0..f3f4268a8f2b 100644 --- a/packages/eui/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap +++ b/packages/eui/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap @@ -153,6 +153,20 @@ exports[`EuiEmptyPrompt props color danger is rendered 1`] = `
`; +exports[`EuiEmptyPrompt props color highlighted is rendered 1`] = ` +
+
+
+
+
+`; + exports[`EuiEmptyPrompt props color plain is rendered 1`] = `
{ const generateFooterBorder = (color: _EuiBackgroundColor) => { const borderToken = getTokenName( - 'borderStrong', + ['plain', 'subdued'].includes(color) ? 'borderBase' : 'borderStrong', color ) as keyof _EuiThemeBorderColors; @@ -151,6 +151,9 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { subdued: css` ${logicalCSS('border-top', generateFooterBorder('subdued'))} `, + highlighted: css` + ${logicalCSS('border-top', generateFooterBorder('plain'))} + `, primary: css` ${logicalCSS('border-top', generateFooterBorder('primary'))} `, diff --git a/packages/eui/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap b/packages/eui/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap index e4c6ab3aad81..78d0e33dff9f 100644 --- a/packages/eui/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap +++ b/packages/eui/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap @@ -82,6 +82,16 @@ exports[`EuiPageSection props color danger is rendered 1`] = ` `; +exports[`EuiPageSection props color highlighted is rendered 1`] = ` +
+
+
+`; + exports[`EuiPageSection props color plain is rendered 1`] = `
`; +exports[`EuiPanel props color highlighted is rendered 1`] = ` +
+`; + exports[`EuiPanel props color plain is rendered 1`] = `
shade(lightestShade, 0.45), + ['colors.lightestShade'] + ), + treeViewItemBackgroundHover: computed( ([text]) => transparentize(text, 0.2), ['colors.text'] From bb9248a0e9dcdcebbc493ab16770217109c23b23 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Mon, 9 Dec 2024 10:45:37 +0100 Subject: [PATCH 15/22] refactor: update flyout footer to use highlighted background --- packages/eui-theme-borealis/src/variables/_components.ts | 2 ++ .../src/global_styling/variables/components.ts | 1 + packages/eui/src/components/flyout/flyout_footer.styles.ts | 2 +- .../themes/amsterdam/global_styling/variables/_components.ts | 4 ++++ 4 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index abffb0657a31..2f9655c98564 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -85,6 +85,7 @@ const component_colors: _EuiThemeComponentColors = { filterSelectItemBackgroundFocusDisabled: background_colors.backgroundBaseDisabled, + flyoutFooterBackground: background_colors.backgroundBaseHighlighted, flyoutCloseButtonInsideBackground: background_colors.backgroundBasePlain, headerBackground: background_colors.backgroundBasePlain, @@ -220,6 +221,7 @@ export const components: _EuiThemeComponents = { filterSelectItemBackgroundFocusDisabled: dark_background_colors.backgroundBaseDisabled, + flyoutFooterBackground: dark_background_colors.backgroundBaseHighlighted, flyoutCloseButtonInsideBackground: dark_background_colors.backgroundBasePlain, 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 b0ea359ab5e2..b4e66de88a37 100644 --- a/packages/eui-theme-common/src/global_styling/variables/components.ts +++ b/packages/eui-theme-common/src/global_styling/variables/components.ts @@ -67,6 +67,7 @@ export type _EuiThemeComponentColors = { filterSelectItemBackgroundFocusDisabled: ColorModeSwitch; + flyoutFooterBackground: ColorModeSwitch; flyoutCloseButtonInsideBackground: ColorModeSwitch; keyPadMenuItemBackgroundDisabledSelect: ColorModeSwitch; diff --git a/packages/eui/src/components/flyout/flyout_footer.styles.ts b/packages/eui/src/components/flyout/flyout_footer.styles.ts index 8cb5b41ac313..81a07b58fe07 100644 --- a/packages/eui/src/components/flyout/flyout_footer.styles.ts +++ b/packages/eui/src/components/flyout/flyout_footer.styles.ts @@ -14,7 +14,7 @@ export const euiFlyoutFooterStyles = (euiThemeContext: UseEuiTheme) => { return { euiFlyoutFooter: css` - background-color: ${euiTheme.colors.lightestShade}; + background-color: ${euiTheme.components.flyoutFooterBackground}; flex-grow: 0; `, }; 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 85f6d6979eae..932358d30046 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts @@ -184,6 +184,10 @@ const component_colors: _EuiThemeComponentColors = { ['colors.disabled'] ), + flyoutFooterBackground: computed( + ([lightestShade]) => lightestShade, + ['colors.lightestShade'] + ), flyoutCloseButtonInsideBackground: computed( ([emptyShade]) => transparentize(emptyShade, 0.9), ['colors.emptyShade'] From 9b5ace3296fea77456796f2c165574fb72a459b1 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Mon, 9 Dec 2024 11:22:29 +0100 Subject: [PATCH 16/22] refactor: add highlighted background option control to comment stories --- packages/eui/src/components/comment_list/comment.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/eui/src/components/comment_list/comment.stories.tsx b/packages/eui/src/components/comment_list/comment.stories.tsx index eb66dc4c9b8b..79e975a59972 100644 --- a/packages/eui/src/components/comment_list/comment.stories.tsx +++ b/packages/eui/src/components/comment_list/comment.stories.tsx @@ -23,6 +23,7 @@ export const _eventColorArgType = { 'subdued', 'transparent', 'plain', + 'highlighted', 'warning', 'danger', 'success', From 772325c7c9acd65fc0d8c71af665d36ef488675b Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Mon, 9 Dec 2024 18:20:48 +0100 Subject: [PATCH 17/22] refactor: align default and subdued badge color mappings --- packages/eui-theme-borealis/src/variables/_components.ts | 2 ++ .../src/global_styling/variables/components.ts | 1 + packages/eui/src/components/badge/color_utils.ts | 5 ++++- .../themes/amsterdam/global_styling/variables/_components.ts | 4 ++++ 4 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index 2f9655c98564..9a5493a449c3 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -30,6 +30,7 @@ import { import { colorVis } from './colors/_colors_vis'; const component_colors: _EuiThemeComponentColors = { + badgeBackground: background_colors.backgroundLightText, badgeBackgroundSubdued: background_colors.backgroundLightText, badgeBorderColorHollow: border_colors.borderBasePlain, badgeIconButtonBackgroundHover: @@ -166,6 +167,7 @@ export const components: _EuiThemeComponents = { DARK: { ...component_colors, + badgeBackground: dark_background_colors.backgroundLightText, badgeBackgroundSubdued: dark_background_colors.backgroundLightText, badgeBorderColorHollow: dark_border_colors.borderBasePlain, badgeIconButtonBackgroundHover: 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 b4e66de88a37..fb1458cb4fb4 100644 --- a/packages/eui-theme-common/src/global_styling/variables/components.ts +++ b/packages/eui-theme-common/src/global_styling/variables/components.ts @@ -15,6 +15,7 @@ export type _EuiThemeComponentColors = { buttonGroupBorderColorSelected: ColorModeSwitch; buttonGroupFocusColor: ColorModeSwitch; + badgeBackground: ColorModeSwitch; badgeBackgroundSubdued: ColorModeSwitch; badgeBorderColorHollow: ColorModeSwitch; badgeIconButtonBackgroundHover: ColorModeSwitch; diff --git a/packages/eui/src/components/badge/color_utils.ts b/packages/eui/src/components/badge/color_utils.ts index 0e6256f3057f..ef668e5abe5f 100644 --- a/packages/eui/src/components/badge/color_utils.ts +++ b/packages/eui/src/components/badge/color_utils.ts @@ -28,7 +28,10 @@ export const euiBadgeColors = (euiThemeContext: UseEuiTheme) => { accentSecondary: euiButtonFillColor(euiThemeContext, 'accentSecondary'), disabled: euiButtonColor(euiThemeContext, 'disabled'), // Colors unique to badges - default: getBadgeColors(euiThemeContext, euiTheme.colors.lightShade), + default: getBadgeColors( + euiThemeContext, + euiTheme.components.badgeBackground + ), // Hollow has a border and is used for autocompleters and beta badges hollow: { ...getBadgeColors(euiThemeContext, euiTheme.colors.emptyShade), 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 932358d30046..023ad80ee916 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts @@ -24,6 +24,10 @@ import { forms } from './_forms'; import { colorVis } from './_colors_vis'; const component_colors: _EuiThemeComponentColors = { + badgeBackground: computed( + ([lightShade]) => lightShade, + ['colors.lightShade'] + ), badgeBackgroundSubdued: computed( ([lightShade]) => tint(lightShade, 0.3), ['colors.lightShade'] From 27f4581fbc39fc3f1cd1fca8d75c49f05813d562 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Mon, 9 Dec 2024 18:33:18 +0100 Subject: [PATCH 18/22] refactor: update legacy JSON warning color mappings --- packages/eui-theme-borealis/src/eui_theme_borealis_dark.json | 4 ++-- .../src/views/theme/_json/eui_theme_borealis_dark.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json index 5cb09778a979..c45f72e040a7 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json @@ -40,7 +40,7 @@ "accent": "#EE72A6", "accentSecondary": "#16C5C0", "success": "#24C292", - "warning": "#FCD883", + "warning": "#FACB3D", "danger": "#F6726A", "ghost": "#07101F", "text": "#8E9FBC" @@ -286,7 +286,7 @@ "euiColorAccent": "#EE72A6", "euiColorAccentSecondary": "#16C5C0", "euiColorSuccess": "#24C292", - "euiColorWarning": "#FCD883", + "euiColorWarning": "#FACB3D", "euiColorDanger": "#F6726A", "euiColorEmptyShade": "#0B1628", "euiColorLightestShade": "#172336", diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json index 5cb09778a979..c45f72e040a7 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json @@ -40,7 +40,7 @@ "accent": "#EE72A6", "accentSecondary": "#16C5C0", "success": "#24C292", - "warning": "#FCD883", + "warning": "#FACB3D", "danger": "#F6726A", "ghost": "#07101F", "text": "#8E9FBC" @@ -286,7 +286,7 @@ "euiColorAccent": "#EE72A6", "euiColorAccentSecondary": "#16C5C0", "euiColorSuccess": "#24C292", - "euiColorWarning": "#FCD883", + "euiColorWarning": "#FACB3D", "euiColorDanger": "#F6726A", "euiColorEmptyShade": "#0B1628", "euiColorLightestShade": "#172336", From c8f257e1dbb1cd00f5a221d68eef4d0b43baa5d7 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Wed, 11 Dec 2024 10:25:59 +0100 Subject: [PATCH 19/22] refactor: update plainLightAlpha6 to plainLightAlpha8 --- .../eui-theme-borealis/src/variables/colors/_colors_dark.scss | 4 ++-- .../eui-theme-borealis/src/variables/colors/_colors_dark.ts | 4 ++-- .../src/variables/colors/_semantic_colors.scss | 2 +- .../src/variables/colors/_semantic_colors.ts | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss index 54eee28fe390..b7d7ebae02b7 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss @@ -43,11 +43,11 @@ $euiColorBackgroundBaseHighlighted: $euiColorShade135 !default; $euiColorBackgroundBaseFormsPrepend: $euiColorShade125 !default; $euiColorBackgroundBaseFormsControlDisabled: $euiColorShade120 !default; -$euiColorBackgroundBaseInteractiveHover: $euiColorPlainLightAlpha6 !default; +$euiColorBackgroundBaseInteractiveHover: $euiColorPlainLightAlpha8 !default; $euiColorBackgroundBaseInteractiveSelect: $euiColorPrimary130 !default; $euiColorBackgroundBaseInteractiveOverlay: $euiColorShade120Alpha70 !default; $euiColorBackgroundBaseSkeletonEdge: $euiColorPlainLightAlpha16 !default; -$euiColorBackgroundBaseSkeletonMiddle: $euiColorPlainLightAlpha6 !default; +$euiColorBackgroundBaseSkeletonMiddle: $euiColorPlainLightAlpha8 !default; $euiColorBackgroundLightPrimary: $euiColorPrimary130 !default; $euiColorBackgroundLightAccent: $euiColorAccent130 !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts index 32f9b338bff0..8b43d5cc2d0f 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts @@ -91,12 +91,12 @@ export const dark_background_colors: _EuiThemeBackgroundColors = { backgroundBaseFormsPrepend: SEMANTIC_COLORS.shade125, backgroundBaseFormsControlDisabled: SEMANTIC_COLORS.shade120, - backgroundBaseInteractiveHover: SEMANTIC_COLORS.plainLightAlpha6, + backgroundBaseInteractiveHover: SEMANTIC_COLORS.plainLightAlpha8, backgroundBaseInteractiveSelect: SEMANTIC_COLORS.primary130, backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shade120Alpha70, backgroundBaseSkeletonEdge: SEMANTIC_COLORS.plainLightAlpha16, - backgroundBaseSkeletonMiddle: SEMANTIC_COLORS.plainLightAlpha6, + backgroundBaseSkeletonMiddle: SEMANTIC_COLORS.plainLightAlpha8, backgroundLightPrimary: SEMANTIC_COLORS.primary130, backgroundLightAccent: SEMANTIC_COLORS.accent130, diff --git a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss index ce0ac211ff73..fee223f6d9b9 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss @@ -14,7 +14,7 @@ $euiColorTransparent: 'transparent' !default; $euiColorPlainLight: $euiColorWhite !default; $euiColorPlainDark: $euiColorBlueBlack !default; -$euiColorPlainLightAlpha6: 'rgba(255, 255, 255, 0.06)' !default; +$euiColorPlainLightAlpha8: 'rgba(255, 255, 255, 0.08)' !default; $euiColorPlainLightAlpha12: 'rgba(255, 255, 255, 0.12)' !default; $euiColorPlainLightAlpha16: 'rgba(255, 255, 255, 0.16)' !default; $euiColorPlainLightAlpha32: 'rgba(255, 255, 255, 0.32)' !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts index 9a75b777846c..04d5d833d7b8 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts @@ -12,7 +12,7 @@ export const SEMANTIC_COLORS = { plainLight: PRIMITIVE_COLORS.white, plainDark: PRIMITIVE_COLORS.blueBlack, - plainLightAlpha6: 'rgba(255, 255, 255, 0.06)', + plainLightAlpha8: 'rgba(255, 255, 255, 0.08)', plainLightAlpha12: 'rgba(255, 255, 255, 0.12)', plainLightAlpha16: 'rgba(255, 255, 255, 0.16)', plainLightAlpha32: 'rgba(255, 255, 255, 0.32)', From 0a7507bd25437ce827c58a9b2e183cf1069481bb Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Wed, 11 Dec 2024 11:07:17 +0100 Subject: [PATCH 20/22] refactor: update white/black usages to full hex codes --- .../variables/colors/_semantic_colors.scss | 4 +-- .../badge/__snapshots__/badge.test.tsx.snap | 4 +-- .../markdown_format.styles.test.ts.snap | 14 +++++----- .../mixins/__snapshots__/_button.test.ts.snap | 28 +++++++++---------- .../global_styling/variables/_colors.ts | 8 +++--- 5 files changed, 29 insertions(+), 29 deletions(-) diff --git a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss index fee223f6d9b9..1dc84085e694 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss @@ -5,8 +5,8 @@ */ -$euiColorWhite: #FFF !default; -$euiColorBlack: #000 !default; +$euiColorWhite: #FFFFFF !default; +$euiColorBlack: #000000 !default; $euiColorMutedBlack: #0E0F12 !default; $euiColorBlueBlack: #050F21 !default; $euiColorTransparent: 'transparent' !default; diff --git a/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap b/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap index 0bdf7afbfacf..fd18535655e1 100644 --- a/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap +++ b/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap @@ -195,7 +195,7 @@ exports[`EuiBadge props color accentSecondary is rendered 1`] = ` exports[`EuiBadge props color accepts hex 1`] = ` Date: Wed, 11 Dec 2024 11:16:34 +0100 Subject: [PATCH 21/22] refactor: inherit base colors for alpha colors - utilizes chroma for conversion of hex to rgb; as this runs only once on initial theme built, the impact of the calculation should be no problem --- packages/eui-theme-borealis/package.json | 4 + .../variables/colors/_semantic_colors.scss | 48 +++++------ .../src/variables/colors/_semantic_colors.ts | 85 ++++++++++++------- yarn.lock | 1 + 4 files changed, 81 insertions(+), 57 deletions(-) diff --git a/packages/eui-theme-borealis/package.json b/packages/eui-theme-borealis/package.json index de2a51e241f7..9f9dbeff7889 100644 --- a/packages/eui-theme-borealis/package.json +++ b/packages/eui-theme-borealis/package.json @@ -23,6 +23,9 @@ "url": "https://github.com/elastic/eui.git", "directory": "packages/eui-theme-borealis" }, + "dependency": { + "chroma-js": "^2.4.2" + }, "devDependencies": { "@babel/cli": "^7.21.5", "@babel/core": "^7.21.8", @@ -30,6 +33,7 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.21.5", "@elastic/eui-theme-common": "workspace:^", + "@types/chroma-js": "^2.4.0", "@types/jest": "^29.5.12", "@types/prettier": "2.7.3", "@typescript-eslint/eslint-plugin": "^5.59.7", diff --git a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss index 1dc84085e694..ed5ece438ae5 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss @@ -14,10 +14,10 @@ $euiColorTransparent: 'transparent' !default; $euiColorPlainLight: $euiColorWhite !default; $euiColorPlainDark: $euiColorBlueBlack !default; -$euiColorPlainLightAlpha8: 'rgba(255, 255, 255, 0.08)' !default; -$euiColorPlainLightAlpha12: 'rgba(255, 255, 255, 0.12)' !default; -$euiColorPlainLightAlpha16: 'rgba(255, 255, 255, 0.16)' !default; -$euiColorPlainLightAlpha32: 'rgba(255, 255, 255, 0.32)' !default; +$euiColorPlainLightAlpha8: rgba($euiColorPlainLight, 0.08) !default; +$euiColorPlainLightAlpha12: rgba($euiColorPlainLight, 0.12) !default; +$euiColorPlainLightAlpha16: rgba($euiColorPlainLight, 0.16) !default; +$euiColorPlainLightAlpha32: rgba($euiColorPlainLight, 0.32) !default; $euiColorPrimary10: #E8F1FF !default; $euiColorPrimary20: #D9E8FF !default; @@ -34,12 +34,12 @@ $euiColorPrimary120: #123778 !default; $euiColorPrimary130: #0D2F5E !default; $euiColorPrimary140: #0A2342 !default; -$euiColorPrimary70Alpha12: 'rgba(55, 136, 255, 0.12)' !default; -$euiColorPrimary70Alpha16: 'rgba(55, 136, 255, 0.16)' !default; +$euiColorPrimary70Alpha12: rgba($euiColorPrimary70, 0.12) !default; +$euiColorPrimary70Alpha16: rgba($euiColorPrimary70, 0.16) !default; -$euiColorPrimary100Alpha4: 'rgba(23, 80, 186, 0.04)' !default; -$euiColorPrimary100Alpha8: 'rgba(23, 80, 186, 0.08)' !default; -$euiColorPrimary100Alpha12: 'rgba(23, 80, 186, 0.12)' !default; +$euiColorPrimary100Alpha4: rgba($euiColorPrimary100, 0.04) !default; +$euiColorPrimary100Alpha8: rgba($euiColorPrimary100, 0.08) !default; +$euiColorPrimary100Alpha12: rgba($euiColorPrimary100, 0.12) !default; $euiColorAccent10: #FFEBF5 !default; $euiColorAccent20: #FDDDE9 !default; @@ -56,8 +56,8 @@ $euiColorAccent120: #5E2140 !default; $euiColorAccent130: #481E32 !default; $euiColorAccent140: #351725 !default; -$euiColorAccent70Alpha12: 'rgba(229, 74, 145, 0.12)' !default; -$euiColorAccent70Alpha16: 'rgba(229, 74, 145, 0.16)' !default; +$euiColorAccent70Alpha12: rgba($euiColorAccent70, 0.12) !default; +$euiColorAccent70Alpha16: rgba($euiColorAccent70, 0.16) !default; $euiColorAccentSecondary10: #E2F9F7 !default; $euiColorAccentSecondary20: #C9F3F0 !default; @@ -74,8 +74,8 @@ $euiColorAccentSecondary120: #044949 !default; $euiColorAccentSecondary130: #023436 !default; $euiColorAccentSecondary140: #03282B !default; -$euiColorAccentSecondary70Alpha12: 'rgba(0, 176, 170, 0.12)' !default; -$euiColorAccentSecondary70Alpha16: 'rgba(0, 176, 170, 0.16)' !default; +$euiColorAccentSecondary70Alpha12: rgba($euiColorAccentSecondary70, 0.12) !default; +$euiColorAccentSecondary70Alpha16: rgba($euiColorAccentSecondary70, 0.16) !default; $euiColorSuccess10: #E2F8F0 !default; $euiColorSuccess20: #C9F3E3 !default; @@ -92,8 +92,8 @@ $euiColorSuccess120: #094837 !default; $euiColorSuccess130: #0D362B !default; $euiColorSuccess140: #092A26 !default; -$euiColorSuccess70Alpha12: 'rgba(4, 174, 126, 0.12)' !default; -$euiColorSuccess70Alpha16: 'rgba(4, 174, 126, 0.16)' !default; +$euiColorSuccess70Alpha12: rgba($euiColorSuccess70, 0.12) !default; +$euiColorSuccess70Alpha16: rgba($euiColorSuccess70, 0.16) !default; $euiColorWarning10: #FDF3D8 !default; $euiColorWarning20: #FDE9B5 !default; @@ -110,8 +110,8 @@ $euiColorWarning120: #513910 !default; $euiColorWarning130: #3D3014 !default; $euiColorWarning140: #2C2721 !default; -$euiColorWarning40Alpha12: 'rgba(250, 203, 61, 0.12)' !default; -$euiColorWarning40Alpha24: 'rgba(250, 203, 61, 0.24)' !default; +$euiColorWarning40Alpha12: rgba($euiColorWarning40, 0.12) !default; +$euiColorWarning40Alpha24: rgba($euiColorWarning40, 0.24) !default; $euiColorDanger10: #FFE8E5 !default; $euiColorDanger20: #FDDDD8 !default; @@ -128,8 +128,8 @@ $euiColorDanger120: #5E2129 !default; $euiColorDanger130: #491D27 !default; $euiColorDanger140: #351721 !default; -$euiColorDanger70Alpha12: 'rgba(238, 75, 72, 0.12)' !default; -$euiColorDanger70Alpha16: 'rgba(238, 75, 72, 0.16)' !default; +$euiColorDanger70Alpha12: rgba($euiColorDanger70, 0.12) !default; +$euiColorDanger70Alpha16: rgba($euiColorDanger70, 0.16) !default; $euiColorAssistance10: #F3ECFE !default; $euiColorAssistance20: #ECE2FE !default; @@ -175,11 +175,11 @@ $euiColorShade135: #172336 !default; $euiColorShade140: #111C2C !default; $euiColorShade145: #0B1628 !default; -$euiColorShade100Alpha4: 'rgba(72, 89, 117, 0.04)' !default; -$euiColorShade100Alpha16: 'rgba(72, 89, 117, 0.16)' !default; -$euiColorShade100Alpha24: 'rgba(72, 89, 117, 0.24)' !default; -$euiColorShade100Alpha70: 'rgba(72, 89, 117, 0.7)' !default; +$euiColorShade100Alpha4: rgba($euiColorShade100, 0.04) !default; +$euiColorShade100Alpha16: rgba($euiColorShade100, 0.16) !default; +$euiColorShade100Alpha24: rgba($euiColorShade100, 0.24) !default; +$euiColorShade100Alpha70: rgba($euiColorShade100, 0.7) !default; -$euiColorShade120Alpha70: 'rgba(43, 57, 79, 0.7)' !default; +$euiColorShade120Alpha70: rgba($euiColorShade120, 0.7) !default; \ No newline at end of file diff --git a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts index 04d5d833d7b8..33031008ef8d 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts @@ -6,17 +6,13 @@ * Side Public License, v 1. */ +import chroma from 'chroma-js'; import { PRIMITIVE_COLORS } from './_primitive_colors'; -export const SEMANTIC_COLORS = { +const _semantic_colors = { plainLight: PRIMITIVE_COLORS.white, plainDark: PRIMITIVE_COLORS.blueBlack, - plainLightAlpha8: 'rgba(255, 255, 255, 0.08)', - plainLightAlpha12: 'rgba(255, 255, 255, 0.12)', - plainLightAlpha16: 'rgba(255, 255, 255, 0.16)', - plainLightAlpha32: 'rgba(255, 255, 255, 0.32)', - primary10: PRIMITIVE_COLORS.blue10, primary20: PRIMITIVE_COLORS.blue20, primary30: PRIMITIVE_COLORS.blue30, @@ -32,13 +28,6 @@ export const SEMANTIC_COLORS = { primary130: PRIMITIVE_COLORS.blue130, primary140: PRIMITIVE_COLORS.blue140, - primary70Alpha12: 'rgba(55, 136, 255, 0.12)', - primary70Alpha16: 'rgba(55, 136, 255, 0.16)', - - primary100Alpha4: 'rgba(23, 80, 186, 0.04)', - primary100Alpha8: 'rgba(23, 80, 186, 0.08)', - primary100Alpha12: 'rgba(23, 80, 186, 0.12)', - accent10: PRIMITIVE_COLORS.pink10, accent20: PRIMITIVE_COLORS.pink20, accent30: PRIMITIVE_COLORS.pink30, @@ -54,9 +43,6 @@ export const SEMANTIC_COLORS = { accent130: PRIMITIVE_COLORS.pink130, accent140: PRIMITIVE_COLORS.pink140, - accent70Alpha12: 'rgba(229, 74, 145, 0.12)', - accent70Alpha16: 'rgba(229, 74, 145, 0.16)', - accentSecondary10: PRIMITIVE_COLORS.teal10, accentSecondary20: PRIMITIVE_COLORS.teal20, accentSecondary30: PRIMITIVE_COLORS.teal30, @@ -72,9 +58,6 @@ export const SEMANTIC_COLORS = { accentSecondary130: PRIMITIVE_COLORS.teal130, accentSecondary140: PRIMITIVE_COLORS.teal140, - accentSecondary70Alpha12: 'rgba(0, 176, 170, 0.12)', - accentSecondary70Alpha16: 'rgba(0, 176, 170, 0.16)', - success10: PRIMITIVE_COLORS.green10, success20: PRIMITIVE_COLORS.green20, success30: PRIMITIVE_COLORS.green30, @@ -90,9 +73,6 @@ export const SEMANTIC_COLORS = { success130: PRIMITIVE_COLORS.green130, success140: PRIMITIVE_COLORS.green140, - success70Alpha12: 'rgba(4, 174, 126, 0.12)', - success70Alpha16: 'rgba(4, 174, 126, 0.16)', - warning10: PRIMITIVE_COLORS.yellow10, warning20: PRIMITIVE_COLORS.yellow20, warning30: PRIMITIVE_COLORS.yellow30, @@ -108,9 +88,6 @@ export const SEMANTIC_COLORS = { warning130: PRIMITIVE_COLORS.yellow130, warning140: PRIMITIVE_COLORS.yellow140, - warning40Alpha12: 'rgba(250, 203, 61, 0.12)', - warning40Alpha24: 'rgba(250, 203, 61, 0.24)', - danger10: PRIMITIVE_COLORS.red10, danger20: PRIMITIVE_COLORS.red20, danger30: PRIMITIVE_COLORS.red30, @@ -126,9 +103,6 @@ export const SEMANTIC_COLORS = { danger130: PRIMITIVE_COLORS.red130, danger140: PRIMITIVE_COLORS.red140, - danger70Alpha12: 'rgba(238, 75, 72, 0.12)', - danger70Alpha16: 'rgba(238, 75, 72, 0.16)', - assistance10: PRIMITIVE_COLORS.purple10, assistance20: PRIMITIVE_COLORS.purple20, assistance30: PRIMITIVE_COLORS.purple30, @@ -172,11 +146,56 @@ export const SEMANTIC_COLORS = { shade135: PRIMITIVE_COLORS.blueGrey135, shade140: PRIMITIVE_COLORS.blueGrey140, shade145: PRIMITIVE_COLORS.blueGrey145, +}; + +const plainLightRGB = chroma(_semantic_colors.plainLight); +const primary70RGB = chroma(_semantic_colors.primary70); +const primary100RGB = chroma(_semantic_colors.primary100); +const accent70RGB = chroma(_semantic_colors.accent70); +const accentSecondary70RGB = chroma(_semantic_colors.accentSecondary70); +const success70RGB = chroma(_semantic_colors.success70); +const warning40RGB = chroma(_semantic_colors.warning40); +const danger70RGB = chroma(_semantic_colors.danger70); +const shade100RGB = chroma(_semantic_colors.shade100); +const shade120RGB = chroma(_semantic_colors.shade120); - shade100Alpha4: 'rgba(72, 89, 117, 0.04)', - shade100Alpha16: 'rgba(72, 89, 117, 0.16)', - shade100Alpha24: 'rgba(72, 89, 117, 0.24)', - shade100Alpha70: 'rgba(72, 89, 117, 0.7)', +const _semantic_alpha_colors = { + plainLightAlpha8: `rgba(${chroma(plainLightRGB)}, 0.08)`, + plainLightAlpha12: `rgba(${chroma(plainLightRGB)}, 0.12)`, + plainLightAlpha16: `rgba(${chroma(plainLightRGB)}, 0.16)`, + plainLightAlpha32: `rgba(${chroma(plainLightRGB)}, 0.32)`, - shade120Alpha70: 'rgba(43, 57, 79, 0.7)', + primary70Alpha12: `rgba(${chroma(primary70RGB)}, 0.12)`, + primary70Alpha16: `rgba(${chroma(primary70RGB)}, 0.16)`, + + primary100Alpha4: `rgba(${chroma(primary100RGB)}, 0.04)`, + primary100Alpha8: `rgba(${chroma(primary100RGB)}, 0.08)`, + primary100Alpha12: `rgba(${chroma(primary100RGB)}, 0.12)`, + + accent70Alpha12: `rgba(${chroma(accent70RGB)}, 0.12)`, + accent70Alpha16: `rgba(${chroma(accent70RGB)}, 0.16)`, + + accentSecondary70Alpha12: `rgba(${chroma(accentSecondary70RGB)}, 0.12)`, + accentSecondary70Alpha16: `rgba(${chroma(accentSecondary70RGB)}, 0.16)`, + + success70Alpha12: `rgba(${chroma(success70RGB)}, 0.12)`, + success70Alpha16: `rgba(${chroma(success70RGB)}, 0.16)`, + + warning40Alpha12: `rgba(${chroma(warning40RGB)}, 0.12)`, + warning40Alpha24: `rgba(${chroma(warning40RGB)}, 0.24)`, + + danger70Alpha12: `rgba(${chroma(danger70RGB)}, 0.12)`, + danger70Alpha16: `rgba(${chroma(danger70RGB)}, 0.16)`, + + shade100Alpha4: `rgba(${chroma(shade100RGB)}, 0.04)`, + shade100Alpha16: `rgba(${chroma(shade100RGB)}, 0.16)`, + shade100Alpha24: `rgba(${chroma(shade100RGB)}, 0.24)`, + shade100Alpha70: `rgba(${chroma(shade100RGB)}, 0.7)`, + + shade120Alpha70: `rgba(${chroma(shade120RGB)}, 0.7)`, +}; + +export const SEMANTIC_COLORS = { + ..._semantic_colors, + ..._semantic_alpha_colors, }; diff --git a/yarn.lock b/yarn.lock index 7c732ab0e3d0..9c91937ad47e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4649,6 +4649,7 @@ __metadata: "@babel/preset-react": "npm:^7.18.6" "@babel/preset-typescript": "npm:^7.21.5" "@elastic/eui-theme-common": "workspace:^" + "@types/chroma-js": "npm:^2.4.0" "@types/jest": "npm:^29.5.12" "@types/prettier": "npm:2.7.3" "@typescript-eslint/eslint-plugin": "npm:^5.59.7" From 0521dcbf2d1bed3c4b8e63bfc88afcb275abe148 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Wed, 11 Dec 2024 11:16:44 +0100 Subject: [PATCH 22/22] chore: cleanup --- packages/eui/src-docs/src/views/theme/color/_color_sass.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx b/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx index fa9c5b9de336..c39d808a29e9 100644 --- a/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx +++ b/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx @@ -139,8 +139,6 @@ export const ShadeSass: FunctionComponent = ({ description }) => { export const ShadeValuesSass = () => { const values = useJsonVars(); - console.log('values', values, values.euiColorEmptyShade); - return ( <>