3.0.0
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 |