Icons: Globally set icon colors to @opacity-icon-base

Also use other icon opacity variables where applicable.

Bug: T317800
Depends-On: If2f99124b01ce99b5131fdb960c60952075f6343
Change-Id: Ib8b3d11bd1bd6f902ff846eeb2a8f9cf3c7077b2
This commit is contained in:
Jon Robson 2022-09-14 16:04:02 -07:00 committed by Jdlrobson
parent 95dbf57db5
commit 83458dd8dd
4 changed files with 8 additions and 9 deletions

View file

@ -14,11 +14,6 @@
height: @height-button-lang;
flex-shrink: 0;
.mw-ui-icon:before {
// Put icon on correct standard normal state color.
opacity: 0.87;
}
// If there are no languages and JavaScript is not enabled there is no fallback so we hide
// the button altogether.
.mw-portlet-lang-heading-0 {

View file

@ -87,8 +87,6 @@
#mw-sidebar-button {
&:before {
// Equals `#555`, closest to `#54595d` on background-color `#fff`.
opacity: 0.67;
/* @embed */
background-image: url( images/chevronHorizontal-ltr.svg );

View file

@ -138,12 +138,12 @@
// Increase size to match Codex.
width: @padding-left-start-icon;
// Set opacity to match icon color from Codex (0.51 approximates #72777d)
opacity: 0.51;
opacity: @opacity-base--disabled;
}
.vector-search-box-input:focus ~ .searchButton {
// When the input is focused, change icon color to match Codex (0.87 approximates #202122)
opacity: 0.87;
opacity: @opacity-icon-base;
}
&.vector-search-box-show-thumbnail {

View file

@ -27,6 +27,12 @@
@import './components/TabWatchstarLink.less';
@import './components/TableOfContents.less';
@import './components/TableOfContentsCollapsed.less';
// Make sure all icons are the correct color https://phabricator.wikimedia.org/T317800
.mw-ui-icon:before {
// `@opacity-icon-base` equals to `#222` on `background-color: #fff`, closest to `#202122`.
opacity: @opacity-icon-base;
}
}
@media all {