From ea419af1a4787358f7094d97515e86d5a809c837 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 2 Aug 2024 16:38:11 -0700 Subject: [PATCH 1/5] A weight has been lifted... --- .../src-docs/src/views/guidelines/_index.scss | 2 +- .../eui/src-docs/src/views/home/home_view.js | 1 - .../theme/_components/_theme_example.tsx | 2 +- .../src/views/theme/typography/values.tsx | 2 +- .../eui/src/components/title/title.styles.ts | 12 +++++----- .../variables/_font_weight.scss | 8 +++---- .../global_styling/variables/typography.ts | 6 ++--- .../global_styling/variables/_typography.scss | 16 +++++++------- .../global_styling/variables/_typography.ts | 22 +++++++++---------- 9 files changed, 35 insertions(+), 36 deletions(-) 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/title/title.styles.ts b/packages/eui/src/components/title/title.styles.ts index e4c7567efa6..3840c28580d 100644 --- a/packages/eui/src/components/title/title.styles.ts +++ b/packages/eui/src/components/title/title.styles.ts @@ -37,12 +37,12 @@ export const euiTitle = ( const titleScaleToFontSizeScaleMap: { [size in EuiTitleSize]: _EuiThemeFontScale; } = { - xxxs: 'xs', - xxs: 's', - xs: 'm', - s: 'l', - m: 'xl', - l: 'xxl', + xxxs: 'xxs', + xxs: 'xs', + xs: 's', + s: 'm', + m: 'l', + l: 'xl', }; return { 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..a556d056dd1 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: 2.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 = { From ec06d8a4f0ae35b988e2158b6077ad84c1b2bdc8 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 2 Aug 2024 17:10:34 -0700 Subject: [PATCH 2/5] Add changelog --- packages/eui/changelogs/upcoming/7942.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 packages/eui/changelogs/upcoming/7942.md 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 ... + From fc6bf0d7f51741a9405784cdb886306b8e92188b Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 2 Aug 2024 17:28:13 -0700 Subject: [PATCH 3/5] Update snapshots --- .../__snapshots__/text.styles.test.ts.snap | 76 +++++++++---------- .../__snapshots__/title.styles.test.ts.snap | 32 ++++---- .../__snapshots__/typography.test.tsx.snap | 10 +-- .../__snapshots__/_typography.test.ts.snap | 32 ++++---- 4 files changed, 75 insertions(+), 75 deletions(-) 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..485de46a46e 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: 1.7143rem; + line-height: 2.0000rem; } h1:not(:last-child) { margin-block-end: 12px; } h2 { - font-size: 1.9286rem; - line-height: 2.2857rem; + font-size: 1.4286rem; + line-height: 1.7143rem; &:not(:first-child) { margin-block-start: 24px; @@ -27,7 +27,7 @@ exports[`euiTextStyles sizes m 1`] = ` } h3 { - font-size: 1.5714rem; + font-size: 1.1429rem; line-height: 1.7143rem; &:not(:first-child) { @@ -40,8 +40,8 @@ exports[`euiTextStyles sizes m 1`] = ` } h4 { - font-size: 1.1429rem; - line-height: 1.7143rem; + font-size: 1.0000rem; + line-height: 1.4286rem; &:not(:first-child) { margin-block-start: 24px; @@ -53,8 +53,8 @@ exports[`euiTextStyles sizes m 1`] = ` } h5 { - font-size: 1.0000rem; - line-height: 1.4286rem; + font-size: 0.8571rem; + line-height: 1.1429rem; &:not(:first-child) { margin-block-start: 24px; @@ -66,7 +66,7 @@ exports[`euiTextStyles sizes m 1`] = ` } h6 { - font-size: 0.8571rem; + font-size: 0.7857rem; line-height: 1.1429rem; &:not(:first-child) { @@ -167,7 +167,7 @@ exports[`euiTextStyles sizes relative 1`] = ` line-height: 1.5000; h1 { - font-size: 2.125em; + font-size: 1.5em; 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.25em; line-height: 1.2495; &:not(:first-child) { @@ -188,8 +188,8 @@ exports[`euiTextStyles sizes relative 1`] = ` } h3 { - font-size: 1.375em; - line-height: 1.2495; + font-size: 1em; + line-height: 1.5000; &:not(:first-child) { margin-block-start: 24px; @@ -201,7 +201,7 @@ exports[`euiTextStyles sizes relative 1`] = ` } h4 { - font-size: 1em; + font-size: 0.875em; line-height: 1.5000; &:not(:first-child) { @@ -214,7 +214,7 @@ exports[`euiTextStyles sizes relative 1`] = ` } h5 { - font-size: 0.875em; + font-size: 0.75em; line-height: 1.5000; &:not(:first-child) { @@ -227,7 +227,7 @@ exports[`euiTextStyles sizes relative 1`] = ` } h6 { - font-size: 0.75em; + font-size: 0.6875em; line-height: 1.5000; &: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.5000rem; + line-height: 1.7143rem; } h1:not(:last-child) { margin-block-end: 8px; } h2 { - font-size: 1.6875rem; - line-height: 2.0000rem; + font-size: 1.2500rem; + line-height: 1.4286rem; &: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.0000rem; + line-height: 1.4286rem; &:not(:first-child) { margin-block-start: 16px; @@ -347,8 +347,8 @@ exports[`euiTextStyles sizes s 1`] = ` } h4 { - font-size: 1.0000rem; - line-height: 1.4286rem; + font-size: 0.8750rem; + line-height: 1.1429rem; &:not(:first-child) { margin-block-start: 16px; @@ -360,7 +360,7 @@ exports[`euiTextStyles sizes s 1`] = ` } h5 { - font-size: 0.8750rem; + font-size: 0.7500rem; line-height: 1.1429rem; &:not(:first-child) { @@ -373,8 +373,8 @@ exports[`euiTextStyles sizes s 1`] = ` } h6 { - font-size: 0.7500rem; - line-height: 1.1429rem; + font-size: 0.6875rem; + line-height: 0.8571rem; &: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.2857rem; + line-height: 1.4286rem; } h1:not(:last-child) { margin-block-end: 4px; } h2 { - font-size: 1.4464rem; - line-height: 1.7143rem; + font-size: 1.0714rem; + line-height: 1.4286rem; &:not(:first-child) { margin-block-start: 8px; @@ -480,8 +480,8 @@ exports[`euiTextStyles sizes xs 1`] = ` } h3 { - font-size: 1.1786rem; - line-height: 1.4286rem; + font-size: 0.8571rem; + line-height: 1.1429rem; &:not(:first-child) { margin-block-start: 8px; @@ -493,7 +493,7 @@ exports[`euiTextStyles sizes xs 1`] = ` } h4 { - font-size: 0.8571rem; + font-size: 0.7500rem; line-height: 1.1429rem; &:not(:first-child) { @@ -506,8 +506,8 @@ exports[`euiTextStyles sizes xs 1`] = ` } h5 { - font-size: 0.7500rem; - line-height: 1.1429rem; + font-size: 0.6429rem; + line-height: 0.8571rem; &:not(:first-child) { margin-block-start: 8px; @@ -519,7 +519,7 @@ exports[`euiTextStyles sizes xs 1`] = ` } h6 { - font-size: 0.6429rem; + font-size: 0.5893rem; line-height: 0.8571rem; &: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..48e547df129 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": "1.7143rem", + "fontWeight": 600, + "lineHeight": "2.0000rem", } `; 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.4286rem", + "fontWeight": 600, + "lineHeight": "1.7143rem", } `; 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.1429rem", + "fontWeight": 600, "lineHeight": "1.7143rem", } `; @@ -30,26 +30,26 @@ exports[`euiTitle mixin returns a static object of title font properties for eac exports[`euiTitle mixin returns a static object of title font properties for each title size xs 1`] = ` { "color": "#1a1c21", - "fontSize": "1.1429rem", - "fontWeight": 700, - "lineHeight": "1.7143rem", + "fontSize": "1.0000rem", + "fontWeight": 600, + "lineHeight": "1.4286rem", } `; exports[`euiTitle mixin returns a static object of title font properties for each title size xxs 1`] = ` { "color": "#1a1c21", - "fontSize": "1.0000rem", - "fontWeight": 700, - "lineHeight": "1.4286rem", + "fontSize": "0.8571rem", + "fontWeight": 600, + "lineHeight": "1.1429rem", } `; exports[`euiTitle mixin returns a static object of title font properties for each title size xxxs 1`] = ` { "color": "#1a1c21", - "fontSize": "0.8571rem", - "fontWeight": 700, + "fontSize": "0.7857rem", + "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..f59cc4c4b1f 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`] = `"3.2857rem"`; 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`] = `"4.0000rem"`; 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..edb41b675e7 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": "2.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": "46px", + "lineHeight": "56px", } `; @@ -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": "3.2857rem", + "lineHeight": "4.0000rem", } `; From f1a1ecf9c6938f7b87138f2f1607361430a8d614 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Wed, 7 Aug 2024 11:24:47 -0700 Subject: [PATCH 4/5] Tweak the low end, missed a theme setting for typog scale --- packages/eui/src/components/title/title.styles.ts | 12 ++++++------ .../global_styling/variables/_typography.ts | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/eui/src/components/title/title.styles.ts b/packages/eui/src/components/title/title.styles.ts index 3840c28580d..e4c7567efa6 100644 --- a/packages/eui/src/components/title/title.styles.ts +++ b/packages/eui/src/components/title/title.styles.ts @@ -37,12 +37,12 @@ export const euiTitle = ( const titleScaleToFontSizeScaleMap: { [size in EuiTitleSize]: _EuiThemeFontScale; } = { - xxxs: 'xxs', - xxs: 'xs', - xs: 's', - s: 'm', - m: 'l', - l: 'xl', + xxxs: 'xs', + xxs: 's', + xs: 'm', + s: 'l', + m: 'xl', + l: 'xxl', }; return { 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 a556d056dd1..cc71f6ebae2 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_typography.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_typography.ts @@ -23,7 +23,7 @@ export const fontScale: _EuiThemeFontScales = { m: 1, // 16px l: 1.25, // 20px xl: 1.5, // 24px - xxl: 2.875, // 30px + xxl: 1.875, // 30px }; // Families & base font settings From 96633e669d8224a1d966ca3c8c5d6018521880f8 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Wed, 7 Aug 2024 13:03:25 -0700 Subject: [PATCH 5/5] update snapshots --- .../__snapshots__/text.styles.test.ts.snap | 72 +++++++++---------- .../__snapshots__/title.styles.test.ts.snap | 20 +++--- .../__snapshots__/typography.test.tsx.snap | 4 +- .../__snapshots__/_typography.test.ts.snap | 10 +-- 4 files changed, 53 insertions(+), 53 deletions(-) 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 485de46a46e..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: 1.7143rem; - line-height: 2.0000rem; + font-size: 2.1429rem; + line-height: 2.5714rem; } h1:not(:last-child) { margin-block-end: 12px; } h2 { - font-size: 1.4286rem; - line-height: 1.7143rem; + 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.1429rem; + font-size: 1.4286rem; line-height: 1.7143rem; &:not(:first-child) { @@ -40,8 +40,8 @@ exports[`euiTextStyles sizes m 1`] = ` } h4 { - font-size: 1.0000rem; - line-height: 1.4286rem; + font-size: 1.1429rem; + line-height: 1.7143rem; &:not(:first-child) { margin-block-start: 24px; @@ -53,8 +53,8 @@ exports[`euiTextStyles sizes m 1`] = ` } h5 { - font-size: 0.8571rem; - line-height: 1.1429rem; + font-size: 1.0000rem; + line-height: 1.4286rem; &:not(:first-child) { margin-block-start: 24px; @@ -66,7 +66,7 @@ exports[`euiTextStyles sizes m 1`] = ` } h6 { - font-size: 0.7857rem; + font-size: 0.8571rem; line-height: 1.1429rem; &:not(:first-child) { @@ -167,7 +167,7 @@ exports[`euiTextStyles sizes relative 1`] = ` line-height: 1.5000; h1 { - font-size: 1.5em; + 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.25em; + font-size: 1.5em; line-height: 1.2495; &:not(:first-child) { @@ -188,8 +188,8 @@ exports[`euiTextStyles sizes relative 1`] = ` } h3 { - font-size: 1em; - line-height: 1.5000; + font-size: 1.25em; + line-height: 1.2495; &:not(:first-child) { margin-block-start: 24px; @@ -201,7 +201,7 @@ exports[`euiTextStyles sizes relative 1`] = ` } h4 { - font-size: 0.875em; + font-size: 1em; line-height: 1.5000; &:not(:first-child) { @@ -214,7 +214,7 @@ exports[`euiTextStyles sizes relative 1`] = ` } h5 { - font-size: 0.75em; + font-size: 0.875em; line-height: 1.5000; &:not(:first-child) { @@ -227,7 +227,7 @@ exports[`euiTextStyles sizes relative 1`] = ` } h6 { - font-size: 0.6875em; + font-size: 0.75em; line-height: 1.5000; &:not(:first-child) { @@ -313,16 +313,16 @@ exports[`euiTextStyles sizes s 1`] = ` line-height: 1.4286rem; h1 { - font-size: 1.5000rem; - line-height: 1.7143rem; + font-size: 1.8750rem; + line-height: 2.2857rem; } h1:not(:last-child) { margin-block-end: 8px; } h2 { - font-size: 1.2500rem; - line-height: 1.4286rem; + font-size: 1.5000rem; + line-height: 1.7143rem; &:not(:first-child) { margin-block-start: 16px; @@ -334,7 +334,7 @@ exports[`euiTextStyles sizes s 1`] = ` } h3 { - font-size: 1.0000rem; + font-size: 1.2500rem; line-height: 1.4286rem; &:not(:first-child) { @@ -347,8 +347,8 @@ exports[`euiTextStyles sizes s 1`] = ` } h4 { - font-size: 0.8750rem; - line-height: 1.1429rem; + font-size: 1.0000rem; + line-height: 1.4286rem; &:not(:first-child) { margin-block-start: 16px; @@ -360,7 +360,7 @@ exports[`euiTextStyles sizes s 1`] = ` } h5 { - font-size: 0.7500rem; + font-size: 0.8750rem; line-height: 1.1429rem; &:not(:first-child) { @@ -373,8 +373,8 @@ exports[`euiTextStyles sizes s 1`] = ` } h6 { - font-size: 0.6875rem; - line-height: 0.8571rem; + font-size: 0.7500rem; + line-height: 1.1429rem; &:not(:first-child) { margin-block-start: 16px; @@ -459,15 +459,15 @@ exports[`euiTextStyles sizes xs 1`] = ` line-height: 1.1429rem; h1 { - font-size: 1.2857rem; - line-height: 1.4286rem; + font-size: 1.6071rem; + line-height: 2.0000rem; } h1:not(:last-child) { margin-block-end: 4px; } h2 { - font-size: 1.0714rem; + font-size: 1.2857rem; line-height: 1.4286rem; &:not(:first-child) { @@ -480,8 +480,8 @@ exports[`euiTextStyles sizes xs 1`] = ` } h3 { - font-size: 0.8571rem; - line-height: 1.1429rem; + font-size: 1.0714rem; + line-height: 1.4286rem; &:not(:first-child) { margin-block-start: 8px; @@ -493,7 +493,7 @@ exports[`euiTextStyles sizes xs 1`] = ` } h4 { - font-size: 0.7500rem; + font-size: 0.8571rem; line-height: 1.1429rem; &:not(:first-child) { @@ -506,8 +506,8 @@ exports[`euiTextStyles sizes xs 1`] = ` } h5 { - font-size: 0.6429rem; - line-height: 0.8571rem; + font-size: 0.7500rem; + line-height: 1.1429rem; &:not(:first-child) { margin-block-start: 8px; @@ -519,7 +519,7 @@ exports[`euiTextStyles sizes xs 1`] = ` } h6 { - font-size: 0.5893rem; + font-size: 0.6429rem; line-height: 0.8571rem; &: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 48e547df129..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,25 +3,25 @@ exports[`euiTitle mixin returns a static object of title font properties for each title size l 1`] = ` { "color": "#1a1c21", - "fontSize": "1.7143rem", + "fontSize": "2.1429rem", "fontWeight": 600, - "lineHeight": "2.0000rem", + "lineHeight": "2.5714rem", } `; exports[`euiTitle mixin returns a static object of title font properties for each title size m 1`] = ` { "color": "#1a1c21", - "fontSize": "1.4286rem", + "fontSize": "1.7143rem", "fontWeight": 600, - "lineHeight": "1.7143rem", + "lineHeight": "2.0000rem", } `; exports[`euiTitle mixin returns a static object of title font properties for each title size s 1`] = ` { "color": "#1a1c21", - "fontSize": "1.1429rem", + "fontSize": "1.4286rem", "fontWeight": 600, "lineHeight": "1.7143rem", } @@ -30,25 +30,25 @@ exports[`euiTitle mixin returns a static object of title font properties for eac exports[`euiTitle mixin returns a static object of title font properties for each title size xs 1`] = ` { "color": "#1a1c21", - "fontSize": "1.0000rem", + "fontSize": "1.1429rem", "fontWeight": 600, - "lineHeight": "1.4286rem", + "lineHeight": "1.7143rem", } `; exports[`euiTitle mixin returns a static object of title font properties for each title size xxs 1`] = ` { "color": "#1a1c21", - "fontSize": "0.8571rem", + "fontSize": "1.0000rem", "fontWeight": 600, - "lineHeight": "1.1429rem", + "lineHeight": "1.4286rem", } `; exports[`euiTitle mixin returns a static object of title font properties for each title size xxxs 1`] = ` { "color": "#1a1c21", - "fontSize": "0.7857rem", + "fontSize": "0.8571rem", "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 f59cc4c4b1f..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 @@ -10,7 +10,7 @@ exports[`euiFontSizeFromScale scale xl 1`] = `"1.7143rem"`; exports[`euiFontSizeFromScale scale xs 1`] = `"0.8571rem"`; -exports[`euiFontSizeFromScale scale xxl 1`] = `"3.2857rem"`; +exports[`euiFontSizeFromScale scale xxl 1`] = `"2.1429rem"`; exports[`euiFontSizeFromScale scale xxs 1`] = `"0.7857rem"`; @@ -32,7 +32,7 @@ exports[`euiLineHeightFromBaseline scale xl 1`] = `"2.0000rem"`; exports[`euiLineHeightFromBaseline scale xs 1`] = `"1.1429rem"`; -exports[`euiLineHeightFromBaseline scale xxl 1`] = `"4.0000rem"`; +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 edb41b675e7..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 @@ -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.875em", + "fontSize": "1.875em", "lineHeight": "1.2495", } `; @@ -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": "46px", - "lineHeight": "56px", + "fontSize": "30px", + "lineHeight": "36px", } `; @@ -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": "3.2857rem", - "lineHeight": "4.0000rem", + "fontSize": "2.1429rem", + "lineHeight": "2.5714rem", } `;