css variable approach to color annotations

hever/functions.php

@@ -10,6 +10,7 @@
  */
 
 if ( ! function_exists( 'hever_setup' ) ) :
+
 	/**
 	 * Sets up theme defaults and registers support for various WordPress features.
 	 *
@@ -53,6 +54,19 @@ if ( ! function_exists( 'hever_setup' ) ) :
 			)
 		);
 
+		// Editor color palette.
+		$color_annotations = get_theme_mod( 'colors_manager' )['colors'];
+		$primary          = ( empty( $color_annotations['link'] ) ) ? '#1279BE' : $color_annotations['link'];
+		$secondary        = ( empty( $color_annotations['fg1'] ) ) ? '#FFB302' : $color_annotations['fg1'];
+		$foreground       = ( empty( $color_annotations['txt'] ) ) ? '#303030' : $color_annotations['txt'];
+		$tertiary         = ( empty( $color_annotations['fg2'] ) ) ? '#C5C5C5' : $color_annotations['fg2'];
+		$background       = ( empty( $color_annotations['bg'] ) ) ? '#FFFFFF' : $color_annotations['bg'];
+
+		$foreground_low_contrast  = change_color_luminescence( $foreground, 10 );
+		$foreground_high_contrast = change_color_luminescence( $foreground, -10 );
+		$background_low_contrast  = change_color_luminescence( $background, -10 );
+		$background_high_contrast = change_color_luminescence( $background, 10 );
+
 		// Add child theme editor color pallete to match Sass-map variables in `_config-child-theme-deep.scss`.
 		add_theme_support(
 			'editor-color-palette',
@@ -60,42 +74,47 @@ if ( ! function_exists( 'hever_setup' ) ) :
 				array(
 					'name'  => __( 'Primary', 'hever' ),
 					'slug'  => 'primary',
-					'color' => '#1279BE',
+					'color' => $primary,
 				),
 				array(
 					'name'  => __( 'Secondary', 'hever' ),
 					'slug'  => 'secondary',
-					'color' => '#FFB302',
+					'color' => $secondary,
 				),
 				array(
-					'name'  => __( 'Dark Gray', 'hever' ),
-					'slug'  => 'foreground-dark',
-					'color' => '#101010',
+					'name'  => __( 'Tertiary', 'hever' ),
+					'slug'  => 'tertiary',
+					'color' => $tertiary,
 				),
 				array(
-					'name'  => __( 'Gray', 'hever' ),
+					'name'  => __( 'Foreground', 'hever' ),
 					'slug'  => 'foreground',
-					'color' => '#303030',
+					'color' => $foreground,
 				),
 				array(
-					'name'  => __( 'Light Gray', 'hever' ),
+					'name'  => __( 'Foreground Low Contrast', 'hever' ),
 					'slug'  => 'foreground-light',
-					'color' => '#757575',
+					'color' => $foreground_low_contrast,
+				),
+				array(
+					'name'  => __( 'Foreground High Contrast', 'hever' ),
+					'slug'  => 'foreground-dark',
+					'color' => $foreground_high_contrast,
 				),
 				array(
-					'name'  => __( 'Lighter Gray', 'varia' ),
-					'slug'  => 'background-dark',
-					'color' => '#C5C5C5',
+					'name'  => __( 'Background', 'hever' ),
+					'slug'  => 'background',
+					'color' => $background,
 				),
 				array(
-					'name'  => __( 'Subtle Gray', 'varia' ),
+					'name'  => __( 'Background High Contrast', 'hever' ),
 					'slug'  => 'background-light',
-					'color' => '#F8F8F8',
+					'color' => $background_high_contrast,
 				),
 				array(
-					'name'  => __( 'White', 'hever' ),
-					'slug'  => 'background',
-					'color' => '#FFFFFF',
+					'name'  => __( 'Background Low Contrast', 'hever' ),
+					'slug'  => 'background-light',
+					'color' => $background_low_contrast,
 				),
 			)
 		);

hever/inc/customize-preview-wpcom.js

@@ -0,0 +1,103 @@
+/**
+ * File wpcom-customize-preview.js.
+ *
+ * Instantly live-update customizer settings in the preview for improved user experience,
+ * targeting the updates needed to hide the page title on the homepage on WordPress.com.
+ *
+ * This file needs to avoid ESNext syntax to work in older browsers
+ */
+
+ // From https://gist.github.com/xenozauros/f6e185c8de2a04cdfecf
+ function hexToHSL( hex ) {
+	var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex );
+		r = parseInt( result[1], 16 );
+		g = parseInt( result[2], 16 );
+		b = parseInt( result[3], 16 );
+		r /= 255, g /= 255, b /= 255;
+	  var max = Math.max( r, g, b ), min = Math.min( r, g, b );
+	  var h, s, l = ( max + min ) / 2;
+	  if( max == min ){
+		h = s = 0; // achromatic
+	  } else {
+		var d = max - min;
+		s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+		switch( max ){
+		  case r: h = ( g - b ) / d + ( g < b ? 6 : 0 ); break;
+		  case g: h = ( b - r ) / d + 2; break;
+		  case b: h = ( r - g ) / d + 4; break;
+		}
+		h /= 6;
+	}
+	var HSL = new Object();
+	HSL['h'] = h;
+	HSL['s'] = s;
+	HSL['l'] = l;
+	return HSL;
+}
+
+function changeColorLuminescence( hex, amount ) {
+	var hsl = hexToHSL( hex );
+	return 'hsl( ' + hsl.h * 360 + ',' + hsl.s * 100 + '%,' + ( hsl.l * 100  + amount ) + '%)';
+}
+
+
+( function( $ ) {
+	// Hide Front Page Title
+	wp.customize( 'hide_front_page_title', function( value ) {
+		value.bind( function( to ) {
+			if ( true === to ) {
+				$( 'body' ).addClass( 'hide-homepage-title' );
+
+			} else {
+				$( 'body' ).removeClass( 'hide-homepage-title' );
+			}
+		} );
+	} );
+
+	// Since the plugin handles customizer preview updates via the postMessage transport,
+	// we need to manually override the "extra CSS" when a user selects a different color palette.
+	wp.customize( 'colors_manager[colors]', function( value ) {
+		value.bind( function( to ) {
+			var background = to.bg;
+			var foreground = to.txt;
+			var primary = to.link;
+			var secondary = to.fg1;
+			var border = to.fg2;
+
+			var backgroundLowContrast = changeColorLuminescence( background, -10 );
+			var backgroundHighContrast = changeColorLuminescence( background, 10 );
+			var foregroundLowContrast = changeColorLuminescence( foreground, 10 );
+			var foregroundHighContrast = changeColorLuminescence( foreground, -10 );
+			var borderLowContrast = changeColorLuminescence( border, 10 );
+			var borderHighContrast = changeColorLuminescence( border, -10 );
+			var primaryHover = changeColorLuminescence( primary, 10 );
+			var secondaryHover = changeColorLuminescence( secondary, 10 );
+			const extraCSS = ':root {' +
+					'--wp--preset--color--background: ' + background + ';' +
+					'--wp--preset--color--background-low-contrast: ' + backgroundLowContrast + ';' +
+					'--wp--preset--color--background-high-contrast: ' + backgroundHighContrast + ';' +
+					'--wp--preset--color--foreground: ' + foreground + ';' +
+					'--wp--preset--color--foreground-low-contrast: ' + foregroundLowContrast + ';' +
+					'--wp--preset--color--foreground-high-contrast: ' + foregroundHighContrast + ';' +
+					'--wp--preset--color--primary: ' + primary + ';' +
+					'--wp--preset--color--primary-hover: ' + primaryHover + ';' +
+					'--wp--preset--color--secondary: ' + secondary + ';' +
+					'--wp--preset--color--secondary-hover: ' + secondaryHover + ';' +
+					'--wp--preset--color--border: ' + border + ';' +
+					'--wp--preset--color--border-low-contrast: ' + borderLowContrast + ';' +
+					'--wp--preset--color--border-high-contrast: ' + borderHighContrast + ';' +
+				'}';
+
+			// Append an extra style element that overrides the previous extra CSS
+			if ( $('#custom-colors-extra-css').length ) {
+				$( '#custom-colors-extra-css' ).html( extraCSS );
+			} else {
+				$( 'head' ).append( '<style id="custom-colors-extra-css">' +  extraCSS + '</style>' );
+			}
+
+			if ( typeof cssVars !== 'undefined' ) {
+				cssVars( {} );
+			}
+		} );
+	} );
+} )( jQuery );

hever/inc/wpcom-colors.php

@@ -0,0 +1,164 @@
+<?php
+
+// Custom Colors: Hever
+function hever_define_color_annotations( $colors ) {
+	// Background Color
+	// --wp--preset--color--background
+	add_color_rule(
+		'bg',
+		$colors['background'],
+		array(
+
+			// This placeholder is needed to make the color annotations work
+			array( '.wp--preset--color--background', 'background-color' ),
+
+		),
+		__( 'Background Color' )
+	);
+
+	// Foreground Color
+	// --wp--preset--color--foreground
+	add_color_rule(
+		'txt',
+		$colors['foreground'],
+		array(
+
+			// This placeholder is needed to make the color annotations work
+			array( '.wp--preset--color--foreground', 'color' ),
+
+		),
+		__( 'Foreground Color' )
+	);
+
+	// Primary Color
+	// --wp--preset--color--primary
+	add_color_rule(
+		'link',
+		$colors['primary'],
+		array(
+
+			// This placeholder is needed to make the color annotations work
+			array( '.wp--preset--color--primary', 'color' ),
+
+		),
+		__( 'Primary Color' )
+	);
+
+	// Secondary Color
+	// --wp--preset--color--secondary
+	add_color_rule(
+		'fg1',
+		$colors['secondary'],
+		array(
+
+			// Text-color
+			array( '.wp--preset--color--secondary', 'color' ),
+
+		),
+		__( 'Secondary Color' )
+	);
+
+	// Tertiary Color
+	// --wp--preset--color--tertiary
+	add_color_rule(
+		'fg2',
+		$colors['tertiary'],
+		array(
+
+			// Text-color
+			array( '.wp--preset--color--tertiary', 'color' ),
+
+		),
+		__( 'Tertiary Color' )
+	);
+}
+
+/**
+ * Custom CSS.
+ * The plugin takes the body of this function and applies it in a style tag in the document head.
+ */
+function hever_custom_colors_extra_css() {
+	$colors_array = get_theme_mod( 'colors_manager' );
+	$background   = $colors_array['colors']['bg'];
+	$foreground   = $colors_array['colors']['txt'];
+	$primary      = $colors_array['colors']['link'];
+	$secondary    = $colors_array['colors']['fg1'];
+	$border       = $colors_array['colors']['fg2'];
+
+	$foreground_low_contrast  = change_color_luminescence( $foreground, 10 );
+	$foreground_high_contrast = change_color_luminescence( $foreground, -10 );
+	$background_low_contrast  = change_color_luminescence( $background, -10 );
+	$background_high_contrast = change_color_luminescence( $background, 10 );
+	$primary_hover            = change_color_luminescence( $primary, 10 );
+	$secondary_hover          = change_color_luminescence( $secondary, 10 );
+	$border_low_contrast  	  = change_color_luminescence( $border, 10 );
+	$border_high_contrast 	  = change_color_luminescence( $border, -10 );
+	?>
+
+	:root,
+	#editor .editor-styles-wrapper {
+		--wp--preset--color--background: <?php echo $background; ?>;
+		--wp--preset--color--background-low-contrast: <?php echo $background_low_contrast; ?>;
+		--wp--preset--color--background-high-contrast: <?php echo $background_high_contrast; ?>;
+		--wp--preset--color--foreground: <?php echo $foreground; ?>;
+		--wp--preset--color--foreground-low-contrast: <?php echo $foreground_low_contrast; ?>;
+		--wp--preset--color--foreground-high-contrast: <?php echo $foreground_high_contrast; ?>;
+		--wp--preset--color--primary: <?php echo $primary; ?>;
+		--wp--preset--color--primary-hover: <?php echo $primary_hover; ?>;
+		--wp--preset--color--secondary: <?php echo $secondary; ?>;
+		--wp--preset--color--secondary-hover: <?php echo $secondary_hover; ?>;
+		--wp--preset--color--border: <?php echo $border; ?>;
+		--wp--preset--color--border-low-contrast: <?php echo $border_low_contrast; ?>;
+		--wp--preset--color--border-high-contrast: <?php echo $border_high_contrast; ?>;
+	}
+
+	<?php
+}
+add_theme_support( 'custom_colors_extra_css', 'hever_custom_colors_extra_css' );
+
+/**
+ * Featured Hever Palettes
+ */
+// Light
+add_color_palette(
+	array(
+		'#FFFFFF',
+		'#1D1E1E',
+		'#C8133E',
+		'#4E2F4B',
+		'#F9F9F9',
+	), /* translators: This is the name for a color scheme */
+	'Light'
+);
+// Medium
+add_color_palette(
+	array(
+		'#EEF4F7',
+		'#242527',
+		'#35845D',
+		'#233252',
+		'#F9F9F9',
+	), /* translators: This is the name for a color scheme */
+	'Medium'
+);
+// Dark
+add_color_palette(
+	array(
+		'#1F2527',
+		'#FFFFFF',
+		'#9FD3E8',
+		'#FBE6AA',
+		'#364043',
+	), /* translators: This is the name for a color scheme */
+	'Dark'
+);
+
+hever_define_color_annotations(
+	array(
+		'background' => '#FFFFFF',
+		'foreground' => '#303030',
+		'primary'    => '#1279BE',
+		'secondary'  => '#FFB302',
+		'tertiary'   => '#C5C5C5',
+	)
+);

hever/inc/wpcom-editor-colors.php

@@ -0,0 +1,2 @@
+<?php
+require_once 'wpcom-colors.php';

hever/inc/wpcom.php

@@ -0,0 +1,17 @@
+<?php
+/**
+ * WordPress.com-specific functions and definitions.
+ *
+ * This file is centrally included from `wp-content/mu-plugins/wpcom-theme-compat.php`.
+ *
+ * @package Hever
+ */
+
+
+/**
+ * Bind JS handlers to instantly live-preview changes.
+ */
+function hever_wpcom_customize_preview_js() {
+	wp_enqueue_script( 'hever_wpcom_customize_preview', get_theme_file_uri( '/inc/customize-preview-wpcom.js' ), array( 'customize-preview' ), '1.0', true );
+}
+add_action( 'customize_preview_init', 'hever_wpcom_customize_preview_js' );

hever/sass/_config-child-theme-deep.scss

