Merge pull request #4353 from Automattic/add/skatepark-color-palettes

Skatepark: Add alternative color palettes

blockbase/inc/customizer/wp-customize-color-palette-control.css

@@ -37,9 +37,8 @@
 	bottom: 5px;
 	right: 0;
 	left: 0;
-	text-indent: 5px;
-	line-height: 1.5;
-	padding-bottom: 1px;
+	line-height: 1.2;
+	padding: 2px 0 3px 5px;
 }
 
 .color-stripe {

skatepark/child-theme.json

@@ -29,6 +29,48 @@
 				"secondary": "var(--wp--preset--color--primary)",
 				"selection": "var(--wp--preset--color--primary)"
 			},
+			"colorPalettes": [
+				{
+					"label": "White",
+					"slug": "white",
+					"colors": {
+						"primary": "#000000",
+ 						"background": "#FFFFFF"
+					}
+				},
+				{
+					"label": "Red",
+					"slug": "red",
+					"colors": {
+						"primary": "#000000",
+						"background": "#F3B2A9"
+					}
+				},
+				{
+					"label": "Blue",
+					"slug": "blue",
+					"colors": {
+						"primary": "#000000",
+						"background": "#C9E4ED"
+					}
+				},
+				{
+					"label": "Blue/Cream",
+					"slug": "blue-cream",
+					"colors": {
+						"primary": "#F9EED4",
+						"background": "#252B39"
+					}
+				},
+				{
+					"label": "Green/Pink",
+					"slug": "green-pink",
+					"colors": {
+						"primary": "#F7B9A9",
+						"background": "#153232"
+					}
+				}
+			],
 			"fontsToLoadFromGoogle": [
 				"family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900"
 			],

skatepark/theme.json

@@ -103,36 +103,43 @@
 			},
 			"colorPalettes": [
 				{
-					"label": "Featured",
-					"slug": "palette-1",
+					"label": "White",
+					"slug": "white",
 					"colors": {
-						"primary": "#C8133E",
-						"secondary": "#4E2F4B",
-						"foreground": "#1D1E1E",
-						"background": "#FFFFFF",
-						"selection": "#F9F9F9"
+						"primary": "#000000",
+						"background": "#FFFFFF"
 					}
 				},
 				{
-					"label": "Featured",
-					"slug": "palette-2",
+					"label": "Red",
+					"slug": "red",
 					"colors": {
-						"primary": "#35845D",
-						"secondary": "#233252",
-						"foreground": "#242527",
-						"background": "#EEF4F7",
-						"selection": "#F9F9F9"
+						"primary": "#000000",
+						"background": "#F3B2A9"
 					}
 				},
 				{
-					"label": "Featured",
-					"slug": "palette-3",
+					"label": "Blue",
+					"slug": "blue",
 					"colors": {
-						"primary": "#9FD3E8",
-						"secondary": "#FBE6AA",
-						"foreground": "#FFFFFF",
-						"background": "#1F2527",
-						"selection": "#364043"
+						"primary": "#000000",
+						"background": "#C9E4ED"
+					}
+				},
+				{
+					"label": "Blue/Cream",
+					"slug": "blue-cream",
+					"colors": {
+						"primary": "#F9EED4",
+						"background": "#252B39"
+					}
+				},
+				{
+					"label": "Green/Pink",
+					"slug": "green-pink",
+					"colors": {
+						"primary": "#F7B9A9",
+						"background": "#153232"
 					}
 				}
 			],