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);
}
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:
More of the spec is here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties