diff --git a/packages/eui-theme-borealis/src/variables/_font_weight.scss b/packages/eui-theme-borealis/src/variables/_font_weight.scss new file mode 100644 index 00000000000..8ee5e23f925 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_font_weight.scss @@ -0,0 +1,10 @@ +// Separated out to its own file for easy import into docs + +// Font weights +$euiFontWeightLight: 300 !default; +$euiFontWeightRegular: 400 !default; +$euiFontWeightMedium: 450 !default; +$euiFontWeightSemiBold: 500 !default; +$euiFontWeightBold: 600 !default; +$euiCodeFontWeightRegular: 400 !default; +$euiCodeFontWeightBold: 600 !default; diff --git a/packages/eui-theme-borealis/src/variables/_index.scss b/packages/eui-theme-borealis/src/variables/_index.scss index 9768a81e8ee..05411e17464 100644 --- a/packages/eui-theme-borealis/src/variables/_index.scss +++ b/packages/eui-theme-borealis/src/variables/_index.scss @@ -4,4 +4,5 @@ @import 'buttons'; @import 'page'; +@import 'font_weight'; @import 'typography'; diff --git a/packages/eui-theme-borealis/src/variables/_typography.scss b/packages/eui-theme-borealis/src/variables/_typography.scss index 824f56b42da..9b35d9c5fd3 100644 --- a/packages/eui-theme-borealis/src/variables/_typography.scss +++ b/packages/eui-theme-borealis/src/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 +$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-theme-borealis/src/variables/_typography.ts b/packages/eui-theme-borealis/src/variables/_typography.ts index 6454c7b239c..ae43f118d25 100644 --- a/packages/eui-theme-borealis/src/variables/_typography.ts +++ b/packages/eui-theme-borealis/src/variables/_typography.ts @@ -14,16 +14,16 @@ import { type _EuiThemeFontWeights, } from '@elastic/eui-theme-common'; -// Typographic scale -- loosely based on Major Third (1.250) +// Typographic scale -- loosely based on Major Third (1.200) export const fontScale: _EuiThemeFontScales = { - xxxs: 0.5625, - xxs: 0.6875, - xs: 0.75, - s: 0.875, - m: 1, - l: 1.375, - xl: 1.6875, - xxl: 2.125, + xxxs: 0.5625, // 9px + xxs: 0.6875, // 11px + xs: 0.75, // 12px + s: 0.875, // 14px + m: 1, // 16px + l: 1.25, // 20px + xl: 1.5, // 24px + xxl: 1.875, // 30px }; // Families & base font settings @@ -43,9 +43,9 @@ export const fontBase: _EuiThemeFontBase = { export const fontWeight: _EuiThemeFontWeights = { light: 300, regular: 400, - medium: 500, - semiBold: 600, - bold: 700, + medium: 450, + semiBold: 500, + bold: 600, }; export const font: _EuiThemeFont = {