diff --git a/packages/eui/changelogs/upcoming/7942.md b/packages/eui/changelogs/upcoming/7942.md
new file mode 100644
index 00000000000..a89751d26ba
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7942.md
@@ -0,0 +1,2 @@
+- Added/Updated ...
+
diff --git a/packages/eui/src-docs/src/views/guidelines/_index.scss b/packages/eui/src-docs/src/views/guidelines/_index.scss
index 96895733917..ff031ab939d 100644
--- a/packages/eui/src-docs/src/views/guidelines/_index.scss
+++ b/packages/eui/src-docs/src/views/guidelines/_index.scss
@@ -150,7 +150,7 @@
}
.guideSass__fontSize--euiFontSizeXXL {
- @include euiFontSizeXL;
+ @include euiFontSizeXXL;
}
.guideSass__shadow {
diff --git a/packages/eui/src-docs/src/views/home/home_view.js b/packages/eui/src-docs/src/views/home/home_view.js
index 4fb4bbcf8e4..43d1b846764 100644
--- a/packages/eui/src-docs/src/views/home/home_view.js
+++ b/packages/eui/src-docs/src/views/home/home_view.js
@@ -37,7 +37,6 @@ export const HomeView = () => (
Elastic UI
-
The framework powering the Elastic Stack
diff --git a/packages/eui/src-docs/src/views/theme/_components/_theme_example.tsx b/packages/eui/src-docs/src/views/theme/_components/_theme_example.tsx
index 895a2bc858d..6b7784c72d6 100644
--- a/packages/eui/src-docs/src/views/theme/_components/_theme_example.tsx
+++ b/packages/eui/src-docs/src/views/theme/_components/_theme_example.tsx
@@ -66,7 +66,7 @@ export const ThemeExample: FunctionComponent = ({
css={css`
gap: ${euiTheme.size.xl};
- ${useEuiPaddingCSS(isLargeBreakpoint ? 'vertical' : undefined).xl};
+ ${useEuiPaddingCSS().xl};
/* padding: ${euiTheme.size.xl}; */
:not(:first-child) {
diff --git a/packages/eui/src-docs/src/views/theme/typography/values.tsx b/packages/eui/src-docs/src/views/theme/typography/values.tsx
index 4ec994788d4..a3d2fdf7584 100644
--- a/packages/eui/src-docs/src/views/theme/typography/values.tsx
+++ b/packages/eui/src-docs/src/views/theme/typography/values.tsx
@@ -175,7 +175,7 @@ export default () => {
fullWidth
id={htmlIdGenerator()()}
min={300}
- max={700}
+ max={600}
step={1}
value={fontWeight}
onChange={onFontWeightChange}
diff --git a/packages/eui/src/components/text/__snapshots__/text.styles.test.ts.snap b/packages/eui/src/components/text/__snapshots__/text.styles.test.ts.snap
index f4937379d57..cf91382bdb4 100644
--- a/packages/eui/src/components/text/__snapshots__/text.styles.test.ts.snap
+++ b/packages/eui/src/components/text/__snapshots__/text.styles.test.ts.snap
@@ -6,16 +6,16 @@ exports[`euiTextStyles sizes m 1`] = `
line-height: 1.7143rem;
h1 {
- font-size: 2.4286rem;
- line-height: 2.8571rem;
+ font-size: 2.1429rem;
+ line-height: 2.5714rem;
}
h1:not(:last-child) {
margin-block-end: 12px;
}
h2 {
- font-size: 1.9286rem;
- line-height: 2.2857rem;
+ font-size: 1.7143rem;
+ line-height: 2.0000rem;
&:not(:first-child) {
margin-block-start: 24px;
@@ -27,7 +27,7 @@ exports[`euiTextStyles sizes m 1`] = `
}
h3 {
- font-size: 1.5714rem;
+ font-size: 1.4286rem;
line-height: 1.7143rem;
&:not(:first-child) {
@@ -167,7 +167,7 @@ exports[`euiTextStyles sizes relative 1`] = `
line-height: 1.5000;
h1 {
- font-size: 2.125em;
+ font-size: 1.875em;
line-height: 1.2495;
}
h1:not(:last-child) {
@@ -175,7 +175,7 @@ exports[`euiTextStyles sizes relative 1`] = `
}
h2 {
- font-size: 1.6875em;
+ font-size: 1.5em;
line-height: 1.2495;
&:not(:first-child) {
@@ -188,7 +188,7 @@ exports[`euiTextStyles sizes relative 1`] = `
}
h3 {
- font-size: 1.375em;
+ font-size: 1.25em;
line-height: 1.2495;
&:not(:first-child) {
@@ -313,16 +313,16 @@ exports[`euiTextStyles sizes s 1`] = `
line-height: 1.4286rem;
h1 {
- font-size: 2.1250rem;
- line-height: 2.5714rem;
+ font-size: 1.8750rem;
+ line-height: 2.2857rem;
}
h1:not(:last-child) {
margin-block-end: 8px;
}
h2 {
- font-size: 1.6875rem;
- line-height: 2.0000rem;
+ font-size: 1.5000rem;
+ line-height: 1.7143rem;
&:not(:first-child) {
margin-block-start: 16px;
@@ -334,8 +334,8 @@ exports[`euiTextStyles sizes s 1`] = `
}
h3 {
- font-size: 1.3750rem;
- line-height: 1.7143rem;
+ font-size: 1.2500rem;
+ line-height: 1.4286rem;
&:not(:first-child) {
margin-block-start: 16px;
@@ -459,16 +459,16 @@ exports[`euiTextStyles sizes xs 1`] = `
line-height: 1.1429rem;
h1 {
- font-size: 1.8214rem;
- line-height: 2.2857rem;
+ font-size: 1.6071rem;
+ line-height: 2.0000rem;
}
h1:not(:last-child) {
margin-block-end: 4px;
}
h2 {
- font-size: 1.4464rem;
- line-height: 1.7143rem;
+ font-size: 1.2857rem;
+ line-height: 1.4286rem;
&:not(:first-child) {
margin-block-start: 8px;
@@ -480,7 +480,7 @@ exports[`euiTextStyles sizes xs 1`] = `
}
h3 {
- font-size: 1.1786rem;
+ font-size: 1.0714rem;
line-height: 1.4286rem;
&:not(:first-child) {
diff --git a/packages/eui/src/components/title/__snapshots__/title.styles.test.ts.snap b/packages/eui/src/components/title/__snapshots__/title.styles.test.ts.snap
index 40ab6e813ff..d54aa43f77f 100644
--- a/packages/eui/src/components/title/__snapshots__/title.styles.test.ts.snap
+++ b/packages/eui/src/components/title/__snapshots__/title.styles.test.ts.snap
@@ -3,26 +3,26 @@
exports[`euiTitle mixin returns a static object of title font properties for each title size l 1`] = `
{
"color": "#1a1c21",
- "fontSize": "2.4286rem",
- "fontWeight": 700,
- "lineHeight": "2.8571rem",
+ "fontSize": "2.1429rem",
+ "fontWeight": 600,
+ "lineHeight": "2.5714rem",
}
`;
exports[`euiTitle mixin returns a static object of title font properties for each title size m 1`] = `
{
"color": "#1a1c21",
- "fontSize": "1.9286rem",
- "fontWeight": 700,
- "lineHeight": "2.2857rem",
+ "fontSize": "1.7143rem",
+ "fontWeight": 600,
+ "lineHeight": "2.0000rem",
}
`;
exports[`euiTitle mixin returns a static object of title font properties for each title size s 1`] = `
{
"color": "#1a1c21",
- "fontSize": "1.5714rem",
- "fontWeight": 700,
+ "fontSize": "1.4286rem",
+ "fontWeight": 600,
"lineHeight": "1.7143rem",
}
`;
@@ -31,7 +31,7 @@ exports[`euiTitle mixin returns a static object of title font properties for eac
{
"color": "#1a1c21",
"fontSize": "1.1429rem",
- "fontWeight": 700,
+ "fontWeight": 600,
"lineHeight": "1.7143rem",
}
`;
@@ -40,7 +40,7 @@ exports[`euiTitle mixin returns a static object of title font properties for eac
{
"color": "#1a1c21",
"fontSize": "1.0000rem",
- "fontWeight": 700,
+ "fontWeight": 600,
"lineHeight": "1.4286rem",
}
`;
@@ -49,7 +49,7 @@ exports[`euiTitle mixin returns a static object of title font properties for eac
{
"color": "#1a1c21",
"fontSize": "0.8571rem",
- "fontWeight": 700,
+ "fontWeight": 600,
"lineHeight": "1.1429rem",
}
`;
diff --git a/packages/eui/src/global_styling/functions/__snapshots__/typography.test.tsx.snap b/packages/eui/src/global_styling/functions/__snapshots__/typography.test.tsx.snap
index 3c300bdafab..ce97abf94a8 100644
--- a/packages/eui/src/global_styling/functions/__snapshots__/typography.test.tsx.snap
+++ b/packages/eui/src/global_styling/functions/__snapshots__/typography.test.tsx.snap
@@ -1,16 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`euiFontSizeFromScale scale l 1`] = `"1.5714rem"`;
+exports[`euiFontSizeFromScale scale l 1`] = `"1.4286rem"`;
exports[`euiFontSizeFromScale scale m 1`] = `"1.1429rem"`;
exports[`euiFontSizeFromScale scale s 1`] = `"1.0000rem"`;
-exports[`euiFontSizeFromScale scale xl 1`] = `"1.9286rem"`;
+exports[`euiFontSizeFromScale scale xl 1`] = `"1.7143rem"`;
exports[`euiFontSizeFromScale scale xs 1`] = `"0.8571rem"`;
-exports[`euiFontSizeFromScale scale xxl 1`] = `"2.4286rem"`;
+exports[`euiFontSizeFromScale scale xxl 1`] = `"2.1429rem"`;
exports[`euiFontSizeFromScale scale xxs 1`] = `"0.7857rem"`;
@@ -28,11 +28,11 @@ exports[`euiLineHeightFromBaseline scale m 1`] = `"1.7143rem"`;
exports[`euiLineHeightFromBaseline scale s 1`] = `"1.4286rem"`;
-exports[`euiLineHeightFromBaseline scale xl 1`] = `"2.2857rem"`;
+exports[`euiLineHeightFromBaseline scale xl 1`] = `"2.0000rem"`;
exports[`euiLineHeightFromBaseline scale xs 1`] = `"1.1429rem"`;
-exports[`euiLineHeightFromBaseline scale xxl 1`] = `"2.8571rem"`;
+exports[`euiLineHeightFromBaseline scale xxl 1`] = `"2.5714rem"`;
exports[`euiLineHeightFromBaseline scale xxs 1`] = `"1.1429rem"`;
diff --git a/packages/eui/src/global_styling/mixins/__snapshots__/_typography.test.ts.snap b/packages/eui/src/global_styling/mixins/__snapshots__/_typography.test.ts.snap
index 0aa3445e978..d2ee7c44058 100644
--- a/packages/eui/src/global_styling/mixins/__snapshots__/_typography.test.ts.snap
+++ b/packages/eui/src/global_styling/mixins/__snapshots__/_typography.test.ts.snap
@@ -2,7 +2,7 @@
exports[`euiFontSize handles the optional customScale property by multiplying it against the passed scale: l scale with xxs customScale 1`] = `
{
- "fontSize": "1.0804rem",
+ "fontSize": "0.9821rem",
"lineHeight": "1.4286rem",
}
`;
@@ -16,14 +16,14 @@ exports[`euiFontSize handles the optional customScale property by multiplying it
exports[`euiFontSize handles the optional customScale property by multiplying it against the passed scale: s scale with xl customScale 1`] = `
{
- "fontSize": "1.6875rem",
- "lineHeight": "2.0000rem",
+ "fontSize": "1.5000rem",
+ "lineHeight": "1.7143rem",
}
`;
exports[`euiFontSize returns an object of font-size and line-height for each scale em l 1`] = `
{
- "fontSize": "1.375em",
+ "fontSize": "1.25em",
"lineHeight": "1.2495",
}
`;
@@ -44,7 +44,7 @@ exports[`euiFontSize returns an object of font-size and line-height for each sca
exports[`euiFontSize returns an object of font-size and line-height for each scale em xl 1`] = `
{
- "fontSize": "1.6875em",
+ "fontSize": "1.5em",
"lineHeight": "1.2495",
}
`;
@@ -58,7 +58,7 @@ exports[`euiFontSize returns an object of font-size and line-height for each sca
exports[`euiFontSize returns an object of font-size and line-height for each scale em xxl 1`] = `
{
- "fontSize": "2.125em",
+ "fontSize": "1.875em",
"lineHeight": "1.2495",
}
`;
@@ -79,7 +79,7 @@ exports[`euiFontSize returns an object of font-size and line-height for each sca
exports[`euiFontSize returns an object of font-size and line-height for each scale px l 1`] = `
{
- "fontSize": "22px",
+ "fontSize": "20px",
"lineHeight": "24px",
}
`;
@@ -100,8 +100,8 @@ exports[`euiFontSize returns an object of font-size and line-height for each sca
exports[`euiFontSize returns an object of font-size and line-height for each scale px xl 1`] = `
{
- "fontSize": "27px",
- "lineHeight": "32px",
+ "fontSize": "24px",
+ "lineHeight": "28px",
}
`;
@@ -114,8 +114,8 @@ exports[`euiFontSize returns an object of font-size and line-height for each sca
exports[`euiFontSize returns an object of font-size and line-height for each scale px xxl 1`] = `
{
- "fontSize": "34px",
- "lineHeight": "40px",
+ "fontSize": "30px",
+ "lineHeight": "36px",
}
`;
@@ -135,7 +135,7 @@ exports[`euiFontSize returns an object of font-size and line-height for each sca
exports[`euiFontSize returns an object of font-size and line-height for each scale rem l 1`] = `
{
- "fontSize": "1.5714rem",
+ "fontSize": "1.4286rem",
"lineHeight": "1.7143rem",
}
`;
@@ -156,8 +156,8 @@ exports[`euiFontSize returns an object of font-size and line-height for each sca
exports[`euiFontSize returns an object of font-size and line-height for each scale rem xl 1`] = `
{
- "fontSize": "1.9286rem",
- "lineHeight": "2.2857rem",
+ "fontSize": "1.7143rem",
+ "lineHeight": "2.0000rem",
}
`;
@@ -170,8 +170,8 @@ exports[`euiFontSize returns an object of font-size and line-height for each sca
exports[`euiFontSize returns an object of font-size and line-height for each scale rem xxl 1`] = `
{
- "fontSize": "2.4286rem",
- "lineHeight": "2.8571rem",
+ "fontSize": "2.1429rem",
+ "lineHeight": "2.5714rem",
}
`;
diff --git a/packages/eui/src/global_styling/variables/_font_weight.scss b/packages/eui/src/global_styling/variables/_font_weight.scss
index f5dfd287835..8ee5e23f925 100644
--- a/packages/eui/src/global_styling/variables/_font_weight.scss
+++ b/packages/eui/src/global_styling/variables/_font_weight.scss
@@ -3,8 +3,8 @@
// Font weights
$euiFontWeightLight: 300 !default;
$euiFontWeightRegular: 400 !default;
-$euiFontWeightMedium: 500 !default;
-$euiFontWeightSemiBold: 600 !default;
-$euiFontWeightBold: 700 !default;
+$euiFontWeightMedium: 450 !default;
+$euiFontWeightSemiBold: 500 !default;
+$euiFontWeightBold: 600 !default;
$euiCodeFontWeightRegular: 400 !default;
-$euiCodeFontWeightBold: 700 !default;
+$euiCodeFontWeightBold: 600 !default;
diff --git a/packages/eui/src/global_styling/variables/typography.ts b/packages/eui/src/global_styling/variables/typography.ts
index 80ebbc8b1cb..a46ceb38a1e 100644
--- a/packages/eui/src/global_styling/variables/typography.ts
+++ b/packages/eui/src/global_styling/variables/typography.ts
@@ -97,11 +97,11 @@ export type _EuiThemeFontWeights = {
light: CSSProperties['fontWeight'];
/** - Default value: 400 */
regular: CSSProperties['fontWeight'];
- /** - Default value: 500 */
+ /** - Default value: 450 */
medium: CSSProperties['fontWeight'];
- /** - Default value: 600 */
+ /** - Default value: 500 */
semiBold: CSSProperties['fontWeight'];
- /** - Default value: 700 */
+ /** - Default value: 600 */
bold: CSSProperties['fontWeight'];
};
diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_typography.scss b/packages/eui/src/themes/amsterdam/global_styling/variables/_typography.scss
index 824f56b42da..d424bdc86e7 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/variables/_typography.scss
+++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_typography.scss
@@ -1,23 +1,23 @@
// Finally start using the non-beta version of Inter
$euiFontFamily: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
-// Font sizes -- scale is loosely based on Major Third (1.250) with a base of 14px
+// Font sizes -- scale is loosely based on Minor Third (1.200) with a base of 14px
// Base list is an altered scale based on 16px to match the resulted values below
$euiTextScale: 2.125, 1.6875, 1.375, 1.125, 1, .875, .75 !default;
$euiFontSize: $euiSize - 2; // 14px
-$euiFontSizeXS: floor($euiFontSize * .86); // 12px // h6
-$euiFontSizeS: floor($euiFontSize * 1); // 14px // h5 --> Now the same as the base $euiFontSize
-$euiFontSizeM: ceil($euiFontSize * 1.14); // 16px // h4
-$euiFontSizeL: ceil($euiFontSize * 1.57); // 22px // h3
-$euiFontSizeXL: floor($euiFontSize * 1.93); // 27px // h2
-$euiFontSizeXXL: floor($euiFontSize * 2.43); // 34px // h1
+$euiFontSizeXS: floor($euiFontSize * .86); // 12px // h6
+$euiFontSizeS: floor($euiFontSize * 1); // 14px // h5 --> Now the same as the base $euiFontSize
+$euiFontSizeM: ceil($euiFontSize * 1.14); // 16px // h4
+$euiFontSizeL: floor($euiFontSize * 1.44); // 20px // h3
+$euiFontSizeXL: floor($euiFontSize * 1.728); // 24px // h2
+$euiFontSizeXXL: ceil($euiFontSize * 2.074); // 30px // h1
$euiBodyLineHeight: 1.142857143 !default; // 16px from a 14px base font size to ensure it aligns to our 16px grid
$euiCodeFontWeightRegular: 400;
-$euiCodeFontWeightBold: 700;
+$euiCodeFontWeightBold: 600;
// Normally functions are imported before variables in `_index.scss` files
// But because they need to consume some typography variables they need to live here
diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_typography.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_typography.ts
index 3a95f26a6c5..cc71f6ebae2 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/variables/_typography.ts
+++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_typography.ts
@@ -16,14 +16,14 @@ import {
// Typographic scale -- loosely based on Major Third (1.250)
export const fontScale: _EuiThemeFontScales = {
- xxxs: 0.5625,
- xxs: 0.6875,
- xs: 0.75,
- s: 0.875,
- m: 1,
- l: 1.375,
- xl: 1.6875,
- xxl: 2.125,
+ xxxs: 0.5625, // 9px
+ xxs: 0.6875, // 11px
+ xs: 0.75, // 12px
+ s: 0.875, // 14px
+ m: 1, // 16px
+ l: 1.25, // 20px
+ xl: 1.5, // 24px
+ xxl: 1.875, // 30px
};
// Families & base font settings
@@ -43,9 +43,9 @@ export const fontBase: _EuiThemeFontBase = {
export const fontWeight: _EuiThemeFontWeights = {
light: 300,
regular: 400,
- medium: 500,
- semiBold: 600,
- bold: 700,
+ medium: 450,
+ semiBold: 500,
+ bold: 600,
};
export const font: _EuiThemeFont = {