@kabbage/sprout 0.13.2

Visual Form Tokens

Visual form tokens determine the shape and decorative aspects of sprout components. This includes properties such as borders, backgrounds, and shadows.

$spr-tokens-visual-form (map)

scss 
$spr-tokens-visual-form: (
  border-radius: (
    none: 0,
    sm: rem(2px),
    md: rem(4px),
    lg: rem(8px),
    circle: 50%
  ),
  border-width: (
    none: 0,
    standard: 1px,
    thick: 2px
  ),
  shadow: (
    sm: 0 2px 4px 0 rgba(spr-color(neutral, 90), 0.15),
    md: 0 4px 8px 0 rgba(spr-color(neutral, 90), 0.15),
    lg: 0 8px 16px 0 rgba(spr-color(neutral, 90), 0.15)
  ),
  opacity: (
    25: 0.25,
    50: 0.5,
    75: 0.75
  )
) !default;

A map containing all visual-form tokens.

Map Properties

border-radius: (map)

Border radius tokens determine the rounded-ness of corners

border-width: (map)

Border width tokens control the thickness of borders and lines.

shadow: (map)

Shadow tokens define the aspects of box shadows for elevated elements.

opacity: (map)

Opacity tokens control the transparency of all elements in Sprout.

Configuration

@mixin spr-config-visual-form()

Configures Sprout visual form tokens by recursively merging in the provided map.

Parameters

$custom-config: () (map)

Sprout visual form token map that matches the form of $spr-tokens-visual-form

Used By

@mixin spr-config()

Getter Functions

@function spr-border-radius-tokens()

Get the map of border-radius tokens.

Requires

$spr-tokens-visual-form (map)

Used By

@function spr-border-radius()

@function spr-border-radius()

Get a border-radius value given a border-radius token.

Parameters

$border-radius-token: (string)

A Sprout border radius token such as ‘sm’ or ‘lg’.

Requires

@function map-get-strict()

@function spr-border-radius-tokens()

Used By

@mixin spr-border()

@function spr-shadow-tokens()

Get the map of shadow tokens.

Requires

$spr-tokens-visual-form (map)

Used By

@function spr-shadow()

@function spr-border-width-tokens()

Get the map of border width tokens.

Requires

$spr-tokens-visual-form (map)

Used By

@function spr-border-width()

@function spr-border-width()

Get a border-width value from a border-width token.

Parameters

$border-width-token: (string)

A Sprout border-width token such as ‘standard’ or ‘thick’.

Requires

@function map-get-strict()

@function spr-border-width-tokens()

Used By

@mixin spr-space-inset-squish()

@mixin spr-border()

@function spr-opacity-tokens()

Get the map of opacity tokens.

Requires

$spr-tokens-visual-form (map)

Used By

@function spr-opacity()

@function spr-opacity()

Get an opacity value given an opacity token.

Parameters

$opacity-token: (string)

A Sprout opacity token such as ‘25’ or ‘50’.

Requires

@function map-get-strict()

@function spr-opacity-tokens()

@function spr-shadow()

Get a box shadow value given a shadow token.

Parameters

$shadow-token: (string)

A Sprout shadow token such as ‘sm’ or ‘md’.

Requires

@function map-get-strict()

@function spr-shadow-tokens()

Used By

@mixin spr-popover()