Skip to content

[Visual Refresh] Update vis colors and palettes #8112

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mgadewoll merged 12 commits into from
Nov 7, 2024
Merged

[Visual Refresh] Update vis colors and palettes #8112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6be4b6d
docs: update theme switcher based on #8036
mgadewoll Oct 31, 2024
3d32632
feat: add global vis color store
mgadewoll Oct 31, 2024
77791c6
refactor: update eui palettes to use vis_color_store
mgadewoll Oct 31, 2024
77727e2
refactor: update component and doc usages to ensure eui color palette…
mgadewoll Oct 31, 2024
b6895b5
docs: add color palette EUI+ docs
mgadewoll Oct 31, 2024
fc8a19f
fix: rebase fixes
mgadewoll Nov 1, 2024
d8762f8
fix: update code token
mgadewoll Nov 1, 2024
c26a297
fix: uddate color palette docs location
mgadewoll Nov 1, 2024
9ed1c48
refactor: update vis token value to hex
mgadewoll Nov 6, 2024
c4b2b7d
refactor: update imports
mgadewoll Nov 7, 2024
9aeec86
refactor: subscribe to vis color store on unmount
mgadewoll Nov 7, 2024
5ccc662
refactor: force initial vis color update to execute last
mgadewoll Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/docusaurus-theme/src/theme/Root.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { css } from '@emotion/react';
// on the global level to reduce how often they are called
export const getGlobalStyles = (theme: UseEuiTheme) => {
const { euiTheme } = theme;
const { font, base, colors, size } = euiTheme;
const { font, base, colors, size, components } = euiTheme;
const fontBodyScale = font.scale[font.body.scale];
const fontBase = {
fontFamily: font.family,
Expand Down Expand Up @@ -67,7 +67,7 @@ export const getGlobalStyles = (theme: UseEuiTheme) => {
--ifm-menu-color-background-active: ${colors.backgroundBaseSubdued};
--ifm-menu-color-background-hover: var(--eui-background-color-primary);

--ifm-pre-background: ${colors.lightestShade};
--ifm-pre-background: ${components.codeBackground};
}

:root {
Expand Down
1 change: 1 addition & 0 deletions packages/eui-theme-borealis/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export const euiThemeBorealis: EuiThemeShape = {
components,
flags: {
hasGlobalFocusColor: true,
hasVisColorAdjustment: false,
},
};

Expand Down
59 changes: 59 additions & 0 deletions packages/eui-theme-borealis/src/variables/_components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
brand_text_colors,
text_colors,
} from './colors/_colors_light';
import { colorVis } from './colors/_colors_vis';

const component_colors: _EuiThemeComponentColors = {
badgeBackgroundSubdued: background_colors.backgroundBaseSubdued,
Expand All @@ -43,6 +44,30 @@ const component_colors: _EuiThemeComponentColors = {
buttonGroupBorderColorSelected: border_colors.borderBasePlain,
buttonGroupFocusColor: brand_text_colors.textPrimary,

codeBackground: background_colors.backgroundBaseFormsPrepend,
codeBackgroundSelected: 'inherit',
codeColor: text_colors.textParagraph,
codeInlineColor: colorVis.euiColorVisAsTextLight6,
codeCommentColor: text_colors.textSubdued,
codeSelectorColor: 'inherit',
codeStringColor: colorVis.euiColorVisAsTextLight2,
codeTagColor: colorVis.euiColorVisAsTextLight1,
codeNameColor: colorVis.euiColorVisAsTextLight1,
codeNumberColor: colorVis.euiColorVisAsTextLight0,
codeKeywordColor: colorVis.euiColorVisAsTextLight6,
codeFunctionTitleColor: 'inherit',
codeTypeColor: colorVis.euiColorVisAsTextLight1,
codeAttributeColor: 'inherit',
codeSymbolColor: colorVis.euiColorVisAsTextLight3,
codeParamsColor: 'inherit',
codeMetaColor: text_colors.textSubdued,
codeTitleColor: colorVis.euiColorVisAsTextLight4,
codeSectionColor: colorVis.euiColorVisAsTextLight3,
codeAdditionColor: colorVis.euiColorVisAsTextLight0,
codeDeletionColor: colorVis.euiColorVisAsTextLight3,
codeSelectorClassColor: 'inherit',
codeSelectorIdColor: 'inherit',

collapsibleNavGroupBackground: background_colors.backgroundBaseSubdued,
collapsibleNavGroupBackgroundDark:
dark_background_colors.backgroundBaseSubdued,
Expand Down Expand Up @@ -77,6 +102,11 @@ const component_colors: _EuiThemeComponentColors = {
listGroupItemBackgroundPrimaryHover:
background_colors.backgroundBaseInteractiveHover,

loadingChartMonoBackground0: SEMANTIC_COLORS.shade20,
loadingChartMonoBackground1: SEMANTIC_COLORS.shade30,
loadingChartMonoBackground2: SEMANTIC_COLORS.shade40,
loadingChartMonoBackground3: SEMANTIC_COLORS.shade50,

markBackground: background_colors.backgroundLightPrimary,

markdownFormatTableBorderColor: border_colors.borderBasePlain,
Expand Down Expand Up @@ -145,6 +175,30 @@ export const components: _EuiThemeComponents = {
buttonGroupBorderColorSelected: dark_border_colors.borderBasePlain,
buttonGroupFocusColor: dark_brand_text_colors.textPrimary,

codeBackground: dark_background_colors.backgroundBaseFormsPrepend,
codeBackgroundSelected: 'inherit',
codeColor: dark_text_colors.textParagraph,
codeInlineColor: colorVis.euiColorVisAsTextDark6,
codeCommentColor: dark_text_colors.textSubdued,
codeSelectorColor: 'inherit',
codeStringColor: colorVis.euiColorVisAsTextDark2,
codeTagColor: colorVis.euiColorVisAsTextDark1,
codeNameColor: colorVis.euiColorVisAsTextDark1,
codeNumberColor: colorVis.euiColorVisAsTextDark0,
codeKeywordColor: colorVis.euiColorVisAsTextDark6,
codeFunctionTitleColor: 'inherit',
codeTypeColor: colorVis.euiColorVisAsTextDark1,
codeAttributeColor: 'inherit',
codeSymbolColor: colorVis.euiColorVisAsTextDark3,
codeParamsColor: 'inherit',
codeMetaColor: dark_text_colors.textSubdued,
codeTitleColor: colorVis.euiColorVisAsTextDark4,
codeSectionColor: colorVis.euiColorVisAsTextDark3,
codeAdditionColor: colorVis.euiColorVisAsTextDark0,
codeDeletionColor: colorVis.euiColorVisAsTextDark3,
codeSelectorClassColor: 'inherit',
codeSelectorIdColor: 'inherit',

collapsibleNavGroupBackground: dark_background_colors.backgroundBaseSubdued,
collapsibleNavGroupBackgroundDark:
dark_background_colors.backgroundBaseSubdued,
Expand Down Expand Up @@ -178,6 +232,11 @@ export const components: _EuiThemeComponents = {
listGroupItemBackgroundPrimaryHover:
dark_background_colors.backgroundBaseInteractiveHover,

loadingChartMonoBackground0: SEMANTIC_COLORS.shade95,
loadingChartMonoBackground1: SEMANTIC_COLORS.shade105,
loadingChartMonoBackground2: SEMANTIC_COLORS.shade115,
loadingChartMonoBackground3: SEMANTIC_COLORS.shade125,

markBackground: dark_background_colors.backgroundLightPrimary,

markdownFormatTableBorderColor: dark_border_colors.borderBasePlain,
Expand Down
1 change: 1 addition & 0 deletions packages/eui-theme-borealis/src/variables/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/index';
@import 'states';

@import './colors/colors_vis';
@import 'borders';
@import 'form';
@import 'page';
Expand Down
72 changes: 72 additions & 0 deletions packages/eui-theme-borealis/src/variables/colors/_colors_vis.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
// Visualization colors
// stylelint-disable color-no-hex

// Maps allow for easier JSON usage
// Use map_merge($euiColorVisColors, $yourMap) to change individual colors after importing ths file
// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function
$euiPaletteColorBlind: (
euiColorVis0: (
graphic: #00BEB8,
behindText: #00BEB8,
),
euiColorVis1: (
graphic: #93E5E0,
behindText: #93E5E0,
),
euiColorVis2: (
graphic: #599DFF,
behindText: #599DFF,
),
euiColorVis3: (
graphic: #B4D5FF,
behindText: #B4D5FF,
),
euiColorVis4: (
graphic: #ED6BA2,
behindText: #ED6BA2,
),
euiColorVis5: (
graphic: #FFBED5,
behindText: #FFBED5,
),
euiColorVis6: (
graphic: #F66D64,
behindText: #F66D64,
),
euiColorVis7: (
graphic: #FFC0B8,
behindText: #FFC0B8,
),
euiColorVis8: (
graphic: #ED9E00,
behindText: #ED9E00,
),
euiColorVis9: (
graphic: #FFD569,
behindText: #FFD569,
)
) !default;

$euiPaletteColorBlindKeys: map-keys($euiPaletteColorBlind);

$euiColorVis0: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'graphic') !default;
$euiColorVis1: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'graphic') !default;
$euiColorVis2: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'graphic') !default;
$euiColorVis3: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'graphic') !default;
$euiColorVis4: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'graphic') !default;
$euiColorVis5: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'graphic') !default;
$euiColorVis6: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'graphic') !default;
$euiColorVis7: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'graphic') !default;
$euiColorVis8: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'graphic') !default;
$euiColorVis9: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'graphic') !default;

