feat: add greys from WordPress to custom variables (#25)

Automattic · May 18, 2023 · 08f2d7b · 08f2d7b
1 parent 96e727b
commit 08f2d7b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/src/scss/_header.scss b/src/scss/_header.scss
@@ -18,8 +18,8 @@
 }
 
 .mobile-sidebar {
-	background: var( --wp--custom--background--mobile-menu );
-	color: var( --wp--custom--color--mobile-menu );
+	background: var( --wp--custom--color--mobile-menu-background );
+	color: var( --wp--custom--color--mobile-menu-text );
 	inset: 0 -100% 0 auto;
 	opacity: 0;
 	overflow: auto;

diff --git a/theme.json b/theme.json
@@ -141,12 +141,18 @@
 		},
 		"useRootPaddingAwareAlignments": true,
 		"custom": {
-			"background": {
-				"mobile-menu": "var( --wp--preset--color--contrast )",
-				"mobile-menu-overlay": "rgba( 0, 0, 0, 0.5 )"
-			},
 			"color": {
-				"mobile-menu": "var( --wp--preset--color--base )"
+				"gray-900": "#1e1e1e",
+				"gray-800": "#2f2f2f",
+				"gray-700": "#757575",
+				"gray-600": "#949494",
+				"gray-400": "#ccc",
+				"gray-300": "#ddd",
+				"gray-200": "#e0e0e0",
+				"gray-100": "#f0f0f0",
+				"mobile-menu-text": "var( --wp--preset--color--contrast )",
+				"mobile-menu-background": "var( --wp--custom--color--gray-900 )",
+				"mobile-menu-overlay": "rgba( 0, 0, 0, 0.5 )"
 			},
 			"line-height": {
 				"x-small": "1.5",