govuk-frontend
Version:
GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
2 lines (1 loc) • 12.4 kB
Source Map (JSON)
{"version":3,"sources":["../../../src/govuk/helpers/_typography.scss"],"names":[],"mappings":"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","file":"_typography.scss","sourcesContent":["////\n/// @group helpers/typography\n////\n\n@import \"../tools/px-to-rem\";\n\n/// 'Common typography' helper\n///\n/// Sets the font family and associated properties, such as font smoothing. Also\n/// overrides the font for print.\n///\n/// @param {List} $font-family [$govuk-font-family] Font family to use\n/// @access public\n\n@mixin govuk-typography-common($font-family: $govuk-font-family) {\n font-family: $font-family;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n // If the user is using the default GDS Transport font we need to include\n // the font-face declarations.\n @if $govuk-include-default-font-face {\n @include _govuk-font-face-gds-transport;\n }\n\n @include govuk-media-query($media-type: print) {\n font-family: $govuk-font-family-print;\n }\n}\n\n/// Text colour helper\n///\n/// Sets the text colour, including a suitable override for print.\n///\n/// @access public\n\n@mixin govuk-text-colour {\n color: $govuk-text-colour;\n\n @include govuk-media-query($media-type: print) {\n color: $govuk-print-text-colour;\n }\n}\n\n/// Regular font weight helper\n///\n/// @param {Boolean} $important [false] - Whether to mark declarations as\n/// `!important`. Generally Used to create override classes.\n/// @access public\n\n@mixin govuk-typography-weight-regular($important: false) {\n font-weight: $govuk-font-weight-regular if($important, !important, null);\n}\n\n/// Bold font weight helper\n///\n/// @param {Boolean} $important [false] - Whether to mark declarations as\n/// `!important`. Generally Used to create override classes.\n/// @access public\n\n@mixin govuk-typography-weight-bold($important: false) {\n font-weight: $govuk-font-weight-bold if($important, !important, null);\n}\n\n/// Tabular number helper\n///\n/// Switches numerical glyphs (0–9) to use alternative forms with a\n/// monospaced bounding box. This ensures that columns of numbers, such\n/// as those in tables, remain horizontally aligned with one another.\n/// This also has the useful side effect of making numbers more legible\n/// in some situations, such as reference codes, as the numbers are more\n/// distinct and visually separated from one another.\n///\n/// @param {Boolean} $important [false] - Whether to mark declarations as\n/// `!important`. Generally Used to create override classes.\n/// @access public\n\n@mixin govuk-font-tabular-numbers($important: false) {\n font-variant-numeric: tabular-nums if($important, !important, null);\n}\n\n/// Word break helper\n///\n/// Forcibly breaks long words that lack spaces, such as email addresses,\n/// across multiple lines when they wouldn't otherwise fit.\n///\n/// @param {Boolean} $important [false] - Whether to mark declarations as\n/// `!important`. Generally used to create override classes.\n/// @access public\n\n@mixin govuk-text-break-word($important: false) {\n // IE 11 and Edge 16–17 only support the non-standard `word-wrap` property\n word-wrap: break-word if($important, !important, null);\n\n // All other browsers support `overflow-wrap`\n overflow-wrap: break-word if($important, !important, null);\n}\n\n/// Convert line-heights specified in pixels into a relative value, unless\n/// they are already unit-less (and thus already treated as relative values)\n/// or the units do not match the units used for the font size.\n///\n/// @param {Number} $line-height Line height\n/// @param {Number} $font-size Font size\n/// @return {Number} The line height as either a relative value or unmodified\n///\n/// @access private\n\n@function _govuk-line-height($line-height, $font-size) {\n @if not unitless($line-height) and unit($line-height) == unit($font-size) {\n $line-height: $line-height / $font-size;\n }\n\n @return $line-height;\n}\n\n/// Font size and line height helper\n///\n/// @param {Number} $size - Point from the type scale (the size as it would\n/// appear on tablet and above)\n/// @param {Number} $override-line-height [false] - Non responsive custom line\n/// height. Omit to use the line height from the font map.\n/// @param {Boolean} $important [false] - Whether to mark declarations as\n/// `!important`.\n///\n/// @throw if `$size` is not a valid point from the type scale\n///\n/// @access public\n///\n/// @alias govuk-font-size\n/// @deprecated Use `govuk-font-size` instead\n\n@mixin govuk-typography-responsive($size, $override-line-height: false, $important: false) {\n @include _warning(\n \"govuk-typography-responsive\",\n \"govuk-typography-responsive is deprecated. Use govuk-font-size instead.\"\n );\n @include govuk-font-size($size, $override-line-height, $important);\n}\n\n/// Font size and line height helper\n///\n/// Takes a point from the responsive 'font map' as an argument (the size as it\n/// would appear on tablet and above), and uses it to create font-size and\n/// line-height declarations for different breakpoints, and print.\n///\n/// Example font map:\n///\n/// ```scss\n/// 19: (\n/// null: (\n/// font-size: 16px,\n/// line-height: 20px\n/// ),\n/// tablet: (\n/// font-size: 19px,\n/// line-height: 25px\n/// ),\n/// print: (\n/// font-size: 14pt,\n/// line-height: 1.15\n/// )\n/// );\n/// ```\n///\n/// @param {Number | String} $size - Point from the type scale (the size as\n/// it would appear on tablet and above)\n/// @param {Number} $line-height [false] - Non responsive custom line\n/// height. Omit to use the line height from the font map.\n/// @param {Boolean} $important [false] - Whether to mark declarations as\n/// `!important`.\n///\n/// @throw if `$size` is not a valid point from the type scale\n///\n/// @access public\n\n@mixin govuk-font-size($size, $line-height: false, $important: false) {\n // Flag font sizes that start with underscores so we can suppress warnings on\n // deprecated sizes used internally, for example `govuk-font($size: \"_14\")`\n $size-internal-use-only: str-slice(#{$size}, 1, 1) == \"_\";\n\n // Remove underscore from font sizes flagged for internal use\n @if $size-internal-use-only {\n $size: str-slice(#{$size}, 2);\n }\n\n // Check for a font map exactly matching the given size\n $font-map: map-get($govuk-typography-scale, $size);\n\n // No match? Try with string type (e.g. $size: \"16\" not 16)\n @if not $font-map {\n @each $font-size in map-keys($govuk-typography-scale) {\n @if not $font-map and #{$font-size} == #{$size} {\n $font-map: map-get($govuk-typography-scale, $font-size);\n }\n }\n }\n\n // Still no match? Throw error\n @if not $font-map {\n @error \"Unknown font size `#{$size}` - expected a point from the type scale.\";\n }\n\n // Check for a deprecation within the type scale\n $deprecation: map-get($font-map, \"deprecation\");\n\n @if $deprecation {\n // Warn on deprecated font sizes unless flagged for internal use\n @if not $size-internal-use-only {\n @include _warning(map-get($deprecation, \"key\"), map-get($deprecation, \"message\"));\n }\n\n // remove the deprecation map keys so they do not break the breakpoint loop\n $font-map: map-remove($font-map, \"deprecation\");\n }\n\n @each $breakpoint, $breakpoint-map in $font-map {\n $font-size: map-get($breakpoint-map, \"font-size\");\n $font-size-rem: govuk-px-to-rem($font-size);\n\n // $calculated-line-height is a separate variable from $line-height,\n // as otherwise the value would get redefined with each loop and\n // eventually break _govuk-line-height.\n //\n // We continue to call the param $line-height to stay consistent with the\n // naming with govuk-font.\n $calculated-line-height: _govuk-line-height(\n $line-height: if($line-height, $line-height, map-get($breakpoint-map, \"line-height\")),\n $font-size: $font-size\n );\n\n // Mark rules as !important if $important is true - this will result in\n // these variables becoming strings, so this needs to happen *after* they\n // are used in calculations\n $font-size: $font-size if($important, !important, null);\n $font-size-rem: $font-size-rem if($important, !important, null);\n $calculated-line-height: $calculated-line-height if($important, !important, null);\n\n @if not $breakpoint {\n font-size: $font-size-rem;\n line-height: $calculated-line-height;\n } @else if $breakpoint == \"print\" {\n @include govuk-media-query($media-type: print) {\n font-size: $font-size;\n line-height: $calculated-line-height;\n }\n } @else {\n @include govuk-media-query($from: $breakpoint) {\n font-size: $font-size-rem;\n line-height: $calculated-line-height;\n }\n }\n }\n}\n\n/// Font helper\n///\n/// @param {Number | Boolean | String} $size Point from the type scale (the\n/// size as it would appear on tablet and above). Use `false` to avoid setting\n/// a size.\n/// @param {String} $weight [regular] - Weight: `bold` or `regular`\n/// @param {Boolean} $tabular [false] - Whether to use tabular numbers or not\n/// @param {Number} $line-height [false] - Line-height, if overriding the\n/// default\n///\n/// @throw if `$size` is not a valid point from the type scale (or false)\n///\n/// @access public\n\n@mixin govuk-font($size, $weight: regular, $tabular: false, $line-height: false) {\n @include govuk-typography-common;\n\n @if $tabular {\n @include govuk-font-tabular-numbers;\n }\n\n @if $weight == regular {\n @include govuk-typography-weight-regular;\n } @else if $weight == bold {\n @include govuk-typography-weight-bold;\n }\n\n @if $size {\n @include govuk-font-size($size, $line-height);\n }\n}\n"]}