Commit graph

409 commits

Author SHA1 Message Date
Jon Robson e23c1ae9b6 Use codex link mixin inside Minerva
VISUAL CHANGE:
1 change relating to link color inside ambox

Bug: T367892
Change-Id: Iefa1fee9c6ac0326bc43844205dd3f5dc53fc903
2024-09-18 00:31:48 +00:00
Jon Robson 1d966ce00b Restore heading margin for Parsoid content
Bug: T373646
Change-Id: I3d20456695229cb203e6d1a125587f367fffe696
2024-09-03 20:48:25 +00:00
Jdrewniak 83e7a06a52 Prevent dark-mode styles from affecting print media
Prevents dark-mode styles from affecting print media
by adding `@media screen` to dark-mode related styles.

Bug: T371331
Change-Id: Ieeca30d086d8b8705aba96441a576e3d8e127838
2024-08-08 14:27:30 -04:00
Jon Robson 811e770e9c Dark mode: Images should have background
Bug: T370074
Change-Id: I694778f6458ab13266bee4b88622a914f21c6b50
2024-08-08 12:04:08 +00:00
bwang a38fa06b5d Migrate bare division math to parens division
Bug: T369669
Change-Id: I37c84769edbae8bbb843e9be1846394753c126c8
2024-08-02 13:33:00 -05:00
libraryupgrader 842a91590a build: Updating npm dependencies
* eslint-config-wikimedia: 0.27.0 → 0.28.2
  The following rules are failing and were disabled:
  * tests/selenium:
    * implicit-arrow-linebreak
    * no-mixed-spaces-and-tabs
* grunt-banana-checker: 0.11.1 → 0.13.0
* stylelint-config-wikimedia: 0.16.1 → 0.17.2
  The following rules no longer exist and were removed:
  * stylistic/selector-list-comma-newline-after
* braces: 3.0.2 → 3.0.3
  * https://github.com/advisories/GHSA-grv7-fg5c-xmjg

Change-Id: Ia94454c1da778f241085714e1601a0233d547570
2024-08-01 15:27:33 +01:00
Ebrahim Byagowi 6a6872264a Use CSS Logical instead to remove uses of mw-content-{ltr,rtl}
It keeps fallback definitions which will work for most of the
cases in older browser as the transformations provided by
CSS Janus.

Bug: T371265
Change-Id: I0df37ca675533cf72c5636747cd40bbb4fb7497a
2024-07-30 23:06:03 +03:30
Ebrahim Byagowi f6165152a2 Make dd, ol and ul spacing values direction aware
This is akin to I404710209d59241991716bb7180bcaabcafffcec which
was for the most of desktop skins but since Minerva doesn't have
any dependency to `elements` and `i18n-all-lists-margins` it
should have it's own implementation of the change.

Bug: T371082
Change-Id: I1b98ced874a1caf049e7e09dbb678105d4d9e4d4
2024-07-26 13:02:10 +03:30
Volker E. 9380b86c2b styles: remove outdated feature phone font size rules
Nowadays even Apple iWatch has a minimum resolution of 352 pixels,
so we can safely remove the outdated feature phone font rules and
save bytes down-the-wire for users.

Bug: T369247
Change-Id: Ib482a32b0ed288ae1ea4e0b9dca5f6fdf74eb845
2024-07-04 01:34:02 +00:00
jenkins-bot 207ef7bd71 Merge "Force light theme in print styles" 2024-07-03 19:49:40 +00:00
jenkins-bot 00e4af30fc Merge "Definition list has no left margin, only definition items do" 2024-07-03 16:24:41 +00:00
Jon Robson 853dcf1917 Force light theme in print styles
Bug: T366362
Change-Id: I9e10577aa2a88e96d111cdd29f9fa7baafff87d8
2024-07-03 16:05:19 +00:00
Jon Robson 38534a5b0b Do not invert images that have been tagged with no invert classes
Bug: T368483
Change-Id: I6aefbf16bd95dbb3c9b0fdd46be6e6f026ca46bf
2024-07-01 11:08:51 -07:00
Bartosz Dziewoński b3f1fb5313 Definition list has no left margin, only definition items do
This matches how the indents are applied by other skins.

Bug: T367092
Change-Id: I7cf78065bd8ddd6c97a242dfcce586704029ccc1
2024-06-21 23:34:24 +02:00
Saint Johann 514f26ff5e Fix float issues with headings in Minerva
Bug: T316670
Change-Id: I531bbced68a2a9cbf75ffe44321beef05eee47c6
2024-06-21 00:10:49 +00:00
Bartosz Dziewoński 2a44123f3f Fix styles for new heading HTML
Do not apply 'display: flex' to all 'h1, h2, h3, h4, h5, h6' elements,
because it results in bad text layout within modern headings.

However, to support desktop Minerva with legacy headings, and avoid
incorrect styles being applied to unwrapper headings, we must
apply it to 'h1, h2, h3, h4, h5, h6' elements that may contain a
'.mw-headline'. Add a separate rule for that.

Bug: T367468
Change-Id: I87372907c38aa64b296634f6a5583a890f7fe9b2
2024-06-14 21:33:12 +00:00
jenkins-bot 1e75fbcd33 Merge "styles: Fix code padding" 2024-06-12 23:29:47 +00:00
Jon Robson 72bcebeba8 Use upstream codex variables for diffs and red links
Bug: T361717
Bug: T363743
Change-Id: I4e49a07f9f092ab00e2b2d12fcb146c91a21d8d8
2024-06-12 10:16:59 -07:00
Volker E 6d037d4e9f styles: Apply inversion on certain OOUI icons and indicators
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
2024-06-12 10:15:40 -07:00
jenkins-bot 91fd8a977b Merge "Improve Minerva drop-shadows in dark-mode" 2024-06-12 16:02:29 +00:00
Jan Drewniak 98eaa00cd5 Improve Minerva drop-shadows in dark-mode
Converts several drop-shadows to use standard Codex values:
- `.search-box .search` uses `@box-shadow-drop-small`
- `.drawer, .toast` uses `@box-shadow-drop-xx-large`
- `.toggle-list__list--drop-down` uses `@border-color-base`

