[EUI Refresh] A weight has been lifted...

packages/eui/changelogs/upcoming/7942.md

@@ -0,0 +1,2 @@
+- Added/Updated ...
+

packages/eui/src-docs/src/views/guidelines/_index.scss

@@ -150,7 +150,7 @@
 }
 
 .guideSass__fontSize--euiFontSizeXXL {
-  @include euiFontSizeXL;
+  @include euiFontSizeXXL;
 }
 
 .guideSass__shadow {

packages/eui/src-docs/src/views/home/home_view.js

@@ -37,7 +37,6 @@ export const HomeView = () => (
             <h1>Elastic UI</h1>
           </EuiTitle>
           <EuiSpacer />
-          <EuiSpacer />
           <EuiTitle size="s">
             <h2>The framework powering the Elastic Stack</h2>
           </EuiTitle>

packages/eui/src-docs/src/views/theme/_components/_theme_example.tsx

@@ -66,7 +66,7 @@ export const ThemeExample: FunctionComponent<ThemeExample> = ({
         css={css`
           gap: ${euiTheme.size.xl};
 
-          ${useEuiPaddingCSS(isLargeBreakpoint ? 'vertical' : undefined).xl};
+          ${useEuiPaddingCSS().xl};
           /* padding: ${euiTheme.size.xl}; */
 
           :not(:first-child) {

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}

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,15 +167,15 @@ 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) {
       margin-block-end: 12px;
     }
 
     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) {

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",
 }
 `;

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"`;
 

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",
 }
 `;
 

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;

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