Commit graph

18 commits

Author SHA1 Message Date
Jon Robson e23c1ae9b6 Use codex link mixin inside Minerva
VISUAL CHANGE:
1 change relating to link color inside ambox

Bug: T367892
Change-Id: Iefa1fee9c6ac0326bc43844205dd3f5dc53fc903
2024-09-18 00:31:48 +00:00
Eric Gardner 3e32517f45 Update Minerva to get Codex CSS vars from default files
As of Codex 1.5.0, all files relating to the "experimental"
build have been removed. Instead, the default Codex design tokens
refer to CSS variables for color-related values, and new files
like theme-wikimedia-ui-root.css have been provided as part of the
new distribution.

Bug: T363006
Change-Id: I1a3c5194013f8f4523098458db45ce867fdfd8c9
Depends-On: I1f54bf4f144eaec6ed317c04bd0c851c2f01b42c
2024-05-01 00:00:42 +00:00
Jon Robson ba64c4168d Complete transition to Codex color palettes
* Update mediawiki.skin.variables to point non-Codex tokens to
Codex token equivalents
* Replace box-shadow-color-drawer with @box-shadow-color-base
* Leave FIXME comments for migrating the last two CSS variables
* Replace direct access to CSS variable with @color-link-new
design token instead since the former may no longer exist.

Bug: T360845
Change-Id: Ie531044d320cde50689064f10ff00db5adcaf859
2024-04-29 14:16:36 -07:00
Roan Kattouw 94ae5c67e9 Update imports for experimental file split in Codex
Codex v1.3.6 split the -experimental.less file into -experimental.less
and -experimental.css. The former only contains the Less variables, and
the latter contains the :root {} block with CSS variables. Both files
were also renamed. Update our imports accordingly, so that we import the
right things in the right place.

Bug: T360577
Depends-On: I12813bf0db89b72aa8f2a28ccccb3477e4361ac8
Change-Id: I0b2671cb42476eb264033fd7b15e038e74046602
2024-04-02 15:43:55 -07:00
Jan Drewniak 649cb10622 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-03-04 23:04:57 +00:00
Jon Robson a195343417 Convert color-progressive and color-destructive to CSS variables
Also add @background-color-notice-subtle

Depends-On: I58e169613054c0ff3f24edfd4ef3ebb47e83cdba
Change-Id: Idc432cc65bfcfd4b6809c36359af4215514e9ca5
2024-02-28 21:01:49 +00:00
Jon Robson c94c90d93d Adds color-emphasize to palette
Needed by the language overlay

Bug: T356825
Change-Id: I1d9551f1b42dec5be715e889069279f97f64749e
2024-02-23 20:21:02 +00:00
Jon Robson cf3dc17d57 Fixes typo
Follow up to I0cd0e36a6abe0bba9e98d1b319e636bef2952301

Bug: T356427
Change-Id: I5d92328c910c8146fe0f467eb14e2036afbbbd6d
2024-02-21 02:00:12 +00:00
Jon Robson a30b575271 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-21 00:36:13 +00:00
Jdlrobson af192769a7 Revert "Color subtle should be a CSS variable"
This reverts commit d33a0423b1.

Reason for revert: CSS variables are currently not compatible
with fill colors 

Bug:  T356540
Change-Id: I29c92bb2407a5b8ed38e09a0f48ec834c671c912
2024-02-07 19:40:09 +00:00
Jon Robson d33a0423b1 Color subtle should be a CSS variable
Needed for RelatedArticles heading.

Bug: T356074
Change-Id: I031c4b02fcf6898e72aa92fb5cae95ea1d305fbd
2024-02-06 19:05:31 +00:00
Jan Drewniak 59fd0cd5dc 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-02 17:57:27 +00:00
Roan Kattouw 221bfd981b 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-03-17 20:21:33 +00:00
Volker E 2c9e18b367 mediawiki.skin.variables: Add border-style and border-width vars
Already covered in mediawiki.skin.defaults.less.

Change-Id: I2171c7ab3287e14deb3a76faec2e11811a7f8e31
2022-09-23 01:39:30 -07:00
Volker E ca0c534962 mediawiki.skin.variables: Add Opacities to skin variables
Orienting on Codex Opacity tokens as defined in v10 of 2022-04-01 in
https://www.figma.com/file/h9pA2CCl2i0wtlTKNChaES/Opacities---Tokens?node-id=368%3A2139
Also adding legacy opacity icon tokens for use in all non-Codex
products.
Specifically the icon ones are already in use in MinervaNeue.

Change-Id: I6321b966b6125bee7538be1370c95cb21b3193ba
2022-09-19 19:57:32 +00:00
Volker E f53990c19f 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 17:25:48 +00:00
jdlrobson 8c1afd97a3 Minerva uses centralized link styling colors
Making Minerva use the `elements` feature is not
practical at the current time. In lieu of that, we
update the link colors to use the core definition.

The red links and external link colors
can come from the "content-links" module.

This also adds support for the underlining user link preference
and better plain link support.

Bug: T274717
Change-Id: I600257e6f4430f166331c4ea4f3a72d87aa377d8
2021-09-02 14:55:24 +00:00
Volker E 32724f8183 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-11-02 17:56:40 +00:00