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.

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

feat(Typography): change iOS Safari basis font-size from 17px to 15px for DNB #4408

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
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
11 changes: 7 additions & 4 deletions packages/dnb-eufemia/src/style/core/scopes.scss
Original file line number Diff line number Diff line change
Expand Up @@ -69,14 +69,17 @@

@mixin htmlDefault() {
html {
font-size: 100%;

&:not([data-visual-test]) {
scroll-behavior: smooth;
}
font-size: 100%;

// IS_SAFARI_MOBILE
@supports (-webkit-touch-callout: none) {
@supports (font: -apple-system-body) {
// In order to let Safari know the font-size set on the system level
@supports (font: -apple-system-body) {
// Safari on iOS
@supports (-webkit-touch-callout: none) {
// Sets the base font-size to 17px
font: -apple-system-body; /* stylelint-disable-line */
}
}
Expand Down
12 changes: 12 additions & 0 deletions packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-basis.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,15 @@
@import './fonts.scss';
@import './ui-theme-elements.scss';
@import './globals.scss';

html {
// In order to let Safari know the font-size set on the system level
// Because the default font-size is 18px, we lower the basis font-size to 15px instead of 17px
@supports (font: -apple-system-subheadline) {
// Safari on iOS
@supports (-webkit-touch-callout: none) {
// Sets the base font-size to 15px
font: -apple-system-subheadline; /* stylelint-disable-line */
}
}
}
Loading