Bug: T364425
Change-Id: Id00e525655d3a7138aa65f424fd6ab2ff82290c8
2024-06-12 04:05:30 +00:00
Steph Toyofuku 6f98cc6460 (Almost) no more CSS variables in minerva
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
2024-06-11 11:44:47 -07:00
Volker E. 7fc19a5ad2 styles: Fix code padding
With the change to `rem` the padding got oversized, now relying on
pixel based spacing tokens instead.

Change-Id: I8eff33a606094285e07ff7afb94687b91d4aec67
2024-06-11 10:19:22 +02:00
Volker E dd154b4ea7 styles: Replace deprecated breakpoints
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
2024-06-07 12:52:39 -07:00
Jdlrobson c6209b906b Merge "Add skin-invert-image class" 2024-06-06 17:58:37 +00:00
bwang f99aaddd48 Add skin-invert-image class
Bug: T365102
Change-Id: I76a42a6a957223daf12d884169dad368dcca0300
2024-06-06 11:02:02 -05:00
jenkins-bot c3d07acc78 Merge "Remove margin reset on <pre> tags" 2024-05-24 22:11:57 +00:00
Jon Robson 2adf0b3ed7 Temporarily define color-link-new in Minerva like in Vector
Since there is an open bug on Codex let's temporary set this
color as we do in Vector.

Bug: T363778
Change-Id: I1234825164e5cdcfd4e9c01de6971c64268af236
2024-05-17 16:54:28 +00:00
Steph Toyofuku b7e54644b7 Make language selector disabled state accessible contrast
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
2024-05-13 22:13:33 +00:00
bwang d0c5ac0674 Replace root extend solution for codex with .cdx-mode-reset()
Change-Id: I7a41d46398c27b97f74d0606bf1b3c9610dda80f
2024-05-08 13:31:20 -05:00
Eric Gardner 3e32517f45 Update Minerva to get Codex CSS vars from default files
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
2024-05-01 00:00:42 +00:00
Jon Robson ba64c4168d Complete transition to Codex color palettes
* 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
2024-04-29 14:16:36 -07:00
Jon Robson 6359571312 Use light theme colors for focus colors
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
2024-04-26 17:33:14 +00:00
Jon Robson 8174fe629f Remove tokens with same values in light theme
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
2024-04-26 17:33:06 +00:00
jenkins-bot b01d9420a0 Merge "Use tokens from Codex" 2024-04-25 20:50:56 +00:00
Jon Robson 551901726d Use tokens from Codex
Bug: T360845
Change-Id: Id32a8b861aacacdfddc528882973b1043d83a5ff
2024-04-23 16:05:50 -07:00
Ed Sanders b77a8e0608 Remove margin reset on <pre> tags
Bug: T363158
Change-Id: Ie401daa984c17581d707cc7a3d76732881d0cae0
2024-04-23 12:51:52 +01:00
bwang 95c4454cf9 Remove MinervaKnownTemplateHacks
Bug: T362727
Change-Id: Iccb2e15df25f35d625d88ec4e39a16f97f84b505
2024-04-22 17:33:01 +00:00
Jan Drewniak fa71422bd0 Import codex-design-tokens-experimental.css as Less file
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
2024-04-19 13:51:48 -04:00
jenkins-bot c6a27036af Merge "Update imports for experimental file split in Codex" 2024-04-03 04:29:11 +00:00
Roan Kattouw 94ae5c67e9 Update imports for experimental file split in Codex
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
2024-04-02 15:43:55 -07:00
Jon Robson 480f84bc04 Define background-color-neutral in night mode palette
Bug: T357998
Change-Id: Iab5ec302274f65658885325e239329a1836cc8c3
2024-04-01 22:47:02 +08:00
Jon Robson 3ced132ce1 Define background-color-neutral-subtle in dark mode palette
Needed by categories

Bug: T357166
Change-Id: Iea31b59d00c0619567068a5ea5c440222d45ee3e
2024-04-01 09:17:11 +08:00
jenkins-bot 2a233b1542 Merge "Remove styles in hacks.less that no longer apply" 2024-03-27 21:09:16 +00:00
bwang b8a6a9c1bd Remove styles in hacks.less that no longer apply
Bug: T360387
Change-Id: I3eb7ec0c8a52a39cc97b60443cac0e6a5bba5482
2024-03-27 14:14:09 -05:00
jenkins-bot 8df385d08f Merge "Minerva should use content-tables ResourceLoaderSkinModule feature" 2024-03-26 18:29:57 +00:00
jenkins-bot 4963900d70 Merge "Update padding on <p> elements" 2024-03-25 19:36:20 +00:00
Jon Robson 8f8fd6a1e4 Minerva should use content-tables ResourceLoaderSkinModule feature
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
2024-03-21 22:49:14 +00:00
Moh'd Khier Abualruz 5d6b866890 Rename the skin night mode classes to more readable classes
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
2024-03-19 23:12:59 +00:00
bwang 9c52c298ad Update padding on <p> elements
Bug: T358808
Change-Id: I7f13bddaf79cd9b1061a1cac03e6ab1b767fc808
2024-03-18 19:10:20 +00:00