@@ -70,37 +70,37 @@ $config-global: (
 	/* Colors */
 	"color": (
 		"primary": (
-			"default": #1279BE,
-			"hover": #303030,
+			"default": var(--wp--preset--color--primary),
+			"hover": var(--wp--preset--color--primary-hover),
 		),
 		"secondary": (
-			"default": #FFB302,
-			"hover": #303030,
+			"default": var(--wp--preset--color--secondary),
+			"hover": var(--wp--preset--color--secondary-hover),
 		),
 		"foreground": (
-			"default": #303030,
-			"light": #757575, // must be accessible against background
-			"dark": #101010, // must be accessible against background
+			"default": var(--wp--preset--color--foreground),
+			"light": var(--wp--preset--color--foreground-low-contrast), // must be accessible against background
+			"dark": var(--wp--preset--color--foreground-high-contrast), // must be accessible against background
 		),
 		"background": (
-			"default": white,
-			"light": #F8F8F8, // must be accessible against foreground-default
-			"dark": #C5C5C5, // must be accessible against foreground-default
+			"default": var(--wp--preset--color--background),
+			"light": var(--wp--preset--color--background-high-contrast), // must be accessible against foreground-default
+			"dark": var(--wp--preset--color--background-low-contrast), // must be accessible against foreground-default
 		),
 		"border": (
-			"default": #C5C5C5,
-			"light": #F8F8F8,
-			"dark": #A5A5A5,
+			"default": var(--wp--preset--color--border),
+			"light": var(--wp--preset--color--border-low-contrast),
+			"dark": var(--wp--preset--color--border-high-contrast),
 		),
 		"alert": (
-			"success": #33b756,
-			"info": #1279BE,
-			"warning": #ecc700,
-			"error": #de3e33,
+			"success": var(--wp--preset--color--alert-success),
+			"info": var(--wp--preset--color--alert-info),
+			"warning": var(--wp--preset--color--alert-warning),
+			"error": var(--wp--preset--color--alert-error),
 		),
-		"text-selection": #A9D9F9,
-		"black": black,
-		"white": white,
+		"text-selection": var(--wp--preset--color--text-selection),
+		"black": var(--wp--preset--color--black),
+		"white": var(--wp--preset--color--white),
 	),
 
 	/* Spacing */

hever/sass/_global-variables.scss

@@ -0,0 +1,25 @@
+@mixin global-variables() {
+
+	/* Colors */
+	--wp--preset--color--primary: #1279BE;
+	--wp--preset--color--primary-hover: #303030;
+	--wp--preset--color--secondary: #FFB302;
+	--wp--preset--color--secondary-hover: #303030;
+	--wp--preset--color--foreground: #303030;
+	--wp--preset--color--foreground-low-contrast: #757575;
+	--wp--preset--color--foreground-high-contrast: #101010;
+	--wp--preset--color--background: white;
+	--wp--preset--color--background-low-contrast: #C5C5C5;
+	--wp--preset--color--background-high-contrast: #F8F8F8;
+	--wp--preset--color--border: #C5C5C5;
+	--wp--preset--color--border-low-contrast: #A5A5A5;
+	--wp--preset--color--border-high-contrast: #F8F8F8;
+	--wp--preset--color--text-selection: #A9D9F9;
+	--wp--preset--color--alert-success: #33b756;
+	--wp--preset--color--alert-info: #1279BE;
+	--wp--preset--color--alert-warning: #ecc700;
+	--wp--preset--color--alert-error: #de3e33;
+	--wp--preset--color--black: black;
+	--wp--preset--color--white: white;
+
+}

hever/sass/style-child-theme-editor.scss

@@ -8,6 +8,15 @@
  */
 @import "../../varia/sass/abstracts/imports";
 
+/**
+ * Global variables
+ */
+ @import "global-variables";
+
+:root, body {
+	@include global-variables();
+}
+
 /**
  * Child Theme Name
  */

hever/style-editor.css

@@ -120,6 +120,33 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Add font-family using CSS variables.
  * It also adds the proper fallback for browsers without support.
  */
+/**
+ * Global variables
+ */
+:root, body {
+	/* Colors */
+	--wp--preset--color--primary: #1279BE;
+	--wp--preset--color--primary-hover: #303030;
+	--wp--preset--color--secondary: #FFB302;
+	--wp--preset--color--secondary-hover: #303030;
+	--wp--preset--color--foreground: #303030;
+	--wp--preset--color--foreground-low-contrast: #757575;
+	--wp--preset--color--foreground-high-contrast: #101010;
+	--wp--preset--color--background: white;
+	--wp--preset--color--background-low-contrast: #C5C5C5;
+	--wp--preset--color--background-high-contrast: #F8F8F8;
+	--wp--preset--color--border: #C5C5C5;
+	--wp--preset--color--border-low-contrast: #A5A5A5;
+	--wp--preset--color--border-high-contrast: #F8F8F8;
+	--wp--preset--color--text-selection: #A9D9F9;
+	--wp--preset--color--alert-success: #33b756;
+	--wp--preset--color--alert-info: #1279BE;
+	--wp--preset--color--alert-warning: #ecc700;
+	--wp--preset--color--alert-error: #de3e33;
+	--wp--preset--color--black: black;
+	--wp--preset--color--white: white;
+}
+
 /**
  * Child Theme Name
  */
@@ -165,8 +192,8 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * - Reset the browser
  */
 body {
-	color: #303030;
-	background-color: white;
+	color: var(--wp--preset--color--foreground);
+	background-color: var(--wp--preset--color--background);
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 20px;
@@ -186,11 +213,11 @@ p {
 }
 
 a {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 a:hover {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 button,
@@ -253,7 +280,7 @@ blockquote.alignright footer {
 }
 
 figcaption {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.75614rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -355,7 +382,7 @@ object {
 }
 
 .wp-block-a8c-blog-posts .entry-title a {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -365,7 +392,7 @@ object {
 }
 
 .wp-block-a8c-blog-posts .entry-title a:hover {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 	text-decoration: underline;
 }
 
@@ -388,7 +415,7 @@ object {
 }
 
 .wp-block-a8c-blog-posts .more-link:hover, .wp-block-a8c-blog-posts .more-link:active {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 	text-decoration: none;
 }
 
@@ -402,7 +429,7 @@ object {
 
 .wp-block-a8c-blog-posts .entry-meta,
 .wp-block-a8c-blog-posts .cat-links {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957em;
 }
 
@@ -436,7 +463,7 @@ object {
 .wp-block-a8c-blog-posts .entry-meta a:hover, .wp-block-a8c-blog-posts .entry-meta a:active,
 .wp-block-a8c-blog-posts .cat-links a:hover,
 .wp-block-a8c-blog-posts .cat-links a:active {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 	text-decoration: none;
 }
 
@@ -466,13 +493,13 @@ object {
  */
 .wp-block-a8c-blog-posts + .button, .fse-template-part .main-navigation .button {
 	line-height: 1;
-	color: white;
+	color: var(--wp--preset--color--background);
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 5px;
 	border-width: 0;
 	text-decoration: none;
@@ -495,8 +522,8 @@ object {
 }
 
 .wp-block-a8c-blog-posts + .button:hover, .fse-template-part .main-navigation .button:hover, .wp-block-a8c-blog-posts + .button:focus, .fse-template-part .main-navigation .button:focus, .wp-block-a8c-blog-posts + .has-focus.button, .fse-template-part .main-navigation .has-focus.button {
-	color: white;
-	background-color: #303030;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 /**
@@ -524,13 +551,13 @@ object {
 
 /* Default Style */
 .wp-block-button__link {
-	color: white;
+	color: var(--wp--preset--color--background);
 	font-weight: bold;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1em;
 	line-height: 1;
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 5px;
 	padding: 16px 24px;
 	/* Outline Style */
@@ -538,8 +565,8 @@ object {
 }
 
 .wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link.has-focus {
-	color: white;
-	background-color: #303030;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 .wp-block-button__link.is-style-outline,
@@ -552,7 +579,7 @@ object {
 .is-style-outline .wp-block-button__link:hover,
 .is-style-outline .wp-block-button__link:focus,
 .is-style-outline .wp-block-button__link.has-focus {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 	background: transparent;
 }
 
@@ -563,20 +590,20 @@ object {
 
 /* Default Style */
 .button {
-	color: white;
+	color: var(--wp--preset--color--background);
 	font-weight: bold;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1em;
 	line-height: 1;
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 5px;
 	padding: 16px 24px;
 }
 
 .button:hover, .button:focus, .button.has-focus {
-	color: white;
-	background-color: #303030;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 .wp-block-columns .wp-block[data-align=full],
@@ -587,8 +614,8 @@ object {
 
 .wp-block-cover,
 .wp-block-cover-image {
-	background-color: #303030;
-	color: white;
+	background-color: var(--wp--preset--color--foreground);
+	color: var(--wp--preset--color--background);
 	min-height: 480px;
 	margin-top: inherit;
 	margin-bottom: inherit;
@@ -598,8 +625,8 @@ object {
 
 .wp-block-cover.has-background-dim,
 .wp-block-cover-image.has-background-dim {
-	background-color: #303030;
-	color: white;
+	background-color: var(--wp--preset--color--foreground);
+	color: var(--wp--preset--color--background);
 }
 
 .wp-block-cover .wp-block-cover__inner-container,
@@ -632,7 +659,7 @@ object {
 .wp-block-cover-image:not([class*='background-color']) .wp-block-cover-image-text,
 .wp-block-cover-image:not([class*='background-color']) .wp-block-cover-text,
 .wp-block-cover-image:not([class*='background-color']) .block-editor-block-list__block {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .wp-block-cover h2,
@@ -767,7 +794,7 @@ object {
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 	line-height: 1.6;
 }
@@ -837,11 +864,11 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote {
-	border-top-color: #C5C5C5;
+	border-top-color: var(--wp--preset--color--border);
 	border-top-width: 4px;
-	border-bottom-color: #C5C5C5;
+	border-bottom-color: var(--wp--preset--color--border);
 	border-bottom-width: 4px;
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 .wp-block-pullquote blockquote p {
@@ -863,7 +890,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-pullquote .wp-block-pullquote__citation,
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 	letter-spacing: normal;
 }
@@ -873,7 +900,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation,
@@ -883,11 +910,11 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote.is-style-solid-color:not(.has-background) {
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 }
 
 .wp-block-quote {
-	border-left-color: #1279BE;
+	border-left-color: var(--wp--preset--color--primary);
 	padding-left: 16px;
 }
 
@@ -919,7 +946,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote .wp-block-quote__citation {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957em;
 	letter-spacing: normal;
 }
@@ -933,14 +960,14 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-separator,
 hr {
-	border-bottom: 2px solid #C5C5C5;
+	border-bottom: 2px solid var(--wp--preset--color--border);
 	clear: both;
 }
 
 .wp-block-separator[style*="text-align:right"], .wp-block-separator[style*="text-align: right"],
 hr[style*="text-align:right"],
 hr[style*="text-align: right"] {
-	border-right-color: #C5C5C5;
+	border-right-color: var(--wp--preset--color--border);
 }
 
 .wp-block-separator.is-style-wide,
@@ -967,7 +994,7 @@ hr.is-style-dots.has-text-color:before {
 
 .wp-block-separator.is-style-dots:before,
 hr.is-style-dots:before {
-	color: #C5C5C5;
+	color: var(--wp--preset--color--border);
 }
 
 .has-background:not(.has-background-background-color) .wp-block-separator,
@@ -999,13 +1026,13 @@ table th,
 
 table.is-style-stripes tbody tr:nth-child(odd),
 .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
-	background-color: #F8F8F8;
-	color: #303030;
+	background-color: var(--wp--preset--color--border-low-contrast);
+	color: var(--wp--preset--color--foreground);
 }
 
 pre.wp-block-verse {
 	font-family: monospace, monospace;
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 /**
@@ -1013,7 +1040,7 @@ pre.wp-block-verse {
  * - Needs a special styles
  */
 .editor-post-title__block .editor-post-title__input {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
@@ -1024,42 +1051,42 @@ pre.wp-block-verse {
 
 .wp-block .has-primary-color,
 .has-primary-color {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .wp-block .has-secondary-color,
 .has-secondary-color {
-	color: #FFB302;
+	color: var(--wp--preset--color--secondary);
 }
 
 .wp-block .has-foreground-color,
 .has-foreground-color {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 .wp-block .has-foreground-light-color,
 .has-foreground-light-color {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 .wp-block .has-foreground-dark-color,
 .has-foreground-dark-color {
-	color: #101010;
+	color: var(--wp--preset--color--foreground-high-contrast);
 }
 
 .wp-block .has-background-light-color,
 .has-background-light-color {
-	color: #F8F8F8;
+	color: var(--wp--preset--color--background-high-contrast);
 }
 
 .wp-block .has-background-dark-color,
 .has-background-dark-color {
-	color: #C5C5C5;
+	color: var(--wp--preset--color--background-low-contrast);
 }
 
 .wp-block .has-background-color,
 .has-background-color {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
@@ -1075,50 +1102,50 @@ pre.wp-block-verse {
 
 .wp-block .has-primary-background-color,
 .has-primary-background-color {
-	background-color: #1279BE;
-	color: white;
+	background-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 }
 
 .wp-block .has-secondary-background-color,
 .has-secondary-background-color {
-	background-color: #FFB302;
-	color: white;
+	background-color: var(--wp--preset--color--secondary);
+	color: var(--wp--preset--color--background);
 }
 
 .wp-block .has-foreground-background-color,
 .has-foreground-background-color {
-	background-color: #303030;
-	color: white;
+	background-color: var(--wp--preset--color--foreground);
+	color: var(--wp--preset--color--background);
 }
 
 .wp-block .has-foreground-light-background-color,
 .has-foreground-light-background-color {
-	background-color: #757575;
-	color: white;
+	background-color: var(--wp--preset--color--foreground-low-contrast);
+	color: var(--wp--preset--color--background);
 }
 
 .wp-block .has-foreground-dark-background-color,
 .has-foreground-dark-background-color {
-	background-color: #101010;
-	color: white;
+	background-color: var(--wp--preset--color--foreground-high-contrast);
+	color: var(--wp--preset--color--background);
 }
 
 .wp-block .has-background-light-background-color,
 .has-background-light-background-color {
-	background-color: #F8F8F8;
-	color: #303030;
+	background-color: var(--wp--preset--color--background-high-contrast);
+	color: var(--wp--preset--color--foreground);
 }
 
 .wp-block .has-background-dark-background-color,
 .has-background-dark-background-color {
-	background-color: #C5C5C5;
-	color: #303030;
+	background-color: var(--wp--preset--color--background-low-contrast);
+	color: var(--wp--preset--color--foreground);
 }
 
 .wp-block .has-background-background-color,
 .has-background-background-color {
-	background-color: white;
-	color: #303030;
+	background-color: var(--wp--preset--color--background);
+	color: var(--wp--preset--color--foreground);
 }
 
 .is-small-text,
@@ -1294,7 +1321,7 @@ pre.wp-block-verse {
  * Set Jetpack form text color
  */
 .jetpack-contact-info-block .is-selected textarea.block-editor-plain-text {
-	color: black;
+	color: var(--wp--preset--color--black);
 }
 
 /**
@@ -1309,7 +1336,7 @@ pre.wp-block-verse {
 }
 
 .wp-block-a8c-blog-posts .entry-title a:active, .wp-block-a8c-blog-posts .entry-title a:focus, .wp-block-a8c-blog-posts .entry-title a:hover {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .wp-block-a8c-blog-posts .cat-links a,
@@ -1398,7 +1425,7 @@ pre.wp-block-verse {
 }
 
 .fse-template-part .main-navigation {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 .fse-template-part .main-navigation > div {
@@ -1415,7 +1442,7 @@ pre.wp-block-verse {
 }
 
 .fse-template-part .main-navigation #toggle:focus + #toggle-menu {
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -1531,7 +1558,7 @@ pre.wp-block-verse {
 
 @media only screen and (min-width: 560px) {
 	.fse-template-part .main-navigation > div > ul > li > .sub-menu {
-		background: white;
+		background: var(--wp--preset--color--background);
 		box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
 		left: 0;
 		top: 100%;
@@ -1548,7 +1575,7 @@ pre.wp-block-verse {
 }
 
 .fse-template-part .main-navigation a {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 	display: block;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
@@ -1563,11 +1590,11 @@ pre.wp-block-verse {
 }
 
 .fse-template-part .main-navigation a:link, .fse-template-part .main-navigation a:visited {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 .fse-template-part .main-navigation a:hover {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .fse-template-part .main-navigation .sub-menu {
@@ -1635,13 +1662,13 @@ pre.wp-block-verse {
 
 .fse-template-part .main-navigation .button {
 	line-height: 1;
-	color: white;
+	color: var(--wp--preset--color--background);
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 5px;
 	border-width: 0;
 	text-decoration: none;
@@ -1664,8 +1691,8 @@ pre.wp-block-verse {
 }
 
 .fse-template-part .main-navigation .button:hover, .fse-template-part .main-navigation .button:focus, .fse-template-part .main-navigation .has-focus.button {
-	color: white;
-	background-color: #303030;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 .fse-template-part .main-navigation .main-menu.footer-menu li a {

hever/style-rtl.css

@@ -200,13 +200,13 @@ input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
 	line-height: 1;
-	color: white;
+	color: var(--wp--preset--color--background);
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 5px;
 	border-width: 0;
 	text-decoration: none;
@@ -250,8 +250,8 @@ input:focus[type="submit"],
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
-	color: white;
-	background-color: #303030;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 /**
@@ -670,20 +670,20 @@ html {
 body {
 	font-size: 1rem;
 	font-weight: normal;
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 	text-align: right;
-	background-color: white;
+	background-color: var(--wp--preset--color--background);
 }
 
 /**
  * Links styles
  */
 a {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 a:hover {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 button,
@@ -707,12 +707,12 @@ a {
 }
 
 .screen-reader-text:focus {
-	background-color: white;
+	background-color: var(--wp--preset--color--background);
 	border-radius: 3px;
 	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 	clip: auto !important;
 	clip-path: none;
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 	display: block;
 	font-size: 1.15rem;
 	font-weight: bold;
@@ -783,11 +783,11 @@ footer {
 }
 
 ::selection {
-	background-color: #A9D9F9;
+	background-color: var(--wp--preset--color--text-selection);
 }
 
 ::-moz-selection {
-	background-color: #A9D9F9;
+	background-color: var(--wp--preset--color--text-selection);
 }
 
 /**
@@ -1070,8 +1070,8 @@ input[type="datetime"],
 input[type="datetime-local"],
 input[type="color"],
 textarea {
-	color: black;
-	border: 1px solid #C5C5C5;
+	color: var(--wp--preset--color--black);
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 5px;
 	padding: 16px;
 }
@@ -1092,12 +1092,12 @@ input[type="datetime"]:focus,
 input[type="datetime-local"]:focus,
 input[type="color"]:focus,
 textarea:focus {
-	color: black;
-	border-color: #303030;
+	color: var(--wp--preset--color--black);
+	border-color: var(--wp--preset--color--primary-hover);
 }
 
 select {
-	border: 1px solid #C5C5C5;
+	border: 1px solid var(--wp--preset--color--border);
 }
 
 textarea {
@@ -1112,7 +1112,7 @@ input[type=checkbox] + label {
 }
 
 figcaption {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.75614rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -1240,7 +1240,7 @@ object {
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-title a {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
@@ -1250,7 +1250,7 @@ object {
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 	text-decoration: underline;
 }
 
@@ -1268,7 +1268,7 @@ object {
 
 .wp-block-newspack-blocks-homepage-articles article .entry-meta,
 .wp-block-newspack-blocks-homepage-articles article .cat-links {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 }
 
@@ -1307,7 +1307,7 @@ object {
 .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
 .wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
 .wp-block-newspack-blocks-homepage-articles article .cat-links a:active {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 	text-decoration: none;
 }
 
@@ -1340,13 +1340,13 @@ input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
 	line-height: 1;
-	color: white;
+	color: var(--wp--preset--color--background);
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 5px;
 	border-width: 0;
 	text-decoration: none;
@@ -1390,8 +1390,8 @@ input:focus[type="submit"],
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
-	color: white;
-	background-color: #303030;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 /**
@@ -1434,19 +1434,19 @@ button[data-load-more-btn], .button {
 
 .wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color),
 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .wp-block-button.is-style-outline.wp-block-button__link:active,
 .wp-block-button.is-style-outline .wp-block-button__link:active {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .wp-block-button.is-style-outline.wp-block-button__link:hover, .wp-block-button.is-style-outline.wp-block-button__link:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-focus,
 .wp-block-button.is-style-outline .wp-block-button__link:hover,
 .wp-block-button.is-style-outline .wp-block-button__link:focus,
 .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 .wp-block-button.is-style-squared,
@@ -1455,14 +1455,14 @@ button[data-load-more-btn], .button {
 }
 
 .wp-block-code {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 	font-size: 0.86957rem;
 	padding: 16px;
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 }
 
 .wp-block-code pre {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 .wp-block-columns {
@@ -1527,7 +1527,7 @@ button[data-load-more-btn], .button {
 
 .wp-block-cover,
 .wp-block-cover-image {
-	background-color: #303030;
+	background-color: var(--wp--preset--color--foreground);
 	min-height: 480px;
 	margin-top: inherit;
 	margin-bottom: inherit;
@@ -1539,8 +1539,8 @@ button[data-load-more-btn], .button {
 
 .wp-block-cover.has-background-dim,
 .wp-block-cover-image.has-background-dim {
-	background-color: #303030;
-	color: white;
+	background-color: var(--wp--preset--color--foreground);
+	color: var(--wp--preset--color--background);
 }
 
 .wp-block-cover .wp-block-cover__inner-container,
@@ -1646,8 +1646,8 @@ button[data-load-more-btn], .button {
 }
 
 .wp-block-file .wp-block-file__button {
-	background-color: #1279BE;
-	color: white;
+	background-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 	font-size: 0.86957rem;
 	margin-right: 16px;
 	margin-left: 16px;
@@ -1661,7 +1661,7 @@ button[data-load-more-btn], .button {
 .wp-block-file a.wp-block-file__button:focus,
 .wp-block-file a.wp-block-file__button:hover,
 .wp-block-file a.wp-block-file__button:visited {
-	color: white;
+	color: var(--wp--preset--color--background);
 	opacity: .85;
 }
 
@@ -1672,7 +1672,7 @@ button[data-load-more-btn], .button {
 .wp-block-gallery .blocks-gallery-image figcaption,
 .wp-block-gallery .blocks-gallery-item figcaption {
 	margin: 0;
-	color: white;
+	color: var(--wp--preset--color--white);
 	font-size: 0.75614rem;
 }
 
@@ -1768,7 +1768,7 @@ h6, .h6 {
 }
 
 .wp-block-image figcaption {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.75614rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -1818,7 +1818,7 @@ img {
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 }
 
@@ -1856,7 +1856,7 @@ img {
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.75614rem;
 	line-height: 1.6;
 }
@@ -2033,8 +2033,8 @@ p.has-background {
 }
 
 .a8c-posts-list-item__featured span {
-	color: white;
-	background-color: #1279BE;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary);
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
@@ -2073,7 +2073,7 @@ p.has-background {
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 }
 
@@ -2082,7 +2082,7 @@ p.has-background {
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta a:hover, .a8c-posts-list__item .a8c-posts-list-item__meta a:active {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__edit-link {
@@ -2094,11 +2094,11 @@ p.has-background {
 }
 
 .wp-block-pullquote {
-	border-top-color: #C5C5C5;
+	border-top-color: var(--wp--preset--color--border);
 	border-top-width: 4px;
-	border-bottom-color: #C5C5C5;
+	border-bottom-color: var(--wp--preset--color--border);
 	border-bottom-width: 4px;
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 .wp-block-pullquote blockquote p {
@@ -2120,7 +2120,7 @@ p.has-background {
 .wp-block-pullquote .wp-block-pullquote__citation,
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 	letter-spacing: normal;
 }
@@ -2130,7 +2130,7 @@ p.has-background {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation,
@@ -2140,11 +2140,11 @@ p.has-background {
 }
 
 .wp-block-pullquote.is-style-solid-color:not(.has-background) {
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 }
 
 .wp-block-quote {
-	border-right-color: #1279BE;
+	border-right-color: var(--wp--preset--color--primary);
 	margin: 32px 0;
 	padding-right: 16px;
 	/**
@@ -2176,7 +2176,7 @@ p.has-background {
 .wp-block-quote .wp-block-quote__citation,
 .wp-block-quote cite,
 .wp-block-quote footer {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 	letter-spacing: normal;
 }
@@ -2203,7 +2203,7 @@ p.has-background {
 }
 
 .wp-block-quote[style*="text-align:right"], .wp-block-quote[style*="text-align: right"] {
-	border-left-color: #1279BE;
+	border-left-color: var(--wp--preset--color--primary);
 }
 
 .wp-block-quote.is-style-large, .wp-block-quote.is-large {
@@ -2224,7 +2224,7 @@ p.has-background {
 .wp-block-quote.is-style-large footer, .wp-block-quote.is-large .wp-block-quote__citation,
 .wp-block-quote.is-large cite,
 .wp-block-quote.is-large footer {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 	letter-spacing: normal;
 }
@@ -2237,14 +2237,14 @@ p.has-background {
 }
 
 hr {
-	border-bottom: 2px solid #C5C5C5;
+	border-bottom: 2px solid var(--wp--preset--color--border);
 	clear: both;
 	margin-right: auto;
 	margin-left: auto;
 }
 
 hr.wp-block-separator {
-	border-bottom: 2px solid #C5C5C5;
+	border-bottom: 2px solid var(--wp--preset--color--border);
 	/**
 		 * Block Options
 		 */
@@ -2267,7 +2267,7 @@ hr.wp-block-separator.is-style-dots.has-background:before, hr.wp-block-separator
 }
 
 hr.wp-block-separator.is-style-dots:before {
-	color: #C5C5C5;
+	color: var(--wp--preset--color--border);
 	font-size: 1.52087rem;
 	letter-spacing: 0.86957rem;
 	padding-right: 0.86957rem;
@@ -2325,12 +2325,12 @@ table th,
 
 table.is-style-stripes tbody tr:nth-child(odd),
 .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
-	background-color: #F8F8F8;
-	color: #303030;
+	background-color: var(--wp--preset--color--border-low-contrast);
+	color: var(--wp--preset--color--foreground);
 }
 
 .wp-block-video figcaption {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.75614rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -2420,36 +2420,36 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .has-primary-color {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .has-secondary-color {
-	color: #FFB302;
+	color: var(--wp--preset--color--secondary);
 }
 
 .has-foreground-color {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 .has-foreground-light-color {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 .has-foreground-dark-color {
-	color: #101010;
+	color: var(--wp--preset--color--foreground-high-contrast);
 }
 
 .has-background-light-color {
-	color: #F8F8F8;
+	color: var(--wp--preset--color--background-high-contrast);
 }
 
 .has-background-dark-color {
-	color: #C5C5C5;
+	color: var(--wp--preset--color--background-low-contrast);
 }
 
 .has-background-dim,
 .has-background-color {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
@@ -2465,51 +2465,51 @@ table.is-style-stripes tbody tr:nth-child(odd),
 
 .has-primary-background-color,
 .has-primary-background-color.has-background-dim {
-	background-color: #1279BE;
-	color: white;
+	background-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 }
 
 .has-secondary-background-color,
 .has-secondary-background-color.has-background-dim {
-	background-color: #FFB302;
-	color: white;
+	background-color: var(--wp--preset--color--secondary);
+	color: var(--wp--preset--color--background);
 }
 
 .has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
-	background-color: #303030;
-	color: white;
+	background-color: var(--wp--preset--color--foreground);
+	color: var(--wp--preset--color--background);
 }
 
 .has-foreground-light-background-color,
 .has-foreground-light-background-color.has-background-dim {
-	background-color: #757575;
-	color: white;
+	background-color: var(--wp--preset--color--foreground-low-contrast);
+	color: var(--wp--preset--color--background);
 }
 
 .has-foreground-dark-background-color,
 .has-foreground-dark-background-color.has-background-dim {
-	background-color: #101010;
-	color: white;
+	background-color: var(--wp--preset--color--foreground-high-contrast);
+	color: var(--wp--preset--color--background);
 }
 
 .has-background-light-background-color,
 .has-background-light-background-color.has-background-dim {
-	background-color: #F8F8F8;
-	color: #303030;
+	background-color: var(--wp--preset--color--background-high-contrast);
+	color: var(--wp--preset--color--foreground);
 }
 
 .has-background-dark-background-color,
 .has-background-dark-background-color.has-background-dim {
-	background-color: #C5C5C5;
-	color: #303030;
+	background-color: var(--wp--preset--color--background-low-contrast);
+	color: var(--wp--preset--color--foreground);
 }
 
 .has-background-background-color,
 .has-background-background-color.has-background-dim {
-	background-color: white;
-	color: #303030;
+	background-color: var(--wp--preset--color--background);
+	color: var(--wp--preset--color--foreground);
 }
 
 .is-small-text,
@@ -2680,11 +2680,11 @@ table.is-style-stripes tbody tr:nth-child(odd),
  * - Similar to Blocks but exist outside of the "current" editor context
  */
 .site-branding {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 .site-title {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
@@ -2701,7 +2701,7 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .site-title a:hover {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .site-description {
@@ -2719,7 +2719,7 @@ body:not(.fse-enabled) .site-description {
 }
 
 .main-navigation {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 .main-navigation > div {
@@ -2736,7 +2736,7 @@ body:not(.fse-enabled) .site-description {
 }
 
 .main-navigation #toggle:focus + #toggle-menu {
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -2852,7 +2852,7 @@ body:not(.fse-enabled) .site-description {
 
 @media only screen and (min-width: 560px) {
 	.main-navigation > div > ul > li > .sub-menu {
-		background: white;
+		background: var(--wp--preset--color--background);
 		box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
 		right: 0;
 		top: 100%;
@@ -2869,7 +2869,7 @@ body:not(.fse-enabled) .site-description {
 }
 
 .main-navigation a {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 	display: block;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
@@ -2884,11 +2884,11 @@ body:not(.fse-enabled) .site-description {
 }
 
 .main-navigation a:link, .main-navigation a:visited {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 .main-navigation a:hover {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .main-navigation .sub-menu {
@@ -2951,13 +2951,13 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .social-navigation a {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	display: inline-block;
 	padding: 0 8px;
 }
 
 .social-navigation a:hover {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .social-navigation svg {
@@ -2979,7 +2979,7 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .site-info {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.86957rem;
@@ -3007,7 +3007,7 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .site-info a:hover {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 .footer-navigation {
@@ -3029,7 +3029,7 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .footer-navigation .footer-menu {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	margin: 0;
 	padding-right: 0;
 }
@@ -3067,7 +3067,7 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .footer-navigation .footer-menu a:hover {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 body:not(.fse-enabled) .footer-menu a {
@@ -3082,7 +3082,7 @@ body:not(.fse-enabled) .footer-menu a {
 
 .entry-meta,
 .entry-footer {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	clear: both;
 	float: none;
 	font-size: 0.86957rem;
@@ -3119,7 +3119,7 @@ body:not(.fse-enabled) .footer-menu a {
 .entry-meta a:hover, .entry-meta a:active,
 .entry-footer a:hover,
 .entry-footer a:active {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 .entry-meta .svg-icon,
@@ -3320,13 +3320,13 @@ body:not(.fse-enabled) .footer-menu a {
  * Comment Lists
  */
 .comment-list {
-	border-bottom: 1px solid #C5C5C5;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 	padding-right: 0;
 	list-style: none;
 }
 
 .comment-list > li {
-	border-top: 1px solid #C5C5C5;
+	border-top: 1px solid var(--wp--preset--color--border);
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -3337,7 +3337,7 @@ body:not(.fse-enabled) .footer-menu a {
 }
 
 .comment-list .children > li {
-	border-top: 1px solid #C5C5C5;
+	border-top: 1px solid var(--wp--preset--color--border);
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -3384,7 +3384,7 @@ body:not(.fse-enabled) .footer-menu a {
 }
 
 .comment-meta .comment-metadata {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 	padding-left: 40px;
 }
 
@@ -3399,7 +3399,7 @@ body:not(.fse-enabled) .footer-menu a {
 }
 
 .comment-meta .comment-metadata a:hover, .comment-meta .comment-metadata a:active {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 @media only screen and (min-width: 560px) {
@@ -3589,8 +3589,8 @@ img#wpstats {
  * - Page specific styles
  */
 .sticky-post {
-	color: white;
-	background-color: #1279BE;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary);
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
@@ -3895,9 +3895,9 @@ body .widget_eu_cookie_law_widget.widget.top {
 }
 
 body .widget_eu_cookie_law_widget #eu-cookie-law {
-	background: white;
-	border: 1px solid #C5C5C5;
-	color: #303030;
+	background: var(--wp--preset--color--background);
+	border: 1px solid var(--wp--preset--color--border);
+	color: var(--wp--preset--color--foreground);
 	font-size: 0.86957rem;
 	line-height: inherit;
 	padding: 16px;
@@ -3910,18 +3910,18 @@ body .widget_eu_cookie_law_widget #eu-cookie-law {
 }
 
 body .widget_eu_cookie_law_widget #eu-cookie-law.negative {
-	background: #303030;
-	border-color: #101010;
-	color: white;
+	background: var(--wp--preset--color--foreground);
+	border-color: var(--wp--preset--color--foreground-high-contrast);
+	color: var(--wp--preset--color--background);
 }
 
 body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept {
-	background: white;
-	color: #303030;
+	background: var(--wp--preset--color--background);
+	color: var(--wp--preset--color--foreground);
 }
 
 body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept:hover, body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept:focus, body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept.has-focus {
-	background: #C5C5C5;
+	background: var(--wp--preset--color--background-low-contrast);
 }
 
 body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
@@ -4132,7 +4132,7 @@ body:not(.fse-enabled) #colophon {
 	.site-header .main-navigation > div > ul > li:hover > a,
 	.site-header .main-navigation > div > ul > li.focus > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item > a {
-		color: #1279BE;
+		color: var(--wp--preset--color--primary);
 	}
 	.site-header .main-navigation > div > ul > li:hover > ul,
 	.site-header .main-navigation > div > ul > li.focus > ul,
@@ -4143,7 +4143,7 @@ body:not(.fse-enabled) #colophon {
 	.site-header .main-navigation > div > ul > li:hover > ul:before,
 	.site-header .main-navigation > div > ul > li.focus > ul:before,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
-		border-bottom: 8px solid #1279BE;
+		border-bottom: 8px solid var(--wp--preset--color--primary);
 		border-right: 8px solid transparent;
 		border-left: 8px solid transparent;
 		content: "";
@@ -4154,8 +4154,8 @@ body:not(.fse-enabled) #colophon {
 	.site-header .main-navigation > div > ul > li:hover li > a,
 	.site-header .main-navigation > div > ul > li.focus li > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li > a {
-		background: #1279BE;
-		color: white;
+		background: var(--wp--preset--color--primary);
+		color: var(--wp--preset--color--background);
 	}
 	.site-header .main-navigation > div > ul > li:hover li:hover > a,
 	.site-header .main-navigation > div > ul > li:hover li.focus > a,
@@ -4166,7 +4166,7 @@ body:not(.fse-enabled) #colophon {
 	.site-header .main-navigation > div > ul > li.current-menu-item li:hover > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li.focus > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
-		background: #303030;
+		background: var(--wp--preset--color--primary-hover);
 	}
 	.site-header .social-navigation {
 		align-self: center;
@@ -4189,7 +4189,7 @@ body:not(.fse-enabled) #colophon {
  * Site Title
  */
 .site-description {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 .site-title + .site-description {
@@ -4238,7 +4238,7 @@ table td,
 table th,
 .wp-block-table td,
 .wp-block-table th {
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 }
 
 .wp-block-newspack-blocks-homepage-articles article .cat-links a,
@@ -4276,7 +4276,7 @@ table th,
 .singular .hentry .entry-header .entry-title:before, .singular .hentry .entry-header .entry-title:after,
 .page-title:before,
 .page-title:after {
-	background: #F8F8F8;
+	background: var(--wp--preset--color--border-low-contrast);
 	height: 1px;
 	content: "";
 	display: block;
@@ -4325,7 +4325,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 .wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
 .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
 .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .singular .hentry .entry-content > *:first-child.alignfull {
@@ -4433,7 +4433,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 .widget_jp_blogs_i_follow ul,
 .widget_top-click ul,
 .widget_upcoming_events_widget ul {
-	border-bottom: 1px solid #C5C5C5;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 	list-style: none;
 	padding-right: 0;
 }
@@ -4453,7 +4453,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 .widget_jp_blogs_i_follow li,
 .widget_top-click li,
 .widget_upcoming_events_widget li {
-	border-top: 1px solid #C5C5C5;
+	border-top: 1px solid var(--wp--preset--color--border);
 	padding: 8px 0;
 }
 
@@ -4564,7 +4564,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		bottom: 0;
 		left: 0;
 		right: 0;
-		background: white;
+		background: var(--wp--preset--color--background);
 		padding: 48px 16px 8px;
 		overflow-y: auto;
 		white-space: normal;

hever/style-woocommerce-rtl.css

@@ -254,13 +254,13 @@ body[class*="woocommerce"] #page .woocommerce input.button,
 body[class*="woocommerce"] #page .woocommerce .widget_shopping_cart .buttons a,
 body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a {
 	line-height: 1;
-	color: white;
+	color: var(--wp--preset--color--background);
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 5px;
 	border-width: 0;
 	text-decoration: none;
@@ -364,8 +364,8 @@ body[class*="woocommerce"] #page .cart .has-focus.button,
 body[class*="woocommerce"] #page a.has-focus.added_to_cart,
 body[class*="woocommerce"] #page .woocommerce .widget_shopping_cart .buttons a.has-focus,
 body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a.has-focus {
-	color: white;
-	background-color: #303030;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 /**
@@ -376,8 +376,8 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a.ha
  */
 body[class*="woocommerce"] #page span.onsale, #content .wc-block-grid .wc-block-grid__product-onsale {
 	border-radius: 100%;
-	background-color: #ecc700;
-	color: #101010;
+	background-color: var(--wp--preset--color--alert-warning);
+	color: var(--wp--preset--color--foreground-high-contrast);
 	font-size: 0.86957rem;
 	font-weight: 700;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@@ -413,7 +413,7 @@ body[class*="woocommerce"] #page .woocommerce-breadcrumb {
 	font-size: 1rem;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page .woocommerce-breadcrumb a {
@@ -430,60 +430,60 @@ body[class*="woocommerce"] #page .woocommerce-error,
 body[class*="woocommerce"] #page .woocommerce-warning {
 	padding: 16px 64px 16px 32px;
 	margin-bottom: 32px;
-	background-color: #F8F8F8;
-	color: #101010;
-	border-top-color: #1279BE;
+	background-color: var(--wp--preset--color--background-high-contrast);
+	color: var(--wp--preset--color--foreground-high-contrast);
+	border-top-color: var(--wp--preset--color--primary);
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--message,
 body[class*="woocommerce"] #page .woocommerce-notice--info {
-	color: #1279BE;
+	color: var(--wp--preset--color--alert-info);
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--success {
-	color: #33b756;
+	color: var(--wp--preset--color--alert-success);
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--error {
-	color: #de3e33;
+	color: var(--wp--preset--color--alert-error);
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--warning {
-	color: #ecc700;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 body[class*="woocommerce"] #page .woocommerce-message,
 body[class*="woocommerce"] #page .woocommerce-info {
-	border-top-color: #1279BE;
+	border-top-color: var(--wp--preset--color--alert-info);
 }
 
 body[class*="woocommerce"] #page .woocommerce-message:before,
 body[class*="woocommerce"] #page .woocommerce-info:before {
-	color: #1279BE;
+	color: var(--wp--preset--color--alert-info);
 }
 
 body[class*="woocommerce"] #page .woocommerce-success {
-	border-top-color: #33b756;
+	border-top-color: var(--wp--preset--color--alert-success);
 }
 
 body[class*="woocommerce"] #page .woocommerce-success:before {
-	color: #33b756;
+	color: var(--wp--preset--color--alert-success);
 }
 
 body[class*="woocommerce"] #page .woocommerce-error {
-	border-top-color: #de3e33;
+	border-top-color: var(--wp--preset--color--alert-error);
 }
 
 body[class*="woocommerce"] #page .woocommerce-error:before {
-	color: #de3e33;
+	color: var(--wp--preset--color--alert-error);
 }
 
 body[class*="woocommerce"] #page .woocommerce-warning {
-	border-top-color: #ecc700;
+	border-top-color: var(--wp--preset--color--alert-warning);
 }
 
 body[class*="woocommerce"] #page .woocommerce-warning:before {
-	color: #ecc700;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 /**
@@ -500,22 +500,22 @@ body[class*="woocommerce"] #page .woocommerce-password-strength {
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.strong {
-	background-color: #33b756;
+	background-color: var(--wp--preset--color--alert-success);
 	border-color: none;
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.good {
-	background-color: #ecc700;
+	background-color: var(--wp--preset--color--alert-warning);
 	border-color: none;
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.short {
-	background-color: #de3e33;
+	background-color: var(--wp--preset--color--alert-error);
 	border-color: none;
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.bad {
-	background-color: #de3e33;
+	background-color: var(--wp--preset--color--alert-error);
 	border-color: none;
 }
 
@@ -535,7 +535,7 @@ body[class*="woocommerce"] #page a.remove {
 }
 
 body[class*="woocommerce"] #page a.remove:hover {
-	color: white !important;
+	color: var(--wp--preset--color--background) !important;
 	background: red;
 }
 
@@ -543,7 +543,7 @@ body[class*="woocommerce"] #page a.remove:hover {
  * Small Note
  */
 body[class*="woocommerce"] #page small.note {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 	margin-top: 16px;
 }
@@ -552,17 +552,17 @@ body[class*="woocommerce"] #page small.note {
  * Star ratings
  */
 body[class*="woocommerce"] #page .star-rating::before {
-	color: #ecc700;
+	color: var(--wp--preset--color--alert-warning);
 	content: "\53\53\53\53\53";
 	opacity: 0.4;
 }
 
 body[class*="woocommerce"] #page .star-rating span {
-	color: #ecc700;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 body[class*="woocommerce"] #page p.stars a {
-	color: #ecc700;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 /**
@@ -570,7 +570,7 @@ body[class*="woocommerce"] #page p.stars a {
  */
 body[class*="woocommerce"] #page table.shop_table {
 	border-collapse: collapse;
-	border: 1px solid #C5C5C5;
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 0;
 	margin-bottom: 32px;
 }
@@ -587,32 +587,32 @@ body[class*="woocommerce"] #page table.shop_table td {
 }
 
 body[class*="woocommerce"] #page table.shop_table tr {
-	border-bottom: 1px solid #C5C5C5;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page table.shop_table tfoot td,
 body[class*="woocommerce"] #page table.shop_table tfoot th,
 body[class*="woocommerce"] #page table.shop_table tbody th {
-	border-top-color: #C5C5C5;
+	border-top-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page table.shop_attributes {
-	border-top-color: #C5C5C5;
+	border-top-color: var(--wp--preset--color--border);
 	border-top-style: solid;
 	margin-bottom: 32px;
-	border-bottom: 1px solid #C5C5C5;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page table.shop_attributes th {
 	padding: 8px;
-	border-bottom-color: #C5C5C5;
+	border-bottom-color: var(--wp--preset--color--border);
 	border-bottom-style: solid;
 	line-height: 1.6;
 }
 
 body[class*="woocommerce"] #page table.shop_attributes td {
 	font-style: inherit;
-	border-bottom-color: #C5C5C5;
+	border-bottom-color: var(--wp--preset--color--border);
 	border-bottom-style: solid;
 	line-height: 1.6;
 	padding: 8px;
@@ -626,7 +626,7 @@ body[class*="woocommerce"] #page table.shop_attributes td p {
 
 body[class*="woocommerce"] #page table.shop_attributes tr:nth-child(even) td,
 body[class*="woocommerce"] #page table.shop_attributes tr:nth-child(even) th {
-	background: #F8F8F8;
+	background: var(--wp--preset--color--background-high-contrast);
 }
 
 body[class*="woocommerce"] #page table.my_account_orders {
@@ -676,7 +676,7 @@ body[class*="woocommerce"] #page .woocommerce button.button:disabled[disabled]:h
 body[class*="woocommerce"] #page .woocommerce input.button.disabled:hover,
 body[class*="woocommerce"] #page .woocommerce input.button:disabled:hover,
 body[class*="woocommerce"] #page .woocommerce input.button:disabled[disabled]:hover {
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 }
 
 /**
@@ -721,17 +721,17 @@ body[class*="woocommerce"] #page .woocommerce input.button:disabled[disabled]:ho
 }
 
 #content .wc-block-grid .wc-block-grid__product-rating .star-rating span:before {
-	color: #FFB302;
+	color: var(--wp--preset--color--secondary);
 }
 
 #content .wc-block-grid .wc-block-grid__product-price {
-	color: #101010;
+	color: var(--wp--preset--color--foreground-high-contrast);
 	font-size: 1.15rem;
 	line-height: 1.125;
 }
 
 #content .wc-block-grid .wc-block-grid__product-price ins {
-	color: #33b756;
+	color: var(--wp--preset--color--alert-success);
 	font-weight: bold;
 	text-decoration: none;
 }
@@ -774,7 +774,7 @@ body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_tot
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals tr th,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells tr td,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells tr th {
-	border-top-color: #C5C5C5;
+	border-top-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .cart-collaterals .cart_totals > h2,
@@ -786,7 +786,7 @@ body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-se
 
 body[class*="woocommerce"] #page .cart-collaterals .cart_totals p small,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals p small {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 }
 
@@ -804,12 +804,12 @@ body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_tot
 
 body[class*="woocommerce"] #page .cart-collaterals .cart_totals table small,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals table small {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page .cart-collaterals .cart_totals .discount td,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals .discount td {
-	color: #ecc700;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 body[class*="woocommerce"] #page .cart-collaterals .shipping-calculator-button,
@@ -841,7 +841,7 @@ body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked ~
 }
 
 body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:focus + #toggle-cart {
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -856,8 +856,8 @@ body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked +
 
 @media only screen and (max-width: 559px) {
 	body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container {
-		background-color: #1279BE;
-		color: white;
+		background-color: var(--wp--preset--color--primary);
+		color: var(--wp--preset--color--background);
 		padding: 0;
 		width: 100%;
 	}
@@ -888,11 +888,11 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link > *:not
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .woocommerce-cart-subtotal {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .woocommerce-cart-count {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-weight: normal;
 }
 
@@ -910,8 +910,8 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .svg-ic
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
-	background-color: #1279BE;
-	color: white;
+	background-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 	max-width: 100%;
 	padding: 8px 0;
 }
@@ -924,11 +924,11 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list {
-	border-bottom: 1px solid #F8F8F8;
+	border-bottom: 1px solid var(--wp--preset--color--border-low-contrast);
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list li {
-	border-top: 1px solid #F8F8F8;
+	border-top: 1px solid var(--wp--preset--color--border-low-contrast);
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a:hover,
@@ -951,8 +951,8 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .wooc
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a {
 	clear: left;
-	color: #1279BE;
-	background-color: white;
+	color: var(--wp--preset--color--primary);
+	background-color: var(--wp--preset--color--background);
 	margin: 0;
 	float: left;
 }
@@ -1054,7 +1054,7 @@ body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li span.c
 body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li a:hover,
 body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li a:focus {
 	background: transparent;
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers .svg-icon {
@@ -1115,7 +1115,7 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.p
 #woocommerce-wrapper ul.products li.product .woocommerce-placeholder,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .woocommerce-placeholder,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .woocommerce-placeholder {
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 }
 
 #woocommerce-wrapper ul.products li.product .button,
@@ -1133,7 +1133,7 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.p
 #woocommerce-wrapper ul.products li.product .price,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .price,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .price {
-	color: #101010;
+	color: var(--wp--preset--color--foreground-high-contrast);
 	font-size: 1.15rem;
 	line-height: 1.125;
 }
@@ -1158,13 +1158,13 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.p
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .price .from,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .price .from {
 	font-size: 0.75614rem;
-	color: #ecc700;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 #woocommerce-wrapper ul.products li.product.sale a > .price ins,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product.sale a > .price ins,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product.sale a > .price ins {
-	color: #33b756;
+	color: var(--wp--preset--color--alert-success);
 }
 
 /**
@@ -1182,8 +1182,8 @@ body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs {
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li {
-	background-color: #F8F8F8;
-	border-color: #C5C5C5;
+	background-color: var(--wp--preset--color--background-high-contrast);
+	border-color: var(--wp--preset--color--border);
 	border-top-right-radius: 10px;
 	border-top-left-radius: 10px;
 	padding-right: 0;
@@ -1191,7 +1191,7 @@ body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li {
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	padding-right: 16px;
 	padding-left: 16px;
 	padding-top: 8px;
@@ -1199,42 +1199,42 @@ body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a:hover {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active {
-	background-color: white;
-	border-color: #C5C5C5;
-	border-bottom-color: white;
+	background-color: var(--wp--preset--color--background);
+	border-color: var(--wp--preset--color--border);
+	border-bottom-color: var(--wp--preset--color--background);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active a {
-	color: #101010;
+	color: var(--wp--preset--color--foreground-high-contrast);
 	text-shadow: inherit;
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active::before {
-	box-shadow: -2px 2px 0 white;
+	box-shadow: -2px 2px 0 var(--wp--preset--color--background);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active::after {
-	box-shadow: 2px 2px 0 white;
+	box-shadow: 2px 2px 0 var(--wp--preset--color--background);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::before, body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::after {
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::before {
-	box-shadow: -2px 2px 0 #F8F8F8;
+	box-shadow: -2px 2px 0 var(--wp--preset--color--background-high-contrast);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::after {
-	box-shadow: 2px 2px 0 #F8F8F8;
+	box-shadow: 2px 2px 0 var(--wp--preset--color--background-high-contrast);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs::before {
-	border-bottom-color: #C5C5C5;
+	border-bottom-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs .panel {
@@ -1259,7 +1259,7 @@ body[class*="woocommerce"] #page {
 }
 
 body[class*="woocommerce"] #page #reviews h2 small {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 	margin: inherit;
 }
@@ -1277,7 +1277,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist li {
 }
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .meta {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 }
 
@@ -1286,7 +1286,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist li img.avatar
 	width: 48px;
 	height: auto;
 	background: transparent;
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 	margin: 0;
 	box-shadow: none;
 }
@@ -1298,7 +1298,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .woocommer
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text {
 	margin-right: 64px;
-	border: 1px solid #C5C5C5;
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 4px;
 	padding: 1em 1em 0;
 }
@@ -1321,7 +1321,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist ul.children .
 }
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist #respond {
-	border: 1px solid #C5C5C5;
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 4px;
 	padding: 1em 1em 0;
 	margin: 20px 50px 0 0;
@@ -1336,8 +1336,8 @@ body[class*="woocommerce"] #page #reviews #comments .commentlist > li::before {
  */
 body[class*="woocommerce"] .woocommerce-store-notice,
 body[class*="woocommerce"] p.demo_store {
-	background-color: #1279BE;
-	color: white;
+	background-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 	position: fixed;
 	top: auto;
 	bottom: 0;
@@ -1642,7 +1642,7 @@ body[class*="woocommerce"] #page .woocommerce-order-overview.order_details {
 	justify-content: space-between;
 	align-content: flex-start;
 	align-items: stretch;
-	border: 1px solid #C5C5C5;
+	border: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li {
@@ -1660,7 +1660,7 @@ body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li.em
 }
 
 body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li:not(:last-child) {
-	border-left: 1px solid #C5C5C5;
+	border-left: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li strong {
@@ -1682,7 +1682,7 @@ body[class*="woocommerce"] #page .woocommerce-form-coupon-toggle + .checkout_cou
 body[class*="woocommerce"] #page form.checkout_coupon,
 body[class*="woocommerce"] #page form.login,
 body[class*="woocommerce"] #page form.register {
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 	padding: 16px;
 	margin-top: inherit;
 	margin-bottom: inherit;
@@ -1696,7 +1696,7 @@ body[class*="woocommerce"] #page ul.order_details {
 
 body[class*="woocommerce"] #page .woocommerce-customer-details address {
 	border-radius: 0;
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 	border-left-width: 1px;
 	border-bottom-width: 1px;
 }
@@ -1710,7 +1710,7 @@ body[class*="woocommerce"] #page #add_payment_method table.cart img {
 }
 
 body[class*="woocommerce"] #page #add_payment_method table.cart td.actions .coupon .input-text {
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 	padding: 8px;
 	margin: 0 0 0 16px;
 }
@@ -1731,18 +1731,18 @@ body[class*="woocommerce"] #page .wc-proceed-to-checkout a.wcppec-checkout-butto
 
 body[class*="woocommerce"] #page .checkout .create-account small {
 	font-size: 0.75614rem;
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment {
 	background: transparent;
-	border: 1px solid #C5C5C5;
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 0;
 }
 
 body[class*="woocommerce"] #page #payment ul.payment_methods {
 	padding: 16px;
-	border-bottom-color: #C5C5C5;
+	border-bottom-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page #payment ul.payment_methods li {
@@ -1766,26 +1766,26 @@ body[class*="woocommerce"] #page #payment div.payment_box {
 	font-weight: bold;
 	border-radius: 0;
 	line-height: 1.6;
-	background-color: #C5C5C5;
-	color: #101010;
+	background-color: var(--wp--preset--color--background-low-contrast);
+	color: var(--wp--preset--color--foreground-high-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box input.input-text,
 body[class*="woocommerce"] #page #payment div.payment_box textarea {
-	border-color: #C5C5C5;
-	border-top-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
+	border-top-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box ::-webkit-input-placeholder {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box :-moz-placeholder {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box :-ms-input-placeholder {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-tokenInput {
@@ -1805,7 +1805,7 @@ body[class*="woocommerce"] #page #payment div.payment_box .wc-credit-card-form-c
 
 body[class*="woocommerce"] #page #payment div.payment_box span.help {
 	font-size: 0.86957rem;
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box .form-row {
@@ -1817,7 +1817,7 @@ body[class*="woocommerce"] #page #payment div.payment_box p:last-child {
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box::before {
-	border-bottom-color: #C5C5C5;
+	border-bottom-color: var(--wp--preset--color--background-low-contrast);
 	/* arrow size / color */
 }
 
@@ -1833,11 +1833,11 @@ body[class*="woocommerce"] #page #payment .payment_method_paypal img {
 }
 
 body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-invalid #terms {
-	outline-color: #de3e33;
+	outline-color: var(--wp--preset--color--alert-error);
 }
 
 body[class*="woocommerce"] #page .checkout h3 {
@@ -1848,11 +1848,11 @@ body[class*="woocommerce"] #page .checkout h3 {
 }
 
 body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-invalid #terms {
-	outline-color: #de3e33;
+	outline-color: var(--wp--preset--color--alert-error);
 }
 
 /**
@@ -1886,7 +1886,7 @@ body[class*="woocommerce"] #page .woocommerce-MyAccount-content .woocommerce-not
 }
 
 body[class*="woocommerce"] #page .woocommerce-MyAccount-content fieldset {
-	border: 1px solid #C5C5C5;
+	border: 1px solid var(--wp--preset--color--border);
 	padding: 16px;
 	border-radius: 3px;
 }
@@ -1947,24 +1947,24 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 }
 
 .single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__wrapper .zoomImg {
-	background-color: white;
+	background-color: var(--wp--preset--color--background);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__image--placeholder {
-	border-color: #F8F8F8;
+	border-color: var(--wp--preset--color--border-low-contrast);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__trigger {
 	font-size: 1.15rem;
-	background: white;
+	background: var(--wp--preset--color--background);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__trigger::before {
-	border-color: #A5A5A5;
+	border-color: var(--wp--preset--color--border-high-contrast);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__trigger::after {
-	background-color: #A5A5A5;
+	background-color: var(--wp--preset--color--border-high-contrast);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary {
@@ -1973,7 +1973,7 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 
 .single-product #page #woocommerce-wrapper div.product div.summary span.price,
 .single-product #page #woocommerce-wrapper div.product div.summary p.price {
-	color: #101010;
+	color: var(--wp--preset--color--foreground-high-contrast);
 	font-size: 1.52087rem;
 	line-height: 1.125;
 }
@@ -1995,7 +1995,7 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 .single-product #page #woocommerce-wrapper div.product div.summary span.price .from,
 .single-product #page #woocommerce-wrapper div.product div.summary p.price .from {
 	font-size: 0.75614rem;
-	color: #ecc700;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary p.stock {
@@ -2003,7 +2003,7 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary .stock {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary .out-of-stock {
@@ -2025,7 +2025,7 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 
 .single-product #page #woocommerce-wrapper div.product.sale div.summary .span.price ins,
 .single-product #page #woocommerce-wrapper div.product.sale div.summary p.price ins {
-	color: #33b756;
+	color: var(--wp--preset--color--alert-success);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.social {
@@ -2121,7 +2121,7 @@ body[class*="woocommerce"] #page ul.product_list_widget li img {
 
 body[class*="woocommerce"] #page ul.cart_list li dl,
 body[class*="woocommerce"] #page ul.product_list_widget li dl {
-	border-right-color: #C5C5C5;
+	border-right-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page ul.cart_list li dl dt,
@@ -2137,11 +2137,11 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .total {
 }
 
 body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list {
-	border-bottom: 1px solid #C5C5C5;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list li {
-	border-top: 1px solid #C5C5C5;
+	border-top: 1px solid var(--wp--preset--color--border);
 	padding: 16px 32px 16px 0;
 }
 
@@ -2158,11 +2158,11 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a#wo
  */
 body[class*="woocommerce"] #page .widget_price_filter .ui-slider .ui-slider-range,
 body[class*="woocommerce"] #page .widget_price_filter .ui-slider .ui-slider-handle {
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 }
 
 body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-widget-content {
-	background-color: #757575;
+	background-color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 /**

hever/style-woocommerce.css

@@ -254,13 +254,13 @@ body[class*="woocommerce"] #page .woocommerce input.button,
 body[class*="woocommerce"] #page .woocommerce .widget_shopping_cart .buttons a,
 body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a {
 	line-height: 1;
-	color: white;
+	color: var(--wp--preset--color--background);
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 5px;
 	border-width: 0;
 	text-decoration: none;
@@ -364,8 +364,8 @@ body[class*="woocommerce"] #page .cart .has-focus.button,
 body[class*="woocommerce"] #page a.has-focus.added_to_cart,
 body[class*="woocommerce"] #page .woocommerce .widget_shopping_cart .buttons a.has-focus,
 body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a.has-focus {
-	color: white;
-	background-color: #303030;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 /**
@@ -376,8 +376,8 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a.ha
  */
 body[class*="woocommerce"] #page span.onsale, #content .wc-block-grid .wc-block-grid__product-onsale {
 	border-radius: 100%;
-	background-color: #ecc700;
-	color: #101010;
+	background-color: var(--wp--preset--color--alert-warning);
+	color: var(--wp--preset--color--foreground-high-contrast);
 	font-size: 0.86957rem;
 	font-weight: 700;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@@ -413,7 +413,7 @@ body[class*="woocommerce"] #page .woocommerce-breadcrumb {
 	font-size: 1rem;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page .woocommerce-breadcrumb a {
@@ -430,60 +430,60 @@ body[class*="woocommerce"] #page .woocommerce-error,
 body[class*="woocommerce"] #page .woocommerce-warning {
 	padding: 16px 32px 16px 64px;
 	margin-bottom: 32px;
-	background-color: #F8F8F8;
-	color: #101010;
-	border-top-color: #1279BE;
+	background-color: var(--wp--preset--color--background-high-contrast);
+	color: var(--wp--preset--color--foreground-high-contrast);
+	border-top-color: var(--wp--preset--color--primary);
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--message,
 body[class*="woocommerce"] #page .woocommerce-notice--info {
-	color: #1279BE;
+	color: var(--wp--preset--color--alert-info);
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--success {
-	color: #33b756;
+	color: var(--wp--preset--color--alert-success);
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--error {
-	color: #de3e33;
+	color: var(--wp--preset--color--alert-error);
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--warning {
-	color: #ecc700;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 body[class*="woocommerce"] #page .woocommerce-message,
 body[class*="woocommerce"] #page .woocommerce-info {
-	border-top-color: #1279BE;
+	border-top-color: var(--wp--preset--color--alert-info);
 }
 
 body[class*="woocommerce"] #page .woocommerce-message:before,
 body[class*="woocommerce"] #page .woocommerce-info:before {
-	color: #1279BE;
+	color: var(--wp--preset--color--alert-info);
 }
 
 body[class*="woocommerce"] #page .woocommerce-success {
-	border-top-color: #33b756;
+	border-top-color: var(--wp--preset--color--alert-success);
 }
 
 body[class*="woocommerce"] #page .woocommerce-success:before {
-	color: #33b756;
+	color: var(--wp--preset--color--alert-success);
 }
 
 body[class*="woocommerce"] #page .woocommerce-error {
-	border-top-color: #de3e33;
+	border-top-color: var(--wp--preset--color--alert-error);
 }
 
 body[class*="woocommerce"] #page .woocommerce-error:before {
-	color: #de3e33;
+	color: var(--wp--preset--color--alert-error);
 }
 
 body[class*="woocommerce"] #page .woocommerce-warning {
-	border-top-color: #ecc700;
+	border-top-color: var(--wp--preset--color--alert-warning);
 }
 
 body[class*="woocommerce"] #page .woocommerce-warning:before {
-	color: #ecc700;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 /**
@@ -500,22 +500,22 @@ body[class*="woocommerce"] #page .woocommerce-password-strength {
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.strong {
-	background-color: #33b756;
+	background-color: var(--wp--preset--color--alert-success);
 	border-color: none;
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.good {
-	background-color: #ecc700;
+	background-color: var(--wp--preset--color--alert-warning);
 	border-color: none;
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.short {
-	background-color: #de3e33;
+	background-color: var(--wp--preset--color--alert-error);
 	border-color: none;
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.bad {
-	background-color: #de3e33;
+	background-color: var(--wp--preset--color--alert-error);
 	border-color: none;
 }
 
@@ -535,7 +535,7 @@ body[class*="woocommerce"] #page a.remove {
 }
 
 body[class*="woocommerce"] #page a.remove:hover {
-	color: white !important;
+	color: var(--wp--preset--color--background) !important;
 	background: red;
 }
 
@@ -543,7 +543,7 @@ body[class*="woocommerce"] #page a.remove:hover {
  * Small Note
  */
 body[class*="woocommerce"] #page small.note {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 	margin-top: 16px;
 }
@@ -552,17 +552,17 @@ body[class*="woocommerce"] #page small.note {
  * Star ratings
  */
 body[class*="woocommerce"] #page .star-rating::before {
-	color: #ecc700;
+	color: var(--wp--preset--color--alert-warning);
 	content: "\53\53\53\53\53";
 	opacity: 0.4;
 }
 
 body[class*="woocommerce"] #page .star-rating span {
-	color: #ecc700;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 body[class*="woocommerce"] #page p.stars a {
-	color: #ecc700;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 /**
@@ -570,7 +570,7 @@ body[class*="woocommerce"] #page p.stars a {
  */
 body[class*="woocommerce"] #page table.shop_table {
 	border-collapse: collapse;
-	border: 1px solid #C5C5C5;
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 0;
 	margin-bottom: 32px;
 }
@@ -587,32 +587,32 @@ body[class*="woocommerce"] #page table.shop_table td {
 }
 
 body[class*="woocommerce"] #page table.shop_table tr {
-	border-bottom: 1px solid #C5C5C5;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page table.shop_table tfoot td,
 body[class*="woocommerce"] #page table.shop_table tfoot th,
 body[class*="woocommerce"] #page table.shop_table tbody th {
-	border-top-color: #C5C5C5;
+	border-top-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page table.shop_attributes {
-	border-top-color: #C5C5C5;
+	border-top-color: var(--wp--preset--color--border);
 	border-top-style: solid;
 	margin-bottom: 32px;
-	border-bottom: 1px solid #C5C5C5;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page table.shop_attributes th {
 	padding: 8px;
-	border-bottom-color: #C5C5C5;
+	border-bottom-color: var(--wp--preset--color--border);
 	border-bottom-style: solid;
 	line-height: 1.6;
 }
 
 body[class*="woocommerce"] #page table.shop_attributes td {
 	font-style: inherit;
-	border-bottom-color: #C5C5C5;
+	border-bottom-color: var(--wp--preset--color--border);
 	border-bottom-style: solid;
 	line-height: 1.6;
 	padding: 8px;
@@ -626,7 +626,7 @@ body[class*="woocommerce"] #page table.shop_attributes td p {
 
 body[class*="woocommerce"] #page table.shop_attributes tr:nth-child(even) td,
 body[class*="woocommerce"] #page table.shop_attributes tr:nth-child(even) th {
-	background: #F8F8F8;
+	background: var(--wp--preset--color--background-high-contrast);
 }
 
 body[class*="woocommerce"] #page table.my_account_orders {
@@ -676,7 +676,7 @@ body[class*="woocommerce"] #page .woocommerce button.button:disabled[disabled]:h
 body[class*="woocommerce"] #page .woocommerce input.button.disabled:hover,
 body[class*="woocommerce"] #page .woocommerce input.button:disabled:hover,
 body[class*="woocommerce"] #page .woocommerce input.button:disabled[disabled]:hover {
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 }
 
 /**
@@ -721,17 +721,17 @@ body[class*="woocommerce"] #page .woocommerce input.button:disabled[disabled]:ho
 }
 
 #content .wc-block-grid .wc-block-grid__product-rating .star-rating span:before {
-	color: #FFB302;
+	color: var(--wp--preset--color--secondary);
 }
 
 #content .wc-block-grid .wc-block-grid__product-price {
-	color: #101010;
+	color: var(--wp--preset--color--foreground-high-contrast);
 	font-size: 1.15rem;
 	line-height: 1.125;
 }
 
 #content .wc-block-grid .wc-block-grid__product-price ins {
-	color: #33b756;
+	color: var(--wp--preset--color--alert-success);
 	font-weight: bold;
 	text-decoration: none;
 }
@@ -774,7 +774,7 @@ body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_tot
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals tr th,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells tr td,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells tr th {
-	border-top-color: #C5C5C5;
+	border-top-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .cart-collaterals .cart_totals > h2,
@@ -786,7 +786,7 @@ body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-se
 
 body[class*="woocommerce"] #page .cart-collaterals .cart_totals p small,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals p small {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 }
 
@@ -804,12 +804,12 @@ body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_tot
 
 body[class*="woocommerce"] #page .cart-collaterals .cart_totals table small,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals table small {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page .cart-collaterals .cart_totals .discount td,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals .discount td {
-	color: #ecc700;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 body[class*="woocommerce"] #page .cart-collaterals .shipping-calculator-button,
@@ -841,7 +841,7 @@ body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked ~
 }
 
 body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:focus + #toggle-cart {
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -856,8 +856,8 @@ body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked +
 
 @media only screen and (max-width: 559px) {
 	body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container {
-		background-color: #1279BE;
-		color: white;
+		background-color: var(--wp--preset--color--primary);
+		color: var(--wp--preset--color--background);
 		padding: 0;
 		width: 100%;
 	}
@@ -888,11 +888,11 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link > *:not
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .woocommerce-cart-subtotal {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .woocommerce-cart-count {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-weight: normal;
 }
 
@@ -910,8 +910,8 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .svg-ic
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
-	background-color: #1279BE;
-	color: white;
+	background-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 	max-width: 100%;
 	padding: 8px 0;
 }
@@ -924,11 +924,11 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list {
-	border-bottom: 1px solid #F8F8F8;
+	border-bottom: 1px solid var(--wp--preset--color--border-low-contrast);
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list li {
-	border-top: 1px solid #F8F8F8;
+	border-top: 1px solid var(--wp--preset--color--border-low-contrast);
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a:hover,
@@ -951,8 +951,8 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .wooc
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a {
 	clear: right;
-	color: #1279BE;
-	background-color: white;
+	color: var(--wp--preset--color--primary);
+	background-color: var(--wp--preset--color--background);
 	margin: 0;
 	float: right;
 }
@@ -1054,7 +1054,7 @@ body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li span.c
 body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li a:hover,
 body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li a:focus {
 	background: transparent;
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers .svg-icon {
@@ -1115,7 +1115,7 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.p
 #woocommerce-wrapper ul.products li.product .woocommerce-placeholder,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .woocommerce-placeholder,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .woocommerce-placeholder {
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 }
 
 #woocommerce-wrapper ul.products li.product .button,
@@ -1133,7 +1133,7 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.p
 #woocommerce-wrapper ul.products li.product .price,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .price,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .price {
-	color: #101010;
+	color: var(--wp--preset--color--foreground-high-contrast);
 	font-size: 1.15rem;
 	line-height: 1.125;
 }
@@ -1158,13 +1158,13 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.p
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .price .from,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .price .from {
 	font-size: 0.75614rem;
-	color: #ecc700;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 #woocommerce-wrapper ul.products li.product.sale a > .price ins,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product.sale a > .price ins,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product.sale a > .price ins {
-	color: #33b756;
+	color: var(--wp--preset--color--alert-success);
 }
 
 /**
@@ -1182,8 +1182,8 @@ body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs {
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li {
-	background-color: #F8F8F8;
-	border-color: #C5C5C5;
+	background-color: var(--wp--preset--color--background-high-contrast);
+	border-color: var(--wp--preset--color--border);
 	border-top-left-radius: 10px;
 	border-top-right-radius: 10px;
 	padding-left: 0;
@@ -1191,7 +1191,7 @@ body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li {
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	padding-left: 16px;
 	padding-right: 16px;
 	padding-top: 8px;
@@ -1199,42 +1199,42 @@ body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a:hover {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active {
-	background-color: white;
-	border-color: #C5C5C5;
-	border-bottom-color: white;
+	background-color: var(--wp--preset--color--background);
+	border-color: var(--wp--preset--color--border);
+	border-bottom-color: var(--wp--preset--color--background);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active a {
-	color: #101010;
+	color: var(--wp--preset--color--foreground-high-contrast);
 	text-shadow: inherit;
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active::before {
-	box-shadow: 2px 2px 0 white;
+	box-shadow: 2px 2px 0 var(--wp--preset--color--background);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active::after {
-	box-shadow: -2px 2px 0 white;
+	box-shadow: -2px 2px 0 var(--wp--preset--color--background);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::before, body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::after {
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::before {
-	box-shadow: 2px 2px 0 #F8F8F8;
+	box-shadow: 2px 2px 0 var(--wp--preset--color--background-high-contrast);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::after {
-	box-shadow: -2px 2px 0 #F8F8F8;
+	box-shadow: -2px 2px 0 var(--wp--preset--color--background-high-contrast);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs::before {
-	border-bottom-color: #C5C5C5;
+	border-bottom-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs .panel {
@@ -1259,7 +1259,7 @@ body[class*="woocommerce"] #page {
 }
 
 body[class*="woocommerce"] #page #reviews h2 small {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 	margin: inherit;
 }
@@ -1277,7 +1277,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist li {
 }
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .meta {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 }
 
@@ -1286,7 +1286,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist li img.avatar
 	width: 48px;
 	height: auto;
 	background: transparent;
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 	margin: 0;
 	box-shadow: none;
 }
@@ -1298,7 +1298,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .woocommer
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text {
 	margin-left: 64px;
-	border: 1px solid #C5C5C5;
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 4px;
 	padding: 1em 1em 0;
 }
@@ -1321,7 +1321,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist ul.children .
 }
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist #respond {
-	border: 1px solid #C5C5C5;
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 4px;
 	padding: 1em 1em 0;
 	margin: 20px 0 0 50px;
@@ -1336,8 +1336,8 @@ body[class*="woocommerce"] #page #reviews #comments .commentlist > li::before {
  */
 body[class*="woocommerce"] .woocommerce-store-notice,
 body[class*="woocommerce"] p.demo_store {
-	background-color: #1279BE;
-	color: white;
+	background-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 	position: fixed;
 	top: auto;
 	bottom: 0;
@@ -1642,7 +1642,7 @@ body[class*="woocommerce"] #page .woocommerce-order-overview.order_details {
 	justify-content: space-between;
 	align-content: flex-start;
 	align-items: stretch;
-	border: 1px solid #C5C5C5;
+	border: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li {
@@ -1660,7 +1660,7 @@ body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li.em
 }
 
 body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li:not(:last-child) {
-	border-right: 1px solid #C5C5C5;
+	border-right: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li strong {
@@ -1682,7 +1682,7 @@ body[class*="woocommerce"] #page .woocommerce-form-coupon-toggle + .checkout_cou
 body[class*="woocommerce"] #page form.checkout_coupon,
 body[class*="woocommerce"] #page form.login,
 body[class*="woocommerce"] #page form.register {
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 	padding: 16px;
 	margin-top: inherit;
 	margin-bottom: inherit;
@@ -1696,7 +1696,7 @@ body[class*="woocommerce"] #page ul.order_details {
 
 body[class*="woocommerce"] #page .woocommerce-customer-details address {
 	border-radius: 0;
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 	border-right-width: 1px;
 	border-bottom-width: 1px;
 }
@@ -1710,7 +1710,7 @@ body[class*="woocommerce"] #page #add_payment_method table.cart img {
 }
 
 body[class*="woocommerce"] #page #add_payment_method table.cart td.actions .coupon .input-text {
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 	padding: 8px;
 	margin: 0 16px 0 0;
 }
@@ -1731,18 +1731,18 @@ body[class*="woocommerce"] #page .wc-proceed-to-checkout a.wcppec-checkout-butto
 
 body[class*="woocommerce"] #page .checkout .create-account small {
 	font-size: 0.75614rem;
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment {
 	background: transparent;
-	border: 1px solid #C5C5C5;
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 0;
 }
 
 body[class*="woocommerce"] #page #payment ul.payment_methods {
 	padding: 16px;
-	border-bottom-color: #C5C5C5;
+	border-bottom-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page #payment ul.payment_methods li {
@@ -1766,26 +1766,26 @@ body[class*="woocommerce"] #page #payment div.payment_box {
 	font-weight: bold;
 	border-radius: 0;
 	line-height: 1.6;
-	background-color: #C5C5C5;
-	color: #101010;
+	background-color: var(--wp--preset--color--background-low-contrast);
+	color: var(--wp--preset--color--foreground-high-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box input.input-text,
 body[class*="woocommerce"] #page #payment div.payment_box textarea {
-	border-color: #C5C5C5;
-	border-top-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
+	border-top-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box ::-webkit-input-placeholder {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box :-moz-placeholder {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box :-ms-input-placeholder {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-tokenInput {
@@ -1805,7 +1805,7 @@ body[class*="woocommerce"] #page #payment div.payment_box .wc-credit-card-form-c
 
 body[class*="woocommerce"] #page #payment div.payment_box span.help {
 	font-size: 0.86957rem;
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box .form-row {
@@ -1817,7 +1817,7 @@ body[class*="woocommerce"] #page #payment div.payment_box p:last-child {
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box::before {
-	border-bottom-color: #C5C5C5;
+	border-bottom-color: var(--wp--preset--color--background-low-contrast);
 	/* arrow size / color */
 }
 
@@ -1833,11 +1833,11 @@ body[class*="woocommerce"] #page #payment .payment_method_paypal img {
 }
 
 body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-invalid #terms {
-	outline-color: #de3e33;
+	outline-color: var(--wp--preset--color--alert-error);
 }
 
 body[class*="woocommerce"] #page .checkout h3 {
@@ -1848,11 +1848,11 @@ body[class*="woocommerce"] #page .checkout h3 {
 }
 
 body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-invalid #terms {
-	outline-color: #de3e33;
+	outline-color: var(--wp--preset--color--alert-error);
 }
 
 /**
@@ -1886,7 +1886,7 @@ body[class*="woocommerce"] #page .woocommerce-MyAccount-content .woocommerce-not
 }
 
 body[class*="woocommerce"] #page .woocommerce-MyAccount-content fieldset {
-	border: 1px solid #C5C5C5;
+	border: 1px solid var(--wp--preset--color--border);
 	padding: 16px;
 	border-radius: 3px;
 }
@@ -1947,24 +1947,24 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 }
 
 .single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__wrapper .zoomImg {
-	background-color: white;
+	background-color: var(--wp--preset--color--background);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__image--placeholder {
-	border-color: #F8F8F8;
+	border-color: var(--wp--preset--color--border-low-contrast);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__trigger {
 	font-size: 1.15rem;
-	background: white;
+	background: var(--wp--preset--color--background);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__trigger::before {
-	border-color: #A5A5A5;
+	border-color: var(--wp--preset--color--border-high-contrast);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__trigger::after {
-	background-color: #A5A5A5;
+	background-color: var(--wp--preset--color--border-high-contrast);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary {
@@ -1973,7 +1973,7 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 
 .single-product #page #woocommerce-wrapper div.product div.summary span.price,
 .single-product #page #woocommerce-wrapper div.product div.summary p.price {
-	color: #101010;
+	color: var(--wp--preset--color--foreground-high-contrast);
 	font-size: 1.52087rem;
 	line-height: 1.125;
 }
@@ -1995,7 +1995,7 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 .single-product #page #woocommerce-wrapper div.product div.summary span.price .from,
 .single-product #page #woocommerce-wrapper div.product div.summary p.price .from {
 	font-size: 0.75614rem;
-	color: #ecc700;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary p.stock {
@@ -2003,7 +2003,7 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary .stock {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary .out-of-stock {
@@ -2025,7 +2025,7 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 
 .single-product #page #woocommerce-wrapper div.product.sale div.summary .span.price ins,
 .single-product #page #woocommerce-wrapper div.product.sale div.summary p.price ins {
-	color: #33b756;
+	color: var(--wp--preset--color--alert-success);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.social {
@@ -2121,7 +2121,7 @@ body[class*="woocommerce"] #page ul.product_list_widget li img {
 
 body[class*="woocommerce"] #page ul.cart_list li dl,
 body[class*="woocommerce"] #page ul.product_list_widget li dl {
-	border-left-color: #C5C5C5;
+	border-left-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page ul.cart_list li dl dt,
@@ -2137,11 +2137,11 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .total {
 }
 
 body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list {
-	border-bottom: 1px solid #C5C5C5;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list li {
-	border-top: 1px solid #C5C5C5;
+	border-top: 1px solid var(--wp--preset--color--border);
 	padding: 16px 0 16px 32px;
 }
 
@@ -2158,11 +2158,11 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a#wo
  */
 body[class*="woocommerce"] #page .widget_price_filter .ui-slider .ui-slider-range,
 body[class*="woocommerce"] #page .widget_price_filter .ui-slider .ui-slider-handle {
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 }
 
 body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-widget-content {
-	background-color: #757575;
+	background-color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 /**

hever/style.css

@@ -200,13 +200,13 @@ input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
 	line-height: 1;
-	color: white;
+	color: var(--wp--preset--color--background);
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 5px;
 	border-width: 0;
 	text-decoration: none;
@@ -250,8 +250,8 @@ input:focus[type="submit"],
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
-	color: white;
-	background-color: #303030;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 /**
@@ -670,20 +670,20 @@ html {
 body {
 	font-size: 1rem;
 	font-weight: normal;
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 	text-align: left;
-	background-color: white;
+	background-color: var(--wp--preset--color--background);
 }
 
 /**
  * Links styles
  */
 a {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 a:hover {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 button,
@@ -707,12 +707,12 @@ a {
 }
 
 .screen-reader-text:focus {
-	background-color: white;
+	background-color: var(--wp--preset--color--background);
 	border-radius: 3px;
 	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 	clip: auto !important;
 	clip-path: none;
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 	display: block;
 	font-size: 1.15rem;
 	font-weight: bold;
@@ -783,11 +783,11 @@ footer {
 }
 
 ::selection {
-	background-color: #A9D9F9;
+	background-color: var(--wp--preset--color--text-selection);
 }
 
 ::-moz-selection {
-	background-color: #A9D9F9;
+	background-color: var(--wp--preset--color--text-selection);
 }
 
 /**
@@ -1070,8 +1070,8 @@ input[type="datetime"],
 input[type="datetime-local"],
 input[type="color"],
 textarea {
-	color: black;
-	border: 1px solid #C5C5C5;
+	color: var(--wp--preset--color--black);
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 5px;
 	padding: 16px;
 }
@@ -1092,12 +1092,12 @@ input[type="datetime"]:focus,
 input[type="datetime-local"]:focus,
 input[type="color"]:focus,
 textarea:focus {
-	color: black;
-	border-color: #303030;
+	color: var(--wp--preset--color--black);
+	border-color: var(--wp--preset--color--primary-hover);
 }
 
 select {
-	border: 1px solid #C5C5C5;
+	border: 1px solid var(--wp--preset--color--border);
 }
 
 textarea {
@@ -1112,7 +1112,7 @@ input[type=checkbox] + label {
 }
 
 figcaption {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.75614rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -1240,7 +1240,7 @@ object {
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-title a {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
@@ -1250,7 +1250,7 @@ object {
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 	text-decoration: underline;
 }
 
@@ -1268,7 +1268,7 @@ object {
 
 .wp-block-newspack-blocks-homepage-articles article .entry-meta,
 .wp-block-newspack-blocks-homepage-articles article .cat-links {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 }
 
@@ -1307,7 +1307,7 @@ object {
 .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
 .wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
 .wp-block-newspack-blocks-homepage-articles article .cat-links a:active {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 	text-decoration: none;
 }
 
@@ -1340,13 +1340,13 @@ input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
 	line-height: 1;
-	color: white;
+	color: var(--wp--preset--color--background);
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 5px;
 	border-width: 0;
 	text-decoration: none;
@@ -1390,8 +1390,8 @@ input:focus[type="submit"],
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
-	color: white;
-	background-color: #303030;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 /**
@@ -1434,19 +1434,19 @@ button[data-load-more-btn], .button {
 
 .wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color),
 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .wp-block-button.is-style-outline.wp-block-button__link:active,
 .wp-block-button.is-style-outline .wp-block-button__link:active {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .wp-block-button.is-style-outline.wp-block-button__link:hover, .wp-block-button.is-style-outline.wp-block-button__link:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-focus,
 .wp-block-button.is-style-outline .wp-block-button__link:hover,
 .wp-block-button.is-style-outline .wp-block-button__link:focus,
 .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 .wp-block-button.is-style-squared,
@@ -1455,14 +1455,14 @@ button[data-load-more-btn], .button {
 }
 
 .wp-block-code {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 	font-size: 0.86957rem;
 	padding: 16px;
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 }
 
 .wp-block-code pre {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 .wp-block-columns {
@@ -1527,7 +1527,7 @@ button[data-load-more-btn], .button {
 
 .wp-block-cover,
 .wp-block-cover-image {
-	background-color: #303030;
+	background-color: var(--wp--preset--color--foreground);
 	min-height: 480px;
 	margin-top: inherit;
 	margin-bottom: inherit;
@@ -1539,8 +1539,8 @@ button[data-load-more-btn], .button {
 
 .wp-block-cover.has-background-dim,
 .wp-block-cover-image.has-background-dim {
-	background-color: #303030;
-	color: white;
+	background-color: var(--wp--preset--color--foreground);
+	color: var(--wp--preset--color--background);
 }
 
 .wp-block-cover .wp-block-cover__inner-container,
@@ -1646,8 +1646,8 @@ button[data-load-more-btn], .button {
 }
 
 .wp-block-file .wp-block-file__button {
-	background-color: #1279BE;
-	color: white;
+	background-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 	font-size: 0.86957rem;
 	margin-left: 16px;
 	margin-right: 16px;
@@ -1661,7 +1661,7 @@ button[data-load-more-btn], .button {
 .wp-block-file a.wp-block-file__button:focus,
 .wp-block-file a.wp-block-file__button:hover,
 .wp-block-file a.wp-block-file__button:visited {
-	color: white;
+	color: var(--wp--preset--color--background);
 	opacity: .85;
 }
 
@@ -1672,7 +1672,7 @@ button[data-load-more-btn], .button {
 .wp-block-gallery .blocks-gallery-image figcaption,
 .wp-block-gallery .blocks-gallery-item figcaption {
 	margin: 0;
-	color: white;
+	color: var(--wp--preset--color--white);
 	font-size: 0.75614rem;
 }
 
@@ -1768,7 +1768,7 @@ h6, .h6 {
 }
 
 .wp-block-image figcaption {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.75614rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -1818,7 +1818,7 @@ img {
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 }
 
@@ -1856,7 +1856,7 @@ img {
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.75614rem;
 	line-height: 1.6;
 }
@@ -2033,8 +2033,8 @@ p.has-background {
 }
 
 .a8c-posts-list-item__featured span {
-	color: white;
-	background-color: #1279BE;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary);
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
@@ -2073,7 +2073,7 @@ p.has-background {
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 }
 
@@ -2082,7 +2082,7 @@ p.has-background {
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta a:hover, .a8c-posts-list__item .a8c-posts-list-item__meta a:active {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__edit-link {
@@ -2094,11 +2094,11 @@ p.has-background {
 }
 
 .wp-block-pullquote {
-	border-top-color: #C5C5C5;
+	border-top-color: var(--wp--preset--color--border);
 	border-top-width: 4px;
-	border-bottom-color: #C5C5C5;
+	border-bottom-color: var(--wp--preset--color--border);
 	border-bottom-width: 4px;
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 .wp-block-pullquote blockquote p {
@@ -2120,7 +2120,7 @@ p.has-background {
 .wp-block-pullquote .wp-block-pullquote__citation,
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 	letter-spacing: normal;
 }
@@ -2130,7 +2130,7 @@ p.has-background {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation,
@@ -2140,11 +2140,11 @@ p.has-background {
 }
 
 .wp-block-pullquote.is-style-solid-color:not(.has-background) {
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 }
 
 .wp-block-quote {
-	border-left-color: #1279BE;
+	border-left-color: var(--wp--preset--color--primary);
 	margin: 32px 0;
 	padding-left: 16px;
 	/**
@@ -2176,7 +2176,7 @@ p.has-background {
 .wp-block-quote .wp-block-quote__citation,
 .wp-block-quote cite,
 .wp-block-quote footer {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 	letter-spacing: normal;
 }
@@ -2203,7 +2203,7 @@ p.has-background {
 }
 
 .wp-block-quote[style*="text-align:right"], .wp-block-quote[style*="text-align: right"] {
-	border-right-color: #1279BE;
+	border-right-color: var(--wp--preset--color--primary);
 }
 
 .wp-block-quote.is-style-large, .wp-block-quote.is-large {
@@ -2224,7 +2224,7 @@ p.has-background {
 .wp-block-quote.is-style-large footer, .wp-block-quote.is-large .wp-block-quote__citation,
 .wp-block-quote.is-large cite,
 .wp-block-quote.is-large footer {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.86957rem;
 	letter-spacing: normal;
 }
@@ -2237,14 +2237,14 @@ p.has-background {
 }
 
 hr {
-	border-bottom: 2px solid #C5C5C5;
+	border-bottom: 2px solid var(--wp--preset--color--border);
 	clear: both;
 	margin-left: auto;
 	margin-right: auto;
 }
 
 hr.wp-block-separator {
-	border-bottom: 2px solid #C5C5C5;
+	border-bottom: 2px solid var(--wp--preset--color--border);
 	/**
 		 * Block Options
 		 */
@@ -2267,7 +2267,7 @@ hr.wp-block-separator.is-style-dots.has-background:before, hr.wp-block-separator
 }
 
 hr.wp-block-separator.is-style-dots:before {
-	color: #C5C5C5;
+	color: var(--wp--preset--color--border);
 	font-size: 1.52087rem;
 	letter-spacing: 0.86957rem;
 	padding-left: 0.86957rem;
@@ -2325,12 +2325,12 @@ table th,
 
 table.is-style-stripes tbody tr:nth-child(odd),
 .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
-	background-color: #F8F8F8;
-	color: #303030;
+	background-color: var(--wp--preset--color--border-low-contrast);
+	color: var(--wp--preset--color--foreground);
 }
 
 .wp-block-video figcaption {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.75614rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -2427,36 +2427,36 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .has-primary-color {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .has-secondary-color {
-	color: #FFB302;
+	color: var(--wp--preset--color--secondary);
 }
 
 .has-foreground-color {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 .has-foreground-light-color {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 .has-foreground-dark-color {
-	color: #101010;
+	color: var(--wp--preset--color--foreground-high-contrast);
 }
 
 .has-background-light-color {
-	color: #F8F8F8;
+	color: var(--wp--preset--color--background-high-contrast);
 }
 
 .has-background-dark-color {
-	color: #C5C5C5;
+	color: var(--wp--preset--color--background-low-contrast);
 }
 
 .has-background-dim,
 .has-background-color {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
@@ -2472,51 +2472,51 @@ table.is-style-stripes tbody tr:nth-child(odd),
 
 .has-primary-background-color,
 .has-primary-background-color.has-background-dim {
-	background-color: #1279BE;
-	color: white;
+	background-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 }
 
 .has-secondary-background-color,
 .has-secondary-background-color.has-background-dim {
-	background-color: #FFB302;
-	color: white;
+	background-color: var(--wp--preset--color--secondary);
+	color: var(--wp--preset--color--background);
 }
 
 .has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
-	background-color: #303030;
-	color: white;
+	background-color: var(--wp--preset--color--foreground);
+	color: var(--wp--preset--color--background);
 }
 
 .has-foreground-light-background-color,
 .has-foreground-light-background-color.has-background-dim {
-	background-color: #757575;
-	color: white;
+	background-color: var(--wp--preset--color--foreground-low-contrast);
+	color: var(--wp--preset--color--background);
 }
 
 .has-foreground-dark-background-color,
 .has-foreground-dark-background-color.has-background-dim {
-	background-color: #101010;
-	color: white;
+	background-color: var(--wp--preset--color--foreground-high-contrast);
+	color: var(--wp--preset--color--background);
 }
 
 .has-background-light-background-color,
 .has-background-light-background-color.has-background-dim {
-	background-color: #F8F8F8;
-	color: #303030;
+	background-color: var(--wp--preset--color--background-high-contrast);
+	color: var(--wp--preset--color--foreground);
 }
 
 .has-background-dark-background-color,
 .has-background-dark-background-color.has-background-dim {
-	background-color: #C5C5C5;
-	color: #303030;
+	background-color: var(--wp--preset--color--background-low-contrast);
+	color: var(--wp--preset--color--foreground);
 }
 
 .has-background-background-color,
 .has-background-background-color.has-background-dim {
-	background-color: white;
-	color: #303030;
+	background-color: var(--wp--preset--color--background);
+	color: var(--wp--preset--color--foreground);
 }
 
 .is-small-text,
@@ -2699,11 +2699,11 @@ table.is-style-stripes tbody tr:nth-child(odd),
  * - Similar to Blocks but exist outside of the "current" editor context
  */
 .site-branding {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 .site-title {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
@@ -2720,7 +2720,7 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .site-title a:hover {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .site-description {
@@ -2738,7 +2738,7 @@ body:not(.fse-enabled) .site-description {
 }
 
 .main-navigation {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 .main-navigation > div {
@@ -2755,7 +2755,7 @@ body:not(.fse-enabled) .site-description {
 }
 
 .main-navigation #toggle:focus + #toggle-menu {
-	background-color: #1279BE;
+	background-color: var(--wp--preset--color--primary);
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -2871,7 +2871,7 @@ body:not(.fse-enabled) .site-description {
 
 @media only screen and (min-width: 560px) {
 	.main-navigation > div > ul > li > .sub-menu {
-		background: white;
+		background: var(--wp--preset--color--background);
 		box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
 		left: 0;
 		top: 100%;
@@ -2888,7 +2888,7 @@ body:not(.fse-enabled) .site-description {
 }
 
 .main-navigation a {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 	display: block;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
@@ -2903,11 +2903,11 @@ body:not(.fse-enabled) .site-description {
 }
 
 .main-navigation a:link, .main-navigation a:visited {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 }
 
 .main-navigation a:hover {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .main-navigation .sub-menu {
@@ -2970,13 +2970,13 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .social-navigation a {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	display: inline-block;
 	padding: 0 8px;
 }
 
 .social-navigation a:hover {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .social-navigation svg {
@@ -2998,7 +2998,7 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .site-info {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.86957rem;
@@ -3026,7 +3026,7 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .site-info a:hover {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 .footer-navigation {
@@ -3048,7 +3048,7 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .footer-navigation .footer-menu {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	margin: 0;
 	padding-left: 0;
 }
@@ -3086,7 +3086,7 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .footer-navigation .footer-menu a:hover {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 body:not(.fse-enabled) .footer-menu a {
@@ -3101,7 +3101,7 @@ body:not(.fse-enabled) .footer-menu a {
 
 .entry-meta,
 .entry-footer {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	clear: both;
 	float: none;
 	font-size: 0.86957rem;
@@ -3138,7 +3138,7 @@ body:not(.fse-enabled) .footer-menu a {
 .entry-meta a:hover, .entry-meta a:active,
 .entry-footer a:hover,
 .entry-footer a:active {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 .entry-meta .svg-icon,
@@ -3339,13 +3339,13 @@ body:not(.fse-enabled) .footer-menu a {
  * Comment Lists
  */
 .comment-list {
-	border-bottom: 1px solid #C5C5C5;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 	padding-left: 0;
 	list-style: none;
 }
 
 .comment-list > li {
-	border-top: 1px solid #C5C5C5;
+	border-top: 1px solid var(--wp--preset--color--border);
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -3356,7 +3356,7 @@ body:not(.fse-enabled) .footer-menu a {
 }
 
 .comment-list .children > li {
-	border-top: 1px solid #C5C5C5;
+	border-top: 1px solid var(--wp--preset--color--border);
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -3403,7 +3403,7 @@ body:not(.fse-enabled) .footer-menu a {
 }
 
 .comment-meta .comment-metadata {
-	color: #303030;
+	color: var(--wp--preset--color--foreground);
 	padding-right: 40px;
 }
 
@@ -3418,7 +3418,7 @@ body:not(.fse-enabled) .footer-menu a {
 }
 
 .comment-meta .comment-metadata a:hover, .comment-meta .comment-metadata a:active {
-	color: #303030;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 @media only screen and (min-width: 560px) {
@@ -3608,8 +3608,8 @@ img#wpstats {
  * - Page specific styles
  */
 .sticky-post {
-	color: white;
-	background-color: #1279BE;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary);
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
@@ -3924,9 +3924,9 @@ body .widget_eu_cookie_law_widget.widget.top {
 }
 
 body .widget_eu_cookie_law_widget #eu-cookie-law {
-	background: white;
-	border: 1px solid #C5C5C5;
-	color: #303030;
+	background: var(--wp--preset--color--background);
+	border: 1px solid var(--wp--preset--color--border);
+	color: var(--wp--preset--color--foreground);
 	font-size: 0.86957rem;
 	line-height: inherit;
 	padding: 16px;
@@ -3939,18 +3939,18 @@ body .widget_eu_cookie_law_widget #eu-cookie-law {
 }
 
 body .widget_eu_cookie_law_widget #eu-cookie-law.negative {
-	background: #303030;
-	border-color: #101010;
-	color: white;
+	background: var(--wp--preset--color--foreground);
+	border-color: var(--wp--preset--color--foreground-high-contrast);
+	color: var(--wp--preset--color--background);
 }
 
 body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept {
-	background: white;
-	color: #303030;
+	background: var(--wp--preset--color--background);
+	color: var(--wp--preset--color--foreground);
 }
 
 body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept:hover, body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept:focus, body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept.has-focus {
-	background: #C5C5C5;
+	background: var(--wp--preset--color--background-low-contrast);
 }
 
 body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
@@ -4161,7 +4161,7 @@ body:not(.fse-enabled) #colophon {
 	.site-header .main-navigation > div > ul > li:hover > a,
 	.site-header .main-navigation > div > ul > li.focus > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item > a {
-		color: #1279BE;
+		color: var(--wp--preset--color--primary);
 	}
 	.site-header .main-navigation > div > ul > li:hover > ul,
 	.site-header .main-navigation > div > ul > li.focus > ul,
@@ -4172,7 +4172,7 @@ body:not(.fse-enabled) #colophon {
 	.site-header .main-navigation > div > ul > li:hover > ul:before,
 	.site-header .main-navigation > div > ul > li.focus > ul:before,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
-		border-bottom: 8px solid #1279BE;
+		border-bottom: 8px solid var(--wp--preset--color--primary);
 		border-left: 8px solid transparent;
 		border-right: 8px solid transparent;
 		content: "";
@@ -4183,8 +4183,8 @@ body:not(.fse-enabled) #colophon {
 	.site-header .main-navigation > div > ul > li:hover li > a,
 	.site-header .main-navigation > div > ul > li.focus li > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li > a {
-		background: #1279BE;
-		color: white;
+		background: var(--wp--preset--color--primary);
+		color: var(--wp--preset--color--background);
 	}
 	.site-header .main-navigation > div > ul > li:hover li:hover > a,
 	.site-header .main-navigation > div > ul > li:hover li.focus > a,
@@ -4195,7 +4195,7 @@ body:not(.fse-enabled) #colophon {
 	.site-header .main-navigation > div > ul > li.current-menu-item li:hover > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li.focus > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
-		background: #303030;
+		background: var(--wp--preset--color--primary-hover);
 	}
 	.site-header .social-navigation {
 		align-self: center;
@@ -4218,7 +4218,7 @@ body:not(.fse-enabled) #colophon {
  * Site Title
  */
 .site-description {
-	color: #757575;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 .site-title + .site-description {
@@ -4267,7 +4267,7 @@ table td,
 table th,
 .wp-block-table td,
 .wp-block-table th {
-	border-color: #C5C5C5;
+	border-color: var(--wp--preset--color--border);
 }
 
 .wp-block-newspack-blocks-homepage-articles article .cat-links a,
@@ -4305,7 +4305,7 @@ table th,
 .singular .hentry .entry-header .entry-title:before, .singular .hentry .entry-header .entry-title:after,
 .page-title:before,
 .page-title:after {
-	background: #F8F8F8;
+	background: var(--wp--preset--color--border-low-contrast);
 	height: 1px;
 	content: "";
 	display: block;
@@ -4354,7 +4354,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 .wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
 .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
 .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #1279BE;
+	color: var(--wp--preset--color--primary);
 }
 
 .singular .hentry .entry-content > *:first-child.alignfull {
@@ -4462,7 +4462,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 .widget_jp_blogs_i_follow ul,
 .widget_top-click ul,
 .widget_upcoming_events_widget ul {
-	border-bottom: 1px solid #C5C5C5;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 	list-style: none;
 	padding-left: 0;
 }
@@ -4482,7 +4482,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 .widget_jp_blogs_i_follow li,
 .widget_top-click li,
 .widget_upcoming_events_widget li {
-	border-top: 1px solid #C5C5C5;
+	border-top: 1px solid var(--wp--preset--color--border);
 	padding: 8px 0;
 }
 
@@ -4593,7 +4593,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		bottom: 0;
 		right: 0;
 		left: 0;
-		background: white;
+		background: var(--wp--preset--color--background);
 		padding: 48px 16px 8px;
 		overflow-y: auto;
 		white-space: normal;

varia/functions.php

@@ -436,6 +436,11 @@ function varia_customize_header_footer( $wp_customize ) {
 }
 add_action( 'customize_register', 'varia_customize_header_footer' );
 
+/*
+ * Color palette related utilities
+ */
+require get_template_directory() . '/inc/color-utils.php';
+
 /**
  * SVG Icons class.
  */

varia/inc/color-utils.php

@@ -0,0 +1,46 @@
+<?php 
+// These functions are borrowed from the colorline lib
+function hex_to_rgb( $hex ) {
+	return sscanf( $hex, '%02X%02X%02X' );
+}
+
+// RGB values: 0-255
+// LUM values: 0-1
+function rgb_to_lum( $rgb ) {
+	list( $r, $g, $b ) = $rgb;
+	return sqrt( 0.241 * $r * $r + 0.691 * $g * $g + 0.068 * $b * $b ) / 255;
+}
+
+// RGB values:    0-255, 0-255, 0-255
+// HSV values:    0-360, 0-100, 0-100, 0-100
+function rgb_to_hsvl( $rgb ) {
+	$l                 = rgb_to_lum( $rgb );
+	list( $r, $g, $b ) = $rgb;
+	$r                 = $r / 255;
+	$g                 = $g / 255;
+	$b                 = $b / 255;
+	$max_rgb           = max( $r, $g, $b );
+	$min_rgb           = min( $r, $g, $b );
+	$chroma            = $max_rgb - $min_rgb;
+	$v                 = 100 * $max_rgb;
+	if ( 0 === (int) $chroma ) {
+		return array( 0, 0, $v, $l );
+	}
+	$s = 100 * ( $chroma / $max_rgb );
+	if ( $r === $min_rgb ) {
+		$h = 3 - ( ( $g - $b ) / $chroma );
+	} elseif ( $b === $min_rgb ) {
+		$h = 1 - ( ( $r - $g ) / $chroma );
+	} else { // $g === $min_rgb
+		$h = 5 - ( ( $b - $r ) / $chroma );
+	}
+	$h = 60 * $h;
+	return array( $h, $s, $v, $l );
+}
+
+function change_color_luminescence( $hex, $amount ) {
+	$hex_without_hash = substr( $hex, 1, strlen( $hex ) );
+	$rgb              = hex_to_rgb( $hex_without_hash );
+	$hsvl             = rgb_to_hsvl( $rgb );
+	return 'hsl( ' . $hsvl[0] . ',' . $hsvl[1] . '%,' . ( $hsvl[2] + $amount ) . '%)';
+}