mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-15 02:13:49 +00:00
Merge "Integrate Codex experimental design token build"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
708dc44fb9
|
|
@ -1,7 +1,7 @@
|
|||
[
|
||||
{
|
||||
"resourceModule": "skins.minerva.base.styles",
|
||||
"maxSize": "8.5KB"
|
||||
"maxSize": "9KB"
|
||||
},
|
||||
{
|
||||
"resourceModule": "skins.minerva.content.styles.images",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue