[wp-trac] [WordPress Trac] #64548: Admin Reskin: Update notice styling to align with WordPress Design System

[WordPress Trac]

#64548: Admin Reskin: Update notice styling to align with WordPress Design System
----------------------------+-------------------------------------
 Reporter:  fabiankaegy     |       Owner:  (none)
     Type:  enhancement     |      Status:  new
 Priority:  normal          |   Milestone:  7.0
Component:  Administration  |     Version:
 Severity:  normal          |  Resolution:
 Keywords:  has-patch       |     Focuses:  ui, accessibility, css
----------------------------+-------------------------------------
Changes (by sabernhardt):

 * focuses:  ui, css => ui, accessibility, css
 * milestone:  Awaiting Review => 7.0


Old description:

> This ticket covers the visual reskin of admin notices in wp-admin as part
> of the WordPress 7.0 admin visual refresh (#64308).
>
> = Why This Matters =
>
> Notices are a key communication mechanism in wp-admin. They are often the
> first thing an editor sees after completing an action. A consistent
> notice system improves clarity, reduces visual noise, and supports
> accessibility through predictable structure and contrast.
>
> Currently, notice styling varies across screens and has drifted from the
> patterns established in the block editor. This refresh brings notices
> into alignment with the WordPress Design System while preserving all
> existing markup and behavior.
>
> = Proposed Scope =
>
> '''Notice types:'''
>  * Info notices (`.notice-info`)
>  * Success notices (`.notice-success`)
>  * Warning notices (`.notice-warning`)
>  * Error notices (`.notice-error`)
>
> '''Additional patterns:'''
>  * Dismissible notices with dismiss button
>  * Inline notices
>  * Legacy `.updated` and `.error` classes
>  * Links and buttons inside notices
>
> = Key Principles =
>
>  * '''CSS-Only Changes''': No markup or JavaScript modifications
>  * '''Backward Compatibility''': All existing selectors preserved, legacy
> classes styled consistently
>  * '''Semantic Colors''': Static colors for each notice type (not tied to
> admin theme color)
>  * '''Accessibility''': Text contrast meets WCAG AA, dismiss button
> keyboard accessible with visible focus
>
> = What This Is NOT =
>
>  * No new notice classes
>  * No new CSS custom properties for semantic colors
>  * No changes to notice behavior or dismissal logic
>
> = Testing Approach =
>
> Test notices where they occur naturally:
>
>  * Dashboard (plugin/theme update notices)
>  * Plugins screen (activation, deactivation, updates)
>  * Updates screen (available and completed updates)
>  * Settings pages (form submission feedback)
>
> Verify in at least two color schemes (modern and light) and confirm
> dismiss button focus states are visible.
>
> = Related Resources =
>
>  * Parent ticket: #64308
>  * Figma: https://www.figma.com/design/804HN2REV2iap2ytjRQ055/WordPress-
> Design-System?node-id=15877-6195
>  * Gutenberg Storybook: https://wordpress.github.io/gutenberg/?path=/docs
> /components-notice--docs

New description:

 This ticket covers the visual reskin of admin notices in `wp-admin` as
 part of the WordPress 7.0 admin visual refresh (#64308).

 == Why This Matters ==

 Notices are a key communication mechanism in `wp-admin`. They are often
 the first thing an editor sees after completing an action. A consistent
 notice system improves clarity, reduces visual noise, and supports
 accessibility through predictable structure and contrast.

 Currently, notice styling varies across screens and has drifted from the
 patterns established in the block editor. This refresh brings notices into
 alignment with the WordPress Design System while preserving all existing
 markup and behavior.

 == Proposed Scope ==

 '''Notice types:'''
  * Info notices (`.notice-info`)
  * Success notices (`.notice-success`)
  * Warning notices (`.notice-warning`)
  * Error notices (`.notice-error`)

 '''Additional patterns:'''
  * Dismissible notices with dismiss button
  * Inline notices
  * Legacy `.updated` and `.error` classes
  * Links and buttons inside notices

 == Key Principles ==

  * '''CSS-Only Changes''': No markup or JavaScript modifications
  * '''Backward Compatibility''': All existing selectors preserved, legacy
 classes styled consistently
  * '''Semantic Colors''': Static colors for each notice type (not tied to
 admin theme color)
  * '''Accessibility''': Text contrast meets WCAG AA, dismiss button
 keyboard accessible with visible focus

 == What This Is NOT ==

  * No new notice classes
  * No new CSS custom properties for semantic colors
  * No changes to notice behavior or dismissal logic

 == Testing Approach ==

 Test notices where they occur naturally:

  * Dashboard (plugin/theme update notices)
  * Plugins screen (activation, deactivation, updates)
  * Updates screen (available and completed updates)
  * Settings pages (form submission feedback)

 Verify in at least two color schemes (modern and light) and confirm
 dismiss button focus states are visible.

 == Related Resources ==

  * Parent ticket: #64308
  * Figma: https://www.figma.com/design/804HN2REV2iap2ytjRQ055/WordPress-
 Design-System?node-id=15877-6195
  * Gutenberg Storybook: https://wordpress.github.io/gutenberg/?path=/docs
 /components-notice--docs

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64548#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform