Shawburn: Add color annotations

shawburn/functions.php

@@ -9,6 +9,18 @@
  * @since 1.0.0
  */
 
+if ( ! function_exists( 'varia_default_colors' ) ) {
+	function varia_default_colors() {
+		return array(
+			'background' => '#FFFFFF',
+			'foreground' => '#444444',
+			'primary'    => '#0C80A1',
+			'secondary'  => '#D4401C',
+			'tertiary'   => null,
+		);
+	}
+}
+
 if ( ! function_exists( 'shawburn_setup' ) ) :
 	/**
 	 * Sets up theme defaults and registers support for various WordPress features.
@@ -53,53 +65,6 @@ if ( ! function_exists( 'shawburn_setup' ) ) :
 			)
 		);
 
-		// Add child theme editor color pallete to match Sass-map variables in `_config-child-theme-deep.scss`.
-		add_theme_support(
-			'editor-color-palette',
-			array(
-				array(
-					'name'  => __( 'Primary', 'shawburn' ),
-					'slug'  => 'primary',
-					'color' => '#0C80A1',
-				),
-				array(
-					'name'  => __( 'Secondary', 'shawburn' ),
-					'slug'  => 'secondary',
-					'color' => '#D4401C',
-				),
-				array(
-					'name'  => __( 'Dark Gray', 'shawburn' ),
-					'slug'  => 'foreground-dark',
-					'color' => '#222222',
-				),
-				array(
-					'name'  => __( 'Gray', 'shawburn' ),
-					'slug'  => 'foreground',
-					'color' => '#444444',
-				),
-				array(
-					'name'  => __( 'Light Gray', 'shawburn' ),
-					'slug'  => 'foreground-light',
-					'color' => '#767676',
-				),
-				array(
-					'name'  => __( 'Light Gray', 'shawburn' ),
-					'slug'  => 'background-dark',
-					'color' => '#EAEAEA',
-				),
-				array(
-					'name'  => __( 'Subtle Gray', 'shawburn' ),
-					'slug'  => 'background-light',
-					'color' => '#FAFAFA',
-				),
-				array(
-					'name'  => __( 'White', 'shawburn' ),
-					'slug'  => 'background',
-					'color' => '#FFFFFF',
-				),
-			)
-		);
-
 		// Enable Full Site Editing
 		add_theme_support( 'full-site-editing' );
 	}
@@ -126,7 +91,7 @@ function shawburn_fonts_url() {
 	/* translators: If there are characters in your language that are not supported
 	 * by PT Sans, translate this to 'off'. Do not translate into your own language.
 	 */
-	$pt_sans  = _x( 'on', 'PT Sans font: on or off',  'shawburn' );
+	$pt_sans = _x( 'on', 'PT Sans font: on or off', 'shawburn' );
 
 	/* translators: If there are characters in your language that are not supported
 	 * by PT Serif, translate this to 'off'. Do not translate into your own language.
@@ -149,7 +114,7 @@ function shawburn_fonts_url() {
 			'subset' => urlencode( 'latin,latin-ext' ),
 		);
 
-		$fonts_url = add_query_arg( $query_args, "https://fonts.googleapis.com/css" );
+		$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
 	}
 
 	return esc_url_raw( $fonts_url );
@@ -167,7 +132,7 @@ function shawburn_scripts() {
 	wp_dequeue_style( 'varia-style' );
 
 	// enqueue child styles
-	wp_enqueue_style('shawburn-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ));
+	wp_enqueue_style( 'shawburn-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
 
 	// enqueue child RTL styles
 	wp_style_add_data( 'shawburn-style', 'rtl', 'replace' );

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

@@ -3,6 +3,8 @@
  * - See: style-child-theme.scss
  */
 
+@import "../../varia/sass/abstracts/color-variables";
+
 /**
  * Global
  */
@@ -67,42 +69,6 @@ $config-global: (
 		),
 	),
 
