wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-11-24 06:13:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Integrate Codex experimental design token build

Browse source 
Use the Codex experimental design token build to
providing CSS custom property version of design tokens
for night mode.

The build also provides Less variables which are
references to the CSS custom properties. These are
pulled into the mediawiki.skin.variables.less file
and propagated across core and extensions.

Bug: T358059
Change-Id: I78558f6cc1de91d62fb9f8cbf571f73b51eae8ca
This commit is contained in:
Jan Drewniak 2024-02-27 14:17:07 -05:00 committed by Jdlrobson
parent e5c670f25b
commit 649cb10622
4 changed files with 61 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bundlesize.config.json
View file

@ -1,7 +1,7 @@
[
{
"resourceModule": "skins.minerva.base.styles",
"maxSize": "8.5KB"
"maxSize": "9KB"
},
{
"resourceModule": "skins.minerva.content.styles.images",

51
resources/mediawiki.less/mediawiki.skin.variables.less
View file

@ -12,8 +12,13 @@
*/
@import 'mediawiki.skin.defaults.less';
// Import the Codex design tokens from the “WikimediaUI” theme.
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui.less';
/**
* Codex experiment design tokens.
* This is imported using the "(reference)" option to avoid duplicating the :root block which
* contains CSS custom properties. However, it still imports the Less variables, which are
* then propagated to anyone using `@import 'mediawiki.skin.variables.less'`;
*/
@import ( reference ) 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui-experimental.less';
// Overrides for Codex tokens:
@ -26,43 +31,15 @@
@font-family-sans: @font-family-sans--fallback;
/**
* Link styles are defined in MediaWiki core.
* These variables are first defined in core/resources/src/mediawiki.less/mediawiki.skin.defaults.less
* Then they're overridden here for night mode compatibility
* Then they're fed back into MediaWiki core & extensions
* through the usage of @import "mediawiki.skin.variables.less".
* 🙃
* == Non-standard variable names ==
* These variables don't correspond to Codex variables.
* TODO: Determine whether any of these are actually used in practice.
**/
@color-subtle: var(--color-subtle);
@color-error: var(--color-error);
@color-progressive: var(--color-progressive);
@color-destructive: var(--color-destructive);
@color-inverted: var(--color-inverted);
@color-base: var(--color-base);
@background-color-progressive-subtle: var(--background-color-progressive-subtle);
@color-link: var(--color-link);
@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-link-external);
@color-link-external--visited: var(--color-link-external--visited);
@color-link-external--active: var(--color-link-external--active);
@background-color-base: var(--background-color-base);
@background-color-destructive: var(--background-color-destructive);
@background-color-interactive: var(--background-color-interactive);
@background-color-interactive-subtle: var(--background-color-interactive-subtle);
@background-color-notice-subtle: var(--background-color-notice-subtle);
@border-color-base: var(--border-color-base);
@border-color-inverted: var(--border-color-inverted);
@border-color-muted: var(--border-color-muted);
@border-color-progressive--focus: var(--border-color-progressive--focus);
@border-color-subtle: var(--border-color-subtle);
@border-color-transparent: var(--border-color-transparent);
@box-shadow-color-progressive--focus: var(--box-shadow-color-progressive--focus);
@color-visited: var(--color-visited);
@color-progressive--active: var(--color-progressive--active);
@color-link-red: var(--color-link-red);
@color-link-red--visited: var(--color-link-red--visited);
@color-link--active: var(--color-link--active);
@color-emphasized: var(--color-emphasized);
@color-link-external: var( --color-progressive );
@color-link-external--visited: var( --color-visited );
@color-link-external--active: var(--color-progressive--active);

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

@ -11,64 +11,30 @@
* in order to facilitate an eventual migration to a centralized source.
* @experimental
* @since February 2024 (MediaWiki 1.43)
* This file is kept separate from the skin.less to avoid the side effects of CSS variable conversion
* that occurs to LESS variables when importing mediawiki.skin.variables.
* We import mediawiki.skin.defaults to obtain the original unmodified values for these CSS variables.
*/
@import 'mediawiki.skin.defaults.less';
// Import the Codex design tokens from the “WikimediaUI” theme.
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui.less';
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui-experimental.less';
.light-mode-palette() {
/* Standard Codex colors */
--background-color-base: @background-color-base;
--background-color-destructive: @background-color-destructive;
--background-color-interactive: @background-color-interactive;
--background-color-interactive-subtle: @background-color-interactive-subtle;
--background-color-progressive-subtle: @background-color-progressive-subtle;
--border-color-base: @border-color-base;
--border-color-inverted: @border-color-inverted;
--border-color-muted: @border-color-muted;
--border-color-progressive--focus: @border-color-progressive--focus;
--border-color-subtle: @border-color-subtle;
--border-color-transparent: @border-color-transparent;
--box-shadow-color-progressive--focus: @box-shadow-color-progressive--focus;
--color-base: @color-base;
--color-error: @color-error;
--color-inverted: @color-inverted;
--color-subtle: @color-subtle;
--color-emphasized: @color-emphasized;
/**
* The following line groups the .skin-invert selector along with the :root selector.
* (From the theme-wikimedia-ui-experimental.less import above).
* This ensures that the light-mode color palette is always associated with the .skin-invert class.
*/
// NOTE: The following link colors are fed *back* into MediaWiki core
// by being used in mediawiki.skin.variables.less.
--color-progressive: @color-progressive;
--color-visited: @color-visited;
--color-progressive--active: @color-progressive--active;
--color-link: @color-progressive;
--color-link-red: @color-link-red;
--color-link-red--visited: @color-link-red--visited;
--color-link-external: @color-progressive;
--color-link-external--visited: @color-visited;
--color-link-external--active: @color-progressive--active;
--color-link--visited: @color-visited;
// T357381: Note Minerva uses a different active color then the standard one.
--color-link--active: #faa700;
/* stylelint-disable-next-line */
.skin-invert:extend(:root) {}
/**
* As with the .skin-invert class, .notheme should also reset the CSS variables to the default light theme.
*/
/* Minerva specific colors */
// FIXME: Replace with Codex drop shadows
--box-shadow-color-drawer: rgba( 0, 0, 0, 0.35 );
}
:root {
.light-mode-palette();
}
/* stylelint-disable-next-line */
.notheme:extend(:root) {}
/**
* Placeholder Night mode color palette.
* NOTE: These values are temporarily hard coded.
*/
.night-mode-palette() {
.mixin-night-mode-palette() {
--color-base: #f8f9fa;
--color-subtle: #d4d5d5;
--color-link: #6e85d8;
@ -95,35 +61,47 @@
--color-link-external--visited: #b97876;
--color-link-external--active: #2a4b8d;
--color-link--visited: #977dbd;
--box-shadow-color-drawer: #afb6e9;
--box-shadow-color-drawer: #000;
--color-emphasized: #fff;
}
.night-mode-invert() {
/**
* Forced night mode.
*
* Applies the night mode color palette per the users explicit preference,
* regardless of system settings.
*/
html.skin-night-mode-clientpref-1 {
color-scheme: dark;
.mixin-night-mode-palette();
}
html.skin-night-mode-clientpref-1 .skin-invert {
color-scheme: light;
.light-mode-palette();
// Keep in sync with .night-mode-invert-image() mixin.
filter: invert( 1 ) hue-rotate( 180deg );
}
html.skin-night-mode-clientpref-1 {
color-scheme: dark;
.night-mode-palette();
/** Content that uses the mw-invert class is inverted and the light mode palette should be used. */
.skin-invert {
.night-mode-invert();
}
html.skin-night-mode-clientpref-1 .notheme {
color-scheme: light;
}
/**
* Auto night mode.
*
* Applies the night mode color palette only in response to system settings.
*/
@media ( prefers-color-scheme: dark ) {
html.skin-night-mode-clientpref-2 {
color-scheme: light dark;
.night-mode-palette();
.mixin-night-mode-palette();
}
/** Content that uses the mw-invert class is inverted and the light mode palette should be used. */
.skin-invert {
.night-mode-invert();
}
html.skin-night-mode-clientpref-2 .notheme {
color-scheme: light;
}
html.skin-night-mode-clientpref-2 .skin-invert {
color-scheme: light;
filter: invert( 1 ) hue-rotate( 180deg );
}
}

3
skin.json
View file

@ -155,6 +155,9 @@
]
}
},
"SkinCodexThemes": {
"minerva": "experimental"
},
"AutoloadNamespaces": {
"MediaWiki\\Minerva\\": "includes/"
},