wikimedia/mediawiki-extensions-WikiEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/WikiEditor synced 2024-11-23 15:57:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Partially replace hardcoded colors with Codex tokens

Browse source 
Replaces hardcoded CSS colors with Codex design tokens
for the purposes of improving dark-mode support.

These changes resolves issues where text was
illegible in dark-mode (white text on white background).

Bug: T367362
Change-Id: I6314c8013839ac1e9a67178be7d1cb4bc45a3321
This commit is contained in:
Jdrewniak 2024-06-26 10:47:43 -04:00 committed by Derk-Jan Hartman
parent c47a996eb0
commit dafd7515b3
5 changed files with 54 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
modules/jquery.wikiEditor.less
View file

@ -1,4 +1,5 @@
@import 'mediawiki.mixins';
@import 'mediawiki.skin.variables.less';
/*
* CSS for WikiEditor jQuery plugin
@ -23,12 +24,12 @@
}
.wikiEditor-ui-view {
border: 1px solid #c8ccd1;
border: @border-subtle;
}
.wikiEditor-ui-top {
position: relative;
border-bottom: 1px solid #c8ccd1;
border-bottom: @border-subtle;
}
.wikiEditor-ui-left {
@ -38,7 +39,7 @@
.wikiEditor-ui-right {
float: right;
background: #f8f9fa;
background: @background-color-neutral-subtle;
overflow: hidden;
}
}
@ -51,37 +52,37 @@
.wikiEditor-ui-controls {
float: left;
width: 100%;
background-color: #fff;
background-color: @background-color-base;
}
.wikiEditor-ui-tabs {
float: left;
height: 2.5em;
margin-right: -1px;
background-color: #fff;
border-left: 1px solid #c8ccd1;
border-top: 1px solid #c8ccd1;
background-color: @background-color-base;
border-left: @border-subtle;
border-top: @border-subtle;
div {
float: left;
height: 2.5em;
background-color: #f8f9fa;
border-right: 1px solid #c8ccd1;
border-bottom: 1px solid #c8ccd1;
background-color: @background-color-interactive-subtle;
border-right: @border-subtle;
border-bottom: @border-subtle;
a {
display: inline-block;
padding: 0 0.75em;
line-height: 2.5em;
color: #0645ad;
color: @color-progressive;
}
&.current {
border-bottom: 1px solid #fff;
background-color: #fff;
background-color: @background-color-base;
a {
color: #222;
color: @color-base;
&:hover {
text-decoration: none;
@ -95,7 +96,7 @@
float: right;
height: 2.5em;
margin-right: -1px;
background-color: #fff;
background-color: @background-color-base;
padding-left: 1em;
border-top: 1px solid #fff;

13
modules/jquery.wikiEditor.toolbar-wikimedia.less
View file

@ -1,17 +1,18 @@
@import 'mediawiki.mixins';
@import 'mediawiki.skin.variables.less';
/**
* CSS for WikiEditor Toolbar jQuery plugin
*/
.wikiEditor-ui-toolbar {
background-color: #f8f9fa;
background-color: @background-color-neutral-subtle;
box-shadow: 0 2px 1px 0 rgba( 0, 0, 0, 0.1 );
/* Groups */
.group,
.section-secondary .group {
border-color: #eaecf0;
border-color: @border-color-muted;
}
.group {
@ -48,7 +49,7 @@
box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
.option:hover {
background-color: #eaecf0;
background-color: @background-color-interactive;
}
}
}
@ -58,12 +59,12 @@
.booklet {
> .index {
> :hover {
background-color: #eaecf0;
background-color: @background-color-interactive;
}
> .current {
background-color: #eaf3ff;
color: #36c;
background-color: @background-color-progressive-subtle;
color: @color-progressive;
}
}
}

3
modules/jquery.wikiEditor.toolbar.js
View file

