Global Styles: Add CSS vars for root level settings

lib/class-wp-theme-json.php

@@ -693,6 +693,26 @@ private static function compute_preset_vars( $declarations, $settings ) {
 		return $declarations;
 	}
 
+	/**
+	 * Takes the root level settings from theme JSON and creates variables for them.
+	 *
+	 * @param array $declarations Holds the existing declarations.
+	 * @param array $settings Settings to process.
+	 *
+	 * @return array Returns the modified $declarations.
+	 */
+	private static function compute_root_vars( $declarations, $settings ) {
+		$root_values = gutenberg_experimental_get( $settings, array( 'root' ) );
+		$css_vars      = self::flatten_tree( $root_values );
+		foreach ( $css_vars as $key => $value ) {
+			$declarations[] = array(
+				'name'  => '--wp--style--' . $key,
+				'value' => $value,
+			);
+		}
+		return $declarations;
+	}
+
 	/**
 	 * Given an array of settings, it extracts the CSS Custom Properties
 	 * for the custom values and adds them to the $declarations
@@ -797,6 +817,10 @@ private function get_css_variables( $nodes ) {
 			$stylesheet .= self::to_ruleset( $selector, $declarations );
 		}
 
+		// Create variables for root level settings
+		$declarations = self::compute_root_vars( array(), $this->theme_json['styles'] );
+		$stylesheet .= self::to_ruleset( ':root', $declarations );
+
 		return $stylesheet;
 	}
 

packages/block-library/src/calendar/style.scss

@@ -4,7 +4,7 @@
 	th,
 	tbody td {
 		padding: 0.25em;
-		border: 1px solid $gray-300;
+		border: 1px solid var(--wp--style--color--text, $gray-300);
 	}
 
 	tfoot td {
@@ -17,8 +17,9 @@
 	}
 
 	table th {
+		color: var(--wp--style--color--background);
 		font-weight: 400;
-		background: $gray-300;
+		background: var(--wp--style--color--text, $gray-300);
 	}
 
 	a {
@@ -27,6 +28,6 @@
 
 	table tbody,
 	table caption {
-		color: #40464d;
+		color: var(--wp--style--color--text, #40464d);
 	}
 }