diff --git a/adr/0004-drop-support-for-LESS-color-functions-with-codex-tokens.md b/adr/0004-drop-support-for-LESS-color-functions-with-codex-tokens.md index 2bf8014e0..ad208b79e 100644 --- a/adr/0004-drop-support-for-LESS-color-functions-with-codex-tokens.md +++ b/adr/0004-drop-support-for-LESS-color-functions-with-codex-tokens.md @@ -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 diff --git a/includes/Skins/ToggleList/DropdownList.less b/includes/Skins/ToggleList/DropdownList.less index fab73605c..d6b757826 100644 --- a/includes/Skins/ToggleList/DropdownList.less +++ b/includes/Skins/ToggleList/DropdownList.less @@ -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; } } diff --git a/includes/Skins/ToggleList/ToggleList.less b/includes/Skins/ToggleList/ToggleList.less index 6a0e48d3e..9dbff9b97 100644 --- a/includes/Skins/ToggleList/ToggleList.less +++ b/includes/Skins/ToggleList/ToggleList.less @@ -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. diff --git a/minerva.less/minerva.mixins.less b/minerva.less/minerva.mixins.less index 6ce76a40c..da3956915 100644 --- a/minerva.less/minerva.mixins.less +++ b/minerva.less/minerva.mixins.less @@ -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; } diff --git a/resources/skins.minerva.amc.styles/tabs.less b/resources/skins.minerva.amc.styles/tabs.less index 2fc6fb015..c0dd11cc5 100644 --- a/resources/skins.minerva.amc.styles/tabs.less +++ b/resources/skins.minerva.amc.styles/tabs.less @@ -10,7 +10,7 @@ display: inline-block; a { - color: var( --color-subtle ); + color: @color-subtle; } a:visited, diff --git a/resources/skins.minerva.base.styles/CSSCustomProperties.less b/resources/skins.minerva.base.styles/CSSCustomProperties.less index da333f51a..e21ceec7e 100644 --- a/resources/skins.minerva.base.styles/CSSCustomProperties.less +++ b/resources/skins.minerva.base.styles/CSSCustomProperties.less @@ -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 diff --git a/resources/skins.minerva.base.styles/LastModifiedBar.less b/resources/skins.minerva.base.styles/LastModifiedBar.less index 9fd517a1a..176e23a25 100644 --- a/resources/skins.minerva.base.styles/LastModifiedBar.less +++ b/resources/skins.minerva.base.styles/LastModifiedBar.less @@ -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; } } diff --git a/resources/skins.minerva.base.styles/common.less b/resources/skins.minerva.base.styles/common.less index d383f88eb..f96d595dd 100644 --- a/resources/skins.minerva.base.styles/common.less +++ b/resources/skins.minerva.base.styles/common.less @@ -27,7 +27,7 @@ width: 100%; min-height: 100%; position: relative; - background-color: var( --background-color-interactive ); + background-color: @background-color-interactive; } .content { diff --git a/resources/skins.minerva.base.styles/content/links.less b/resources/skins.minerva.base.styles/content/links.less index 193069eba..c24b76486 100644 --- a/resources/skins.minerva.base.styles/content/links.less +++ b/resources/skins.minerva.base.styles/content/links.less @@ -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 diff --git a/resources/skins.minerva.base.styles/content/templates/ambox.less b/resources/skins.minerva.base.styles/content/templates/ambox.less index 01cba7c80..92df95333 100644 --- a/resources/skins.minerva.base.styles/content/templates/ambox.less +++ b/resources/skins.minerva.base.styles/content/templates/ambox.less @@ -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 ); } } diff --git a/resources/skins.minerva.base.styles/content/text.less b/resources/skins.minerva.base.styles/content/text.less index 40e699fe0..708dd2214 100644 --- a/resources/skins.minerva.base.styles/content/text.less +++ b/resources/skins.minerva.base.styles/content/text.less @@ -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; diff --git a/resources/skins.minerva.base.styles/content/thumbnails.less b/resources/skins.minerva.base.styles/content/thumbnails.less index dd7f3a251..bd69d1a53 100644 --- a/resources/skins.minerva.base.styles/content/thumbnails.less +++ b/resources/skins.minerva.base.styles/content/thumbnails.less @@ -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' ], diff --git a/resources/skins.minerva.base.styles/content/toc.less b/resources/skins.minerva.base.styles/content/toc.less index 5f88ac945..3c209022f 100644 --- a/resources/skins.minerva.base.styles/content/toc.less +++ b/resources/skins.minerva.base.styles/content/toc.less @@ -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 diff --git a/resources/skins.minerva.base.styles/header.less b/resources/skins.minerva.base.styles/header.less index 6f384b511..06c2e721d 100644 --- a/resources/skins.minerva.base.styles/header.less +++ b/resources/skins.minerva.base.styles/header.less @@ -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 & { diff --git a/resources/skins.minerva.base.styles/pageactions.less b/resources/skins.minerva.base.styles/pageactions.less index 11430ad11..65601c196 100644 --- a/resources/skins.minerva.base.styles/pageactions.less +++ b/resources/skins.minerva.base.styles/pageactions.less @@ -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; } } diff --git a/resources/skins.minerva.base.styles/print/footer.less b/resources/skins.minerva.base.styles/print/footer.less index 6821b47df..2605c571b 100644 --- a/resources/skins.minerva.base.styles/print/footer.less +++ b/resources/skins.minerva.base.styles/print/footer.less @@ -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; diff --git a/resources/skins.minerva.base.styles/print/header.less b/resources/skins.minerva.base.styles/print/header.less index 29b1a3cd4..505056d53 100644 --- a/resources/skins.minerva.base.styles/print/header.less +++ b/resources/skins.minerva.base.styles/print/header.less @@ -1,6 +1,6 @@ .header-container, .header-container.header-chrome { - background: var( --background-color-base ); + background: @background-color-base; box-shadow: none !important; } diff --git a/resources/skins.minerva.base.styles/ui.less b/resources/skins.minerva.base.styles/ui.less index d9728e6fa..d2de7a6e2 100644 --- a/resources/skins.minerva.base.styles/ui.less +++ b/resources/skins.minerva.base.styles/ui.less @@ -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; } diff --git a/resources/skins.minerva.loggedin.styles/styles.less b/resources/skins.minerva.loggedin.styles/styles.less index 4ecdeed28..7b8584ef2 100644 --- a/resources/skins.minerva.loggedin.styles/styles.less +++ b/resources/skins.minerva.loggedin.styles/styles.less @@ -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; diff --git a/resources/skins.minerva.mainMenu.styles/MainMenu.less b/resources/skins.minerva.mainMenu.styles/MainMenu.less index 078c746af..7c3453ef2 100644 --- a/resources/skins.minerva.mainMenu.styles/MainMenu.less +++ b/resources/skins.minerva.mainMenu.styles/MainMenu.less @@ -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 { diff --git a/resources/skins.minerva.mainMenu.styles/MainMenuFooter.less b/resources/skins.minerva.mainMenu.styles/MainMenuFooter.less index 78e99a516..107051171 100644 --- a/resources/skins.minerva.mainMenu.styles/MainMenuFooter.less +++ b/resources/skins.minerva.mainMenu.styles/MainMenuFooter.less @@ -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 { diff --git a/resources/skins.minerva.mainMenu.styles/MainMenuItem.less b/resources/skins.minerva.mainMenu.styles/MainMenuItem.less index a43f7ba07..c7246e68b 100644 --- a/resources/skins.minerva.mainMenu.styles/MainMenuItem.less +++ b/resources/skins.minerva.mainMenu.styles/MainMenuItem.less @@ -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; } diff --git a/resources/skins.minerva.scripts/Toolbar.less b/resources/skins.minerva.scripts/Toolbar.less index aad96e67f..2c0a99c59 100644 --- a/resources/skins.minerva.scripts/Toolbar.less +++ b/resources/skins.minerva.scripts/Toolbar.less @@ -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); } } diff --git a/resources/skins.minerva.scripts/page-issues/overlay/pageIssuesOverlay.less b/resources/skins.minerva.scripts/page-issues/overlay/pageIssuesOverlay.less index 5563b43c2..2f4af6730 100644 --- a/resources/skins.minerva.scripts/page-issues/overlay/pageIssuesOverlay.less +++ b/resources/skins.minerva.scripts/page-issues/overlay/pageIssuesOverlay.less @@ -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; } } } diff --git a/skinStyles/ext.echo.styles.badge.less b/skinStyles/ext.echo.styles.badge.less index 8cf3f9069..7e56686c2 100644 --- a/skinStyles/ext.echo.styles.badge.less +++ b/skinStyles/ext.echo.styles.badge.less @@ -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 { diff --git a/skinStyles/mediawiki.action.history.styles.less b/skinStyles/mediawiki.action.history.styles.less index f14f9783d..41880c259 100644 --- a/skinStyles/mediawiki.action.history.styles.less +++ b/skinStyles/mediawiki.action.history.styles.less @@ -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; diff --git a/skinStyles/mediawiki.diff.styles.less b/skinStyles/mediawiki.diff.styles.less index 35f0a6025..792510118 100644 --- a/skinStyles/mediawiki.diff.styles.less +++ b/skinStyles/mediawiki.diff.styles.less @@ -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); } } diff --git a/skinStyles/mediawiki.interface.helpers.styles.less b/skinStyles/mediawiki.interface.helpers.styles.less index ed434ac95..6e865bb0c 100644 --- a/skinStyles/mediawiki.interface.helpers.styles.less +++ b/skinStyles/mediawiki.interface.helpers.styles.less @@ -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; diff --git a/skinStyles/mediawiki.special.changeslist.less b/skinStyles/mediawiki.special.changeslist.less index 5285271a3..8eb792922 100644 --- a/skinStyles/mediawiki.special.changeslist.less +++ b/skinStyles/mediawiki.special.changeslist.less @@ -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 ); } } } diff --git a/skinStyles/mobile.init.styles/images.less b/skinStyles/mobile.init.styles/images.less index d7a1cdc7a..1d6d2629a 100644 --- a/skinStyles/mobile.init.styles/images.less +++ b/skinStyles/mobile.init.styles/images.less @@ -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 diff --git a/skinStyles/mobile.special.mobileoptions.styles/minerva.less b/skinStyles/mobile.special.mobileoptions.styles/minerva.less index eb2816afa..97f60300a 100644 --- a/skinStyles/mobile.special.mobileoptions.styles/minerva.less +++ b/skinStyles/mobile.special.mobileoptions.styles/minerva.less @@ -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; } } } diff --git a/skinStyles/mobile.startup/drawers.less b/skinStyles/mobile.startup/drawers.less index 39dcdff89..8f34f461b 100644 --- a/skinStyles/mobile.startup/drawers.less +++ b/skinStyles/mobile.startup/drawers.less @@ -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; }