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-focus-visible()

Utility for applying a keyboard only :focus-visible with a fallback to show on any focus for browsers that don’t support it

Requires

@mixin spr-keyboard-only-focus()

@function rem()

@mixin spr-keyboard-only-focus()

This will only provide focus when using the keyboard using the provided focus styles. This is similar to spr-focus-visible except it allows using any focus style

Parameters

$props-to-reset: [outline (list)

] - A list of props that will be set to none in order to clear their focus.

Used By

@mixin spr-link()

@mixin spr-focus-visible()

@mixin spr-text-decoration-underline()

Utility for text decoration line

Parameters

$style: (string)

Specifies the line style for underline