Skip to content
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

css-library: Fixing the html element's font-size so it will respect browser settings #1444

Merged
merged 2 commits into from
Jan 8, 2025
Merged

css-library: Fixing the html element's font-size so it will respect browser settings #1444

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
13a6381
Fixing the html element's font-size so it will respect browser settings.
Andrew565 Dec 23, 2024
eb756ae
Merge branch 'main' into 3646-fix-browser-font-sizing
Andrew565 Jan 7, 2025
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
2 changes: 1 addition & 1 deletion packages/css-library/dist/stylesheets/base/va.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/css-library/dist/stylesheets/base/va.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions packages/css-library/dist/stylesheets/core.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/css-library/dist/stylesheets/core.css.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/css-library/dist/stylesheets/formation-overrides/elements/typography.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/css-library/dist/stylesheets/formation-overrides/elements/typography.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions packages/css-library/src/stylesheets/base/va.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ body {
}

html {
font-size: $em-base;
font-size: 100%; // Needs to be 100% to be able to grow and shrink with browser settings
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was changed to 16px because of root font size updates related to USWDS v3 (it previously being 10px). Was this tested using Verdaccio to make sure everything still looks correct by default?

Screenshot 2024-12-26 at 8 59 08 AM

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree here with Jami. If this hasn't been tested with Verdaccio, then it needs to be. The entire typography change initiative we completed last summer was centered around this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Andrew565 I was thinking about this more and think the 100% font-size will still work because the default font-size for most browsers should already be 16px without us needing to do anything special. That 100% value would then be based on that default. A base value of 1rem might have the same effect too. A sanity check with Verdaccio or a release candidate would ease our minds though.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working on testing this with Verdaccio.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good with Verdaccio. Seen here is the "Very Large" font setting. The normal/medium font setting looks the same as it always does.
Screenshot 2025-01-02 at 1 02 38 PM

font-weight: 500;
}

Expand Down Expand Up @@ -422,7 +422,7 @@ article > h1 {
padding-left: scale-rem(1rem);
}

// used mostly in content-build, we should consider moving this over there
// used mostly in content-build, we should consider moving this over there
.last-updated {
margin-top: 1.5em;
border-top: 2px solid $color-gray-light;
Expand All @@ -433,8 +433,8 @@ article > h1 {
}

// Feature style used on hub pages (example on /pension/how-to-apply), copied here from formation
// ToDo - These should be replaced with web-components:
// https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2338#top
// ToDo - These should be replaced with web-components:
// https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2338#top
// https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2341#top

.feature {
Expand Down
2 changes: 1 addition & 1 deletion packages/css-library/src/stylesheets/formation-overrides/elements/typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

html {
font-family: tok.$font-family-sans;
font-size: vars.$em-base;
font-size: 100%; // Needs to be 100% to be able to grow and shrink with browser settings
}

body {
Expand Down
Loading