- Use {contrastFunction} to calculate the appropriate foreground color
- (usually text) based on a background color.
-
-
-
- Note that color contrast cannot be accurately detected when using
- transparency (colors with alpha channels).
-
-
-
- );
-
- let contrastBody;
- if (!showSass) {
- contrastBody = (
-
- If you want to use the same background color that the EUI theme uses
- for all of its contrast calculations, you can pass in the{' '}
- euiTheme as the background.
-
- }
- demo={}
- snippet={`const { euiTheme } = useEuiTheme();
- const textColor = makeHighContrastColor(foreground)(euiTheme);`}
- source={[
- {
- type: GuideSectionTypes.JS,
- code: ContrastBodySource,
- },
- ]}
- />
- );
- }
-
- return (
- <>
-
- {contrastBody}
-
- );
-};
diff --git a/src-docs/src/views/color/desaturate.js b/src-docs/src/views/color/desaturate.js
deleted file mode 100644
index 698a1314fff6..000000000000
--- a/src-docs/src/views/color/desaturate.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { Fragment } from 'react';
-
-import { desaturate } from '../../../../src/services';
-import { EuiFlexGrid, EuiFlexItem, EuiBadge } from '../../../../src/components';
-
-export default () => {
- const COLORS = ['#006837', 'rgb(165,0,38)', 'rgba(0,0,0,0.5)', 'pink'];
-
- return (
-
-
- {COLORS.map((color) => {
- const desaturated = desaturate(color, 0.75);
-
- return (
-
-
- desaturate(
- {color}, 0.75) ={' '}
- {desaturated}
-
-
- );
- })}
-
-
- );
-};
diff --git a/src-docs/src/views/color/intro.tsx b/src-docs/src/views/color/intro.tsx
deleted file mode 100644
index 5b348c04b84a..000000000000
--- a/src-docs/src/views/color/intro.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { useContext } from 'react';
-
-import { EuiText, EuiLink } from '../../../../src/components';
-import { ThemeContext } from '../../components/with_theme';
-
-export default () => {
- const themeContext = useContext(ThemeContext);
- const currentLanguage = themeContext.themeLanguage;
- const showSass = currentLanguage.includes('sass');
-
- return (
-
- {showSass ? (
-
- EUI provides some Sass color functions that we use throughout
- EUI's styling layer for color-specific calculations. When you
- need to go beyond the provided color set, always use these functions
- to modify.
-
- ) : (
-
- EUI's color functions use the lightweight color library{' '}
- chroma.js{' '}
- for calculations. This means that most functions accept most Chroma{' '}
-
- Color
- {' '}
- types.
-
- The makeHighContrastColor function does not take
- alpha channel into account and can therefore lead to incorrect
- contrast calculations.
-
-
- You can, instead, simulate transparency by first
- tinting or shading (depending on the color mode) the background
- color with the same transparency ratio. Then use the simulated color
- to calculate the contrast with the foreground.
-
-
-
- This method is not 100% accurate and has some inconstencies in the
- way mixing colors are calculated versus transparency. However, it
- is more likely to create the right contrast ratio
- than using transparency alone.
-
- When EUI simulates or calculates contrast, we typically mix the
- background color with euiTheme.colors.body which
- is the darkest version of backgrounds we allow.
-
-
- This effectively increases the contrast ratio when used on the empty
- shade, but ensures proper contrast when the element sits directly on
- the body color.
-
-
- ))}
-
-
- );
-};
diff --git a/src-docs/src/views/color/text/sections.tsx b/src-docs/src/views/color/text/sections.tsx
deleted file mode 100644
index e39458b11f92..000000000000
--- a/src-docs/src/views/color/text/sections.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { useContext } from 'react';
-import { EuiCode } from '../../../../../src';
-import { GuideSectionTypes } from '../../../components/guide_section/guide_section_types';
-import { GuideSection } from '../../../components/guide_section/guide_section';
-import { ThemeContext } from '../../../components/with_theme';
-
-// @ts-ignore Importing from JS file
-import IsColorDark from './is_color_dark';
-const isColorDarkSource = require('!!raw-loader!./is_color_dark');
-
-const contrastExample = `.lightOrDarkText {
- padding: $euiSize;
- display: inline-block;
- margin-right: $euiSize;
-
- &--primary {
- background-color: $euiColorPrimary;
- color: chooseLightOrDarkText($euiColorPrimary);
- }
-
- &--success {
- background-color: $euiColorSuccess;
- color: chooseLightOrDarkText($euiColorSuccess);
- }
-
- &--warning {
- background-color: $euiColorWarning;
- color: chooseLightOrDarkText($euiColorWarning);
- }
-
- &--danger {
- background-color: $euiColorDanger;
- color: chooseLightOrDarkText($euiColorDanger);
- }
-}`;
-
-export const TextSections = () => {
- const themeContext = useContext(ThemeContext);
- const currentLanguage = themeContext.themeLanguage;
- const showSass = currentLanguage.includes('sass');
-
- const source = [
- showSass
- ? {
- type: GuideSectionTypes.SASS,
- code: contrastExample,
- }
- : {
- type: GuideSectionTypes.TSX,
- code: isColorDarkSource,
- },
- ];
- const text = showSass ? (
- <>
- Use{' '}
-
- chooseLightOrDarkText($background, $lightText: $euiColorGhost,
- $darkText: $euiColorInk);
- {' '}
- to determine whether or not to use light (white) or dark (black) text
- against the given background color. The function will return either the
- light or dark text parameters depending on the value of the background
- color given.
-
- ) : (
- <>
-
- Use isColorDark(red, green, blue) to
- determine whether or not to use light or dark text against the given
- background color. It requires the values to be passed in as rgb integers
- and will return a boolean if the color is dark based
- on luminance.
-
-
- If the function returns true, use{' '}
- euiTheme.colors.ghost otherwise use{' '}
- euiTheme.colors.ink as the text color.
-
- If you are affording for both light and dark themes, you can use a
- single function{' '}
-
- tintOrShade($color, $tint_percent, $shade_percent)
- {' '}
- to shade or tint based on the color mode. Taking the success color above
- we can tint the color in the light mode, but shade it in the dark mode.
- This makes the background color more subtle in both color modes. The
- opposite function{' '}
-
- shadeOrTint($color, $shade_percent, $tint_percent)
- {' '}
- also exists.
-
- );
- const demo = (
-
- This success color is tinted in light mode and shaded in dark.
-
- These components will either render or not render their children
- based on the current window width. Pass an array of named
- breakpoints to the sizes prop to either show or
- hide their children respectively.
-
-
-
- The sizing options correlate with the keys in the{' '}
- EuiBreakpoints type. The named
- breakpoint starts at the pixel value provided and ends before the
- next one.
-
- These text utilities are available primarily as CSS classes to aid in
- quickly styling your text. Some utilities are additionally available as
- either CSS-in-JS or Sass mixins to optionally compose within your own
- custom styles.
-
+ The sizing options correlate with the keys in the{' '}
+ EuiBreakpoints type. The named
+ breakpoint starts at the pixel value provided and ends before the
+ next one.
+
+ The EuiShowFor wrapping utility component will
+ not render its children unless the window width
+ matches the range of one of the named breakpoints provided to the{' '}
+ sizes prop.
+
+ The EuiHideFor wrapping utility component will
+ not render its children while the window width
+ matches the range of one of the named breakpoints provided to the{' '}
+ sizes prop.
+
+ Similar to the wrapping components, these classes will hide or show
+ the element based on the current current width matching the range of
+ the declared size. However, they simply utilize
+ the display property which means they will still
+ render in the DOM.
+
+
+
+
+
+
+ );
+};
diff --git a/src-docs/src/views/theme/breakpoints/breakpoints.tsx b/src-docs/src/views/theme/breakpoints/breakpoints.tsx
index a70761933a7a..ca7f5bb861da 100644
--- a/src-docs/src/views/theme/breakpoints/breakpoints.tsx
+++ b/src-docs/src/views/theme/breakpoints/breakpoints.tsx
@@ -1,16 +1,16 @@
import React, { useContext, useMemo } from 'react';
-import { Link } from 'react-router-dom';
import { EuiSpacer, EuiText } from '../../../../../src';
-import { GuideTabbedPage } from '../../../components/guide_tabbed_page';
import { GuideSection } from '../../../components/guide_section/guide_section';
import { ThemeContext } from '../../../components/with_theme';
-import { ThemeNotice } from '../_components/_theme_notice';
-
import JSContent, { BreakpointValuesJS } from './_breakpoints_js';
import SassContent, { BreakpointValuesSass } from './_breakpoints_sass';
+export const breakpointSections = [
+ { title: 'Default values', id: 'default-values' },
+];
+
export default () => {
const themeContext = useContext(ThemeContext);
const currentLanguage = themeContext.themeLanguage;
@@ -27,22 +27,12 @@ export default () => {
}, [showSass]);
return (
- }
- showThemeLanguageToggle
- description={
- <>
- For most of your usages we recommend using the{' '}
- responsive utilities{' '}
- instead of consuming these theme tokens directly.
-
- }
- >
+ <>
-
Default values
+
{`${breakpointSections[0].title}`}
If you want to align your custom responsive styles with EUI's
breakpoints, or when using components that accept our named
@@ -56,6 +46,6 @@ export default () => {
{valuesContent}
-
+
);
};
diff --git a/src-docs/src/views/theme/breakpoints/breakpoints_example.tsx b/src-docs/src/views/theme/breakpoints/breakpoints_example.tsx
new file mode 100644
index 000000000000..8f0925c4fa7c
--- /dev/null
+++ b/src-docs/src/views/theme/breakpoints/breakpoints_example.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { ThemeNotice } from '../_components/_theme_notice';
+
+import BreakpointValues, { breakpointSections } from './breakpoints';
+
+import BreakpointUtilities, {
+ breakpointUtilitySections,
+} from './breakpoint_utilities';
+
+export const BreakpointsExample = {
+ title: 'Breakpoints',
+ notice: ,
+ showThemeLanguageToggle: true,
+ description: (
+ <>
+ For most of your usages we recommend using the{' '}
+ responsive utilities{' '}
+ instead of consuming the theme values directly.
+
+ ),
+ pages: [
+ {
+ title: 'Values',
+ page: BreakpointValues,
+ sections: breakpointSections,
+ },
+ {
+ title: 'Utilities',
+ page: BreakpointUtilities,
+ sections: breakpointUtilitySections,
+ },
+ ],
+};
diff --git a/src-docs/src/views/theme/breakpoints/hide_for.tsx b/src-docs/src/views/theme/breakpoints/hide_for.tsx
new file mode 100644
index 000000000000..dbba715fdee8
--- /dev/null
+++ b/src-docs/src/views/theme/breakpoints/hide_for.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { EuiCode, EuiHideFor, EuiText } from '../../../../../src/components';
+
+export default () => (
+
+
+
+ Hiding from {'"none"'} of the screen sizes
+
+
+
+
+ Hiding from xs screens only
+
+
+
+
+ Hiding from xs, s screens
+
+
+
+
+ Hiding from xs, s, m, l screens
+
+
+
+
+ Hiding from xl screens only
+
+
+
+);
diff --git a/src-docs/src/views/responsive/responsive.js b/src-docs/src/views/theme/breakpoints/show_for.tsx
similarity index 52%
rename from src-docs/src/views/responsive/responsive.js
rename to src-docs/src/views/theme/breakpoints/show_for.tsx
index bfdb456b904a..8dcc4e8d6bd2 100644
--- a/src-docs/src/views/responsive/responsive.js
+++ b/src-docs/src/views/theme/breakpoints/show_for.tsx
@@ -1,43 +1,9 @@
import React from 'react';
-import {
- EuiCode,
- EuiHideFor,
- EuiShowFor,
- EuiText,
- EuiSpacer,
-} from '../../../../src/components';
+import { EuiCode, EuiShowFor, EuiText } from '../../../../../src/components';
export default () => (
-
-
- Hiding from {'"none"'} of the screen sizes
-
-
-
-
- Hiding from xs screens only
-
-
-
-
- Hiding from xs, s screens
-
-
-
-
- Hiding from xs, s, m, l screens
-
-
-
-
- Hiding from xl screens only
-
-
-
-
-
Showing for {'"all"'} of the screen sizes
diff --git a/src-docs/src/views/responsive/utility_classes_responsive.tsx b/src-docs/src/views/theme/breakpoints/utility_classes_responsive.tsx
similarity index 89%
rename from src-docs/src/views/responsive/utility_classes_responsive.tsx
rename to src-docs/src/views/theme/breakpoints/utility_classes_responsive.tsx
index a9b0c1e516fb..e0a8c57d70d1 100644
--- a/src-docs/src/views/responsive/utility_classes_responsive.tsx
+++ b/src-docs/src/views/theme/breakpoints/utility_classes_responsive.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { EuiCode, EuiSpacer, EuiText } from '../../../../src/components';
-import { ThemeExample } from '../theme/_components/_theme_example';
+import { EuiCode, EuiSpacer } from '../../../../../src/components';
+import { ThemeExample } from '../_components/_theme_example';
const wrappingExampleStyle = {
background: 'rgba(254, 228, 181, 0.5)',
@@ -15,13 +15,6 @@ const wrappingDivExampleStyle = {
export default () => (
<>
-
-
- Breakpoint sizes are based on the overall browser window width. They
- start at the mininumum values listed below until 1px before the next
- breakpoint.
-
Returns just the computed background color for the given{' '}
@@ -333,17 +340,65 @@ const cssStyles = [colorStyles['accent']];
export const UtilsValuesJS = () => {
const euiTheme = useEuiTheme();
+ const backgroundButtons = ['opaque', 'transparent'].map((m) => {
+ return {
+ id: m,
+ label: m,
+ };
+ });
+ const [backgroundSelected, setBackgroundSelected] = useState(
+ backgroundButtons[0].id
+ );
return (
- {
- return {
- id: color,
- token: `useEuiBackgroundColor('${color}')`,
- value: euiBackgroundColor(euiTheme, color),
- };
- })}
- render={(item) => }
- />
+ <>
+
+ Different colors for different contexts}
+ description={
+
+ While the hook accepts rendering the value as opaque or
+ transparent, we highly suggest reserving transparent for use only
+ during interactive states like hover and focus.
+
+ );
+
+ const snippet: GuideSection['snippet'] = showSass
+ ? contrastExample
+ : 'color: ${makeHighContrastColor(foreground)(background)};';
+
+ let contrastBody;
+ if (!showSass) {
+ contrastBody = (
+
+ If you want to use the same background color that the EUI theme uses
+ for all of its contrast calculations, you can pass in the{' '}
+ euiTheme as the background.
+
+ }
+ example={
+
+ Note that color contrast cannot be accurately detected when using
+ transparency (colors with alpha channels).
+
+
+
+ {contrastBody}
+
+ );
+};
diff --git a/src-docs/src/views/theme/color/_functions_isDark.tsx b/src-docs/src/views/theme/color/_functions_isDark.tsx
new file mode 100644
index 000000000000..a0ad01a56231
--- /dev/null
+++ b/src-docs/src/views/theme/color/_functions_isDark.tsx
@@ -0,0 +1,89 @@
+import React, { useContext } from 'react';
+import { css } from '@emotion/react';
+import { EuiCode, isColorDark, useEuiTheme } from '../../../../../src';
+import { ThemeContext } from '../../../components/with_theme';
+import { ThemeExample } from '../_components/_theme_example';
+
+const contrastExample = `.lightOrDarkText {
+ background-color: $euiColorPrimary;
+ color: chooseLightOrDarkText($euiColorPrimary);
+}`;
+
+export const TextSections = () => {
+ const { euiTheme } = useEuiTheme();
+ const themeContext = useContext(ThemeContext);
+ const currentLanguage = themeContext.themeLanguage;
+ const showSass = currentLanguage.includes('sass');
+
+ const title = showSass ? (
+ chooseLightOrDarkText(background, lightText, darkText);
+ ) : (
+ isColorDark(red, green, blue)
+ );
+
+ const props = showSass
+ ? `background: string;
+lightText? = $euiColorGhost;
+darkText? = $euiColorInk;`
+ : `red: 0-255;
+green: 0-255;
+blue: 0-255;`;
+
+ const text = showSass ? (
+ <>
+ Use this function to determine whether or not to use light (white) or dark
+ (black) text against the given background color. The function will return
+ either the light or dark text parameters depending on the value of the
+ background color given.
+
+ ) : (
+ <>
+
+ Use this function to determine whether or not to use light or dark text
+ against the given background color. It requires the values to be passed
+ in as rgb integers and will return a boolean if the
+ color is dark based on luminance.
+
+
+ If the function returns true, use{' '}
+ euiTheme.colors.ghost otherwise use{' '}
+ euiTheme.colors.ink as the text color.
+
+ If you are affording for both light and dark themes, you can use this
+ single function to shade or tint based on the color mode. Taking the
+ color as the first parameter, it will tint the color in the light mode,
+ but shade it in the dark mode. This makes the background color more
+ subtle in both color modes. The opposite function{' '}
+
+ shadeOrTint(color, shade_percent, tint_percent)
+ {' '}
+ also exists.
+
+ );
+ const demo = (
+
+ This success color is tinted in light mode and shaded in dark.
+
- Since the EUI colors usually evaluate to a hex value, the easiest way
- to perform color operations like transparency, shading, or tinting is
- by using the EUI provided methods of{' '}
- transparentize(), shade(), and{' '}
- tint() respectively.
-
-
- For all available color functions see the{' '}
- Color Utilities page.
-
- Elastic UI builds with a very limited palette. It uses a core set
- of three colors with a green / orange / red qualitative set and
- combined with a six-color grayscale. Variation beyond these colors
- is minimal and always done with math manipulation against the
- original set.
-
-
- When switching between light and dark color modes, the theme keys
- do not change, only their values do. This is why most keys are not
- named for their evaluated value but by their{' '}
- purpose.
-
- Specific text colors calculated off either the brand or shade
- colors.
-
-
- Each brand color also has a corresponding text variant that has
- been calculated for proper (at least 4.5) contrast against{' '}
- colors.body and should be used specifically
- when coloring text. As is used in{' '}
-
- EuiTextColor
-
- .
-
-
- WCAG specifications
- {' '}
- defines specific contrast ratios between foreground text and a
- background color. The grids below display which color combinations
- pass that rating. In general you should try to use a color combination
- that is {ratingAA} or above with the exception of using large text.
-
-
-
-
-
-
-
- Use the slider and toggle to adjust the color combinations shown in
- the sections below.
-
- In order to meet contrast minimums, the text variants use the page
- body color as the denominator for calculating the altered color.
- Text placed on backgrounds darker than this cannot guarantee
- contrast acceptance.
+
+ WCAG specifications
+ {' '}
+ defines specific contrast ratios between foreground text and a
+ background color. The grids below display which color combinations
+ pass that rating. In general you should try to use a color
+ combination that is {ratingAA} or above with the exception of using
+ large text.
+
+
+ {/* This wrapping div for the sticky positioning */}
+
+
+
+
+ Use the slider and toggle to adjust the color combinations shown
+ in the sections below.
+
+ In order to meet contrast minimums, the text variants use the page
+ body color as the denominator for calculating the altered color.
+ Text placed on backgrounds darker than this cannot guarantee
+ contrast acceptance.
+
- We typically only recommend using full black or white on top of
- brand colors. This can be in the form of full, empty, ink, or ghost
- shades. Never combine two brand colors.
-
-
+
+
+
{`${contrastSections[1].title}`}
+
+ We typically only recommend using full black or white on top of
+ brand colors. This can be in the form of full, empty, ink, or
+ ghost shades. Never combine two brand colors.
+
+ Again we recommend sticking with the text variant of brand colors
+ when possible. The opposite may be true when using darker shades
+ as backgrounds.
+
+
-
-
Shades
-
- Again we recommend sticking with the text variant of brand colors
- when possible. The opposite may be true when using darker shades as
- backgrounds.
-
+ Elastic UI builds with a very limited palette. It uses a core set of
+ three colors with a green / orange / red qualitative set and combined
+ with a six-color grayscale. Variation beyond these colors is minimal and
+ always done with math manipulation against the original set.
+
+
+ When switching between light and dark color modes, the theme keys do not
+ change, only their values do. This is why most keys are not named for
+ their evaluated value but by their{' '}
+ purpose.
+
+ Since the EUI colors usually evaluate to a hex value, the easiest way
+ to perform color operations like transparency, shading, or tinting is
+ by using the EUI provided methods of{' '}
+ transparentize(), shade(), and{' '}
+ tint() respectively.
+
+
+ For all available color functions see the{' '}
+ Color Utilities page.
+
+ Specific text colors calculated off either the brand or shade
+ colors.
+
+
+ Each brand color also has a corresponding text variant that has been
+ calculated for proper (at least 4.5) contrast against{' '}
+ colors.body and should be used specifically when
+ coloring text. As is used in{' '}
+
+ EuiTextColor
+
+ .
+
-
-
-
-
- {paddingContent}
-
-
+
);
};
diff --git a/src-docs/src/views/text_utilities/align.tsx b/src-docs/src/views/theme/typography/_text_align.tsx
similarity index 92%
rename from src-docs/src/views/text_utilities/align.tsx
rename to src-docs/src/views/theme/typography/_text_align.tsx
index d37807f60f46..5a3bc061821f 100644
--- a/src-docs/src/views/text_utilities/align.tsx
+++ b/src-docs/src/views/theme/typography/_text_align.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { EuiMark } from '../../../../src';
-import { ThemeExample } from '../theme/_components/_theme_example';
+import { EuiMark } from '../../../../../src';
+import { ThemeExample } from '../_components/_theme_example';
export default () => (
<>
diff --git a/src-docs/src/views/text_utilities/color.tsx b/src-docs/src/views/theme/typography/_text_color.tsx
similarity index 87%
rename from src-docs/src/views/text_utilities/color.tsx
rename to src-docs/src/views/theme/typography/_text_color.tsx
index fd5f24a0377a..b66c0cacd6f5 100644
--- a/src-docs/src/views/text_utilities/color.tsx
+++ b/src-docs/src/views/theme/typography/_text_color.tsx
@@ -1,8 +1,8 @@
import React from 'react';
import { Link } from 'react-router-dom';
-import { EuiCode, EuiTextColor } from '../../../../src';
-import { ThemeExample } from '../theme/_components/_theme_example';
+import { EuiCode, EuiTextColor } from '../../../../../src';
+import { ThemeExample } from '../_components/_theme_example';
export default () => (
{
const themeContext = useContext(ThemeContext);
diff --git a/src-docs/src/views/text_utilities/wrapping.tsx b/src-docs/src/views/theme/typography/_text_wrapping.tsx
similarity index 97%
rename from src-docs/src/views/text_utilities/wrapping.tsx
rename to src-docs/src/views/theme/typography/_text_wrapping.tsx
index 7044c735e6f6..897ee87335ce 100644
--- a/src-docs/src/views/text_utilities/wrapping.tsx
+++ b/src-docs/src/views/theme/typography/_text_wrapping.tsx
@@ -1,15 +1,15 @@
import React, { useContext } from 'react';
+import { css } from '@emotion/react';
-import { ThemeContext } from '../../components/with_theme';
+import { ThemeContext } from '../../../components/with_theme';
import {
EuiPanel,
EuiCode,
euiTextTruncate,
euiTextBreakWord,
-} from '../../../../src';
-import { ThemeExample } from '../theme/_components/_theme_example';
-import { css } from '@emotion/react';
+} from '../../../../../src';
+import { ThemeExample } from '../_components/_theme_example';
const maxWidth = 300;
const longLink =
diff --git a/src-docs/src/views/theme/typography/utilities.tsx b/src-docs/src/views/theme/typography/utilities.tsx
new file mode 100644
index 000000000000..61ec42704ffd
--- /dev/null
+++ b/src-docs/src/views/theme/typography/utilities.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+
+import { EuiTitle } from '../../../../../src';
+
+import { GuideSection } from '../../../components/guide_section/guide_section';
+
+import TextAlignUtilities from './_text_align';
+import TextWrappingUtilities from './_text_wrapping';
+import TextNumberUtilities from './_text_numbers';
+import TextColorUtilities from './_text_color';
+
+// This array is used inside routes.js to create the sidenav sub-sections
+export const textUtilitiesSections = [
+ {
+ title: 'Alignment',
+ id: 'alignment',
+ },
+ {
+ title: 'Wrapping',
+ id: 'wrapping',
+ },
+ {
+ title: 'Numbers',
+ id: 'numbers',
+ },
+ {
+ title: 'Color',
+ id: 'color',
+ },
+];
+
+export default () => {
+ return (
+ <>
+
+
+
{`${textUtilitiesSections[0].title}`}
+
+
+
+
+
+
+
+
{`${textUtilitiesSections[1].title}`}
+
+
+
+
+
+
+
+
{`${textUtilitiesSections[2].title}`}
+
+
+
+
+
+
+
+
{`${textUtilitiesSections[3].title}`}
+
+
+
+
+
+ );
+};
diff --git a/src-docs/src/views/theme/typography/typography.tsx b/src-docs/src/views/theme/typography/values.tsx
similarity index 90%
rename from src-docs/src/views/theme/typography/typography.tsx
rename to src-docs/src/views/theme/typography/values.tsx
index 494894f22a40..d38145b734ad 100644
--- a/src-docs/src/views/theme/typography/typography.tsx
+++ b/src-docs/src/views/theme/typography/values.tsx
@@ -5,7 +5,6 @@ import { Link } from 'react-router-dom';
import fonts from '!!sass-vars-to-js-loader?preserveKeys=true!../../../../../src/global_styling/variables/_font_weight.scss';
import { GuideSection } from '../../../components/guide_section/guide_section';
-import { GuideTabbedPage } from '../../../components/guide_tabbed_page';
import {
useEuiTheme,
@@ -38,6 +37,30 @@ import {
FontValuesSass,
} from './_typography_sass';
+export const typographyInfo = {
+ title: 'Typography',
+ notice: ,
+ showThemeLanguageToggle: true,
+ description: (
+ <>
+
+ For most of your usages we recommend using{' '}
+
+ EuiText
+ {' '}
+ or{' '}
+
+ EuiTitle
+ {' '}
+ components directly instead of these theme tokens. Or
+ head to the{' '}
+ text utilities page for
+ helper classes and functions.
+
+
+ ),
+};
+
// This array is used inside routes.js to create the sidenav sub-sections
export const typographySections = [
{ title: 'Font scale', id: 'font-scale' },
@@ -84,27 +107,7 @@ export default () => {
}, [showSass]);
return (
- }
- showThemeLanguageToggle
- description={
- <>
- For most of your usages we recommend using{' '}
-
- EuiText
- {' '}
- or{' '}
-
- EuiTitle
- {' '}
- components directly instead of these theme tokens. Or
- head to the text utilities page for
- helper classes and functions.
-
- }
- >
+ <>
{
)}
-
+
);
};
diff --git a/src-docs/src/views/utility_classes/utility_classes_example.js b/src-docs/src/views/utility_classes/utility_classes_example.js
index 9aec68e349a0..52bdfb63c5eb 100644
--- a/src-docs/src/views/utility_classes/utility_classes_example.js
+++ b/src-docs/src/views/utility_classes/utility_classes_example.js
@@ -28,8 +28,8 @@ export const UtilityClassesExample = {
For responsive specific utilities, go to the{' '}
-
- Responsive documentation page
+
+ Breakpoint utilities page
.
diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
index e4bb10f960b7..2694fa8d6ec6 100644
--- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -943,7 +943,7 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
role="progressbar"
/>
Please wait
diff --git a/src/components/avatar/__snapshots__/avatar.test.tsx.snap b/src/components/avatar/__snapshots__/avatar.test.tsx.snap
index 8789f8839930..b557787740ed 100644
--- a/src/components/avatar/__snapshots__/avatar.test.tsx.snap
+++ b/src/components/avatar/__snapshots__/avatar.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`EuiAvatar props color as string is rendered 1`] = `
exports[`EuiAvatar props color as subdued is rendered 1`] = `