refactor(cssVar): ♻️ introduce color-inverted

OtomadWiki · Jun 5, 2024 · 3d146b2 · 3d146b2
1 parent 5d990f8
commit 3d146b2
Show file tree

Hide file tree

Showing 27 changed files with 67 additions and 66 deletions.
diff --git a/resources/mixins.less b/resources/mixins.less
@@ -173,7 +173,7 @@
 
 // Button Styles
 .button-blue() {
-	color: #fff !important;
+	color: var( --color-inverted ) !important;
 	background-color: var( --color-primary );
 }
 
@@ -186,7 +186,7 @@
 }
 
 .button-red() {
-	color: #fff !important;
+	color: var( --color-inverted ) !important;
 	background-color: var( --color-destructive );
 }
 

diff --git a/resources/skins.citizen.styles/common/cssvariables.less b/resources/skins.citizen.styles/common/cssvariables.less
@@ -12,6 +12,7 @@
 	--color-primary__h: @color-primary__h;
 	--color-primary__s: @color-primary__s;
 	--color-primary__l: @color-primary__l;
+	--color-inverted: #fff;
 
 	--color-surface-0__s: 30%;
 	--color-surface-0__l: 96%;

diff --git a/resources/skins.citizen.styles/components/Pagetools.less b/resources/skins.citizen.styles/components/Pagetools.less
@@ -83,7 +83,7 @@
 			display: block;
 			padding: 0.1em 0.4em;
 			font-size: 0.65rem;
-			color: #fff;
+			color: var( --color-inverted );
 			content: attr( data-counter-text );
 			background: var( --color-primary );
 			border-radius: var( --border-radius--pill );
