Block Canvas: Update background and foreground color slugs to base and contrast (#6892)

* Block Canvas: Update background and foreground color slugs based on the theme development guideline.

* Block Canvas: Order color slugs in alphabetical order

block-canvas/style.css

@@ -34,7 +34,7 @@ GNU General Public License for more details.
  */
 .wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
 	background-color: var(--wp--preset--color--secondary);
-	color: var(--wp--preset--color--background);
+	color: var(--wp--preset--color--base);
 	border-color: var(--wp--preset--color--secondary);
 }
 

block-canvas/theme.json

@@ -1,123 +1,116 @@
 {
 	"version": 2,
-    "$schema": "https://schemas.wp.org/trunk/theme.json",
-    "settings": {
-        "appearanceTools": true,
-        "useRootPaddingAwareAlignments": true,
-        "color": {
-            "palette": [
-                {
-                    "color": "#000000",
-                    "name": "Primary",
-                    "slug": "primary"
-                },
-                {
-                    "color": "#006ba1",
-                    "name": "Secondary",
-                    "slug": "secondary"
-                },
-                {
-                    "color": "#333333",
-                    "name": "Foreground",
-                    "slug": "foreground"
-                },
-                {
-                    "color": "#ffffff",
-                    "name": "Background",
-                    "slug": "background"
-                },
-                {
-                    "color": "#F0F0F0",
-                    "name": "Tertiary",
-                    "slug": "tertiary"
-                }
-            ]
-        },
-        "layout": {
-            "contentSize": "620px",
-            "wideSize": "1000px"
-        },
-        "spacing": {
-            "units": [
-                "%",
-                "px",
-                "em",
-                "rem",
-                "vh",
-                "vw"
-            ]
-        },
-        "typography": {
+	"$schema": "https://schemas.wp.org/trunk/theme.json",
+	"settings": {
+		"appearanceTools": true,
+		"useRootPaddingAwareAlignments": true,
+		"color": {
+			"palette": [
+				{
+					"color": "#ffffff",
+					"name": "Base",
+					"slug": "base"
+				},
+				{
+					"color": "#333333",
+					"name": "Contrast",
+					"slug": "contrast"
+				},
+				{
+					"color": "#000000",
+					"name": "Primary",
+					"slug": "primary"
+				},
+				{
+					"color": "#006ba1",
+					"name": "Secondary",
+					"slug": "secondary"
+				},
+				{
+					"color": "#F0F0F0",
+					"name": "Tertiary",
+					"slug": "tertiary"
+				}
+			]
+		},
+		"layout": {
+			"contentSize": "620px",
+			"wideSize": "1000px"
+		},
+		"spacing": {
+			"units": ["%", "px", "em", "rem", "vh", "vw"]
+		},
+		"typography": {
 			"fluid": true,
-            "fontFamilies": [
-                {
-                    "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
-                    "name": "System Font",
-                    "slug": "system-font"
-                }
-           ],
-            "fontSizes": [
-                {
-                    "fluid": {
-                        "min": "0.825rem",
-                        "max": "1.0625rem"
-                    },
-                    "name": "Small",
-                    "size": "1rem",
-                    "slug": "small"
-                },
-                {   
-                    "fluid": {
-                        "min": "1rem",
-                        "max": "1.25rem"
-                    },
-                    "name": "Medium",
-                    "size": "1.125rem",
-                    "slug": "medium"
-                },
-                {
-                    "fluid": {
-                        "min": "1.75rem",
-                        "max": "2rem"
-                    },
-                    "name": "Large",
-                    "size": "1.75rem",
-                    "slug": "large"
-                },
-                {
-                    "fluid": {
-                        "min": "2.5rem",
-                        "max": "3rem"
-                    },
-                    "name": "Extra Large",
-                    "size": "3rem",
-                    "slug": "x-large"
-                }
-            ]
-        }
-    },
-    "styles": {
-        "blocks": {
-            "core/code": {
-                "border": {
-                    "color": "var(--wp--preset--color--foreground)",
-                    "radius": "0.25rem",
-                    "style": "solid",
-                    "width": "2px"
-                },
-                "spacing": {
-                    "padding": {
-                        "bottom": "var(--wp--preset--spacing--50)",
-                        "left": "var(--wp--preset--spacing--50)",
-                        "right": "var(--wp--preset--spacing--50)",
-                        "top": "var(--wp--preset--spacing--50)"
-                    }
-                },
-                "typography": {
-                    "fontFamily": "monospace"
-                }
-            },
-            "core/comment-author-name": {
+			"fontFamilies": [
+				{
+					"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+					"name": "System Font",
+					"slug": "system-font"
+				}
+			],
+			"fontSizes": [
+				{
+					"fluid": {
+						"min": "0.825rem",
+						"max": "1.0625rem"
+					},
+					"name": "Small",
+					"size": "1rem",
+					"slug": "small"
+				},
+				{
+					"fluid": {
+						"min": "1rem",
+						"max": "1.25rem"
+					},
+					"name": "Medium",
+					"size": "1.125rem",
+					"slug": "medium"
+				},
+				{
+					"fluid": {
+						"min": "1.75rem",
+						"max": "2rem"
+					},
+					"name": "Large",
+					"size": "1.75rem",
+					"slug": "large"
+				},
+				{
+					"fluid": {
+						"min": "2.5rem",
+						"max": "3rem"
+					},
+					"name": "Extra Large",
+					"size": "3rem",
+					"slug": "x-large"
+				}
+			]
+		}
+	},
+	"styles": {
+		"blocks": {
+			"core/code": {
+				"border": {
+					"color": "var(--wp--preset--color--contrast)",
+					"radius": "0.25rem",
+					"style": "solid",
+					"width": "2px"
+				},
+				"spacing": {
+					"padding": {
+						"bottom": "var(--wp--preset--spacing--50)",
+						"left": "var(--wp--preset--spacing--50)",
+						"right": "var(--wp--preset--spacing--50)",
+						"top": "var(--wp--preset--spacing--50)"
+					}
+				},
+				"typography": {
+					"fontFamily": "monospace"
+				}
+			},
+			"core/comment-author-name": {
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}
@@ -137,270 +130,270 @@
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}
 			},
-            "core/gallery": {
-                "spacing": {
-                    "margin": {
-                        "bottom": "var(--wp--preset--spacing--50)"
-                    }
-                }
-            },
-            "core/list": {
-                "spacing": {
-                    "padding": {
-                        "left": "var(--wp--preset--spacing--70)"
-                    }
-                }
-            },
-            "core/navigation": {
-                "elements": {
-                    "link": {
-                        "typography": {
-                            "textDecoration": "none"
-                        },
-                        ":hover": {
-                            "typography": {
-                                "textDecoration": "underline"
-                            }
-                        }
-                    }
-                }
-            },
-            "core/post-author-name": {
-                "elements": {
-                    "link": {
-                        "typography": {
-                            "textDecoration": "none"
-                        },
-                        ":hover": {
-                            "typography": {
-                                "textDecoration": "underline"
-                            }
-                        }
-                    }
-                }
-            },
-            "core/post-date": {
-                "color": {
-                    "text": "var(--wp--preset--color--foreground)"
-                },
-                "typography": {
-                    "fontSize": "var(--wp--preset--font-size--small)"
-                },
-                "elements": {
-                    "link": {
-                        "typography": {
-                            "textDecoration": "none"
-                        },
-                        ":hover": {
-                            "typography": {
-                                "textDecoration": "underline"
-                            }
-                        }
-                    }
-                }
-            },
-            "core/post-title": {
-                "spacing": {
-                    "margin": {
-                        "bottom": "0"
-                    }
-                },
-                "elements": {
-                    "link": {
-                        "typography": {
-                            "textDecoration": "none"
-                        },
-                        ":hover": {
-                            "typography": {
-                                "textDecoration": "underline"
-                            }
-                        }
-                    }
-                }
-            },
-            "core/pullquote": {
-                "border": {
-                    "color": "var(--wp--preset--color--foreground)",
-                    "style": "solid",
-                    "width": "1px 0"
-                },
-                "spacing": {
-                    "padding": {
-                        "bottom": "var(--wp--preset--spacing--50)",
-                        "left": "var(--wp--preset--spacing--50)",
-                        "right": "var(--wp--preset--spacing--50)",
-                        "top": "var(--wp--preset--spacing--50)"
-                    }
-                },
-                "typography": {
-                    "fontSize": "var(--wp--preset--font-size--large)",
-                    "fontStyle": "italic"
-                }
-            },
-            "core/quote": {
-                "border": {
-                    "color": "var(--wp--preset--color--primary)",
-                    "style": "solid",
-                    "width": "0 0 0 1px"
-                },
-                "spacing": {
-                    "padding": {
-                        "left": "var(--wp--preset--spacing--50)"
-                    }
-                },
-                "typography": {
-                    "fontStyle": "normal"
-                }
-            },
-            "core/search": {
-                "typography": {
-                    "fontSize": "var(--wp--preset--font-size--medium)",
-                    "lineHeight": "1.6"
-                }
-            },
-            "core/separator": {
-                "border": {
-                    "color": "currentColor",
-                    "style": "solid",
-                    "width": "0 0 1px 0"
-                },
-                "color": {
-                    "text": "var(--wp--preset--color--foreground)"
-                }
-            },
-            "core/site-tagline": {
-                "typography": {
+			"core/gallery": {
+				"spacing": {
+					"margin": {
+						"bottom": "var(--wp--preset--spacing--50)"
+					}
+				}
+			},
+			"core/list": {
+				"spacing": {
+					"padding": {
+						"left": "var(--wp--preset--spacing--70)"
+					}
+				}
+			},
+			"core/navigation": {
+				"elements": {
+					"link": {
+						"typography": {
+							"textDecoration": "none"
+						},
+						":hover": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						}
+					}
+				}
+			},
+			"core/post-author-name": {
+				"elements": {
+					"link": {
+						"typography": {
+							"textDecoration": "none"
+						},
+						":hover": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						}
+					}
+				}
+			},
+			"core/post-date": {
+				"color": {
+					"text": "var(--wp--preset--color--contrast)"
+				},
+				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)"
-                }
-            },
-            "core/site-title": {
-                "typography": {
-                    "fontSize": "var(--wp--preset--font-size--medium)",
-                    "fontWeight": "700"
-                },
-                "elements": {
-                    "link": {
-                        "typography": {
-                            "textDecoration": "none"
-                        },
-                        ":hover": {
-                            "typography": {
-                                "textDecoration": "underline"
-                            }
-                        }
-                    }
-                }
-            }
-        },
-        "color": {
-            "background": "var(--wp--preset--color--background)",
-            "text": "var(--wp--preset--color--foreground)"
-        },
-        "elements": {
-            "button": {
+				},
+				"elements": {
+					"link": {
+						"typography": {
+							"textDecoration": "none"
+						},
+						":hover": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						}
+					}
+				}
+			},
+			"core/post-title": {
+				"spacing": {
+					"margin": {
+						"bottom": "0"
+					}
+				},
+				"elements": {
+					"link": {
+						"typography": {
+							"textDecoration": "none"
+						},
+						":hover": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						}
+					}
+				}
+			},
+			"core/pullquote": {
+				"border": {
+					"color": "var(--wp--preset--color--contrast)",
+					"style": "solid",
+					"width": "1px 0"
+				},
+				"spacing": {
+					"padding": {
+						"bottom": "var(--wp--preset--spacing--50)",
+						"left": "var(--wp--preset--spacing--50)",
+						"right": "var(--wp--preset--spacing--50)",
+						"top": "var(--wp--preset--spacing--50)"
+					}
+				},
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--large)",
+					"fontStyle": "italic"
+				}
+			},
+			"core/quote": {
+				"border": {
+					"color": "var(--wp--preset--color--primary)",
+					"style": "solid",
+					"width": "0 0 0 1px"
+				},
+				"spacing": {
+					"padding": {
+						"left": "var(--wp--preset--spacing--50)"
+					}
+				},
+				"typography": {
+					"fontStyle": "normal"
+				}
+			},
+			"core/search": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--medium)",
+					"lineHeight": "1.6"
+				}
+			},
+			"core/separator": {
+				"border": {
+					"color": "currentColor",
+					"style": "solid",
+					"width": "0 0 1px 0"
+				},
+				"color": {
+					"text": "var(--wp--preset--color--contrast)"
+				}
+			},
+			"core/site-tagline": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--small)"
+				}
+			},
+			"core/site-title": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--medium)",
+					"fontWeight": "700"
+				},
+				"elements": {
+					"link": {
+						"typography": {
+							"textDecoration": "none"
+						},
+						":hover": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						}
+					}
+				}
+			}
+		},
+		"color": {
+			"background": "var(--wp--preset--color--base)",
+			"text": "var(--wp--preset--color--contrast)"
+		},
+		"elements": {
+			"button": {
 				"border": {
 					"radius": "0.25rem"
 				},
 				"color": {
-                    "background": "var(--wp--preset--color--primary)",
-                    "text": "var(--wp--preset--color--background)"
+					"background": "var(--wp--preset--color--primary)",
+					"text": "var(--wp--preset--color--base)"
 				},
-                ":hover": {
+				":hover": {
 					"color": {
 						"background": "var(--wp--preset--color--secondary)",
-						"text": "var(--wp--preset--color--background)"
+						"text": "var(--wp--preset--color--base)"
+					}
+				},
+				":active": {
+					"color": {
+						"background": "var(--wp--preset--color--primary)",
+						"text": "var(--wp--preset--color--base)"
 					}
 				},
-                ":active": {
-                    "color": {
-                        "background": "var(--wp--preset--color--primary)",
-                        "text": "var(--wp--preset--color--background)"
-                    }
-                },
-                ":focus": {
-                    "color": {
-                        "background": "var(--wp--preset--color--primary)",
-                        "text": "var(--wp--preset--color--background)"
-                    },
-                    "outline": {
+				":focus": {
+					"color": {
+						"background": "var(--wp--preset--color--primary)",
+						"text": "var(--wp--preset--color--base)"
+					},
+					"outline": {
 						"color": "var(--wp--preset--color--primary)",
 						"offset": "2px",
 						"style": "dotted",
 						"width": "1px"
 					}
-                }
+				}
 			},
 			"heading": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--rubik)",
-                    "fontWeight": "400",
-                    "lineHeight": "1.125"
+					"fontWeight": "400",
+					"lineHeight": "1.125"
+				}
+			},
+			"h1": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--x-large)"
+				}
+			},
+			"h2": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--large)"
+				}
+			},
+			"h3": {
+				"typography": {
+					"fontSize": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.48rem) * 0.4808)), 1.75rem)"
+				}
+			},
+			"h4": {
+				"typography": {
+					"fontSize": "clamp(1.25rem, calc(1.25rem + ((1vw - 0.48rem) * 0.4808)), 1.5rem)"
+				}
+			},
+			"h5": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--medium)"
+				}
+			},
+			"h6": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--small)"
 				}
 			},
