Skip to content

Commit

Permalink
[Visual Refresh] Update vis colors and palettes (#8112)
Browse files Browse the repository at this point in the history
  • Loading branch information
mgadewoll authored and tkajtoch committed Nov 20, 2024
1 parent 17cc2ce commit 065495a
Show file tree
Hide file tree
Showing 64 changed files with 2,294 additions and 536 deletions.
4 changes: 2 additions & 2 deletions packages/docusaurus-theme/src/theme/Root.styles.ts
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
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
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
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
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
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
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
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
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

0 comments on commit 065495a

Please sign in to comment.