wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-27 17:10:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

VISUAL CHANGE: Use mask-image for all Vector icons

Browse source 
Visual changes are subtle, but impact 43 scenarios. The color
and positioning is slightly modified to match Codex.

Bug: T363920
Change-Id: Ie5c88e0aa243f73f2dc9f310d18fd59b831edc64
This commit is contained in:
Jon Robson 2024-06-04 15:00:07 -07:00 committed by Jdlrobson
parent 08a513fddf
commit 9695647608
6 changed files with 23 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
bundlesize.config.json
View file

@ -40,6 +40,10 @@
},
{
"resourceModule": "skins.vector.icons",
"maxSize": "1.3 kB"
},
{
"resourceModule": "skins.vector.icons.js",
"maxSize": "0.7 kB"
}
]

2
resources/skins.vector.js/tableOfContents.less
View file

@ -3,7 +3,7 @@
.mw-ui-icon-wikimedia-expand {
.cdx-mixin-css-icon( @cdx-icon-expand );
// Temporary generic small icon class
// FIXME: Replace with proper Codex CSS icon usage in T338403
// FIXME: Replace with proper Codex CSS icon usage in T344183
.cdx-mixin-css-icon-background( @size-icon-x-small );
.cdx-mixin-css-icon-size( @size-icon-x-small );
.cdx-mixin-css-icon-alignment( );

78
resources/skins.vector.styles/components/Icon.less
View file

@ -1,69 +1,17 @@
@import 'mediawiki.skin.variables.less';
@transparentPNG: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
.vector-icon {
.cdx-mixin-css-icon-background( );
.cdx-mixin-css-icon-size( );
.cdx-mixin-css-icon-alignment( );
font-size: 14px;
// Since we use background-image for various icons instead of mask-image
// We need to fix the width and height for icons to avoid
// the container increasing with font size and the icons becoming
// repeated (as happened in T365731)
// FIXME: Remove after T363920 has been resolved (making sure to test
// different font sizes when doing that)
background-repeat: no-repeat;
background-position: center;
// By default use a transparent PNG. This is important for icons loaded via JavaScript, as without this
// the icon will appear as a black square until loaded.
-webkit-mask-image: @transparentPNG;
mask-image: @transparentPNG;
.cdx-mixin-css-icon( 'none' );
}
// FIXME: T363920 Remove when all icons are migrated from ResourceLoader to Codex
//
// enumerate full list of OOUI icons to be inverted rather than selecting on vector-icon alone
// so as not to punish switching to codex
.vector-icon.mw-ui-icon-wikimedia-article,
.vector-icon.mw-ui-icon-wikimedia-edit,
.vector-icon.mw-ui-icon-wikimedia-editLock,
.vector-icon.mw-ui-icon-wikimedia-exitFullscreen,
.vector-icon.mw-ui-icon-wikimedia-fullScreen,
.vector-icon.mw-ui-icon-wikimedia-history,
.vector-icon.mw-ui-icon-wikimedia-speechBubbles,
.vector-icon.mw-ui-icon-wikimedia-speechBubbleAdd,
.vector-icon.mw-ui-icon-wikimedia-wikiText,
.vector-icon.mw-ui-icon-wikimedia-appearance,
.vector-icon.mw-ui-icon-wikimedia-tray,
.vector-icon.mw-ui-icon-wikimedia-bell,
.vector-icon.mw-ui-icon-wikimedia-menu,
.vector-icon.mw-ui-icon-wikimedia-heart,
.vector-icon.mw-ui-icon-wikimedia-language,
.vector-icon.mw-ui-icon-wikimedia-ellipsis,
.vector-icon.mw-ui-icon-wikimedia-userAvatar,
.vector-icon.mw-ui-icon-wikimedia-userAdd,
.vector-icon.mw-ui-icon-wikimedia-userTemporary,
.vector-icon.mw-ui-icon-wikimedia-userTalk,
.vector-icon.mw-ui-icon-wikimedia-sandbox,
.vector-icon.mw-ui-icon-wikimedia-search,
.vector-icon.mw-ui-icon-wikimedia-settings,
.vector-icon.mw-ui-icon-wikimedia-labFlask,
.vector-icon.mw-ui-icon-wikimedia-star,
.vector-icon.mw-ui-icon-wikimedia-halfStar,
.vector-icon.mw-ui-icon-wikimedia-unStar,
.vector-icon.mw-ui-icon-wikimedia-watchlist,
.vector-icon.mw-ui-icon-wikimedia-userContributions,
.vector-icon.mw-ui-icon-wikimedia-logIn,
.vector-icon.mw-ui-icon-wikimedia-logOut,
.vector-icon.mw-ui-icon-wikimedia-imageGallery,
.vector-icon.mw-ui-icon-wikimedia-userGroup,
.vector-icon.mw-ui-icon-wikimedia-listBullet,
.vector-icon.mw-ui-icon-wikimedia-close {
html.skin-theme-clientpref-night & {
filter: invert( 1 );
}
/**
* Auto night mode.
*
* Applies the night mode color palette only in response to system settings.
*/
@media ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os & {
filter: invert( 1 );
}
}
/* If the class contains the string -progressive convert to a progressive icon.
This impacts language button and talk add topic. */
.vector-icon[ class*='-progressive' ] {
background-color: @color-progressive;
}

2
resources/skins.vector.styles/components/LanguageDropdown.less
View file

@ -25,7 +25,7 @@
// T291286: Temporarily use progressive ULS style
&.cdx-button--action-progressive.cdx-button--weight-quiet::after {
background-image: url( ./images/arrow-down-progressive.svg );
mask-image: url( ./images/arrow-down-progressive.svg );
opacity: @opacity-base;
}
}

23
resources/skins.vector.styles/mixins.less
View file

@ -1,6 +1,7 @@
/**
* Less mixins.
*/
@import 'mediawiki.skin.variables.less';
@import 'mediawiki.mixins.less';
.mixin-vector-page-container-sizing() {
@ -20,31 +21,11 @@
&::after {
content: '';
background: url( ../skins.vector.styles/images/arrow-down.svg ) 100% 50% no-repeat;
.cdx-mixin-css-icon( @cdx-icon-expand, @param-size-icon: @size-icon-x-small );
width: unit( 12 / @font-size-browser, rem );
height: unit( 12 / @font-size-browser, rem );
// https://phabricator.wikimedia.org/T319070#8284272
margin-left: 7px;
html.skin-theme-clientpref-night & {
// For night-mode, invert icons so they go from black to white.
// Since invert( 1 ) changes the hue (e.g. from blue to orange)
// hue-rotate( 180deg ) changes the hue back to that of the original color.
// This slightly corrects progressive/destructive colored icons
// (although their lightness & saturation are still different, e.g. language button).
filter: invert( 1 ) hue-rotate( 180deg );
}
/**
* Auto night mode.
*
* Applies the night mode color palette only in response to system settings.
*/
@media ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os & {
filter: invert( 1 ) hue-rotate( 180deg );
}
}
}
}

14
skin.json
View file

@ -310,12 +310,7 @@
"useDataURI": false,
"defaultColor": "#000",
"class": "MediaWiki\\ResourceLoader\\OOUIIconPackModule",
"variants": {
"progressive": {
"color": "#36c",
"global": true
}
},
"useMaskImage": true,
"icons": [
"article",
"edit",
@ -335,12 +330,7 @@
"useDataURI": false,
"defaultColor": "#000",
"class": "MediaWiki\\ResourceLoader\\OOUIIconPackModule",
"variants": {
"progressive": {
"color": "#36c",
"global": true
}
},
"useMaskImage": true,
"icons": [
"tray",
"bell",