-            "h1": {
-                "typography": {
-                    "fontSize": "var(--wp--preset--font-size--x-large)"
-                }
-            },
-            "h2": {
-                "typography": {
-                    "fontSize": "var(--wp--preset--font-size--large)"
-                }
-            },
-            "h3": {
-                "typography": {
-                    "fontSize": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.48rem) * 0.4808)), 1.75rem)"
-                }
-            },
-            "h4": {
-                "typography": {
-                    "fontSize": "clamp(1.25rem, calc(1.25rem + ((1vw - 0.48rem) * 0.4808)), 1.5rem)"
-                }
-            },
-            "h5": {
-                "typography": {
-                    "fontSize": "var(--wp--preset--font-size--medium)"
-                }
-            },
-            "h6": {
-                "typography": {
-                    "fontSize": "var(--wp--preset--font-size--small)"
-                }
-            },
-            "link": {
-                "color": {
-                    "text": "var(--wp--preset--color--primary)"
-                },
-                ":hover": {
-                    "typography": {
-                        "textDecoration": "none"
-                    }
-                }
-            }
-        },
-        "spacing": {
-            "blockGap": "1.5rem",
-            "padding": {
-                "top": "var(--wp--preset--spacing--50)",
-                "bottom": "var(--wp--preset--spacing--50)",
-                "right": "var(--wp--preset--spacing--50)",
-                "left": "var(--wp--preset--spacing--50)"
-            }
-        },
-        "typography": {
-            "fontFamily": "var(--wp--preset--font-family--system-font)",
-            "fontSize": "var(--wp--preset--font-size--medium)",
-            "lineHeight": "1.6"
-        }
-    },
-    "templateParts": [
-        {
-            "area": "header",
-            "name": "header"
-        },
-        {
-            "area": "footer",
-            "name": "footer"
-        }
-    ]
-}
+			"link": {
+				"color": {
+					"text": "var(--wp--preset--color--primary)"
+				},
+				":hover": {
+					"typography": {
+						"textDecoration": "none"
+					}
+				}
+			}
+		},
+		"spacing": {
+			"blockGap": "1.5rem",
+			"padding": {
+				"top": "var(--wp--preset--spacing--50)",
+				"bottom": "var(--wp--preset--spacing--50)",
+				"right": "var(--wp--preset--spacing--50)",
+				"left": "var(--wp--preset--spacing--50)"
+			}
+		},
+		"typography": {
+			"fontFamily": "var(--wp--preset--font-family--system-font)",
+			"fontSize": "var(--wp--preset--font-size--medium)",
+			"lineHeight": "1.6"
+		}
+	},
+	"templateParts": [
+		{
+			"area": "header",
+			"name": "header"
+		},
+		{
+			"area": "footer",
+			"name": "footer"
+		}
+	]
+}