diff --git a/scss/_reboot.scss b/scss/_reboot.scss index ea0b3d1e51..2efad8680a 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -364,6 +364,7 @@ pre { margin-bottom: 1rem; // 2 overflow: auto; // 3 @include font-size($code-font-size); + line-height: $pre-line-height; // Boosted mod color: $pre-color; -ms-overflow-style: scrollbar; // 4 diff --git a/scss/_tables.scss b/scss/_tables.scss index 658d18d7f3..bca87dbae5 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -28,8 +28,8 @@ // Another advantage is that this generates less code and makes the selector less specific making it easier to override. // stylelint-disable-next-line selector-max-universal > :not(caption) > * > * { - padding: $table-cell-padding-y $table-cell-padding-x $table-cell-padding-x; - line-height: $table-cell-line-height; // Boosted mod + padding: $table-cell-padding-y $table-cell-padding-x add($table-cell-padding-y, 1px); // Boosted mod + line-height: $table-line-height; // Boosted mod background-color: var(--bs-table-bg); background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg)); } @@ -70,7 +70,7 @@ .table-sm { // stylelint-disable-next-line selector-max-universal > :not(caption) > * > * { - line-height: $table-cell-line-height-sm; // Boosted mod + padding: $table-cell-padding-y-sm $table-cell-padding-x-sm add($table-cell-padding-y-sm, 1px); // Boosted mod } } diff --git a/scss/_type.scss b/scss/_type.scss index 325c224d7d..233b882c29 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -40,17 +40,16 @@ letter-spacing: $h2-spacing; } -.display-2 { +h1, +.display-2, +.display-3 { @include font-size($h3-font-size); line-height: $h3-line-height; - letter-spacing: $h3-spacing; + letter-spacing: $mid-spacing; } -h1, -.display-3 { - @include font-size($h4-font-size); - line-height: $h4-line-height; - letter-spacing: $h4-spacing; +.display-2 { + letter-spacing: $h3-spacing; } h2, @@ -68,6 +67,7 @@ h2, } @include media-breakpoint-up(sm) { + h1, .display-1, .display-2, .display-3 { @@ -84,17 +84,12 @@ h2, letter-spacing: $display3-spacing; } + h1, .display-3 { @include font-size($display4-size); letter-spacing: $display4-spacing; } - h1 { - @include font-size($h2-font-size); - line-height: $h2-line-height; - letter-spacing: $h2-spacing; - } - h2, .display-4 { @include font-size($h3-font-size); @@ -102,12 +97,7 @@ h2, letter-spacing: $h3-spacing; } - h3 { - @include font-size($h4-font-size); - line-height: $h4-line-height; - letter-spacing: $h4-spacing; - } - + h3, h4, .lead { @include font-size($h5-font-size); @@ -134,15 +124,10 @@ h2, .display-4 { @include font-size($display4-size); + line-height: $display-line-height; letter-spacing: $display4-spacing; } - h1 { - @include font-size($h1-font-size); - line-height: $h1-line-height; - letter-spacing: $h1-spacing; - } - h2 { @include font-size($h2-font-size); line-height: $h2-line-height; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 49a7bab576..a01c2ca2e5 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -400,7 +400,7 @@ $utilities: map-merge( 1: 1, sm: $line-height-sm, base: $line-height-base, - lg: $table-cell-line-height, + lg: $line-height-lg, ) ), "background-color": ( diff --git a/scss/_variables.scss b/scss/_variables.scss index d81e980e3c..09f7f32c35 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -419,7 +419,7 @@ $embed-responsive-aspect-ratios: ( // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case -$font-family-sans-serif: HelvNeueOrange, Helvetica Neue, Helvetica, Arial, system-ui, -apple-system, Segoe UI, Roboto, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !default; +$font-family-sans-serif: HelvNeueOrange, Helvetica Neue, Helvetica, Arial, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !default; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace !default; // stylelint-enable value-keyword-case $font-family-base: var(--bs-font-sans-serif) !default; @@ -443,7 +443,7 @@ $font-weight-bold: 700 !default; $font-weight-base: $font-weight-normal !default; // stylelint-disable function-blacklist -$line-height-base: 1.25 !default; +$line-height-base: calc(18 / 16) !default; $line-height-sm: calc(16 / 14) !default; $line-height-lg: calc(30 / 16) !default; // stylelint-enable function-blacklist @@ -457,7 +457,8 @@ $h5-font-size: $font-size-lg !default; // 18px $h6-font-size: $font-size-base !default; // 16px $h1-spacing: $letter-spacing-base * 10 !default; // -1px $h2-spacing: $letter-spacing-base * 8 !default; // -0.8px -$h3-spacing: $letter-spacing-base * 6 !default; // -0.6px +$mid-spacing: $letter-spacing-base * 6 !default; // -0.6px +$h3-spacing: $letter-spacing-base * 5 !default; // -0.5px $h4-spacing: $letter-spacing-base * 4 !default; // -0.4px $h5-spacing: $letter-spacing-base * 2 !default; // -0.2px $h6-spacing: $letter-spacing-base !default; @@ -467,7 +468,7 @@ $h2-line-height: calc(32 / 30) !default; $h3-line-height: calc(26 / 24) !default; $h4-line-height: calc(22 / 20) !default; $h5-line-height: calc(20 / 18) !default; -$h6-line-height: calc(18 / 16) !default; +$h6-line-height: $line-height-base !default; // stylelint-enable function-blacklist $headings-margin-bottom: $spacer !default; @@ -482,9 +483,9 @@ $display1-size: $font-size-xlg * 3 !default; // 60px $display2-size: $font-size-xlg * 2.5 !default; // 50px $display3-size: $font-size-xlg * 2 !default; // 40px $display4-size: $h1-font-size !default; // 34px -$display1-spacing: $letter-spacing-base * 24 !default; // -2.4px +$display1-spacing: $letter-spacing-base * 20 !default; // -2px $display2-spacing: $letter-spacing-base * 16 !default; // -1.6px -$display3-spacing: $letter-spacing-base * 12 !default; // -1.2px +$display3-spacing: $h1-spacing !default; // -1px $display4-spacing: $h1-spacing !default; // -1px $display-line-height: $h1-line-height !default; // scss-docs-end display-headings @@ -492,9 +493,9 @@ $display-line-height: $h1-line-height !default; $lead-font-size: $font-size-xlg !default; $lead-font-weight: 400 !default; $lead-line-height: 1.5 !default; -$lead-letter-spacing: $letter-spacing-base * .25 !default; +$lead-letter-spacing: $letter-spacing-base * 2.5 !default; -$small-font-size: .875em !default; +$small-font-size: .875rem !default; $sub-sup-font-size: .75em !default; @@ -533,12 +534,13 @@ $mark-bg: $primary !default; // stylelint-disable function-blacklist // scss-docs-start table-variables -$table-cell-padding-y: add(.5rem, 1px) !default; +$table-cell-padding-y: .875rem !default; $table-cell-padding-x: $spacer / 2 !default; -$table-cell-line-height: $line-height-lg !default; // Boosted mod -$table-cell-line-height-sm: calc(20 / 16) !default; // Boosted mod +$table-cell-padding-y-sm: .5625rem !default; +$table-cell-padding-x-sm: $table-cell-padding-x !default; $table-cell-vertical-align: top !default; +$table-line-height: 1.25 !default; // Boosted mod $table-color: $body-color !default; $table-bg: $body-bg !default; @@ -576,7 +578,7 @@ $input-btn-padding-y: .5rem !default; $input-btn-padding-x: 1.125rem !default; $input-btn-font-family: inherit !default; $input-btn-font-size: $font-size-base !default; -$input-btn-line-height: $line-height-base !default; +$input-btn-line-height: 1.25 !default; $input-btn-focus-width: .125rem !default; $input-btn-focus-box-shadow: null !default; @@ -698,7 +700,7 @@ $input-transition: border-color $transition-duration $trans $form-check-input-width: 1.25em !default; -$form-check-min-height: $font-size-base * $line-height-base !default; +$form-check-min-height: $font-size-base * $input-btn-line-height !default; $form-check-padding-left: $form-check-input-width + .5em !default; $form-check-margin-bottom: .125rem !default; $form-check-label-color: null !default; @@ -1328,6 +1330,7 @@ $kbd-color: $black !default; $kbd-bg: $gray-300 !default; $pre-color: $gray-900 !default; +$pre-line-height: 1.25 !default; // // Boosted mod diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 099272caa6..39689ba62c 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -17,7 +17,7 @@ .form-check-input { width: $form-check-input-width; height: $form-check-input-width; - margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height + margin-top: ($input-btn-line-height - $form-check-input-width) / 2; // line-height minus check height vertical-align: top; background-color: $form-check-input-bg; background-repeat: no-repeat; diff --git a/site/content/docs/5.0/content/reboot.md b/site/content/docs/5.0/content/reboot.md index 5c9867b9fd..6f86c5025a 100644 --- a/site/content/docs/5.0/content/reboot.md +++ b/site/content/docs/5.0/content/reboot.md @@ -38,15 +38,7 @@ $font-family-sans-serif: // Helvetica Neue Helvetica Neue, // Websafe Fallbacks - Helvetica, Arial - // Safari for macOS and iOS (San Francisco) - -apple-system, - // Chrome < 56 for macOS (San Francisco) - BlinkMacSystemFont, - // Windows - Segoe UI, - // Android - Roboto, + Helvetica, Arial, // Ubuntu Liberation Sans, // Sans serif fallback diff --git a/site/content/docs/5.0/content/typography.md b/site/content/docs/5.0/content/typography.md index dd09c7136b..33a3bfd8fa 100644 --- a/site/content/docs/5.0/content/typography.md +++ b/site/content/docs/5.0/content/typography.md @@ -47,8 +47,8 @@ All HTML headings, `

` through `

`, are available. {{< markdown >}}`

`{{< /markdown >}} Bold 2.125rem (34px) - Bold 1.875rem (30px) - Bold 1.25rem (20px) + Bold 1.875rem (34px) + Bold 1.25rem (24px) 1 (34px) -0.0625rem (-1px) @@ -67,10 +67,10 @@ All HTML headings, `

` through `

`, are available. {{< markdown >}}`

`{{< /markdown >}} Bold 1.5rem (24px) - Bold 1.25rem (20px) + Bold 1.25rem (18px) Bold 1rem (16px) 1.083 (26px) - -0.0375rem (-0.6px) + -0.0375rem (-0.5px) @@ -162,7 +162,7 @@ Traditional heading elements are designed to work best in the meat of your page Bold 3.125rem (50px) Bold 1.875rem (30px) 1 (60px) - -0.15rem (-2.4px) + -0.15rem (-2px) Display 2 @@ -176,9 +176,9 @@ Traditional heading elements are designed to work best in the meat of your page Display 3 Bold 2.5rem (40px) Bold 2.125rem (34px) - Bold 1.25rem (20px) + Bold 1.25rem (24px) 1 (40px) - -0.075rem (-1.2px) + -0.075rem (-1px) Display 4