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
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
Since there is an open bug on Codex let's temporary set this
color as we do in Vector.
Bug: T363778
Change-Id: I1234825164e5cdcfd4e9c01de6971c64268af236
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
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
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
* 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
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
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
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
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
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
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
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
This reverts commit bca9223bb1.
Reason for revert: This is now longer needed following the work
in Ia253de68f94236e7fe2219b736dd6084c64ce838.
Bug: T359983
Change-Id: Ibd3013169f26531a0cd879c143692e7030709808
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
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
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
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
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
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
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
During the Codex experimental build integration, some non-standard
variable color names were not replaced with standardized ones.
This patch replaced:
--color-link--active -> --color-progressive--active
--color-link--visited -> --color-visited
Bug: T356928
Change-Id: I48925009300565adbd7af815138d150219c7e88a
This (partially)
reverts commit 9f541aafcc.
Reason for revert: Applying in light mode as well as night
mode where it was intending. The [bgcolor] rule is safe in both
modes so can stay.
Bug: T358164
Change-Id: I68c4d81209199d0257b7ba2590d19c258d9152e6
- in main page
- in sideboxes - these only contain over div elements so
use div instead of * selector
Bug: T357722
Change-Id: If0e9eeb9471f3990afd5254b51af8dbe9cb538e0
Target a number of common infobox formats and strip the custom colors of
text and backgrounds, as well as borders. This is explicitly a first
pass, so not overly broad but will hopefully encompass a large portion
of the infoboxes we're concerned with
Visual change in night mode only
Bug: T357453
Change-Id: If57f1b1ef6b86a9e45ca655e2317fc31330d207e
Use the Codex experimental design token build to
providing CSS custom property version of design tokens
for night mode.
The build also provides Less variables which are
references to the CSS custom properties. These are
pulled into the mediawiki.skin.variables.less file
and propagated across core and extensions.
Bug: T358059
Change-Id: I78558f6cc1de91d62fb9f8cbf571f73b51eae8ca
The color-scheme property allows certain elements
to change their appearance based on the system
light/dark mode settings.
Therefore, this property should only be applied if "auto"
night mode is enabled.
Bug: T358814
Change-Id: Ic2b836d9696706ab2c628e78cc2592716963e9a5
Note: You need to enable wgMinervaApplyKnownTemplateHack in LocalSettings.php
for these styles to work.
Editors can opt out of these rules by using the already popularized
"notheme" class.
Bug: T357722
Change-Id: I32f3968b74bded987bb60e85a902e551727db545
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: I771fec3f567ea7ce5a25f8c63d88c956a27121ef
When content is inverted via CSS filter, this sometimes inverts
CSS variables which have already been themselves inverted. Allowing
markup to explicitly mark itself as invertable would be helpful.
For now, usage is intended only for extensions integrating with
the skin. Since we're not sure this can be considered a stable
interface by editors we intentionally use the `skin-` prefix rather
than `mw-` interface given the note about confusion about what is
stable in [[mw:Stable_interface_policy/Frontend#Writing_code]]
Bug: T356425
Change-Id: I0cd0e36a6abe0bba9e98d1b319e636bef2952301
Add an @import for Codex variables, i.e.
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui.less';
that adds overrides to the variables from
'mediawiki.skin.defaults.less' to CSSCustomProperties.less.
Bug: T356427
Change-Id: I7c2c3a07899b4de735f7e7fd24e003ab69d449bb
Additional changes:
* Separate CSSCustomProperties.less from skin.less so that
we can obtain the unmodified original values for the colors
Depends-On: I363a97d33d85a9033da753f2a8fe730d80206639
Depends-On: I148eaca747352ffdc9d1423f20d34bd5a1d0e447
Bug: T356427
Change-Id: I916450c276cabb0c7c871525c50f95fb87f498ad
This fixes the regression introduced in I6331d88e5b73.
Also un-nesting selector to necessary level.
Bug: T357849
Change-Id: I58ed32e63ad4c37aefd79edac5f1376ce4313ee3
In 1.42.0-wmf.17 these had margin 0 in Minerva.
I incorrectly assumed we had defined an explicit margin in content
and for talk pages but apparently none exists, so I have restored
this rule to the list.less file.
Follow up to I6331d88e5b7301fd13249414350a539738cfae53
Bug: T357742
Change-Id: Ib3062bfbffe35415f479bae46ecf02e8a094958b
Right now visited links in night mode are showing the day mode style for
@color-visited, because --color-link--visited is defined, but never set
to a corresponding night mode style. This defines the night mode
variant in the stylesheet, and sets it to the same value as
--color-visited
Visual change only in night mode, which is behind a feature flag
I also added /coverage/ to the eslintignore, as I was getting failures
on the pre-commit hook due to us linting the coverage report 🙃
Bug: T356825
Change-Id: I96695fe4c094b79385e36aef9e29b8d392c06302
Required for proper presentation of page issues overlay
and multimedia viewer.
The div rules were unnecessary.
Bug: T205341
Change-Id: I6fea0f2013a11e5248b71619b795d794c8ed18ad
Following a discussion in the ticket, update the places where `#eaecf0`
has been hardcoded to reflect whether it is intended to be a border or
background style and replace with CSS variables where applicable. Add
`--border-color-muted` as a CSS custom property, and update the night
mode palette to use it. Lastly, add `--color-error`, to be used in a
subsequent patch
Visual changes, but again gated behind night mode feature flag
Bug: T356825
Change-Id: Icb5741190f3e80a20dcedf9b13d6a34fe619b467
Add a skin-night-mode-page-disabled class to the HTML element when
a page was disabled by the new MinervaNightModeOptions configuration
flag.
Bug: T356653
Change-Id: I7a6582ef8f66e78cc6f07da06bc4d2a3277cfcf0
Update the `night-mode-palette` styles to reflect the updated design
There is definitionally a visual change, but should only be for night
mode (which is currently gated behind a feature flag)
Bug: T356825
Change-Id: Iebe3b91cdf9e5e5effb2bc3ab4ff75859024056f