@@ -95,7 +95,7 @@
 #ca-edit,
 #ca-ve-edit {
 	> a {
-		color: #fff;
+		color: var( --color-inverted );
 		background-color: var( --color-primary );
 
 		&:hover {

diff --git a/resources/skins.citizen.styles/skinning/content.media-screen.less b/resources/skins.citizen.styles/skinning/content.media-screen.less
@@ -53,12 +53,12 @@ figure[ typeof~='mw:File/Frame' ] {
 		border: 1px solid var( --border-color-interactive );
 
 		&:hover {
-			color: #fff;
+			color: var( --color-inverted );
 			background-color: var( --color-primary--hover );
 		}
 
 		&:active {
-			color: #fff;
+			color: var( --color-inverted );
 			background-color: var( --color-primary--active );
 		}
 

diff --git a/resources/skins.citizen.styles/skinning/content.thumbnails-screen.less b/resources/skins.citizen.styles/skinning/content.thumbnails-screen.less
@@ -35,12 +35,12 @@
 			border: 1px solid var( --border-color-interactive );
 
 			&:hover {
-				color: #fff;
+				color: var( --color-inverted );
 				background-color: var( --color-primary--hover );
 			}
 
 			&:active {
-				color: #fff;
+				color: var( --color-inverted );
 				background-color: var( --color-primary--active );
 			}
 

diff --git a/resources/skins.citizen.styles/skinning/interface.category.less b/resources/skins.citizen.styles/skinning/interface.category.less
@@ -35,7 +35,7 @@
 			border-radius: var( --border-radius--pill );
 
 			&:hover {
-				color: #fff;
+				color: var( --color-inverted );
 				background-color: var( --color-primary--hover );
 			}
 

diff --git a/skinStyles/codex/codex.styles.less b/skinStyles/codex/codex.styles.less
@@ -74,7 +74,7 @@
 .cdx-button--type-primary.cdx-button--action-progressive:enabled:focus:not( :active ),
 .cdx-button--weight-primary.cdx-button--action-progressive:enabled:focus:not( :active ) {
 	border-color: var( --color-primary );
-	box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
+	box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px var( --color-inverted );
 }
 
 .cdx-button--type-primary.cdx-button--action-destructive:enabled,
@@ -98,7 +98,7 @@
 .cdx-button--type-primary.cdx-button--action-destructive:enabled:focus:not( :active ),
 .cdx-button--weight-primary.cdx-button--action-destructive:enabled:focus:not( :active ) {
 	border-color: var( --color-destructive );
-	box-shadow: inset 0 0 0 1px var( --color-destructive ), inset 0 0 0 2px #fff;
+	box-shadow: inset 0 0 0 1px var( --color-destructive ), inset 0 0 0 2px var( --color-inverted );
 }
 
 .cdx-button--type-normal.cdx-button--action-progressive:enabled,
@@ -234,7 +234,7 @@
 
 .cdx-card--is-link:focus {
 	border-color: var( --color-primary );
-	box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
+	box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px var( --color-inverted );
 }
 
 .cdx-card__text {
@@ -307,7 +307,7 @@
 
 .cdx-checkbox__input:enabled:checked:focus:not( :active ) + .cdx-checkbox__icon,
 .cdx-checkbox__input:enabled:indeterminate:focus:not( :active ) + .cdx-checkbox__icon {
-	box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
+	box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px var( --color-inverted );
 }
 
 .cdx-checkbox__input:disabled + .cdx-checkbox__icon {
@@ -520,7 +520,7 @@
 }
 
 .cdx-radio__input:enabled:checked + .cdx-radio__icon {
-	background-color: #fff;
+	background-color: var( --color-inverted );
 	border-color: var( --color-primary );
 }
 
@@ -746,7 +746,7 @@
 
 .cdx-toggle-button--framed.cdx-toggle-button--toggled-on:enabled:focus {
 	border-color: var( --color-primary );
-	box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
+	box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px var( --color-inverted );
 }
 
 .cdx-toggle-button--framed.cdx-toggle-button--toggled-on:enabled:active {

diff --git a/skinStyles/extensions/AJAXPoll/ext.ajaxpoll.less b/skinStyles/extensions/AJAXPoll/ext.ajaxpoll.less
@@ -29,7 +29,7 @@
 }
 
 .ajaxpoll .ajaxpoll-hover-vote {
-	color: #fff;
+	color: var( --color-inverted );
 	background: var( --color-destructive );
 }
 
@@ -93,7 +93,7 @@
 }
 
 .ajaxpoll .ajaxpoll-checkevent {
-	color: #fff;
+	color: var( --color-inverted );
 	background: var( --color-success );
 }
 

diff --git a/skinStyles/extensions/CodeEditor/ext.codeEditor.ace.less b/skinStyles/extensions/CodeEditor/ext.codeEditor.ace.less
@@ -261,7 +261,7 @@
 			}
 
 			&[ ace_selected_button='true' ] {
-				color: #fff;
+				color: var( --color-inverted );
 				background-color: var( --color-primary );
 				border-color: var( --color-primary );
 				box-shadow: none;

diff --git a/skinStyles/extensions/Echo/ext.echo.styles.badge.less b/skinStyles/extensions/Echo/ext.echo.styles.badge.less
@@ -32,7 +32,7 @@
 		}
 
 		&:focus {
-			box-shadow: 0 0 0 1px #fff, 0 0 0 3px var( --color-primary );
+			box-shadow: 0 0 0 1px var( --color-inverted ), 0 0 0 3px var( --color-primary );
 			opacity: var( --opacity-icon-base--active );
 
 			&::after {

diff --git a/skinStyles/extensions/MediaSearch/mediasearch.styles.less b/skinStyles/extensions/MediaSearch/mediasearch.styles.less
@@ -122,7 +122,7 @@
 		}
 
 		&.sd-button--framed {
-			color: #fff;
+			color: var( --color-inverted );
 
 			&:hover {
 				border-color: var( --color-primary--hover );
@@ -153,7 +153,7 @@
 		}
 
 		&.sd-button--framed {
-			color: #fff;
+			color: var( --color-inverted );
 
 			&:hover {
 				border-color: var( --color-destructive--hover );
@@ -188,7 +188,7 @@
 
 			&:focus {
 				border-color: var( --color-primary );
-				box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
+				box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px var( --color-inverted );
 			}
 
 			&.sd-button--destructive {
@@ -208,7 +208,7 @@
 
 				&:focus {
 					border-color: var( --color-destructive );
-					box-shadow: inset 0 0 0 1px var( --color-destructive ), inset 0 0 0 2px #fff;
+					box-shadow: inset 0 0 0 1px var( --color-destructive ), inset 0 0 0 2px var( --color-inverted );
 				}
 			}
 		}
@@ -287,7 +287,7 @@
 		&:checked:enabled:focus + .sd-checkbox__icon {
 			background-color: var( --color-primary );
 			border-color: var( --color-primary );
-			box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
+			box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px var( --color-inverted );
 		}
 
 		&:checked:enabled:hover + .sd-checkbox__icon {
@@ -406,7 +406,7 @@
 		}
 
 		&:checked + .sd-radio__icon {
-			background-color: #fff;
+			background-color: var( --color-inverted );
 			border-color: var( --color-primary );
 		}
 
@@ -421,7 +421,7 @@
 			}
 
 			&:checked + .sd-radio__icon {
-				background-color: #fff;
+				background-color: var( --color-inverted );
 			}
 		}
 

diff --git a/skinStyles/extensions/MultimediaViewer/mmv.less b/skinStyles/extensions/MultimediaViewer/mmv.less
@@ -602,7 +602,7 @@
 // Only apply background color when scroll up
 .mw-mmv-post-image {
 	min-height: @mmv-height-abovethefold;
-	color: #fff;
+	color: var( --color-inverted );
 	background-color: transparent;
 	border-top-left-radius: var( --border-radius--large );
 	border-top-right-radius: var( --border-radius--large );

diff --git a/skinStyles/extensions/Scribunto/ext.scribunto.edit.less b/skinStyles/extensions/Scribunto/ext.scribunto.edit.less
@@ -17,7 +17,7 @@
 		padding: var( --space-xs ) var( --space-sm );
 		margin: var( --space-xs ) 0;
 		font-weight: var( --font-weight-medium );
-		color: #fff;
+		color: var( --color-inverted );
 		cursor: pointer;
 		background-color: var( --color-destructive );
 		border-radius: var( --border-radius--small );

diff --git a/skinStyles/extensions/SemanticMediaWiki/ext.jquery.atwho.less b/skinStyles/extensions/SemanticMediaWiki/ext.jquery.atwho.less
@@ -1,11 +1,11 @@
-/*
+/*
  * Citizen
  *
  * SkinStyles for Extension:SemanticMediaWiki
  * Module: ext.jquery.atwho
  * Version: 4.0.2 (0fcdfce)
  *
- * Date: 2022-10-20
+ * Date: 2022-10-20
 */
 
 /* jquery/jquery.atwho.css */
@@ -27,7 +27,7 @@
 }
 
 .atwho-view .cur {
-	color: #fff;
+	color: var( --color-inverted );
 	background: var( --color-primary );
 }
 
@@ -36,7 +36,7 @@
 }
 
 .atwho-view .cur strong {
-	color: #fff;
+	color: var( --color-inverted );
 }
 
 .atwho-view ul li {

diff --git a/skinStyles/extensions/SemanticMediaWiki/ext.smw.ask.styles.less b/skinStyles/extensions/SemanticMediaWiki/ext.smw.ask.styles.less
@@ -75,7 +75,7 @@ div#ask legend {
 	padding: var( --space-md );
 	font-size: var( --font-size-small );
 	font-weight: var( --font-weight-medium );
-	color: #fff;
+	color: var( --color-inverted );
 	background-color: var( --color-primary );
 	border-color: var( --color-primary );
 	border-radius: var( --border-radius--medium );

diff --git a/skinStyles/extensions/SemanticMediaWiki/ext.smw.page.styles.less b/skinStyles/extensions/SemanticMediaWiki/ext.smw.page.styles.less
@@ -68,7 +68,7 @@
 }
 
 .smw-ui-pagination .page-link.link-active {
-	color: #fff;
+	color: var( --color-inverted );
 	background-color: var( --color-primary );
 	border-color: var( --color-primary );
 }

diff --git a/skinStyles/extensions/SemanticMediaWiki/ext.smw.style.less b/skinStyles/extensions/SemanticMediaWiki/ext.smw.style.less
@@ -257,20 +257,20 @@ a.smw-ask-action-btn-lgrey:active,
 
 .smw-ask-action-btn-lblue,
 a.smw-ask-action-btn-lblue:visited {
-	color: #fff;
+	color: var( --color-inverted );
 	background-color: var( --color-primary );
 	border-color: var( --color-primary );
 }
 
 a.smw-ask-action-btn-lblue:hover {
-	color: #fff;
+	color: var( --color-inverted );
 	background-color: var( --color-primary--hover );
 	border-color: var( --color-primary--hover );
 }
 
 // Added active state
 a.smw-ask-action-btn-lblue:active {
-	color: #fff;
+	color: var( --color-inverted );
 	background-color: var( --color-primary--active );
 	border-color: var( --color-primary--active );
 }
@@ -632,7 +632,7 @@ a.smw-ask-action-btn-lblue:active {
 
 .smw-indicator-accordion-tab .smw-indicator-accordion-tab-label {
   border-top: 1px solid #ebebeb;
-  border-bottom: 0px solid #fff;
+  border-bottom: 0px solid var( --color-inverted );
 }
 
 .smw-indicator-accordion-tab-close:hover {
@@ -641,11 +641,11 @@ a.smw-ask-action-btn-lblue:active {
 
 input:checked + .smw-indicator-accordion-tab-label {
   background: #333;
-  color: #fff;
+  color: var( --color-inverted );
 }
 
 input:checked + .smw-indicator-accordion-tab-label::after {
-    color: #fff;
+    color: var( --color-inverted );
     width: 20px;
     margin-top: 2px;
   -webkit-transform: rotate(90deg);

diff --git a/skinStyles/extensions/Translate/ext.translate.tag.languages.less b/skinStyles/extensions/Translate/ext.translate.tag.languages.less
@@ -54,7 +54,7 @@
 
 		&:hover,
 		&:active {
-			color: #fff;
+			color: var( --color-inverted );
 		}
 	}
 
@@ -86,7 +86,7 @@
 
 		&.mw-pt-languages-selected {
 			font-weight: var( --font-weight-normal );
-			color: #fff;
+			color: var( --color-inverted );
 			background-color: var( --color-primary--active );
 		}
 	}

diff --git a/skinStyles/extensions/VisualEditor/ext.visualEditor.core.less b/skinStyles/extensions/VisualEditor/ext.visualEditor.core.less
@@ -30,7 +30,7 @@
 /*
 .ve-ce-alienNode-highlights .ve-ce-focusableNode-highlight {
 	// background-color: #95d14f;
-	// background-image: repeating-linear-gradient( -45deg, #fff 0, #fff 5px, #95d14f 5px, #95d14f 10px );
+	// background-image: repeating-linear-gradient( -45deg, var( --color-inverted ) 0, var( --color-inverted ) 5px, #95d14f 5px, #95d14f 10px );
 }
 
 .ve-ce-surface-highlights-focused .ve-ce-alienNode-highlights .ve-ce-focusableNode-highlight {
@@ -151,7 +151,7 @@
 .ve-ce-surface-highlights-user-cursor-label {
 	font-weight: bold;
 	background: #a66;
-	color: #fff;
+	color: var( --color-inverted );
 	text-shadow: 0 0 1px #000;
 }
 */