Commit graph

1221 commits

Author SHA1 Message Date
jenkins-bot c3d07acc78 Merge "Remove margin reset on <pre> tags" 2024-05-24 22:11:57 +00:00
jenkins-bot 565f89e376 Merge "Create dark-mode launch banner component" 2024-05-24 20:22:56 +00:00
Jan Drewniak 903fbda3b0 Create dark-mode launch banner component
Creates a launch banner component for dark-mode
using the CSS-only Codex Dialog component.

This banner is currently not loaded on any page,
but can be invoked using mw.loader:

    mw.loader.using( 'skins.minerva.DarkModeLaunchBanner', r => r( 'skins.minerva.DarkModeLaunchBanner')() );

Bug: T361047
Change-Id: I3cfa9517a387df636534a3940e09289e4d7a1e5b
2024-05-24 14:56:49 -04:00
Steph Toyofuku de3f85bac7 Fix inverted text in (recently) last modified bar
Currently we are using the --color-inverted token, which is double
inverted in night mode, yielding insufficient color contrast with the
blue (progressive) background when the page has been recently modified.
Instead, use the @color-inverted-fixed token, which stays white in night
mode for backgrounds which are darker regardless of mode (additionally,
switch back to using LESS variables as this is the new recommendation)

Visual change due to bugfix

Bug: T364123
Change-Id: Ib284abffd6907272e580986fb08c2b8dee5a1a47
2024-05-17 14:15:39 -07:00
Jon Robson 2adf0b3ed7 Temporarily define color-link-new in Minerva like in Vector
Since there is an open bug on Codex let's temporary set this
color as we do in Vector.

Bug: T363778
Change-Id: I1234825164e5cdcfd4e9c01de6971c64268af236
2024-05-17 16:54:28 +00:00
Func 1bac80cd59 styles: Stop using SkinModule in skins.minerva.mainPage.styles
Follow-up to commit 95c4454 and dd424cb.

This has become a plain style module since 95c4454 and doesn't need to
use SkinModule anymore.

Also, cleaned up the unused import of the less variables.
 * mainPage: apparently never used, dated back to 2cc9516
 * userpage: unused since 196fb20

Bug: T360988
Change-Id: I49304c64cd2bbc5f791164127a5169e60a43058a
2024-05-15 14:49:37 +00:00
Fomafix 7f4c7d2db2 Add eslint-disable-next-line security/detect-non-literal-regexp
Change-Id: Ie85cdab8d2407fd432ae420ae46970490c2f693d
2024-05-14 12:41:50 +00:00
Steph Toyofuku b7e54644b7 Make language selector disabled state accessible contrast
Remove the opacity filter and indicate a disabled state using the
disabled color for both text and the icon.  Add a new disabled icon
variant to accomplish this

Also fixes a small issue where the toast notification was unreadable in
night mode due to using --color-inverted.  Switch this to
--color-inverted-fixed, which was added for this purpose

Visual change for the language selector button, when there are no other
languages available

Bug: T361693
Change-Id: Id2f80028d967bf644673f651bb89718fa8723d22
2024-05-13 22:13:33 +00:00
bwang d0c5ac0674 Replace root extend solution for codex with .cdx-mode-reset()
Change-Id: I7a41d46398c27b97f74d0606bf1b3c9610dda80f
2024-05-08 13:31:20 -05:00
Eric Gardner 3e32517f45 Update Minerva to get Codex CSS vars from default files
As of Codex 1.5.0, all files relating to the "experimental"
build have been removed. Instead, the default Codex design tokens
refer to CSS variables for color-related values, and new files
like theme-wikimedia-ui-root.css have been provided as part of the
new distribution.

Bug: T363006
Change-Id: I1a3c5194013f8f4523098458db45ce867fdfd8c9
Depends-On: I1f54bf4f144eaec6ed317c04bd0c851c2f01b42c
2024-05-01 00:00:42 +00:00
Jon Robson ba64c4168d Complete transition to Codex color palettes
* Update mediawiki.skin.variables to point non-Codex tokens to
Codex token equivalents
* Replace box-shadow-color-drawer with @box-shadow-color-base
* Leave FIXME comments for migrating the last two CSS variables
* Replace direct access to CSS variable with @color-link-new
design token instead since the former may no longer exist.

