feat(core): clean up state colors

This commit is contained in:
alistair3149 2024-06-30 23:50:21 -04:00
parent c21a908c12
commit ff0a6ed710
No known key found for this signature in database
46 changed files with 160 additions and 237 deletions

View file

@ -30,24 +30,14 @@
--color-surface-4__s: 10%;
--color-surface-4__l: 88%;
--delta-hover-state: 2%;
--color-surface-0: ~'hsl( var( --color-primary__h ), var( --color-surface-0__s ), var( --color-surface-0__l ) )';
--color-surface-1: ~'hsl( var( --color-primary__h ), var( --color-surface-1__s ), var( --color-surface-1__l ) )';
--color-surface-2: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), var( --color-surface-2__l ) )';
--color-surface-3: ~'hsl( var( --color-primary__h ), var( --color-surface-3__s ), var( --color-surface-3__l ) )';
--color-surface-4: ~'hsl( var( --color-primary__h ), var( --color-surface-4__s ), var( --color-surface-4__l ) )';
--color-surface-2--hover: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), calc( var( --color-surface-2__l ) + var( --delta-hover-state ) ) )';
--color-surface-2--active: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), calc( var( --color-surface-2__l ) - var( --delta-hover-state ) ) )';
--background-color-destructive: rgba( 221, 51, 51, 0.1 );
--background-color-success: rgba( 0, 175, 137, 0.1 );
--background-color-warning: rgba( 255, 204, 51, 0.1 );
--background-image-destructive: linear-gradient( var( --background-color-destructive ), var( --background-color-destructive ) );
--background-image-success: linear-gradient( var( --background-color-success ), var( --background-color-success ) );
--background-image-warning: linear-gradient( var( --background-color-warning ), var( --background-color-warning ) );
--color-surface-2--hover: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), calc( var( --color-surface-2__l ) + var( --delta-lightness-hover-state ) ) )';
--color-surface-2--active: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), calc( var( --color-surface-2__l ) - var( --delta-lightness-hover-state ) ) )';
--box-shadow-card: @box-shadow-card;
--box-shadow-dialog: @box-shadow-dialog;
@ -55,10 +45,6 @@
--font-grade: 0;
/* Foreground Colors */
--color-text-error: @color-text-error;
--color-text-warning: @color-text-warning;
--color-text-success: @color-text-success;
--color-syntax-red: @color-syntax-red;
--color-syntax-orange: @color-syntax-orange;
--color-syntax-yellow: @color-syntax-yellow;
@ -158,10 +144,6 @@ a {
}
.theme-dark-old() {
--color-text-error: @dark-color-text-error;
--color-text-warning: @dark-color-text-warning;
--color-text-success: @dark-color-text-success;
--color-syntax-red: @color-syntax-red-dark;
--color-syntax-orange: @color-syntax-orange-dark;
--color-syntax-yellow: @color-syntax-yellow-dark;

View file

@ -20,13 +20,14 @@
--color-surface-4__s: 15%;
--color-surface-4__l: 23%;
--delta-hover-state: 4%;
--color-emphasized: ~'hsl( var( --color-primary__h ), 80%, 95% )';
--color-base: ~'hsl( var( --color-primary__h ), 25%, 80% )';
--color-subtle: ~'hsl( var( --color-primary__h ), 25%, 65% )';
--background-color-progressive-subtle: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 15% )';
--background-color-progressive-subtle: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 10% )';
--background-color-destructive-subtle: #360003;
--background-color-warning-subtle: #251400;
--background-color-success-subtle: #001f12;
--background-color-button-quiet--hover: rgba( 255, 255, 255, 0.04 );
--background-color-button-quiet--active: rgba( 255, 255, 255, 0.08 );
--background-color-icon: ~'rgba( 255, 255, 255, var( --opacity-icon-base ) )';
@ -65,9 +66,7 @@
--color-surface-4__l: 14%;
--delta-hover-state: 6%;
--shadow-strength: 0.04;
--shadow-strength: 0.06;
}
.skin-theme-clientpref-night {

View file

@ -17,15 +17,15 @@
}
.error {
color: var( --color-text-error );
color: var( --color-destructive );
}
.warning {
color: var( --color-text-warning );
color: var( --color-base );
}
.success {
color: var( --color-text-success );
color: var( --color-success );
}
}
}

View file

