feat(table): [PF-3917] document tokens in all themes/modes by jschuler · Pull Request #141 · patternfly/design-tokens

jschuler · 2026-04-22T17:33:19Z

Design Tokens Table Enhancements

🎯 Key Features

Global Search & Navigation

Implemented cross-category token search with "Also found in" links
Added clickable navigation between token references across categories
Tokens in derivation chains and "Used by" column now link to their respective categories
Category prefixes (e.g., [Semantic], [Base]) on all token references for clarity

Theme Management

Shared theme state across all categories (except Palette which is always "All themes")
Value-based grouping when "All themes" selected - shows which themes share the same value
Displays dash (—) for tokens without values in selected theme
Shows grouped theme counts with tooltips listing all included themes

"Used by" Column

New column for Base and Palette tokens showing reverse references
Built reference map to track which tokens use each base/palette token
Shows up to 3 references inline, 4+ in a popover
All references are clickable for easy navigation

🎨 UI/UX Improvements

Always abbreviate theme labels in value cells to prevent horizontal scrolling
Added theme abbreviation legend for accessibility

📝 Files Changed

tokensTable.js - Core functionality and component updates
tokensTable.css - New styles for grouped themes, buttons, and layout
tokensToolbar.js - Pre-computed static values, theme selection logic

Preview
http://patternfly-tokens.surge.sh/foundations-and-styles/design-tokens/all-design-tokens

nicolethoen · 2026-04-23T20:34:56Z

