Fix button colors, use the color-mix for the button hover colors.

WordPress · Sep 30, 2024 · 18a2013 · 18a2013
1 parent 5103180
commit 18a2013
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 52 deletions.
diff --git a/styles/06-morning.json b/styles/06-morning.json
@@ -201,9 +201,14 @@
 					"text": "var:preset|color|contrast",
 					"background": "var:preset|color|accent-1"
 				},
-				"border":{
-					"color": "var:preset|color|accent-1",
+				"border": {
 					"radius": "0px"
+				},
+				":hover": {
+					"color": {
+						"background": "color-mix(in srgb, var(--wp--preset--color--accent-1) 85%, transparent)",
+						"text": "var:preset|color|contrast"
+					}
 				}
 			},
 			"heading": {
@@ -246,24 +251,17 @@
 					}
 				}
 			},
-			"section-1": {
-				"elements": {
-					"button": {
-						"border": {
-							"color": "var:preset|color|contrast"
-						}
-					}
-				}
-			},
 			"section-2": {
 				"elements": {
 					"button": {
 						"color": {
 							"background": "var:preset|color|accent-1",
 							"text": "var:preset|color|contrast"
 						},
-						"border": {
-							"color": "var:preset|color|accent-1"
+						":hover": {
+							"color": {
+								"background": "color-mix(in srgb, var(--wp--preset--color--accent-1) 85%, transparent)"
+							}
 						}
 					}
 				}
@@ -272,11 +270,13 @@
 				"elements": {
 					"button": {
 						"color": {
-							"background": "var:preset|color|accent-2",
-							"text": "var:preset|color|contrast"
+							"background": "var:preset|color|contrast",
+							"text": "var:preset|color|base"
 						},
-						"border": {
-							"color": "var:preset|color|accent-2"
+						":hover": {
+							"color": {
+								"background": "color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent)"
+							}
 						}
 					}
 				}
@@ -293,11 +293,18 @@
 					},
 					"button": {
 						"color": {
-							"background": "var:preset|color|accent-2",
+							"background": "var:preset|color|accent-1",
 							"text": "var:preset|color|contrast"
 						},
-						"border": {
-							"color": "var:preset|color|accent-2"
+						":hover": {
+							"color": {
+								"background": "color-mix(in srgb, var(--wp--preset--color--accent-1) 85%, transparent)"
+						}
+					}
+					},
+					"link": {
+						"color": {
+							"text": "var:preset|color|base"
 						}
 					}
 				}
@@ -310,8 +317,19 @@
 						}
 					},
 					"button": {
-						"border": {
-							"color": "var:preset|color|base"
+						"color": {
+							"background": "var:preset|color|accent-1",
+							"text": "var:preset|color|contrast"
+						},
+						":hover": {
+								"color": {
+									"background": "color-mix(in srgb, var(--wp--preset--color--accent-1) 85%, transparent)"
+							}
+						}
+					},
+					"link": {
+						"color": {
+							"text": "var:preset|color|base"
 						}
 					}
 				}

diff --git a/styles/colors/06-morning.json b/styles/colors/06-morning.json
@@ -132,8 +132,11 @@
 					"text": "var:preset|color|contrast",
 					"background": "var:preset|color|accent-1"
 				},
-				"border":{
-					"color": "var:preset|color|accent-1"
+				":hover": {
+					"color": {
+						"background": "color-mix(in srgb, var(--wp--preset--color--accent-1) 85%, transparent)",
+						"text": "var:preset|color|contrast"
+					}
 				}
 			},
 			"heading": {
@@ -160,20 +163,37 @@
 					}
 				}
 			},
-			"section-1": {
+			"section-2": {
 				"elements": {
 					"button": {
 						"color": {
 							"background": "var:preset|color|accent-1",
 							"text": "var:preset|color|contrast"
 						},
-						"border": {
-							"color": "var:preset|color|accent-1"
+						":hover": {
+							"color": {
+								"background": "color-mix(in srgb, var(--wp--preset--color--accent-1) 85%, transparent)"
+							}
 						}
 					}
 				}
 			},
-			"section-2": {
+			"section-3": {
+				"elements": {
+					"button": {
+						"color": {
+							"background": "var:preset|color|contrast",
+							"text": "var:preset|color|base"
+						},
+						":hover": {
+							"color": {
+								"background": "color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent)"
+							}
+						}
+					}
+				}
+			},
+			"section-4": {
 				"color": {
 					"text": "var:preset|color|base"
 				},
@@ -185,47 +205,43 @@
 					},
 					"button": {
 						"color": {
-							"background": "var:preset|color|accent-2",
+							"background": "var:preset|color|accent-1",
 							"text": "var:preset|color|contrast"
 						},
-						"border": {
-							"color": "var:preset|color|accent-2"
+						":hover": {
+							"color": {
+								"background": "color-mix(in srgb, var(--wp--preset--color--accent-1) 85%, transparent)"
 						}
 					}
-				}
-			},
-			"section-3": {
-				"elements": {
-					"button": {
+					},
+					"link": {
 						"color": {
-							"background": "var:preset|color|accent-2",
-							"text": "var:preset|color|contrast"
-						},
-						"border": {
-							"color": "var:preset|color|accent-2"
+							"text": "var:preset|color|base"
 						}
 					}
 				}
 			},
-			"section-4": {
+			"section-5": {
 				"elements": {
 					"heading": {
 						"color": {
 							"text": "var:preset|color|base"
 						}
 					},
 					"button": {
-						"border": {
-							"color": "var:preset|color|base"
+						"color": {
+							"background": "var:preset|color|accent-1",
+							"text": "var:preset|color|contrast"
+						},
+						":hover": {
+								"color": {
+									"background": "color-mix(in srgb, var(--wp--preset--color--accent-1) 85%, transparent)"
+							}
 						}
-					}
-				}
-			},
-			"section-5": {
-				"elements": {
-					"button": {
-						"border": {
-							"color": "var:preset|color|contrast"
+					},
+					"link": {
+						"color": {
+							"text": "var:preset|color|base"
 						}
 					}
 				}