Bug: T360845
Change-Id: Ie531044d320cde50689064f10ff00db5adcaf859
2024-04-29 14:16:36 -07:00
Jon Robson 6359571312 Use light theme colors for focus colors
According to Derek
"We actually just recently updated all focus tokens
to use the same value (#36c).
This is true for both light and dark modes.

Bug: T360845
Change-Id: I277b685b85c187ff2f25d1b9280bd77e0c0e5057
2024-04-26 17:33:14 +00:00
Jon Robson 8174fe629f Remove tokens with same values in light theme
Certain tokens have the same value in night and light theme so
do not need to be specified in the night mode palette

Bug: T360845
Change-Id: Ibaf6bb1f45997bfee4fa8334948def64265917b0
2024-04-26 17:33:06 +00:00
jenkins-bot b01d9420a0 Merge "Use tokens from Codex" 2024-04-25 20:50:56 +00:00
Jon Robson 551901726d Use tokens from Codex
Bug: T360845
Change-Id: Id32a8b861aacacdfddc528882973b1043d83a5ff
2024-04-23 16:05:50 -07:00
Ed Sanders b77a8e0608 Remove margin reset on <pre> tags
Bug: T363158
Change-Id: Ie401daa984c17581d707cc7a3d76732881d0cae0
2024-04-23 12:51:52 +01:00
bwang 95c4454cf9 Remove MinervaKnownTemplateHacks
Bug: T362727
Change-Id: Iccb2e15df25f35d625d88ec4e39a16f97f84b505
2024-04-22 17:33:01 +00:00
Jan Drewniak fa71422bd0 Import codex-design-tokens-experimental.css as Less file
Previously, the Less @import was followed by the
`(inline)` option, which caused the `:extend` feature
on the following lines to not work as expected.

Importing the codex-design-tokens.css file with
the `(less)` option instead produces the desired
output, i.e: `:root, .skin-invert, .notheme {...}`.

Bug: T361325
Change-Id: I58d391b4105f077ac928a698403763268d2b4171
2024-04-19 13:51:48 -04:00
Fomafix 3b343d142d Get namespace ids from wgNamespaceIds
Use
	mw.config.get( 'wgNamespaceIds' ).category
instead of hard coded `14`.

Change-Id: Id54a33d45a696e958cf338e3ef93c1e078582bf1
2024-04-14 11:48:02 +00:00
Fomafix c43cdce48c Some small JavaScript/jQuery improvements
Change-Id: I33feb8bccbd870f589a01dc187e6155b7498714c
2024-04-08 19:45:22 +00:00
jenkins-bot c6a27036af Merge "Update imports for experimental file split in Codex" 2024-04-03 04:29:11 +00:00
Roan Kattouw 94ae5c67e9 Update imports for experimental file split in Codex
Codex v1.3.6 split the -experimental.less file into -experimental.less
and -experimental.css. The former only contains the Less variables, and
the latter contains the :root {} block with CSS variables. Both files
were also renamed. Update our imports accordingly, so that we import the
right things in the right place.

Bug: T360577
Depends-On: I12813bf0db89b72aa8f2a28ccccb3477e4361ac8
Change-Id: I0b2671cb42476eb264033fd7b15e038e74046602
2024-04-02 15:43:55 -07:00
Jan Drewniak f9183cbc81 Follow-up to cf723c00 - Guard against undefined $container
Since `initMediaViewer()` can be invoked via
`mw.hook( 'wikipage.content' ).fire($container)` it's better
to validate that $container is in fact an HTMLElement and not
an empty jQuery collection.

Bug: T360781
Change-Id: Ib43327dd70c35918e3079c7b6b23a161383654b5
2024-04-02 14:37:23 -04:00
Jon Robson 480f84bc04 Define background-color-neutral in night mode palette
Bug: T357998
Change-Id: Iab5ec302274f65658885325e239329a1836cc8c3
2024-04-01 22:47:02 +08:00
Jon Robson 3ced132ce1 Define background-color-neutral-subtle in dark mode palette
Needed by categories

Bug: T357166
Change-Id: Iea31b59d00c0619567068a5ea5c440222d45ee3e
2024-04-01 09:17:11 +08:00
Fomafix effd4fe133 Use eslint rule "no-var": "error" and replace all var
Change-Id: I67acf88e1b8de55054248d7cf8ca622d5772ea6f
2024-03-29 07:40:22 +00:00
Fomafix a73e2d2d19 Add eslint rule "max-len": "error" and fix long lines
Change-Id: I079f300eea18024a6e1698b5016778fa60c74578
2024-03-29 02:05:03 +00:00
jenkins-bot 90470423ac Merge "Use alphabetic order for eslintrc rules" 2024-03-29 01:26:50 +00:00
jenkins-bot 2a233b1542 Merge "Remove styles in hacks.less that no longer apply" 2024-03-27 21:09:16 +00:00
Fomafix dfa61af611 Use alphabetic order for eslintrc rules
Change-Id: Ic7afff052c004ba179a8814f79e7722fb66bdbbc
2024-03-27 19:54:21 +00:00
bwang b8a6a9c1bd Remove styles in hacks.less that no longer apply
Bug: T360387
Change-Id: I3eb7ec0c8a52a39cc97b60443cac0e6a5bba5482
2024-03-27 14:14:09 -05:00
jenkins-bot 8df385d08f Merge "Minerva should use content-tables ResourceLoaderSkinModule feature" 2024-03-26 18:29:57 +00:00
jenkins-bot 4963900d70 Merge "Update padding on <p> elements" 2024-03-25 19:36:20 +00:00
Jan Drewniak cf723c00c3 Guard against undefined $container element in initMobile.js
In order to prevent spikes in JS errors, ensure that the $container
element exists before initializing the mobile media viewer.

Bug: T360781
Change-Id: I48a57e8008e7bd90e9fcfc783f3720f6f75520a7
2024-03-25 09:38:11 -04:00
Jon Robson 8f8fd6a1e4 Minerva should use content-tables ResourceLoaderSkinModule feature
The styles in Minerva are identical to the preset in core with the
own exception being padding. Therefore use the upstream styles
and retain only the override.

Bug: T357998
Depends-On: I206e91dac7e14d80a5ffc6b533255b54dafca29a
Change-Id: I3eb07a03b3b4e2a7544e5b07de6af9f67a1c965f
2024-03-21 22:49:14 +00:00
jenkins-bot 978702f3be Merge "Revert "The new class should be present alongside the old class for all page views"" 2024-03-20 16:15:18 +00:00
Jdlrobson b6ffc85cd4 Revert "The new class should be present alongside the old class for all page views"
This reverts commit bca9223bb1.

Reason for revert: This is now longer needed following the work
in Ia253de68f94236e7fe2219b736dd6084c64ce838.

Bug: T359983
Change-Id: Ibd3013169f26531a0cd879c143692e7030709808
2024-03-19 23:23:54 +00:00
Moh'd Khier Abualruz 5d6b866890 Rename the skin night mode classes to more readable classes
The classes:
- skin-night-mode-clientpref-0
- skin-night-mode-clientpref-1
- skin-night-mode-clientpref-2
is being replaced with
- skin-theme-clientpref-day
- skin-theme-clientpref-night
- skin-theme-clientpref-os
- Moved $forceNightMode to be a text parameter (dat|night|os)
- Keep adding the old classes to the html element, to give the ability of gradual deployment

The preference is renamed from minerva-night-mode to minerva-theme (a follow up to consider
migrating existing values will follow).

The query string minervanightmode continues to behave the same but now
accepts other values such as day, night and os.

Bug: T359983
Change-Id: Ia253de68f94236e7fe2219b736dd6084c64ce838
2024-03-19 23:12:59 +00:00
Jon Robson bca9223bb1 The new class should be present alongside the old class for all page views
Bug: T359983
Change-Id: Id0bcb3c9b0d37aef84886fe2efb907f8ebd1cfd9
2024-03-18 21:43:44 +00:00
bwang 9c52c298ad Update padding on <p> elements
Bug: T358808
Change-Id: I7f13bddaf79cd9b1061a1cac03e6ab1b767fc808
2024-03-18 19:10:20 +00:00
Jan Drewniak 1d379b3baa [refactor] Re-organize CSSCustomProperties.less
Organizes the code in CSSCustomProperties.less into
3 separate groups:
- Forced night-mode,
- auto night-mode
- night-mode helpers.

Also applies `color: var(--color-base)` to both .skin-invert
and .notheme to address situations where color is
defined by inheritance.

Change-Id: I9edc6fd81416f0f40eca975381f61023ac047e47
2024-03-15 23:26:56 +00:00
Steph Toyofuku 4b3abcb1eb [VISUAL CHANGE] Update last modified bar to have an accessible color contrast
The current white text on a green background is not an accessible level
of color contrast.  We were instead recommended to use
@background-color-progressive, so let's do that

In addition, remove the previous definition of
@background-color-last-modified-bar-active as it's no longer being used

Visual change for pages on mobile that have been updated recently

Bug: T358736
Change-Id: If5b97b785e95df75645be62847cef396f6be68b6
2024-03-15 22:28:48 +00:00
lwatson b91942025b styles: Update color in SVG from #d33 to #d73333
This patch promotes a consistent design decision across projects in
MediaWiki core, extensions, and skins. The darker red color meets the
W3C Web Content Accessibility Guidelines (WCAG) at Level AA that text
or images of text must have a contrast ratio of at least 4.5:1 (or 3:1
for large text).

Bug: T343239
Change-Id: I5c3f0731c76b689d0c985faa21036b8c2fddac20
2024-03-13 15:00:37 -04:00
jenkins-bot 6d50ae266b Merge "Set color on tables" 2024-03-11 23:33:49 +00:00
Jon Robson d1c4eec649 Set color on tables
Bug: T357998
Change-Id: I602dd9616c5452f5151fdcea729ff7ccac4711aa
2024-03-11 15:59:34 -07:00
Steph Toyofuku 1f564dfb23 Fix color for inline styles with background color in night mode
Use CSS to target parsed content where a background color is defined
inline without an accompanying text color.  Additionally, add an ADR
documenting this decision to the repo

Visual change in night mode only, as the text color will now be correct

Bug: T358797
Change-Id: If375c4c9691462d314e91a74da0fc8365137cd8c
2024-03-11 15:43:37 -07:00
Umherirrender e82d8e7121 Fix casing of dropdown-related less file
Follow-Up: Ifda13ba9dee316709c424636ec3b285de8d0e9b1
Change-Id: I4c310770af6039cfa7931f4319571c77d35b9ef6
2024-03-09 15:45:32 +01:00
Jon Robson 0ca85691dd Expand the list of classes where colors are disabled in night mode
Based on list on [[mw:Recommendations_for_mobile_friendly_articles_on_Wikimedia_wikis]]
and running color contrast checker on every project.

Bug: T358164
Change-Id: I1ecbc1bac060eae4b9d99f461284d15b5da3d576
2024-03-08 21:55:59 +00:00
Jon Robson 9614949134 Force color and background rules in night mode for infoboxes
In the current theme the background and color can be overriden by
style attributes, however in night mode this shouldn't happen

This helps the following projects:
- https://ext.m.wikipedia.org/wiki/Par%C3%ADs?minervanightmode=1
- https://kl.m.wikipedia.org/wiki/Paris?minervanightmode=1
- https://szl.m.wikipedia.org/wiki/Pary%C5%BC?minervanightmode=1

Bug: T357453
Change-Id: I4c45b1e62b60d9ae42a2948707134745a9b7f808
2024-03-08 09:16:43 -08:00
Jan Drewniak 65f1300b78 Add color: var( --color-base ); to .notheme class
Adds a rule that makes elements using the .notheme class
inherit black text unless specified otherwise.
This addresses situations where elements relying on
inheritance for color.

Bug: T358528
Change-Id: Ie59c31b5e25684ff5ecad507a273fbe71af4bca0
2024-03-07 16:02:02 -08:00