Add --farmos-map-accent-color CSS property

[paul121]

Fixes #181

The basic issue here is that we define the color: green style in two places. Platforms integrating farmOS-map need to override this CSS in two (in the future, maybe more) places in order to achieve consistent colors.

This introduces the concept of an "accent" color to farmOS-map as a custom CSS property --farmos-map-accent-color at the :root pseudo-class. I got this idea from Drupal Gin which uses these custom properties quite extensively. The custom CSS property is like a variable that all internal farmOS-map styles should reference. Outside of farmOS-map this variable can be overwritten, ideally at the map wrapper class instead of the global :root since custom CSS properties do inherit.

eg following this, for farmOS core we would need to make this change:

--- a/modules/core/ui/theme/css/map.css
+++ b/modules/core/ui/theme/css/map.css
@@ -1,6 +1,6 @@
 /* Set text color of map control buttons to match SVG color. */
-.farm-map .ol-control button {
-  color: var(--colorGinPrimary);
+.farm-map {
+  --farmos-map-accent-color: var(--colorGinPrimary);
 }

More of the spec is here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

[symbioquine]

Nice! I like this strategy a lot!

[mstenta]

Agreed! Great idea!

[symbioquine]

@paul121 Do you have a screenshot of the fix in place?

[paul121]

[paul121]

Force push for changelog reference. Thanks for the fast review @symbioquine @mstenta !