[Docs] Updating Text page and Sass guidelines and upgrading to variable font

CHANGELOG.md

@@ -21,6 +21,7 @@ No public interface changes since `37.6.2`.
 - Updated `EuiSuperDatePicker` to pass a `data-test-subj` prop ([#5085](https://github.com/elastic/eui/pull/5085))
 - Added `euiTextBreakWord()` mixin to the `euiTitle()` mixin to ensure all titles break long words ([#5107](https://github.com/elastic/eui/pull/5107))
 - Added `euiTextBreakWord()` to `EuiFormLabels` ([#5107](https://github.com/elastic/eui/pull/5107))
+- Added `.eui-textNumber` utility class to apply `tnum` font-feature setting ([#5078](https://github.com/elastic/eui/pull/5078))
 
 **Bug fixes**
 

src-docs/src/routes.js

@@ -312,7 +312,7 @@ const createMarkdownExample = (example, title) => {
     name: title,
     component: () => (
       <GuidePage title={title}>
-        <GuideMarkdownFormat title={title} grow={false}>
+        <GuideMarkdownFormat grow={false}>
           {example.default}
         </GuideMarkdownFormat>
       </GuidePage>
@@ -331,10 +331,7 @@ const navigation = [
         name: 'Colors',
         component: ColorGuidelines,
       },
-      {
-        name: 'Sass',
-        component: SassGuidelines,
-      },
+      createExample(SassGuidelines, 'Sass'),
       createExample(WritingGuidelines, 'Writing'),
     ],
   },

src-docs/src/theme_amsterdam_dark.scss

@@ -1,5 +1,5 @@
 // sass-lint:disable no-url-domains, no-url-protocols
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap');
 
 @import '../../src/theme_amsterdam_dark';
 @import './components/index';

src-docs/src/theme_amsterdam_light.scss

@@ -1,5 +1,5 @@
 // sass-lint:disable no-url-domains, no-url-protocols
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap');
 
 @import '../../src/theme_amsterdam_light';
 @import './components/index';

src-docs/src/views/_index.scss

@@ -13,5 +13,5 @@ $guideDemoHighlightColor: transparentize($euiColorPrimary, .9);
 @import './selectable/search';
 @import './spacer/spacer';
 @import './suggest/index';
-@import './text_scaling/text_scaling';
+@import './text/text_scaling';
 @import './tree_view/tree_view';

src-docs/src/views/guidelines/_get_sass_vars.js

@@ -2,10 +2,13 @@ import lightColors from '!!sass-vars-to-js-loader!../../../../src/global_styling
 import darkColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui/eui_colors_dark.scss';
 import lightAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss';
 import darkAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss';
+import { useContext } from 'react';
+import { ThemeContext } from '../../components';
 
-export const getSassVars = (theme) => {
+export const useSassVars = () => {
+  const themeContext = useContext(ThemeContext);
   let palette;
-  switch (theme) {
+  switch (themeContext.theme) {
     case 'amsterdam-dark':
       palette = { ...darkColors, ...darkAmsterdamColors };
       break;

src-docs/src/views/guidelines/colors/_utilities.js

@@ -1,7 +1,6 @@
-import React, { useContext } from 'react';
-import { ThemeContext } from '../../../components';
+import React from 'react';
 import { calculateContrast, rgbToHex } from '../../../../../src/services';
-import { getSassVars } from '../_get_sass_vars';
+import { useSassVars } from '../_get_sass_vars';
 
 import { EuiBadge, EuiCopy, EuiFlexItem } from '../../../../../src/components';
 import { EuiIcon } from '../../../../../src/components/icon';
@@ -94,8 +93,7 @@ export const ColorsContrastItem = ({
   background,
   minimumContrast,
 }) => {
-  const themeContext = useContext(ThemeContext);
-  const palette = getSassVars(themeContext.theme);
+  const palette = useSassVars();
   const contrastRatings = getContrastRatings(background, foreground, palette);
 
   if (!contrastRatings || contrastRatings.contrast < minimumContrast) {

src-docs/src/views/guidelines/colors/color_section.js

@@ -1,6 +1,5 @@
-import React, { useContext } from 'react';
-import { ThemeContext } from '../../../components';
-import { getSassVars } from '../_get_sass_vars';
+import React from 'react';
+import { useSassVars } from '../_get_sass_vars';
 
 import {
   EuiIcon,
@@ -26,8 +25,7 @@ export const ColorSection = ({
   showTextVariants,
   children,
 }) => {
-  const theme = useContext(ThemeContext).theme;
-  const palette = getSassVars(theme);
+  const palette = useSassVars();
   const colorsForContrast = showTextVariants ? textVariants : allowedColors;
   const hex = getHexValueFromColorName(palette, color);
   const iconClass =

src-docs/src/views/guidelines/colors/core_palette.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getSassVars } from '../_get_sass_vars';
+import { useSassVars } from '../_get_sass_vars';
 
 import {
   EuiFlexGroup,
@@ -21,8 +21,8 @@ export function scrollToSelector(selector, attempts = 5) {
   }
 }
 
-export const CorePalette = ({ theme, colors }) => {
-  const palette = getSassVars(theme);
+export const CorePalette = ({ colors }) => {
+  const palette = useSassVars();
 
   function renderPaletteColor(palette, color, index) {
     const hex = palette[color];

src-docs/src/views/guidelines/colors/vis_palette.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getSassVars } from '../_get_sass_vars';
+import { useSassVars } from '../_get_sass_vars';
 
 import {
   EuiFlexGroup,
@@ -13,8 +13,8 @@ import {
 import { rgbToHex } from '../../../../../src/services';
 
 export const VisPalette = ({ variant }) => {
-  const visColors = getSassVars('light').euiPaletteColorBlind;
-  const visColorKeys = Object.keys(getSassVars('light').euiPaletteColorBlind);
+  const visColors = useSassVars().euiPaletteColorBlind;
+  const visColorKeys = Object.keys(useSassVars().euiPaletteColorBlind);
 
   function renderPaletteColor(palette, color, index, key) {
     const hex = key ? palette[color][key] : palette[color];

src-docs/src/views/guidelines/getting_started.md

@@ -144,26 +144,45 @@ Here is an example setup.
 // mytheme.scss
 $euiColorPrimary: #7B61FF;
 
-@import '@elastic/eui/src/theme_light.scss';
+@import '@elastic/eui/src/themes/eui/eui_colors_light.scss';
+@import '@elastic/eui/src/themes/eui/eui_globals.scss';
 ```
 
 ### Fonts
 
 By default, EUI ships with a font stack that includes some outside, open source fonts. If your system is internet available you can include these by adding the following imports to your SCSS/CSS files, otherwise you'll need to bundle the physical fonts in your build. EUI will drop to System Fonts (which you may prefer) in their absence.
 
 ```scss
-// index.scss
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
 @import url('https://rsms.me/inter/inter-ui.css');
 ```
 
 The Amsterdam theme uses the latest version of Inter that can be grabbed from Google Fonts as well.
 
 ```scss
-// index.scss
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 ```
 
+Or grab all weights, including italics, between 400 and 700 as a variable font.
+
+```scss
+@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap');
+```
+
+#### Embedding with `@font-face`
+
+If your application doesn't allow grabbing the font assets from a CDN, you'll need to download and locally provide the font files. You should download the files directly from their source site [rsms.me/inter/](https://rsms.me/inter/). Then follow the instructions in the provided CSS file for importing. We recommend using the single variable font file and importing with the following settings:
+
+```scss
+@font-face {
+  font-family: 'Inter';
+  font-weight: 300 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url("Inter.var.woff2") format("woff2");
+}
+```
+
 ### Reusing the variables in JavaScript
 
 The Sass variables are also made available for consumption as json files. This enables reuse of values in css-in-js systems like [styled-components](https://www.styled-components.com). As the following example shows, it can also make the downstream components theme-aware without much extra effort:
@@ -237,4 +256,4 @@ This eliminates the need to polyfill or transform the EUI build for an environme
 
 ### Mocked component files
 
-Besides babel transforms, the test environment build consumes mocked component files of the type `src/**/[name].testenv.*`. During the build, files of the type `src/**/[name].*` will be replaced by those with the `testenv` namespace. The purpose of this mocking is to further mitigate the impacts of time- and import-dependent rendering, and simplify environment output such as test snapshots. Information on creating mock component files can be found with [testing documentation](testing.md).
+Besides babel transforms, the test environment build consumes mocked component files of the type `src/**/[name].testenv.*`. During the build, files of the type `src/**/[name].*` will be replaced by those with the `testenv` namespace. The purpose of this mocking is to further mitigate the impacts of time- and import-dependent rendering, and simplify environment output such as test snapshots. Information on creating mock component files can be found with [testing documentation](testing.md).