wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-11-16 18:58:45 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-MinervaNeue/resources/mediawiki.less/mediawiki.skin.variables.less

46 lines
1.7 KiB
Plaintext
Raw Normal View History

styles: Implement mediawiki.skin.variables.less for MinervaNeue For now, only define: - @font-family-sans (unused in MinervaNeue, but for possible future use) - @border-radius-base With current implementation before this patch, MinervaNeue is relying on core's default `@border-radius` which is set to `0` to be close to HTML default. MinervaNeue is currently not applying correct skin's `border-radius`. Bug: T263270 Change-Id: I9a149eefd15efede27416ada4db07072e53628ec
2020-09-25 18:17:15 +00:00
/**
mediawiki.skin.variables: Define own copy of Style Guide derived colors MinervaNeue sets its own variable definitions of all link color variables. Note that this is currently a copy of Vector 2022's definition and pointing back to Wikimedia Design Style Guide and Design System. In the long term both skins should be updated to use the same tokens package. Also with this change comes an update visited link color from the latest design agreements in alignment with Vector 2022. Change-Id: Ibda474f9e37ce7f510364bf15c6be661b6e0304b
2022-08-16 14:32:52 +00:00
* ###IMPORTANT:##
* If editing this file, please also edit the respective file in the Vector skin.
* ####
*
styles: Implement mediawiki.skin.variables.less for MinervaNeue For now, only define: - @font-family-sans (unused in MinervaNeue, but for possible future use) - @border-radius-base With current implementation before this patch, MinervaNeue is relying on core's default `@border-radius` which is set to `0` to be close to HTML default. MinervaNeue is currently not applying correct skin's `border-radius`. Bug: T263270 Change-Id: I9a149eefd15efede27416ada4db07072e53628ec
2020-09-25 18:17:15 +00:00
* This file is a LESS @import match for 'mediawiki.skin.variables.less'
* when MinervaNeue is the active skin.
mediawiki.skin.variables: Define own copy of Style Guide derived colors MinervaNeue sets its own variable definitions of all link color variables. Note that this is currently a copy of Vector 2022's definition and pointing back to Wikimedia Design Style Guide and Design System. In the long term both skins should be updated to use the same tokens package. Also with this change comes an update visited link color from the latest design agreements in alignment with Vector 2022. Change-Id: Ibda474f9e37ce7f510364bf15c6be661b6e0304b
2022-08-16 14:32:52 +00:00
*
* Please also note, that both current Wikimedia Design Style Guide based skins,
* MinervaNeue and Vector 2022 are using the same variable values respectively in their
* repositories.
styles: Implement mediawiki.skin.variables.less for MinervaNeue For now, only define: - @font-family-sans (unused in MinervaNeue, but for possible future use) - @border-radius-base With current implementation before this patch, MinervaNeue is relying on core's default `@border-radius` which is set to `0` to be close to HTML default. MinervaNeue is currently not applying correct skin's `border-radius`. Bug: T263270 Change-Id: I9a149eefd15efede27416ada4db07072e53628ec
2020-09-25 18:17:15 +00:00
*/
@import 'mediawiki.skin.defaults.less';
Integrate Codex experimental design token build 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
2024-02-27 19:17:07 +00:00
/**
* 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';
Import Codex tokens into mediawiki.skin.variables.less I04f9e48a1cf9dee915cf51e1e12b17ff0a595a06 provides neutral values for the Codex tokens in mediawiki.skin.defaults.less in MW core, and expects skins to import the appropriate Codex themes in their mediawiki.skin.variables.less. For MinervaNeue, import the Codex tokens for the “WikimediaUI” theme. Remove variable assignments that are now redundant because their values are the same as the Codex tokens. After importing the Codex tokens, override some of their values where necessary so that all variables' values stay the same(*). We should consider whether to remove some of these overrides in a follow-up patch, but keeping everything the same for now makes this change less disruptive. (*) As in the core change, one variable's value does change: - @max-width-breakpoint-tablet from calc(719px) to 719px This has no visual impact. Bug: T325237 Depends-On: I3a8c89d8558022077be1f32c6a6f4733b6302948 Change-Id: Iafb3c60df0de87f7ba234b5972e75d85c046c4f9
2023-02-06 18:12:49 +00:00
// Overrides for Codex tokens:
@font-size-base: 1em; // Codex: 16px
// == Typography ==
// Body content uses the user setting in browser / the system default sans-serif font:
// Arial on Windows, Roboto on Android.
// FIXME: Use WikimediaUI Base's OS specific default sans-serif fonts.
@font-family-sans: @font-family-sans--fallback;
Convert all color related Less variables to CSS custom properties All colors used in Minerva are converted from Less variables into CSS custom properties. A new file called CSSCustomProperties.less is created in the skins.minerva.base.styles module to store these custom properties and an ADR is provided on the rationale for dropping support for browsers that don't support custom properties. The new CSS custom properties follow Codex design token conventions where possible (and noted when not). Link colors are unique because their styles are defined in core, so in that case the Less variables values are set to custom properties. Those values are then fed back into MediaWiki core for core link styling. Also adds a temporary night-mode color palette under the .skin-nightmode-1 class on the <html> element. Bug: T356074 Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff
2024-02-01 17:33:08 +00:00
/**
Integrate Codex experimental design token build 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
2024-02-27 19:17:07 +00:00
* == Non-standard variable names ==
* These variables don't correspond to Codex variables.
* TODO: Determine whether any of these are actually used in practice.
Convert all color related Less variables to CSS custom properties All colors used in Minerva are converted from Less variables into CSS custom properties. A new file called CSSCustomProperties.less is created in the skins.minerva.base.styles module to store these custom properties and an ADR is provided on the rationale for dropping support for browsers that don't support custom properties. The new CSS custom properties follow Codex design token conventions where possible (and noted when not). Link colors are unique because their styles are defined in core, so in that case the Less variables values are set to custom properties. Those values are then fed back into MediaWiki core for core link styling. Also adds a temporary night-mode color palette under the .skin-nightmode-1 class on the <html> element. Bug: T356074 Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff
2024-02-01 17:33:08 +00:00
**/
Integrate Codex experimental design token build 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
2024-02-27 19:17:07 +00:00
@color-link: var( --color-progressive );
Convert all color related Less variables to CSS custom properties All colors used in Minerva are converted from Less variables into CSS custom properties. A new file called CSSCustomProperties.less is created in the skins.minerva.base.styles module to store these custom properties and an ADR is provided on the rationale for dropping support for browsers that don't support custom properties. The new CSS custom properties follow Codex design token conventions where possible (and noted when not). Link colors are unique because their styles are defined in core, so in that case the Less variables values are set to custom properties. Those values are then fed back into MediaWiki core for core link styling. Also adds a temporary night-mode color palette under the .skin-nightmode-1 class on the <html> element. Bug: T356074 Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff
2024-02-01 17:33:08 +00:00
@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);
Integrate Codex experimental design token build 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
2024-02-27 19:17:07 +00:00
@color-link-external: var( --color-progressive );
@color-link-external--visited: var( --color-visited );
@color-link-external--active: var(--color-progressive--active);
Reference in a new issue Copy permalink