Commit graph

15 commits

Author SHA1 Message Date
Jon Robson 9695647608 VISUAL CHANGE: Use mask-image for all Vector icons
Visual changes are subtle, but impact 43 scenarios. The color
and positioning is slightly modified to match Codex.

Bug: T363920
Change-Id: Ie5c88e0aa243f73f2dc9f310d18fd59b831edc64
2024-08-29 17:17:35 +00:00
Jdlrobson 2d281db7b1 Revert "Prevent dark-mode styles from affecting print media"
This reverts commit b3ca12e628.

Reason for revert: Icons are appearing black on black in dark mode
in origin/wmf/1.43.0-wmf.18.

Change-Id: Ifdf3970c77b66e5a7835ca44eb45deec2b44eb43
2024-08-13 07:24:28 +00:00
Jdrewniak b3ca12e628 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: I2ed7fbfc078c6d738c13a71c677783f7ccea2582
2024-08-08 16:06:33 -04:00
Steph Toyofuku 799c2be819 Remove not selector and target OOUI icons for inversion only
A number of icons using the vector-icon class that have been converted
to codex are being double inverted by this rule.  Instead, switch it to
enumerate the full list of OOUI icons and invert them, so that
subsequent codex migrations can be easier as well

Also bumps the bundle size to account for the increase in bytes

Visual change for the table of contents arrows being fixed, ideally not
for anything else

Bug: T365951
Bug: T365580
Change-Id: Ia389e73c72432eb5f7a2df4ff9b48593751bc184
2024-06-11 16:51:14 -07:00
Jon Robson 48b0eeac2f Icons should not repeat at larger font sizes
Bug: T365731
Change-Id: I539f906e06bb2dc133885092dbacb851fd774c23
2024-05-24 20:32:46 +00:00
Jon Robson 1d17b4624f Optimize styles
1) Icon optimizations
* Load styles for expand icon in
JavaScript since it relates to table of contents and that is only
enabled with JavaScript
* Drop vector-icon--x-small class since it only applies to this icon
* Remove some FIXMEs to an issue that has already been fixed
upstream

2) Move styles that do not need to be render blocking to skins.vector.js
* Move sticky header to skins.vector.js since it doesn't work without
JavaScript
* Move popupNotification to skins.vector.js since this is never server
side rendered.

Change-Id: I98e6c0826b514aaefcf88f66275bba37125129b1
2024-05-17 16:26:16 +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
Eric Gardner d60a644264 icons: restore "background-" CSS rules
Temporarily hard-codes some CSS background rules after Codex's
CSS-icon mixins stopped supplying them upstream (after changing
to use mask-image in icons).

Bug: T358160
Change-Id: I13be424c58b105472ef22f14e4381693f2985cd8
2024-02-21 21:42:46 -08:00
bwang 5e15edb9a2 Remove unnecessary imports in component stylesheets, make variable and mixin imports consistent
Bug: T345766
Change-Id: I2ae1d1668849a04520b73ac04fe16e1ff7f22fa6
2023-10-03 19:13:21 +00:00
Jon Robson 24d69726f3 Drop styles for cached HTML
Performance: This reclaims 1.3kb of CSS.

Bug: T336526
Change-Id: I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d
2023-06-14 10:52:44 -07:00
Jon Robson 68239ae344 Use Codex for button styles, start transitioning icons to use Codex icon mixins
Changes:
- mw-ui-button to cdx-button
- mw-ui-quiet to cdx-button--weight-quiet
- mw-ui-icon-element to cdx-button--icon-only
- mw-ui-icon to vector-icon
- mw-ui-icon-flush-right/left to vector-button-flush-right/left
- Removes $isSmallIcon param in Hooks.php

85 Visual Changes
- ~36 changes from minor pixel changes from the new button classes in the main menu, language button
- 22 from standardizing the padding of the TOC in page title
- ~10 changes from addition of .cdx-button to the TOC toggle buttons

PERFORMANCE:
This will result in an overall increase of 2.7kb of render blocking
CSS, 1kb will be reclaimed when
I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged.

Co-author: Bernard Wang <bwang@wikimedia.org>
Bug: T336526
Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-06-12 16:26:28 -07:00
Umherirrender f3dfc9df1e build: Updating npm dependencies
* stylelint-config-wikimedia: 0.13.0 → 0.14.0

Run stylelint fix to fix the new stylelint rule

Change-Id: I3f9e528ca9f8292a9e3630356f0e8bf5df5f6609
2023-03-28 22:22:36 +02:00
Jon Robson 7c24aa46fb Drop the VisualEnhancementsNext feature flag
Bug: T320101
Change-Id: I6d536af034dafd66c6478183de8029be9ed3e8b7
2022-11-21 13:27:34 -08:00
Jon Robson 4ecf9219e0 Disable new flushing rules with feature flag disabled
This change should roll out with the featue flag to avoid
unexpected UI regressions

Follow up to  I9aba71ac4fff0d285676946acef8309b741ed1ad

Bug: T321504
Change-Id: I369e314bac31ea2eca3bff4e530e07c8bee325e2
2022-11-02 22:21:58 +00:00
Jon Robson db08697b17 Prepare for icon touch area change
Should result in no visual changes with default Vector config (e.g.
Pixel)

Bug: T314323
Change-Id: Id1d72fdede3aabab630f9318516ef0f92b12e23b
2022-09-30 16:35:17 -07:00