Commit graph

20 commits

Author SHA1 Message Date
Jon Robson cd44419c95 Use codex link styles in Vector, remove old link color variables
Visual changes: blue and red link colors have been updated to match codex, including hover/focus/active state colors

Bug: T366515
Change-Id: I16411a7ea47ae26c7e67a71f83e0521962c8ce61
2024-06-17 14:23:50 -05:00
Jan Drewniak d8705f98bf Followup to 71c532e Separate out indicator and icon selectors
@OOUIIndicatorSelectors was accidentally added to
the selector that prevents double inversion.

Bug: T365764
Change-Id: Idc3e2ac9ef50270512b9786db4f525a9ba4754a3
2024-06-14 21:21:29 +00:00
Jon Robson 71c532e542 Separate out indicator and icon selectors
Follow up to I584491c280d93f18a48d8c90c4d8a6628f1a672f

Since these selectors are nested, this was generating unexpected
selectors, meaning the invert wasn't applying correctly to indicators.

This is evident on Special:Search

Bug: T365764
Change-Id: I40f8a8ad6598d145a6284c831e0cef944c5d7e75
2024-06-13 23:10:10 +00:00
Volker E 7e6e3bcedb styles: Apply inversion on certain OOUI icons and indicators
In order for most OOUI black 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: I792e89a8253a426b8c723486b96cb87bf9e1d85d
Change-Id: I584491c280d93f18a48d8c90c4d8a6628f1a672f
2024-06-12 15:31:01 +00:00
jenkins-bot 60c61e681e Merge "Add skin-invert-image class" 2024-06-06 16:38:45 +00:00
bwang b24cb0518c Add skin-invert-image class
Bug: T365102
Change-Id: I5961d945b1aaeae1bff1d86c50118fc02dfb77b2
2024-06-06 10:58:57 -05:00
Jon Robson 8bb2e7d0ae VisualEditor toolbar should use notheme
For now, let's exclude VisualEditor's toolbar from the night theme.
This should result in no visual change, but will make sure it and
its associated icons are not impacted by the roll out of OOUI.

Bug: T365764
Change-Id: Id626a75dbdeddc8809e4ea75eba3c0fd6d2b08fe
2024-06-05 18:13:21 +00:00
Moh'd Khier Abualruz 4d97e0a4fb fix(vector): Set popup notification color to inverted
Updates `CSSCustomProperties.less` to include `.oo-ui-popupWidget-popup` in
`@OOUIOverrideSelectors` for inverted color inheritance.

Bug: T364798
Change-Id: I6c3ac79d24f6af71a9171153e346494fb97acd3f
2024-05-22 16:53:26 +02:00
Jon Robson 70fbd6f0c2 Small font size is not applying to excluded pages
Bug: T364887
Change-Id: Ib24beb3a383599dcc3ad64e01992ead908e3bef3
2024-05-21 23:41:35 +00:00
Jan Drewniak 0d1de4773d [Follow-up] Override VE overlays in night-mode
Follow-up to 26d39ec, change VE overlay selector
from `.ve-ui-overlay-global` to `.ve-ui-overlay`.

Bug: T363861
Change-Id: Ie531ce6d03d81fbce374f7e17c785d4bb076bfda
2024-05-14 14:30:56 -04:00
Jan Drewniak 26d39ecafa Override VE overlays in night-mode
Creates a Less variable `@OOUIOverrideSelectors` which can serve
as a list of selectors that we want to treat the same as the `.notheme`
class (as an alternative to adding the `.notheme` class across repos).

Adds only one selector to this variable, `.ve-ui-overlay-global`
in order to force VE overlays to appear in light-mode while night-mode is
enabled.

This is a temporary measure until T363849 is resolved.

Bug: T363861
Change-Id: I3e3a209f1a9bd9130fc61915b9b2ff7134405e59
2024-05-13 21:58:20 +00:00
bwang 337d608a56 Fix red link color in dark mode
Bug: T363778
Change-Id: Iae4fe2d793b8efbb10b54144ce4093c3e2112da2
2024-05-08 14:31:43 +00:00
Jon Robson ca0d404e50 Enable night theme in Vector
- New night theme added via Codex `.cdx-mode-dark();` mixin.
- CSS custom properties separated from skin.less.
- Font-size rem conversion removed since Codex now uses rems.
- bundlesize increased by 1kb ( followup from
Icfcb5c7418061a5727580f0685054356ba4edb72 ).
- Icons that use background-images are inverted for night-theme.
- Linter error fixed for long-lines in clientPreferences.js

Co-Author: <Bernard Wang> bwang@wikimedia.org
Bug: T354889
Depends-On: I1f54bf4f144eaec6ed317c04bd0c851c2f01b42c
Change-Id: I3a8a147b6be67bc830f0d3b816a4b85c26f99cf1
2024-05-02 13:22:59 -05:00
Jon Robson c8442ba32e Drop background base declaration
This has been confusing a few editors and breaks support with
Extension:DarkMode so let's remove for now.

Change-Id: I84a58b49f8f3d5af8765531bc14c43b42fe39a1d
2024-04-15 16:06:41 -07:00
Moh'd Khier Abualruz b3ab84f9e5 Vector - 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

Other Changes:
- Change vector-night-mode preference to vector-theme
- Add skin-theme-os-label and other messages to skins.vector.clientPreferences
- Remove skin-night-mode-* messages from skins.vector.clientPreferences

Bug: T359983
Change-Id: I31eb086e623a97df9fbd004425559e05b0cae170
2024-03-20 23:54:47 +00:00
bwang 0531fbd117 Increase line height for medium and large font settings
Bug: T359030
Change-Id: I5be2e06c01c1959241d8d5347cb4f37c62c7cee2
2024-03-12 14:25:19 -05:00
Jon Robson 4a2e3f8917 Provide a visual hint that night mode is being triggered in Vector
Working on feature flag not having this is causing confusion. This
will speed up development by allowing me to more easily determine what
mode I am in at all times.

Change-Id: I5d4168bbf7df41f4754b36c6e6aa4955dbc609bb
2024-02-13 22:52:00 +00:00
Jan Drewniak 531cbcbd25 Increase "large" font-size option for client-preferences
Increases "large" font-size option from
@font-size-large (18px equivalent) to
@font-size-x-large (20px equivalent)

Bug: T351693
Change-Id: I9e3dd8346b1d6f6a9efd04bb1e43fee9bfd79154
2023-11-30 12:57:37 -05:00
Jan Drewniak edfdf05f12 Implement new font-sizes for custom front-size preference
Adds different font-sizes and line-heights for the custom
font-size UI. The custom font-size preference options are now:

1. Compact - 14px font-size & 22px line-height
2. Standard - 16px font-size & 24px line-height
3. Open - 20px font-size & 26px line-height

This removes the "xl" font-size option
(`vector-feature-custom-font-size-3`) and it's related i18n messages,
and changes the remaining message to match the new options.

The default font-size, when the custom font-size feature is disabled,
is "compact".

Bug: T351693
Change-Id: I5975a78ce7327f314fd55de55c222ac08d801fbd
2023-11-24 15:23:56 +00:00
Jan Drewniak 2223cb8c1b Introduce CSS custom properties under font-size feature flag
Introduces CSS custom properties for the purposes
of enabling client-side customizable font sizes.

CSS custom properties are contained in a Less file,
which imports values from Codex and converted them to rems
using the Less unit() function.

Includes ADR on CSS custom properties decisions.

Bug: T348984
Change-Id: Ic5e62d55f3c3585fe3a00e41f29f88d3a2f7470b
2023-10-24 14:33:33 +00:00