abe33/awesome_form

$base: #DCD4F9

$pink: #E01FBA
$pink_light: lighten($pink, 30%)
$pink_lighter: lighten($pink_light, 10%)
$pink_dark: darken($pink, 10%)

$red: #E01F59
$red_light: lighten($red, 30%)
$red_lighter: lighten($red_light, 10%)
$red_dark: darken($red, 10%)

$orange: #E0451F
$orange_light: lighten($orange, 30%)
$orange_lighter: lighten($orange_light, 10%)
$orange_dark: darken($orange, 10%)

$yellow: #E0A61F
$yellow_light: lighten($yellow, 30%)
$yellow_lighter: lighten($yellow_light, 10%)
$yellow_dark: darken($yellow, 10%)

$yellow_green: #BAE01F
$yellow_green_light: lighten($yellow_green, 30%)
$yellow_green_lighter: lighten($yellow_green_light, 10%)
$yellow_green_dark: darken($yellow_green, 10%)

$green: #59E01F
$green_light: lighten($green, 30%)
$green_lighter: lighten($green_light, 10%)
$green_dark: darken($green, 10%)

$cyan: #1FBAE0
$cyan_light: lighten($cyan, 30%)
$cyan_lighter: lighten($cyan_light, 10%)
$cyan_dark: darken($cyan, 10%)

$blue: #1F59E0
$blue_light: lighten($blue, 30%)
$blue_lighter: lighten($blue_light, 10%)
$blue_dark: darken($blue, 10%)

$violet: #A61FE0
$violet_light: lighten($violet, 30%)
$violet_lighter: lighten($violet_light, 10%)
$violet_dark: darken($violet, 10%)

$grey: $base
$grey_light: lighten($base, 6%)
$grey_lighter: lighten($base, 9%)
$grey_dark: darken($base, 10%)
$grey_darker: darken($base, 20%)
$grey_very_dark: darken($base, 40%)
$grey_extra_dark: darken($base, 60%)
$grey_extra_darker: desaturate(darken($base, 70%), 20%)
$grey_extra_darker_2: desaturate(darken($red, 20%), 50%)

$grey_gradient_lighter: linear-gradient(to bottom, $grey_lighter 50%, lighten($grey_light, 2%) 100%)

$break-sm: 480px
$break-md: 768px
$break-lg: 1020px
$break-xl: 1220px
$break-xxl: 1600px

$break-sm-1: $break-sm + 1
$break-md-1: $break-md + 1
$break-lg-1: $break-lg + 1
$break-xl-1: $break-xl + 1
$break-xxl-1: $break-xxl + 1

$padding_1: 2px
$padding_2: 3px
$padding_3: 6px
$padding_4: 8px
$padding_5: 12px
$padding_6: 20px

$radius_1: 3px
$radius_2: 4px
$radius_3: 6px
$radius_4: 10px

$inset_bevel_size: 2px
$outset_bevel_size: 2px

$button_radius: $radius_3
$button_padding: $padding_4 $padding_5
$button_color: $grey_light
$button_border: $grey

$input_radius: $radius_3
$input_padding: ($padding_3 - 1px + $inset_bevel_size) $padding_5 $padding_3
$input_color: $grey_lighter
$input_border: $grey

$base-font-size: 16px