From 75fce0d5bce6898ba634e048be85d704ab654fed Mon Sep 17 00:00:00 2001 From: bwang Date: Mon, 17 Jun 2024 12:24:17 -0500 Subject: [PATCH] Remove external link variables, and replace content-links modules with Codex Change-Id: I55d062de1624b77bc5214942368a3fbd545635df --- bundlesize.config.json | 2 +- .../vector-2022/mediawiki.skin.variables.less | 13 ---- resources/skins.vector.styles/links.less | 61 +++++++++++++++++++ resources/skins.vector.styles/skin.less | 1 + resources/skins.vector.styles/typography.less | 34 ----------- skin.json | 2 +- 6 files changed, 64 insertions(+), 49 deletions(-) create mode 100644 resources/skins.vector.styles/links.less diff --git a/bundlesize.config.json b/bundlesize.config.json index 6369a1628..c99a1e0ba 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -24,7 +24,7 @@ }, { "resourceModule": "skins.vector.styles", - "maxSize": "12.6 kB" + "maxSize": "12.5 kB" }, { "resourceModule": "skins.vector.js", diff --git a/resources/mediawiki.less/vector-2022/mediawiki.skin.variables.less b/resources/mediawiki.less/vector-2022/mediawiki.skin.variables.less index dc61b55dc..dc5b0ca9f 100644 --- a/resources/mediawiki.less/vector-2022/mediawiki.skin.variables.less +++ b/resources/mediawiki.less/vector-2022/mediawiki.skin.variables.less @@ -31,16 +31,3 @@ // Arial on Windows, Roboto on Android. // FIXME: Use Codex's OS specific default sans-serif fonts. @font-family-sans: @font-family-sans--fallback; // Codex: 'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif; - -// Overrides for non-Codex variables: - -// Colors -// ****IMPORTANT**** -// When defining these make sure if needed, a dark mode color has also been defined -// in CSSCustomProperties.less -// Link colors for a power user feature to highlight links to other projects. -// In Vector 2022 we unify these colors by default for simpler orientation by average users. -// It's still possible to overwrite the styles per user. -@color-link-external: @color-progressive; -@color-link-external--visited: @color-visited; -@color-link-external--active: @color-progressive--active; diff --git a/resources/skins.vector.styles/links.less b/resources/skins.vector.styles/links.less new file mode 100644 index 000000000..04171be33 --- /dev/null +++ b/resources/skins.vector.styles/links.less @@ -0,0 +1,61 @@ +a:not( .mw-selflink ) { + .cdx-mixin-link-base(); +} + +// Red links +a.new { + .cdx-mixin-link-red(); +} + +// External links +// Use of `a` element selector for limiting generic class scope due to `.external` widespread usage. +.mw-parser-output { + a { + // Deal with long links (T327334, inspired by Minerva solution T62387) + word-wrap: break-word; + } + + a.external { + // Use copy of Codex/OOUI WikimediaUI theme's 'linkExternal' icon in progressive color. + // Note that CSSJanus is flipping the `ltr` in the URL to `rtl`. + // Therefore make sure that both icons are available and up-to-date. + background-image: url( images/link-external-small-ltr-progressive.svg ); + background-position: center right; + background-repeat: no-repeat; + // Equivalent of `12px` at calculation base of `14px` is `0.857em`. + background-size: 0.857em; + padding-right: 1em; + + // See T330712 for better understanding of this class and any future changes. + &.free { + word-break: break-all; + } + } +} + +/** + * The following styles are copied from content.links.less + */ + +/* self links */ +a.mw-selflink { + color: inherit; + font-weight: bold; + text-decoration: inherit; +} + +/* Underline preference */ +.mw-underline-always a { + text-decoration: underline; +} + +.mw-underline-never a { + text-decoration: none; +} + +/* Plainlinks - this can be used to switch + * off special external link styling */ +.plainlinks a.external { + background: none !important; /* stylelint-disable-line declaration-no-important */ + padding: 0 !important; /* stylelint-disable-line declaration-no-important */ +} diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less index 94776c7b1..236dd2498 100644 --- a/resources/skins.vector.styles/skin.less +++ b/resources/skins.vector.styles/skin.less @@ -13,6 +13,7 @@ @import './layouts/toc/unpinned.less'; @import './normalize.less'; @import './typography.less'; + @import './links.less'; // Components @import './components/Dropdown.less'; diff --git a/resources/skins.vector.styles/typography.less b/resources/skins.vector.styles/typography.less index d7ca90817..6a61e612d 100644 --- a/resources/skins.vector.styles/typography.less +++ b/resources/skins.vector.styles/typography.less @@ -174,14 +174,6 @@ pre, } } -a { - .cdx-mixin-link-base(); - - &.new { - .cdx-mixin-link-red(); - } -} - // T335625 - Move siteSub into common.less to prevent it from being feature-flagged // and overriding on-wiki modifications. #siteSub { @@ -194,29 +186,3 @@ a { font-size: var( --font-size-medium ); line-height: var( --line-height-medium ); } - -// External links -// Use of `a` element selector for limiting generic class scope due to `.external` widespread usage. -.mw-parser-output { - a { - // Deal with long links (T327334, inspired by Minerva solution T62387) - word-wrap: break-word; - } - - a.external { - // Use copy of Codex/OOUI WikimediaUI theme's 'linkExternal' icon in progressive color. - // Note that CSSJanus is flipping the `ltr` in the URL to `rtl`. - // Therefore make sure that both icons are available and up-to-date. - background-image: url( images/link-external-small-ltr-progressive.svg ); - background-position: center right; - background-repeat: no-repeat; - // Equivalent of `12px` at calculation base of `14px` is `0.857em`. - background-size: 0.857em; - padding-right: 1em; - - // See T330712 for better understanding of this class and any future changes. - &.free { - word-break: break-all; - } - } -} diff --git a/skin.json b/skin.json index 34aea973f..7aaa83411 100644 --- a/skin.json +++ b/skin.json @@ -273,7 +273,7 @@ "features": { "normalize": true, "elements": true, - "content-links": true, + "content-links": false, "content-links-external": false, "content-media": true, "content-tables": true,