Merge pull request #123 from moderntribe/feature/MOOSE-51/color-props

[MOOSE-51]: Color Names

wp-content/themes/core/assets/pcss/actions/_variables.pcss

@@ -17,7 +17,7 @@ body {
 	 * ----------------------------------------------------------------------- */
 
 	--themed-link-text-color: var(--color-black);
-	--themed-link-hover-text-color: var(--color-brand-primary);
+	--themed-link-hover-text-color: var(--color-royal-blue);
 }
 
 /* -------------------------------------------------------------------------
@@ -26,7 +26,7 @@ body {
  *
  * ------------------------------------------------------------------------- */
 
-.has-brand-secondary-background-color {
+.has-jacksons-purple-background-color {
 	--themed-link-text-color: var(--color-white);
-	--themed-link-hover-text-color: var(--color-brand-primary);
+	--themed-link-hover-text-color: var(--color-royal-blue);
 }

wp-content/themes/core/assets/pcss/color/_variables.pcss

@@ -11,16 +11,14 @@
 body {
 
 	/* -----------------------------------------------------------------------
-	 * Brand Colors
+	 * Brand Colors:
+	 * When assigning brand colors, please use color names rather than primary
+	 * or secondary, etc.
+	 * Color Naming Site: https://chir.ag/projects/name-that-color/
 	 * ----------------------------------------------------------------------- */
 
-	--color-brand-primary: var(--wp--preset--color--brand-primary);
-
-	/* -----------------------------------------------------------------------
-	 * Brand: Secondary
-	 * ----------------------------------------------------------------------- */
-
-	--color-brand-secondary: var(--wp--preset--color--brand-secondary);
+	--color-royal-blue: var(--wp--preset--color--royal-blue);
+	--color-jacksons-purple: var(--wp--preset--color--jacksons-purple);
 
 	/* -----------------------------------------------------------------------
 	 * Neutral: Grey

wp-content/themes/core/blocks/core/button/_variables.pcss

@@ -11,16 +11,16 @@
 /* @TODO: Add documentation on setting up theming to properly utilize */
 
 body {
-	--themed-button-background-color: var(--color-brand-primary);
+	--themed-button-background-color: var(--color-royal-blue);
 	--themed-button-border-color: transparent;
 	--themed-button-text-color: var(--color-white);
 	--themed-button-icon: var(--icon-chevron-right-white);
-	--themed-button-icon-color: var(--color-brand-primary);
+	--themed-button-icon-color: var(--color-royal-blue);
 	--themed-button-hover-background-color: var(--color-black);
 	--themed-button-hover-border-color: transparent;
 	--themed-button-hover-text-color: var(--color-white);
 	--themed-button-hover-icon: var(--icon-chevron-right-white);
-	--themed-button-hover-icon-color: var(--color-brand-primary);
+	--themed-button-hover-icon-color: var(--color-royal-blue);
 }
 
 /* CASE: Secondary Button Properties */
@@ -45,7 +45,7 @@ body {
  *
  * ------------------------------------------------------------------------- */
 
-.has-brand-secondary-background-color {
+.has-jacksons-purple-background-color {
 
 	/* CASE: Secondary Button Properties */
 	.is-style-secondary {

wp-content/themes/core/blocks/core/querypagination/style.pcss

@@ -43,7 +43,7 @@
 
 		/* Current page indicator */
 		&.current {
-			background-color: var(--color-brand-primary);
+			background-color: var(--color-royal-blue);
 			color: var(--color-white);
 		}
 	}
@@ -60,7 +60,7 @@
 
 		&:hover,
 		&:focus:not(:focus-visible) {
-			color: var(--color-brand-primary);
+			color: var(--color-royal-blue);
 
 			.wp-block-query-pagination-previous-arrow::before {
 				background-image: var(--icon-chevron-left-primary);

wp-content/themes/core/theme.json

@@ -25,13 +25,13 @@
 				},
 				{
 					"color": "#3050E5",
-					"name": "Brand Primary",
-					"slug": "brand-primary"
+					"name": "Royal Blue",
+					"slug": "royal-blue"
 				},
 				{
 					"color": "#2238a0",
-					"name": "Brand Secondary",
-					"slug": "brand-secondary"
+					"name": "Jacksons Purple",
+					"slug": "jacksons-purple"
 				},
 				{
 					"color": "#f5f5f5",