Commit graph

359 commits

Author SHA1 Message Date
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
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
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
Jan Drewniak aef7b869b1 Rename --color-link--visited to --color-visited
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
2024-03-05 20:05:46 -05:00
bwang 72be98a638 Set background/color to inherit for common templates in dark mode
Bug: T358164
Change-Id: I494275970728e2c6be5cebe422249ab4c4f88ba5
2024-03-05 19:34:29 +00:00
Jdlrobson 211171f227 Partial Revert "Set background/color to inherit for common templates"
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
2024-03-04 20:02:27 -08:00
jenkins-bot 6dc80f7f05 Merge "Define message box, diff colors and missing box shadows for two themes" 2024-03-05 02:17:20 +00:00
Jon Robson aa0a596c7d Define message box, diff colors and missing box shadows for two themes
Bug: T358402
Change-Id: I171b6ad8bb36e52704224c5d28bc6081bc07ace5
2024-03-05 01:51:18 +00:00
jenkins-bot 7721ffad8a Merge "Don't strip colors from links" 2024-03-05 01:17:05 +00:00
jenkins-bot d6330ef6d2 Merge "Strip color from infoboxes in night mode" 2024-03-05 01:16:23 +00:00
Jon Robson 9e4a81528a Don't strip colors from links
- in main page
- in sideboxes - these only contain over div elements so
use div instead of * selector