@ -29,18 +29,18 @@
}
&-error {
background-color: var( --background-color-destructive );
border-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
border-color: var( --background-color-destructive-subtle );
}
&-warning {
background-color: var( --background-color-warning );
border-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
border-color: var( --background-color-warning-subtle );
}
&-success {
background-color: var( --background-color-success );
border-color: var( --background-color-success );
background-color: var( --background-color-success-subtle );
border-color: var( --background-color-success-subtle );
}
}

View file

@ -9,7 +9,9 @@
--background-color-icon: ~'rgba( 0, 0, 0, var( --opacity-icon-base ) )';
--background-color-icon--hover: ~'rgba( 0, 0, 0, var( --opacity-icon-base--hover ) )';
--background-color-icon--active: ~'rgba( 0, 0, 0, var( --opacity-icon-base--active ) )';
// Hover and active states are calculated by a modifier of the lightness value in HSL (e.g. hover: +2%, active: -2%)
--delta-lightness-hover-state: 4%;
// Used to calculate box shadow
--shadow-strength: 0.02;
--surface-shadow: var( --color-primary__h ), 10%, 20%;
@ -29,23 +31,21 @@
--color-inverted: #fff;
--color-inverted-fixed: #fff;
--color-progressive: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), var( --color-primary__l ) )';
--color-progressive--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) * 1.2 ) )';
--color-progressive--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) * 0.8 ) )';
--color-progressive--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) + var( --delta-lightness-hover-state ) ) )';
--color-progressive--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) - var( --delta-lightness-hover-state ) ) )';
--color-progressive--focus: var( --color-progressive );
--color-destructive: #d73333;
--color-destructive--hover: #ff4242;
--color-destructive--active: #b32424;
--color-destructive: #d60021;
--color-destructive--hover: #ef4444;
--color-destructive--active: #9c0015;
--color-destructive--focus: var( --color-progressive );
--color-visited: var( --color-link );
--color-destructive--visited: var( --color-destructive );
--color-error: var( --color-destructive );
--color-warning: #edab00;
--color-success: #14866d;
--color-warning: #c77f00;
--color-success: #009768;
--color-notice: var( --color-base );
/*
--color-content-added: #096450;
--color-content-removed: #b32424;
*/
--color-content-added: var( --color-success );
--color-content-removed: var( --color-destructive );
--filter-invert-icon: 0;
--filter-invert-primary-button-icon: 1;
--box-shadow-color-base: ~'hsla( var( --surface-shadow ), var( --shadow-strength ) )';
@ -68,24 +68,22 @@
--background-color-progressive--active: var( --color-progressive--active );
--background-color-progressive--focus: var( --color-progressive );
--background-color-progressive-subtle: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 95% )';
/*
--background-color-destructive: #d73333;
--background-color-destructive--hover: #ff4242;
--background-color-destructive--active: #b32424;
*/
--background-color-destructive: var( --color-destructive );
--background-color-destructive--hover: var( --color-destructive--hover );
--background-color-destructive--active: var( --color-destructive--active );
--background-color-destructive--focus: var( --color-progressive );
--background-color-destructive-subtle: #fee2e2;
--background-color-error: var( --color-destructive );
--background-color-error--hover: var( --color-destructive--hover );
--background-color-error--active: var( --color-destructive--active );
--background-color-error-subtle: var( --background-color-destructive-subtle );
--background-color-warning-subtle: #fef3c7;
--background-color-success-subtle: #d1fae5;
/*
--background-color-destructive-subtle: #fee7e6;
--background-color-error: #d73333;
--background-color-error--hover: #ff4242;
--background-color-error--active: #b32424;
--background-color-error-subtle: #fee7e6;
--background-color-warning-subtle: #fef6e7;
--background-color-success-subtle: #d5fdf4;
--background-color-notice-subtle: #eaecf0;
--background-color-content-added: #afb6e9;
--background-color-content-removed: #fc3;
--background-color-notice-subtle: #d1fae5;
*/
--background-color-content-added: var( --background-color-success-subtle );
--background-color-content-removed: var( --background-color-destructive-subtle );
--background-color-backdrop-light: ~'hsla( var( --color-primary__h ), var( --color-surface-0__s ), var( --color-surface-0__l ), 0.65 )';
--background-color-backdrop-dark: rgba( 0, 0, 0, 0.65 );
/*
@ -159,5 +157,8 @@
--color-primary: var( --color-progressive );
--color-primary--hover: var( --color-progressive--hover );
--color-primary--active: var( --color-progressive--active );
--color-text-error: var( --color-destructive );
--color-text-warning: var( --color-base );
--color-text-success: var( --color-success );
--opacity-icon-base--active: var( --opacity-icon-base--selected );
}

View file

@ -85,63 +85,6 @@
@color-syntax-violet-dark: #bb80b3;
@color-syntax-grey-dark: #676E95;
/**
* Based WikimediaUI (`wmui`) color palette
* See https://design.wikimedia.org/style-guide/visual-style_colors.html
* Don't use those variables directly, instead define your vars
* referring to them as applied further below.
*/
// @color-base0: #000; // = HSB 0°, 0%, 0%
@color-base10: #202122; // = HSB 210°, 6%, 13%
@color-base20: #54595d; // = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff`
@color-base30: #72777d; // = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff`
@color-base50: #a2a9b1; // = HSB 212°, 8%, 69%
@color-base70: #c8ccd1; // = HSB 213°, 4%, 82%
@color-base80: #eaecf0; // = HSB 220°, 3%, 94%
@color-base90: #f8f9fa; // = HSB 210°, 1%, 98%
@color-base100: #fff; // = HSB 0°, 0%, 100%
@color-accent30: #2a4b8d; // = HSB 220°, 70%, 55%
@color-accent50: #36c; // = HSB 220°, 75%, 80%
@color-accent90: #eaf3ff; // = HSB 214°, 8%, 100%
@color-red30: #b32424; // = HSB 360°, 80%, 70%
@color-red50: #d33; // = HSB 360°, 77%, 87%
@color-red90: #fee7e6; // = HSB 3°, 9%, 100%
@color-yellow30: #ac6600; // = HSB 36°, 100%, 67%
@color-yellow50: #fc3; // = HSB 45°, 80%, 100%
@color-yellow90: #fef6e7; // = HSB 39°, 9%, 100%
@color-green30: #14866d; // = HSB 167°, 85%, 53%
@color-green50: #00af89; // = HSB 167°, 100%, 69%
@color-green90: #d5fdf4; // = HSB 166°, 16%, 99%
@color-accent50--lighten: #5b84d6;
@color-red50--lighten: #e35b5b;
@color-accent-30--darken: #26437f;
@background-color-overlay: rgba( 255, 255, 255, 0.95 ); //base100 95% opacity
@background-color-overlay--lighter: rgba( 255, 255, 255, 0.6 );
@background-color-primary--hover: @color-accent90;
@background-color-primary--active: rgba( 41, 98, 204, 0.1 );
/* Foreground colors */
/* color-base is deprecated */
@color-base: @color-base20;
@color-base--emphasized: @color-base10;
@color-base--subtle: @color-base30;
@color-primary: @color-accent50;
@color-primary--hover: @color-accent50--lighten;
@color-primary--active: @color-accent30;
@color-text-error: @color-red50;
@color-text-warning: @color-yellow30;
@color-text-success: @color-green30;
/* Z-Index */
// @z-index-base: 0; - WMUI
@ -182,13 +125,6 @@
@box-shadow-card: 0 2.8px 2.2px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 6.7px 5.3px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .01))', 0 12.5px 10px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 22.3px 17.9px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 41.8px 33.4px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 100px 80px -4px ~'hsla(var(--surface-shadow), var(--shadow-strength))';
@box-shadow-dialog: 0 2.8px 2.2px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 6.7px 5.3px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .01))', 0 12.5px 10px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 22.3px 17.9px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 41.8px 33.4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 100px 80px ~'hsla(var(--surface-shadow), var(--shadow-strength))';
@dark-background-color-primary--hover: @color-accent30;
@dark-background-color-primary--active: @color-accent-30--darken;
@dark-color-text-error: @color-red50--lighten;
@dark-color-text-warning: @color-yellow50;
@dark-color-text-success: @color-green50;
/*
* Framework
*/
@ -204,6 +140,13 @@
* Those styles should be updated to the new standard.
* After that we can remove all theses LESS variables.
*/
@color-base: #54595d;
@color-base--emphasized: #202122;
@color-base--subtle: #72777d;
@color-primary: #36c;
@color-primary--hover: #5b84d6;
@color-primary--active: #2a4b8d;
@dark-bg-10: #1d2129;
@dark-bg-20: #22262d;

