From 37f35903e1d53c05a1d0f59fe6fdd3caf4d9d7c3 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 6 Apr 2022 23:34:15 -0400 Subject: [PATCH 01/16] Quick docs output of font.scale and renamed SCALES to FONT_SCALES --- .../views/theme/typography/_typography_js.tsx | 39 ++++++++++++++++++- .../src/views/theme/typography/typography.tsx | 5 +-- src/global_styling/variables/_typography.ts | 11 +++--- src/global_styling/variables/text.ts | 4 +- src/global_styling/variables/title.ts | 4 +- .../global_styling/variables/_typography.ts | 11 +----- .../global_styling/variables/title.ts | 4 +- 7 files changed, 53 insertions(+), 25 deletions(-) diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index db212c61720..8a278e0782a 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/src-docs/src/views/theme/typography/_typography_js.tsx @@ -6,9 +6,15 @@ import { EuiCode } from '../../../../../src/components'; import { fontWeight, _EuiThemeFontWeight, + FONT_SCALES, } from '../../../../../src/global_styling/variables/_typography'; -import { EuiThemeFontBase, EuiThemeFontWeight, ThemeRowType } from '../_props'; +import { + EuiThemeFontBase, + EuiThemeFontScale, + EuiThemeFontWeight, + ThemeRowType, +} from '../_props'; import { getPropsFromComponent } from '../../../services/props/get_props'; import { ThemeExample } from '../_components/_theme_example'; import { ThemeValuesTable } from '../_components/_theme_values_table'; @@ -124,3 +130,34 @@ export const FontWeightJS: FunctionComponent = ({ ); }; + +const scaleKeys = FONT_SCALES; + +export const FontScaleJS = () => { + const { euiTheme } = useEuiTheme(); + const scaleProps = getPropsFromComponent(EuiThemeFontScale); + + return ( + <> + { + return { + id: scale, + token: `font.scale.${scale}`, + type: scaleProps[scale], + value: `${euiTheme.font.scale[scale] * euiTheme.base}px`, + }; + })} + render={(item) => ( +
+ Aa +
+ )} + /> + + ); +}; diff --git a/src-docs/src/views/theme/typography/typography.tsx b/src-docs/src/views/theme/typography/typography.tsx index 6ed8626c733..3c4b9c49501 100644 --- a/src-docs/src/views/theme/typography/typography.tsx +++ b/src-docs/src/views/theme/typography/typography.tsx @@ -16,12 +16,11 @@ import { EuiLink, EuiRange, EuiCode, - EuiCallOut, } from '../../../../../src'; import { ThemeExample } from '../_components/_theme_example'; -import { FontJS, FontWeightJS } from './_typography_js'; +import { FontJS, FontScaleJS, FontWeightJS } from './_typography_js'; import { FontSass, FontWeightSass, @@ -83,7 +82,7 @@ export default () => { >{`${typographySections[2].title}`} - + ); } diff --git a/src/global_styling/variables/_typography.ts b/src/global_styling/variables/_typography.ts index 4527627b0df..88ab6fdc91e 100644 --- a/src/global_styling/variables/_typography.ts +++ b/src/global_styling/variables/_typography.ts @@ -21,12 +21,12 @@ export const fontScale = { xs: 0.75, s: 0.875, m: 1, - l: 1.25, - xl: 1.75, + l: 1.375, + xl: 1.6875, xxl: 2.125, }; -export const SCALES = keysOf(fontScale); +export const FONT_SCALES = keysOf(fontScale); export type _EuiThemeFontScale = keyof typeof fontScale; /* @@ -60,7 +60,7 @@ export type _EuiThemeFontBase = { // Families & base font settings export const fontBase: _EuiThemeFontBase = { - family: "'Inter UI', BlinkMacSystemFont, Helvetica, Arial, sans-serif", + family: "'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif", familyCode: "'Roboto Mono', Menlo, Courier, monospace", // Careful using ligatures. Code editors like ACE will often error because of width calculations @@ -108,8 +108,7 @@ export const font: EuiThemeFont = { scale: fontScale, weight: fontWeight, body: { - scale: 'm', + scale: 's', weight: 'regular', - letterSpacing: '-.005em', }, }; diff --git a/src/global_styling/variables/text.ts b/src/global_styling/variables/text.ts index 4ead53c1cb1..4ac97129f7c 100644 --- a/src/global_styling/variables/text.ts +++ b/src/global_styling/variables/text.ts @@ -8,7 +8,7 @@ import { CSSProperties } from 'react'; import { computed, lineHeightFromBaseline } from '../../services/theme'; -import { _EuiThemeFontScale, SCALES } from './_typography'; +import { _EuiThemeFontScale, FONT_SCALES } from './_typography'; /** * NOTE: These were quick conversions of their Sass counterparts. @@ -22,7 +22,7 @@ export type EuiThemeFontSize = { }; }; -export const fontSize: EuiThemeFontSize = SCALES.reduce((acc, elem) => { +export const fontSize: EuiThemeFontSize = FONT_SCALES.reduce((acc, elem) => { acc[elem] = { fontSize: computed(([scale]) => `${scale}rem`, [`font.scale.${elem}`]), lineHeight: computed( diff --git a/src/global_styling/variables/title.ts b/src/global_styling/variables/title.ts index f836974240b..fa57d5cd712 100644 --- a/src/global_styling/variables/title.ts +++ b/src/global_styling/variables/title.ts @@ -8,7 +8,7 @@ import { CSSProperties } from 'react'; import { computed } from '../../services/theme/utils'; -import { _EuiThemeFontScale, SCALES } from './_typography'; +import { _EuiThemeFontScale, FONT_SCALES } from './_typography'; /** * NOTE: These were quick conversions of their Sass counterparts. @@ -65,7 +65,7 @@ const titlesPartial: { }, }; -export const title: EuiThemeTitle = SCALES.reduce((acc, size) => { +export const title: EuiThemeTitle = FONT_SCALES.reduce((acc, size) => { acc[size] = { fontSize: computed(([{ fontSize }]) => fontSize, [`font.size.${size}`]), lineHeight: computed(([{ lineHeight }]) => lineHeight, [ diff --git a/src/themes/amsterdam/global_styling/variables/_typography.ts b/src/themes/amsterdam/global_styling/variables/_typography.ts index 8959e440693..aa305c97699 100644 --- a/src/themes/amsterdam/global_styling/variables/_typography.ts +++ b/src/themes/amsterdam/global_styling/variables/_typography.ts @@ -12,13 +12,6 @@ import { } from '../../../../global_styling/variables/_typography'; /** - * Amsterdam theme just changes the main font from the beta Inter UI to Inter + * With the removal of the Legacy theme, Amsterdam's overrides have moved to the default */ -export const font_ams: EuiThemeFont = { - ...font, - family: "'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif", - body: { - scale: 's', - weight: 'regular', - }, -}; +export const font_ams: EuiThemeFont = font; diff --git a/src/themes/amsterdam/global_styling/variables/title.ts b/src/themes/amsterdam/global_styling/variables/title.ts index fae6e5e9792..ff7f60ae072 100644 --- a/src/themes/amsterdam/global_styling/variables/title.ts +++ b/src/themes/amsterdam/global_styling/variables/title.ts @@ -15,12 +15,12 @@ import { title, EuiThemeTitle, } from '../../../../global_styling/variables/title'; -import { SCALES } from '../../../../global_styling/variables/_typography'; +import { FONT_SCALES } from '../../../../global_styling/variables/_typography'; import { computed } from '../../../../services/theme/utils'; // For Amsterdam, change all font-weights to bold and remove letter-spacing -export const title_ams: EuiThemeTitle = SCALES.reduce((acc, elem) => { +export const title_ams: EuiThemeTitle = FONT_SCALES.reduce((acc, elem) => { acc[elem] = { ...title[elem], fontWeight: computed(([fontWeight]) => fontWeight, ['font.weight.bold']), From e2777d4508607248fd606d283c6a2b637506e58b Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 8 Apr 2022 00:39:36 -0400 Subject: [PATCH 02/16] Font size as function/hook --- .../views/theme/customizing/_typography.js | 4 +- .../views/theme/typography/_typography_js.tsx | 11 +++-- .../theme/typography/_typography_sass.tsx | 5 +- src/global_styling/variables/_typography.ts | 4 +- src/global_styling/variables/text.ts | 39 +++++++-------- src/services/theme/typography.ts | 49 +++++++++++++++---- 6 files changed, 73 insertions(+), 39 deletions(-) diff --git a/src-docs/src/views/theme/customizing/_typography.js b/src-docs/src/views/theme/customizing/_typography.js index 02b359662f3..0c095d892de 100644 --- a/src-docs/src/views/theme/customizing/_typography.js +++ b/src-docs/src/views/theme/customizing/_typography.js @@ -139,7 +139,7 @@ export default ({ onThemeUpdate }) => { onUpdate={(value) => updateFont('baseline', value)} /> - + {/* { value={font.lineHeightMultiplier} onUpdate={(value) => updateFont('lineHeightMultiplier', value)} numberProps={{ step: 0.1 }} - /> + /> */} diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index 8a278e0782a..aa1a6f47f7e 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/src-docs/src/views/theme/typography/_typography_js.tsx @@ -8,6 +8,7 @@ import { _EuiThemeFontWeight, FONT_SCALES, } from '../../../../../src/global_styling/variables/_typography'; +import { euiFontSize } from '../../../../../src/global_styling/variables/text'; import { EuiThemeFontBase, @@ -143,18 +144,20 @@ export const FontScaleJS = () => { items={scaleKeys.map((scale) => { return { id: scale, - token: `font.scale.${scale}`, + token: `euiFontSize('${scale}')`, type: scaleProps[scale], - value: `${euiTheme.font.scale[scale] * euiTheme.base}px`, + value: `${euiFontSize(scale, euiTheme).fontSize}`, }; })} + sampleColumnProps={{ width: '50%', align: 'left' }} + tokenColumnProps={{ width: 'auto', align: 'left' }} render={(item) => (
- Aa + The quick brown fox jumped over the blue moon to catch a snail
)} /> diff --git a/src-docs/src/views/theme/typography/_typography_sass.tsx b/src-docs/src/views/theme/typography/_typography_sass.tsx index 34b80d9fff6..67e9ed58762 100644 --- a/src-docs/src/views/theme/typography/_typography_sass.tsx +++ b/src-docs/src/views/theme/typography/_typography_sass.tsx @@ -209,10 +209,10 @@ export const FontWeightSass: FunctionComponent = ({ const euiFontSizes = [ 'euiFontSizeXS', 'euiFontSizeS', - 'euiFontSize', 'euiFontSizeM', 'euiFontSizeL', 'euiFontSizeXL', + 'euiFontSizeXXL', ]; export const FontScaleSass = () => { @@ -234,12 +234,13 @@ export const FontScaleSass = () => { /> base / 4, ['base']), - lineHeightMultiplier: 1.5, + // lineHeightMultiplier: 1.5, }; /* diff --git a/src/global_styling/variables/text.ts b/src/global_styling/variables/text.ts index 4ac97129f7c..1c4b60b3418 100644 --- a/src/global_styling/variables/text.ts +++ b/src/global_styling/variables/text.ts @@ -7,28 +7,27 @@ */ import { CSSProperties } from 'react'; -import { computed, lineHeightFromBaseline } from '../../services/theme'; -import { _EuiThemeFontScale, FONT_SCALES } from './_typography'; - -/** - * NOTE: These were quick conversions of their Sass counterparts. - * They have yet to be used/tested. - */ +import { + lineHeightFromBaseline, + fontSizeFromScale, +} from '../../services/theme/typography'; +import { UseEuiTheme } from '../../services/theme/hooks'; +import { _EuiThemeFontScale } from './_typography'; export type EuiThemeFontSize = { - [mapType in _EuiThemeFontScale]: { - fontSize: CSSProperties['fontSize']; - lineHeight: CSSProperties['lineHeight']; - }; + fontSize: CSSProperties['fontSize']; + lineHeight: CSSProperties['lineHeight']; }; -export const fontSize: EuiThemeFontSize = FONT_SCALES.reduce((acc, elem) => { - acc[elem] = { - fontSize: computed(([scale]) => `${scale}rem`, [`font.scale.${elem}`]), - lineHeight: computed( - ([base, font]) => lineHeightFromBaseline(base, font, font.scale[elem]), - ['base', 'font'] - ), +/** + * Returns font-size and line-height + */ +export const euiFontSize = ( + scale: _EuiThemeFontScale, + { base, font }: UseEuiTheme['euiTheme'] +): EuiThemeFontSize => { + return { + fontSize: fontSizeFromScale(base, font.scale, font.body.scale, scale), + lineHeight: lineHeightFromBaseline(base, font, font.scale[scale]), }; - return acc; -}, {} as EuiThemeFontSize); +}; diff --git a/src/services/theme/typography.ts b/src/services/theme/typography.ts index 4fab86d443b..c5aee75c642 100644 --- a/src/services/theme/typography.ts +++ b/src/services/theme/typography.ts @@ -6,7 +6,13 @@ * Side Public License, v 1. */ -import { _EuiThemeFontBase } from '../../global_styling/variables/_typography'; +import { + EuiThemeFont, + _EuiThemeFontScale, +} from '../../global_styling/variables/_typography'; + +export const LINE_HEIGHT_MULTIPLIER_S = 1.5; +export const LINE_HEIGHT_MULTIPLIER_L = 1.25; /** * Calculates the line-height to the closest multiple of the baseline @@ -14,23 +20,48 @@ import { _EuiThemeFontBase } from '../../global_styling/variables/_typography'; * If our base font size (euiFontSize) is 16, and our baseline is 4. To ensure the * text stays on the baseline, we pass a multiplier to calculate a line-height. * @param base - Theme base unit - * @param font - Requires numbers for the `lineHeightMultiplier` and `baseline` values + * @param font - Requires the `body` and `baseline` values * @param scale - The font scale multiplier * * * @returns string - Rem unit aligned to baseline */ export function lineHeightFromBaseline( base: number, - font: { - baseline: _EuiThemeFontBase['baseline']; - lineHeightMultiplier: _EuiThemeFontBase['lineHeightMultiplier']; - }, + font: EuiThemeFont, scale: number ) { - const { baseline, lineHeightMultiplier } = font; + const { baseline, body } = font; + const numerator = base * scale; + const denominator = base * font.scale[body.scale]; + + const _lineHeightMultiplier = + numerator <= base ? LINE_HEIGHT_MULTIPLIER_S : LINE_HEIGHT_MULTIPLIER_L; const pixelValue = - Math.floor(Math.round(base * scale * lineHeightMultiplier) / baseline) * + Math.floor(Math.round(numerator * _lineHeightMultiplier) / baseline) * baseline; - return `${pixelValue / base}rem`; + return `${pixelValue / denominator}rem`; +} + +/** + * + * + * + * @param base = 16 + * @param scale = full scale + * @param bodyScale = 's' + * @param scale = 'm' + * @returns + */ + +export function fontSizeFromScale( + base: number, + scale: { [key in _EuiThemeFontScale]: number }, + bodyScale: _EuiThemeFontScale, + size: _EuiThemeFontScale +) { + const numerator = base * scale[size]; + const denominator = base * scale[bodyScale]; + + return `${(numerator / denominator).toFixed(4)}rem`; } From 626bbdbab5f137fa4cd65f03c6ee4c2ca43b1af7 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 8 Apr 2022 01:25:12 -0400 Subject: [PATCH 03/16] Pixel vs Rem --- .../views/theme/typography/_typography_js.tsx | 101 +++++++++++++----- src/components/table/table_row_cell.tsx | 2 +- src/global_styling/variables/text.ts | 18 +++- src/services/theme/typography.ts | 14 ++- 4 files changed, 102 insertions(+), 33 deletions(-) diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index aa1a6f47f7e..1f8efce4401 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/src-docs/src/views/theme/typography/_typography_js.tsx @@ -1,7 +1,12 @@ -import React, { FunctionComponent } from 'react'; +import React, { FunctionComponent, useState } from 'react'; import { css } from '@emotion/react'; import { useEuiTheme } from '../../../../../src/services'; -import { EuiCode } from '../../../../../src/components'; +import { + EuiBasicTable, + EuiCode, + EuiSpacer, + EuiSwitch, +} from '../../../../../src/components'; import { fontWeight, @@ -10,12 +15,7 @@ import { } from '../../../../../src/global_styling/variables/_typography'; import { euiFontSize } from '../../../../../src/global_styling/variables/text'; -import { - EuiThemeFontBase, - EuiThemeFontScale, - EuiThemeFontWeight, - ThemeRowType, -} from '../_props'; +import { EuiThemeFontBase, EuiThemeFontWeight, ThemeRowType } from '../_props'; import { getPropsFromComponent } from '../../../services/props/get_props'; import { ThemeExample } from '../_components/_theme_example'; import { ThemeValuesTable } from '../_components/_theme_values_table'; @@ -136,30 +136,81 @@ const scaleKeys = FONT_SCALES; export const FontScaleJS = () => { const { euiTheme } = useEuiTheme(); - const scaleProps = getPropsFromComponent(EuiThemeFontScale); + const [measurement, setMeasurement] = useState<'px' | 'rem'>('rem'); return ( <> - { + setMeasurement(e.target.checked ? 'px' : 'rem')} + /> + + { return { id: scale, - token: `euiFontSize('${scale}')`, - type: scaleProps[scale], - value: `${euiFontSize(scale, euiTheme).fontSize}`, + value: `euiFontSize('${scale}')`, + size: `${euiFontSize(scale, euiTheme, measurement).fontSize}`, + lineHeight: `${ + euiFontSize(scale, euiTheme, measurement).lineHeight + }`, + index, }; })} - sampleColumnProps={{ width: '50%', align: 'left' }} - tokenColumnProps={{ width: 'auto', align: 'left' }} - render={(item) => ( -
- The quick brown fox jumped over the blue moon to catch a snail -
- )} + columns={[ + { + field: 'sample', + name: 'Sample', + valign: 'baseline', + render: (sample, item) => ( +
+ The quick brown fox jumped over the blue moon to catch a snail +
+ ), + mobileOptions: { + width: '100%', + }, + }, + { + field: 'value', + name: 'Function', + width: '200px', + valign: 'baseline', + render: (value: React.ReactNode) => ( + {value} + ), + }, + { + field: 'size', + name: 'Font size', + width: '100px', + valign: 'baseline', + align: 'right', + render: (size: string) => ( + + {size} + + ), + }, + { + field: 'lineHeight', + name: 'Line height', + width: '100px', + valign: 'baseline', + align: 'right', + render: (lineHeight: string) => ( + + {lineHeight} + + ), + }, + ]} /> ); diff --git a/src/components/table/table_row_cell.tsx b/src/components/table/table_row_cell.tsx index f124bbf44e8..7e6c313e356 100644 --- a/src/components/table/table_row_cell.tsx +++ b/src/components/table/table_row_cell.tsx @@ -167,7 +167,7 @@ export const EuiTableRowCell: FunctionComponent = ({ }); const widthValue = - useIsWithinBreakpoints(['xs', 's', 'm']) && mobileOptions.width + useIsWithinBreakpoints(['xs', 's']) && mobileOptions.width ? mobileOptions.width : width; diff --git a/src/global_styling/variables/text.ts b/src/global_styling/variables/text.ts index 1c4b60b3418..eff75c38c2b 100644 --- a/src/global_styling/variables/text.ts +++ b/src/global_styling/variables/text.ts @@ -24,10 +24,22 @@ export type EuiThemeFontSize = { */ export const euiFontSize = ( scale: _EuiThemeFontScale, - { base, font }: UseEuiTheme['euiTheme'] + { base, font }: UseEuiTheme['euiTheme'], + measurement: 'px' | 'rem' = 'rem' ): EuiThemeFontSize => { return { - fontSize: fontSizeFromScale(base, font.scale, font.body.scale, scale), - lineHeight: lineHeightFromBaseline(base, font, font.scale[scale]), + fontSize: fontSizeFromScale( + base, + font.scale, + font.body.scale, + scale, + measurement + ), + lineHeight: lineHeightFromBaseline( + base, + font, + font.scale[scale], + measurement + ), }; }; diff --git a/src/services/theme/typography.ts b/src/services/theme/typography.ts index c5aee75c642..e6847b453e3 100644 --- a/src/services/theme/typography.ts +++ b/src/services/theme/typography.ts @@ -28,7 +28,8 @@ export const LINE_HEIGHT_MULTIPLIER_L = 1.25; export function lineHeightFromBaseline( base: number, font: EuiThemeFont, - scale: number + scale: number, + measurement: 'px' | 'rem' = 'rem' ) { const { baseline, body } = font; const numerator = base * scale; @@ -40,7 +41,9 @@ export function lineHeightFromBaseline( const pixelValue = Math.floor(Math.round(numerator * _lineHeightMultiplier) / baseline) * baseline; - return `${pixelValue / denominator}rem`; + return measurement === 'px' + ? `${pixelValue}px` + : `${(pixelValue / denominator).toFixed(4)}rem`; } /** @@ -58,10 +61,13 @@ export function fontSizeFromScale( base: number, scale: { [key in _EuiThemeFontScale]: number }, bodyScale: _EuiThemeFontScale, - size: _EuiThemeFontScale + size: _EuiThemeFontScale, + measurement: 'px' | 'rem' = 'rem' ) { const numerator = base * scale[size]; const denominator = base * scale[bodyScale]; - return `${(numerator / denominator).toFixed(4)}rem`; + return measurement === 'px' + ? `${numerator}px` + : `${(numerator / denominator).toFixed(4)}rem`; } From d96b3fd089f9ebd81c949c1d19de037df0b83edc Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 8 Apr 2022 01:47:57 -0400 Subject: [PATCH 04/16] Docs and placeholder doc for `font.body.scale` --- .../views/theme/customizing/_typography.js | 34 +++++++++++++- .../views/theme/typography/_typography_js.tsx | 23 ++++++++++ .../src/views/theme/typography/typography.tsx | 46 +++++++------------ 3 files changed, 72 insertions(+), 31 deletions(-) diff --git a/src-docs/src/views/theme/customizing/_typography.js b/src-docs/src/views/theme/customizing/_typography.js index 0c095d892de..7d5631ce6ff 100644 --- a/src-docs/src/views/theme/customizing/_typography.js +++ b/src-docs/src/views/theme/customizing/_typography.js @@ -200,8 +200,8 @@ export default ({ onThemeUpdate }) => {

This typographic scale is used to calculate the font sizes which are - multiplied against the base value and convertd to - pixel and/or rem values. + multiplied against the base value and converted + to pixel and/or rem values.

@@ -225,6 +225,36 @@ export default ({ onThemeUpdate }) => { groupProps={{ alignItems: 'center' }} /> ))} + + + + +

+ The body.scale value determines the base + font-size at which every font-size is calculated against. +

+ + + + + updateScale(key, value)} + // numberProps={{ step: 0.1, style: { width: '6em' } }} + groupProps={{ alignItems: 'center' }} + /> ); diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index 1f8efce4401..c9fda345fdc 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/src-docs/src/views/theme/typography/_typography_js.tsx @@ -140,6 +140,29 @@ export const FontScaleJS = () => { return ( <> + + Font sizing is provided through React hooks and not the global + theme. It returns both the font-size and{' '} + line-height for the provided{' '} + scale. But you can still grab an individual + property via the returned object. +

+ } + example={ +

+ The quick brown fox jumped over the blue moon to catch a snail +

+ } + snippet="euiFontSize('l');" + /> + { const scaleContent = useMemo(() => { if (showSass) { - return ( - <> - -

{`${typographySections[2].title}`}

-

- The typographic scale is loosely based on the{' '} - - Major Third (1.250) typographic scale - - . -

- - - - - ); + return ; } else { - return ( - <> - -

{`${typographySections[2].title}`}

- - - - - ); + return ; } }, [showSass]); @@ -197,6 +170,21 @@ export default () => { /> + + +

{`${typographySections[2].title}`}

+

+ The typographic scale is loosely based on the{' '} + + Major Third (1.250) typographic scale + + . +

+ + + {scaleContent} ); From 079f88432ad2e25b5c7e71fe263574f64ae853e4 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 13 Apr 2022 00:28:08 -0400 Subject: [PATCH 05/16] Created `EuiThemeFontSizeMeasurement` type and added `em` to allowed measurements --- .../views/theme/typography/_typography_js.tsx | 72 +++++++++++++++---- src/global_styling/reset/global_styles.tsx | 5 -- src/global_styling/variables/_typography.ts | 22 ++++-- src/global_styling/variables/text.ts | 3 +- src/services/theme/typography.ts | 24 +++++-- 5 files changed, 96 insertions(+), 30 deletions(-) diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index c9fda345fdc..d2aefc15b12 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/src-docs/src/views/theme/typography/_typography_js.tsx @@ -3,9 +3,11 @@ import { css } from '@emotion/react'; import { useEuiTheme } from '../../../../../src/services'; import { EuiBasicTable, + EuiButtonGroup, EuiCode, + EuiDescribedFormGroup, + EuiPanel, EuiSpacer, - EuiSwitch, } from '../../../../../src/components'; import { @@ -14,6 +16,7 @@ import { FONT_SCALES, } from '../../../../../src/global_styling/variables/_typography'; import { euiFontSize } from '../../../../../src/global_styling/variables/text'; +import { EuiThemeFontSizeMeasurement } from '../../../../../src/services/theme/typography'; import { EuiThemeFontBase, EuiThemeFontWeight, ThemeRowType } from '../_props'; import { getPropsFromComponent } from '../../../services/props/get_props'; @@ -136,7 +139,19 @@ const scaleKeys = FONT_SCALES; export const FontScaleJS = () => { const { euiTheme } = useEuiTheme(); - const [measurement, setMeasurement] = useState<'px' | 'rem'>('rem'); + + const measurements: EuiThemeFontSizeMeasurement[] = ['rem', 'px', 'em']; + + const measurementButtons = measurements.map((m) => { + return { + id: m, + label: m, + }; + }); + + const [measurementSelected, setMeasurementSelected] = useState< + EuiThemeFontSizeMeasurement + >(measurementButtons[0].id); return ( <> @@ -154,7 +169,7 @@ export const FontScaleJS = () => { example={

The quick brown fox jumped over the blue moon to catch a snail @@ -162,22 +177,50 @@ export const FontScaleJS = () => { } snippet="euiFontSize('l');" /> - - setMeasurement(e.target.checked ? 'px' : 'rem')} - /> + + Value measurements} + description={ +

+ The font sizing function also supports the three main measurements + for font-size, rem | px | em, with{' '} + rem being default for all EUI components. +

+ } + > + + setMeasurementSelected(id as EuiThemeFontSizeMeasurement) + } + color="accent" + isFullWidth + /> + + { return { id: scale, - value: `euiFontSize('${scale}')`, - size: `${euiFontSize(scale, euiTheme, measurement).fontSize}`, + value: `euiFontSize('${scale}'${ + measurementSelected !== 'rem' ? `, '${measurementSelected}'` : '' + })`, + size: `${ + euiFontSize(scale, euiTheme, measurementSelected).fontSize + }`, lineHeight: `${ - euiFontSize(scale, euiTheme, measurement).lineHeight + euiFontSize(scale, euiTheme, measurementSelected).lineHeight }`, index, }; @@ -187,10 +230,11 @@ export const FontScaleJS = () => { field: 'sample', name: 'Sample', valign: 'baseline', + width: '50%', render: (sample, item) => (
The quick brown fox jumped over the blue moon to catch a snail @@ -203,7 +247,7 @@ export const FontScaleJS = () => { { field: 'value', name: 'Function', - width: '200px', + width: 'auto', valign: 'baseline', render: (value: React.ReactNode) => ( {value} diff --git a/src/global_styling/reset/global_styles.tsx b/src/global_styling/reset/global_styles.tsx index 2337d113ccb..19137c4bcc8 100644 --- a/src/global_styling/reset/global_styles.tsx +++ b/src/global_styling/reset/global_styles.tsx @@ -42,11 +42,6 @@ export const EuiGlobalStyles = ({}: EuiGlobalStylesProps) => { font-size: ${`${font.scale[font.body.scale] * base}px`}; line-height: ${base / (font.scale[font.body.scale] * base)}; font-weight: ${font.weight[font.body.weight]}; - ${ - font.body.letterSpacing - ? `letter-spacing: ${font.body.letterSpacing};` - : '' - } `; /** diff --git a/src/global_styling/variables/_typography.ts b/src/global_styling/variables/_typography.ts index 5ce3b2b6aea..05a590611bf 100644 --- a/src/global_styling/variables/_typography.ts +++ b/src/global_styling/variables/_typography.ts @@ -73,6 +73,7 @@ export const fontBase: _EuiThemeFontBase = { /* * Font weights */ + export interface _EuiThemeFontWeight { light: CSSProperties['fontWeight']; regular: CSSProperties['fontWeight']; @@ -89,6 +90,21 @@ export const fontWeight: _EuiThemeFontWeight = { bold: 700, }; +/** + * Body / Base styles + */ + +export interface _EuiThemeBody { + /** + * A sizing key from one of the font scales to set as the base body font-size + */ + scale: _EuiThemeFontScale; + /** + * A font weight key for setting the base body weight + */ + weight: keyof _EuiThemeFontWeight; +} + /* * Font */ @@ -96,11 +112,7 @@ export const fontWeight: _EuiThemeFontWeight = { export type EuiThemeFont = _EuiThemeFontBase & { scale: { [key in _EuiThemeFontScale]: number }; weight: _EuiThemeFontWeight; - body: { - scale: _EuiThemeFontScale; - weight: keyof _EuiThemeFontWeight; - letterSpacing?: CSSProperties['letterSpacing']; - }; + body: _EuiThemeBody; }; export const font: EuiThemeFont = { diff --git a/src/global_styling/variables/text.ts b/src/global_styling/variables/text.ts index eff75c38c2b..3d0c1c2c2e8 100644 --- a/src/global_styling/variables/text.ts +++ b/src/global_styling/variables/text.ts @@ -8,6 +8,7 @@ import { CSSProperties } from 'react'; import { + EuiThemeFontSizeMeasurement, lineHeightFromBaseline, fontSizeFromScale, } from '../../services/theme/typography'; @@ -25,7 +26,7 @@ export type EuiThemeFontSize = { export const euiFontSize = ( scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], - measurement: 'px' | 'rem' = 'rem' + measurement: EuiThemeFontSizeMeasurement = 'rem' ): EuiThemeFontSize => { return { fontSize: fontSizeFromScale( diff --git a/src/services/theme/typography.ts b/src/services/theme/typography.ts index e6847b453e3..c0da6a02405 100644 --- a/src/services/theme/typography.ts +++ b/src/services/theme/typography.ts @@ -11,6 +11,8 @@ import { _EuiThemeFontScale, } from '../../global_styling/variables/_typography'; +export type EuiThemeFontSizeMeasurement = 'px' | 'rem' | 'em'; + export const LINE_HEIGHT_MULTIPLIER_S = 1.5; export const LINE_HEIGHT_MULTIPLIER_L = 1.25; @@ -22,14 +24,15 @@ export const LINE_HEIGHT_MULTIPLIER_L = 1.25; * @param base - Theme base unit * @param font - Requires the `body` and `baseline` values * @param scale - The font scale multiplier + * @param measurement - The returned string measurement * * - * @returns string - Rem unit aligned to baseline + * @returns string - Calculated line-height value aligned to baseline */ export function lineHeightFromBaseline( base: number, font: EuiThemeFont, scale: number, - measurement: 'px' | 'rem' = 'rem' + measurement: EuiThemeFontSizeMeasurement = 'rem' ) { const { baseline, body } = font; const numerator = base * scale; @@ -38,6 +41,12 @@ export function lineHeightFromBaseline( const _lineHeightMultiplier = numerator <= base ? LINE_HEIGHT_MULTIPLIER_S : LINE_HEIGHT_MULTIPLIER_L; + if (measurement === 'em') { + // Even though the line-height via `em` cannot be determined against the pixel baseline grid; + // we will assume that typically larger scale font-sizes should have a shorter line-height; + return _lineHeightMultiplier.toString(); + } + const pixelValue = Math.floor(Math.round(numerator * _lineHeightMultiplier) / baseline) * baseline; @@ -53,8 +62,9 @@ export function lineHeightFromBaseline( * @param base = 16 * @param scale = full scale * @param bodyScale = 's' - * @param scale = 'm' - * @returns + * @param size = 'm' + * @param measurement - The returned string measurement + * @returns string - Calculated font-size value */ export function fontSizeFromScale( @@ -62,8 +72,12 @@ export function fontSizeFromScale( scale: { [key in _EuiThemeFontScale]: number }, bodyScale: _EuiThemeFontScale, size: _EuiThemeFontScale, - measurement: 'px' | 'rem' = 'rem' + measurement: EuiThemeFontSizeMeasurement = 'rem' ) { + if (measurement === 'em') { + return `${scale[size]}em`; + } + const numerator = base * scale[size]; const denominator = base * scale[bodyScale]; From 4dadf55cc1c9597d0de8b340bb4c77fea36de442 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 13 Apr 2022 01:01:24 -0400 Subject: [PATCH 06/16] Separating theme types from values - Moved typography values into Amsterdam theme - Added `lineHeightMultiplier` back into theme - Simplified typography functions and moved to functions folder --- .../views/theme/customizing/_typography.js | 2 +- .../views/theme/typography/_typography_js.tsx | 11 +-- src/global_styling/index.ts | 2 + src/global_styling/variables/_typography.ts | 35 +------- src/global_styling/variables/text.ts | 46 ---------- src/services/theme/index.ts | 1 - src/services/theme/typography.ts | 87 ------------------- .../global_styling/variables/_typography.ts | 49 +++++++++-- src/themes/amsterdam/theme.ts | 4 +- 9 files changed, 54 insertions(+), 183 deletions(-) delete mode 100644 src/global_styling/variables/text.ts delete mode 100644 src/services/theme/typography.ts diff --git a/src-docs/src/views/theme/customizing/_typography.js b/src-docs/src/views/theme/customizing/_typography.js index 7d5631ce6ff..de63558bd15 100644 --- a/src-docs/src/views/theme/customizing/_typography.js +++ b/src-docs/src/views/theme/customizing/_typography.js @@ -13,7 +13,7 @@ import { import { fontWeight, fontScale, -} from '../../../../../src/global_styling/variables/_typography'; +} from '../../../../../src/themes/amsterdam/global_styling/variables/_typography'; import { getPropsFromComponent } from '../../../services/props/get_props'; import { ThemeValue } from './_values'; diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index d2aefc15b12..af7d8b79390 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/src-docs/src/views/theme/typography/_typography_js.tsx @@ -11,12 +11,12 @@ import { } from '../../../../../src/components'; import { - fontWeight, _EuiThemeFontWeight, FONT_SCALES, } from '../../../../../src/global_styling/variables/_typography'; -import { euiFontSize } from '../../../../../src/global_styling/variables/text'; -import { EuiThemeFontSizeMeasurement } from '../../../../../src/services/theme/typography'; +import { euiFontSize } from '../../../../../src/global_styling/mixins/_typography'; +import { EuiThemeFontSizeMeasurement } from '../../../../../src/global_styling/functions/typography'; +import { fontWeight } from '../../../../../src/themes/amsterdam/global_styling/variables/_typography'; import { EuiThemeFontBase, EuiThemeFontWeight, ThemeRowType } from '../_props'; import { getPropsFromComponent } from '../../../services/props/get_props'; @@ -204,11 +204,6 @@ export const FontScaleJS = () => { { return { diff --git a/src/global_styling/index.ts b/src/global_styling/index.ts index 0eee3cdb9d3..18271ef0cef 100644 --- a/src/global_styling/index.ts +++ b/src/global_styling/index.ts @@ -7,3 +7,5 @@ */ export * from './reset/global_styles'; +export * from './functions/typography'; +export * from './mixins/_typography'; diff --git a/src/global_styling/variables/_typography.ts b/src/global_styling/variables/_typography.ts index 05a590611bf..63b46566c6a 100644 --- a/src/global_styling/variables/_typography.ts +++ b/src/global_styling/variables/_typography.ts @@ -8,13 +8,12 @@ import { CSSProperties } from 'react'; import { keysOf } from '../../components/common'; -import { computed } from '../../services/theme/utils'; /* * Font scale */ -// Typographic scale -- loosely based on Major Third (1.250) +// TODO: How to reduce to just the array export const fontScale = { xxxs: 0.5625, xxs: 0.6875, @@ -55,19 +54,7 @@ export type _EuiThemeFontBase = { /** * Establishes the ideal line-height percentage, but it is the `baseline` integer that establishes the final pixel/rem value */ - // lineHeightMultiplier: number; -}; - -// Families & base font settings -export const fontBase: _EuiThemeFontBase = { - family: "'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif", - familyCode: "'Roboto Mono', Menlo, Courier, monospace", - - // Careful using ligatures. Code editors like ACE will often error because of width calculations - featureSettings: "'calt' 1, 'kern' 1, 'liga' 1", - - baseline: computed(([base]) => base / 4, ['base']), - // lineHeightMultiplier: 1.5, + lineHeightMultiplier: number; }; /* @@ -82,14 +69,6 @@ export interface _EuiThemeFontWeight { bold: CSSProperties['fontWeight']; } -export const fontWeight: _EuiThemeFontWeight = { - light: 300, - regular: 400, - medium: 500, - semiBold: 600, - bold: 700, -}; - /** * Body / Base styles */ @@ -114,13 +93,3 @@ export type EuiThemeFont = _EuiThemeFontBase & { weight: _EuiThemeFontWeight; body: _EuiThemeBody; }; - -export const font: EuiThemeFont = { - ...fontBase, - scale: fontScale, - weight: fontWeight, - body: { - scale: 's', - weight: 'regular', - }, -}; diff --git a/src/global_styling/variables/text.ts b/src/global_styling/variables/text.ts deleted file mode 100644 index 3d0c1c2c2e8..00000000000 --- a/src/global_styling/variables/text.ts +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import { CSSProperties } from 'react'; -import { - EuiThemeFontSizeMeasurement, - lineHeightFromBaseline, - fontSizeFromScale, -} from '../../services/theme/typography'; -import { UseEuiTheme } from '../../services/theme/hooks'; -import { _EuiThemeFontScale } from './_typography'; - -export type EuiThemeFontSize = { - fontSize: CSSProperties['fontSize']; - lineHeight: CSSProperties['lineHeight']; -}; - -/** - * Returns font-size and line-height - */ -export const euiFontSize = ( - scale: _EuiThemeFontScale, - { base, font }: UseEuiTheme['euiTheme'], - measurement: EuiThemeFontSizeMeasurement = 'rem' -): EuiThemeFontSize => { - return { - fontSize: fontSizeFromScale( - base, - font.scale, - font.body.scale, - scale, - measurement - ), - lineHeight: lineHeightFromBaseline( - base, - font, - font.scale[scale], - measurement - ), - }; -}; diff --git a/src/services/theme/index.ts b/src/services/theme/index.ts index 5cf307f8879..fb6327bd1e3 100644 --- a/src/services/theme/index.ts +++ b/src/services/theme/index.ts @@ -37,5 +37,4 @@ export type { EuiThemeSystem, } from './types'; export { COLOR_MODES_STANDARD } from './types'; -export { lineHeightFromBaseline } from './typography'; export { sizeToPixel } from './size'; diff --git a/src/services/theme/typography.ts b/src/services/theme/typography.ts deleted file mode 100644 index c0da6a02405..00000000000 --- a/src/services/theme/typography.ts +++ /dev/null @@ -1,87 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import { - EuiThemeFont, - _EuiThemeFontScale, -} from '../../global_styling/variables/_typography'; - -export type EuiThemeFontSizeMeasurement = 'px' | 'rem' | 'em'; - -export const LINE_HEIGHT_MULTIPLIER_S = 1.5; -export const LINE_HEIGHT_MULTIPLIER_L = 1.25; - -/** - * Calculates the line-height to the closest multiple of the baseline - * EX: A proper line-height for text is 1.5 times the font-size. - * If our base font size (euiFontSize) is 16, and our baseline is 4. To ensure the - * text stays on the baseline, we pass a multiplier to calculate a line-height. - * @param base - Theme base unit - * @param font - Requires the `body` and `baseline` values - * @param scale - The font scale multiplier - * @param measurement - The returned string measurement - * * - * @returns string - Calculated line-height value aligned to baseline - */ -export function lineHeightFromBaseline( - base: number, - font: EuiThemeFont, - scale: number, - measurement: EuiThemeFontSizeMeasurement = 'rem' -) { - const { baseline, body } = font; - const numerator = base * scale; - const denominator = base * font.scale[body.scale]; - - const _lineHeightMultiplier = - numerator <= base ? LINE_HEIGHT_MULTIPLIER_S : LINE_HEIGHT_MULTIPLIER_L; - - if (measurement === 'em') { - // Even though the line-height via `em` cannot be determined against the pixel baseline grid; - // we will assume that typically larger scale font-sizes should have a shorter line-height; - return _lineHeightMultiplier.toString(); - } - - const pixelValue = - Math.floor(Math.round(numerator * _lineHeightMultiplier) / baseline) * - baseline; - return measurement === 'px' - ? `${pixelValue}px` - : `${(pixelValue / denominator).toFixed(4)}rem`; -} - -/** - * - * - * - * @param base = 16 - * @param scale = full scale - * @param bodyScale = 's' - * @param size = 'm' - * @param measurement - The returned string measurement - * @returns string - Calculated font-size value - */ - -export function fontSizeFromScale( - base: number, - scale: { [key in _EuiThemeFontScale]: number }, - bodyScale: _EuiThemeFontScale, - size: _EuiThemeFontScale, - measurement: EuiThemeFontSizeMeasurement = 'rem' -) { - if (measurement === 'em') { - return `${scale[size]}em`; - } - - const numerator = base * scale[size]; - const denominator = base * scale[bodyScale]; - - return measurement === 'px' - ? `${numerator}px` - : `${(numerator / denominator).toFixed(4)}rem`; -} diff --git a/src/themes/amsterdam/global_styling/variables/_typography.ts b/src/themes/amsterdam/global_styling/variables/_typography.ts index aa305c97699..e253ebb195f 100644 --- a/src/themes/amsterdam/global_styling/variables/_typography.ts +++ b/src/themes/amsterdam/global_styling/variables/_typography.ts @@ -6,12 +6,51 @@ * Side Public License, v 1. */ +import { computed } from '../../../../services/theme/utils'; import { EuiThemeFont, - font, + _EuiThemeFontBase, + _EuiThemeFontWeight, } from '../../../../global_styling/variables/_typography'; -/** - * With the removal of the Legacy theme, Amsterdam's overrides have moved to the default - */ -export const font_ams: EuiThemeFont = font; +// Typographic scale -- loosely based on Major Third (1.250) +export const fontScale = { + xxxs: 0.5625, + xxs: 0.6875, + xs: 0.75, + s: 0.875, + m: 1, + l: 1.375, + xl: 1.6875, + xxl: 2.125, +}; + +// Families & base font settings +export const fontBase: _EuiThemeFontBase = { + family: "'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif", + familyCode: "'Roboto Mono', Menlo, Courier, monospace", + + // Careful using ligatures. Code editors like ACE will often error because of width calculations + featureSettings: "'calt' 1, 'kern' 1, 'liga' 1", + + baseline: computed(([base]) => base / 4, ['base']), + lineHeightMultiplier: 1.5, +}; + +export const fontWeight: _EuiThemeFontWeight = { + light: 300, + regular: 400, + medium: 500, + semiBold: 600, + bold: 700, +}; + +export const font: EuiThemeFont = { + ...fontBase, + scale: fontScale, + weight: fontWeight, + body: { + scale: 's', + weight: 'regular', + }, +}; diff --git a/src/themes/amsterdam/theme.ts b/src/themes/amsterdam/theme.ts index b6ce8e37fd3..30ed5de0471 100644 --- a/src/themes/amsterdam/theme.ts +++ b/src/themes/amsterdam/theme.ts @@ -13,7 +13,7 @@ import { breakpoint } from '../../global_styling/variables/_breakpoint'; import { base, size } from '../../global_styling/variables/_size'; import { colors_ams } from './global_styling/variables/_colors'; -import { font_ams } from './global_styling/variables/_typography'; +import { font } from './global_styling/variables/_typography'; import { border_ams } from './global_styling/variables/_borders'; export const AMSTERDAM_NAME_KEY = 'EUI_THEME_AMSTERDAM'; @@ -22,7 +22,7 @@ export const euiThemeAmsterdam: EuiThemeShape = { colors: colors_ams, base, size, - font: font_ams, + font, border: border_ams, animation, breakpoint, From 0a37a113ea0a515af0722380fed14e9712410c52 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 13 Apr 2022 01:04:34 -0400 Subject: [PATCH 07/16] add files --- src/global_styling/functions/typography.ts | 80 ++++++++++++++++++++++ src/global_styling/mixins/_typography.ts | 35 ++++++++++ 2 files changed, 115 insertions(+) create mode 100644 src/global_styling/functions/typography.ts create mode 100644 src/global_styling/mixins/_typography.ts diff --git a/src/global_styling/functions/typography.ts b/src/global_styling/functions/typography.ts new file mode 100644 index 00000000000..ce107e09e9e --- /dev/null +++ b/src/global_styling/functions/typography.ts @@ -0,0 +1,80 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { _EuiThemeFontScale } from '../variables/_typography'; +import { UseEuiTheme } from '../../services/theme/hooks'; + +export type EuiThemeFontSizeMeasurement = 'px' | 'rem' | 'em'; + +/** + * + * + * + * @param base = 16 + * @param scale = full scale + * @param bodyScale = 's' + * @param size = 'm' + * @param measurement - The returned string measurement + * @returns string - Calculated font-size value + */ + +export function fontSizeFromScale( + scale: _EuiThemeFontScale, + { base, font }: UseEuiTheme['euiTheme'], + measurement: EuiThemeFontSizeMeasurement = 'rem' +) { + if (measurement === 'em') { + return `${font.scale[scale]}em`; + } + + const numerator = base * font.scale[scale]; + const denominator = base * font.scale[font.body.scale]; + + return measurement === 'px' + ? `${numerator}px` + : `${(numerator / denominator).toFixed(4)}rem`; +} + +/** + * Calculates the line-height to the closest multiple of the baseline + * EX: A proper line-height for text is 1.5 times the font-size. + * If our base font size (euiFontSize) is 16, and our baseline is 4. To ensure the + * text stays on the baseline, we pass a multiplier to calculate a line-height. + * @param base - Theme base unit + * @param font - Requires the `body` and `baseline` values + * @param scale - The font scale multiplier + * @param measurement - The returned string measurement + * * + * @returns string - Calculated line-height value aligned to baseline + */ + +export function lineHeightFromBaseline( + scale: _EuiThemeFontScale, + { base, font }: UseEuiTheme['euiTheme'], + measurement: EuiThemeFontSizeMeasurement = 'rem' +) { + const { baseline, body, lineHeightMultiplier } = font; + const numerator = base * font.scale[scale]; + const denominator = base * font.scale[body.scale]; + + const _lineHeightMultiplier = + numerator <= base ? lineHeightMultiplier : lineHeightMultiplier * 0.833; + + if (measurement === 'em') { + // Even though the line-height via `em` cannot be determined against the pixel baseline grid; + // we will assume that typically larger scale font-sizes should have a shorter line-height; + return _lineHeightMultiplier.toFixed(4).toString(); + } + + const pixelValue = + Math.floor(Math.round(numerator * _lineHeightMultiplier) / baseline) * + baseline; + return measurement === 'px' + ? `${pixelValue}px` + : `${(pixelValue / denominator).toFixed(4)}rem`; +} diff --git a/src/global_styling/mixins/_typography.ts b/src/global_styling/mixins/_typography.ts new file mode 100644 index 00000000000..c4f001d44ba --- /dev/null +++ b/src/global_styling/mixins/_typography.ts @@ -0,0 +1,35 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { CSSProperties } from 'react'; +import { + EuiThemeFontSizeMeasurement, + lineHeightFromBaseline, + fontSizeFromScale, +} from '../functions/typography'; +import { UseEuiTheme } from '../../services/theme/hooks'; +import { _EuiThemeFontScale } from '../variables/_typography'; + +export type EuiThemeFontSize = { + fontSize: CSSProperties['fontSize']; + lineHeight: CSSProperties['lineHeight']; +}; + +/** + * Returns font-size and line-height + */ +export const euiFontSize = ( + scale: _EuiThemeFontScale, + euiTheme: UseEuiTheme['euiTheme'], + measurement: EuiThemeFontSizeMeasurement = 'rem' +): EuiThemeFontSize => { + return { + fontSize: fontSizeFromScale(scale, euiTheme, measurement), + lineHeight: lineHeightFromBaseline(scale, euiTheme, measurement), + }; +}; From 46ea7e54bdd9e2fa048170d3ed244dc6cb881125 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 13 Apr 2022 01:12:41 -0400 Subject: [PATCH 08/16] More moving files --- .../src/views/theme/typography/_typography_js.tsx | 8 ++++---- src/global_styling/index.ts | 1 - .../{functions => local_functions}/typography.ts | 11 ++++++----- src/global_styling/mixins/_typography.ts | 10 ++++++---- 4 files changed, 16 insertions(+), 14 deletions(-) rename src/global_styling/{functions => local_functions}/typography.ts (91%) diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index af7d8b79390..270a14219e7 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/src-docs/src/views/theme/typography/_typography_js.tsx @@ -15,7 +15,7 @@ import { FONT_SCALES, } from '../../../../../src/global_styling/variables/_typography'; import { euiFontSize } from '../../../../../src/global_styling/mixins/_typography'; -import { EuiThemeFontSizeMeasurement } from '../../../../../src/global_styling/functions/typography'; +import { _EuiThemeFontSizeMeasurement } from '../../../../../src/global_styling/local_functions/typography'; import { fontWeight } from '../../../../../src/themes/amsterdam/global_styling/variables/_typography'; import { EuiThemeFontBase, EuiThemeFontWeight, ThemeRowType } from '../_props'; @@ -140,7 +140,7 @@ const scaleKeys = FONT_SCALES; export const FontScaleJS = () => { const { euiTheme } = useEuiTheme(); - const measurements: EuiThemeFontSizeMeasurement[] = ['rem', 'px', 'em']; + const measurements: _EuiThemeFontSizeMeasurement[] = ['rem', 'px', 'em']; const measurementButtons = measurements.map((m) => { return { @@ -150,7 +150,7 @@ export const FontScaleJS = () => { }); const [measurementSelected, setMeasurementSelected] = useState< - EuiThemeFontSizeMeasurement + _EuiThemeFontSizeMeasurement >(measurementButtons[0].id); return ( @@ -195,7 +195,7 @@ export const FontScaleJS = () => { options={measurementButtons} idSelected={measurementSelected} onChange={(id) => - setMeasurementSelected(id as EuiThemeFontSizeMeasurement) + setMeasurementSelected(id as _EuiThemeFontSizeMeasurement) } color="accent" isFullWidth diff --git a/src/global_styling/index.ts b/src/global_styling/index.ts index 18271ef0cef..2053d3662f5 100644 --- a/src/global_styling/index.ts +++ b/src/global_styling/index.ts @@ -7,5 +7,4 @@ */ export * from './reset/global_styles'; -export * from './functions/typography'; export * from './mixins/_typography'; diff --git a/src/global_styling/functions/typography.ts b/src/global_styling/local_functions/typography.ts similarity index 91% rename from src/global_styling/functions/typography.ts rename to src/global_styling/local_functions/typography.ts index ce107e09e9e..7bb027c5dff 100644 --- a/src/global_styling/functions/typography.ts +++ b/src/global_styling/local_functions/typography.ts @@ -6,11 +6,12 @@ * Side Public License, v 1. */ -import { _EuiThemeFontScale } from '../variables/_typography'; +import { + _EuiThemeFontScale, + _EuiThemeFontSizeMeasurement, +} from '../variables/_typography'; import { UseEuiTheme } from '../../services/theme/hooks'; -export type EuiThemeFontSizeMeasurement = 'px' | 'rem' | 'em'; - /** * * @@ -26,7 +27,7 @@ export type EuiThemeFontSizeMeasurement = 'px' | 'rem' | 'em'; export function fontSizeFromScale( scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], - measurement: EuiThemeFontSizeMeasurement = 'rem' + measurement: _EuiThemeFontSizeMeasurement = 'rem' ) { if (measurement === 'em') { return `${font.scale[scale]}em`; @@ -56,7 +57,7 @@ export function fontSizeFromScale( export function lineHeightFromBaseline( scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], - measurement: EuiThemeFontSizeMeasurement = 'rem' + measurement: _EuiThemeFontSizeMeasurement = 'rem' ) { const { baseline, body, lineHeightMultiplier } = font; const numerator = base * font.scale[scale]; diff --git a/src/global_styling/mixins/_typography.ts b/src/global_styling/mixins/_typography.ts index c4f001d44ba..de3b4da48f1 100644 --- a/src/global_styling/mixins/_typography.ts +++ b/src/global_styling/mixins/_typography.ts @@ -8,12 +8,14 @@ import { CSSProperties } from 'react'; import { - EuiThemeFontSizeMeasurement, lineHeightFromBaseline, fontSizeFromScale, -} from '../functions/typography'; +} from '../local_functions/typography'; import { UseEuiTheme } from '../../services/theme/hooks'; -import { _EuiThemeFontScale } from '../variables/_typography'; +import { + _EuiThemeFontScale, + _EuiThemeFontSizeMeasurement, +} from '../variables/_typography'; export type EuiThemeFontSize = { fontSize: CSSProperties['fontSize']; @@ -26,7 +28,7 @@ export type EuiThemeFontSize = { export const euiFontSize = ( scale: _EuiThemeFontScale, euiTheme: UseEuiTheme['euiTheme'], - measurement: EuiThemeFontSizeMeasurement = 'rem' + measurement: _EuiThemeFontSizeMeasurement = 'rem' ): EuiThemeFontSize => { return { fontSize: fontSizeFromScale(scale, euiTheme, measurement), From c336f0dfec1230542296ceda7eca006a12015a92 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 13 Apr 2022 01:20:10 -0400 Subject: [PATCH 09/16] More moving files --- .../views/theme/typography/_typography_js.tsx | 19 +++++++++---------- src/global_styling/index.ts | 1 + src/global_styling/variables/_typography.ts | 2 ++ 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index 270a14219e7..cbf750cdb0b 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/src-docs/src/views/theme/typography/_typography_js.tsx @@ -12,17 +12,16 @@ import { import { _EuiThemeFontWeight, - FONT_SCALES, -} from '../../../../../src/global_styling/variables/_typography'; -import { euiFontSize } from '../../../../../src/global_styling/mixins/_typography'; -import { _EuiThemeFontSizeMeasurement } from '../../../../../src/global_styling/local_functions/typography'; -import { fontWeight } from '../../../../../src/themes/amsterdam/global_styling/variables/_typography'; + _EuiThemeFontSizeMeasurement, + _EuiThemeFontScale, + euiFontSize, +} from '../../../../../src/global_styling'; import { EuiThemeFontBase, EuiThemeFontWeight, ThemeRowType } from '../_props'; import { getPropsFromComponent } from '../../../services/props/get_props'; +import { getDescription } from '../../../services/props/get_description'; import { ThemeExample } from '../_components/_theme_example'; import { ThemeValuesTable } from '../_components/_theme_values_table'; -import { getDescription } from '../../../services/props/get_description'; export const FontJS = () => { const { euiTheme } = useEuiTheme(); @@ -87,13 +86,14 @@ export const FontJS = () => { ); }; -const weightKeys = Object.keys(fontWeight) as Array; - export const FontWeightJS: FunctionComponent = ({ description, }) => { const { euiTheme } = useEuiTheme(); const weightProps = getPropsFromComponent(EuiThemeFontWeight); + const weightKeys = Object.keys(euiTheme.font.weight) as Array< + keyof _EuiThemeFontWeight + >; return ( <> @@ -135,10 +135,9 @@ export const FontWeightJS: FunctionComponent = ({ ); }; -const scaleKeys = FONT_SCALES; - export const FontScaleJS = () => { const { euiTheme } = useEuiTheme(); + const scaleKeys = Object.keys(euiTheme.font.scale) as _EuiThemeFontScale[]; const measurements: _EuiThemeFontSizeMeasurement[] = ['rem', 'px', 'em']; diff --git a/src/global_styling/index.ts b/src/global_styling/index.ts index 2053d3662f5..d9de65bf61a 100644 --- a/src/global_styling/index.ts +++ b/src/global_styling/index.ts @@ -8,3 +8,4 @@ export * from './reset/global_styles'; export * from './mixins/_typography'; +export * from './variables/_typography'; diff --git a/src/global_styling/variables/_typography.ts b/src/global_styling/variables/_typography.ts index 63b46566c6a..209321b091d 100644 --- a/src/global_styling/variables/_typography.ts +++ b/src/global_styling/variables/_typography.ts @@ -9,6 +9,8 @@ import { CSSProperties } from 'react'; import { keysOf } from '../../components/common'; +export type _EuiThemeFontSizeMeasurement = 'px' | 'rem' | 'em'; + /* * Font scale */ From 67a3d978f620623320647c3577e1b764bd64a1e3 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 13 Apr 2022 01:37:52 -0400 Subject: [PATCH 10/16] Added hook version with default --- .../views/theme/typography/_typography_js.tsx | 19 ++++++++++--------- src/global_styling/mixins/_typography.ts | 11 ++++++++++- .../global_styling/variables/title.ts | 2 ++ 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index cbf750cdb0b..ac03c4ecd6e 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/src-docs/src/views/theme/typography/_typography_js.tsx @@ -15,6 +15,7 @@ import { _EuiThemeFontSizeMeasurement, _EuiThemeFontScale, euiFontSize, + useEuiFontSize, } from '../../../../../src/global_styling'; import { EuiThemeFontBase, EuiThemeFontWeight, ThemeRowType } from '../_props'; @@ -155,26 +156,26 @@ export const FontScaleJS = () => { return ( <> useEuiFontSize()} description={

- Font sizing is provided through React hooks and not the global - theme. It returns both the font-size and{' '} - line-height for the provided{' '} - scale. But you can still grab an individual - property via the returned object. + Font sizing is provided through this React hook (or function + version) and not the global theme. It returns both the{' '} + font-size and line-height for + the provided scale. But you can still grab an + individual property via the returned object.

} example={

The quick brown fox jumped over the blue moon to catch a snail

} - snippet="euiFontSize('l');" + snippet="useEuiFontSize('l');" /> { items={scaleKeys.map((scale, index) => { return { id: scale, - value: `euiFontSize('${scale}'${ + value: `useEuiFontSize('${scale}'${ measurementSelected !== 'rem' ? `, '${measurementSelected}'` : '' })`, size: `${ diff --git a/src/global_styling/mixins/_typography.ts b/src/global_styling/mixins/_typography.ts index de3b4da48f1..989780e7e4d 100644 --- a/src/global_styling/mixins/_typography.ts +++ b/src/global_styling/mixins/_typography.ts @@ -11,7 +11,7 @@ import { lineHeightFromBaseline, fontSizeFromScale, } from '../local_functions/typography'; -import { UseEuiTheme } from '../../services/theme/hooks'; +import { useEuiTheme, UseEuiTheme } from '../../services/theme/hooks'; import { _EuiThemeFontScale, _EuiThemeFontSizeMeasurement, @@ -35,3 +35,12 @@ export const euiFontSize = ( lineHeight: lineHeightFromBaseline(scale, euiTheme, measurement), }; }; + +// Hook version +export const useEuiFontSize = ( + scale: _EuiThemeFontScale = 'm', + measurement: _EuiThemeFontSizeMeasurement = 'rem' +): EuiThemeFontSize => { + const { euiTheme } = useEuiTheme(); + return euiFontSize(scale, euiTheme, measurement); +}; diff --git a/src/themes/amsterdam/global_styling/variables/title.ts b/src/themes/amsterdam/global_styling/variables/title.ts index ff7f60ae072..e6334bfaa66 100644 --- a/src/themes/amsterdam/global_styling/variables/title.ts +++ b/src/themes/amsterdam/global_styling/variables/title.ts @@ -20,6 +20,8 @@ import { computed } from '../../../../services/theme/utils'; // For Amsterdam, change all font-weights to bold and remove letter-spacing +// TODO: Move to EuiTitle component + export const title_ams: EuiThemeTitle = FONT_SCALES.reduce((acc, elem) => { acc[elem] = { ...title[elem], From 68b4b0105238acac383a80eb2d56b5aae8ccf112 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 19 Apr 2022 17:25:48 -0400 Subject: [PATCH 11/16] Docs cleanup --- .../views/theme/typography/_typography_js.tsx | 24 +++++++++++++++++-- .../src/views/theme/typography/typography.tsx | 12 ++++++++++ 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index ac03c4ecd6e..f9d7531904d 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/src-docs/src/views/theme/typography/_typography_js.tsx @@ -162,8 +162,7 @@ export const FontScaleJS = () => { Font sizing is provided through this React hook (or function version) and not the global theme. It returns both the{' '} font-size and line-height for - the provided scale. But you can still grab an - individual property via the returned object. + the provided scale.

} example={ @@ -177,6 +176,26 @@ export const FontScaleJS = () => { } snippet="useEuiFontSize('l');" /> + useEuiFontSize().fontSize} + description={ +

+ To use precisely only the font-size value, you + will still use the same hook (or function) to grab the individual + property via the returned object. +

+ } + example={ +

+ The quick brown fox jumped over the blue moon to catch a snail +

+ } + snippet="font-size: ${useEuiFontSize('xs').fontSize};" + /> {

} > + { .

+

+ While these functions and hooks exist to get precise font sizing and + associated line-height, we still highly recommend using the{' '} + + EuiText + {' '} + and{' '} + + EuiTitle + {' '} + components as wrappers of your content instead. +

From 7ad158edb8f76e11302069a2d6c671f2a3cbe367 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 19 Apr 2022 17:53:24 -0400 Subject: [PATCH 12/16] File cleanup --- src-docs/src/views/theme/_props.tsx | 2 +- .../__snapshots__/provider.test.tsx.snap | 16 +++++++------- src/global_styling/functions/index.ts | 9 ++++++++ .../typography.ts | 22 ++++++++----------- src/global_styling/index.ts | 4 ++-- src/global_styling/mixins/_helpers.ts | 1 - src/global_styling/mixins/_typography.ts | 12 +++++----- .../variables/{title.ts => _title.ts} | 2 +- src/global_styling/variables/index.ts | 10 +++++++++ .../variables/{_shadow.ts => shadow.ts} | 0 .../{_typography.ts => typography.ts} | 0 src/services/theme/types.ts | 2 +- .../global_styling/mixins/_shadow.ts | 2 +- .../global_styling/variables/_typography.ts | 2 +- .../global_styling/variables/title.ts | 4 ++-- 15 files changed, 51 insertions(+), 37 deletions(-) create mode 100644 src/global_styling/functions/index.ts rename src/global_styling/{local_functions => functions}/typography.ts (86%) rename src/global_styling/variables/{title.ts => _title.ts} (96%) create mode 100644 src/global_styling/variables/index.ts rename src/global_styling/variables/{_shadow.ts => shadow.ts} (100%) rename src/global_styling/variables/{_typography.ts => typography.ts} (100%) diff --git a/src-docs/src/views/theme/_props.tsx b/src-docs/src/views/theme/_props.tsx index efd1cbdd469..844b44ec92f 100644 --- a/src-docs/src/views/theme/_props.tsx +++ b/src-docs/src/views/theme/_props.tsx @@ -30,7 +30,7 @@ import { _EuiThemeFontBase, _EuiThemeFontWeight, _EuiThemeFontScale, -} from '../../../../src/global_styling/variables/_typography'; +} from '../../../../src/global_styling/variables/typography'; export const EuiThemeFontBase: FunctionComponent<_EuiThemeFontBase> = () => (
diff --git a/src/components/provider/__snapshots__/provider.test.tsx.snap b/src/components/provider/__snapshots__/provider.test.tsx.snap index d4aa0803c0f..d6aad36324f 100644 --- a/src/components/provider/__snapshots__/provider.test.tsx.snap +++ b/src/components/provider/__snapshots__/provider.test.tsx.snap @@ -240,10 +240,10 @@ exports[`EuiProvider applying modifications propagates \`modify\` 1`] = ` "featureSettings": "'calt' 1, 'kern' 1, 'liga' 1", "lineHeightMultiplier": 1.5, "scale": Object { - "l": 1.25, + "l": 1.375, "m": 1, "s": 0.875, - "xl": 1.75, + "xl": 1.6875, "xs": 0.75, "xxl": 2.125, "xxs": 0.6875, @@ -535,10 +535,10 @@ exports[`EuiProvider changing color modes propagates \`colorMode\` 1`] = ` "featureSettings": "'calt' 1, 'kern' 1, 'liga' 1", "lineHeightMultiplier": 1.5, "scale": Object { - "l": 1.25, + "l": 1.375, "m": 1, "s": 0.875, - "xl": 1.75, + "xl": 1.6875, "xs": 0.75, "xxl": 2.125, "xxs": 0.6875, @@ -829,10 +829,10 @@ exports[`EuiProvider is rendered 1`] = ` "featureSettings": "'calt' 1, 'kern' 1, 'liga' 1", "lineHeightMultiplier": 1.5, "scale": Object { - "l": 1.25, + "l": 1.375, "m": 1, "s": 0.875, - "xl": 1.75, + "xl": 1.6875, "xs": 0.75, "xxl": 2.125, "xxs": 0.6875, @@ -1123,10 +1123,10 @@ exports[`EuiProvider providing an @emotion cache config applies the cache to glo "featureSettings": "'calt' 1, 'kern' 1, 'liga' 1", "lineHeightMultiplier": 1.5, "scale": Object { - "l": 1.25, + "l": 1.375, "m": 1, "s": 0.875, - "xl": 1.75, + "xl": 1.6875, "xs": 0.75, "xxl": 2.125, "xxs": 0.6875, diff --git a/src/global_styling/functions/index.ts b/src/global_styling/functions/index.ts new file mode 100644 index 00000000000..dc40cbda36d --- /dev/null +++ b/src/global_styling/functions/index.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export * from './typography'; diff --git a/src/global_styling/local_functions/typography.ts b/src/global_styling/functions/typography.ts similarity index 86% rename from src/global_styling/local_functions/typography.ts rename to src/global_styling/functions/typography.ts index 7bb027c5dff..5f07a0c4408 100644 --- a/src/global_styling/local_functions/typography.ts +++ b/src/global_styling/functions/typography.ts @@ -9,22 +9,19 @@ import { _EuiThemeFontScale, _EuiThemeFontSizeMeasurement, -} from '../variables/_typography'; +} from '../variables/typography'; import { UseEuiTheme } from '../../services/theme/hooks'; /** - * - * - * - * @param base = 16 - * @param scale = full scale - * @param bodyScale = 's' - * @param size = 'm' + * Calculates the font-size value based on the provided scale key + * @param scale - The font scale key + * @param theme - Requires the `base` and `font` keys * @param measurement - The returned string measurement + * * * @returns string - Calculated font-size value */ -export function fontSizeFromScale( +export function euiFontSizeFromScale( scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], measurement: _EuiThemeFontSizeMeasurement = 'rem' @@ -46,15 +43,14 @@ export function fontSizeFromScale( * EX: A proper line-height for text is 1.5 times the font-size. * If our base font size (euiFontSize) is 16, and our baseline is 4. To ensure the * text stays on the baseline, we pass a multiplier to calculate a line-height. - * @param base - Theme base unit - * @param font - Requires the `body` and `baseline` values - * @param scale - The font scale multiplier + * @param scale - The font scale key + * @param theme - Requires the `base` and `font` keys * @param measurement - The returned string measurement * * * @returns string - Calculated line-height value aligned to baseline */ -export function lineHeightFromBaseline( +export function euiLineHeightFromBaseline( scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], measurement: _EuiThemeFontSizeMeasurement = 'rem' diff --git a/src/global_styling/index.ts b/src/global_styling/index.ts index 9e69132c532..5fc347eaf52 100644 --- a/src/global_styling/index.ts +++ b/src/global_styling/index.ts @@ -7,6 +7,6 @@ */ export * from './reset/global_styles'; -export * from './variables/_typography'; -export * from './variables/_shadow'; +export * from './functions'; +export * from './variables'; export * from './mixins'; diff --git a/src/global_styling/mixins/_helpers.ts b/src/global_styling/mixins/_helpers.ts index a8bbb53cc50..2b424f33da2 100644 --- a/src/global_styling/mixins/_helpers.ts +++ b/src/global_styling/mixins/_helpers.ts @@ -160,7 +160,6 @@ export const useEuiXScrollWithShadows = createStyleHookFromMixin( euiXScrollWithShadows ); -// One hook to rule them all interface EuiScrollOverflowStyles { direction?: 'y' | 'x'; mask?: boolean; diff --git a/src/global_styling/mixins/_typography.ts b/src/global_styling/mixins/_typography.ts index 989780e7e4d..c67f776249e 100644 --- a/src/global_styling/mixins/_typography.ts +++ b/src/global_styling/mixins/_typography.ts @@ -8,14 +8,14 @@ import { CSSProperties } from 'react'; import { - lineHeightFromBaseline, - fontSizeFromScale, -} from '../local_functions/typography'; + euiLineHeightFromBaseline, + euiFontSizeFromScale, +} from '../functions/typography'; import { useEuiTheme, UseEuiTheme } from '../../services/theme/hooks'; import { _EuiThemeFontScale, _EuiThemeFontSizeMeasurement, -} from '../variables/_typography'; +} from '../variables/typography'; export type EuiThemeFontSize = { fontSize: CSSProperties['fontSize']; @@ -31,8 +31,8 @@ export const euiFontSize = ( measurement: _EuiThemeFontSizeMeasurement = 'rem' ): EuiThemeFontSize => { return { - fontSize: fontSizeFromScale(scale, euiTheme, measurement), - lineHeight: lineHeightFromBaseline(scale, euiTheme, measurement), + fontSize: euiFontSizeFromScale(scale, euiTheme, measurement), + lineHeight: euiLineHeightFromBaseline(scale, euiTheme, measurement), }; }; diff --git a/src/global_styling/variables/title.ts b/src/global_styling/variables/_title.ts similarity index 96% rename from src/global_styling/variables/title.ts rename to src/global_styling/variables/_title.ts index fa57d5cd712..ed162098793 100644 --- a/src/global_styling/variables/title.ts +++ b/src/global_styling/variables/_title.ts @@ -8,7 +8,7 @@ import { CSSProperties } from 'react'; import { computed } from '../../services/theme/utils'; -import { _EuiThemeFontScale, FONT_SCALES } from './_typography'; +import { _EuiThemeFontScale, FONT_SCALES } from './typography'; /** * NOTE: These were quick conversions of their Sass counterparts. diff --git a/src/global_styling/variables/index.ts b/src/global_styling/variables/index.ts new file mode 100644 index 00000000000..2c8cb28a9ac --- /dev/null +++ b/src/global_styling/variables/index.ts @@ -0,0 +1,10 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export * from './typography'; +export * from './shadow'; diff --git a/src/global_styling/variables/_shadow.ts b/src/global_styling/variables/shadow.ts similarity index 100% rename from src/global_styling/variables/_shadow.ts rename to src/global_styling/variables/shadow.ts diff --git a/src/global_styling/variables/_typography.ts b/src/global_styling/variables/typography.ts similarity index 100% rename from src/global_styling/variables/_typography.ts rename to src/global_styling/variables/typography.ts diff --git a/src/services/theme/types.ts b/src/services/theme/types.ts index a19b29fd5a2..a1e9058830c 100644 --- a/src/services/theme/types.ts +++ b/src/services/theme/types.ts @@ -15,7 +15,7 @@ import { EuiThemeBase, EuiThemeSize, } from '../../global_styling/variables/_size'; -import { EuiThemeFont } from '../../global_styling/variables/_typography'; +import { EuiThemeFont } from '../../global_styling/variables/typography'; import { _EuiThemeFocus } from '../../global_styling/variables/_states'; export const COLOR_MODES_STANDARD = { diff --git a/src/themes/amsterdam/global_styling/mixins/_shadow.ts b/src/themes/amsterdam/global_styling/mixins/_shadow.ts index 104c1107fc5..4374c958391 100644 --- a/src/themes/amsterdam/global_styling/mixins/_shadow.ts +++ b/src/themes/amsterdam/global_styling/mixins/_shadow.ts @@ -9,7 +9,7 @@ import { useEuiTheme, UseEuiTheme } from '../../../../services/theme'; import { getShadowColor } from '../functions'; import { createStyleHookFromMixin } from '../../../../global_styling/utils'; -import { _EuiShadowSizes } from '../../../../global_styling/variables/_shadow'; +import { _EuiShadowSizes } from '../../../../global_styling/variables/shadow'; export interface EuiShadowCustomColor { color?: string; diff --git a/src/themes/amsterdam/global_styling/variables/_typography.ts b/src/themes/amsterdam/global_styling/variables/_typography.ts index e253ebb195f..f60cfbb760d 100644 --- a/src/themes/amsterdam/global_styling/variables/_typography.ts +++ b/src/themes/amsterdam/global_styling/variables/_typography.ts @@ -11,7 +11,7 @@ import { EuiThemeFont, _EuiThemeFontBase, _EuiThemeFontWeight, -} from '../../../../global_styling/variables/_typography'; +} from '../../../../global_styling/variables/typography'; // Typographic scale -- loosely based on Major Third (1.250) export const fontScale = { diff --git a/src/themes/amsterdam/global_styling/variables/title.ts b/src/themes/amsterdam/global_styling/variables/title.ts index e6334bfaa66..f7433fc01fa 100644 --- a/src/themes/amsterdam/global_styling/variables/title.ts +++ b/src/themes/amsterdam/global_styling/variables/title.ts @@ -14,8 +14,8 @@ import { title, EuiThemeTitle, -} from '../../../../global_styling/variables/title'; -import { FONT_SCALES } from '../../../../global_styling/variables/_typography'; +} from '../../../../global_styling/variables/_title'; +import { FONT_SCALES } from '../../../../global_styling/variables/typography'; import { computed } from '../../../../services/theme/utils'; // For Amsterdam, change all font-weights to bold and remove letter-spacing From 860aeafb1a58a57207f16a5f2b5a959544f37bdb Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 19 Apr 2022 18:24:24 -0400 Subject: [PATCH 13/16] Better body docs --- src-docs/src/views/theme/_props.tsx | 4 ++- .../views/theme/customizing/_typography.js | 35 ++++++++++++++++--- 2 files changed, 34 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/theme/_props.tsx b/src-docs/src/views/theme/_props.tsx index 844b44ec92f..f66cba4a72d 100644 --- a/src-docs/src/views/theme/_props.tsx +++ b/src-docs/src/views/theme/_props.tsx @@ -30,7 +30,8 @@ import { _EuiThemeFontBase, _EuiThemeFontWeight, _EuiThemeFontScale, -} from '../../../../src/global_styling/variables/typography'; + _EuiThemeBody, +} from '../../../../src/global_styling'; export const EuiThemeFontBase: FunctionComponent<_EuiThemeFontBase> = () => (
@@ -41,6 +42,7 @@ export const EuiThemeFontWeight: FunctionComponent<_EuiThemeFontWeight> = () => export const EuiThemeFontScale: FunctionComponent<_EuiThemeFontScale> = () => (
); +export const EuiThemeBody: FunctionComponent<_EuiThemeBody> = () =>
; import { _EuiThemeBorderColorValues, diff --git a/src-docs/src/views/theme/customizing/_typography.js b/src-docs/src/views/theme/customizing/_typography.js index de63558bd15..a6ec485d064 100644 --- a/src-docs/src/views/theme/customizing/_typography.js +++ b/src-docs/src/views/theme/customizing/_typography.js @@ -22,6 +22,7 @@ import { EuiThemeFontBase, EuiThemeFontWeight, EuiThemeFontScale, + EuiThemeBody, } from '../_props'; import { useDebouncedUpdate } from '../hooks'; @@ -52,6 +53,7 @@ export default ({ onThemeUpdate }) => { const baseProps = getPropsFromComponent(EuiThemeFontBase); const weightProps = getPropsFromComponent(EuiThemeFontWeight); const scaleProps = getPropsFromComponent(EuiThemeFontScale); + const bodyProps = getPropsFromComponent(EuiThemeBody); const fontFamilies = fontClone.family.split(','); const codeFontFamilies = fontClone.familyCode.split(','); @@ -139,7 +141,7 @@ export default ({ onThemeUpdate }) => { onUpdate={(value) => updateFont('baseline', value)} /> - {/* + { value={font.lineHeightMultiplier} onUpdate={(value) => updateFont('lineHeightMultiplier', value)} numberProps={{ step: 0.1 }} - /> */} + /> @@ -225,9 +227,17 @@ export default ({ onThemeUpdate }) => { groupProps={{ alignItems: 'center' }} /> ))} + - + + + +

+ _EuiThemeFontBody +

+ +

The body.scale value determines the base @@ -239,7 +249,7 @@ export default ({ onThemeUpdate }) => { { // numberProps={{ step: 0.1, style: { width: '6em' } }} groupProps={{ alignItems: 'center' }} /> + + + updateScale(key, value)} + // numberProps={{ step: 0.1, style: { width: '6em' } }} + groupProps={{ alignItems: 'center' }} + />

); From f56a28038ff9af92b68279d5201dabeb617933cf Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 19 Apr 2022 18:35:52 -0400 Subject: [PATCH 14/16] cl --- upcoming_changelogs/5822.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 upcoming_changelogs/5822.md diff --git a/upcoming_changelogs/5822.md b/upcoming_changelogs/5822.md new file mode 100644 index 00000000000..fc533a28f7e --- /dev/null +++ b/upcoming_changelogs/5822.md @@ -0,0 +1,5 @@ +- Added `euiFontSize()` and `useEuiFontSize()` JS function and React hook for font sizing + +**Bug fixes** + +- Fixed `EuiBasicTable` mobile styles being in sync between JS and Sass From b962785bc3e9909e920eaa310202e7bca7cf0de6 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 20 Apr 2022 15:11:56 -0400 Subject: [PATCH 15/16] Fix types vs constants Setting a precedent to us `_` when declaring types --- src-docs/src/views/theme/_props.tsx | 8 +-- .../views/theme/typography/_typography_js.tsx | 23 +++---- src/global_styling/variables/_title.ts | 4 +- src/global_styling/variables/typography.ts | 62 +++++++++++-------- .../global_styling/variables/_typography.ts | 7 ++- .../global_styling/variables/title.ts | 21 ++++--- 6 files changed, 69 insertions(+), 56 deletions(-) diff --git a/src-docs/src/views/theme/_props.tsx b/src-docs/src/views/theme/_props.tsx index f66cba4a72d..0054cb32e2a 100644 --- a/src-docs/src/views/theme/_props.tsx +++ b/src-docs/src/views/theme/_props.tsx @@ -28,18 +28,18 @@ export const _EuiThemeSize: FunctionComponent = () =>
; import { _EuiThemeFontBase, - _EuiThemeFontWeight, - _EuiThemeFontScale, + _EuiThemeFontWeights, + _EuiThemeFontScales, _EuiThemeBody, } from '../../../../src/global_styling'; export const EuiThemeFontBase: FunctionComponent<_EuiThemeFontBase> = () => (
); -export const EuiThemeFontWeight: FunctionComponent<_EuiThemeFontWeight> = () => ( +export const EuiThemeFontWeight: FunctionComponent<_EuiThemeFontWeights> = () => (
); -export const EuiThemeFontScale: FunctionComponent<_EuiThemeFontScale> = () => ( +export const EuiThemeFontScale: FunctionComponent<_EuiThemeFontScales> = () => (
); export const EuiThemeBody: FunctionComponent<_EuiThemeBody> = () =>
; diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index f9d7531904d..45401fed4fd 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/src-docs/src/views/theme/typography/_typography_js.tsx @@ -11,11 +11,12 @@ import { } from '../../../../../src/components'; import { - _EuiThemeFontWeight, - _EuiThemeFontSizeMeasurement, - _EuiThemeFontScale, euiFontSize, useEuiFontSize, + EuiThemeFontWeights, + EuiThemeFontScales, + EuiThemeFontSizeMeasurements, + _EuiThemeFontSizeMeasurement, } from '../../../../../src/global_styling'; import { EuiThemeFontBase, EuiThemeFontWeight, ThemeRowType } from '../_props'; @@ -92,9 +93,7 @@ export const FontWeightJS: FunctionComponent = ({ }) => { const { euiTheme } = useEuiTheme(); const weightProps = getPropsFromComponent(EuiThemeFontWeight); - const weightKeys = Object.keys(euiTheme.font.weight) as Array< - keyof _EuiThemeFontWeight - >; + const weightKeys = EuiThemeFontWeights; return ( <> @@ -138,20 +137,18 @@ export const FontWeightJS: FunctionComponent = ({ export const FontScaleJS = () => { const { euiTheme } = useEuiTheme(); - const scaleKeys = Object.keys(euiTheme.font.scale) as _EuiThemeFontScale[]; + const scaleKeys = EuiThemeFontScales; - const measurements: _EuiThemeFontSizeMeasurement[] = ['rem', 'px', 'em']; - - const measurementButtons = measurements.map((m) => { + const measurementButtons = EuiThemeFontSizeMeasurements.map((m) => { return { id: m, label: m, }; }); - const [measurementSelected, setMeasurementSelected] = useState< - _EuiThemeFontSizeMeasurement - >(measurementButtons[0].id); + const [measurementSelected, setMeasurementSelected] = useState( + measurementButtons[0].id + ); return ( <> diff --git a/src/global_styling/variables/_title.ts b/src/global_styling/variables/_title.ts index ed162098793..c1c518d4a73 100644 --- a/src/global_styling/variables/_title.ts +++ b/src/global_styling/variables/_title.ts @@ -8,7 +8,7 @@ import { CSSProperties } from 'react'; import { computed } from '../../services/theme/utils'; -import { _EuiThemeFontScale, FONT_SCALES } from './typography'; +import { _EuiThemeFontScale, EuiThemeFontScales } from './typography'; /** * NOTE: These were quick conversions of their Sass counterparts. @@ -65,7 +65,7 @@ const titlesPartial: { }, }; -export const title: EuiThemeTitle = FONT_SCALES.reduce((acc, size) => { +export const title: EuiThemeTitle = EuiThemeFontScales.reduce((acc, size) => { acc[size] = { fontSize: computed(([{ fontSize }]) => fontSize, [`font.size.${size}`]), lineHeight: computed(([{ lineHeight }]) => lineHeight, [ diff --git a/src/global_styling/variables/typography.ts b/src/global_styling/variables/typography.ts index 209321b091d..ce52bccc3a4 100644 --- a/src/global_styling/variables/typography.ts +++ b/src/global_styling/variables/typography.ts @@ -7,28 +7,33 @@ */ import { CSSProperties } from 'react'; -import { keysOf } from '../../components/common'; -export type _EuiThemeFontSizeMeasurement = 'px' | 'rem' | 'em'; +/** + * Font units of measure + */ + +export const EuiThemeFontSizeMeasurements = ['px', 'rem', 'em'] as const; + +export type _EuiThemeFontSizeMeasurement = typeof EuiThemeFontSizeMeasurements[number]; /* * Font scale */ -// TODO: How to reduce to just the array -export const fontScale = { - xxxs: 0.5625, - xxs: 0.6875, - xs: 0.75, - s: 0.875, - m: 1, - l: 1.375, - xl: 1.6875, - xxl: 2.125, -}; +export const EuiThemeFontScales = [ + 'xxxs', + 'xxs', + 'xs', + 's', + 'm', + 'l', + 'xl', + 'xxl', +] as const; -export const FONT_SCALES = keysOf(fontScale); -export type _EuiThemeFontScale = keyof typeof fontScale; +export type _EuiThemeFontScale = typeof EuiThemeFontScales[number]; + +export type _EuiThemeFontScales = Record<_EuiThemeFontScale, number>; /* * Font base settings @@ -63,13 +68,20 @@ export type _EuiThemeFontBase = { * Font weights */ -export interface _EuiThemeFontWeight { - light: CSSProperties['fontWeight']; - regular: CSSProperties['fontWeight']; - medium: CSSProperties['fontWeight']; - semiBold: CSSProperties['fontWeight']; - bold: CSSProperties['fontWeight']; -} +export const EuiThemeFontWeights = [ + 'light', + 'regular', + 'medium', + 'semiBold', + 'bold', +] as const; + +export type _EuiThemeFontWeight = typeof EuiThemeFontWeights[number]; + +export type _EuiThemeFontWeights = Record< + _EuiThemeFontWeight, + CSSProperties['fontWeight'] +>; /** * Body / Base styles @@ -83,7 +95,7 @@ export interface _EuiThemeBody { /** * A font weight key for setting the base body weight */ - weight: keyof _EuiThemeFontWeight; + weight: keyof _EuiThemeFontWeights; } /* @@ -91,7 +103,7 @@ export interface _EuiThemeBody { */ export type EuiThemeFont = _EuiThemeFontBase & { - scale: { [key in _EuiThemeFontScale]: number }; - weight: _EuiThemeFontWeight; + scale: _EuiThemeFontScales; + weight: _EuiThemeFontWeights; body: _EuiThemeBody; }; diff --git a/src/themes/amsterdam/global_styling/variables/_typography.ts b/src/themes/amsterdam/global_styling/variables/_typography.ts index f60cfbb760d..6cd8bca2480 100644 --- a/src/themes/amsterdam/global_styling/variables/_typography.ts +++ b/src/themes/amsterdam/global_styling/variables/_typography.ts @@ -10,11 +10,12 @@ import { computed } from '../../../../services/theme/utils'; import { EuiThemeFont, _EuiThemeFontBase, - _EuiThemeFontWeight, + _EuiThemeFontScales, + _EuiThemeFontWeights, } from '../../../../global_styling/variables/typography'; // Typographic scale -- loosely based on Major Third (1.250) -export const fontScale = { +export const fontScale: _EuiThemeFontScales = { xxxs: 0.5625, xxs: 0.6875, xs: 0.75, @@ -37,7 +38,7 @@ export const fontBase: _EuiThemeFontBase = { lineHeightMultiplier: 1.5, }; -export const fontWeight: _EuiThemeFontWeight = { +export const fontWeight: _EuiThemeFontWeights = { light: 300, regular: 400, medium: 500, diff --git a/src/themes/amsterdam/global_styling/variables/title.ts b/src/themes/amsterdam/global_styling/variables/title.ts index f7433fc01fa..ed44fb22233 100644 --- a/src/themes/amsterdam/global_styling/variables/title.ts +++ b/src/themes/amsterdam/global_styling/variables/title.ts @@ -15,18 +15,21 @@ import { title, EuiThemeTitle, } from '../../../../global_styling/variables/_title'; -import { FONT_SCALES } from '../../../../global_styling/variables/typography'; +import { EuiThemeFontScales } from '../../../../global_styling/variables/typography'; import { computed } from '../../../../services/theme/utils'; // For Amsterdam, change all font-weights to bold and remove letter-spacing // TODO: Move to EuiTitle component -export const title_ams: EuiThemeTitle = FONT_SCALES.reduce((acc, elem) => { - acc[elem] = { - ...title[elem], - fontWeight: computed(([fontWeight]) => fontWeight, ['font.weight.bold']), - letterSpacing: undefined, - }; - return acc; -}, {} as EuiThemeTitle); +export const title_ams: EuiThemeTitle = EuiThemeFontScales.reduce( + (acc, elem) => { + acc[elem] = { + ...title[elem], + fontWeight: computed(([fontWeight]) => fontWeight, ['font.weight.bold']), + letterSpacing: undefined, + }; + return acc; + }, + {} as EuiThemeTitle +); From e959981d636ca07ba62a6effa3044bcac76c4805 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Thu, 21 Apr 2022 11:24:18 -0400 Subject: [PATCH 16/16] Update src-docs/src/views/theme/typography/_typography_js.tsx Co-authored-by: Elizabet Oliveira --- src-docs/src/views/theme/typography/_typography_js.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index 45401fed4fd..5e6a90dcf92 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/src-docs/src/views/theme/typography/_typography_js.tsx @@ -171,7 +171,7 @@ export const FontScaleJS = () => { The quick brown fox jumped over the blue moon to catch a snail

} - snippet="useEuiFontSize('l');" + snippet="${useEuiFontSize('l')}" /> useEuiFontSize().fontSize}