Merge pull request #652 from ProgressPlanner/filip/correct-css-var-name

Correct CSS color var name

Author: aristath

assets/css/page-widgets/suggested-tasks.css

@@ -154,7 +154,7 @@
 		&.prpl-column-content {
 			padding: 20px;
 			border-radius: var(--prpl-border-radius-big);
-			background-color: var(--background-content);
+			background-color: var(--prpl-background-content);
 		}
 
 		.prpl-note {

assets/css/variables-color.css

@@ -94,4 +94,7 @@
 	--prpl-color-text-placeholder: var(--prpl-color-ui-icon);
 	--prpl-color-text-dropdown: var(--prpl-color-text);
 	--prpl-color-field-shadow: var(--prpl-color-shadow-paper);
+
+	/* Badge */
+	--prpl-color-icon-missed-badge: var(--prpl-color-alert-error);
 }

assets/css/web-components/prpl-badge.css

@@ -76,7 +76,7 @@ prpl-badge {
 			justify-content: center;
 			width: 20px;
 			height: 20px;
-			background-color: var(--prpl-color-alert-error);
+			background-color: var(--prpl-color-icon-missed-badge);
 			border: 2px solid #fff;
 			border-radius: 50%;
 			position: absolute;

assets/js/web-components/prpl-big-counter.js

@@ -13,7 +13,8 @@ customElements.define(
 			content = content || this.getAttribute( 'content' );
 			backgroundColor =
 				backgroundColor || this.getAttribute( 'background-color' );
-			backgroundColor = backgroundColor || 'var(--background-content)';
+			backgroundColor =
+				backgroundColor || 'var(--prpl-background-content)';
 
 			const el = this;
 

views/page-widgets/content-activity.php

@@ -96,7 +96,7 @@
 <prpl-big-counter
 	number="<?php echo \esc_html( \number_format_i18n( (int) $prpl_activities_count['all'] ) ); ?>"
 	content="<?php \esc_attr_e( 'pieces of content managed', 'progress-planner' ); ?>"
-	background-color="var(--background-content)"
+	background-color="var(--prpl-background-content)"
 ></prpl-big-counter>
 
 <div class="prpl-graph-wrapper">