-	/* Colors */
-	"color": (
-		"primary": (
-			"default": #0C80A1,
-			"hover": darken(#0C80A1, 10%),
-		),
-		"secondary": (
-			"default": #D4401C,
-			"hover": darken(#D4401C, 10%),
-		),
-		"foreground": (
-			"default": #444444,
-			"light": #767676, // must be accessible against background-default
-			"dark": #222222, // must be accessible against background-default
-		),
-		"background": (
-			"default": white,
-			"light": #FAFAFA, // must be accessible against foreground-default
-			"dark": #EAEAEA, // must be accessible against foreground-default
-		),
-		"border": (
-			"default": #EAEAEA,
-			"light": #FAFAFA,
-			"dark": #DADADA,
-		),
-		"alert": (
-			"success": yellowgreen,
-			"info": skyblue,
-			"warning": gold,
-			"error": salmon,
-		),
-		"text-selection": lighten(#0C80A1, 55%),
-		"black": black,
-		"white": white,
-	),
-
 	/* Spacing */
 	"spacing": (
 		"unit": (2 * $baseline-unit), // 16px
@@ -139,6 +105,8 @@ $config-global: (
 	),
 );
 
+$config-global: map-merge($color-variables, $config-global);
+
 /**
  * Elements
  */

shawburn/style-editor.css

@@ -165,8 +165,8 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * - Reset the browser
  */
 body {
-	color: #444444;
-	background-color: white;
+	color: var(--wp--preset--color--foreground);
+	background-color: var(--wp--preset--color--background);
 	font-family: "PT Sans", Arial, sans-serif;
 	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
 	font-size: 18px;
@@ -186,11 +186,11 @@ p {
 }
 
 a {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 a:hover {
-	color: #085a72;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 button,
@@ -253,7 +253,7 @@ blockquote.alignright footer {
 }
 
 figcaption {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.69444rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -355,7 +355,7 @@ object {
 }
 
 .wp-block-a8c-blog-posts .entry-title a {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -365,7 +365,7 @@ object {
 }
 
 .wp-block-a8c-blog-posts .entry-title a:hover {
-	color: #085a72;
+	color: var(--wp--preset--color--primary-hover);
 	text-decoration: underline;
 }
 
@@ -388,7 +388,7 @@ object {
 }
 
 .wp-block-a8c-blog-posts .more-link:hover, .wp-block-a8c-blog-posts .more-link:active {
-	color: #085a72;
+	color: var(--wp--preset--color--primary-hover);
 	text-decoration: none;
 }
 
@@ -402,7 +402,7 @@ object {
 
 .wp-block-a8c-blog-posts .entry-meta,
 .wp-block-a8c-blog-posts .cat-links {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333em;
 }
 
@@ -436,7 +436,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: #085a72;
+	color: var(--wp--preset--color--primary-hover);
 	text-decoration: none;
 }
 
@@ -466,13 +466,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: 700;
 	font-family: "PT Sans", Arial, sans-serif;
 	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
 	font-size: 0.83333rem;
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 4px;
 	border-width: 0;
 	text-decoration: none;
@@ -495,8 +495,8 @@ object {
 }
 
 .wp-block-a8c-blog-posts + .button:not(.has-background):hover, .fse-template-part .main-navigation .button:not(.has-background):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: #085a72;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 /**
@@ -524,13 +524,13 @@ object {
 
 /* Default Style */
 .wp-block-button__link {
-	color: white;
+	color: var(--wp--preset--color--background);
 	font-weight: 700;
 	font-family: "PT Sans", Arial, sans-serif;
 	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
 	font-size: 0.83333em;
 	line-height: 1;
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 4px;
 	padding: 16px 24px;
 	/* Outline Style */
@@ -538,8 +538,8 @@ object {
 }
 
 .wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link.has-focus {
-	color: white;
-	background-color: #085a72;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 .wp-block-button__link.is-style-outline,
@@ -551,7 +551,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: #085a72;
+	color: var(--wp--preset--color--primary-hover);
 	background: transparent;
 }
 
@@ -562,20 +562,20 @@ object {
 
 /* Default Style */
 .button {
-	color: white;
+	color: var(--wp--preset--color--background);
 	font-weight: 700;
 	font-family: "PT Sans", Arial, sans-serif;
 	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
 	font-size: 0.83333em;
 	line-height: 1;
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 4px;
 	padding: 16px 24px;
 }
 
 .button:hover, .button:focus, .button.has-focus {
-	color: white;
-	background-color: #085a72;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 .wp-block-columns .wp-block[data-align=full],
@@ -586,8 +586,8 @@ object {
 
 .wp-block-cover,
 .wp-block-cover-image {
-	background-color: black;
-	color: white;
+	background-color: var(--wp--preset--color--black);
+	color: var(--wp--preset--color--white);
 	min-height: 576px;
 	margin-top: inherit;
 	margin-bottom: inherit;
@@ -597,8 +597,8 @@ object {
 
 .wp-block-cover.has-background-dim,
 .wp-block-cover-image.has-background-dim {
-	background-color: black;
-	color: white;
+	background-color: var(--wp--preset--color--black);
+	color: var(--wp--preset--color--white);
 }
 
 .wp-block-cover:not([class*='background-color']) .wp-block-cover__inner-container,
@@ -609,7 +609,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--white);
 }
 
 .wp-block-cover h2,
@@ -744,7 +744,7 @@ object {
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 	line-height: 1.78;
 }
@@ -802,11 +802,11 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote {
-	border-top-color: #EAEAEA;
+	border-top-color: var(--wp--preset--color--border);
 	border-top-width: 2px;
-	border-bottom-color: #EAEAEA;
+	border-bottom-color: var(--wp--preset--color--border);
 	border-bottom-width: 2px;
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 .wp-block-pullquote blockquote p {
@@ -828,7 +828,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: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 	letter-spacing: normal;
 }
@@ -838,7 +838,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,
@@ -848,11 +848,11 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote.is-style-solid-color:not(.has-background) {
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 }
 
 .wp-block-quote {
-	border-left-color: #0C80A1;
+	border-left-color: var(--wp--preset--color--primary);
 	padding-left: 16px;
 }
 
@@ -884,7 +884,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote .wp-block-quote__citation {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333em;
 	letter-spacing: normal;
 }
@@ -898,14 +898,14 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-separator,
 hr {
-	border-bottom: 1px solid #EAEAEA;
+	border-bottom: 1px 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: #EAEAEA;
+	border-right-color: var(--wp--preset--color--border);
 }
 
 .wp-block-separator.is-style-wide,
@@ -932,7 +932,7 @@ hr.is-style-dots.has-text-color:before {
 
 .wp-block-separator.is-style-dots:before,
 hr.is-style-dots:before {
-	color: #EAEAEA;
+	color: var(--wp--preset--color--border);
 }
 
 .has-background:not(.has-background-background-color) .wp-block-separator,
@@ -964,13 +964,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: #FAFAFA;
-	color: #444444;
+	background-color: var(--wp--preset--color--border-low-contrast);
+	color: var(--wp--preset--color--foreground);
 }
 
 pre.wp-block-verse {
 	font-family: monospace, monospace;
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 /**
@@ -978,7 +978,7 @@ pre.wp-block-verse {
  * - Needs a special styles
  */
 .editor-post-title__block .editor-post-title__input {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 	font-family: "PT Serif", Times, sans-serif;
 	font-family: var(--font-headings, "PT Serif", Times, sans-serif);
 	font-weight: 400;
@@ -989,42 +989,42 @@ pre.wp-block-verse {
 
 .wp-block .has-primary-color,
 .has-primary-color {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 .wp-block .has-secondary-color,
 .has-secondary-color {
-	color: #D4401C;
+	color: var(--wp--preset--color--secondary);
 }
 
 .wp-block .has-foreground-color,
 .has-foreground-color {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 .wp-block .has-foreground-light-color,
 .has-foreground-light-color {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 .wp-block .has-foreground-dark-color,
 .has-foreground-dark-color {
-	color: #222222;
+	color: var(--wp--preset--color--foreground-high-contrast);
 }
 
 .wp-block .has-background-light-color,
 .has-background-light-color {
-	color: #FAFAFA;
+	color: var(--wp--preset--color--background-high-contrast);
 }
 
 .wp-block .has-background-dark-color,
 .has-background-dark-color {
-	color: #EAEAEA;
+	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 p:not(.has-text-color),
@@ -1039,84 +1039,84 @@ pre.wp-block-verse {
 
 .has-primary-background-color,
 .has-primary-background-color.has-background-dim {
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 }
 
 .has-primary-background-color:not(.has-text-color),
 .has-primary-background-color.has-background-dim:not(.has-text-color) {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-secondary-background-color,
 .has-secondary-background-color.has-background-dim {
-	background-color: #D4401C;
+	background-color: var(--wp--preset--color--secondary);
 }
 
 .has-secondary-background-color:not(.has-text-color),
 .has-secondary-background-color.has-background-dim:not(.has-text-color) {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
-	background-color: #444444;
+	background-color: var(--wp--preset--color--foreground);
 }
 
 .has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-foreground-light-background-color,
 .has-foreground-light-background-color.has-background-dim {
-	background-color: #767676;
+	background-color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 .has-foreground-light-background-color:not(.has-text-color),
 .has-foreground-light-background-color.has-background-dim:not(.has-text-color) {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-foreground-dark-background-color,
 .has-foreground-dark-background-color.has-background-dim {
-	background-color: #222222;
+	background-color: var(--wp--preset--color--foreground-high-contrast);
 }
 
 .has-foreground-dark-background-color:not(.has-text-color),
 .has-foreground-dark-background-color.has-background-dim:not(.has-text-color) {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-background-light-background-color,
 .has-background-light-background-color.has-background-dim {
-	background-color: #FAFAFA;
+	background-color: var(--wp--preset--color--background-high-contrast);
 }
 
 .has-background-light-background-color:not(.has-text-color),
 .has-background-light-background-color.has-background-dim:not(.has-text-color) {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 .has-background-dark-background-color,
 .has-background-dark-background-color.has-background-dim {
-	background-color: #EAEAEA;
+	background-color: var(--wp--preset--color--background-low-contrast);
 }
 
 .has-background-dark-background-color:not(.has-text-color),
 .has-background-dark-background-color.has-background-dim:not(.has-text-color) {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 .has-background-background-color,
 .has-background-background-color.has-background-dim {
-	background-color: white;
+	background-color: var(--wp--preset--color--background);
 }
 
 .has-background-background-color:not(.has-text-color),
 .has-background-background-color.has-background-dim:not(.has-text-color) {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 .is-small-text,
@@ -1292,7 +1292,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);
 }
 
 .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 {
@@ -1398,7 +1398,7 @@ pre.wp-block-verse {
 }
 
 .fse-template-part .main-navigation {
-	color: white;
+	color: var(--wp--preset--color--white);
 }
 
 .fse-template-part .main-navigation > div {
@@ -1415,7 +1415,7 @@ pre.wp-block-verse {
 }
 
 .fse-template-part .main-navigation #toggle:focus + #toggle-menu {
-	background-color: white;
+	background-color: var(--wp--preset--color--white);
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -1531,7 +1531,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 +1548,7 @@ pre.wp-block-verse {
 }
 
 .fse-template-part .main-navigation a {
-	color: white;
+	color: var(--wp--preset--color--white);
 	display: block;
 	font-family: "PT Sans", Arial, sans-serif;
 	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
@@ -1563,11 +1563,11 @@ pre.wp-block-verse {
 }
 
 .fse-template-part .main-navigation a:link, .fse-template-part .main-navigation a:visited {
-	color: white;
+	color: var(--wp--preset--color--white);
 }
 
 .fse-template-part .main-navigation a:hover {
-	color: white;
+	color: var(--wp--preset--color--white);
 }
 
 .fse-template-part .main-navigation .sub-menu {
@@ -1635,13 +1635,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: 700;
 	font-family: "PT Sans", Arial, sans-serif;
 	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
 	font-size: 0.83333rem;
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 4px;
 	border-width: 0;
 	text-decoration: none;
@@ -1664,8 +1664,8 @@ pre.wp-block-verse {
 }
 
 .fse-template-part .main-navigation .button:not(.has-background):hover, .fse-template-part .main-navigation .button:focus, .fse-template-part .main-navigation .has-focus.button {
-	color: white;
-	background-color: #085a72;
+	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 {
@@ -1726,7 +1726,7 @@ pre.wp-block-verse {
  * Main Menu
  */
 #site-navigation, .fse-template-part .main-navigation {
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 	order: 2;
 	text-align: center;
 	width: 100%;
@@ -1737,7 +1737,7 @@ pre.wp-block-verse {
 .fse-template-part .main-navigation ul > li.focus > a,
 #site-navigation.main-navigation ul > li.current-menu-item > a,
 .fse-template-part .main-navigation ul > li.current-menu-item > a {
-	background-color: #085a72;
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 #site-navigation.main-navigation ul, .fse-template-part .main-navigation ul {
@@ -1770,7 +1770,7 @@ pre.wp-block-verse {
 		padding: 0;
 	}
 	#site-navigation.main-navigation ul.main-menu > li:after, .fse-template-part .main-navigation ul.main-menu > li:after {
-		color: #085a72;
+		color: var(--wp--preset--color--primary-hover);
 		content: "\2022";
 		display: inline;
 		font-size: 0.83333rem;
@@ -1783,7 +1783,7 @@ pre.wp-block-verse {
 }
 
 #site-navigation.main-navigation ul ul, .fse-template-part .main-navigation ul ul {
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 	box-shadow: none;
 }
 
@@ -1797,8 +1797,8 @@ pre.wp-block-verse {
  */
 .main-navigation #toggle:focus + #toggle-menu,
 #toggle-menu {
-	background: #0C80A1;
-	color: white;
+	background: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 	border-radius: 0;
 	text-align: center;
 	text-decoration: none;
@@ -1809,12 +1809,12 @@ pre.wp-block-verse {
 #toggle-menu:active,
 #toggle-menu:focus,
 #toggle-menu:hover {
-	background: #085a72;
-	color: white;
+	background: var(--wp--preset--color--primary-hover);
+	color: var(--wp--preset--color--background);
 }
 
 .main-navigation #toggle:checked ~ div {
-	border-top: 2px solid white;
+	border-top: 2px solid var(--wp--preset--color--background);
 }
 
 @media only screen and (min-width: 560px) {

shawburn/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: 700;
 	font-family: "PT Sans", Arial, sans-serif;
 	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
 	font-size: 0.83333rem;
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 4px;
 	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: #085a72;
+	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: #444444;
+	color: var(--wp--preset--color--foreground);
 	text-align: right;
-	background-color: white;
+	background-color: var(--wp--preset--color--background);
 }
 
 /**
  * Links styles
  */
 a {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 a:hover {
-	color: #085a72;
+	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: #444444;
+	color: var(--wp--preset--color--foreground);
 	display: block;
 	font-size: 1.2rem;
 	font-weight: bold;
@@ -783,11 +783,11 @@ footer {
 }
 
 ::selection {
-	background-color: #caf0fb;
+	background-color: var(--wp--preset--color--text-selection);
 }
 
 ::-moz-selection {
-	background-color: #caf0fb;
+	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 #EAEAEA;
+	color: var(--wp--preset--color--black);
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 4px;
 	padding: 8px;
 }
@@ -1092,12 +1092,12 @@ input[type="datetime"]:focus,
 input[type="datetime-local"]:focus,
 input[type="color"]:focus,
 textarea:focus {
-	color: black;
-	border-color: #085a72;
+	color: var(--wp--preset--color--black);
+	border-color: var(--wp--preset--color--primary-hover);
 }
 
 select {
-	border: 1px solid #EAEAEA;
+	border: 1px solid var(--wp--preset--color--border);
 }
 
 textarea {
@@ -1112,7 +1112,7 @@ input[type=checkbox] + label {
 }
 
 figcaption {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.69444rem;
 	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: #0C80A1;
+	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: #085a72;
+	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: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 }
 
@@ -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: #085a72;
+	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: 700;
 	font-family: "PT Sans", Arial, sans-serif;
 	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
 	font-size: 0.83333rem;
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 4px;
 	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: #085a72;
+	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: #0C80A1;
+	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: #0C80A1;
+	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: #085a72;
+	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: #444444;
+	color: var(--wp--preset--color--foreground);
 	font-size: 0.83333rem;
 	padding: 16px;
-	border-color: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 }
 
 .wp-block-code pre {
-	color: #444444;
+	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: black;
+	background-color: var(--wp--preset--color--black);
 	min-height: 576px;
 	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: black;
-	color: white;
+	background-color: var(--wp--preset--color--black);
+	color: var(--wp--preset--color--white);
 }
 
 .wp-block-cover .wp-block-cover__inner-container,
@@ -1630,8 +1630,8 @@ button[data-load-more-btn], .button {
 }
 
 .wp-block-file .wp-block-file__button {
-	background-color: #0C80A1;
-	color: white;
+	background-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 	font-size: 0.83333rem;
 	margin-right: 16px;
 	margin-left: 16px;
@@ -1645,7 +1645,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;
 }
 
@@ -1656,7 +1656,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.69444rem;
 }
 
@@ -1752,7 +1752,7 @@ h6, .h6 {
 }
 
 .wp-block-image figcaption {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.69444rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -1802,7 +1802,7 @@ img {
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 }
 
@@ -1840,7 +1840,7 @@ img {
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.69444rem;
 	line-height: 1.78;
 }
@@ -2013,8 +2013,8 @@ p.has-background {
 }
 
 .a8c-posts-list-item__featured span {
-	color: white;
-	background-color: #0C80A1;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary);
 	font-family: "PT Serif", Times, sans-serif;
 	font-family: var(--font-headings, "PT Serif", Times, sans-serif);
 	font-weight: bold;
@@ -2053,7 +2053,7 @@ p.has-background {
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 }
 
@@ -2062,7 +2062,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: #085a72;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__edit-link {
@@ -2074,11 +2074,11 @@ p.has-background {
 }
 
 .wp-block-pullquote {
-	border-top-color: #EAEAEA;
+	border-top-color: var(--wp--preset--color--border);
 	border-top-width: 2px;
-	border-bottom-color: #EAEAEA;
+	border-bottom-color: var(--wp--preset--color--border);
 	border-bottom-width: 2px;
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 .wp-block-pullquote blockquote p {
@@ -2100,7 +2100,7 @@ p.has-background {
 .wp-block-pullquote .wp-block-pullquote__citation,
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 	letter-spacing: normal;
 }
@@ -2110,7 +2110,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,
@@ -2120,11 +2120,11 @@ p.has-background {
 }
 
 .wp-block-pullquote.is-style-solid-color:not(.has-background) {
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 }
 
 .wp-block-quote {
-	border-right-color: #0C80A1;
+	border-right-color: var(--wp--preset--color--primary);
 	margin: 32px 0;
 	padding-right: 16px;
 	/**
@@ -2156,7 +2156,7 @@ p.has-background {
 .wp-block-quote .wp-block-quote__citation,
 .wp-block-quote cite,
 .wp-block-quote footer {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 	letter-spacing: normal;
 }
@@ -2183,7 +2183,7 @@ p.has-background {
 }
 
 .wp-block-quote[style*="text-align:right"], .wp-block-quote[style*="text-align: right"] {
-	border-left-color: #0C80A1;
+	border-left-color: var(--wp--preset--color--primary);
 }
 
 .wp-block-quote.is-style-large, .wp-block-quote.is-large {
@@ -2204,7 +2204,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: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 	letter-spacing: normal;
 }
@@ -2217,14 +2217,14 @@ p.has-background {
 }
 
 hr {
-	border-bottom: 1px solid #EAEAEA;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 	clear: both;
 	margin-right: auto;
 	margin-left: auto;
 }
 
 hr.wp-block-separator {
-	border-bottom: 1px solid #EAEAEA;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 	/**
 		 * Block Options
 		 */
@@ -2247,7 +2247,7 @@ hr.wp-block-separator.is-style-dots.has-background:before, hr.wp-block-separator
 }
 
 hr.wp-block-separator.is-style-dots:before {
-	color: #EAEAEA;
+	color: var(--wp--preset--color--border);
 	font-size: 1.728rem;
 	letter-spacing: 0.83333rem;
 	padding-right: 0.83333rem;
@@ -2305,12 +2305,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: #FAFAFA;
-	color: #444444;
+	background-color: var(--wp--preset--color--border-low-contrast);
+	color: var(--wp--preset--color--foreground);
 }
 
 .wp-block-video figcaption {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.69444rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -2400,36 +2400,36 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .has-primary-color {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 .has-secondary-color {
-	color: #D4401C;
+	color: var(--wp--preset--color--secondary);
 }
 
 .has-foreground-color {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 .has-foreground-light-color {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 .has-foreground-dark-color {
-	color: #222222;
+	color: var(--wp--preset--color--foreground-high-contrast);
 }
 
 .has-background-light-color {
-	color: #FAFAFA;
+	color: var(--wp--preset--color--background-high-contrast);
 }
 
 .has-background-dark-color {
-	color: #EAEAEA;
+	color: var(--wp--preset--color--background-low-contrast);
 }
 
 .has-background-dim,
 .has-background-color {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-background p:not(.has-text-color),
@@ -2444,84 +2444,84 @@ table.is-style-stripes tbody tr:nth-child(odd),
 
 .has-primary-background-color,
 .has-primary-background-color.has-background-dim {
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 }
 
 .has-primary-background-color:not(.has-text-color),
 .has-primary-background-color.has-background-dim:not(.has-text-color) {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-secondary-background-color,
 .has-secondary-background-color.has-background-dim {
-	background-color: #D4401C;
+	background-color: var(--wp--preset--color--secondary);
 }
 
 .has-secondary-background-color:not(.has-text-color),
 .has-secondary-background-color.has-background-dim:not(.has-text-color) {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
-	background-color: #444444;
+	background-color: var(--wp--preset--color--foreground);
 }
 
 .has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-foreground-light-background-color,
 .has-foreground-light-background-color.has-background-dim {
-	background-color: #767676;
+	background-color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 .has-foreground-light-background-color:not(.has-text-color),
 .has-foreground-light-background-color.has-background-dim:not(.has-text-color) {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-foreground-dark-background-color,
 .has-foreground-dark-background-color.has-background-dim {
-	background-color: #222222;
+	background-color: var(--wp--preset--color--foreground-high-contrast);
 }
 
 .has-foreground-dark-background-color:not(.has-text-color),
 .has-foreground-dark-background-color.has-background-dim:not(.has-text-color) {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-background-light-background-color,
 .has-background-light-background-color.has-background-dim {
-	background-color: #FAFAFA;
+	background-color: var(--wp--preset--color--background-high-contrast);
 }
 
 .has-background-light-background-color:not(.has-text-color),
 .has-background-light-background-color.has-background-dim:not(.has-text-color) {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 .has-background-dark-background-color,
 .has-background-dark-background-color.has-background-dim {
-	background-color: #EAEAEA;
+	background-color: var(--wp--preset--color--background-low-contrast);
 }
 
 .has-background-dark-background-color:not(.has-text-color),
 .has-background-dark-background-color.has-background-dim:not(.has-text-color) {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 .has-background-background-color,
 .has-background-background-color.has-background-dim {
-	background-color: white;
+	background-color: var(--wp--preset--color--background);
 }
 
 .has-background-background-color:not(.has-text-color),
 .has-background-background-color.has-background-dim:not(.has-text-color) {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 .is-small-text,
@@ -2692,11 +2692,11 @@ table.is-style-stripes tbody tr:nth-child(odd),
  * - Similar to Blocks but exist outside of the "current" editor context
  */
 .site-branding {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 .site-title {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 	font-family: "PT Serif", Times, sans-serif;
 	font-family: var(--font-headings, "PT Serif", Times, sans-serif);
 	letter-spacing: normal;
@@ -2712,7 +2712,7 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .site-title a:hover {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 .site-description {
@@ -2730,7 +2730,7 @@ body:not(.fse-enabled) .site-description {
 }
 
 .main-navigation {
-	color: white;
+	color: var(--wp--preset--color--white);
 }
 
 .main-navigation > div {
@@ -2747,7 +2747,7 @@ body:not(.fse-enabled) .site-description {
 }
 
 .main-navigation #toggle:focus + #toggle-menu {
-	background-color: white;
+	background-color: var(--wp--preset--color--white);
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -2863,7 +2863,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%;
@@ -2880,7 +2880,7 @@ body:not(.fse-enabled) .site-description {
 }
 
 .main-navigation a {
-	color: white;
+	color: var(--wp--preset--color--white);
 	display: block;
 	font-family: "PT Sans", Arial, sans-serif;
 	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
@@ -2895,11 +2895,11 @@ body:not(.fse-enabled) .site-description {
 }
 
 .main-navigation a:link, .main-navigation a:visited {
-	color: white;
+	color: var(--wp--preset--color--white);
 }
 
 .main-navigation a:hover {
-	color: white;
+	color: var(--wp--preset--color--white);
 }
 
 .main-navigation .sub-menu {
@@ -2962,13 +2962,13 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .social-navigation a {
-	color: white;
+	color: var(--wp--preset--color--white);
 	display: inline-block;
 	padding: 0 0;
 }
 
 .social-navigation a:hover {
-	color: white;
+	color: var(--wp--preset--color--white);
 }
 
 .social-navigation svg {
@@ -2990,7 +2990,7 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .site-info {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-family: "PT Serif", Times, sans-serif;
 	font-family: var(--font-headings, "PT Serif", Times, sans-serif);
 	font-size: 0.83333rem;
@@ -3018,7 +3018,7 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .site-info a:hover {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 .footer-navigation {
@@ -3040,7 +3040,7 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .footer-navigation .footer-menu {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	margin: 0;
 	padding-right: 0;
 }
@@ -3078,7 +3078,7 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .footer-navigation .footer-menu a:hover {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 body:not(.fse-enabled) .footer-menu a {
@@ -3093,7 +3093,7 @@ body:not(.fse-enabled) .footer-menu a {
 
 .entry-meta,
 .entry-footer {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	clear: both;
 	float: none;
 	font-size: 0.83333rem;
@@ -3130,7 +3130,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: #085a72;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 .entry-meta .svg-icon,
@@ -3331,13 +3331,13 @@ body:not(.fse-enabled) .footer-menu a {
  * Comment Lists
  */
 .comment-list {
-	border-bottom: 1px solid #EAEAEA;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 	padding-right: 0;
 	list-style: none;
 }
 
 .comment-list > li {
-	border-top: 1px solid #EAEAEA;
+	border-top: 1px solid var(--wp--preset--color--border);
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -3348,7 +3348,7 @@ body:not(.fse-enabled) .footer-menu a {
 }
 
 .comment-list .children > li {
-	border-top: 1px solid #EAEAEA;
+	border-top: 1px solid var(--wp--preset--color--border);
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -3395,7 +3395,7 @@ body:not(.fse-enabled) .footer-menu a {
 }
 
 .comment-meta .comment-metadata {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 	padding-left: 40px;
 }
 
@@ -3410,7 +3410,7 @@ body:not(.fse-enabled) .footer-menu a {
 }
 
 .comment-meta .comment-metadata a:hover, .comment-meta .comment-metadata a:active {
-	color: #085a72;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 @media only screen and (min-width: 560px) {
@@ -3600,8 +3600,8 @@ img#wpstats {
  * - Page specific styles
  */
 .sticky-post {
-	color: white;
-	background-color: #0C80A1;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary);
 	font-family: "PT Serif", Times, sans-serif;
 	font-family: var(--font-headings, "PT Serif", Times, sans-serif);
 	font-weight: bold;
@@ -3896,9 +3896,9 @@ body .widget_eu_cookie_law_widget.widget.top {
 }
 
 body .widget_eu_cookie_law_widget #eu-cookie-law {
-	background: white;
-	border: 1px solid #EAEAEA;
-	color: #444444;
+	background: var(--wp--preset--color--background);
+	border: 1px solid var(--wp--preset--color--border);
+	color: var(--wp--preset--color--foreground);
 	font-size: 0.83333rem;
 	line-height: inherit;
 	padding: 16px;
@@ -3911,18 +3911,18 @@ body .widget_eu_cookie_law_widget #eu-cookie-law {
 }
 
 body .widget_eu_cookie_law_widget #eu-cookie-law.negative {
-	background: #444444;
-	border-color: #222222;
-	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: #444444;
+	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: #EAEAEA;
+	background: var(--wp--preset--color--background-low-contrast);
 }
 
 body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
@@ -4016,7 +4016,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
  * General Helper Styles
  */
 body {
-	background: #444444;
+	background: var(--wp--preset--color--foreground);
 }
 
 .home.hide-homepage-title .hentry .entry-content > *:first-child.alignfull {
@@ -4054,7 +4054,7 @@ a {
 }
 
 #page {
-	background: white;
+	background: var(--wp--preset--color--background);
 	margin-right: auto;
 	margin-left: auto;
 }
@@ -4139,7 +4139,7 @@ hr.wp-block-separator.is-style-wide,
 
 #masthead .social-navigation ul li a {
 	align-items: center;
-	background: #0C80A1;
+	background: var(--wp--preset--color--primary);
 	border-radius: 50%;
 	display: flex;
 	height: 48px;
@@ -4148,7 +4148,7 @@ hr.wp-block-separator.is-style-wide,
 }
 
 #masthead .social-navigation ul li a:active, #masthead .social-navigation ul li a:focus, #masthead .social-navigation ul li a:hover {
-	background: #085a72;
+	background: var(--wp--preset--color--primary-hover);
 }
 
 /**
@@ -4239,13 +4239,13 @@ hr.wp-block-separator.is-style-wide,
 .a8c-posts-list-item__title a:active,
 .a8c-posts-list-item__title a:focus,
 .a8c-posts-list-item__title a:hover {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 .sticky-post,
 .a8c-posts-list .a8c-posts-list-item__featured span {
-	background: #FAFAFA;
-	color: #767676;
+	background: var(--wp--preset--color--background-high-contrast);
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
@@ -4279,7 +4279,7 @@ hr.wp-block-separator.is-style-wide,
 }
 
 .wp-block-separator {
-	border-bottom-color: #EAEAEA;
+	border-bottom-color: var(--wp--preset--color--border);
 	border-bottom-width: 1px;
 }
 
@@ -4287,7 +4287,7 @@ table td,
 table th,
 .wp-block-table td,
 .wp-block-table th {
-	border-color: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-title a {
@@ -4295,7 +4295,7 @@ table th,
 }
 
 .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: #0C80A1;
+	color: var(--wp--preset--color--primary);
 	text-decoration: none;
 }
 
@@ -4357,7 +4357,7 @@ table th,
 .widget_jp_blogs_i_follow ul,
 .widget_top-click ul,
 .widget_upcoming_events_widget ul {
-	border-bottom: 1px solid #EAEAEA;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 	list-style: none;
 	padding-right: 0;
 }
@@ -4377,7 +4377,7 @@ table th,
 .widget_jp_blogs_i_follow li,
 .widget_top-click li,
 .widget_upcoming_events_widget li {
-	border-top: 1px solid #EAEAEA;
+	border-top: 1px solid var(--wp--preset--color--border);
 	padding: 8px 0;
 }
 
@@ -4407,7 +4407,7 @@ table th,
  * Main Menu
  */
 #site-navigation, .fse-template-part .main-navigation {
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 	order: 2;
 	text-align: center;
 	width: 100%;
@@ -4418,7 +4418,7 @@ table th,
 .fse-template-part .main-navigation ul > li.focus > a,
 #site-navigation.main-navigation ul > li.current-menu-item > a,
 .fse-template-part .main-navigation ul > li.current-menu-item > a {
-	background-color: #085a72;
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 #site-navigation.main-navigation ul, .fse-template-part .main-navigation ul {
@@ -4451,7 +4451,7 @@ table th,
 		padding: 0;
 	}
 	#site-navigation.main-navigation ul.main-menu > li:after, .fse-template-part .main-navigation ul.main-menu > li:after {
-		color: #085a72;
+		color: var(--wp--preset--color--primary-hover);
 		content: "\2022";
 		display: inline;
 		font-size: 0.83333rem;
@@ -4464,7 +4464,7 @@ table th,
 }
 
 #site-navigation.main-navigation ul ul, .fse-template-part .main-navigation ul ul {
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 	box-shadow: none;
 }
 
@@ -4478,8 +4478,8 @@ table th,
  */
 .main-navigation #toggle:focus + #toggle-menu,
 #toggle-menu {
-	background: #0C80A1;
-	color: white;
+	background: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 	border-radius: 0;
 	text-align: center;
 	text-decoration: none;
@@ -4490,12 +4490,12 @@ table th,
 #toggle-menu:active,
 #toggle-menu:focus,
 #toggle-menu:hover {
-	background: #085a72;
-	color: white;
+	background: var(--wp--preset--color--primary-hover);
+	color: var(--wp--preset--color--background);
 }
 
 .main-navigation #toggle:checked ~ div {
-	border-top: 2px solid white;
+	border-top: 2px solid var(--wp--preset--color--background);
 }
 
 @media only screen and (min-width: 560px) {

shawburn/style-woocommerce-rtl.css

@@ -172,13 +172,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: 700;
 	font-family: "PT Sans", Arial, sans-serif;
 	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
 	font-size: 0.83333rem;
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 4px;
 	border-width: 0;
 	text-decoration: none;
@@ -282,8 +282,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: #085a72;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 /**
@@ -294,8 +294,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: gold;
-	color: #222222;
+	background-color: var(--wp--preset--color--alert-warning);
+	color: var(--wp--preset--color--foreground-high-contrast);
 	font-size: 0.83333rem;
 	font-weight: 700;
 	font-family: "PT Serif", Times, sans-serif;
@@ -331,7 +331,7 @@ body[class*="woocommerce"] #page .woocommerce-breadcrumb {
 	font-size: 1rem;
 	font-family: "PT Serif", Times, sans-serif;
 	font-family: var(--font-headings, "PT Serif", Times, sans-serif);
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page .woocommerce-breadcrumb a {
@@ -348,60 +348,60 @@ body[class*="woocommerce"] #page .woocommerce-error,
 body[class*="woocommerce"] #page .woocommerce-warning {
 	padding: 16px 64px 16px 32px;
 	margin-bottom: 32px;
-	background-color: #FAFAFA;
-	color: #222222;
-	border-top-color: #0C80A1;
+	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: skyblue;
+	color: var(--wp--preset--color--alert-info);
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--success {
-	color: yellowgreen;
+	color: var(--wp--preset--color--alert-success);
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--error {
-	color: salmon;
+	color: var(--wp--preset--color--alert-error);
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--warning {
-	color: gold;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 body[class*="woocommerce"] #page .woocommerce-message,
 body[class*="woocommerce"] #page .woocommerce-info {
-	border-top-color: skyblue;
+	border-top-color: var(--wp--preset--color--alert-info);
 }
 
 body[class*="woocommerce"] #page .woocommerce-message:before,
 body[class*="woocommerce"] #page .woocommerce-info:before {
-	color: skyblue;
+	color: var(--wp--preset--color--alert-info);
 }
 
 body[class*="woocommerce"] #page .woocommerce-success {
-	border-top-color: yellowgreen;
+	border-top-color: var(--wp--preset--color--alert-success);
 }
 
 body[class*="woocommerce"] #page .woocommerce-success:before {
-	color: yellowgreen;
+	color: var(--wp--preset--color--alert-success);
 }
 
 body[class*="woocommerce"] #page .woocommerce-error {
-	border-top-color: salmon;
+	border-top-color: var(--wp--preset--color--alert-error);
 }
 
 body[class*="woocommerce"] #page .woocommerce-error:before {
-	color: salmon;
+	color: var(--wp--preset--color--alert-error);
 }
 
 body[class*="woocommerce"] #page .woocommerce-warning {
-	border-top-color: gold;
+	border-top-color: var(--wp--preset--color--alert-warning);
 }
 
 body[class*="woocommerce"] #page .woocommerce-warning:before {
-	color: gold;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 /**
@@ -418,22 +418,22 @@ body[class*="woocommerce"] #page .woocommerce-password-strength {
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.strong {
-	background-color: yellowgreen;
+	background-color: var(--wp--preset--color--alert-success);
 	border-color: none;
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.good {
-	background-color: gold;
+	background-color: var(--wp--preset--color--alert-warning);
 	border-color: none;
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.short {
-	background-color: salmon;
+	background-color: var(--wp--preset--color--alert-error);
 	border-color: none;
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.bad {
-	background-color: salmon;
+	background-color: var(--wp--preset--color--alert-error);
 	border-color: none;
 }
 
@@ -453,7 +453,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;
 }
 
@@ -461,7 +461,7 @@ body[class*="woocommerce"] #page a.remove:hover {
  * Small Note
  */
 body[class*="woocommerce"] #page small.note {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 	margin-top: 16px;
 }
@@ -470,17 +470,17 @@ body[class*="woocommerce"] #page small.note {
  * Star ratings
  */
 body[class*="woocommerce"] #page .star-rating::before {
-	color: gold;
+	color: var(--wp--preset--color--alert-warning);
 	content: "\53\53\53\53\53";
 	opacity: 0.4;
 }
 
 body[class*="woocommerce"] #page .star-rating span {
-	color: gold;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 body[class*="woocommerce"] #page p.stars a {
-	color: gold;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 /**
@@ -488,7 +488,7 @@ body[class*="woocommerce"] #page p.stars a {
  */
 body[class*="woocommerce"] #page table.shop_table {
 	border-collapse: collapse;
-	border: 1px solid #EAEAEA;
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 0;
 	margin-bottom: 32px;
 }
@@ -505,32 +505,32 @@ body[class*="woocommerce"] #page table.shop_table td {
 }
 
 body[class*="woocommerce"] #page table.shop_table tr {
-	border-bottom: 1px solid #EAEAEA;
+	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: #EAEAEA;
+	border-top-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page table.shop_attributes {
-	border-top-color: #EAEAEA;
+	border-top-color: var(--wp--preset--color--border);
 	border-top-style: solid;
 	margin-bottom: 32px;
-	border-bottom: 1px solid #EAEAEA;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page table.shop_attributes th {
 	padding: 8px;
-	border-bottom-color: #EAEAEA;
+	border-bottom-color: var(--wp--preset--color--border);
 	border-bottom-style: solid;
 	line-height: 1.78;
 }
 
 body[class*="woocommerce"] #page table.shop_attributes td {
 	font-style: inherit;
-	border-bottom-color: #EAEAEA;
+	border-bottom-color: var(--wp--preset--color--border);
 	border-bottom-style: solid;
 	line-height: 1.78;
 	padding: 8px;
@@ -544,7 +544,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: #FAFAFA;
+	background: var(--wp--preset--color--background-high-contrast);
 }
 
 body[class*="woocommerce"] #page table.my_account_orders {
@@ -594,7 +594,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: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 }
 
 /**
@@ -639,17 +639,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: #D4401C;
+	color: var(--wp--preset--color--secondary);
 }
 
 #content .wc-block-grid .wc-block-grid__product-price {
-	color: #222222;
+	color: var(--wp--preset--color--foreground-high-contrast);
 	font-size: 1.2rem;
 	line-height: 1.125;
 }
 
 #content .wc-block-grid .wc-block-grid__product-price ins {
-	color: yellowgreen;
+	color: var(--wp--preset--color--alert-success);
 	font-weight: bold;
 	text-decoration: none;
 }
@@ -692,7 +692,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: #EAEAEA;
+	border-top-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .cart-collaterals .cart_totals > h2,
@@ -704,7 +704,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: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 }
 
@@ -722,12 +722,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: #767676;
+	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: gold;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 body[class*="woocommerce"] #page .cart-collaterals .shipping-calculator-button,
@@ -759,7 +759,7 @@ body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked ~
 }
 
 body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:focus + #toggle-cart {
-	background-color: white;
+	background-color: var(--wp--preset--color--white);
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -804,11 +804,11 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link > *:not
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .woocommerce-cart-subtotal {
-	color: white;
+	color: var(--wp--preset--color--white);
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .woocommerce-cart-count {
-	color: white;
+	color: var(--wp--preset--color--white);
 	font-weight: normal;
 }
 
@@ -865,8 +865,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: #0C80A1;
-	background-color: white;
+	color: var(--wp--preset--color--primary);
+	background-color: var(--wp--preset--color--white);
 	margin: 0;
 	float: left;
 }
@@ -965,7 +965,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: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers .svg-icon {
@@ -1026,7 +1026,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: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 }
 
 #woocommerce-wrapper ul.products li.product .button,
@@ -1044,7 +1044,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: #222222;
+	color: var(--wp--preset--color--foreground-high-contrast);
 	font-size: 1.2rem;
 	line-height: 1.125;
 }
@@ -1069,13 +1069,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.69444rem;
-	color: gold;
+	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: yellowgreen;
+	color: var(--wp--preset--color--alert-success);
 }
 
 /**
@@ -1093,8 +1093,8 @@ body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs {
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li {
-	background-color: #FAFAFA;
-	border-color: #EAEAEA;
+	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;
@@ -1102,7 +1102,7 @@ body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li {
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	padding-right: 16px;
 	padding-left: 16px;
 	padding-top: 8px;
@@ -1110,42 +1110,42 @@ body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a:hover {
-	color: #085a72;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active {
-	background-color: white;
-	border-color: #EAEAEA;
-	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: #222222;
+	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: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::before {
-	box-shadow: -2px 2px 0 #FAFAFA;
+	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 #FAFAFA;
+	box-shadow: 2px 2px 0 var(--wp--preset--color--background-high-contrast);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs::before {
-	border-bottom-color: #EAEAEA;
+	border-bottom-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs .panel {
@@ -1170,7 +1170,7 @@ body[class*="woocommerce"] #page {
 }
 
 body[class*="woocommerce"] #page #reviews h2 small {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 	margin: inherit;
 }
@@ -1188,7 +1188,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist li {
 }
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .meta {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 }
 
@@ -1197,7 +1197,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist li img.avatar
 	width: 48px;
 	height: auto;
 	background: transparent;
-	border-color: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 	margin: 0;
 	box-shadow: none;
 }
@@ -1209,7 +1209,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 #EAEAEA;
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 4px;
 	padding: 1em 1em 0;
 }
@@ -1232,7 +1232,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist ul.children .
 }
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist #respond {
-	border: 1px solid #EAEAEA;
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 4px;
 	padding: 1em 1em 0;
 	margin: 20px 50px 0 0;
@@ -1247,8 +1247,8 @@ body[class*="woocommerce"] #page #reviews #comments .commentlist > li::before {
  */
 body[class*="woocommerce"] .woocommerce-store-notice,
 body[class*="woocommerce"] p.demo_store {
-	background-color: #0C80A1;
-	color: white;
+	background-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 	position: fixed;
 	top: auto;
 	bottom: 0;
@@ -1553,7 +1553,7 @@ body[class*="woocommerce"] #page .woocommerce-order-overview.order_details {
 	justify-content: space-between;
 	align-content: flex-start;
 	align-items: stretch;
-	border: 1px solid #EAEAEA;
+	border: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li {
@@ -1571,7 +1571,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 #EAEAEA;
+	border-left: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li strong {
@@ -1593,7 +1593,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: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 	padding: 16px;
 	margin-top: inherit;
 	margin-bottom: inherit;
@@ -1607,7 +1607,7 @@ body[class*="woocommerce"] #page ul.order_details {
 
 body[class*="woocommerce"] #page .woocommerce-customer-details address {
 	border-radius: 0;
-	border-color: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 	border-left-width: 1px;
 	border-bottom-width: 1px;
 }
@@ -1621,7 +1621,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: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 	padding: 8px;
 	margin: 0 0 0 16px;
 }
@@ -1642,18 +1642,18 @@ body[class*="woocommerce"] #page .wc-proceed-to-checkout a.wcppec-checkout-butto
 
 body[class*="woocommerce"] #page .checkout .create-account small {
 	font-size: 0.69444rem;
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment {
 	background: transparent;
-	border: 1px solid #EAEAEA;
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 0;
 }
 
 body[class*="woocommerce"] #page #payment ul.payment_methods {
 	padding: 16px;
-	border-bottom-color: #EAEAEA;
+	border-bottom-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page #payment ul.payment_methods li {
@@ -1677,26 +1677,26 @@ body[class*="woocommerce"] #page #payment div.payment_box {
 	font-weight: bold;
 	border-radius: 0;
 	line-height: 1.78;
-	background-color: #EAEAEA;
-	color: #222222;
+	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: #EAEAEA;
-	border-top-color: #EAEAEA;
+	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: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box :-moz-placeholder {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box :-ms-input-placeholder {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-tokenInput {
@@ -1716,7 +1716,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.83333rem;
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box .form-row {
@@ -1728,7 +1728,7 @@ body[class*="woocommerce"] #page #payment div.payment_box p:last-child {
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box::before {
-	border-bottom-color: #EAEAEA;
+	border-bottom-color: var(--wp--preset--color--background-low-contrast);
 	/* arrow size / color */
 }
 
@@ -1744,11 +1744,11 @@ body[class*="woocommerce"] #page #payment .payment_method_paypal img {
 }
 
 body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
-	border-color: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-invalid #terms {
-	outline-color: salmon;
+	outline-color: var(--wp--preset--color--alert-error);
 }
 
 body[class*="woocommerce"] #page .checkout h3 {
@@ -1759,11 +1759,11 @@ body[class*="woocommerce"] #page .checkout h3 {
 }
 
 body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
-	border-color: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-invalid #terms {
-	outline-color: salmon;
+	outline-color: var(--wp--preset--color--alert-error);
 }
 
 /**
@@ -1797,7 +1797,7 @@ body[class*="woocommerce"] #page .woocommerce-MyAccount-content .woocommerce-not
 }
 
 body[class*="woocommerce"] #page .woocommerce-MyAccount-content fieldset {
-	border: 1px solid #EAEAEA;
+	border: 1px solid var(--wp--preset--color--border);
 	padding: 16px;
 	border-radius: 3px;
 }
@@ -1858,24 +1858,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: #FAFAFA;
+	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.2rem;
-	background: white;
+	background: var(--wp--preset--color--background);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__trigger::before {
-	border-color: #DADADA;
+	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: #DADADA;
+	background-color: var(--wp--preset--color--border-high-contrast);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary {
@@ -1884,7 +1884,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: #222222;
+	color: var(--wp--preset--color--foreground-high-contrast);
 	font-size: 1.728rem;
 	line-height: 1.125;
 }
@@ -1906,7 +1906,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.69444rem;
-	color: gold;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary p.stock {
@@ -1914,7 +1914,7 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary .stock {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary .out-of-stock {
@@ -1936,7 +1936,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: yellowgreen;
+	color: var(--wp--preset--color--alert-success);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.social {
@@ -2032,7 +2032,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: #EAEAEA;
+	border-right-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page ul.cart_list li dl dt,
@@ -2048,11 +2048,11 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .total {
 }
 
 body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list {
-	border-bottom: 1px solid #EAEAEA;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list li {
-	border-top: 1px solid #EAEAEA;
+	border-top: 1px solid var(--wp--preset--color--border);
 	padding: 16px 32px 16px 0;
 }
 
@@ -2069,11 +2069,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: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 }
 
 body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-widget-content {
-	background-color: #767676;
+	background-color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 /**
@@ -2102,8 +2102,8 @@ body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-
  */
 body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:focus + #toggle-cart,
 body[class*="woocommerce"] #page #toggle-cart {
-	background: #0C80A1;
-	color: white;
+	background: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 	border-radius: 0;
 	text-align: center;
 	text-decoration: none;
@@ -2114,12 +2114,12 @@ body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:focus + #t
 body[class*="woocommerce"] #page #toggle-cart:active,
 body[class*="woocommerce"] #page #toggle-cart:focus,
 body[class*="woocommerce"] #page #toggle-cart:hover {
-	background: #085a72;
-	color: white;
+	background: var(--wp--preset--color--primary-hover);
+	color: var(--wp--preset--color--background);
 }
 
 body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked ~ div {
-	border-top: 2px solid white;
+	border-top: 2px solid var(--wp--preset--color--background);
 }
 
 @media only screen and (min-width: 560px) {

shawburn/style-woocommerce.css

@@ -172,13 +172,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: 700;
 	font-family: "PT Sans", Arial, sans-serif;
 	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
 	font-size: 0.83333rem;
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 4px;
 	border-width: 0;
 	text-decoration: none;
@@ -282,8 +282,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: #085a72;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 /**
@@ -294,8 +294,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: gold;
-	color: #222222;
+	background-color: var(--wp--preset--color--alert-warning);
+	color: var(--wp--preset--color--foreground-high-contrast);
 	font-size: 0.83333rem;
 	font-weight: 700;
 	font-family: "PT Serif", Times, sans-serif;
@@ -331,7 +331,7 @@ body[class*="woocommerce"] #page .woocommerce-breadcrumb {
 	font-size: 1rem;
 	font-family: "PT Serif", Times, sans-serif;
 	font-family: var(--font-headings, "PT Serif", Times, sans-serif);
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page .woocommerce-breadcrumb a {
@@ -348,60 +348,60 @@ body[class*="woocommerce"] #page .woocommerce-error,
 body[class*="woocommerce"] #page .woocommerce-warning {
 	padding: 16px 32px 16px 64px;
 	margin-bottom: 32px;
-	background-color: #FAFAFA;
-	color: #222222;
-	border-top-color: #0C80A1;
+	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: skyblue;
+	color: var(--wp--preset--color--alert-info);
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--success {
-	color: yellowgreen;
+	color: var(--wp--preset--color--alert-success);
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--error {
-	color: salmon;
+	color: var(--wp--preset--color--alert-error);
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--warning {
-	color: gold;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 body[class*="woocommerce"] #page .woocommerce-message,
 body[class*="woocommerce"] #page .woocommerce-info {
-	border-top-color: skyblue;
+	border-top-color: var(--wp--preset--color--alert-info);
 }
 
 body[class*="woocommerce"] #page .woocommerce-message:before,
 body[class*="woocommerce"] #page .woocommerce-info:before {
-	color: skyblue;
+	color: var(--wp--preset--color--alert-info);
 }
 
 body[class*="woocommerce"] #page .woocommerce-success {
-	border-top-color: yellowgreen;
+	border-top-color: var(--wp--preset--color--alert-success);
 }
 
 body[class*="woocommerce"] #page .woocommerce-success:before {
-	color: yellowgreen;
+	color: var(--wp--preset--color--alert-success);
 }
 
 body[class*="woocommerce"] #page .woocommerce-error {
-	border-top-color: salmon;
+	border-top-color: var(--wp--preset--color--alert-error);
 }
 
 body[class*="woocommerce"] #page .woocommerce-error:before {
-	color: salmon;
+	color: var(--wp--preset--color--alert-error);
 }
 
 body[class*="woocommerce"] #page .woocommerce-warning {
-	border-top-color: gold;
+	border-top-color: var(--wp--preset--color--alert-warning);
 }
 
 body[class*="woocommerce"] #page .woocommerce-warning:before {
-	color: gold;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 /**
@@ -418,22 +418,22 @@ body[class*="woocommerce"] #page .woocommerce-password-strength {
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.strong {
-	background-color: yellowgreen;
+	background-color: var(--wp--preset--color--alert-success);
 	border-color: none;
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.good {
-	background-color: gold;
+	background-color: var(--wp--preset--color--alert-warning);
 	border-color: none;
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.short {
-	background-color: salmon;
+	background-color: var(--wp--preset--color--alert-error);
 	border-color: none;
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.bad {
-	background-color: salmon;
+	background-color: var(--wp--preset--color--alert-error);
 	border-color: none;
 }
 
@@ -453,7 +453,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;
 }
 
@@ -461,7 +461,7 @@ body[class*="woocommerce"] #page a.remove:hover {
  * Small Note
  */
 body[class*="woocommerce"] #page small.note {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 	margin-top: 16px;
 }
@@ -470,17 +470,17 @@ body[class*="woocommerce"] #page small.note {
  * Star ratings
  */
 body[class*="woocommerce"] #page .star-rating::before {
-	color: gold;
+	color: var(--wp--preset--color--alert-warning);
 	content: "\53\53\53\53\53";
 	opacity: 0.4;
 }
 
 body[class*="woocommerce"] #page .star-rating span {
-	color: gold;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 body[class*="woocommerce"] #page p.stars a {
-	color: gold;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 /**
@@ -488,7 +488,7 @@ body[class*="woocommerce"] #page p.stars a {
  */
 body[class*="woocommerce"] #page table.shop_table {
 	border-collapse: collapse;
-	border: 1px solid #EAEAEA;
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 0;
 	margin-bottom: 32px;
 }
@@ -505,32 +505,32 @@ body[class*="woocommerce"] #page table.shop_table td {
 }
 
 body[class*="woocommerce"] #page table.shop_table tr {
-	border-bottom: 1px solid #EAEAEA;
+	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: #EAEAEA;
+	border-top-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page table.shop_attributes {
-	border-top-color: #EAEAEA;
+	border-top-color: var(--wp--preset--color--border);
 	border-top-style: solid;
 	margin-bottom: 32px;
-	border-bottom: 1px solid #EAEAEA;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page table.shop_attributes th {
 	padding: 8px;
-	border-bottom-color: #EAEAEA;
+	border-bottom-color: var(--wp--preset--color--border);
 	border-bottom-style: solid;
 	line-height: 1.78;
 }
 
 body[class*="woocommerce"] #page table.shop_attributes td {
 	font-style: inherit;
-	border-bottom-color: #EAEAEA;
+	border-bottom-color: var(--wp--preset--color--border);
 	border-bottom-style: solid;
 	line-height: 1.78;
 	padding: 8px;
@@ -544,7 +544,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: #FAFAFA;
+	background: var(--wp--preset--color--background-high-contrast);
 }
 
 body[class*="woocommerce"] #page table.my_account_orders {
@@ -594,7 +594,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: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 }
 
 /**
@@ -639,17 +639,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: #D4401C;
+	color: var(--wp--preset--color--secondary);
 }
 
 #content .wc-block-grid .wc-block-grid__product-price {
-	color: #222222;
+	color: var(--wp--preset--color--foreground-high-contrast);
 	font-size: 1.2rem;
 	line-height: 1.125;
 }
 
 #content .wc-block-grid .wc-block-grid__product-price ins {
-	color: yellowgreen;
+	color: var(--wp--preset--color--alert-success);
 	font-weight: bold;
 	text-decoration: none;
 }
@@ -692,7 +692,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: #EAEAEA;
+	border-top-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .cart-collaterals .cart_totals > h2,
@@ -704,7 +704,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: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 }
 
@@ -722,12 +722,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: #767676;
+	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: gold;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 body[class*="woocommerce"] #page .cart-collaterals .shipping-calculator-button,
@@ -759,7 +759,7 @@ body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked ~
 }
 
 body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:focus + #toggle-cart {
-	background-color: white;
+	background-color: var(--wp--preset--color--white);
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -804,11 +804,11 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link > *:not
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .woocommerce-cart-subtotal {
-	color: white;
+	color: var(--wp--preset--color--white);
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .woocommerce-cart-count {
-	color: white;
+	color: var(--wp--preset--color--white);
 	font-weight: normal;
 }
 
@@ -865,8 +865,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: #0C80A1;
-	background-color: white;
+	color: var(--wp--preset--color--primary);
+	background-color: var(--wp--preset--color--white);
 	margin: 0;
 	float: right;
 }
@@ -965,7 +965,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: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers .svg-icon {
@@ -1026,7 +1026,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: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 }
 
 #woocommerce-wrapper ul.products li.product .button,
@@ -1044,7 +1044,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: #222222;
+	color: var(--wp--preset--color--foreground-high-contrast);
 	font-size: 1.2rem;
 	line-height: 1.125;
 }
@@ -1069,13 +1069,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.69444rem;
-	color: gold;
+	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: yellowgreen;
+	color: var(--wp--preset--color--alert-success);
 }
 
 /**
@@ -1093,8 +1093,8 @@ body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs {
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li {
-	background-color: #FAFAFA;
-	border-color: #EAEAEA;
+	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;
@@ -1102,7 +1102,7 @@ body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li {
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	padding-left: 16px;
 	padding-right: 16px;
 	padding-top: 8px;
@@ -1110,42 +1110,42 @@ body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a:hover {
-	color: #085a72;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active {
-	background-color: white;
-	border-color: #EAEAEA;
-	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: #222222;
+	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: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::before {
-	box-shadow: 2px 2px 0 #FAFAFA;
+	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 #FAFAFA;
+	box-shadow: -2px 2px 0 var(--wp--preset--color--background-high-contrast);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs::before {
-	border-bottom-color: #EAEAEA;
+	border-bottom-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs .panel {
@@ -1170,7 +1170,7 @@ body[class*="woocommerce"] #page {
 }
 
 body[class*="woocommerce"] #page #reviews h2 small {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 	margin: inherit;
 }
@@ -1188,7 +1188,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist li {
 }
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .meta {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 }
 
@@ -1197,7 +1197,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist li img.avatar
 	width: 48px;
 	height: auto;
 	background: transparent;
-	border-color: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 	margin: 0;
 	box-shadow: none;
 }
@@ -1209,7 +1209,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 #EAEAEA;
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 4px;
 	padding: 1em 1em 0;
 }
@@ -1232,7 +1232,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist ul.children .
 }
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist #respond {
-	border: 1px solid #EAEAEA;
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 4px;
 	padding: 1em 1em 0;
 	margin: 20px 0 0 50px;
@@ -1247,8 +1247,8 @@ body[class*="woocommerce"] #page #reviews #comments .commentlist > li::before {
  */
 body[class*="woocommerce"] .woocommerce-store-notice,
 body[class*="woocommerce"] p.demo_store {
-	background-color: #0C80A1;
-	color: white;
+	background-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 	position: fixed;
 	top: auto;
 	bottom: 0;
@@ -1553,7 +1553,7 @@ body[class*="woocommerce"] #page .woocommerce-order-overview.order_details {
 	justify-content: space-between;
 	align-content: flex-start;
 	align-items: stretch;
-	border: 1px solid #EAEAEA;
+	border: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li {
@@ -1571,7 +1571,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 #EAEAEA;
+	border-right: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li strong {
@@ -1593,7 +1593,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: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 	padding: 16px;
 	margin-top: inherit;
 	margin-bottom: inherit;
@@ -1607,7 +1607,7 @@ body[class*="woocommerce"] #page ul.order_details {
 
 body[class*="woocommerce"] #page .woocommerce-customer-details address {
 	border-radius: 0;
-	border-color: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 	border-right-width: 1px;
 	border-bottom-width: 1px;
 }
@@ -1621,7 +1621,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: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 	padding: 8px;
 	margin: 0 16px 0 0;
 }
@@ -1642,18 +1642,18 @@ body[class*="woocommerce"] #page .wc-proceed-to-checkout a.wcppec-checkout-butto
 
 body[class*="woocommerce"] #page .checkout .create-account small {
 	font-size: 0.69444rem;
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment {
 	background: transparent;
-	border: 1px solid #EAEAEA;
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 0;
 }
 
 body[class*="woocommerce"] #page #payment ul.payment_methods {
 	padding: 16px;
-	border-bottom-color: #EAEAEA;
+	border-bottom-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page #payment ul.payment_methods li {
@@ -1677,26 +1677,26 @@ body[class*="woocommerce"] #page #payment div.payment_box {
 	font-weight: bold;
 	border-radius: 0;
 	line-height: 1.78;
-	background-color: #EAEAEA;
-	color: #222222;
+	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: #EAEAEA;
-	border-top-color: #EAEAEA;
+	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: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box :-moz-placeholder {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box :-ms-input-placeholder {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-tokenInput {
@@ -1716,7 +1716,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.83333rem;
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box .form-row {
@@ -1728,7 +1728,7 @@ body[class*="woocommerce"] #page #payment div.payment_box p:last-child {
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box::before {
-	border-bottom-color: #EAEAEA;
+	border-bottom-color: var(--wp--preset--color--background-low-contrast);
 	/* arrow size / color */
 }
 
@@ -1744,11 +1744,11 @@ body[class*="woocommerce"] #page #payment .payment_method_paypal img {
 }
 
 body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
-	border-color: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-invalid #terms {
-	outline-color: salmon;
+	outline-color: var(--wp--preset--color--alert-error);
 }
 
 body[class*="woocommerce"] #page .checkout h3 {
@@ -1759,11 +1759,11 @@ body[class*="woocommerce"] #page .checkout h3 {
 }
 
 body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
-	border-color: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce-invalid #terms {
-	outline-color: salmon;
+	outline-color: var(--wp--preset--color--alert-error);
 }
 
 /**
@@ -1797,7 +1797,7 @@ body[class*="woocommerce"] #page .woocommerce-MyAccount-content .woocommerce-not
 }
 
 body[class*="woocommerce"] #page .woocommerce-MyAccount-content fieldset {
-	border: 1px solid #EAEAEA;
+	border: 1px solid var(--wp--preset--color--border);
 	padding: 16px;
 	border-radius: 3px;
 }
@@ -1858,24 +1858,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: #FAFAFA;
+	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.2rem;
-	background: white;
+	background: var(--wp--preset--color--background);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__trigger::before {
-	border-color: #DADADA;
+	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: #DADADA;
+	background-color: var(--wp--preset--color--border-high-contrast);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary {
@@ -1884,7 +1884,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: #222222;
+	color: var(--wp--preset--color--foreground-high-contrast);
 	font-size: 1.728rem;
 	line-height: 1.125;
 }
@@ -1906,7 +1906,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.69444rem;
-	color: gold;
+	color: var(--wp--preset--color--alert-warning);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary p.stock {
@@ -1914,7 +1914,7 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary .stock {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary .out-of-stock {
@@ -1936,7 +1936,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: yellowgreen;
+	color: var(--wp--preset--color--alert-success);
 }
 
 .single-product #page #woocommerce-wrapper div.product div.social {
@@ -2032,7 +2032,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: #EAEAEA;
+	border-left-color: var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page ul.cart_list li dl dt,
@@ -2048,11 +2048,11 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .total {
 }
 
 body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list {
-	border-bottom: 1px solid #EAEAEA;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 }
 
 body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list li {
-	border-top: 1px solid #EAEAEA;
+	border-top: 1px solid var(--wp--preset--color--border);
 	padding: 16px 0 16px 32px;
 }
 
@@ -2069,11 +2069,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: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 }
 
 body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-widget-content {
-	background-color: #767676;
+	background-color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 /**
@@ -2102,8 +2102,8 @@ body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-
  */
 body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:focus + #toggle-cart,
 body[class*="woocommerce"] #page #toggle-cart {
-	background: #0C80A1;
-	color: white;
+	background: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 	border-radius: 0;
 	text-align: center;
 	text-decoration: none;
@@ -2114,12 +2114,12 @@ body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:focus + #t
 body[class*="woocommerce"] #page #toggle-cart:active,
 body[class*="woocommerce"] #page #toggle-cart:focus,
 body[class*="woocommerce"] #page #toggle-cart:hover {
-	background: #085a72;
-	color: white;
+	background: var(--wp--preset--color--primary-hover);
+	color: var(--wp--preset--color--background);
 }
 
 body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked ~ div {
-	border-top: 2px solid white;
+	border-top: 2px solid var(--wp--preset--color--background);
 }
 
 @media only screen and (min-width: 560px) {

shawburn/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: 700;
 	font-family: "PT Sans", Arial, sans-serif;
 	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
 	font-size: 0.83333rem;
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 4px;
 	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: #085a72;
+	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: #444444;
+	color: var(--wp--preset--color--foreground);
 	text-align: left;
-	background-color: white;
+	background-color: var(--wp--preset--color--background);
 }
 
 /**
  * Links styles
  */
 a {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 a:hover {
-	color: #085a72;
+	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: #444444;
+	color: var(--wp--preset--color--foreground);
 	display: block;
 	font-size: 1.2rem;
 	font-weight: bold;
@@ -783,11 +783,11 @@ footer {
 }
 
 ::selection {
-	background-color: #caf0fb;
+	background-color: var(--wp--preset--color--text-selection);
 }
 
 ::-moz-selection {
-	background-color: #caf0fb;
+	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 #EAEAEA;
+	color: var(--wp--preset--color--black);
+	border: 1px solid var(--wp--preset--color--border);
 	border-radius: 4px;
 	padding: 8px;
 }
@@ -1092,12 +1092,12 @@ input[type="datetime"]:focus,
 input[type="datetime-local"]:focus,
 input[type="color"]:focus,
 textarea:focus {
-	color: black;
-	border-color: #085a72;
+	color: var(--wp--preset--color--black);
+	border-color: var(--wp--preset--color--primary-hover);
 }
 
 select {
-	border: 1px solid #EAEAEA;
+	border: 1px solid var(--wp--preset--color--border);
 }
 
 textarea {
@@ -1112,7 +1112,7 @@ input[type=checkbox] + label {
 }
 
 figcaption {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.69444rem;
 	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: #0C80A1;
+	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: #085a72;
+	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: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 }
 
@@ -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: #085a72;
+	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: 700;
 	font-family: "PT Sans", Arial, sans-serif;
 	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
 	font-size: 0.83333rem;
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 	border-radius: 4px;
 	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: #085a72;
+	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: #0C80A1;
+	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: #0C80A1;
+	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: #085a72;
+	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: #444444;
+	color: var(--wp--preset--color--foreground);
 	font-size: 0.83333rem;
 	padding: 16px;
-	border-color: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 }
 
 .wp-block-code pre {
-	color: #444444;
+	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: black;
+	background-color: var(--wp--preset--color--black);
 	min-height: 576px;
 	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: black;
-	color: white;
+	background-color: var(--wp--preset--color--black);
+	color: var(--wp--preset--color--white);
 }
 
 .wp-block-cover .wp-block-cover__inner-container,
@@ -1630,8 +1630,8 @@ button[data-load-more-btn], .button {
 }
 
 .wp-block-file .wp-block-file__button {
-	background-color: #0C80A1;
-	color: white;
+	background-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 	font-size: 0.83333rem;
 	margin-left: 16px;
 	margin-right: 16px;
@@ -1645,7 +1645,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;
 }
 
@@ -1656,7 +1656,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.69444rem;
 }
 
@@ -1752,7 +1752,7 @@ h6, .h6 {
 }
 
 .wp-block-image figcaption {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.69444rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -1802,7 +1802,7 @@ img {
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 }
 
@@ -1840,7 +1840,7 @@ img {
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.69444rem;
 	line-height: 1.78;
 }
@@ -2013,8 +2013,8 @@ p.has-background {
 }
 
 .a8c-posts-list-item__featured span {
-	color: white;
-	background-color: #0C80A1;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary);
 	font-family: "PT Serif", Times, sans-serif;
 	font-family: var(--font-headings, "PT Serif", Times, sans-serif);
 	font-weight: bold;
@@ -2053,7 +2053,7 @@ p.has-background {
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 }
 
@@ -2062,7 +2062,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: #085a72;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__edit-link {
@@ -2074,11 +2074,11 @@ p.has-background {
 }
 
 .wp-block-pullquote {
-	border-top-color: #EAEAEA;
+	border-top-color: var(--wp--preset--color--border);
 	border-top-width: 2px;
-	border-bottom-color: #EAEAEA;
+	border-bottom-color: var(--wp--preset--color--border);
 	border-bottom-width: 2px;
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 .wp-block-pullquote blockquote p {
@@ -2100,7 +2100,7 @@ p.has-background {
 .wp-block-pullquote .wp-block-pullquote__citation,
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 	letter-spacing: normal;
 }
@@ -2110,7 +2110,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,
@@ -2120,11 +2120,11 @@ p.has-background {
 }
 
 .wp-block-pullquote.is-style-solid-color:not(.has-background) {
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 }
 
 .wp-block-quote {
-	border-left-color: #0C80A1;
+	border-left-color: var(--wp--preset--color--primary);
 	margin: 32px 0;
 	padding-left: 16px;
 	/**
@@ -2156,7 +2156,7 @@ p.has-background {
 .wp-block-quote .wp-block-quote__citation,
 .wp-block-quote cite,
 .wp-block-quote footer {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 	letter-spacing: normal;
 }
@@ -2183,7 +2183,7 @@ p.has-background {
 }
 
 .wp-block-quote[style*="text-align:right"], .wp-block-quote[style*="text-align: right"] {
-	border-right-color: #0C80A1;
+	border-right-color: var(--wp--preset--color--primary);
 }
 
 .wp-block-quote.is-style-large, .wp-block-quote.is-large {
@@ -2204,7 +2204,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: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.83333rem;
 	letter-spacing: normal;
 }
@@ -2217,14 +2217,14 @@ p.has-background {
 }
 
 hr {
-	border-bottom: 1px solid #EAEAEA;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 	clear: both;
 	margin-left: auto;
 	margin-right: auto;
 }
 
 hr.wp-block-separator {
-	border-bottom: 1px solid #EAEAEA;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 	/**
 		 * Block Options
 		 */
@@ -2247,7 +2247,7 @@ hr.wp-block-separator.is-style-dots.has-background:before, hr.wp-block-separator
 }
 
 hr.wp-block-separator.is-style-dots:before {
-	color: #EAEAEA;
+	color: var(--wp--preset--color--border);
 	font-size: 1.728rem;
 	letter-spacing: 0.83333rem;
 	padding-left: 0.83333rem;
@@ -2305,12 +2305,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: #FAFAFA;
-	color: #444444;
+	background-color: var(--wp--preset--color--border-low-contrast);
+	color: var(--wp--preset--color--foreground);
 }
 
 .wp-block-video figcaption {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-size: 0.69444rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -2407,36 +2407,36 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .has-primary-color {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 .has-secondary-color {
-	color: #D4401C;
+	color: var(--wp--preset--color--secondary);
 }
 
 .has-foreground-color {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 .has-foreground-light-color {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 .has-foreground-dark-color {
-	color: #222222;
+	color: var(--wp--preset--color--foreground-high-contrast);
 }
 
 .has-background-light-color {
-	color: #FAFAFA;
+	color: var(--wp--preset--color--background-high-contrast);
 }
 
 .has-background-dark-color {
-	color: #EAEAEA;
+	color: var(--wp--preset--color--background-low-contrast);
 }
 
 .has-background-dim,
 .has-background-color {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-background p:not(.has-text-color),
@@ -2451,84 +2451,84 @@ table.is-style-stripes tbody tr:nth-child(odd),
 
 .has-primary-background-color,
 .has-primary-background-color.has-background-dim {
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 }
 
 .has-primary-background-color:not(.has-text-color),
 .has-primary-background-color.has-background-dim:not(.has-text-color) {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-secondary-background-color,
 .has-secondary-background-color.has-background-dim {
-	background-color: #D4401C;
+	background-color: var(--wp--preset--color--secondary);
 }
 
 .has-secondary-background-color:not(.has-text-color),
 .has-secondary-background-color.has-background-dim:not(.has-text-color) {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
-	background-color: #444444;
+	background-color: var(--wp--preset--color--foreground);
 }
 
 .has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-foreground-light-background-color,
 .has-foreground-light-background-color.has-background-dim {
-	background-color: #767676;
+	background-color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 .has-foreground-light-background-color:not(.has-text-color),
 .has-foreground-light-background-color.has-background-dim:not(.has-text-color) {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-foreground-dark-background-color,
 .has-foreground-dark-background-color.has-background-dim {
-	background-color: #222222;
+	background-color: var(--wp--preset--color--foreground-high-contrast);
 }
 
 .has-foreground-dark-background-color:not(.has-text-color),
 .has-foreground-dark-background-color.has-background-dim:not(.has-text-color) {
-	color: white;
+	color: var(--wp--preset--color--background);
 }
 
 .has-background-light-background-color,
 .has-background-light-background-color.has-background-dim {
-	background-color: #FAFAFA;
+	background-color: var(--wp--preset--color--background-high-contrast);
 }
 
 .has-background-light-background-color:not(.has-text-color),
 .has-background-light-background-color.has-background-dim:not(.has-text-color) {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 .has-background-dark-background-color,
 .has-background-dark-background-color.has-background-dim {
-	background-color: #EAEAEA;
+	background-color: var(--wp--preset--color--background-low-contrast);
 }
 
 .has-background-dark-background-color:not(.has-text-color),
 .has-background-dark-background-color.has-background-dim:not(.has-text-color) {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 .has-background-background-color,
 .has-background-background-color.has-background-dim {
-	background-color: white;
+	background-color: var(--wp--preset--color--background);
 }
 
 .has-background-background-color:not(.has-text-color),
 .has-background-background-color.has-background-dim:not(.has-text-color) {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 }
 
 .is-small-text,
@@ -2711,11 +2711,11 @@ table.is-style-stripes tbody tr:nth-child(odd),
  * - Similar to Blocks but exist outside of the "current" editor context
  */
 .site-branding {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 }
 
 .site-title {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 	font-family: "PT Serif", Times, sans-serif;
 	font-family: var(--font-headings, "PT Serif", Times, sans-serif);
 	letter-spacing: normal;
@@ -2731,7 +2731,7 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .site-title a:hover {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 .site-description {
@@ -2749,7 +2749,7 @@ body:not(.fse-enabled) .site-description {
 }
 
 .main-navigation {
-	color: white;
+	color: var(--wp--preset--color--white);
 }
 
 .main-navigation > div {
@@ -2766,7 +2766,7 @@ body:not(.fse-enabled) .site-description {
 }
 
 .main-navigation #toggle:focus + #toggle-menu {
-	background-color: white;
+	background-color: var(--wp--preset--color--white);
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -2882,7 +2882,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%;
@@ -2899,7 +2899,7 @@ body:not(.fse-enabled) .site-description {
 }
 
 .main-navigation a {
-	color: white;
+	color: var(--wp--preset--color--white);
 	display: block;
 	font-family: "PT Sans", Arial, sans-serif;
 	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
@@ -2914,11 +2914,11 @@ body:not(.fse-enabled) .site-description {
 }
 
 .main-navigation a:link, .main-navigation a:visited {
-	color: white;
+	color: var(--wp--preset--color--white);
 }
 
 .main-navigation a:hover {
-	color: white;
+	color: var(--wp--preset--color--white);
 }
 
 .main-navigation .sub-menu {
@@ -2981,13 +2981,13 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .social-navigation a {
-	color: white;
+	color: var(--wp--preset--color--white);
 	display: inline-block;
 	padding: 0 0;
 }
 
 .social-navigation a:hover {
-	color: white;
+	color: var(--wp--preset--color--white);
 }
 
 .social-navigation svg {
@@ -3009,7 +3009,7 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .site-info {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-family: "PT Serif", Times, sans-serif;
 	font-family: var(--font-headings, "PT Serif", Times, sans-serif);
 	font-size: 0.83333rem;
@@ -3037,7 +3037,7 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .site-info a:hover {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 .footer-navigation {
@@ -3059,7 +3059,7 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .footer-navigation .footer-menu {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	margin: 0;
 	padding-left: 0;
 }
@@ -3097,7 +3097,7 @@ body:not(.fse-enabled) .main-navigation a {
 }
 
 .footer-navigation .footer-menu a:hover {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 body:not(.fse-enabled) .footer-menu a {
@@ -3112,7 +3112,7 @@ body:not(.fse-enabled) .footer-menu a {
 
 .entry-meta,
 .entry-footer {
-	color: #767676;
+	color: var(--wp--preset--color--foreground-low-contrast);
 	clear: both;
 	float: none;
 	font-size: 0.83333rem;
@@ -3149,7 +3149,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: #085a72;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 .entry-meta .svg-icon,
@@ -3350,13 +3350,13 @@ body:not(.fse-enabled) .footer-menu a {
  * Comment Lists
  */
 .comment-list {
-	border-bottom: 1px solid #EAEAEA;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 	padding-left: 0;
 	list-style: none;
 }
 
 .comment-list > li {
-	border-top: 1px solid #EAEAEA;
+	border-top: 1px solid var(--wp--preset--color--border);
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -3367,7 +3367,7 @@ body:not(.fse-enabled) .footer-menu a {
 }
 
 .comment-list .children > li {
-	border-top: 1px solid #EAEAEA;
+	border-top: 1px solid var(--wp--preset--color--border);
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -3414,7 +3414,7 @@ body:not(.fse-enabled) .footer-menu a {
 }
 
 .comment-meta .comment-metadata {
-	color: #444444;
+	color: var(--wp--preset--color--foreground);
 	padding-right: 40px;
 }
 
@@ -3429,7 +3429,7 @@ body:not(.fse-enabled) .footer-menu a {
 }
 
 .comment-meta .comment-metadata a:hover, .comment-meta .comment-metadata a:active {
-	color: #085a72;
+	color: var(--wp--preset--color--primary-hover);
 }
 
 @media only screen and (min-width: 560px) {
@@ -3619,8 +3619,8 @@ img#wpstats {
  * - Page specific styles
  */
 .sticky-post {
-	color: white;
-	background-color: #0C80A1;
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary);
 	font-family: "PT Serif", Times, sans-serif;
 	font-family: var(--font-headings, "PT Serif", Times, sans-serif);
 	font-weight: bold;
@@ -3925,9 +3925,9 @@ body .widget_eu_cookie_law_widget.widget.top {
 }
 
 body .widget_eu_cookie_law_widget #eu-cookie-law {
-	background: white;
-	border: 1px solid #EAEAEA;
-	color: #444444;
+	background: var(--wp--preset--color--background);
+	border: 1px solid var(--wp--preset--color--border);
+	color: var(--wp--preset--color--foreground);
 	font-size: 0.83333rem;
 	line-height: inherit;
 	padding: 16px;
@@ -3940,18 +3940,18 @@ body .widget_eu_cookie_law_widget #eu-cookie-law {
 }
 
 body .widget_eu_cookie_law_widget #eu-cookie-law.negative {
-	background: #444444;
-	border-color: #222222;
-	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: #444444;
+	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: #EAEAEA;
+	background: var(--wp--preset--color--background-low-contrast);
 }
 
 body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
@@ -4045,7 +4045,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
  * General Helper Styles
  */
 body {
-	background: #444444;
+	background: var(--wp--preset--color--foreground);
 }
 
 .home.hide-homepage-title .hentry .entry-content > *:first-child.alignfull {
@@ -4083,7 +4083,7 @@ a {
 }
 
 #page {
-	background: white;
+	background: var(--wp--preset--color--background);
 	margin-left: auto;
 	margin-right: auto;
 }
@@ -4168,7 +4168,7 @@ hr.wp-block-separator.is-style-wide,
 
 #masthead .social-navigation ul li a {
 	align-items: center;
-	background: #0C80A1;
+	background: var(--wp--preset--color--primary);
 	border-radius: 50%;
 	display: flex;
 	height: 48px;
@@ -4177,7 +4177,7 @@ hr.wp-block-separator.is-style-wide,
 }
 
 #masthead .social-navigation ul li a:active, #masthead .social-navigation ul li a:focus, #masthead .social-navigation ul li a:hover {
-	background: #085a72;
+	background: var(--wp--preset--color--primary-hover);
 }
 
 /**
@@ -4268,13 +4268,13 @@ hr.wp-block-separator.is-style-wide,
 .a8c-posts-list-item__title a:active,
 .a8c-posts-list-item__title a:focus,
 .a8c-posts-list-item__title a:hover {
-	color: #0C80A1;
+	color: var(--wp--preset--color--primary);
 }
 
 .sticky-post,
 .a8c-posts-list .a8c-posts-list-item__featured span {
-	background: #FAFAFA;
-	color: #767676;
+	background: var(--wp--preset--color--background-high-contrast);
+	color: var(--wp--preset--color--foreground-low-contrast);
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
@@ -4308,7 +4308,7 @@ hr.wp-block-separator.is-style-wide,
 }
 
 .wp-block-separator {
-	border-bottom-color: #EAEAEA;
+	border-bottom-color: var(--wp--preset--color--border);
 	border-bottom-width: 1px;
 }
 
@@ -4316,7 +4316,7 @@ table td,
 table th,
 .wp-block-table td,
 .wp-block-table th {
-	border-color: #EAEAEA;
+	border-color: var(--wp--preset--color--border);
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-title a {
@@ -4324,7 +4324,7 @@ table th,
 }
 
 .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: #0C80A1;
+	color: var(--wp--preset--color--primary);
 	text-decoration: none;
 }
 
@@ -4386,7 +4386,7 @@ table th,
 .widget_jp_blogs_i_follow ul,
 .widget_top-click ul,
 .widget_upcoming_events_widget ul {
-	border-bottom: 1px solid #EAEAEA;
+	border-bottom: 1px solid var(--wp--preset--color--border);
 	list-style: none;
 	padding-left: 0;
 }
@@ -4406,7 +4406,7 @@ table th,
 .widget_jp_blogs_i_follow li,
 .widget_top-click li,
 .widget_upcoming_events_widget li {
-	border-top: 1px solid #EAEAEA;
+	border-top: 1px solid var(--wp--preset--color--border);
 	padding: 8px 0;
 }
 
@@ -4436,7 +4436,7 @@ table th,
  * Main Menu
  */
 #site-navigation, .fse-template-part .main-navigation {
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 	order: 2;
 	text-align: center;
 	width: 100%;
@@ -4447,7 +4447,7 @@ table th,
 .fse-template-part .main-navigation ul > li.focus > a,
 #site-navigation.main-navigation ul > li.current-menu-item > a,
 .fse-template-part .main-navigation ul > li.current-menu-item > a {
-	background-color: #085a72;
+	background-color: var(--wp--preset--color--primary-hover);
 }
 
 #site-navigation.main-navigation ul, .fse-template-part .main-navigation ul {
@@ -4480,7 +4480,7 @@ table th,
 		padding: 0;
 	}
 	#site-navigation.main-navigation ul.main-menu > li:after, .fse-template-part .main-navigation ul.main-menu > li:after {
-		color: #085a72;
+		color: var(--wp--preset--color--primary-hover);
 		content: "\2022";
 		display: inline;
 		font-size: 0.83333rem;
@@ -4493,7 +4493,7 @@ table th,
 }
 
 #site-navigation.main-navigation ul ul, .fse-template-part .main-navigation ul ul {
-	background-color: #0C80A1;
+	background-color: var(--wp--preset--color--primary);
 	box-shadow: none;
 }
 
@@ -4507,8 +4507,8 @@ table th,
  */
 .main-navigation #toggle:focus + #toggle-menu,
 #toggle-menu {
-	background: #0C80A1;
-	color: white;
+	background: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
 	border-radius: 0;
 	text-align: center;
 	text-decoration: none;
@@ -4519,12 +4519,12 @@ table th,
 #toggle-menu:active,
 #toggle-menu:focus,
 #toggle-menu:hover {
-	background: #085a72;
-	color: white;
+	background: var(--wp--preset--color--primary-hover);
+	color: var(--wp--preset--color--background);
 }
 
 .main-navigation #toggle:checked ~ div {
-	border-top: 2px solid white;
+	border-top: 2px solid var(--wp--preset--color--background);
 }
 
 @media only screen and (min-width: 560px) {