v3.0.0

3.0.0 (2025-03-28)

Please check out the migration section below if you have run into any issues.

⚠ BREAKING CHANGES

• tokens: All primary colors tokens are renamed.
• tokens: CSS variables that are previously deprecated are now hard-deprecated.
• Citizen is targeting MW 1.43 now and start development on the v3 version

Features

• CodeMirror: ✨ add initial styles for CodeMirror v6 (87fc5ca)
• CodeMirror: ✨ add WikiEditor and VE styles for CodeMirror v6 (b8fa2c7)
• CommentStreams: ✨ update styles for 1.43 (dbb1da0)
• core: ✨ add frosted glass effect to menu cards (c20082c)
• core: ✨ add top margin to mw-content-text (7c6237e)
• core: ✨ adding vertical padding to text editor (1ec112d)
• core: ✨ bump dark border color contrast (f94d0a4)
• core: ✨ drop letter-spacing from legend (85588ff)
• core: ✨ improve site notice handling (7dac6d2)
• core: ✨ only apply main page-specific styles on read view (fb8be79)
• core: ✨ set mwRestApi as the default search gateway (ed5f11a)
• core: ✨ update mw-indicators spacing (cc1843e)
• core: ✨ use mask-image instead of background-image for Citizen UI icons (bc828b3)
• DiscussionTools: ✨ update DiscussionTools styles to 1.43 (9f750be)
• Echo: ✨ add backdrop when modal is opened (6b9fc0a)
• Echo: ✨ improve Echo badge icon replacement logic (86ba574)
• Echo: ✨ update Echo for 1.43 (6740eac)
• header: ✨ simplify header icon color logic (57711a9)
• mediawiki: ✨ add border to mw-tag-marker (3c626d9)
• mediawiki: ✨ adjust installed software cell width (42321c0)
• mediawiki: ✨ allow Special:SpecialPages legends to float (0a4d42e)
• mediawiki: ✨ increase input field height in signup and login pages (898580a)
• mediawiki: ✨ rework login and signup page styles (c10ca94)
• mediawiki: ✨ start-align installed software in Special:Version (f152da9)
• mediawiki: ✨ update styles for Special:Preferences (597abc1)
• MultimediaViewer: ✨ add hover state to description button (ebe1979)
• MultimediaViewer: ✨ add styles for error box (6ea13ff)
• MultimediaViewer: ✨ scale down the description button (99d926f)
• MultimediaViewer: ✨ simplify title max-height calculation (9fb16c6)
• MultimediaViewer: ✨ update styles to 1.43 (4497ac1)
• OOUI: ✨ drop unnessecary OOUI styles for 1.43 (7be2ec1)
• OOUI: ✨ standardize border-radius (6f6d96c)
• Popups: ✨ update Popups to 1.43 (e21d75b)
• RelatedArticles: ✨ update RelatedArticles styles (bd340e7)
• share: ✨ do not show share button if page is not a content page (8c29416)
• stickyHeader: ✨ make sticky header more compact (8e62594)
• stickyHeader: ✨ use fancy frosted glass for page header (ad50e8d)
• TemplateData: ✨ update styles for 1.43 (6110a5d)
• toc: ✨ match ToC link color with color-base (67852e7)
• tokens: ✨ add backdrop-opacity CSS variable (76727b1)
• tokens: ✨ add more saturation to frosted glass (cb14c43)
• tokens: ✨ backport Codex tokens from latest master (6252e24)
• tokens: ✨ revamp colors that are related to progressive/primary colors (a5f5a3c)
• tokens: ✨ update Codex tokens to v1.14.0 (7ef2375)
• tokens: 💥 ✨ drop deprecated tokens (b82923a)
• UploadWizard: ✨ clean up spacing (1a062a8)
• UploadWizard: ✨ update UploadWizard to 1.43 (f241493)
• VisualEditor: ✨ update styles to 1.43 (c91135d)
• WikiEditor: ✨ add responsive handling for advanced toolbar (1f4045a)
• WikiEditor: ✨ update styles to 1.43 (808f7b1)

Bug Fixes

