Visual Picker

Variables

brand

$brand: color.get('action', 'selection-control', 'on', 'primary') !default;
Description

Brand color applied to the components

Type

Color

control-background-color

$control-background-color: color.get('ui-bg', 'primary') !default;
Description

Background color of control element over the selection

Type

Color

container-overlay-background-color

$container-overlay-background-color: rgba(#000, 0.02) !default;
Description

Selection image container overlay background color (must be rgba)

Type

Color

label-background-color

$label-background-color: color.get('ui-bg', 'primary') !default;
Description

Label background color (must be rgba)

Type

Color

label-border-color-error

$label-border-color-error: color.get('field', '06') !default;
Description

Label border color when invalid

Type

Color

border-color

$border-color: color.get('action', 'selection-control', 'off', 'primary') !default;
Description

Unchecked default border color

Type

Color

border-color-focus

$border-color-focus: $brand !default;
Description

Border color when focused

Type

Color

border-color-checked

$border-color-checked: $brand !default;
Description

Border color when checked

Type

Color

border-width

$border-width: unit.rem(1px) !default;
Description

Border width

Type

Number

border-width-focus

$border-width-focus: unit.rem(2px) !default;
Description

Border width when focused

Type

Number

disabled-background-color

$disabled-background-color: color.get('ui-bg', '02') !default;
Description

Disabled state background color

Type

Color