+
+  return (
+    <Tooltip content={fullLabel} position="top">
+      <span className="ws-theme-display-label ws-theme-abbr-trigger" tabIndex={0}>


This should be wrapping a plain button or other interactive element for accessibility.

nicolethoen · 2026-04-23T20:36:10Z

+  white-space: nowrap;
+}
+
+.ws-token-value-popover-trigger {


I think the popover triggers shouldn't need so much custom CSS for formatting if they are using plain Buttons

thatblindgeye

Some thoughts:

Could we omit the theme info from the "Values" cell if "All themes" isn't selected? It would free up some space, and I'm not sure if we need to provide abbreviations if we're showing a token value for a single theme; the Select toggle should provide the context of the values shown in the table whenever "All themes" isn't selected
- We could maybe make a dynamic Table caption whenever "all themes" isn't selected - e.g. "Semantic tokens for Default theme, light mode, and default contrast"
When "All themes" is selected and the table displays the various "X themes" text, I'm wondering if instead of a tooltip we could use a Popover, and within that render an unordered list of the themes. Something like this:
- Using a popover, we'd want to use a button on the trigger like Nicole said, and should also apply aria-haspopup="dialog" to the button
- Also, we'd want to update the popover when clicking the token value so that we use an unordered list for the themes listed there as well
Maybe could use some input from others regarding the verbiage, but what do we think about using "theme" for the default or unified, "mode" for the light or dark, and "contrast" for, well, the contrast? idk if we really ever landed on what verbiage to use and think we've kinda used "theme" a bit interchangeably
- Related, what do others think about replacing the vertical pipes in "Theme | Mode | Contrast" with "Theme, Mode, and Contrast"?
May not necessarily need to be as part of this PR, but we need to update the derived token value element in the "Values" cell. Right now it's just a span that applies PF button classes; it needs to be an actual Button component with the aria-haspopup mentioned above. Also, we need to update the aria-label so that it begins with the actual displayed text, e.g. "#0066cc. Show how pf-t--global--icon--color--brand--default is derived" (though we should think about shortening this to be more concise, or maybe using a separate icon button to trigger the popover and the value is just plain text)

jcmill · 2026-04-24T15:30:43Z

Observation here: Each <tr> is currently wrapped in a <tbody>. It's currently outside the scoped improvements (which is looking awesome btw). It looks like this was intended in the previous version as an expandable, so ignore if that's the eventual intent. If not, it might be worth moving the tbody outside the map so it wraps the entire collection of rows instead. I think its in the TokensTableBody .

jschuler · 2026-04-28T15:44:19Z

@thatblindgeye

When "All themes" is selected and the table displays the various "X themes" text, I'm wondering if instead of a tooltip we could use a Popover, and within that render an unordered list of the themes.

I like the lighter weight tooltip, it is skipped when tab focusing anyhow and the applicable themes are repeated in the actual value popover

Maybe could use some input from others regarding the verbiage, but what do we think about using "theme" for the default or unified, "mode" for the light or dark, and "contrast" for, well, the contrast? idk if we really ever landed on what verbiage to use and think we've kinda used "theme" a bit interchangeably

Isn't that already the case? At least that's how I've built the Select

Commas vs pipes

I like the pipes because I add additional spacing to line up the theme | mode | contrast

jschuler · 2026-04-28T17:01:45Z

latest preview
https://1777394722300-patternfly-tokens.surge.sh/foundations-and-styles/design-tokens/all-design-tokens

thatblindgeye

Looks like the abbreviation legend is still there when all themes are selected:

Isn't that already the case? At least that's how I've built the Select

Ah yeah I just meant like more explicitly in the rendered text, like "Default theme | Light mode | ...". Not a blocker, though.

thatblindgeye · 2026-04-28T17:14:33Z

+          position="bottom"
+          minWidth="400px"
+        >
+          <Button


Also just need to add aria-haspopup="dialog" to this Button

thatblindgeye · 2026-04-28T17:22:43Z

+  const isDisabled = THEME_INVARIANT_CATEGORIES.has(selectedCategory);
+
+  const SelectToggle = (toggleRef) => (
+    <MenuToggle


Assuming this is the toggle for filtering by "all" or a single theme, let's also add an aria-label to be similar to that Button I commented on.

Basically, have the aria-label be [selected value], Filter by theme, to mimic what a native Select would convey (the current value + the label)

Now the toggle will read e.g. "Select theme, current: Default theme | Light | Default contrast" or "Select theme, current: All themes".

So for this, we should have the currently selected value be at the start of the aria-label to satisfy WCAG 2.5.3, which states "A best practice is to have the text of the label at the start of the name."

okay thanks, updated

thatblindgeye · 2026-04-28T17:23:17Z

+  return (
+    <Select
+      aria-label="Select theme"
+      role="menu"


We shouldn't override the listbox role that Select uses here

Suggested change

role="menu"

thatblindgeye · 2026-04-28T17:28:40Z

+                <div style={{ marginBlockStart: 'var(--pf-t--global--spacer--xs)' }}>
+                  {themeNames.map((name) => (
+                    <div key={name}>
+                      <ThemeDisplayLabel themeName={name} />
+                    </div>


For this Popover can we use a PF plain unordered list? Should keep things visually the same but would make the list of applicable themes easier to parse for AT

I've decided to keep the current structure since using List and ListItem does add more spacing between the items which I'd have to override in CSS otherwise

We can revisit this down the line so it's fine if we keep it as-is for now, but the main reason I'd strongly suggest we use a list here is because it's intended to come across as a list of the X themes.

jschuler · 2026-04-29T13:01:52Z

Looks like the abbreviation legend is still there when all themes are selected:
> Isn't that already the case? At least that's how I've built the Select
Ah yeah I just meant like more explicitly in the rendered text, like "Default theme | Light mode | ...". Not a blocker, though.

Yes, there are some tokens that have a specific value for just a single theme combo. They do have the full text in the tooltip though, and the value popover does as well. So I'd be fine with removing the abbreviations box at the top

jschuler · 2026-04-29T13:44:10Z

@thatblindgeye http://patternfly-tokens.surge.sh/foundations-and-styles/design-tokens/all-design-tokens/ should have latest updates to address your comments, thanks!

thatblindgeye

@jschuler overall this is looking nice 😎 Had a couple responses to comments above, only 1 I'd say is something we should change now

andrew-ronaldson

Could we do a separate dropdown for Default and Project felt. I found the list hard to scan because of the repeated "Default theme" | "light..." | "...contrast".

Could the Name column include the double hyphen "--pf-t--global..." Good for copying the token names if you're in product. Maybe in a follow up we could add a copy clipboard button for easy access.

The links have "[Semantic] pf-t--global.." at the start. Small nit but could it be "Semantic: --pf-t--global" or "(Semantic) --pf-t--global..."

jschuler · 2026-04-29T20:04:07Z

Could we do a separate dropdown for Default and Project felt. I found the list hard to scan because of the repeated "Default theme" | "light..." | "...contrast".

Could the Name column include the double hyphen "--pf-t--global..." Good for copying the token names if you're in product. Maybe in a follow up we could add a copy clipboard button for easy access.

The links have "[Semantic] pf-t--global.." at the start. Small nit but could it be "Semantic: --pf-t--global" or "(Semantic) --pf-t--global..."

Do you mean separate out Unified theme options? I am not clear how the interaction should be. How about a horizontal rule instead in the single select?

I like your other 2 suggestions can make the change

andrew-ronaldson · 2026-04-29T20:25:47Z

Something like this. It is also using the mono font and could just be the rh default font

jschuler · 2026-04-29T20:56:52Z

Something like this. It is also using the mono font and could just be the rh default font

What about the "All themes" concept that shows groupings in the value cells? Maybe as the first option in the theme selector, and then disable the mode-contrast selector?

mono font was used to line up the text with the | pipes

edonehoo · 2026-04-28T18:17:01Z

Suggested change

aria-label="Search for a token"

placeholder="Search for a token"

a nitpick, but since you can filter and change the table - "all tokens" isn't technically accurate as a placeholder

It is, since I added a new feature that does a cross search ;)

or maybe I misunderstood, I can take your wording though

ah okay ty! Yeah I meant more so because you can filter the table, so the "search for a token" phrase would just be more applicable across any filtered view. looks good 👍

edonehoo · 2026-04-30T15:23:43Z

feel the same about Andrew's comment about the current menu. I find it a bit complicated, but I also know it's a complex table

Or (granted I'm not a designer) @andrew-ronaldson would it be bad to just have 3 menus? And then a "Clear filters" link that would bring back the "All tokens" view? Maybe is too busy or confusing--just musing

jschuler · 2026-05-01T20:04:16Z

@andrew-ronaldson @edonehoo this is probably a good followup item, wdyt? so we can move a little faster on this PR.

I did add some horizontal rules between the sections though which should help a little

github-actions · 2026-05-05T13:14:48Z

🎉 This PR is included in version 1.16.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

lboehling · 2026-05-05T14:25:36Z

late to the game here, but we'll need to update "Unified Theme" in the dropdown to say "Project Felt"

@nicolethoen @jschuler @andrew-ronaldson should i open a followup?

jschuler · 2026-05-07T14:20:18Z

@lboehling yes please. So the Select should have entries like Project Felt | Light | Default contrast ?

nicolethoen reviewed Apr 23, 2026

View reviewed changes

thatblindgeye reviewed Apr 24, 2026

View reviewed changes

kmcfaul requested a review from edonehoo April 24, 2026 14:18

thatblindgeye requested changes Apr 28, 2026

View reviewed changes

thatblindgeye reviewed Apr 29, 2026

View reviewed changes

thatblindgeye approved these changes Apr 29, 2026

View reviewed changes

nicolethoen requested a review from lboehling April 29, 2026 15:49

andrew-ronaldson self-requested a review April 29, 2026 19:47

andrew-ronaldson reviewed Apr 29, 2026

View reviewed changes

edonehoo reviewed Apr 30, 2026

View reviewed changes

andrew-ronaldson self-requested a review May 4, 2026 20:11

andrew-ronaldson approved these changes May 4, 2026

View reviewed changes

feat(table): [PF-3917] document tokens in all themes/modes

3d5c561

jschuler force-pushed the all-tokens branch from 670c6ea to 3d5c561 Compare May 5, 2026 12:58

jschuler changed the title ~~PF-3917 - Document tokens in all themes/modes~~ feat(table): [PF-3917] document tokens in all themes/modes May 5, 2026

nicolethoen merged commit 75af153 into patternfly:main May 5, 2026
3 checks passed

github-actions Bot added the released on @prerelease label May 5, 2026

edonehoo mentioned this pull request May 13, 2026

Improve design tokens documentation patternfly/patternfly-org#4435

Closed


	aria-label="Search for a token"
	placeholder="Search for a token"

Uh oh!

Conversation

jschuler commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

Uh oh!

jcmill commented Apr 24, 2026

Uh oh!

jschuler commented Apr 28, 2026

Uh oh!

jschuler commented Apr 28, 2026

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jschuler commented Apr 29, 2026

Uh oh!

jschuler commented Apr 29, 2026

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

Uh oh!

andrew-ronaldson left a comment

Choose a reason for hiding this comment

Uh oh!

jschuler commented Apr 29, 2026

Uh oh!

andrew-ronaldson commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jschuler commented Apr 29, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

edonehoo commented Apr 30, 2026

Uh oh!

jschuler commented May 1, 2026

Uh oh!

Uh oh!

github-actions Bot commented May 5, 2026

Uh oh!

lboehling commented May 5, 2026

Uh oh!

jschuler commented May 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

jschuler commented Apr 22, 2026 •

edited

Loading

andrew-ronaldson commented Apr 29, 2026 •

edited

Loading