Replace usage of $ouiFontFamily and $ouiCodeFontFamily with `--ou…

…i-font-family` and `--oui-code-font-family` CSS variables (#814) Signed-off-by: Miki <[email protected]>
opensearch-project · Jun 19, 2023 · a0e0bb5 · a0e0bb5
1 parent 27a5a29
commit a0e0bb5
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;