Skip to content
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

[Visual Refresh] Update color token mappings #8211

Merged
merged 22 commits into from
Dec 12, 2024
Merged

[Visual Refresh] Update color token mappings #8211

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
1798eed
refactor: remove base semantic colors from theme colors
mgadewoll Dec 4, 2024
307afaa
refactor: update primitive color values
mgadewoll Dec 4, 2024
50ef806
refactor: update legacy JSON token values
mgadewoll Dec 5, 2024
eb67a85
refactor: remove transparent scales, add specific transparent semanti…
mgadewoll Dec 5, 2024
0876442
fix: update subdued badge background mapping
mgadewoll Dec 5, 2024
45c76bc
refactor: fix docs sass and JSON token loading; remove unexpected dep…
mgadewoll Dec 5, 2024
74d9510
refactor: update text and title color token values
mgadewoll Dec 6, 2024
49a9d5c
refactor: update beacon successcolor mapping
mgadewoll Dec 6, 2024
ad469fd
refactor: update beta_badge mappings
mgadewoll Dec 6, 2024
813e38b
chore: update deprecation description
mgadewoll Dec 6, 2024
762cbf7
refactor: update select background color token mapping
mgadewoll Dec 8, 2024
27c8f2b
refactor: update datagrid border and select color mappings
mgadewoll Dec 8, 2024
aec9180
feat: add backgroundBaseHighlighted color token
mgadewoll Dec 9, 2024
e33d51f
feat: support generic highlighted background usage
mgadewoll Dec 9, 2024
bb9248a
refactor: update flyout footer to use highlighted background
mgadewoll Dec 9, 2024
9b5ace3
refactor: add highlighted background option control to comment stories
mgadewoll Dec 9, 2024
772325c
refactor: align default and subdued badge color mappings
mgadewoll Dec 9, 2024
27f4581
refactor: update legacy JSON warning color mappings
mgadewoll Dec 9, 2024
c8f257e
refactor: update plainLightAlpha6 to plainLightAlpha8
mgadewoll Dec 11, 2024
0a7507b
refactor: update white/black usages to full hex codes
mgadewoll Dec 11, 2024
99520c4
refactor: inherit base colors for alpha colors
mgadewoll Dec 11, 2024
0521dcb
chore: cleanup
mgadewoll Dec 11, 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
124 changes: 62 additions & 62 deletions packages/eui-theme-borealis/src/eui_theme_borealis_dark.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,78 +36,78 @@
"euiButtonColorDisabledText": "#6A7FA0",
"euiButtonColorGhostDisabled": "#1D2A3E",
"euiButtonTypes": {
"primary": "#599DFF",
"accent": "#ED6BA2",
"accentSecondary": "#00BEB8",
"success": "#23BE8F",
"warning": "#FCD279",
"danger": "#F66D64",
"primary": "#61A2FF",
"accent": "#EE72A6",
"accentSecondary": "#16C5C0",
"success": "#24C292",
"warning": "#FCD883",
weronikaolejniczak marked this conversation as resolved.
Show resolved Hide resolved
"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",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these colors for the data visualization? If so, where can I see the mapping to test against?

Copy link
Contributor Author

@mgadewoll mgadewoll Dec 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These JSON files are legacy files that used to be generated from the Sass files but now only exist until Kibana migrated to use our theme tokens via EuiProvider instead.

The theme vis color tokens are defined here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, Lene! 💚 What I wanted to know is what is the purpose of euiColorVis* tokens. I checked in Kibana and it does seem they are predominantly used in data visualization (charts).

And is there a design definition of the mapping anywhere, so that I can verify that e.g. euiColorVis0 -> #16C5C0 is the correct mapping?

Copy link
Contributor Author

@mgadewoll mgadewoll Dec 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, yes. vis colors are visualization colors.

And is there a design definition of the mapping anywhere, so that I can verify that e.g. euiColorVis0 -> #16C5C0 is the correct mapping?

Yes and no. There is this Figma file but when implementing the tokens I was told by @gvnmagni that it's not up to date and he provided the expected mappings 🫠

The same is mirrored in the Figma variables in this file, I'm not sure if those are the latest state though? @gvnmagni

Screenshot 2024-12-11 at 11 26 15

ℹ️ There is also still ongoing work on parts of the vis color palettes for severity (issue)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mgadewoll my eyes burn after so much HEX BUT they all look okay 👌🏻 Feel free to resolve or wait for @gvnmagni confirmation 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can proceed also without @gvnmagni - in case there is a need to update something, we can do that separately any time 🙂

"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,
Expand Down Expand Up @@ -207,7 +207,7 @@
"euiScrollBar": "16px",
"euiScrollBarCorner": "4px",
"euiScrollBarCornerThin": "6px",
"euiFocusRingColor": "#599DFF",
"euiFocusRingColor": "#61A2FF",
"euiFocusRingAnimStartColor": "rgba(0, 0, 0, 0)",
"euiFocusRingAnimStartSize": "2px",
"euiFocusRingAnimStartSizeLarge": "10px",
Expand Down Expand Up @@ -282,12 +282,12 @@
"euiZContent": 0,
"euiColorGhost": "#FFFFFF",
"euiColorInk": "#000000",
"euiColorPrimary": "#599DFF",
"euiColorAccent": "#ED6BA2",
"euiColorAccentSecondary": "#00BEB8",
"euiColorSuccess": "#23BE8F",
"euiColorWarning": "#FCD279",
"euiColorDanger": "#F66D64",
"euiColorPrimary": "#61A2FF",
"euiColorAccent": "#EE72A6",
"euiColorAccentSecondary": "#16C5C0",
"euiColorSuccess": "#24C292",
"euiColorWarning": "#FCD883",
"euiColorDanger": "#F6726A",
"euiColorEmptyShade": "#0B1628",
"euiColorLightestShade": "#172336",
"euiColorLightShade": "#243147",
Expand All @@ -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"
}
82 changes: 41 additions & 41 deletions packages/eui-theme-borealis/src/eui_theme_borealis_light.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -162,7 +162,7 @@
"euiHeaderBackgroundColor": "#FFFFFF",
"euiHeaderDarkBackgroundColor": "#0B1628",
"euiHeaderBorderColor": "#E3E8F2",
"euiHeaderBreadcrumbColor": "#D6E9FF",
"euiHeaderBreadcrumbColor": "#D9E8FF",
"euiHeaderHeight": "48px",
"euiHeaderChildSize": "40px",
"euiHeaderHeightCompensation": "48px",
Expand All @@ -183,7 +183,7 @@
"subdued": "#F6F9FC",
"accent": "#FFEBF5",
"accentSecondary": "#E2F9F7",
"primary": "#E5F3FF",
"primary": "#E8F1FF",
"success": "#E2F8F0",
"warning": "#FDF3D8",
"danger": "#FFE8E5"
Expand Down Expand Up @@ -296,8 +296,8 @@
"euiColorDarkestShade": "#2B394F",
"euiColorFullShade": "#07101F",
"euiPageBackgroundColor": "#F6F9FC",
"euiColorHighlight": "#E5F3FF",
"euiTextColor": "#172336",
"euiColorHighlight": "#E8F1FF",
"euiTextColor": "#1D2A3E",
"euiTitleColor": "#111C2C",
"euiTextSubduedColor": "#5A6D8C",
"euiColorDisabled": "#E3E8F2",
Expand Down
9 changes: 7 additions & 2 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 @@ -30,7 +30,7 @@ import {
import { colorVis } from './colors/_colors_vis';

const component_colors: _EuiThemeComponentColors = {
badgeBackgroundSubdued: background_colors.backgroundBaseSubdued,
badgeBackgroundSubdued: background_colors.backgroundLightText,
badgeBorderColorHollow: border_colors.borderBasePlain,
badgeIconButtonBackgroundHover:
background_colors.backgroundBaseInteractiveHover,
Expand Down Expand Up @@ -72,9 +72,12 @@ const component_colors: _EuiThemeComponentColors = {
collapsibleNavGroupBackgroundDark:
dark_background_colors.backgroundBaseSubdued,

dataGridBorderColor: border_colors.borderBasePlain,
dataGridVerticalLineBorderColor: border_colors.borderBasePlain,
dataGridRowBackgroundStriped: background_colors.backgroundBaseSubdued,
dataGridRowBackgroundHover: background_colors.backgroundBaseInteractiveHover,
dataGridRowBackgroundSelect:
background_colors.backgroundBaseInteractiveSelect,

dragDropDraggingBackground: background_colors.backgroundBaseSuccess,
dragDropDraggingOverBackground: background_colors.backgroundLightSuccess,
Expand Down Expand Up @@ -162,7 +165,7 @@ export const components: _EuiThemeComponents = {
DARK: {
...component_colors,

badgeBackgroundSubdued: dark_background_colors.backgroundBaseSubdued,
badgeBackgroundSubdued: dark_background_colors.backgroundLightText,
badgeBorderColorHollow: dark_border_colors.borderBasePlain,
badgeIconButtonBackgroundHover:
dark_background_colors.backgroundBaseInteractiveHover,
Expand Down Expand Up @@ -207,6 +210,8 @@ export const components: _EuiThemeComponents = {
dataGridRowBackgroundStriped: dark_background_colors.backgroundBaseSubdued,
dataGridRowBackgroundHover:
dark_background_colors.backgroundBaseInteractiveHover,
dataGridRowBackgroundSelect:
dark_background_colors.backgroundBaseInteractiveSelect,

dragDropDraggingBackground: dark_background_colors.backgroundBaseSuccess,
dragDropDraggingOverBackground:
Expand Down
Loading