Bug: T357722
Change-Id: If0e9eeb9471f3990afd5254b51af8dbe9cb538e0
2024-03-05 00:54:46 +00:00
Steph Toyofuku 04708df310 Strip color from infoboxes in night mode
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
2024-03-04 15:50:49 -08:00
jenkins-bot 708dc44fb9 Merge "Integrate Codex experimental design token build" 2024-03-04 23:46:36 +00:00
Jon Robson db465050d5 Fixes last modified bar colors when visited link
The last modified bar "by" text is purple when the link is visited.
(https://phabricator.wikimedia.org/F42396630)

Change-Id: I9a3789fe68b5427e00f617f1d0e1436e59842661
2024-03-04 23:17:09 +00:00
Jan Drewniak 649cb10622 Integrate Codex experimental design token build
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
2024-03-04 23:04:57 +00:00
bwang 9366943f7e Make notheme exception to CSS hacks
Bug: T358164
Change-Id: Ie7fe3b32be4fb6aa308574da42ce9413ab97eb94
2024-03-04 18:34:42 +00:00
jenkins-bot e5c670f25b Merge "Move color-scheme property from :root to .skin-night-mode-clientpref-2" 2024-03-01 22:02:22 +00:00
jenkins-bot 351cfebce9 Merge "Invert all icons in UI that use background-image" 2024-03-01 21:42:28 +00:00
Jon Robson 89c99df5ef Invert all icons in UI that use background-image
Bug: T356822
Change-Id: I02e89837310009135d084ba31ab76fe2be5907af
2024-03-01 15:09:35 -06:00
Jan Drewniak 0efbd88259 Move color-scheme property from :root to .skin-night-mode-clientpref-2
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
2024-03-01 14:00:37 -05:00
bwang 9f541aafcc Set background/color to inherit for common templates
Bug: T358164
Change-Id: Idb1c4ee6ff28ae576a144a8f661d772f9312535b
2024-02-29 23:24:52 +00:00
Jon Robson f7124fdc6c Separate image inversion from widget inversion
For images only the filter is needed, not the entire
widget

Bug: T356822
Change-Id: Id0ace19d4071a987d132224612724259ed40aa1b
2024-02-27 11:29:06 -07:00
anterdc99 0e068128a6
Assign a default background color for tables using "wikitable" class
Bug: T358449
Change-Id: Ia43683fe51aaffb08d08e40f5fe670d663749daa
2024-02-26 03:17:04 +08:00
Jon Robson c94c90d93d Adds color-emphasize to palette
Needed by the language overlay

Bug: T356825
Change-Id: I1d9551f1b42dec5be715e889069279f97f64749e
2024-02-23 20:21:02 +00:00
bwang dd32e6731d Add icon background styles to codex CSS icons
Bug: T358160
Change-Id: I6b7ec3c4e3837a68da98bd9f58dbade5fb4fa1ed
2024-02-23 20:20:26 +00:00
Jon Robson 9cec6a2230 Skin invert shouldn't apply in day mode.
Bug: T356425
Change-Id: Ic5c754734f7df093629d1121d61e89cd1f3225fc
2024-02-23 18:28:47 +00:00
Jon Robson d32a682aad Allow things to be mark themselves as invert-able
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
2024-02-21 15:49:26 -08:00
Jan Drewniak 7f1e394e9e Follow-up to a30b575271 Map color-based skin variables to CSS variables
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
2024-02-21 10:17:39 -05:00
Jon Robson a30b575271 Map color-based skin variables to CSS variables
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
2024-02-21 00:36:13 +00:00
jenkins-bot 7926101f48 Merge "Remove the rest of the reset" 2024-02-20 21:22:11 +00:00
Volker E d84216b0db styles: restore bold for captions in tables
This fixes the regression introduced in I6331d88e5b73.
Also un-nesting selector to necessary level.

Bug: T357849
Change-Id: I58ed32e63ad4c37aefd79edac5f1376ce4313ee3
2024-02-20 01:34:27 +01:00
jenkins-bot 9f2a7a829b Merge "Add --color-link--visited to night mode palette" 2024-02-16 18:49:52 +00:00
Jon Robson 003d9fea5b dd elements should have no margin
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
2024-02-16 16:56:26 +00:00
Steph Toyofuku c98508facb Add --color-link--visited to night mode palette
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
2024-02-16 09:35:19 -05:00
Jon Robson 70e68aedd8 Remove the rest of the reset
VISUAL CHANGE:
* Improves top margin on User common.js for code

Bug: T205341
Change-Id: Ia402fd069341da14532d332fab7c109d34c7208d
2024-02-15 19:56:46 +00:00
David Lynch 57d1b2ab5b Add border-collapse to wikitable
Follow-up to 7c9304cbf4 which removed it
from all tables.

Bug: T357589
Change-Id: I1d62a9b2c0f571389f5cbebdc56b24ff4c325283
2024-02-15 18:28:33 +00:00
Jon Robson 145db70286 Reset: Drop p and div inside overlays
Required for proper presentation of page issues overlay
and multimedia viewer.

The div rules were unnecessary.

Bug: T205341
Change-Id: I6fea0f2013a11e5248b71619b795d794c8ed18ad
2024-02-14 22:20:43 +00:00
jenkins-bot 50a55bce7d Merge "Invert logos" 2024-02-14 22:00:47 +00:00
bwang 1e9de11ccf Invert logos
Bug: T356823
Change-Id: I5ccaa865197dd70afb524b3d47515ebc8e9db214
2024-02-14 21:35:27 +00:00
Steph Toyofuku 91c9e68afb Fix borders in night mode palette
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
2024-02-14 16:18:21 -05:00
jenkins-bot cab803db1b Merge "Reset: Further simplify the reset" 2024-02-14 11:58:13 +00:00
Jon Robson ea6c55f925 Reset: Further simplify the reset
* Move pre to content/text.less
* Move heading styles to text.less
* Move search input styles to ui.less

Bug: T205341
Change-Id: I333918089af1c20e9467ad57596dd9dd6925869a
2024-02-13 18:23:28 -08:00
bwang 3d95788553 Flip page issue background color
Bug: T357179
Change-Id: Idd59beb17744ce247be66446dc11214e27328fd3
2024-02-13 21:21:25 +00:00
jenkins-bot ad02a53e8a Merge "Restore link active color" 2024-02-13 17:18:55 +00:00
Jon Robson 138769f60f Restore link active color
Bug: T357381
Change-Id: Idee0532800127285618d3c709eb39d1bf32f83a8
2024-02-13 08:32:40 -08:00
Steph Toyofuku 54d577d9b4 New night mode color palette
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
2024-02-13 10:22:11 -05:00