Background
Description:
Currently inside MediaWiki core we have borders for thumbnails and code snippets (which I'll from now on refer to media) . The current value is #eaecf0 and it is not covered by existing design tokens. Volker suggested on https://gerrit.wikimedia.org/r/c/mediawiki/core/+/969954 this might warrant a new token.
Thumbnail border
.mw-image-border .mw-file-element { border: 1px solid #eaecf0; } .thumbborder { border: 1px solid #eaecf0; } pre, code, .mw-code { border: @border-width-base @border-style-base #eaecf0; } .wikitable { background-color: #f8f9fa; } .wikitable> tr > th, .wikitable > * > tr > th { background-color: #eaecf0; }
History (if needed):
[Likely a historic artifact. Not sure how this has evolved over the years.]
Known use case(s):
 | * Borders on thumbnails (example from article Porsche 914 on enwiki) |
 | - |
 | or at mediawiki.org on Codex article * Borders on code snippets (example from article CSS on enwiki) |
 | Light divider in the ToC |
 | Light dividers in the Tools panel |
Considerations
- Community tend to be sensitive to changes in color relating to article content.
- Readability is key in these (border) color choices, we shouldn't over-emphasize the borders here, as they are not required to be contrast-compliant for understanding the elements difference with its surrounding text.
User stories
add at least one user story
Previous implementations
- Codex demo: add the corresponding link to the current token's category in the Codex demo
- Design style guide: add the corresponding Design Style Guide link, if applicable
Design spec
Open questions
Add here the questions to be answered in order to design and implement the token
Acceptance criteria (or Done)
Design
- Design the Figma spec sheet and add it in this task
- Add the token as Figma variable in the library. This step will be done by a DST member.
Code
- Implement the token in Codex
- Update components that use this token (if needed)