View file

@ -180,7 +180,7 @@
.cdx-button--type-quiet.cdx-button--action-destructive:enabled:hover,
.cdx-button--weight-quiet.cdx-button--action-destructive:enabled:hover {
color: var( --color-destructive--hover );
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
.cdx-button--type-quiet.cdx-button--action-destructive:enabled:active,
@ -489,18 +489,18 @@
}
.cdx-message--block.cdx-message--error {
background-color: var( --background-color-destructive );
border-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
border-color: var( --background-color-destructive-subtle );
}
.cdx-message--block.cdx-message--warning {
background-color: var( --background-color-warning );
border-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
border-color: var( --background-color-warning-subtle );
}
.cdx-message--block.cdx-message--success {
background-color: var( --background-color-success );
border-color: var( --background-color-success );
background-color: var( --background-color-success-subtle );
border-color: var( --background-color-success-subtle );
}
.cdx-radio__icon {

View file

@ -3,6 +3,6 @@
* Highlight approved rev in revision history
**/
.approved-revision {
background-color: var( --background-color-success ) !important;
background-color: var( --background-color-success-subtle ) !important;
}
}

View file

@ -29,7 +29,7 @@
}
.ext-discussiontools-init-publishedcomment {
background-color: var( --background-color-success );
background-color: var( --background-color-success-subtle );
}
.ext-discussiontools-init-targetcomment {

View file

@ -95,7 +95,7 @@ span.flaggedrevs-icon {
}
.fr-pending-long2 {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
.fr-pending-long3 {
@ -103,7 +103,7 @@ span.flaggedrevs-icon {
}
.fr-unreviewed-unwatched {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
.mw-fr-reviewlink {
@ -130,11 +130,11 @@ span.flaggedrevs-icon {
.flaggedrevs-pending {
// HACK: Oh well it works sorta
background: var( --background-image-warning );
background: var( --background-color-warning-subtle );
}
.flaggedrevs-unreviewed {
background-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
}
#mw-fr-stablediff {

View file

@ -47,7 +47,7 @@
.flow-ui-canNotEditWidget {
&-active {
color: var( --color-base );
background: var( --background-color-warning );
background: var( --background-color-warning-subtle );
a {
color: var( --color-emphasized );

View file

@ -9,5 +9,5 @@
*/
table.mw-interwikitable.body td.mw-interwikitable-local-yes {
background: var( --background-color-success );
background: var( --background-color-success-subtle );
}

View file

@ -365,18 +365,18 @@
}
&.sd-message--error {
background-color: var( --background-color-destructive );
border-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
border-color: var( --background-color-destructive-subtle );
}
&.sd-message--warning {
background-color: var( --background-color-warning );
border-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
border-color: var( --background-color-warning-subtle );
}
&.sd-message--success {
background-color: var( --background-color-success );
border-color: var( --background-color-success );
background-color: var( --background-color-success-subtle );
border-color: var( --background-color-success-subtle );
}
}

View file

@ -59,15 +59,15 @@
}
.green {
background-color: var( --background-color-success );
background-color: var( --background-color-success-subtle );
}
.yellow {
background-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
}
.red {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
}
@ -121,5 +121,5 @@
}
.drop-over {
background-color: var( --background-color-success );
background-color: var( --background-color-success-subtle );
}

View file

@ -118,7 +118,7 @@
padding: var( --space-md );
&.mw-mmv-enable-confirmation-shown {
background-color: var( --background-color-success );
background-color: var( --background-color-success-subtle );
box-shadow: var( --box-shadow-dialog );
// Hide arrow since those are notifications

View file

@ -23,19 +23,19 @@
.mw-mwoauthmanageconsumers-rejected,
.mw-mwoauthmanagemygrants-rejected,
.mw-mwoauthconsumerregistration-rejected {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
.mw-mwoauthmanageconsumers-expired,
.mw-mwoauthmanagemygrants-expired,
.mw-mwoauthconsumerregistration-expired {
background-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
}
.mw-mwoauthmanageconsumers-approved,
.mw-mwoauthmanagemygrants-approved,
.mw-mwoauthconsumerregistration-approved {
background-color: var( --background-color-success );
background-color: var( --background-color-success-subtle );
}
.mw-mwoauthmanageconsumers-disabled,

View file

@ -106,7 +106,7 @@
}
.mw-scribunto-error {
color: var( --color-text-error );
color: var( --color-destructive );
}
.mw-scribunto-clear {

View file

@ -135,7 +135,7 @@
#tab-smw-property-value:checked + label.nav-label .usage-count.high,
#tab-smw-concept-list:checked + label.nav-label .usage-count.high {
color: var( --color-destructive );
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
/**

View file

@ -14,7 +14,7 @@
*/
.smw-admin-deprecation-notice-docu-section {
color: var( --color-warning );
background-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
border-color: var( --border-color-base );
}

View file

@ -46,7 +46,7 @@
}
.smw-debug-box {
background: var( --background-color-warning );
background: var( --background-color-warning-subtle );
border-color: var( --color-warning );
}
@ -175,7 +175,7 @@ hr.smw-form-horizontalrule {
}
.smw-callout-warning {
background: var( --background-color-warning );
background: var( --background-color-warning-subtle );
border-left-color: var( --color-warning );
}
@ -184,7 +184,7 @@ hr.smw-form-horizontalrule {
}
.smw-callout-success {
background: var( --background-color-success );
background: var( --background-color-success-subtle );
border-left-color: var( --color-success );
}
@ -193,7 +193,7 @@ hr.smw-form-horizontalrule {
}
.smw-callout-error {
background: var( --background-color-destructive );
background: var( --background-color-destructive-subtle );
border-left-color: var( --color-destructive );
}
@ -298,8 +298,8 @@ a.smw-ask-action-btn-lblue:active {
.smw-page-indicator.usage-count.high {
color: var( --color-destructive );
background-color: var( --background-color-destructive );
border-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
border-color: var( --background-color-destructive-subtle );
}
.mw-json .value,
@ -309,7 +309,7 @@ a.smw-ask-action-btn-lblue:active {
.ns-112.action-submit .error {
color: var( --color-destructive );
background: var( --background-color-destructive );
background: var( --background-color-destructive-subtle );
border-left-color: var( --color-destructive );
}

View file

@ -151,7 +151,7 @@
}
.marker-cluster-medium {
background-color: var( --background-color-success );
background-color: var( --background-color-success-subtle );
}
.marker-cluster-medium div {
@ -159,7 +159,7 @@
}
.marker-cluster-large {
background-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
}
.marker-cluster-large div {

View file

@ -15,7 +15,7 @@
.skin-theme-clientpref-night {
.fc-highlight {
background: var( --background-color-success );
background: var( --background-color-success-subtle );
}
.fc-bgevent {

View file

@ -17,7 +17,7 @@
}
.err {
border-color: var( --background-color-destructive );
border-color: var( --background-color-destructive-subtle );
}
.k {
@ -312,6 +312,6 @@
}
.hll {
background-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
}
}

View file

@ -76,7 +76,7 @@
}
.tux-notice {
background-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
}
.tux-highlight {
@ -84,13 +84,13 @@
}
.editarea .tux-more-notices {
background-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
}
.tux-notice-message.error,
.tux-notice-message.translation-saving {
color: var( --color-destructive );
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
.tux-notice-message .show-diff-link {
@ -98,17 +98,17 @@
}
.editarea .tux-more-notices::before {
border-right-color: var( --background-color-warning );
border-bottom-color: var( --background-color-warning );
border-right-color: var( --background-color-warning-subtle );
border-bottom-color: var( --background-color-warning-subtle );
}
.editarea .tux-more-notices.tux-has-errors {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
.editarea .tux-more-notices.tux-has-errors::before {
border-right-color: var( --background-color-destructive );
border-bottom-color: var( --background-color-destructive );
border-right-color: var( --background-color-destructive-subtle );
border-bottom-color: var( --background-color-destructive-subtle );
}
.tux-editor-request-right {

View file

@ -77,7 +77,7 @@
.tux-message-filter-result {
color: var( --color-base );
background: var( --background-color-warning );
background: var( --background-color-warning-subtle );
border-bottom-color: var( --border-color-base );
}

View file

@ -58,7 +58,7 @@
}
.group-warning {
background: var( --background-color-warning );
background: var( --background-color-warning-subtle );
}
.tux-messagetable-header {

View file

@ -22,7 +22,7 @@
}
.limit-reached {
background-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
}
.translate-stash-control {

View file

@ -10,7 +10,7 @@
/* ext.translate.special.managegroups */
.mw-translate-smg-change .mw-translate-smg-notice-important {
background: var( --background-color-destructive );
background: var( --background-color-destructive-subtle );
border-color: var( --border-color-base );
}
@ -45,7 +45,7 @@
.mw-tpm-sp-error__message {
color: var( --color-destructive );
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
border-color: var( --border-color-base );
}
@ -114,5 +114,5 @@
/* ext.translate.special.translations */
.mw-sp-translate-table .mw-sp-translate-fuzzy {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}

View file

@ -11,6 +11,6 @@
.mw-translate-translationstats-container {
.mw-translate-error-container {
color: var( --color-destructive );
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
}

View file

@ -19,7 +19,7 @@
}
.mw-twocolconflict-split-current-version-header .mw-twocolconflict-revision-label {
background-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
}
.mw-twocolconflict-special-your-version-header .mw-twocolconflict-revision-label,
@ -29,7 +29,7 @@
.mw-twocolconflict-split-row {
&.mw-twocolconflict-no-selection {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
border-color: transparent;
}
}
@ -44,7 +44,7 @@
}
&.mw-twocolconflict-split-delete {
border-color: var( --background-color-warning );
border-color: var( --background-color-warning-subtle );
}
&.mw-twocolconflict-split-copy {
@ -57,7 +57,7 @@
}
del.mw-twocolconflict-diffchange {
background-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
}
&.mw-twocolconflict-split-unselected {
@ -68,7 +68,7 @@
}
&.mw-twocolconflict-split-delete {
border-color: var( --background-color-warning );
border-color: var( --background-color-warning-subtle );
}
ins.mw-twocolconflict-diffchange {
@ -76,7 +76,7 @@
}
del.mw-twocolconflict-diffchange {
background-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
}
}
@ -104,7 +104,7 @@
.oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:checked + span,
.oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:active + span,
.oo-ui-radioInputWidget [ type='radio' ] + span {
background: var( --background-color-warning );
background: var( --background-color-warning-subtle );
border-color: var( --color-warning );
}
}
@ -132,7 +132,7 @@
font-weight: var( --font-weight-semibold );
.mw-twocolconflict-split-delete {
background-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
}
.mw-twocolconflict-split-add {

View file

@ -45,7 +45,7 @@ h3.mwe-upwiz-metadata-title {
.mwe-upwiz-metadata-booklet.oo-ui-bookletLayout {
> .oo-ui-menuLayout-menu {
.mwe-upwiz-metadata-page--error {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
border-color: transparent;
}
}

View file

@ -1,11 +1,11 @@
/*
/*
* Citizen
*
* SkinStyles for Extension:Wikibase
* Module: jquery.wikibase.entityselector
* Version: REL1_35 7bb503b
*
* Date: 2022-05-11
* Date: 2022-05-11
*/
.ui-entityselector-list li,
@ -16,7 +16,7 @@
.ui-entityselector-list .ui-entityselector-notfound,
.ui-entityselector-list .ui-entityselector-error {
/* Common bright red .wb-error color */
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
.ui-entityselector-list .ui-entityselector-notfound.ui-state-hover a,
@ -33,11 +33,11 @@
}
.ui-suggester-input.ui-entityselector-input.ui-entityselector-input-recognized {
background-color: var( --background-color-success );
background-color: var( --background-color-success-subtle );
border-color: var( --border-color-base );
}
.ui-suggester-input.ui-entityselector-input.ui-entityselector-input-unrecognized {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
border-color: var( --border-color-base );
}

View file

@ -30,7 +30,7 @@
}
.wikibase-wbtooltip-tip.wb-error .tipsy-inner {
background: var( --background-color-destructive );
background: var( --background-color-destructive-subtle );
border-color: var( --border-color-base );
}

View file

@ -36,7 +36,7 @@ h1 .wikibase-title-id {
}
.ui-closeable.wb-error {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
.wikibase-entityview input {
@ -82,12 +82,12 @@ div .wikibase-snakview-value span.error.wb-format-error {
}
.wikibase-statementgrouplistview .wikibase-statementgroupview-property.wb-error {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
.wikibase-statementgrouplistview .wikibase-statementview.wb-error,
.wikibase-statementgrouplistview .wikibase-statementview.wb-error .wb-claim {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
.wikibase-statementgrouplistview .wikibase-statementlistview.wb-new .wikibase-statementview {
@ -140,11 +140,11 @@ span.wikibase-snakview-variation-novaluesnak {
}
.wikibase-referenceview.wb-error {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
.wikibase-referenceview.wb-error > .wikibase-referenceview-heading {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
.wikibase-referenceview-tabs {
@ -240,7 +240,7 @@ span.wikibase-snakview-variation-novaluesnak {
/* jquery.wikibase.entitytermsforlanguageview.css */
.wikibase-entitytermsforlanguageview .wb-error {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
/* jquery.wikibase.labelview.css */

View file

@ -88,7 +88,7 @@ ul.tagadata li.tagadata-choice .tagadata-label input:focus {
/* jquery.wikibase.entitytermsforlanguageview.css */
.wikibase-entitytermsforlanguageview .wb-error {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
/* jquery.wikibase.entitytermsforlanguagelistview.css */

View file

@ -145,7 +145,7 @@
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
color: var( --color-destructive );
background: var( --background-color-destructive );
background: var( --background-color-destructive-subtle );
border-color: var( --border-color-base );
}

View file

@ -24,22 +24,20 @@
li {
&.selected {
color: var( --color-base );
outline: 0;
color: var( --color-base--emphasized );
outline-color: var( --border-color-base );
&.before {
background-color: var( --background-color-progressive-subtle );
background-color: var( --background-color-success-subtle );
}
&.after {
background-color: var( --background-color-progressive-subtle );
background-color: var( --background-color-destructive-subtle );
}
a {
color: var( --)
}
}
}
}
.skin-theme-clientpref-night {
#pagehistory li.selected a {
color: @color-accent90;
}
}

View file

@ -109,7 +109,7 @@ a.mw-debug-panelabel:visited {
td {
color: var( --color-emphasized );
background-color: var( --background-color-success );
background-color: var( --background-color-success-subtle );
}
}
@ -131,11 +131,11 @@ a.mw-debug-panelabel:visited {
}
.mw-debug-console-warn {
background-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
}
.mw-debug-console-deprecated {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
/* $wgShowDebug = true; */

View file

@ -27,7 +27,7 @@
&-value,
&-single-value {
background-color: var( --background-color-success );
background-color: var( --background-color-success-subtle );
}
&-single-value {

View file

@ -28,7 +28,7 @@
border-color: var( --color-success );
.diffchange {
background: var( --background-color-success );
background: var( --background-color-success-subtle );
}
}
@ -36,7 +36,7 @@
border-color: var( --color-destructive );
.diffchange {
background: var( --background-color-destructive );
background: var( --background-color-destructive-subtle );
}
}

View file

@ -24,6 +24,6 @@
.mime-type {
&.has-warning {
color: var( --color-text-warning );
color: var( --color-base );
}
}

View file

@ -10,7 +10,7 @@
.unpatrolled {
font-weight: var( --font-weight-semibold );
color: var( --color-text-error );
color: var( --color-destructive );
}
.newpage,

View file

@ -21,17 +21,17 @@
&.mw-notification-type {
&-warn {
background: var( --background-image-warning ) var( --color-surface-0 );
background: var( --background-color-warning-subtle ) var( --color-surface-0 );
border-color: transparent;
}
&-error {
background: var( --background-image-destructive ) var( --color-surface-0 );
background: var( --background-color-destructive-subtle ) var( --color-surface-0 );
border-color: transparent;
}
&-success {
background: var( --background-image-success ) var( --color-surface-0 );
background: var( --background-color-success-subtle ) var( --color-surface-0 );
border-color: transparent;
}
}

View file

@ -14,11 +14,11 @@
/* default.less */
.mw-plusminus {
&-pos {
color: var( --color-text-success );
color: var( --color-success );
}
&-neg {
color: var( --color-text-error );
color: var( --color-destructive );
}
&-null {

View file

@ -293,17 +293,17 @@
}
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-error {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
border-color: transparent;
}
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
background-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
border-color: transparent;
}
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success {
background-color: var( --background-color-success );
background-color: var( --background-color-success-subtle );
border-color: transparent;
}
@ -313,11 +313,11 @@
}
.oo-ui-messageWidget.oo-ui-flaggedElement-error:not( .oo-ui-messageWidget-block ) {
color: var( --color-text-error );
color: var( --color-destructive );
}
.oo-ui-messageWidget.oo-ui-flaggedElement-success:not( .oo-ui-messageWidget-block ) {
color: var( --color-text-warning );
color: var( --color-base );
}
.oo-ui-iconWidget.oo-ui-widget-disabled {

View file

@ -36,7 +36,7 @@
}
.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button:active {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}
.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {