Skip to content

[Visual Refresh] Update Typography scale #8103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mgadewoll merged 1 commit into from
Oct 31, 2024
Merged

[Visual Refresh] Update Typography scale #8103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/eui-theme-borealis/src/variables/_font_weight.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
1 change: 1 addition & 0 deletions packages/eui-theme-borealis/src/variables/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@

@import 'buttons';
@import 'page';
@import 'font_weight';
@import 'typography';
16 changes: 8 additions & 8 deletions packages/eui-theme-borealis/src/variables/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
24 changes: 12 additions & 12 deletions packages/eui-theme-borealis/src/variables/_typography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 = {
Expand Down