Typography Utilities
Utilities implement some of the higher-level requirements and guidelines prescribed by the Sprout Design System. These mixins and functions provide the tools needed to develop effectively with text in Sprout.
@mixin spr-text()
Generates font styles for a text token
Parameters & Output
$text-token: (string)
A Sprout font-size or line-height token such as ‘body-sm’, or ‘display-lg’
$crop: false (bool)
{CSS output} (code block)
font styling for the token
Requires
@mixin spr-crop-text()
@function spr-font-family()
@function spr-font-size()
@function spr-line-height()
@function spr-font-weight()
Used By
@mixin spr-progress-stepper-text()
@mixin spr-crop-text()
Crops the extra lineheight from the top of the first line and bottom of the last line. This makes a block of text truly flush with its visible content box, allowing for pixel-perfect spacing.
Parameters & Output
$text-token: (string)
The text token associated with the typography being cropped (e.g. display-lg, body-sm).
{CSS output} (code block)
::before and ::after pseudo-elements that offset the extra lineheight with negative margin
Used By
@mixin spr-text()
@mixin spr-link()
Applies standard link styles to the selector, including hover
Map Properties & Output
{CSS output} (code block)
typography and hover styles for link
@mixin spr-bold()
Makes the font weight bold
Map Properties & Output
{CSS output} (code block)
typography for bold