diff --git a/packages/eui-theme-borealis/package.json b/packages/eui-theme-borealis/package.json index de2a51e241f..9f9dbeff788 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/eui_theme_borealis_dark.json b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json index 37c668610c4..c45f72e040a 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": "#FACB3D", + "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": "#FACB3D", + "euiColorDanger": "#F6726A", "euiColorEmptyShade": "#0B1628", "euiColorLightestShade": "#172336", "euiColorLightShade": "#243147", @@ -297,18 +297,18 @@ "euiColorFullShade": "#FFFFFF", "euiPageBackgroundColor": "#07101F", "euiColorHighlight": "#1750BA", - "euiTextColor": "#E3E8F2", - "euiTitleColor": "#ECF1F9", + "euiTextColor": "#CAD3E2", + "euiTitleColor": "#E3E8F2", "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 25537e2d6d9..2e752c4161b 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,8 +296,8 @@ "euiColorDarkestShade": "#2B394F", "euiColorFullShade": "#07101F", "euiPageBackgroundColor": "#F6F9FC", - "euiColorHighlight": "#E5F3FF", - "euiTextColor": "#172336", + "euiColorHighlight": "#E8F1FF", + "euiTextColor": "#1D2A3E", "euiTitleColor": "#111C2C", "euiTextSubduedColor": "#5A6D8C", "euiColorDisabled": "#E3E8F2", diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index c10426fe094..9a5493a449c 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -30,7 +30,8 @@ import { import { colorVis } from './colors/_colors_vis'; const component_colors: _EuiThemeComponentColors = { - badgeBackgroundSubdued: background_colors.backgroundBaseSubdued, + badgeBackground: background_colors.backgroundLightText, + badgeBackgroundSubdued: background_colors.backgroundLightText, badgeBorderColorHollow: border_colors.borderBasePlain, badgeIconButtonBackgroundHover: background_colors.backgroundBaseInteractiveHover, @@ -44,7 +45,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, @@ -72,9 +73,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, @@ -82,6 +86,7 @@ const component_colors: _EuiThemeComponentColors = { filterSelectItemBackgroundFocusDisabled: background_colors.backgroundBaseDisabled, + flyoutFooterBackground: background_colors.backgroundBaseHighlighted, flyoutCloseButtonInsideBackground: background_colors.backgroundBasePlain, headerBackground: background_colors.backgroundBasePlain, @@ -150,7 +155,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, }; @@ -162,7 +167,8 @@ export const components: _EuiThemeComponents = { DARK: { ...component_colors, - badgeBackgroundSubdued: dark_background_colors.backgroundBaseSubdued, + badgeBackground: dark_background_colors.backgroundLightText, + badgeBackgroundSubdued: dark_background_colors.backgroundLightText, badgeBorderColorHollow: dark_border_colors.borderBasePlain, badgeIconButtonBackgroundHover: dark_background_colors.backgroundBaseInteractiveHover, @@ -175,7 +181,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, @@ -207,6 +213,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: @@ -215,6 +223,7 @@ export const components: _EuiThemeComponents = { filterSelectItemBackgroundFocusDisabled: dark_background_colors.backgroundBaseDisabled, + flyoutFooterBackground: dark_background_colors.backgroundBaseHighlighted, flyoutCloseButtonInsideBackground: dark_background_colors.backgroundBasePlain, @@ -281,7 +290,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-theme-borealis/src/variables/colors/_colors_dark.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss index 9a6c67e2858..b7d7ebae02b 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss @@ -39,14 +39,15 @@ $euiColorBackgroundBaseDanger: $euiColorDanger140 !default; $euiColorBackgroundBaseSubdued: $euiColorPlainDark !default; $euiColorBackgroundBasePlain: $euiColorShade145 !default; $euiColorBackgroundBaseDisabled: $euiColorShade130 !default; +$euiColorBackgroundBaseHighlighted: $euiColorShade135 !default; $euiColorBackgroundBaseFormsPrepend: $euiColorShade125 !default; $euiColorBackgroundBaseFormsControlDisabled: $euiColorShade120 !default; -$euiColorBackgroundBaseInteractiveHover: $euiColorTransparentWhite10 !default; -$euiColorBackgroundBaseInteractiveSelect: $euiColorShade125 !default; -$euiColorBackgroundBaseInteractiveOverlay: $euiColorShadeTransparent80 !default; -$euiColorBackgroundBaseSkeletonEdge: $euiColorTransparentWhite10 !default; -$euiColorBackgroundBaseSkeletonMiddle: $euiColorTransparentWhite30 !default; +$euiColorBackgroundBaseInteractiveHover: $euiColorPlainLightAlpha8 !default; +$euiColorBackgroundBaseInteractiveSelect: $euiColorPrimary130 !default; +$euiColorBackgroundBaseInteractiveOverlay: $euiColorShade120Alpha70 !default; +$euiColorBackgroundBaseSkeletonEdge: $euiColorPlainLightAlpha16 !default; +$euiColorBackgroundBaseSkeletonMiddle: $euiColorPlainLightAlpha8 !default; $euiColorBackgroundLightPrimary: $euiColorPrimary130 !default; $euiColorBackgroundLightAccent: $euiColorAccent130 !default; @@ -65,16 +66,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; @@ -106,7 +107,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 dd372c8fc61..8b43d5cc2d0 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, @@ -86,16 +86,17 @@ 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, - backgroundBaseInteractiveHover: PRIMITIVE_COLORS.transparent.white10, - backgroundBaseInteractiveSelect: SEMANTIC_COLORS.shade125, - backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shadeTransparent80, + backgroundBaseInteractiveHover: SEMANTIC_COLORS.plainLightAlpha8, + backgroundBaseInteractiveSelect: SEMANTIC_COLORS.primary130, + backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shade120Alpha70, - backgroundBaseSkeletonEdge: PRIMITIVE_COLORS.transparent.white30, - backgroundBaseSkeletonMiddle: PRIMITIVE_COLORS.transparent.white10, + backgroundBaseSkeletonEdge: SEMANTIC_COLORS.plainLightAlpha16, + backgroundBaseSkeletonMiddle: SEMANTIC_COLORS.plainLightAlpha8, backgroundLightPrimary: SEMANTIC_COLORS.primary130, backgroundLightAccent: SEMANTIC_COLORS.accent130, @@ -121,7 +122,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: @@ -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, }; @@ -146,7 +149,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, @@ -166,7 +169,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.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss index 4314e654af5..e70eae21c44 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss @@ -40,14 +40,15 @@ $euiColorBackgroundBaseDanger: $euiColorDanger10 !default; $euiColorBackgroundBaseSubdued: $euiColorShade10 !default; $euiColorBackgroundBasePlain: $euiColorPlainLight !default; $euiColorBackgroundBaseDisabled: $euiColorShade15 !default; +$euiColorBackgroundBaseHighlighted: $euiColorShade10 !default; $euiColorBackgroundBaseFormsPrepend: $euiColorShade15 !default; $euiColorBackgroundBaseFormsControlDisabled: $euiColorShade30 !default; -$euiColorBackgroundBaseInteractiveHover: $euiColorShadeTransparent10 !default; -$euiColorBackgroundBaseInteractiveSelect: $euiColorShade15 !default; -$euiColorBackgroundBaseInteractiveOverlay: $euiColorShadeTransparent80 !default; -$euiColorBackgroundBaseSkeletonEdge: $euiColorShadeTransparent30 !default; -$euiColorBackgroundBaseSkeletonMiddle: $euiColorShadeTransparent10 !default; +$euiColorBackgroundBaseInteractiveHover: $euiColorPrimary100Alpha4 !default; +$euiColorBackgroundBaseInteractiveSelect: $euiColorPrimary10 !default; +$euiColorBackgroundBaseInteractiveOverlay: $euiColorShade100Alpha70 !default; +$euiColorBackgroundBaseSkeletonEdge: $euiColorShade100Alpha16 !default; +$euiColorBackgroundBaseSkeletonMiddle: $euiColorShade100Alpha4 !default; $euiColorBackgroundLightPrimary: $euiColorPrimary20 !default; $euiColorBackgroundLightAccent: $euiColorAccent20 !default; @@ -61,12 +62,12 @@ $euiColorBackgroundFilledPrimary: $euiColorPrimary90 !default; $euiColorBackgroundFilledAccent: $euiColorAccent90 !default; $euiColorBackgroundFilledAccentSecondary: $euiColorAccentSecondary90 !default; $euiColorBackgroundFilledSuccess: $euiColorSuccess90 !default; -$euiColorBackgroundFilledWarning: $euiColorWarning90 !default; +$euiColorBackgroundFilledWarning: $euiColorWarning40 !default; $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 +75,7 @@ $euiColorDisabledText: $euiColorShade70 !default; $euiLinkColor: $euiColorPrimary100 !default; // Texts -$euiColorTextParagraph: $euiColorShade135 !default; +$euiColorTextParagraph: $euiColorShade130 !default; $euiColorTextHeading: $euiColorShade140 !default; $euiColorTextSubdued: $euiColorShade90 !default; $euiColorTextDisabled: $euiColorShade70 !default; @@ -106,9 +107,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 f219df5a310..a1c27cfb261 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, @@ -86,16 +86,17 @@ 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, - backgroundBaseInteractiveHover: SEMANTIC_COLORS.shadeTransparent10, - backgroundBaseInteractiveSelect: SEMANTIC_COLORS.shade15, - backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shadeTransparent80, + backgroundBaseInteractiveHover: SEMANTIC_COLORS.primary100Alpha4, + backgroundBaseInteractiveSelect: SEMANTIC_COLORS.primary10, + 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 +122,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: @@ -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, }; @@ -144,9 +146,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, @@ -166,7 +168,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/_primitive_colors.ts b/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts index 2693e39a52f..128d145f947 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', @@ -117,12 +71,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 +88,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 +103,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 +118,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 +133,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 +148,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 5852aebb6f3..ed5ece438ae 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss @@ -5,66 +5,26 @@ */ -$euiColorWhite: #FFF !default; -$euiColorBlack: #000 !default; +$euiColorWhite: #FFFFFF !default; +$euiColorBlack: #000000 !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; -$euiColorPrimary10: #E5F3FF !default; -$euiColorPrimary20: #D6E9FF !default; -$euiColorPrimary30: #B4D5FF !default; -$euiColorPrimary40: #96C3FF !default; -$euiColorPrimary50: #78B0FF !default; -$euiColorPrimary60: #599DFF !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; +$euiColorPrimary30: #BFDBFF !default; +$euiColorPrimary40: #A3CBFF !default; +$euiColorPrimary50: #85B7FF !default; +$euiColorPrimary60: #61A2FF !default; $euiColorPrimary70: #3788FF !default; $euiColorPrimary80: #2476F0 !default; $euiColorPrimary90: #0B64DD !default; @@ -74,12 +34,19 @@ $euiColorPrimary120: #123778 !default; $euiColorPrimary130: #0D2F5E !default; $euiColorPrimary140: #0A2342 !default; +$euiColorPrimary70Alpha12: rgba($euiColorPrimary70, 0.12) !default; +$euiColorPrimary70Alpha16: rgba($euiColorPrimary70, 0.16) !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; -$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; @@ -89,12 +56,15 @@ $euiColorAccent120: #5E2140 !default; $euiColorAccent130: #481E32 !default; $euiColorAccent140: #351725 !default; +$euiColorAccent70Alpha12: rgba($euiColorAccent70, 0.12) !default; +$euiColorAccent70Alpha16: rgba($euiColorAccent70, 0.16) !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; @@ -104,12 +74,15 @@ $euiColorAccentSecondary120: #044949 !default; $euiColorAccentSecondary130: #023436 !default; $euiColorAccentSecondary140: #03282B !default; +$euiColorAccentSecondary70Alpha12: rgba($euiColorAccentSecondary70, 0.12) !default; +$euiColorAccentSecondary70Alpha16: rgba($euiColorAccentSecondary70, 0.16) !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; @@ -119,12 +92,15 @@ $euiColorSuccess120: #094837 !default; $euiColorSuccess130: #0D362B !default; $euiColorSuccess140: #092A26 !default; +$euiColorSuccess70Alpha12: rgba($euiColorSuccess70, 0.12) !default; +$euiColorSuccess70Alpha16: rgba($euiColorSuccess70, 0.16) !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; @@ -134,12 +110,15 @@ $euiColorWarning120: #513910 !default; $euiColorWarning130: #3D3014 !default; $euiColorWarning140: #2C2721 !default; +$euiColorWarning40Alpha12: rgba($euiColorWarning40, 0.12) !default; +$euiColorWarning40Alpha24: rgba($euiColorWarning40, 0.24) !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; @@ -149,6 +128,9 @@ $euiColorDanger120: #5E2129 !default; $euiColorDanger130: #491D27 !default; $euiColorDanger140: #351721 !default; +$euiColorDanger70Alpha12: rgba($euiColorDanger70, 0.12) !default; +$euiColorDanger70Alpha16: rgba($euiColorDanger70, 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($euiColorShade100, 0.04) !default; +$euiColorShade100Alpha16: rgba($euiColorShade100, 0.16) !default; +$euiColorShade100Alpha24: rgba($euiColorShade100, 0.24) !default; +$euiColorShade100Alpha70: rgba($euiColorShade100, 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 c148d592631..33031008ef8 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts @@ -6,9 +6,10 @@ * 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, @@ -145,19 +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); + +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)`, + + 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)`, - 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, + 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/packages/eui-theme-borealis/src/variables/colors/index.ts b/packages/eui-theme-borealis/src/variables/colors/index.ts index e59c0fbff87..a6e61366653 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 b0d36f3eab8..0bf994e7f58 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; }; @@ -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; }; @@ -316,6 +319,10 @@ export type _EuiThemeConstantColors = { * @deprecated */ ink: string; + + plainLight: string; + plainDark: string; + vis: _EuiThemeVisColors; }; 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 ad0681fbec4..fb1458cb4fb 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; @@ -51,9 +52,11 @@ export type _EuiThemeComponentColors = { collapsibleNavGroupBackground: ColorModeSwitch; collapsibleNavGroupBackgroundDark: ColorModeSwitch; + dataGridBorderColor: ColorModeSwitch; dataGridVerticalLineBorderColor: ColorModeSwitch; dataGridRowBackgroundStriped: ColorModeSwitch; dataGridRowBackgroundHover: ColorModeSwitch; + dataGridRowBackgroundSelect: ColorModeSwitch; dragDropDraggingBackground: ColorModeSwitch; dragDropDraggingOverBackground: ColorModeSwitch; @@ -65,6 +68,7 @@ export type _EuiThemeComponentColors = { filterSelectItemBackgroundFocusDisabled: ColorModeSwitch; + flyoutFooterBackground: ColorModeSwitch; flyoutCloseButtonInsideBackground: ColorModeSwitch; keyPadMenuItemBackgroundDisabledSelect: ColorModeSwitch; 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 6352458b1a1..759c6797385 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/services/theme/theme.js b/packages/eui/src-docs/src/services/theme/theme.js index 316ac207bc6..5f28eed39ff 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 0638086e908..ecf3b822e85 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-docs/src/views/theme/_json/_get_json_vars.js b/packages/eui/src-docs/src/views/theme/_json/_get_json_vars.js index 278f7b70411..4873b5ce27c 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/_json/eui_theme_borealis_dark.json b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json index 37c668610c4..c45f72e040a 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": "#FACB3D", + "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": "#FACB3D", + "euiColorDanger": "#F6726A", "euiColorEmptyShade": "#0B1628", "euiColorLightestShade": "#172336", "euiColorLightShade": "#243147", @@ -297,18 +297,18 @@ "euiColorFullShade": "#FFFFFF", "euiPageBackgroundColor": "#07101F", "euiColorHighlight": "#1750BA", - "euiTextColor": "#E3E8F2", - "euiTitleColor": "#ECF1F9", + "euiTextColor": "#CAD3E2", + "euiTitleColor": "#E3E8F2", "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 25537e2d6d9..2e752c4161b 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,8 +296,8 @@ "euiColorDarkestShade": "#2B394F", "euiColorFullShade": "#07101F", "euiPageBackgroundColor": "#F6F9FC", - "euiColorHighlight": "#E5F3FF", - "euiTextColor": "#172336", + "euiColorHighlight": "#E8F1FF", + "euiTextColor": "#1D2A3E", "euiTitleColor": "#111C2C", "euiTextSubduedColor": "#5A6D8C", "euiColorDisabled": "#E3E8F2", 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 0bdf7afbfac..fd18535655e 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`] = ` { 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}; diff --git a/packages/eui/src/components/badge/color_utils.ts b/packages/eui/src/components/badge/color_utils.ts index 0e6256f3057..ef668e5abe5 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/components/beacon/beacon.styles.ts b/packages/eui/src/components/beacon/beacon.styles.ts index 1a9c03a17e8..c5d09d2fa2d 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)), 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 08c02136b53..6d19ab13803 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/datagrid/data_grid.styles.ts b/packages/eui/src/components/datagrid/data_grid.styles.ts index 38d7d22ed08..08e930cac56 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/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap b/packages/eui/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap index cfa5274a5ee..f3f4268a8f2 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/flyout/flyout_footer.styles.ts b/packages/eui/src/components/flyout/flyout_footer.styles.ts index 8cb5b41ac31..81a07b58fe0 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/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap b/packages/eui/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap index 6b21c30a865..526c501d2c9 100644 --- a/packages/eui/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap +++ b/packages/eui/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap @@ -188,12 +188,12 @@ exports[`euiMarkdownFormat text colors default 1`] = ` exports[`euiMarkdownFormat text colors ghost 1`] = ` " .euiMarkdownFormat__blockquote { - border-inline-start-color: #FFF; + border-inline-start-color: #FFFFFF; } .euiHorizontalRule { - background-color: #FFF; - color: #FFF; /* ensure that firefox gets the currentColor */ + background-color: #FFFFFF; + color: #FFFFFF; /* ensure that firefox gets the currentColor */ } /* Tables */ @@ -204,20 +204,20 @@ exports[`euiMarkdownFormat text colors ghost 1`] = ` overflow: auto; border-spacing: 0; border-collapse: collapse; - border-inline-start: 1px solid #FFF; + border-inline-start: 1px solid #FFFFFF; } .euiMarkdownFormat__table th, .euiMarkdownFormat__table td { - border-block: 1px solid #FFF; + border-block: 1px solid #FFFFFF; &:last-child { - border-inline-end: 1px solid #FFF; + border-inline-end: 1px solid #FFFFFF; } } .euiMarkdownFormat__table tr { - border-block-start: 1px solid #FFF; + border-block-start: 1px solid #FFFFFF; } ;label:ghost;" `; 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 e4c6ab3aad8..78d0e33dff9 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`] = `
}, {} 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``, ... } 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 31177267cf5..a242f335218 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 = { @@ -588,8 +604,10 @@ export const dark_colors_ams: _EuiThemeColorsMode = { */ export const colors: _EuiThemeColors = { - ghost: '#FFF', - ink: '#000', + ghost: '#FFFFFF', + ink: '#000000', + plainLight: '#FFFFFF', + plainDark: '#000000', LIGHT: light_colors, DARK: dark_colors_ams, vis: colorVis, 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 25947b1a521..023ad80ee91 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'] @@ -152,6 +156,7 @@ const component_colors: _EuiThemeComponentColors = { ['colors.darkestShade'] ), + dataGridBorderColor: computed(([color]) => color, ['border.color']), dataGridVerticalLineBorderColor: computed( ([color]) => tint(color, 0.3), ['border.color'] @@ -164,6 +169,10 @@ const component_colors: _EuiThemeComponentColors = { ([highlight]) => highlight, ['colors.highlight'] ), + dataGridRowBackgroundSelect: computed( + ([highlight]) => highlight, + ['colors.highlight'] + ), dragDropDraggingBackground: computed( ([success]) => transparentize(success, 0.1), @@ -179,6 +188,10 @@ const component_colors: _EuiThemeComponentColors = { ['colors.disabled'] ), + flyoutFooterBackground: computed( + ([lightestShade]) => lightestShade, + ['colors.lightestShade'] + ), flyoutCloseButtonInsideBackground: computed( ([emptyShade]) => transparentize(emptyShade, 0.9), ['colors.emptyShade'] @@ -505,6 +518,11 @@ export const components: _EuiThemeComponents = { ['colors.fullShade'] ), + tourFooterBackground: computed( + ([lightestShade]) => shade(lightestShade, 0.45), + ['colors.lightestShade'] + ), + treeViewItemBackgroundHover: computed( ([text]) => transparentize(text, 0.2), ['colors.text'] 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 a8c95f72651..e4e1ac20890 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', + } + }} /> ); diff --git a/yarn.lock b/yarn.lock index 7c732ab0e3d..9c91937ad47 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"