wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-09-23 02:08:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Almost) no more CSS variables in minerva

Browse source 
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
This commit is contained in:
Steph Toyofuku 2024-06-10 13:52:01 -07:00
parent fbd928018d
commit 6f98cc6460
32 changed files with 92 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
adr/0004-drop-support-for-LESS-color-functions-with-codex-tokens.md
View file

@ -1,11 +1,19 @@
# 1. Drop support for Less color functions with Codex design tokens
Date: 2024-02-16
Last Edited: 2024-03-14
Last Edited: 2024-06-10
## Update June 2024
As of T363743, we will no longer be using CSS variables directly, rather we are
back to using codex design tokens (LESS variables) so that the design system
team can maintain a unified source of truth and also supply fallback values
Given that the LESS variables are still of type string, color function support
is still dropped
## Status
Accepted.
Updated
## Context

4
includes/Skins/ToggleList/DropdownList.less
View file

@ -1,7 +1,7 @@
// A DropdownList is a ToggleList that extends downward.
.toggle-list__list--drop-down {
background: var( --background-color-base );
background: @background-color-base;
// The menu appears over the content and occupies no room within it.
position: absolute;
// If max-height is set and the height exceeds it, add a vertical scrollbar.
@ -20,7 +20,7 @@
.toggle-list-item:hover {
// Make the app feel like an app, not a JPEG. When hovering over a menu item, add a little
// interactivity.
background: var( --background-color-interactive );
background: @background-color-interactive;
}
}

2
includes/Skins/ToggleList/ToggleList.less
View file