$euiColorVis0_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'behindText') !default;
$euiColorVis1_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'behindText') !default;
$euiColorVis2_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'behindText') !default;
$euiColorVis3_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'behindText') !default;
$euiColorVis4_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'behindText') !default;
$euiColorVis5_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'behindText') !default;
$euiColorVis6_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'behindText') !default;
$euiColorVis7_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'behindText') !default;
$euiColorVis8_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'behindText') !default;
$euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'behindText') !default;
101 changes: 101 additions & 0 deletions packages/eui-theme-borealis/src/variables/colors/_colors_vis.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

import { _EuiThemeVisColors } from '@elastic/eui-theme-common';

import { SEMANTIC_COLORS } from './_semantic_colors';
import { PRIMITIVE_COLORS } from './_primitive_colors';

// Maps allow for easier JSON usage
// Use map_merge(euiColorVisColors, $yourMap) to change individual colors after importing ths file
// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function
const euiPaletteColorBlind = {
euiColorVis0: {
graphic: SEMANTIC_COLORS.accentSecondary60,
},
euiColorVis1: {
graphic: SEMANTIC_COLORS.accentSecondary30,
},
euiColorVis2: {
graphic: SEMANTIC_COLORS.primary60,
},
euiColorVis3: {
graphic: SEMANTIC_COLORS.primary30,
},
euiColorVis4: {
graphic: SEMANTIC_COLORS.accent60,
},
euiColorVis5: {
graphic: SEMANTIC_COLORS.accent30,
},
euiColorVis6: {
graphic: SEMANTIC_COLORS.danger60,
},
euiColorVis7: {
graphic: SEMANTIC_COLORS.danger30,
},
euiColorVis8: {
graphic: SEMANTIC_COLORS.warning60,
},
euiColorVis9: {
graphic: SEMANTIC_COLORS.warning30,
},
};

