Skip to content

Commit

Permalink
Remove $govuk-typography-use-rem setting
Browse files Browse the repository at this point in the history
  • Loading branch information
@owenatgov
owenatgov committed May 4, 2023
1 parent 6d9eb1a commit 794ccf8
Show file tree
Hide file tree
Showing 6 changed files with 9 additions and 224 deletions.
17 changes: 3 additions & 14 deletions packages/govuk-frontend/src/govuk/components/input/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,8 @@

box-sizing: border-box;
width: 100%;
height: 40px;
@if $govuk-typography-use-rem {
height: govuk-px-to-rem(40px);
}
height: govuk-px-to-rem(40px);
margin-top: 0;

padding: govuk-spacing(1);
// setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
// as background-color and color need to always be set together, color should not be set either
Expand Down Expand Up @@ -131,15 +127,8 @@

box-sizing: border-box;
display: inline-block;
min-width: 40px;
@if $govuk-typography-use-rem {
min-width: govuk-px-to-rem(40px);
}
height: 40px;
@if $govuk-typography-use-rem {
height: govuk-px-to-rem(40px);
}

min-width: govuk-px-to-rem(40px);
height: govuk-px-to-rem(40px);
padding: govuk-spacing(1);
border: $govuk-border-width-form-element solid $govuk-input-border-colour;
background-color: govuk-colour("light-grey", $legacy: "grey-3");
Expand Down
5 changes: 1 addition & 4 deletions packages/govuk-frontend/src/govuk/components/select/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,7 @@
// - it fits comfortably on screens as narrow as 240px wide
min-width: 11.5em;
max-width: 100%;
height: 40px;
@if $govuk-typography-use-rem {
height: govuk-px-to-rem(40px);
}
height: govuk-px-to-rem(40px);
padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements
border: $govuk-border-width-form-element solid $govuk-input-border-colour;

Expand Down
10 changes: 2 additions & 8 deletions packages/govuk-frontend/src/govuk/helpers/_typography.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,10 +147,7 @@
$line-height: $line-height if($important, !important, null);

@if not $breakpoint {
font-size: $font-size;
@if $govuk-typography-use-rem {
font-size: $font-size-rem;
}
font-size: $font-size-rem;
line-height: $line-height;
} @else if $breakpoint == "print" {
@include govuk-media-query($media-type: print) {
Expand All @@ -159,10 +156,7 @@
}
} @else {
@include govuk-media-query($from: $breakpoint) {
font-size: $font-size;
@if $govuk-typography-use-rem {
font-size: $font-size-rem;
}
font-size: $font-size-rem;
line-height: $line-height;
}
}
Expand Down
161 changes: 3 additions & 158 deletions packages/govuk-frontend/src/govuk/helpers/typography.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const sassConfig = {
}
}

let sassBootstrap = `
const sassBootstrap = `
$govuk-breakpoints: (
desktop: 30em
);
Expand Down Expand Up @@ -259,13 +259,11 @@ describe('@mixin govuk-typography-responsive', () => {
.toMatchObject({
css: outdent`
.foo {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.25;
}
@media (min-width: 30em) {
.foo {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.4285714286;
}
Expand All @@ -288,7 +286,6 @@ describe('@mixin govuk-typography-responsive', () => {
.toMatchObject({
css: outdent`
.foo {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.25;
}
Expand Down Expand Up @@ -333,13 +330,11 @@ describe('@mixin govuk-typography-responsive', () => {
.toMatchObject({
css: outdent`
.foo {
font-size: 12px !important;
font-size: 0.75rem !important;
line-height: 1.25 !important;
}
@media (min-width: 30em) {
.foo {
font-size: 14px !important;
font-size: 0.875rem !important;
line-height: 1.4285714286 !important;
}
Expand All @@ -362,7 +357,6 @@ describe('@mixin govuk-typography-responsive', () => {
.toMatchObject({
css: outdent`
.foo {
font-size: 12px !important;
font-size: 0.75rem !important;
line-height: 1.25 !important;
}
Expand Down Expand Up @@ -392,13 +386,11 @@ describe('@mixin govuk-typography-responsive', () => {
.toMatchObject({
css: outdent`
.foo {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.75;
}
@media (min-width: 30em) {
.foo {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.5;
}
Expand All @@ -408,151 +400,6 @@ describe('@mixin govuk-typography-responsive', () => {
})
})

describe('when $govuk-typography-use-rem is disabled', () => {
beforeEach(() => {
sassBootstrap = `
@import "settings/warnings";
${sassBootstrap}
`
})

it('outputs CSS with suitable media queries', async () => {
const sass = `
$govuk-typography-use-rem: false;
${sassBootstrap}
.foo {
@include govuk-typography-responsive($size: 14)
}
`

await expect(compileSassString(sass))
.resolves
.toMatchObject({
css: outdent`
.foo {
font-size: 12px;
line-height: 1.25;
}
@media (min-width: 30em) {
.foo {
font-size: 14px;
line-height: 1.4285714286;
}
}
`
})
})

it('adjusts rem values based on root font size', async () => {
const sass = `
$govuk-typography-use-rem: false;
$govuk-root-font-size: 10px;
${sassBootstrap}
.foo {
@include govuk-typography-responsive($size: 14)
}
`

await expect(compileSassString(sass))
.resolves
.toMatchObject({
css: outdent`
.foo {
font-size: 12px;
line-height: 1.25;
}
@media (min-width: 30em) {
.foo {
font-size: 14px;
line-height: 1.4285714286;
}
}
`
})
})

describe('and $important is set to true', () => {
it('marks font size and line height as important', async () => {
const sass = `
$govuk-typography-use-rem: false;
${sassBootstrap}
.foo {
@include govuk-typography-responsive($size: 14, $important: true);
}
`

await expect(compileSassString(sass))
.resolves
.toMatchObject({
css: outdent`
.foo {
font-size: 12px !important;
line-height: 1.25 !important;
}
@media (min-width: 30em) {
.foo {
font-size: 14px !important;
line-height: 1.4285714286 !important;
}
}
`
})
})
})

it('outputs a deprecation warning when set to false', async () => {
const sass = `
$govuk-typography-use-rem: false;
${sassBootstrap}
`

await compileSassString(sass, sassConfig)

// Get the argument of the last @warn call, which we expect to be the
// deprecation notice
return expect(mockWarnFunction.mock.calls.at(-1))
.toEqual(expect.arrayContaining([
'$govuk-typography-use-rem is deprecated. From version 5.0, ' +
'GOV.UK Frontend will not support disabling rem font sizes. To ' +
'silence this warning, update $govuk-suppressed-warnings with ' +
'key: "allow-not-using-rem"'
]))
})
})

describe('when compatibility mode is set', () => {
it('$govuk-typography-use-rem is disabled by default', async () => {
const sass = `
$govuk-compatibility-govuktemplate: true;
${sassBootstrap}
.foo {
@include govuk-typography-responsive($size: 14)
}
`

await expect(compileSassString(sass))
.resolves
.toMatchObject({
css: outdent`
.foo {
font-size: 12px;
line-height: 1.25;
}
@media (min-width: 30em) {
.foo {
font-size: 14px;
line-height: 1.4285714286;
}
}
`
})
})
})

describe('@mixin govuk-font', () => {
it('outputs all required typographic CSS properties', async () => {
const sass = `
Expand All @@ -574,7 +421,6 @@ describe('@mixin govuk-typography-responsive', () => {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.25;
}
Expand All @@ -585,7 +431,6 @@ describe('@mixin govuk-typography-responsive', () => {
}
@media (min-width: 30em) {
.foo {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.4285714286;
}
Expand Down Expand Up @@ -654,11 +499,11 @@ describe('@mixin govuk-typography-responsive', () => {
const results = compileSassString(sass)

await expect(results).resolves.toMatchObject({
css: expect.stringContaining('font-size: 12px')
css: expect.stringContaining('font-size: 0.75rem')
})

await expect(results).resolves.toMatchObject({
css: expect.not.stringContaining('font-size: 14px')
css: expect.not.stringContaining('font-size: 0.875rem')
})
})

Expand Down
3 changes: 0 additions & 3 deletions packages/govuk-frontend/src/govuk/settings/_compatibility.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,6 @@
/// - switch GOV.UK Frontend to using the same colour palette as the legacy
/// repos, by setting `$govuk-use-legacy-palette` to true.
///
/// - prevent GOV.UK Frontend from using rem for font sizing, by setting
/// `$govuk-typography-use-rem` to false.
///
/// @group settings/compatibility
////

Expand Down
37 changes: 0 additions & 37 deletions packages/govuk-frontend/src/govuk/settings/_typography-responsive.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,6 @@
/// @group settings/typography
////

/// Whether or not to define font sizes in rem, improving accessibility by
/// allowing users to adjust the base font-size. This is enabled by default,
/// unless any of the compatibility mode settings are enabled.
///
/// You should make sure that $govuk-root-font-size is set correctly for your
/// project.
///
/// @type Boolean
/// @access public
/// @deprecated Will be removed in v5.0 with the rest of the compatibility mode
/// suite of tools and settings

$govuk-typography-use-rem: if(
(
$govuk-compatibility-govukfrontendtoolkit or
$govuk-compatibility-govuktemplate or
$govuk-compatibility-govukelements
),
false,
true
) !default;

// Only show the deprecation warning if user is setting $govuk-typography-use-rem
// manually instead of automatically via compatibility variables
@if $govuk-typography-use-rem == false and
$govuk-compatibility-govukfrontendtoolkit == false and
$govuk-compatibility-govuktemplate == false and
$govuk-compatibility-govukelements == false {
@include _warning(allow-not-using-rem, "$govuk-typography-use-rem is deprecated. " +
"From version 5.0, GOV.UK Frontend will not support disabling rem font sizes.");
}

/// Root font size
///
/// This is used to calculate rem sizes for the typography, and should match the
Expand All @@ -45,11 +13,6 @@ $govuk-typography-use-rem: if(
/// in order to allow it to scale with user-preference, in which case this
/// should be set to 16px.
///
/// If you are integrating Frontend into an existing project that also uses
/// alphagov/govuk_template and you wish to enable `$govuk-typography-use-rem`
/// then you should set this to 10px to match the 62.5% (10px) base font size
/// that govuk_template sets on the <html> element.
///
/// @type Number
/// @access public

Expand Down

0 comments on commit 794ccf8

Please sign in to comment.