In order for most OOUI grayscale icons and indicators to be inverted
correctly, we need to apply the inversion to a limited number of
elements by a general class.
Applying here to keep OOUI library MediaWiki agnostic.
Bug: T365764
Depends-On: Ib183cd7c28ea3fb68a6614b38362325560b426f8
Change-Id: I437db61c34cdcce8d3602b1354fa4addc98530fd
Remove direct usage of CSS variables in Minerva, and replace them with
codex design tokens again. Document this decision in the original ADR
Note: there are still a small number of CSS variables in use, including
most notably the --color-link-red fix, which broke when I removed it,
but this change takes care of all the ones that could be easily replaced
Bug: T363743
Change-Id: I7d3a9dceb908167078987de1733774c8bd4bea2f
Since there is an open bug on Codex let's temporary set this
color as we do in Vector.
Bug: T363778
Change-Id: I1234825164e5cdcfd4e9c01de6971c64268af236
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
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
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
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
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
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
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
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
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