export const colorVis: _EuiThemeVisColors = {
euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic,
euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic,
euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic,
euiColorVis3: euiPaletteColorBlind.euiColorVis3.graphic,
euiColorVis4: euiPaletteColorBlind.euiColorVis4.graphic,
euiColorVis5: euiPaletteColorBlind.euiColorVis5.graphic,
euiColorVis6: euiPaletteColorBlind.euiColorVis6.graphic,
euiColorVis7: euiPaletteColorBlind.euiColorVis7.graphic,
euiColorVis8: euiPaletteColorBlind.euiColorVis8.graphic,
euiColorVis9: euiPaletteColorBlind.euiColorVis9.graphic,

euiColorVisAsTextLight0: SEMANTIC_COLORS.accentSecondary100,
euiColorVisAsTextLight1: SEMANTIC_COLORS.primary100,
euiColorVisAsTextLight2: SEMANTIC_COLORS.accent100,
euiColorVisAsTextLight3: SEMANTIC_COLORS.danger100,
euiColorVisAsTextLight4: SEMANTIC_COLORS.warning100,
euiColorVisAsTextLight5: SEMANTIC_COLORS.success100,
euiColorVisAsTextLight6: SEMANTIC_COLORS.assistance100,

euiColorVisAsTextDark0: SEMANTIC_COLORS.accentSecondary60,
euiColorVisAsTextDark1: SEMANTIC_COLORS.primary60,
euiColorVisAsTextDark2: SEMANTIC_COLORS.accent60,
euiColorVisAsTextDark3: SEMANTIC_COLORS.danger60,
euiColorVisAsTextDark4: SEMANTIC_COLORS.warning60,
euiColorVisAsTextDark5: SEMANTIC_COLORS.success60,
euiColorVisAsTextDark6: SEMANTIC_COLORS.assistance60,

euiColorVisSuccess0: SEMANTIC_COLORS.success60,
euiColorVisSuccess1: SEMANTIC_COLORS.success30,
euiColorVisWarning0: SEMANTIC_COLORS.warning30,
euiColorVisDanger0: SEMANTIC_COLORS.danger60,
euiColorVisDanger1: SEMANTIC_COLORS.danger30,

euiColorVisNeutral0: PRIMITIVE_COLORS.mutedGrey10,

euiColorVisGrey0: PRIMITIVE_COLORS.blueGrey30,
euiColorVisGrey1: PRIMITIVE_COLORS.blueGrey60,
euiColorVisGrey2: PRIMITIVE_COLORS.blueGrey90,
euiColorVisGrey3: PRIMITIVE_COLORS.blueGrey130,

euiColorVisWarm0: SEMANTIC_COLORS.danger10,
euiColorVisWarm1: SEMANTIC_COLORS.danger40,
euiColorVisWarm2: SEMANTIC_COLORS.danger60,

euiColorVisCool0: SEMANTIC_COLORS.primary10,
euiColorVisCool1: SEMANTIC_COLORS.primary40,
euiColorVisCool2: SEMANTIC_COLORS.primary60,

euiColorVisComplementary0: SEMANTIC_COLORS.primary60,
euiColorVisComplementary1: SEMANTIC_COLORS.warning60,
};
2 changes: 2 additions & 0 deletions packages/eui-theme-borealis/src/variables/colors/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,12 @@ import type { _EuiThemeColors } from '@elastic/eui-theme-common';
import { SEMANTIC_COLORS } from './_semantic_colors';
import { light_colors } from './_colors_light';
import { dark_colors } from './_colors_dark';
import { colorVis } from './_colors_vis';

export const colors: _EuiThemeColors = {
ghost: SEMANTIC_COLORS.plainLight,
ink: SEMANTIC_COLORS.plainDark,
LIGHT: light_colors,
DARK: dark_colors,
vis: colorVis,
};
4 changes: 4 additions & 0 deletions packages/eui-theme-common/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@
"directory": "packages/eui-theme-common"
},
"private": true,
"dependencies": {
"@types/lodash": "^4.14.202",
"lodash": "^4.17.21"
},
"devDependencies": {
"@babel/cli": "^7.21.5",
"@babel/core": "^7.21.8",
Expand Down
1 change: 0 additions & 1 deletion packages/eui-theme-common/src/global_styling/variables/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
// Global colors are established and importer per theme, before this manifest
// Import order is important. Size, vis colors, ...etc are used in other variables.
@import 'size';
@import 'colors_vis';
@import 'animations';
@import 'font_weight';
@import 'typography';
Expand Down
Loading
Loading