[Docs] Updating Text page and Sass guidelines and upgrading to variable font (#5078)

* Refactoring the Sass page as config object to get page sections into sidenav
* Updating text scaling example based on current theme
* Added `.eui-textNumber` utility class to apply `tnum` font-feature setting

Author: cchaos

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `37.6.2`.
+- Added `.eui-textNumber` utility class to apply `tnum` font-feature setting ([#5078](https://github.com/elastic/eui/pull/5078))
 
 ## [`37.6.2`](https://github.com/elastic/eui/tree/v37.6.2)
 

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];