Commit graph

16 commits

Author SHA1 Message Date
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
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
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
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
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
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 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
Jon Robson aea4156fe7 color-link-visited was not defined
Follow-up to 59fd0cd

Bug: T356928
Change-Id: I079f3de333fd59162f4e2b87d896bb273b3e9b3c
2024-02-07 15:55:43 -08:00
Jan Drewniak 59fd0cd5dc Convert all color related Less variables to CSS custom properties
All colors used in Minerva are converted from Less variables
into CSS custom properties. A new file called CSSCustomProperties.less
is created in the skins.minerva.base.styles module to store
these custom properties and an ADR is provided on the rationale for
dropping support for browsers that don't support custom properties.

The new CSS custom properties follow Codex design token conventions
where possible (and noted when not).

Link colors are unique because their styles are defined in core,
so in that case the Less variables values are set to custom properties.
Those values are then fed back into MediaWiki core for core link
styling.

Also adds a temporary night-mode color palette under the
.skin-nightmode-1 class on the <html> element.

Bug: T356074
Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff
2024-02-02 17:57:27 +00:00