Visual Form 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 add form to components effectively in Sprout.

@mixin spr-border()

Generates border styles conforming to Sprout guidelines

Parameters & Output

$border-color: transparent (color)

Border color (e.g. spr-color(neutral, 20))

$border-radius-token: none (string)

Border radius token (e.g. sm, md, lg)

$border-width-token: standard (string)

Border width token (e.g. standard, thick)

{CSS output} (code block)

CSS declarations for border color, width, style, and radius.

Requires

@function spr-border-width()

@function spr-border-radius()

@mixin spr-focus-shadow()

Utility for focus shadow on interactive components

Requires

@function rem()

@mixin spr-text-decoration-underline()

Utility for text decoration line

Parameters

$style: (string)

Specifies the line style for underline