Global Styles: Add CSS vars for root level settings

lib/class-wp-theme-json.php

@@ -833,6 +833,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
@@ -923,20 +943,23 @@ private function get_css_variables() {
 		if ( ! isset( $this->theme_json['settings'] ) ) {
 			return $stylesheet;
 		}
-
 		$metadata = self::get_blocks_metadata();
 		foreach ( $this->theme_json['settings'] as $block_selector => $settings ) {
 			if ( empty( $metadata[ $block_selector ]['selector'] ) ) {
 				continue;
 			}
 			$selector = $metadata[ $block_selector ]['selector'];
-
 			$declarations = self::compute_preset_vars( array(), $settings );
 			$declarations = self::compute_theme_vars( $declarations, $settings );
 
 			// Attach the ruleset for style and custom properties.
 			$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);
 	}
 }