From ba64c4168d404c9ca67119d8c914f96fc115fe75 Mon Sep 17 00:00:00 2001 From: Jon Robson Date: Mon, 29 Apr 2024 14:08:34 -0700 Subject: [PATCH] Complete transition to Codex color palettes * Update mediawiki.skin.variables to point non-Codex tokens to Codex token equivalents * Replace box-shadow-color-drawer with @box-shadow-color-base * Leave FIXME comments for migrating the last two CSS variables * Replace direct access to CSS variable with @color-link-new design token instead since the former may no longer exist. Bug: T360845 Change-Id: Ie531044d320cde50689064f10ff00db5adcaf859 --- .../mediawiki.less/mediawiki.skin.variables.less | 16 ++++++++-------- resources/skins.minerva.amc.styles/tabs.less | 2 +- .../CSSCustomProperties.less | 15 ++++----------- .../skins.minerva.mainMenu.styles/MainMenu.less | 2 +- .../NotificationsOverlay.less | 2 +- skinStyles/mobile.startup/drawers.less | 2 +- 6 files changed, 16 insertions(+), 23 deletions(-) diff --git a/resources/mediawiki.less/mediawiki.skin.variables.less b/resources/mediawiki.less/mediawiki.skin.variables.less index 25c4a4e69..f725df4d5 100644 --- a/resources/mediawiki.less/mediawiki.skin.variables.less +++ b/resources/mediawiki.less/mediawiki.skin.variables.less @@ -33,11 +33,11 @@ * These variables don't correspond to Codex variables. * TODO: Determine whether any of these are actually used in practice. **/ -@color-link: var( --color-progressive ); -@color-link--visited: var( --color-visited); -@color-link--active: var(--color-progressive--active); -@color-link-new: var(--color-link-red); -@color-link-new--visited: var(--color-link-red--visited); -@color-link-external: var( --color-progressive ); -@color-link-external--visited: var( --color-visited ); -@color-link-external--active: var(--color-progressive--active); +@color-link: @color-progressive; +@color-link--visited: @color-visited; +@color-link--active: @color-progressive--active; +@color-link-new: @color-link-red; +@color-link-new--visited: @color-link-red--visited; +@color-link-external: @color-progressive; +@color-link-external--visited: @color-visited; +@color-link-external--active: @color-progressive--active; diff --git a/resources/skins.minerva.amc.styles/tabs.less b/resources/skins.minerva.amc.styles/tabs.less index 27ffc0033..2fc6fb015 100644 --- a/resources/skins.minerva.amc.styles/tabs.less +++ b/resources/skins.minerva.amc.styles/tabs.less @@ -23,7 +23,7 @@ &.new a:visited, &.new a:hover, &.new a:active { - color: var( --color-link-red ); + color: @color-link-new; } &:last-child { diff --git a/resources/skins.minerva.base.styles/CSSCustomProperties.less b/resources/skins.minerva.base.styles/CSSCustomProperties.less index 278505592..3d4c2e768 100644 --- a/resources/skins.minerva.base.styles/CSSCustomProperties.less +++ b/resources/skins.minerva.base.styles/CSSCustomProperties.less @@ -22,9 +22,10 @@ // :extend merges this :root selector into the one provided by theme-codex-wikimedia-experimental.less. :root:extend( :root ) { + // FIXME: These can be removed when T361717 is resolved. --minerva-diff-addedline: @color-success; --minerva-diff-deletedline: @color-destructive; - --box-shadow-color-drawer: rgba( 0, 0, 0, 0.35 ); + // } /** @@ -33,18 +34,10 @@ */ .mixin-night-mode-palette() { .cdx-mode-dark(); - /* These either do not exist in Codex or might be identical to the light mode - theme. If the latter we can remove . */ - --color-link: #6e85d8; - --color-link-red: #e45d52; - --color-link-red--visited: #b97876; - --color-link-external: #6e85d8; - --color-link-external--visited: #b97876; - --color-link-external--active: #2a4b8d; - --color-link--visited: #977dbd; - --box-shadow-color-drawer: #000; + // FIXME: These can be removed when T361717 is resolved. --minerva-diff-deletedline: #886525; --minerva-diff-addedline: #36c; + // } /** diff --git a/resources/skins.minerva.mainMenu.styles/MainMenu.less b/resources/skins.minerva.mainMenu.styles/MainMenu.less index ed139c984..fc47716be 100644 --- a/resources/skins.minerva.mainMenu.styles/MainMenu.less +++ b/resources/skins.minerva.mainMenu.styles/MainMenu.less @@ -49,7 +49,7 @@ #main-menu-input:checked ~ #mw-mf-page-left { visibility: visible; - box-shadow: 1px 0 8px 0 var( --box-shadow-color-drawer ); + box-shadow: 1px 0 8px 0 @box-shadow-color-base; transform: translate( 0, 0 ); } diff --git a/resources/skins.minerva.mainMenu.styles/NotificationsOverlay.less b/resources/skins.minerva.mainMenu.styles/NotificationsOverlay.less index dc6b43209..ddf3e5f52 100644 --- a/resources/skins.minerva.mainMenu.styles/NotificationsOverlay.less +++ b/resources/skins.minerva.mainMenu.styles/NotificationsOverlay.less @@ -9,7 +9,7 @@ display: block; width: auto; right: 0; - box-shadow: -5px 0 0 0 var( --box-shadow-color-drawer ); + box-shadow: -5px 0 0 0 @box-shadow-color-base; transform: translate( 100%, 0 ); transition: transform @transition-duration-medium @transition-timing-function-menu; diff --git a/skinStyles/mobile.startup/drawers.less b/skinStyles/mobile.startup/drawers.less index 88bec8164..39dcdff89 100644 --- a/skinStyles/mobile.startup/drawers.less +++ b/skinStyles/mobile.startup/drawers.less @@ -36,7 +36,7 @@ .toast, .drawer { box-sizing: border-box; - box-shadow: 0 -1px 8px 0 var( --box-shadow-color-drawer ); + box-shadow: 0 -1px 8px 0 @box-shadow-color-base; word-wrap: break-word; // don't use visibility: hidden in old browsers that don't support animations display: none;