From 04065fa2fb60b41a9e40ac046c9137982dd3c761 Mon Sep 17 00:00:00 2001
From: Josh Romero <rmerqg@amazon.com>
Date: Mon, 7 Aug 2023 09:18:59 -0700
Subject: [PATCH] Fix --font-text CSS var usage and add more leaflet font
 overrides (#4674)

* Add missing quotes to --font-text CSS vars

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* Fix usage of --font-text CSS var

Remove quotes
Add additional leaflet font family overrides
Move legacy map custom button styles to separate file

Signed-off-by: Josh Romero <rmerqg@amazon.com>

---------

Signed-off-by: Josh Romero <rmerqg@amazon.com>
---
 .../src/global_styling/variables/_font.scss              | 2 +-
 src/plugins/maps_legacy/public/map/_custom_button.scss   | 8 ++++++++
 .../maps_legacy/public/map/_leaflet_overrides.scss       | 5 +++++
 src/plugins/maps_legacy/public/map/_legend.scss          | 9 ---------
 src/plugins/maps_legacy/public/map/index.scss            | 1 +
 5 files changed, 15 insertions(+), 10 deletions(-)
 create mode 100644 src/plugins/maps_legacy/public/map/_custom_button.scss

diff --git a/packages/osd-ui-framework/src/global_styling/variables/_font.scss b/packages/osd-ui-framework/src/global_styling/variables/_font.scss
index a93f1e6b9010..fc9b937563f3 100644
--- a/packages/osd-ui-framework/src/global_styling/variables/_font.scss
+++ b/packages/osd-ui-framework/src/global_styling/variables/_font.scss
@@ -1,6 +1,6 @@
 // Font
 
-$kuiFontFamily: "var(--font-text)";
+$kuiFontFamily: var(--font-text);
 $kuiFontSize: $euiFontSize;
 $kuiLineHeight: $euiLineHeight;
 $kuiSubTextFontSize: $euiFontSizeS;
diff --git a/src/plugins/maps_legacy/public/map/_custom_button.scss b/src/plugins/maps_legacy/public/map/_custom_button.scss
new file mode 100644
index 000000000000..e1e9675c4748
--- /dev/null
+++ b/src/plugins/maps_legacy/public/map/_custom_button.scss
@@ -0,0 +1,8 @@
+.mapButton {
+  display: inline-block;
+  font: normal normal normal 14px/1 FontAwesome, sans-serif;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/src/plugins/maps_legacy/public/map/_leaflet_overrides.scss b/src/plugins/maps_legacy/public/map/_leaflet_overrides.scss
index fedf8ddd60c4..9b039be17c50 100644
--- a/src/plugins/maps_legacy/public/map/_leaflet_overrides.scss
+++ b/src/plugins/maps_legacy/public/map/_leaflet_overrides.scss
@@ -17,6 +17,7 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
 
   .leaflet-container {
     background: $euiColorEmptyShade;
+    font-family: var(--font-text);
 
     // the heatmap layer plugin logs an error to the console when the map is in a 0-sized container
     min-width: 1px !important;
@@ -48,6 +49,10 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
     }
   }
 
+  .leaflet-draw-actions a {
+    font-family: var(--font-text);
+  }
+
   .leaflet-touch .leaflet-bar a:first-child {
     border-top-left-radius: $euiBorderRadius;
     border-top-right-radius: $euiBorderRadius;
diff --git a/src/plugins/maps_legacy/public/map/_legend.scss b/src/plugins/maps_legacy/public/map/_legend.scss
index 7c52edf352f1..32fc07f7960c 100644
--- a/src/plugins/maps_legacy/public/map/_legend.scss
+++ b/src/plugins/maps_legacy/public/map/_legend.scss
@@ -33,12 +33,3 @@
   left: $euiSizeXXL;
   white-space: nowrap;
 }
-
-.mapButton {
-  display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome, sans-serif;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
diff --git a/src/plugins/maps_legacy/public/map/index.scss b/src/plugins/maps_legacy/public/map/index.scss
index f2a91bbac621..920852612c95 100644
--- a/src/plugins/maps_legacy/public/map/index.scss
+++ b/src/plugins/maps_legacy/public/map/index.scss
@@ -1,2 +1,3 @@
+@import "./custom_button";
 @import "./leaflet_overrides";
 @import "./legend";