@ -17,7 +17,7 @@
}
.toggle-list-item__label {
color: var( --color-subtle );
color: @color-subtle;
font-weight: bold;
font-size: @font-size-minerva-small;
// Overflow text is ellipsized in one line.

10
minerva.less/minerva.mixins.less
View file

@ -17,7 +17,7 @@
// Mixins for history, contributions, watchlist and recent changes' changes list
.changeslist-minor-edit() {
background-color: var( --background-color-interactive );
background-color: @background-color-interactive;
position: absolute;
bottom: 10px;
left: 85px;
@ -52,7 +52,7 @@
/* !important to override the too-specific rule .content ol li, .content ul li */
margin: 0 !important;
padding: 12px 0;
border-bottom: @border-width-base @border-style-base var( --border-color-muted );
border-bottom: @border-width-base @border-style-base @border-color-muted;
&::before,
&::after {
@ -68,8 +68,8 @@
}
.changeslist-header() {
background-color: var( --background-color-interactive );
color: var( --color-subtle );
background-color: @background-color-interactive;
color: @color-subtle;
display: block;
width: 100%;
padding: 0.5em 16px 0.4em;
@ -95,5 +95,5 @@ to content which may have important information. */
background: inherit !important;
color: inherit !important;
/* If a border is defined retain it but make it black. If no border this won't do anything. */
border-color: var( --border-color-subtle ) !important;
border-color: @border-color-subtle !important;
}

2
resources/skins.minerva.amc.styles/tabs.less
View file

@ -10,7 +10,7 @@
display: inline-block;
a {
color: var( --color-subtle );
color: @color-subtle;
}
a:visited,

4
resources/skins.minerva.base.styles/CSSCustomProperties.less
View file

@ -66,7 +66,7 @@ html.skin-theme-clientpref-night {
* has to be applied to avoid inverting night-mode colors.
*
* .notheme - This class prevents night mode from being applied to a specific element. It needs the
* the light mode color palette, and includes an opinionated color: var( --color-base ); rule
* the light mode color palette, and includes an opinionated color: @color-base; rule
* since the main assumption underlying the light theme is black text.
*/
@ -89,7 +89,7 @@ html.skin-theme-clientpref-night {
.skin-invert,
.notheme {
color-scheme: light;
color: var( --color-base );
color: @color-base;
}
// T365102 invert class specifically for image related elements

8
resources/skins.minerva.base.styles/LastModifiedBar.less
View file

@ -5,8 +5,8 @@
.last-modified-bar {
display: block;
border-bottom: @border-subtle;
background-color: var( --background-color-interactive );
color: var( --color-subtle );
background-color: @background-color-interactive;
color: @color-subtle;
padding-top: @icon-padding-medium;
padding-bottom: @icon-padding-medium;
font-size: @font-size-minerva-small;
@ -19,11 +19,11 @@
a:visited,
.last-modified-text-accent {
// Note: This can be progressively enhanced in skins.minerva.scripts to provide 'recently edited' state.
color: var( --color-subtle );
color: @color-subtle;
}
.minerva-icon {
background-color: var( --color-subtle );
background-color: @color-subtle;
}
}

2
resources/skins.minerva.base.styles/common.less
View file

@ -27,7 +27,7 @@
width: 100%;
min-height: 100%;
position: relative;
background-color: var( --background-color-interactive );
background-color: @background-color-interactive;
}
.content {

6
resources/skins.minerva.base.styles/content/links.less
View file

@ -10,7 +10,7 @@
* This can be removed when Minerva uses ResourceLoaderSkinModule `elements` feature.
*/
a:not( [ href ] ) {
color: var( --color-base );
color: @color-base;
/* The anchor is functionally a link so show a hand cursor. */
cursor: pointer;
}
@ -26,13 +26,13 @@ a {
/* :visited code block can be removed
* when Minerva uses ResourceLoaderSkinModule `elements` feature. */
&:visited {
color: var( --color-visited );
color: @color-visited;
}
/* :active code block can be removed
* when Minerva uses ResourceLoaderSkinModule `elements` feature. */
&:active {
color: var( --color-progressive--active );
color: @color-progressive--active;
}
/* :hover code block can be removed

6
resources/skins.minerva.base.styles/content/templates/ambox.less
View file

@ -27,8 +27,8 @@ table.ambox {
cursor: pointer;
width: auto;
// !important needed to override core ambox styles
background: var( --background-color-interactive-subtle ) !important;
color: var( --color-subtle );
background: @background-color-interactive-subtle !important;
color: @color-subtle;
margin-bottom: 1px;
tbody {
@ -129,7 +129,7 @@ table.ambox {
height: 100%;
box-sizing: content-box; // explicitly setting box-sizing so padding extends beyond 100%.
padding-left: 4em;
background: linear-gradient( to right, transparent 0, var( --background-color-interactive-subtle ) 3em );
background: linear-gradient( to right, transparent 0, @background-color-interactive-subtle 3em );
}
}

2
resources/skins.minerva.base.styles/content/text.less
View file

@ -62,7 +62,7 @@ strong {
}
blockquote {
border-left: 3px @border-style-base var( --border-color-subtle );
border-left: 3px @border-style-base @border-color-subtle;
padding: @padding-vertical-blockquote @padding-end-blockquote @padding-vertical-blockquote @padding-start-blockquote;
font-family: @font-family-serif;
font-size: 1.1em;

2
resources/skins.minerva.base.styles/content/thumbnails.less
View file

@ -33,7 +33,7 @@
font-size: @font-size-minerva-smallest;
line-height: 1.5;
padding: 0 !important;
color: var( --color-subtle );
color: @color-subtle;
}
figure[ typeof~='mw:File/Thumb' ],

4
resources/skins.minerva.base.styles/content/toc.less
View file

@ -8,8 +8,8 @@
position: relative;
margin: 1em 0;
padding: 0 1em 1em 1em;
background-color: var( --background-color-interactive-subtle );
border: @border-width-base @border-style-base var( --border-color-muted );
background-color: @background-color-interactive-subtle;
border: @border-width-base @border-style-base @border-color-muted;
box-sizing: border-box;
// We need high specificity to override .content ul

6
resources/skins.minerva.base.styles/header.less
View file

@ -3,7 +3,7 @@
padding: 0 @padding-content;
&.header-chrome {
background-color: var( --background-color-interactive );
background-color: @background-color-interactive;
border: 0;
box-shadow: inset 0 -1px 3px rgba( 0, 0, 0, 0.08 );
}
@ -22,7 +22,7 @@
margin-left: 5px;
font-size: 1em;
text-decoration: none;
color: var( --color-base );
color: @color-base;
span {
line-height: 0;
@ -34,7 +34,7 @@
}
sup {
color: var( --color-subtle );
color: @color-subtle;
display: none;
.beta & {

6
resources/skins.minerva.base.styles/pageactions.less
View file

@ -6,7 +6,7 @@
position: relative;
.tagline {
color: var( --color-subtle );
color: @color-subtle;
font-size: @font-size-tag-line;
}
}
@ -28,7 +28,7 @@
.page-actions-menu {
box-sizing: border-box;
border-top: @border-width-base @border-style-base var( --border-color-muted );
border-top: @border-width-base @border-style-base @border-color-muted;
border-bottom: @border-subtle;
margin-top: -@border-width-base; // Offset top border.
}
@ -47,7 +47,7 @@
overflow: hidden;
.cdx-button {
color: var( --color-subtle ) !important;
color: @color-subtle !important;
font-weight: 500;
}
}

2
resources/skins.minerva.base.styles/print/footer.less
View file

@ -13,7 +13,7 @@
// Un-hide the last-modified info and license text
display: block;
padding-top: 23px;
background: var( --background-color-base ) !important;
background: @background-color-base !important;
.footer-content {
display: block !important;

2
resources/skins.minerva.base.styles/print/header.less
View file

@ -1,6 +1,6 @@
.header-container,
.header-container.header-chrome {
background: var( --background-color-base );
background: @background-color-base;
box-shadow: none !important;
}

18
resources/skins.minerva.base.styles/ui.less
View file

@ -18,8 +18,8 @@ html {
}
body {
background-color: var( --background-color-base );
color: var( --color-base );
background-color: @background-color-base;
color: @color-base;
// Support All Browsers: Remove `margin` (normalized)
margin: 0;
}
@ -37,13 +37,13 @@ main {
.mw-body {
// avoid margin collapsing (see T147956)
border-top: @border-width-base @border-style-base var( --border-color-transparent );
border-top: @border-width-base @border-style-base @border-color-transparent;
padding-bottom: 32px;
}
.overlay-enabled,
.mw-body {
background-color: var( --background-color-base );
background-color: @background-color-base;
}
// If footer has last modified list item (Desktop MinervaNeue ?useformat=desktop&useskin=minerva),
@ -100,7 +100,7 @@ main {
@size-modifier-border: unit( 1 / @font-size-browser, em );
@padding-vertical-search: 8px - @border-width-base;
@padding-start-search-icon: @size-icon-search + ( 2 * @size-icon-search-gutter ) - @size-modifier-border;
background-color: var( --background-color-base ); // Support Fennec, Opera Mini: Remove default background, see T38490.
background-color: @background-color-base; // Support Fennec, Opera Mini: Remove default background, see T38490.
background-position: left @size-icon-search-gutter center;
background-repeat: no-repeat;
background-size: @size-icon-search;
@ -109,7 +109,7 @@ main {
width: 100%;
margin: 0;
height: 2.25em;
border: @border-width-base @border-style-base var( --border-color-inverted );
border: @border-width-base @border-style-base @border-color-inverted;
border-radius: @border-radius-base;
padding: @padding-vertical-search 0 @padding-vertical-search @padding-start-search-icon;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.05 );
@ -131,8 +131,8 @@ main {
// Provide focus styles only in non-JS and overlay to prevent double transition.
.client-nojs .search-box .search:focus,
.search-overlay .search-box .search:focus {
border-color: var( --border-color-progressive--focus );
box-shadow: @box-shadow-inset-small var( --box-shadow-color-progressive--focus ), 0 1px 1px rgba( 0, 0, 0, 0.05 );
border-color: @border-color-progressive--focus;
box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus, 0 1px 1px rgba( 0, 0, 0, 0.05 );
}
.content {
@ -158,7 +158,7 @@ main {
.mw-parser-output > .mw-heading2,
.mw-parser-output > h2,
.section-heading {
border-bottom: @border-width-base @border-style-base var( --border-color-muted );
border-bottom: @border-width-base @border-style-base @border-color-muted;
margin-bottom: @margin-heading;
}

10
resources/skins.minerva.loggedin.styles/styles.less
View file

@ -1,7 +1,7 @@
@import '../../minerva.less/minerva.variables.less';
.minerva-icon--bellOutline-base20 {
.cdx-mixin-css-icon( @cdx-icon-bell-outline, var(--color-subtle) );
.cdx-mixin-css-icon( @cdx-icon-bell-outline, @color-subtle);
}
//
@ -20,8 +20,8 @@
//
.mw-mf .mw-echo-unseen-notifications {
margin: auto;
background: var( --background-color-interactive );
color: var( --color-subtle );
background: @background-color-interactive;
color: @color-subtle;
cursor: pointer;
.minerva-icon--circle {
@ -30,7 +30,7 @@
margin: auto;
height: @icon-size-medium;
width: @icon-size-medium;
background: var( --background-color-destructive );
background: @background-color-destructive;
border-color: @border-color-destructive;
&::before {
@ -39,7 +39,7 @@
}
&::after {
color: var( --color-inverted );
color: @color-inverted;
content: attr( data-counter-text );
position: absolute;
left: 0;

2
resources/skins.minerva.mainMenu.styles/MainMenu.less
View file

@ -20,7 +20,7 @@
z-index: @z-index-drawer;
// Add vertical scrollbar as needed.
overflow-y: auto;
background-color: var( --background-color-interactive );
background-color: @background-color-interactive;
transform: translate( -100%, 0 );
ul {

2
resources/skins.minerva.mainMenu.styles/MainMenuFooter.less
View file

@ -22,7 +22,7 @@
}
a {
color: var( --color-progressive );
color: @color-progressive;
padding: 0.7em 12px; // equals `8.4px` via 0.75em assuming 16px base
&:hover {

6
resources/skins.minerva.mainMenu.styles/MainMenuItem.less
View file

@ -7,9 +7,9 @@
#mw-mf-page-left {
ul {
.toggle-list-item {
background-color: var( --background-color-base );
background-color: @background-color-base;
position: relative; // ensure the logout link in beta can be position absolute
border-top: @border-width-base @border-style-base var( --border-color-muted );
border-top: @border-width-base @border-style-base @border-color-muted;
// offset the border for the icon by 1px
margin-top: -@border-width-base;
@ -18,7 +18,7 @@
}
.toggle-list-item__anchor:hover {
box-shadow: inset 4px 0 0 0 var( --box-shadow-color-progressive--focus );
box-shadow: inset 4px 0 0 0 @box-shadow-color-progressive--focus;
text-decoration: none;
}

2
resources/skins.minerva.scripts/Toolbar.less
View file

@ -3,6 +3,6 @@
.minerva-read-only {
// stylelint-disable-next-line selector-max-id
#page-actions-edit a .minerva-icon {
.cdx-mixin-css-icon( @cdx-icon-edit-lock, var(--color-subtle) );
.cdx-mixin-css-icon( @cdx-icon-edit-lock, @color-subtle);
}
}

4
resources/skins.minerva.scripts/page-issues/overlay/pageIssuesOverlay.less
View file

@ -8,7 +8,7 @@
margin: 0;
padding: 0;
font-size: @font-size-minerva-smallest;
color: var( --color-subtle );
color: @color-subtle;
}
// overlay styles
@ -56,7 +56,7 @@
// assume date
small i {
color: var( --color-subtle );
color: @color-subtle;
}
}
}

4
skinStyles/ext.echo.styles.badge.less
View file

@ -34,11 +34,11 @@
}
.minerva-icon--bell {
.cdx-mixin-css-icon( @cdx-icon-bell, var(--color-subtle) );
.cdx-mixin-css-icon( @cdx-icon-bell, @color-subtle);
}
.minerva-icon--tray {
.cdx-mixin-css-icon( @cdx-icon-tray, var(--color-subtle) );
.cdx-mixin-css-icon( @cdx-icon-tray, @color-subtle);
}
.mw-echo-notification-badge-nojs {

8
skinStyles/mediawiki.action.history.styles.less
View file

@ -38,7 +38,7 @@
&.action-history #pagehistory li {
.history-user a {
color: var( --color-subtle );
color: @color-subtle;
bdi {
word-break: break-word;
@ -69,7 +69,7 @@
// The large "Compare selected revisions" button container
.mw-history-compareselectedversions {
background: var( --background-color-base );
background: @background-color-base;
.position-sticky();
top: 0;
z-index: @z-index-above-content;
@ -121,7 +121,7 @@
// "Change visibility of selected revisions" button (for admins only)
.mw-history-revisiondelete-button {
background-color: var( --background-color-interactive-subtle );
background-color: @background-color-interactive-subtle;
margin-bottom: 1em;
}
@ -194,7 +194,7 @@
}
abbr {
background: var( --background-color-interactive );
background: @background-color-interactive;
border-radius: 2px;
font-size: 0.9em;
font-weight: bold;

8
skinStyles/mediawiki.diff.styles.less
View file

@ -19,7 +19,7 @@
.minoredit {
margin-right: 8px;
background: var( --background-color-interactive );
background: @background-color-interactive;
border-radius: 2px;
font-size: 0.9em;
padding: 0 6px 1px;
@ -120,7 +120,7 @@
right: 8px;
.jquery-confirmable-interface {
background-color: var( --background-color-interactive-subtle );
background-color: @background-color-interactive-subtle;
border: @border-subtle;
padding: @spacing-50;
}
@ -142,11 +142,11 @@
&::before {
content: '';
margin-right: 8px;
.cdx-mixin-css-icon( @cdx-icon-user-avatar, var(--color-subtle) );
.cdx-mixin-css-icon( @cdx-icon-user-avatar, @color-subtle);
}
&.mw-anonuserlink::before {
.cdx-mixin-css-icon( @cdx-icon-user-anonymous, var(--color-subtle) );
.cdx-mixin-css-icon( @cdx-icon-user-anonymous, @color-subtle);
}
}

4
skinStyles/mediawiki.interface.helpers.styles.less
View file

@ -38,8 +38,8 @@
a {
float: right;
background-color: var( --background-color-interactive-subtle );
color: var( --color-base );
background-color: @background-color-interactive-subtle;
color: @color-base;
text-decoration: none;
font-size: @font-size-minerva-smallest;

18
skinStyles/mediawiki.special.changeslist.less
View file

@ -93,7 +93,7 @@ ul.mw-contributions-list li > * {
}
.mw-plusminus-null {
color: var( --color-subtle );
color: @color-subtle;
}
/*
@ -147,8 +147,8 @@ ul.mw-contributions-list li .mw-rollback-link {
// Since the user link is split over two lines,
// add the background color on the bdi instead
bdi {
// var(--background-color-interactive)
background-color: var( --background-color-interactive );
// @background-color-interactive
background-color: @background-color-interactive;
padding: 2px 8px 2px 8px;
border-radius: @border-radius-base;
}
@ -187,12 +187,12 @@ ul.mw-contributions-list li .mw-rollback-link {
float: none;
a {
color: var( --color-subtle );
color: @color-subtle;
}
}
.mw-userlink {
color: var( --color-subtle );
color: @color-subtle;
display: block;
bdi {
@ -261,7 +261,7 @@ ul.mw-contributions-list li .mw-rollback-link {
.comment {
-webkit-line-clamp: 2;
max-height: 2.6em;
color: var( --color-subtle );
color: @color-subtle;
line-height: 1.4;
white-space: normal;
display: -webkit-box;
@ -274,16 +274,16 @@ ul.mw-contributions-list li .mw-rollback-link {
.mw-userlink::before {
content: '';
.cdx-mixin-css-icon( @cdx-icon-user-avatar, var(--color-subtle) );
.cdx-mixin-css-icon( @cdx-icon-user-avatar, @color-subtle );
margin-right: 8px;
}
.mw-anonuserlink::before {
.cdx-mixin-css-icon( @cdx-icon-user-anonymous, var(--color-subtle) );
.cdx-mixin-css-icon( @cdx-icon-user-anonymous, @color-subtle );
}
.mw-tempuserlink::before {
.cdx-mixin-css-icon( @cdx-icon-user-temporary, var(--color-subtle) );
.cdx-mixin-css-icon( @cdx-icon-user-temporary, @color-subtle );
}
}
}

2
skinStyles/mobile.init.styles/images.less
View file

@ -4,7 +4,7 @@
// Only applies to mobile Minerva. For this reason these rules should likely be moved to
// `mobile.init.styles` either as a skin style or default style.
.lazy-image-placeholder {
background-color: var( --background-color-interactive );
background-color: @background-color-interactive;
// If the placeholder itself is inside an inline element do not use block
// See https://phabricator.wikimedia.org/T143558

6
skinStyles/mobile.special.mobileoptions.styles/minerva.less
View file

@ -2,7 +2,7 @@
@media all and ( min-width: @min-width-breakpoint-tablet ) {
.ns-special .pre-content {
background: var( --background-color-base );
background: @background-color-base;
margin-bottom: 15px;
.tagline,
@ -12,10 +12,10 @@
}
.ns-special .mw-body {
background: var( --background-color-interactive );
background: @background-color-interactive;
form {
background: var( --background-color-base );
background: @background-color-base;
}
}
}

2
skinStyles/mobile.startup/drawers.less
View file

@ -1,7 +1,7 @@
@import '../../minerva.less/minerva.variables.less';
.drawer {
background-color: var( --background-color-interactive-subtle );
background-color: @background-color-interactive-subtle;
// needed for Android 4.x
position: absolute;
}