• CodeMirror: 🐛 fix text selection background color for links (#1007) (e66605f)
• CodeMirror: 🐛 override default dark mode color (32e78ff), closes #1001
• core: 🐛 do not invert mw-indicator (6f33824)
• core: 🐛 drop the use of SkinModule class in font modules (367dbde)
• core: 🐛 drop unused Codex skinStyles (ddbe205), closes #1004
• core: 🐛 fix incorrect dark border interactive color (0019b6c)
• core: 🐛 fix incorrect type declaration (33d577f)
• core: 🐛 fix incorrect type declaration again (37b36e8)
• core: 🐛 fix typo in sr-only class (4d6eed9)
• core: 🐛 override Codex tokens even when they are same as default (ff6f75b)
• core: 🐛 remove bottom margin from contentSub (633578d)
• dropdown: 🐛 remove unnecessary content-visibility on icons (b1f7529)
• footer: 🐛 force footer icon to have light background color (e7b3550)
• header: 🐛 fix invisible home button in header (e5f0fb2)
• icons: 🐛 add fallback for browser that does not support CSS mask (4279397)
• icons: 🐛 load unBlock icon (e2fe673), closes #1011
• links: 🐛 ensure self link does not have hover state colors (229a13c)
• mediawiki: 🐛 fix debug toolbar z-index (e36fe02)
• mediawiki: 🐛 fix various layout issues on Special:Version (75af101)
• menu: 🐛 fix incorrect width overflow (880ec7d)
• MultimediaViewer: 🐛 fix incorrect layout in narrow viewport (00705cc)
• MultimediaViewer: 🐛 remove unused styles (da990b4)
• OOUI: 🐛 fix incorrect border-radius for connected elements (250948f)
• OOUI: 🐛 fix incorrect property for tab styles (43c5897)
• OOUI: 🐛 fix tab option selected border-bottom (#1008) (b3a9623)
• overflowElements: 🐛 fix incorrect z-index for overflow sticky header (bd05c25)
• Popups: 🐛 ensure text fade color get applied across all themes (2bfdb67)
• RelatedArticles: 🐛 hide in VisualEditor (#1009) (b95cb85)
• styles: 🐛 remove unnecessary night theme indicator styles (402e8d5)
• SyntaxHighlight: 🐛 use Citizen colors for dark theme (cedf9c7)
• tokens: 🐛 enhance pure black mode color variables (274e7b6)
• tokens: 🐛 fix incorrect backdrop light color (017a387)
• tokens: 🐛 fix incorrect colors for pure black mode (53fab3c)
• tokens: 🐛 fix incorrect fallback color definitions (f4e9e70)
• tokens: 🐛 fix incorrect supports tag and add color-base--hover (2430932)
• UploadWizard: 🐛 add small fixes to layout (443278f)
• UploadWizard: 🐛 fix message box styles (4261645)
• UserProfileV2: 🐛 fix deprecations and add fixes for mobile (#1023) (949a733)

Miscellaneous Chores

• 💥 🔧 raise minimum MW requirement to 1.43 (b5080bd)
• 🔧 add coverage directory to .gitignore (d021452)
• 🔧 ignore package-lock.json (b969f10)
• 🔧 remove coverage.xml file from the repository (83edb63)
• eslint: 🔧 update ESLint configuration to use wikimedia/client preset (b12cd9f)
• release: 🚀 bump version to 3.0.0-beta (1f9c58c)

Migration

Some of the CSS variables that are soft-deprecated are now hard-deprecated.
If you have used them on your site styles (e.g. MediaWiki:Citizen.css) or TemplateStyles, you will need to replace them.
You can use the replace tools to replace the deprecated variables (kudos to dgox)

Original Variable	New Variable
--background-color-primary--hover	--background-color-progressive-subtle
--background-color-primary--active	--background-color-progressive-subtle
--background-color-overlay	--background-color-backdrop-light
--background-color-overlay--lighter	--background-color-backdrop-light
--background-color-quiet--hover	--background-color-button-quiet--hover
--background-color-quiet--active	--background-color-button-quiet--active
--border-radius--small	--border-radius-base
--border-radius--medium	--border-radius-medium
--border-radius--large	--border-radius-large
--border-radius--pill	--border-radius-pill
--box-shadow-card	--box-shadow-drop-medium
--box-shadow-dialog	--box-shadow-drop-xx-large
--color-base--emphasized	--color-emphasized
--color-base--subtle	--color-subtle
--color-primary	--color-progressive
--color-primary--hover	--color-progressive--hover
--color-primary--active	--color-progressive--active
--color-text-error	--color-destructive
--color-text-warning	--color-base
--color-text-success	--color-success
--font-weight-semibold	--font-weight-semi-bold
--line-height-xs	--line-height-xxx-small
--line-height-sm	--line-height-xx-small
--opacity-icon-base--active	--opacity-icon-base--selected