@ -399,7 +399,7 @@ var toolbarModule = {
}
}
$select.append( $( '<a>' )
.addClass( 'label' )
.addClass( 'label skin-invert' )
.text( label )
.data( 'options', $options )
.attr( { role: 'button', tabindex: 0, 'aria-expanded': false, 'aria-controls': menuId, 'aria-haspopup': 'menu' } )
@ -612,6 +612,7 @@ var toolbarModule = {
var $link =
$( '<a>' )
.addClass( selected === id ? 'current' : null )
.addClass( 'skin-invert' )
.attr( {
tabindex: 0,
role: 'button',

51
modules/jquery.wikiEditor.toolbar.less
View file

@ -1,4 +1,5 @@
@import 'mediawiki.mixins';
@import 'mediawiki.skin.variables.less';
/**
* CSS for WikiEditor Toolbar jQuery plugin
@ -22,7 +23,7 @@
.section {
float: left;
width: 100%;
border-top: 1px solid #c8ccd1;
border-top: @border-subtle;
}
.section-hidden {
@ -47,7 +48,7 @@
line-height: 32px;
a {
color: #0645ad;
color: @color-progressive;
cursor: pointer;
display: block;
height: 32px;
@ -76,12 +77,12 @@
}
a:visited {
color: #0645ad;
color: @color-progressive;
}
a.current,
a.current:visited {
color: #222;
color: @color-base;
&:hover {
text-decoration: none;
@ -113,7 +114,7 @@
.group {
padding-right: 0;
margin-left: 6px;
border-left: 1px solid #c8ccd1;
border-left: @border-subtle;
}
}
@ -123,7 +124,7 @@
display: flex;
min-height: 26px;
padding-right: 6px;
border-right: 1px solid #c8ccd1;
border-right: @border-subtle;
margin: 3px;
/* Toolbar */
@ -134,7 +135,7 @@
/* stylelint-disable-next-line declaration-property-unit-disallowed-list */
line-height: 22px;
margin: 2px 8px 2px 5px;
color: #54595d;
color: @color-subtle;
cursor: default;
}
@ -152,9 +153,9 @@
margin: 2px 0 2px 2px;
height: 22px;
cursor: pointer;
border: 1px solid #c8ccd1;
border: @border-subtle;
padding: 0;
background-color: #fff;
background-color: @background-color-base;
.label {
position: relative;
@ -162,7 +163,7 @@
margin: 0;
cursor: pointer;
text-decoration: none;
color: #222;
color: @color-base;
&::after {
content: '';
@ -185,15 +186,15 @@
display: none;
margin-left: -1px;
margin-top: 22px;
border: 1px solid #c8ccd1;
background-color: #fff;
border: @border-subtle;
background-color: @background-color-base;
z-index: 1;
.option {
display: block;
padding: 0.5em;
text-decoration: none;
color: #000;
color: @color-base;
white-space: nowrap;
&:hover {
@ -232,7 +233,7 @@
.group-search {
float: right;
border-right: 0;
border-left: 1px solid #c8ccd1;
border-left: @border-subtle;
}
/* Booklet */
@ -251,7 +252,7 @@
.wikiEditor-character-highlighted {
background-color: rgba( 41, 98, 204, 0.1 );
color: #000;
color: @color-base;
}
}
@ -273,12 +274,12 @@
}
th {
color: #54595d;
color: @color-subtle;
}
td {
color: #000;
border-top: 1px solid #eaecf0;
color: @color-base;
border-top: @border-subtle;
}
th,
@ -335,13 +336,13 @@
div {
span {
border: 1px solid #eaecf0;
border: @border-subtle;
padding: 5px 8px;
margin-left: 5px;
margin-top: 5px;
height: 1em;
display: inline-block;
color: #202122;
color: @color-base;
text-decoration: none;
cursor: pointer;
font-family: monospace, 'Courier';
@ -349,15 +350,15 @@
line-height: 1;
&:hover {
background-color: #fff;
background-color: @background-color-base;
text-decoration: none;
border-color: #c8ccd1;
border-color: @border-color-interactive;
}
}
.wikiEditor-character-highlighted {
background-color: #7db1c5;
color: #000;
color: @color-base;
}
}
@ -387,7 +388,7 @@
.ui-widget {
table {
td.wikieditor-toolbar-table-preview-wrapper {
background: #eaecf0;
background: @background-color-neutral;
padding: 10px;
span {
@ -398,7 +399,7 @@
.wikieditor-toolbar-table-preview-frame {
width: 340px;
background: #fff;
background: @background-color-base;
padding: 10px;
overflow: hidden;
display: block;

8
modules/realtimepreview/ResizingDragBar.less
View file

@ -6,10 +6,10 @@
// The dimensions of the UI affordance (the little line in the draggable area).
@affordance-width: 4px;
@affordance-length: 52px;
@background-color-wikieditor-resizing-dragbar: #eaecf0;
@background-color-wikieditor-resizing-dragbar-ew: #f8f9fa;
@background-color-wikieditor-resizing-dragbar-drag: #c8ccd1;
@background-color-wikieditor-resizing-dragbar-drag--hover: #54595d;
@background-color-wikieditor-resizing-dragbar: @background-color-interactive;
@background-color-wikieditor-resizing-dragbar-ew: @background-color-interactive-subtle;
@background-color-wikieditor-resizing-dragbar-drag: @background-color-disabled;
@background-color-wikieditor-resizing-dragbar-drag--hover: @color-subtle;
.ext-WikiEditor-ResizingDragBar {
background-color: @background-color-wikieditor-resizing-dragbar;