fix: quote build script path & improve color token documentation by ragini-pandey · Pull Request #9417 · elastic/eui

ragini-pandey · 2026-02-28T16:24:14Z

Summary

This PR fixes a build script path quoting issue and improves the color token documentation across the EUI website.

Build fix: The execSync call in compile-eui.js that invokes dtsgenerator.js did not quote the resolved path, causing the build to fail when the workspace directory contains spaces. The fix wraps the path in quotes.

Documentation improvements: Added descriptions to all color token tables (text, background, border, shade, special, data vis, severity), improved introductory copy with clearer semantic token guidance, added deprecation notices for shade/special tokens and legacy palette functions, fixed a typo in backgroundBaseSkeletonMiddle, fixed a broken DataVisBackgroundColor import in the severity patterns page, and improved color palette utilities documentation.

Why are we making this change?

Closes #8540

Build script fix — The unquoted path in compile-eui.js is a latent bug that surfaces whenever a developer clones the repo into a directory whose path contains spaces.
Color token docs — The existing color token documentation pages had empty description fields in all token tables, making it harder for consumers to understand the intended use of each token. Deprecation notices were also missing for shade and special tokens that have semantic replacements.

Screenshots #

http://localhost:3000/docs/getting-started/theming/tokens/colors/

http://localhost:3000/docs/utilities/color-palettes/

N/A — Documentation text changes only; no visual/UI component changes.

Impact to users

No breaking changes. The build script fix is internal tooling. The documentation improvements provide better guidance for EUI consumers using color tokens, especially around deprecated shade/special tokens and their semantic replacements.

QA

General checklist

Browser QA
- ~~Checked in both light and dark modes~~ (no UI changes)
- Checked in both MacOS and Windows high contrast modes (no UI changes)
- Checked in mobile (no UI changes)
- Checked in Chrome, Safari, Edge, and Firefox (no UI changes)
- ~~Checked for accessibility including keyboard-only and screenreader modes~~ (no UI changes)
Docs site QA
- Added documentation — improved color token descriptions and page copy
- Props have proper autodocs (no prop changes)
- ~~Checked Code Sandbox works for any docs examples~~ (no interactive examples added)
Code quality checklist
- Added or updated jest and cypress tests (documentation-only changes)
- Updated visual regression tests (no visual changes)
Release checklist
- A changelog entry exists and is marked appropriately
- ~~If applicable, added the breaking change issue label~~ (no breaking changes)
- ~~If the changes unblock an issue in a different repo, smoke tested carefully~~ (N/A)
Designer checklist
- ~~If applicable, file an issue to update EUI's Figma library~~ (no UI changes)

…y names

…n notices, and semantic guidance

github-actions · 2026-02-28T16:24:22Z

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

…y names

…n notices, and semantic guidance

….com/ragini-pandey/eui into fix/docs-color-tokens-and-build-path

…docs-color-tokens-and-build-path

Copilot

Pull request overview

Fixes a tooling build failure when the repo path contains spaces and refreshes the EUI website’s color documentation to better emphasize semantic tokens, add missing token descriptions, and clarify deprecations.

Changes:

Quote the dtsgenerator.js path in packages/eui/scripts/compile-eui.js to avoid space-in-path build failures.
Expand/clarify the website color token docs (new guidance text, deprecation callouts, improved section copy).
Add description text across multiple color token tables and fix a token label typo (backgroundBaseSkeletonMiddle).

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/eui/scripts/compile-eui.js	Quotes the `dtsgenerator.js` invocation path to prevent failures in spaced directories.
packages/website/docs/utilities/color-palettes/index.mdx	Updates palette guidance text and adds deprecation messaging.
packages/website/docs/getting-started/theming/tokens/colors/index.mdx	Revises overall color-token guidance, adds deprecation callouts, and adjusts dataviz guidance text/imports.
packages/website/docs/patterns/severity/index.mdx	Removes a broken/unneeded import related to dataviz background colors.
packages/website/docs/getting-started/theming/tokens/colors/text_colors_table.tsx	Adds per-token descriptions for text tokens.
packages/website/docs/getting-started/theming/tokens/colors/background_colors_table.tsx	Adds per-token descriptions and fixes the skeleton middle token label.
packages/website/docs/getting-started/theming/tokens/colors/border_colors_table.tsx	Adds per-token descriptions for border tokens.
packages/website/docs/getting-started/theming/tokens/colors/data_vis_colors_table.tsx	Adds per-token descriptions for dataviz graphic + text tokens.
packages/website/docs/getting-started/theming/tokens/colors/shade_colors_table.tsx	Updates shade token descriptions with deprecation/migration guidance.
packages/website/docs/getting-started/theming/tokens/colors/special_colors_table.tsx	Updates special token descriptions with deprecation/migration guidance.
packages/website/docs/getting-started/theming/tokens/colors/severity_colors_table.tsx	Adds per-token descriptions for severity tokens.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…dex.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-02T16:15:43Z

+EUI provides a set of color palette utility functions that return arrays of hexadecimal colors for use in charts and data visualizations.
+
+:::tip When to use palettes vs. color tokens
+**Color tokens** (`euiTheme.colors.vis.*`) should be your first choice for data visualizations — they are semantic, theme-aware, and automatically adapt to color modes.
+
+**Color palette functions** are useful when you need a dynamic number of colors (e.g. generating a gradient with N steps), or when working with charting libraries that require arrays of colors. For categorical data with up to 10 series, prefer using the `euiColorVis0`–`euiColorVis9` tokens directly.


