[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:  Awaiting Review
Component:  Administration  |    Version:
 Severity:  normal          |   Keywords:
  Focuses:  ui, css         |
----------------------------+-----------------------------
 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>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform