Skip to content

Commit c8846b0

Browse files
mdomdo
authored
v6: Restore 16px base font-size (#42119)
* Restore 16px base font-size * More * Update docs CSS to account for font-size change * Redo several components and tokens for font-size change - Checks, radios, switches get new sizing to better match 16px base font-size. These are now way more consistent with one another. - Updates other components to use new sizing as appropriate. - Pagination now sized to match inputs/buttons. - Clean up some other font tokens * Fix * fix code example
1 parent 7ac6644 commit c8846b0

25 files changed

Lines changed: 159 additions & 128 deletions

‎scss/_card.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,12 @@ $card-tokens: defaults(
9595
}
9696
}
9797

98+
.card-title,
99+
.card-subtitle,
100+
.card-text {
101+
align-self: stretch;
102+
}
103+
98104
.card-subtitle {
99105
margin-top: calc(var(--card-body-gap) * -.5);
100106
}

‎scss/_chip.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@ $chip-tokens: defaults(
4444
align-items: center;
4545
height: var(--chip-height);
4646
padding-inline: var(--chip-padding-x);
47-
// font-size: var(--chip-font-size);
48-
// font-weight: var(--chip-font-weight);
49-
// line-height: 1.25;
47+
font-size: var(--chip-font-size, var(--font-size-sm));
48+
font-weight: var(--chip-font-weight, var(--font-weight-base));
49+
line-height: var(--chip-line-height, 1.25rem);
5050
color: var(--chip-color);
5151
text-decoration: none;
5252
white-space: nowrap;

‎scss/_dropdown.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ $dropdown-tokens: defaults(
2121
--dropdown-padding-x: .25rem,
2222
--dropdown-padding-y: .25rem,
2323
--dropdown-spacer: .125rem,
24-
--dropdown-font-size: #{$font-size-base},
24+
--dropdown-font-size: var(--font-size-sm),
2525
--dropdown-color: var(--fg-body),
2626
--dropdown-bg: var(--bg-body),
2727
--dropdown-border-color: var(--border-color-translucent),
@@ -134,7 +134,7 @@ $dropdown-tokens: defaults(
134134
display: block;
135135
padding: var(--dropdown-header-padding-y) var(--dropdown-header-padding-x);
136136
margin-bottom: 0; // for use with heading elements
137-
font-size: $font-size-sm;
137+
font-size: var(--font-size-sm);
138138
color: var(--dropdown-header-color);
139139
white-space: nowrap; // as with > li > a
140140
}

‎scss/_pagination.scss‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@ $pagination-tokens: () !default;
1818
// stylelint-disable-next-line scss/dollar-variable-default
1919
$pagination-tokens: defaults(
2020
(
21-
--pagination-padding-x: .75rem,
22-
--pagination-padding-y: .375rem,
23-
--pagination-font-size: var(--font-size-base),
21+
--pagination-padding-x: var(--btn-input-padding-x),
22+
--pagination-padding-y: var(--btn-input-padding-y),
23+
--pagination-font-size: var(--btn-input-font-size),
2424
--pagination-color: var(--link-color),
2525
--pagination-bg: var(--bg-body),
2626
--pagination-border-width: var(--border-width),
2727
--pagination-border-color: var(--border-color),
28-
--pagination-border-radius: var(--border-radius),
28+
--pagination-border-radius: var(--btn-input-border-radius),
2929
--pagination-hover-color: var(--link-hover-color),
3030
--pagination-hover-bg: var(--bg-1),
3131
--pagination-hover-border-color: var(--border-color),
@@ -41,16 +41,16 @@ $pagination-tokens: defaults(
4141
$pagination-tokens
4242
);
4343
// scss-docs-end pagination-tokens
44-
// stylelint-enable custom-property-no-missing-var-function
4544

46-
// scss-docs-start pagination-mixin
47-
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
48-
--pagination-padding-x: #{$padding-x};
49-
--pagination-padding-y: #{$padding-y};
50-
--pagination-font-size: #{$font-size};
51-
--pagination-border-radius: #{$border-radius};
52-
}
53-
// scss-docs-end pagination-mixin
45+
// scss-docs-start pagination-sizes
46+
$pagination-sizes: () !default;
47+
// stylelint-disable-next-line scss/dollar-variable-default
48+
$pagination-sizes: defaults(
49+
("sm", "lg"),
50+
$pagination-sizes
51+
);
52+
// scss-docs-end pagination-sizes
53+
// stylelint-enable custom-property-no-missing-var-function
5454

5555
@layer components {
5656
.pagination {
@@ -125,11 +125,14 @@ $pagination-tokens: defaults(
125125
// Sizing
126126
//
127127

128-
.pagination-lg {
129-
@include pagination-size(.75rem, 1.5rem, $font-size-lg, var(--border-radius-lg));
130-
}
131-
132-
.pagination-sm {
133-
@include pagination-size(.25rem, .5rem, $font-size-sm, var(--border-radius-sm));
128+
// scss-docs-start pagination-sizes-loop
129+
@each $size, $_ in $pagination-sizes {
130+
.pagination-#{$size} {
131+
--pagination-padding-y: var(--btn-input-#{$size}-padding-y);
132+
--pagination-padding-x: var(--btn-input-#{$size}-padding-x);
133+
--pagination-font-size: var(--btn-input-#{$size}-font-size);
134+
--pagination-border-radius: var(--btn-input-#{$size}-border-radius);
135+
}
134136
}
137+
// scss-docs-end pagination-sizes-loop
135138
}

‎scss/_popover.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ $popover-tokens: defaults(
2424
--popover-box-shadow: var(--box-shadow),
2525
--popover-header-padding-x: #{$spacer},
2626
--popover-header-padding-y: #{$spacer * .75},
27-
--popover-header-font-size: #{$font-size-base},
27+
--popover-header-font-size: var(--font-size-sm),
2828
--popover-header-color: #{$headings-color},
2929
--popover-header-bg: var(--bg-1),
3030
--popover-body-padding-x: #{$spacer},

‎scss/_root.scss‎

Lines changed: 19 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,11 @@ $root-tokens: defaults(
2222
(
2323
--black: #{$black},
2424
--white: #{$white},
25-
// Fonts
26-
// Note: Use `inspect` for lists so that quoted items keep the quotes.
27-
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
28-
--font-sans-serif: #{meta.inspect($font-family-sans-serif)},
29-
--font-monospace: #{meta.inspect($font-family-monospace)},
25+
3026
--gradient: #{$gradient},
31-
--body-font-family: #{meta.inspect($font-family-base)},
3227

3328
// scss-docs-start root-font-size-variables
34-
--font-size-base: #{$font-size-base},
29+
--font-size-base: 1rem,
3530
--font-size-xs: .75rem,
3631
--font-size-sm: .875rem,
3732
--font-size-md: 1rem,
@@ -55,7 +50,8 @@ $root-tokens: defaults(
5550
--line-height-6xl: 1,
5651
// scss-docs-end root-font-size-variables
5752

58-
--body-font-size: #{$font-size-base},
53+
--body-font-family: system-ui,
54+
--body-font-size: var(--font-size-base),
5955
--body-font-weight: #{$font-weight-base},
6056
--body-line-height: #{$line-height-base},
6157

@@ -67,6 +63,7 @@ $root-tokens: defaults(
6763
--link-decoration: #{$link-decoration},
6864
--link-hover-color: color-mix(in oklch, var(--link-color) 90%, #000),
6965

66+
--font-mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
7067
--code-font-size: 95%,
7168
--code-color: var(--fg-2),
7269

@@ -80,17 +77,19 @@ $root-tokens: defaults(
8077
// scss-docs-start root-border-radius-var
8178
--border-radius: .5rem,
8279
--border-radius-xs: .375rem,
83-
--border-radius-sm: .375rem,
80+
--border-radius-sm: .5rem,
8481
--border-radius-lg: .75rem,
8582
--border-radius-xl: 1rem,
8683
--border-radius-2xl: 2rem,
8784
--border-radius-pill: 50rem,
8885
// scss-docs-end root-border-radius-var
8986

90-
--box-shadow: #{$box-shadow},
91-
--box-shadow-sm: #{$box-shadow-sm},
92-
--box-shadow-lg: #{$box-shadow-lg},
93-
--box-shadow-inset: #{$box-shadow-inset},
87+
// scss-docs-start root-box-shadow-variables
88+
--box-shadow: 0 .5rem 1rem rgb(0 0 0 / 15%),
89+
--box-shadow-sm: 0 .125rem .25rem rgb(0 0 0 / 7.5%),
90+
--box-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 17.5%),
91+
--box-shadow-inset: inset 0 1px 2px rgb(0 0 0 / 7.5%),
92+
// scss-docs-end root-box-shadow-variables
9493

9594
--spacer: 1rem,
9695

@@ -111,7 +110,7 @@ $root-tokens: defaults(
111110
--control-disabled-bg: var(--bg-3),
112111
--control-disabled-opacity: .65,
113112

114-
--btn-input-min-height: 2.375rem,
113+
--btn-input-min-height: 2.5rem,
115114
--btn-input-padding-y: .375rem,
116115
--btn-input-padding-x: .75rem,
117116
--btn-input-font-size: var(--font-size-base),
@@ -120,19 +119,19 @@ $root-tokens: defaults(
120119

121120
--btn-input-xs-min-height: 1.5rem,
122121
--btn-input-xs-padding-y: .125rem,
123-
--btn-input-xs-padding-x: .375rem,
122+
--btn-input-xs-padding-x: .5rem,
124123
--btn-input-xs-font-size: var(--font-size-xs),
125124
--btn-input-xs-line-height: 1.125,
126125
--btn-input-xs-border-radius: var(--border-radius-xs),
127126

128-
--btn-input-sm-min-height: 2rem,
127+
--btn-input-sm-min-height: 2.25rem,
129128
--btn-input-sm-padding-y: .25rem,
130-
--btn-input-sm-padding-x: .5rem,
131-
--btn-input-sm-font-size: var(--font-size-xs),
132-
--btn-input-sm-line-height: var(--line-height-xs),
129+
--btn-input-sm-padding-x: .625rem,
130+
--btn-input-sm-font-size: var(--font-size-sm),
131+
--btn-input-sm-line-height: var(--line-height-sm),
133132
--btn-input-sm-border-radius: var(--border-radius-sm),
134133

135-
--btn-input-lg-min-height: 2.75rem,
134+
--btn-input-lg-min-height: 3rem,
136135
--btn-input-lg-padding-y: .5rem,
137136
--btn-input-lg-padding-x: 1rem,
138137
--btn-input-lg-font-size: var(--font-size-md),
@@ -181,14 +180,3 @@ $root-tokens: defaults(
181180

182181
color-scheme: light dark;
183182
}
184-
185-
:root,
186-
[data-bs-theme="light"] {
187-
// Root and body
188-
@if $font-size-root != null {
189-
--root-font-size: #{$font-size-root};
190-
}
191-
@if $body-text-align != null {
192-
--body-text-align: #{$body-text-align};
193-
}
194-
}

‎scss/_utilities.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -622,8 +622,8 @@ $utilities: map.merge(
622622
property: font-family,
623623
class: font,
624624
values: (
625-
"monospace": var(--font-monospace),
626-
"body": var(--font-sans-serif),
625+
"monospace": var(--font-mono),
626+
"body": var(--body-font-family),
627627
)
628628
),
629629
// scss-docs-end utils-font-family

‎scss/_variables.scss‎

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ $position-values: (
6161
//
6262
// Settings for the `<body>` element.
6363

64-
$body-text-align: null !default;
64+
// $body-text-align: null !default;
6565

6666
// Links
6767
//
@@ -110,13 +110,6 @@ $border-style: solid !default;
110110
$border-color: color-mix(in oklch, var(--gray-100), var(--gray-200)) !default;
111111
// scss-docs-end border-variables
112112

113-
// scss-docs-start box-shadow-variables
114-
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
115-
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
116-
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
117-
$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
118-
// scss-docs-end box-shadow-variables
119-
120113
$transition-base: all .2s ease-in-out !default;
121114
$transition-fade: opacity .15s linear !default;
122115

@@ -140,19 +133,10 @@ $aspect-ratios: (
140133
// Font, line-height, and color for body text, headings, and more.
141134

142135
// scss-docs-start font-variables
143-
// stylelint-disable value-keyword-case
144-
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
145-
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
146-
// stylelint-enable value-keyword-case
147-
$font-family-base: var(--font-sans-serif) !default;
148-
$font-family-code: var(--font-monospace) !default;
149-
150-
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
151-
// $font-size-base affects the font size of the body text
152-
$font-size-root: 16px !default;
153-
$font-size-base: 14px !default; // Assumes the browser default, typically `16px`
154-
$font-size-sm: $font-size-base * .875 !default;
155-
$font-size-lg: $font-size-base * 1.25 !default;
136+
// $font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
137+
// $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
138+
// $font-family-base: var(--font-sans-serif) !default;
139+
// $font-family-code: var(--font-monospace) !default;
156140

157141
$font-weight-lighter: lighter !default;
158142
$font-weight-light: 300 !default;

‎scss/content/_reboot.scss‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -65,18 +65,14 @@ $reboot-mark-tokens: defaults(
6565
// null by default, thus nothing is generated.
6666

6767
:root {
68-
@if $font-size-root != null {
69-
font-size: var(--root-font-size);
70-
// @include font-size(var(--root-font-size));
71-
}
68+
// Assume browser default font-size of 16px, or a user's preference
69+
accent-color: var(--primary-base);
7270

7371
@if $enable-smooth-scroll {
7472
@media (prefers-reduced-motion: no-preference) {
7573
scroll-behavior: smooth;
7674
}
7775
}
78-
79-
accent-color: var(--primary-base);
8076
}
8177

8278

@@ -321,7 +317,7 @@ $reboot-mark-tokens: defaults(
321317
code,
322318
kbd,
323319
samp {
324-
font-family: $font-family-code;
320+
font-family: var(--font-mono);
325321
font-size: 1em; // Correct the odd `em` font sizing in all browsers.
326322
}
327323

‎scss/forms/_check.scss‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,11 @@ $check-tokens: () !default;
1717
// stylelint-disable-next-line scss/dollar-variable-default
1818
$check-tokens: defaults(
1919
(
20-
--check-size: 1rem,
20+
--check-size: 1.25rem,
21+
--check-margin-block: .125rem,
2122
--check-bg: transparent,
2223
--check-border-color: var(--border-color),
24+
--check-border-radius: .375rem,
2325
--check-checked-bg: var(--control-checked-bg),
2426
--check-checked-border-color: var(--control-checked-border-color),
2527
--check-indeterminate-bg: var(--control-checked-bg),
@@ -50,7 +52,7 @@ $check-tokens: defaults(
5052

5153
display: grid;
5254
grid-template-columns: repeat(1, minmax(0, 1fr));
53-
margin-block: .125rem;
55+
margin-block: var(--check-margin-block);
5456

5557
:where(svg, input) {
5658
flex-shrink: 0;
@@ -105,4 +107,12 @@ $check-tokens: defaults(
105107
display: none;
106108
}
107109
}
110+
111+
.check-sm {
112+
--check-size: 1rem;
113+
}
114+
.check-lg {
115+
--check-size: 1.5rem;
116+
--check-margin-block: 0;
117+
}
108118
}

0 commit comments

Comments
 (0)