PR title/description mention a build-script fix in packages/eui/scripts/compile-eui.js (quoting the dtsgenerator.js path), but this pull request only changes website docs files. Either include the build script fix in this PR, or update the PR title/description to reflect the actual scope so reviewers/users aren’t expecting a build tooling change.

Copilot · 2026-04-02T16:15:44Z

+Data visualization colors and severity colors prioritize visual clarity and data differentiation over strict contrast compliance in standard light mode. **This means some colors may not meet WCAG 3:1 contrast requirements against light backgrounds.**

-However, in dark mode, all colors meet the minimum 3:1 contrast ratio, ensuring accessibility compliance. 
+For accessible use cases, enable **high contrast mode** which ensures all colors meet minimum contrast ratios. In dark mode, all colors meet the minimum 3:1 contrast ratio by default.



The text claims that enabling high contrast mode “ensures all colors meet minimum contrast ratios”, but EUI’s high contrast mode primarily enforces border/shadow adjustments (see packages/website/docs/getting-started/theming/high-contrast-mode.mdx). Please soften or scope this statement (e.g., describe it as improving contrast for specific tokens/modes rather than guaranteeing contrast for all colors), and consider aligning the table wording with the actual guarantees.

tkajtoch

This PR doesn't seem to contain the quote changes you mention in the title and description. I'm also not certain if the added token descriptions bring enough value right now. Our general goals are to make the documentation less verbose and agent-friendly, and I'm worried that some of the strings added here might be misleading or not precise enough.

Let me think about these changes more, and in the meantime, make sure the PRs are scoped to a single group of changes - there should never be script changes bundled with documentation changes unless they're explicitly related and create an atomic change

ragini-pandey added 3 commits February 28, 2026 21:47

fix: quote path in dtsgenerator execSync to handle spaces in director…

ff053c2

…y names

docs: improve color token documentation with descriptions, deprecatio…

af84671

…n notices, and semantic guidance

chore: update i18n tokens (auto-generated)

e4db21a

github-actions bot added the community contribution (Don't delete - used for automation) label Feb 28, 2026

ragini-pandey added 2 commits March 17, 2026 22:07

fix: quote path in dtsgenerator execSync to handle spaces in director…

5f4579f

…y names

docs: improve color token documentation with descriptions, deprecatio…

57e7db1

…n notices, and semantic guidance

ragini-pandey force-pushed the fix/docs-color-tokens-and-build-path branch from e4db21a to 57e7db1 Compare March 17, 2026 18:28

ragini-pandey and others added 3 commits March 17, 2026 23:59

Merge branch 'fix/docs-color-tokens-and-build-path' of https://github…

8237ee7

….com/ragini-pandey/eui into fix/docs-color-tokens-and-build-path

Merge branch 'main' of https://github.com/ragini-pandey/eui into fix/…

38a4711

…docs-color-tokens-and-build-path

Remove unused color tokens from DataVisTextColorsTable component

c95ae08

ragini-pandey marked this pull request as ready for review April 2, 2026 15:49

ragini-pandey requested a review from a team as a code owner April 2, 2026 15:49

Copilot AI review requested due to automatic review settings April 2, 2026 15:49

Copilot started reviewing on behalf of ragini-pandey April 2, 2026 15:50 View session

Fix path resolution in TypeScript definitions generation command

b6099ff

Copilot AI reviewed Apr 2, 2026

View reviewed changes

Comment thread packages/website/docs/utilities/color-palettes/index.mdx Outdated

Comment thread packages/website/docs/utilities/color-palettes/index.mdx Outdated

Update color palette documentation for clarity and deprecation guidance

592b44e

ragini-pandey requested a review from Copilot April 2, 2026 16:03

Copilot started reviewing on behalf of ragini-pandey April 2, 2026 16:04 View session

Copilot AI reviewed Apr 2, 2026

View reviewed changes

Comment thread packages/website/docs/patterns/severity/index.mdx Outdated

Comment thread packages/website/docs/getting-started/theming/tokens/colors/index.mdx Outdated

ragini-pandey and others added 2 commits April 2, 2026 21:38

Update packages/website/docs/patterns/severity/index.mdx

b2a5c81

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update packages/website/docs/getting-started/theming/tokens/colors/in…

8da2124

…dex.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

ragini-pandey requested a review from Copilot April 2, 2026 16:11

Copilot started reviewing on behalf of ragini-pandey April 2, 2026 16:11 View session

Copilot AI reviewed Apr 2, 2026

View reviewed changes

tkajtoch requested changes Apr 2, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: quote build script path & improve color token documentation#9417

fix: quote build script path & improve color token documentation#9417
ragini-pandey wants to merge 12 commits intoelastic:mainfrom
ragini-pandey:fix/docs-color-tokens-and-build-path

ragini-pandey commented Feb 28, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Feb 28, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 2, 2026

Uh oh!

Copilot AI Apr 2, 2026

Uh oh!

tkajtoch left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

ragini-pandey commented Feb 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

github-actions bot commented Feb 28, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ragini-pandey commented Feb 28, 2026 •

edited

Loading