From 7cd8b29c69fb55e4d42463a3b511ce2afb61ad13 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Mon, 19 Jun 2023 17:10:43 -0700
Subject: [PATCH] Replace usage of `$ouiFontFamily` and `$ouiCodeFontFamily`
 with `--oui-font-family` and `--oui-code-font-family` CSS variables (#814)
 (#821)

(cherry picked from commit a0e0bb5dc3f6787d4f2872da72c57a80a7cafd6c)

Signed-off-by: Miki <miki@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 src/components/suggest/_suggest_item.scss     | 2 +-
 src/global_styling/css_variables/_fonts.scss  | 9 +++++++++
 src/global_styling/css_variables/_index.scss  | 6 ++++++
 src/global_styling/index.scss                 | 3 +++
 src/global_styling/mixins/_typography.scss    | 4 ++--
 src/global_styling/reset/_reset.scss          | 4 ++--
 src/global_styling/variables/_typography.scss | 6 ++++--
 7 files changed, 27 insertions(+), 7 deletions(-)
 create mode 100644 src/global_styling/css_variables/_fonts.scss
 create mode 100644 src/global_styling/css_variables/_index.scss

diff --git a/src/components/suggest/_suggest_item.scss b/src/components/suggest/_suggest_item.scss
index 33b1a6af6c..443ca3462b 100644
--- a/src/components/suggest/_suggest_item.scss
+++ b/src/components/suggest/_suggest_item.scss
@@ -62,7 +62,7 @@
 
   .ouiSuggestItem__label {
     @include ouiTextTruncate;
-    font-family: $ouiCodeFontFamily;
+    font-family: var(--oui-code-font-family);
     overflow: hidden;
     text-overflow: ellipsis;
     padding: $ouiSizeXS $ouiSizeS;
diff --git a/src/global_styling/css_variables/_fonts.scss b/src/global_styling/css_variables/_fonts.scss
new file mode 100644
index 0000000000..4699a9bac2
--- /dev/null
+++ b/src/global_styling/css_variables/_fonts.scss
@@ -0,0 +1,9 @@
+/*!
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+:root {
+  --oui-font-family: #{$ouiFontFamily};
+  --oui-code-font-family: #{$ouiCodeFontFamily};
+}
diff --git a/src/global_styling/css_variables/_index.scss b/src/global_styling/css_variables/_index.scss
new file mode 100644
index 0000000000..d9d76577cf
--- /dev/null
+++ b/src/global_styling/css_variables/_index.scss
@@ -0,0 +1,6 @@
+/*!
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@import 'fonts';
diff --git a/src/global_styling/index.scss b/src/global_styling/index.scss
index 7d5f03d677..c4311847f7 100644
--- a/src/global_styling/index.scss
+++ b/src/global_styling/index.scss
@@ -23,5 +23,8 @@
 // Utility classes provide one-off selectors for common css problems
 @import 'utility/index';
 
+// CSS variables of SCSS variables
+@import 'css_variables/index';
+
 // The reset file makes use of variables and mixins
 @import 'reset/index';
diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
index 53fd5044b2..2d5ab518e0 100644
--- a/src/global_styling/mixins/_typography.scss
+++ b/src/global_styling/mixins/_typography.scss
@@ -15,7 +15,7 @@
 // Our base fonts
 
 @mixin ouiFont {
-  font-family: $ouiFontFamily;
+  font-family: var(--oui-font-family);
   font-weight: $ouiFontWeightRegular;
   letter-spacing: -.005em;
   -webkit-text-size-adjust: 100%;
@@ -24,7 +24,7 @@
 }
 
 @mixin ouiCodeFont {
-  font-family: $ouiCodeFontFamily;
+  font-family: var(--oui-code-font-family);
   letter-spacing: normal;
 }
 
diff --git a/src/global_styling/reset/_reset.scss b/src/global_styling/reset/_reset.scss
index f67f3aa3bb..fbf7164b32 100644
--- a/src/global_styling/reset/_reset.scss
+++ b/src/global_styling/reset/_reset.scss
@@ -41,7 +41,7 @@ time, mark, audio, video {
 }
 
 code, pre, kbd, samp {
-  font-family: $ouiCodeFontFamily;
+  font-family: var(--oui-code-font-family);
 }
 
 h1, h2, h3, h4, h5, h6, p {
@@ -51,7 +51,7 @@ h1, h2, h3, h4, h5, h6, p {
 }
 
 input, textarea, select, button {
-  font-family: $ouiFontFamily;
+  font-family: var(--oui-font-family);
 }
 
 em {
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
index 3fb41ee48d..c4d3590333 100644
--- a/src/global_styling/variables/_typography.scss
+++ b/src/global_styling/variables/_typography.scss
@@ -37,8 +37,10 @@
 }
 
 // Families
-$ouiFontFamily: 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
-$ouiCodeFontFamily: 'Roboto Mono', Consolas, Menlo, Courier, monospace !default;
+// sass-lint:disable quotes
+$ouiFontFamily: #{"'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"} !default;
+$ouiCodeFontFamily: #{"'Roboto Mono', Consolas, Menlo, Courier, monospace"} !default;
+// sass-lint:enable quotes
 
 // Careful using ligatures. Code editors like ACE will often error because of width calculations
 $ouiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;