Import the variables into the CSS

shawburn/sass/_global-variables.scss

@@ -5,7 +5,7 @@
 	--wp--preset--color--primary-hover: darken(#0C80A1, 10%);
 	--wp--preset--color--secondary: #D4401C;
 	--wp--preset--color--secondary-hover: darken(#D4401C, 10%);
-	--wp--preset--color--foreground: #444444,
+	--wp--preset--color--foreground: #444444;
 	--wp--preset--color--foreground-low-contrast: #767676;
 	--wp--preset--color--foreground-high-contrast: #222222;
 	--wp--preset--color--background: #ffffff;

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

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

shawburn/sass/style-child-theme.scss

@@ -29,6 +29,15 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
  */
 @import "../../varia/sass/abstracts/imports";
 
+/**
+* Global variables
+*/
+@import "global-variables";
+
+:root {
+	@include global-variables();
+}
+
 /**
  * Child Theme Name
  */

shawburn/style-editor.css

@@ -120,6 +120,33 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Add font-family using CSS variables.
  * It also adds the proper fallback for browsers without support.
  */
+/**
+* Global variables
+*/
+:root, body {
+	/* Colors */
+	--wp--preset--color--primary: #0C80A1;
+	--wp--preset--color--primary-hover: darken(#0C80A1, 10%);
+	--wp--preset--color--secondary: #D4401C;
+	--wp--preset--color--secondary-hover: darken(#D4401C, 10%);
+	--wp--preset--color--foreground: #444444;
+	--wp--preset--color--foreground-low-contrast: #767676;
+	--wp--preset--color--foreground-high-contrast: #222222;
+	--wp--preset--color--background: #ffffff;
+	--wp--preset--color--background-low-contrast: #EAEAEA;
+	--wp--preset--color--background-high-contrast: #FAFAFA;
+	--wp--preset--color--border: #EAEAEA;
+	--wp--preset--color--border-low-contrast: #DADADA;
+	--wp--preset--color--border-high-contrast: #FAFAFA;
+	--wp--preset--color--text-selection: lighten(#0C80A1, 55%);
+	--wp--preset--color--alert-success:yellowgreen;
+	--wp--preset--color--alert-info: skyblue;
+	--wp--preset--color--alert-warning: gold;
+	--wp--preset--color--alert-error: salmon;
+	--wp--preset--color--black: black;
+	--wp--preset--color--white: white;
+}
+
 /**
  * Child Theme Name
  */

shawburn/style-rtl.css

@@ -141,6 +141,33 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Add font-family using CSS variables.
  * It also adds the proper fallback for browsers without support.
  */
+/**
+* Global variables
+*/
+:root {
+	/* Colors */
+	--wp--preset--color--primary: #0C80A1;
+	--wp--preset--color--primary-hover: darken(#0C80A1, 10%);
+	--wp--preset--color--secondary: #D4401C;
+	--wp--preset--color--secondary-hover: darken(#D4401C, 10%);
+	--wp--preset--color--foreground: #444444;
+	--wp--preset--color--foreground-low-contrast: #767676;
+	--wp--preset--color--foreground-high-contrast: #222222;
+	--wp--preset--color--background: #ffffff;
+	--wp--preset--color--background-low-contrast: #EAEAEA;
+	--wp--preset--color--background-high-contrast: #FAFAFA;
+	--wp--preset--color--border: #EAEAEA;
+	--wp--preset--color--border-low-contrast: #DADADA;
+	--wp--preset--color--border-high-contrast: #FAFAFA;
+	--wp--preset--color--text-selection: lighten(#0C80A1, 55%);
+	--wp--preset--color--alert-success:yellowgreen;
+	--wp--preset--color--alert-info: skyblue;
+	--wp--preset--color--alert-warning: gold;
+	--wp--preset--color--alert-error: salmon;
+	--wp--preset--color--black: black;
+	--wp--preset--color--white: white;
+}
+
 /**
  * Child Theme Name
  */

shawburn/style.css

@@ -141,6 +141,33 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Add font-family using CSS variables.
  * It also adds the proper fallback for browsers without support.
  */
+/**
+* Global variables
+*/
+:root {
+	/* Colors */
+	--wp--preset--color--primary: #0C80A1;
+	--wp--preset--color--primary-hover: darken(#0C80A1, 10%);
+	--wp--preset--color--secondary: #D4401C;
+	--wp--preset--color--secondary-hover: darken(#D4401C, 10%);
+	--wp--preset--color--foreground: #444444;
+	--wp--preset--color--foreground-low-contrast: #767676;
+	--wp--preset--color--foreground-high-contrast: #222222;
+	--wp--preset--color--background: #ffffff;
+	--wp--preset--color--background-low-contrast: #EAEAEA;
+	--wp--preset--color--background-high-contrast: #FAFAFA;
+	--wp--preset--color--border: #EAEAEA;
+	--wp--preset--color--border-low-contrast: #DADADA;
+	--wp--preset--color--border-high-contrast: #FAFAFA;
+	--wp--preset--color--text-selection: lighten(#0C80A1, 55%);
+	--wp--preset--color--alert-success:yellowgreen;
+	--wp--preset--color--alert-info: skyblue;
+	--wp--preset--color--alert-warning: gold;
+	--wp--preset--color--alert-error: salmon;
+	--wp--preset--color--black: black;
+	--wp--preset--color--white: white;
+}
+
 /**
  * Child Theme Name
  */