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 9337474ddf..dceb39c6e7 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; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; @@ -23,7 +23,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 967d42caee..293c86d23c 100644 --- a/src/global_styling/variables/_typography.scss +++ b/src/global_styling/variables/_typography.scss @@ -37,8 +37,10 @@ } // Families -$ouiFontFamily: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default; -$ouiCodeFontFamily: 'Source Code Pro', Consolas, Menlo, Courier, monospace !default; +// sass-lint:disable quotes +$ouiFontFamily: #{"'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"} !default; +$ouiCodeFontFamily: #{"'Source Code Pro', 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; diff --git a/src/themes/oui-cascadia/global_styling/index.scss b/src/themes/oui-cascadia/global_styling/index.scss index 7f29f463bd..59d6fcc1b5 100644 --- a/src/themes/oui-cascadia/global_styling/index.scss +++ b/src/themes/oui-cascadia/global_styling/index.scss @@ -23,5 +23,8 @@ // Utility classes provide one-off selectors for common css problems @import '../../../global_styling/utility/index'; +// CSS variables of SCSS variables +@import '../../../global_styling/css_variables/index'; + // The reset file makes use of variables and mixins @import 'reset/index'; diff --git a/src/themes/oui-cascadia/global_styling/mixins/_typography.scss b/src/themes/oui-cascadia/global_styling/mixins/_typography.scss index ed262ffda4..e9bbba5cba 100644 --- a/src/themes/oui-cascadia/global_styling/mixins/_typography.scss +++ b/src/themes/oui-cascadia/global_styling/mixins/_typography.scss @@ -15,7 +15,7 @@ // Redoing this mixin mainly to remove the letter-spacing @mixin ouiFont { - font-family: $ouiFontFamily; + font-family: var(--oui-font-family); font-weight: $ouiFontWeightRegular; letter-spacing: normal; -webkit-text-size-adjust: 100%; diff --git a/src/themes/oui-cascadia/global_styling/reset/_reset.scss b/src/themes/oui-cascadia/global_styling/reset/_reset.scss index 62c87fd515..655320a308 100644 --- a/src/themes/oui-cascadia/global_styling/reset/_reset.scss +++ b/src/themes/oui-cascadia/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 {