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
The values have slightly changed:
- Tablet breakpoint is decreased by 80px,
pushing lesser devices into a mobile only experience but
should make barely a difference to vast majority of our users.
- Biggest difference is in `min-width-breakpoint-desktop`,
which is increased by 120px in comparison to
`@width-breakpoint-desktop: 1000px`
Also removing one out-dated feature phone clause.
TECHNICAL CHANGES:
* The previous breakpoint was tied to the maximum content width.
The previous maximum content width is preserved, and several media
queries are adjusted to make use of it.
* The header (logo) is not optimized for 640px-720px. For now
a temporary fix is but in place which will be investigated as part
of T366859
VISUAL CHANGES:
* 6 visual changes which improve alignment in language and
visual editor overlay and diffs (where wikidiff2 is not
installed)
Bug: T349793
Depends-On: I3afba8c51f60de9271054499bfa3ffbcc1a9d779
Change-Id: I9552d8ad7509aae90e15edda26e786465773d3ac
Since there is an open bug on Codex let's temporary set this
color as we do in Vector.
Bug: T363778
Change-Id: I1234825164e5cdcfd4e9c01de6971c64268af236
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
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
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
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
