Skip to content

Commit

Permalink
Add new typography scale feature flag
Browse files Browse the repository at this point in the history
  • Loading branch information
@owenatgov
owenatgov committed Feb 13, 2024
1 parent 73eb43a commit 5fcf176
Show file tree
Hide file tree
Showing 5 changed files with 187 additions and 22 deletions.
2 changes: 1 addition & 1 deletion packages/govuk-frontend/src/govuk/components/footer/_index.scss
View file
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
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
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
12 changes: 7 additions & 5 deletions packages/govuk-frontend/src/govuk/components/table/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@
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-media-query($until: tablet) {
@include govuk-font-size($size: 16);
@if $govuk-new-typography-scale {
// 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-media-query($until: tablet) {
@include govuk-font-size($size: 16);
}
}
}

Expand Down
185 changes: 173 additions & 12 deletions packages/govuk-frontend/src/govuk/settings/_typography-responsive.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,151 @@

$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
),
deprecation: (
key: "govuk-typography-scale-14",
message: "14 on the type scale is deprecated and will be removed as " +
"a possible option in the next major version."
)
)
);

/// The font map for the new typography scale
///
/// @type Map
///
Expand All @@ -38,9 +169,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 @@ -156,4 +287,34 @@ $govuk-typography-scale: (
"a possible option in the next major version."
)
)
);

/// 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;

0 comments on commit 5fcf176

Please sign in to comment.