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

68 lines
3 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';
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
// Import the Codex design tokens from the “WikimediaUI” theme.
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui.less';
// 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
/**
* 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".
* 🙃
**/
Map color-based skin variables to CSS variables Additional changes: * Separate CSSCustomProperties.less from skin.less so that we can obtain the unmodified original values for the colors Depends-On: I363a97d33d85a9033da753f2a8fe730d80206639 Depends-On: I148eaca747352ffdc9d1423f20d34bd5a1d0e447 Bug: T356427 Change-Id: I916450c276cabb0c7c871525c50f95fb87f498ad
2024-02-20 22:40:56 +00:00
@color-subtle: var(--color-subtle);
@color-error: var(--color-error);
// Can be uncommented with https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Flow/+/1005204 is merged.
Fixes typo Follow up to I0cd0e36a6abe0bba9e98d1b319e636bef2952301 Bug: T356427 Change-Id: I5d92328c910c8146fe0f467eb14e2036afbbbd6d
2024-02-21 01:58:26 +00:00
//@color-progressive: var(--color-progressive);
//@color-destructive: var(--color-destructive);
@color-inverted: var(--color-inverted);
Map color-based skin variables to CSS variables Additional changes: * Separate CSSCustomProperties.less from skin.less so that we can obtain the unmodified original values for the colors Depends-On: I363a97d33d85a9033da753f2a8fe730d80206639 Depends-On: I148eaca747352ffdc9d1423f20d34bd5a1d0e447 Bug: T356427 Change-Id: I916450c276cabb0c7c871525c50f95fb87f498ad
2024-02-20 22:40:56 +00:00
@color-base: var(--color-base);
@background-color-progressive-subtle: var(--background-color-progressive-subtle);
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: var(--color-link);
@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);
Map color-based skin variables to CSS variables Additional changes: * Separate CSSCustomProperties.less from skin.less so that we can obtain the unmodified original values for the colors Depends-On: I363a97d33d85a9033da753f2a8fe730d80206639 Depends-On: I148eaca747352ffdc9d1423f20d34bd5a1d0e447 Bug: T356427 Change-Id: I916450c276cabb0c7c871525c50f95fb87f498ad
2024-02-20 22:40:56 +00:00
@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);
@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);
Reference in a new issue Copy permalink