[6.x] UI tweaks: Craft 5 colors and tidier chrome by brandonkelly · Pull Request #20612 · craftcms/cms

brandonkelly · 2026-11-12T00:37:00Z

Description

Brings back Craft 5's colors and tightens up the chrome around the content.

 /* color-definitions.js */
-slate: v6 slate keys          blue: ~226° keys
+slate: Craft 5 gray-050…900   blue: 221° (Craft 5's link blue)

 /* tokens.css */
+--c-surface-page:    base-200 (Craft 5 gray-100)   html, body, .cp
+--c-surface-details: base-100 + 40% white          details pane, dashboard widgets

 /* cp.css */
+--cp-chrome-icon-size:  12px                       nav, header, breadcrumb,
+--cp-chrome-icon-color: slate-700                  details rail, content tab icons

Global header: no dark theme, fill, shadow or borders (a bottom border on mobile only); its row is centered in the space down to the body panel; the system info matches the nav items' width, truncates long names, and keeps its name when the sidebar is collapsed; the avatar centers over the details rail, and the last icon ends where the details pane does.
Details pane: its own surface, shared with the Activity and Ask AI composer fades via --cp-details-bg, and a subtle inset shadow on its leading edge. Ask AI's input is transparent, like the comment box.
Nav: icons stay put when the sidebar collapses, and a nav item stays hovered while its flyout is open.
Buttons: menu and popover invokers stay hovered while open; icon button rows in the header and cards are tighter.
Breadcrumbs: lighter separators, even spacing around folder breadcrumbs' separators, and no trail at all when it would only be the current page (Dashboard, Settings, Releases).
Fields: action menus sit right after the label and its required/translatable indicators, evenly spaced, with the menu flush. The translation indicator is now a craft-info-icon, so its description opens on press (and on touch) rather than hover.

Evidence

All in light mode, on an entry page.

Full screen

Before:

After:

Sidebar collapsed

Before:

After:

Mobile

Before	After

🤖 Generated with Claude Code

https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Slate’s color keys are now Craft 5’s gray-050 through gray-900, so base, which shares them, and the surfaces built on it, take Craft 5’s blue-gray. base-200’s ratio drops to 1.1 to land on Craft 5’s gray-100. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

The accent blue (Save, selected states, lightswitches, links) matches Craft 5’s link blue. Leonardo keeps each stop’s contrast. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Adds --c-surface-page (Craft 5’s gray-100) and --c-surface-details (a lighter gray-050), and a --cp-details-bg variable the details pane, its overlay panels, and the Activity and Ask AI composer fades share. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Drawn by an overlay on the pane, so the composers’ fades can’t cover it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

craft-breadcrumbs now spaces its separators evenly, so the end margin these added doubled the gap after each one. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Expanded rows with an icon now pad by the border less, so their icons sit where collapsed rows center them. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Applies to buttons slotted as an action menu’s or popover’s invoker. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

The header drops its dark theme, fill, shadow, and borders (keeping a bottom border on mobile), takes in the space above the body panel, lines the system info up with the nav items (truncating long names, and keeping the name when collapsed), and centers the avatar on the details rail with the last icon ending where the details pane does. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Adds --cp-chrome-icon-size (12px) and --cp-chrome-icon-color (slate-700), shared by the global nav, header, breadcrumb, details rail, and content tab icons. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Also moves #20599's entry up with the other control panel changes. [ci skip] Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

github-actions · 2026-11-12T00:40:45Z

📚 Storybook previews

@craftcms/ui — open Storybook

Changed components:

resources/js — open Storybook

No changed components detected in this Storybook.

Over a cover image the buttons have a backing of their own, so they keep the gap that plain ones dropped. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

A tooltip's fill is always black, but what it holds took the page's theme, so in the light theme the key caps in the header's Search and Ask AI tooltips were pale on pale. The dark header used to cover for this. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Beside a visible label, a field's actions now follow the label and its required and translatable indicators rather than sitting at the far end of the heading. The translation button and the field's action menu are flush, so the label text, indicators and buttons all sit the same distance apart. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

So its description opens on a press, including on touch screens, rather than on hover. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

A lone crumb with no switcher just repeats the page’s heading. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

[ci skip] Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

# Conflicts: # CHANGELOG.md # packages/craftcms-ui/src/components/nav-item/nav-item.styles.ts

…wn tests The tooltip checklist cited the field's translation test, which now covers an info icon instead. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

brandonkelly and others added 15 commits November 11, 2026 16:32

Give the details pane a subtle inset edge shadow

ba0b33e

Drawn by an overlay on the pane, so the composers’ fades can’t cover it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Match dashboard widgets to the details surface

458400f

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Make Ask AI’s input transparent, like the comment box

adee8d8

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Lighten breadcrumb separators

10478cc

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Keep nav icons in place as the sidebar collapses

3898662

Expanded rows with an icon now pad by the border less, so their icons sit where collapsed rows center them. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Keep a nav item hovered while its flyout is open

23decd9

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Keep menu buttons hovered while their menus are open

6da0e2d

Applies to buttons slotted as an action menu’s or popover’s invoker. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Tighten icon button rows in the header and cards

454f1ef

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Changelog for #20612

8e14a3e

Also moves #20599's entry up with the other control panel changes. [ci skip] Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

brandonkelly requested a review from brianjhanson November 12, 2026 00:40

brandonkelly and others added 7 commits November 11, 2026 16:46

Keep cover cards' action buttons spaced apart

5d85d60

Over a cover image the buttons have a backing of their own, so they keep the gap that plain ones dropped. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Match the mobile header's avatar spacing to its icons'

6fdb6f4

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Merge remote-tracking branch 'origin/6.x' into ui-tweaks

f88cac7

Merge remote-tracking branch 'origin/6.x' into ui-tweaks

c6e26bf

Merge remote-tracking branch 'origin/6.x' into ui-tweaks

c5577b8

brianjhanson approved these changes Nov 12, 2026

View reviewed changes

thupsi mentioned this pull request Nov 12, 2026

Entry editor spacing tweaks #20634

Merged

brandonkelly and others added 4 commits November 12, 2026 09:54

Show fields’ translation indicator as an info icon

b79d32e

So its description opens on a press, including on touch screens, rather than on hover. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Drop a breadcrumb trail that’s only the current page

e20f4d8

A lone crumb with no switcher just repeats the page’s heading. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Changelog entries for the translation indicator and lone breadcrumbs

56d3035

[ci skip] Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V33uARgrvVtiFqtAthPJbg

Merge remote-tracking branch 'origin/6.x' into ui-tweaks

7abfb6a

# Conflicts: # CHANGELOG.md # packages/craftcms-ui/src/components/nav-item/nav-item.styles.ts

brandonkelly merged commit 01f9c5a into 6.x Nov 12, 2026
22 checks passed

brandonkelly deleted the ui-tweaks branch November 12, 2026 18:37

Navigation Menu

Repository navigation

[6.x] UI tweaks: Craft 5 colors and tidier chrome - #20612

[6.x] UI tweaks: Craft 5 colors and tidier chrome#20612
brandonkelly merged 27 commits into
6.xfrom
ui-tweaks

brandonkelly commented Nov 12, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Nov 12, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

brandonkelly commented Nov 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Evidence

Uh oh!

github-actions Bot commented Nov 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Storybook previews

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

brandonkelly commented Nov 12, 2026 •

edited

Loading

github-actions Bot commented Nov 12, 2026 •

edited

Loading