(feat): style owc openkaarten components to theme primary variables

Author: YvetteNikolov

htdocs/wp-content/themes/owc-formulieren/assets/scss/components/_openkaarten.scss

@@ -0,0 +1,46 @@
+div#owc-openkaarten-streetmap {
+	--owc-filters-primary: var( --openkaarten-primary-color );
+	--search-primary-color: var( --openkaarten-primary-color );
+	--owc-openkaarten-streetmap--close-btn-color: var(
+		--openkaarten-primary-color
+	);
+	--button-color: var( --openkaarten-primary-color );
+	--owc-openkaarten-streetmap--primary-color: var(
+		--openkaarten-primary-color
+	);
+}
+
+.owc-openkaarten-streetmap__tooltip-card__button {
+	&:hover {
+		color: var( --open-kaarten-button-hover-color, #fff );
+		text-decoration: none;
+	}
+}
+
+// Overwrite all SVG's in the OWC Openkaarten Streetmap plugin
+.leaflet-control-filters,
+.owc-openkaarten-streetmap__tooltip-card__close-btn {
+	svg path {
+		fill: var( --openkaarten-primary-color );
+	}
+}
+
+.leaflet-control-list-view {
+	svg g {
+		stroke: var( --openkaarten-primary-color );
+	}
+}
+
+// List view overwrites
+.list-view .list-view__controls button:not( [class*='search'] ) {
+	border: 1px solid var( --openkaarten-primary-color );
+
+	svg path {
+		fill: var( --openkaarten-primary-color );
+	}
+
+	.leaflet-control-map-view__control-text,
+	span {
+		color: var( --openkaarten-primary-color );
+	}
+}

htdocs/wp-content/themes/owc-formulieren/assets/scss/settings/_root.scss

@@ -16,4 +16,9 @@
 	-------------------------------------------------------------- */
 	--denhaag-sidenav-link-hover-color: #{theme-color( 'primary' )};
 	--denhaag-sidenav-link-active-color: #{theme-color( 'primary' )};
+
+	/* --------------------------------------------------------------
+		Open Kaarten
+	-------------------------------------------------------------- */
+	--openkaarten-primary-color: #{theme-color( 'primary' )};
 }

htdocs/wp-content/themes/owc-formulieren/assets/scss/style.scss

@@ -35,6 +35,7 @@
 @import 'components/gravityforms-legacy';
 @import 'components/gravityforms-theme';
 @import 'components/navbar';
+@import 'components/openkaarten';
 @import 'components/progress-bar';
 @import 'components/sidebar';
 @import 'components/site-branding';