Issue #3192988 by Kingdutch: Expose primary platform color as CSS variable token

assets/css/tokens.css

@@ -8,6 +8,10 @@
  * EXPERIMENTAL: The tokens in this file are experimental and subject to change
  * they should not be relied upon by third-party code.
  */
+.react-scope {
+  --color-primary: #29abe2;
+}
+
 .button-background-primary {
   background-color: #29abe2;
 }

components/tokens.scss

@@ -10,6 +10,10 @@
  */
 @import 'settings';
 
+.react-scope {
+  --color-primary: #{$brand-primary};
+}
+
 .button-background-primary {
   background-color: $brand-primary;
 }

socialblue.libraries.yml

+# Token based styles for our modern UI.
+tokens:
+  css:
+    theme:
+      assets/css/tokens.css: {}
+
 # The SMACSS category "base" is loaded first.
 base:
   css: