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

Add new typography scale feature flag #4701

Merged
merged 2 commits into from
Feb 5, 2024
Merged

Add new typography scale feature flag #4701

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8022f35
Add new typography scale feature flag
owenatgov Jan 30, 2024
490628a
Set new scale feature flag to true in the review app
owenatgov Jan 30, 2024
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
1 change: 1 addition & 0 deletions packages/govuk-frontend-review/src/stylesheets/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
$govuk-show-breakpoints: true;
$govuk-new-typography-scale: true;
owenatgov marked this conversation as resolved.
Show resolved Hide resolved

@import "govuk/all";
@import "partials/app";
Expand Down
2 changes: 1 addition & 1 deletion packages/govuk-frontend/src/govuk/components/footer/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
$govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2);

.govuk-footer {
@include govuk-font($size: 19);
@include govuk-font($size: if($govuk-new-typography-scale, 19, 16));
@include govuk-responsive-padding(7, "top");
@include govuk-responsive-padding(5, "bottom");

Expand Down
2 changes: 1 addition & 1 deletion packages/govuk-frontend/src/govuk/components/panel/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
text-align: center;

@include govuk-media-query($until: tablet) {
padding: govuk-spacing(4) - $govuk-border-width;
padding: govuk-spacing(if($govuk-new-typography-scale, 4, 3)) - $govuk-border-width;

// This is an if-all-else-fails attempt to stop long words from overflowing the container
// on very narrow viewports by forcing them to break and wrap instead. This
Expand Down
8 changes: 5 additions & 3 deletions packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,12 @@

.govuk-phase-banner__content__tag {
@include govuk-font-size($size: 16);
margin-right: govuk-spacing(3);
margin-right: govuk-spacing(if($govuk-new-typography-scale, 3, 2));

@include govuk-media-query($from: tablet) {
margin-right: govuk-spacing(2);
@if $govuk-new-typography-scale {
@include govuk-media-query($from: tablet) {
margin-right: govuk-spacing(2);
}
}

// When forced colour mode is active, for example to provide high contrast,
Expand Down
14 changes: 8 additions & 6 deletions packages/govuk-frontend/src/govuk/components/table/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,15 @@
border-collapse: collapse;
}

// Modifier for tables with a lot of data. Tables with lots of data benefit
// from a smaller font size on small screens.
.govuk-table--small-text-until-tablet {
@include govuk-font-size($size: 16);
@if $govuk-new-typography-scale {
Copy link
Contributor

@colinrotherham colinrotherham Feb 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

The guidance PR introduces the --small-text-until-tablet modifier

But we haven't explained that it's opt-in only via the $govuk-new-typography-scale flag, should we?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm aware that we don't clarify this and we should. I've got a plan to hold off on looking into this because we're planning on looking at how to do this more broadly via the typography section restructure work. Whatever we decide there I'll just copy for that guidance PR.

// Modifier for tables with a lot of data. Tables with lots of data benefit
// from a smaller font size on small screens.
.govuk-table--small-text-until-tablet {
@include govuk-font-size($size: 16);

@include govuk-media-query($from: tablet) {
@include govuk-font-size($size: 19);
@include govuk-media-query($from: tablet) {
@include govuk-font-size($size: 19);
}
}
}

Expand Down
180 changes: 168 additions & 12 deletions packages/govuk-frontend/src/govuk/settings/_typography-responsive.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,146 @@

$govuk-root-font-size: 16px !default;

/// Responsive typography font map
/// Feature flag for new typography scale
///
/// This is used to generate responsive typography that adapts according to the
/// breakpoints.
/// When set to true, $govuk-typography-scale will use the new font map instead
/// of the current/old one as well as apply changes in components to account
/// for the updated scale.
///
/// Font size and font weight can be defined for each breakpoint. You can define
/// different behaviour on tablet and desktop. The 'null' breakpoint is for
/// mobile.
/// Should be removed in 6.0.
///
/// Line-heights will automatically be converted from pixel measurements into
/// relative values. For example, with a font-size of 16px and a line-height of
/// 24px, the line-height will be converted to 1.5 before output.
/// @type Boolean
/// @access public

$govuk-new-typography-scale: false !default;

/// The font map for the old typography scale
///
/// You can also specify a separate font size and line height for print media.
/// @type Map
///
/// @prop {Number} $point.$breakpoint.font-size - Font size for `$point` at `$breakpoint`
/// @prop {Number} $point.$breakpoint.line-height - Line height for `$point` at `$breakpoint`
/// @prop {Number} $point.print.font-size - Font size for `$point` when printing
/// @prop {Number} $point.print.line-height - Line height for `$point` when printing
///
/// @access private

$_govuk-typography-scale-legacy: (
80: (
null: (
font-size: 53px,
line-height: 55px
),
tablet: (
font-size: 80px,
line-height: 80px
),
print: (
font-size: 53pt,
line-height: 1.1
)
),
48: (
null: (
font-size: 32px,
line-height: 35px
),
tablet: (
font-size: 48px,
line-height: 50px
),
print: (
font-size: 32pt,
line-height: 1.15
)
),
36: (
null: (
font-size: 24px,
line-height: 25px
),
tablet: (
font-size: 36px,
line-height: 40px
),
print: (
font-size: 24pt,
line-height: 1.05
)
),
27: (
null: (
font-size: 18px,
line-height: 20px
),
tablet: (
font-size: 27px,
line-height: 30px
),
print: (
font-size: 18pt,
line-height: 1.15
)
),
24: (
null: (
font-size: 18px,
line-height: 20px
),
tablet: (
font-size: 24px,
line-height: 30px
),
print: (
font-size: 18pt,
line-height: 1.15
)
),
19: (
null: (
font-size: 16px,
line-height: 20px
),
tablet: (
font-size: 19px,
line-height: 25px
),
print: (
font-size: 14pt,
line-height: 1.15
)
),
16: (
null: (
font-size: 14px,
line-height: 16px
),
tablet: (
font-size: 16px,
line-height: 20px
),
print: (
font-size: 14pt,
line-height: 1.2
)
),
14: (
null: (
font-size: 12px,
line-height: 15px
),
tablet: (
font-size: 14px,
line-height: 20px
),
print: (
font-size: 12pt,
line-height: 1.2
)
)
);

/// The font map for the new typography scale
///
/// @type Map
///
Expand All @@ -38,9 +164,9 @@ $govuk-root-font-size: 16px !default;
/// @prop {Number} $point.print.font-size - Font size for `$point` when printing
/// @prop {Number} $point.print.line-height - Line height for `$point` when printing
///
/// @access public
/// @access private

$govuk-typography-scale: (
$_govuk-typography-scale-modern: (
80: (
null: (
font-size: 53px,
Expand Down Expand Up @@ -151,4 +277,34 @@ $govuk-typography-scale: (
line-height: 1.2
)
)
);

/// Responsive typography font map
///
/// This is used to generate responsive typography that adapts according to the
/// breakpoints.
///
/// Font size and font weight can be defined for each breakpoint. You can define
/// different behaviour on tablet and desktop. The 'null' breakpoint is for
/// mobile.
///
/// Line-heights will automatically be converted from pixel measurements into
/// relative values. For example, with a font-size of 16px and a line-height of
/// 24px, the line-height will be converted to 1.5 before output.
///
/// You can also specify a separate font size and line height for print media.
///
/// @type Map
///
/// @prop {Number} $point.$breakpoint.font-size - Font size for `$point` at `$breakpoint`
/// @prop {Number} $point.$breakpoint.line-height - Line height for `$point` at `$breakpoint`
/// @prop {Number} $point.print.font-size - Font size for `$point` when printing
/// @prop {Number} $point.print.line-height - Line height for `$point` when printing
///
/// @access public

$govuk-typography-scale: if(
$govuk-new-typography-scale,
$_govuk-typography-scale-modern,
$_govuk-typography-scale-legacy
) !default;