colors.sass

@use 'sass:math'
    
$darken-value: 5%
$darkest-value: 10%
$lighten-value: 5%
$lightest-value: 10%
 

$primary: #1684c3
$secondary: #443731
$tertiary: #ffe600
 
$color-names: primary, secondary, tertiary
$color-codes: $primary, $secondary, $tertiary
 
$dark-text-default: #000 !default
$light-text-default: #fff !default
 
// Calculate brightness of a given color.
@function brightness($color)
    @return math.div((red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114), 255) 
 
 
// Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
@function color-contrast($color, $dark: $dark-text-default, $light: $light-text-default)
    @if $color == null 
        @return null
    @else 
        $color-brightness: brightness($color)
        $light-text-brightness: brightness($light)
        $dark-text-brightness: brightness($dark)
 
        @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark)
 
 
:root
    @for $i from 1 through length($color-names)
        --#{nth($color-names, $i)}: nth($color-codes, $i)
        --#{nth($color-names, $i)}--darken: darken(nth($color-codes, $i), $darken-value)
        --#{nth($color-names, $i)}--darkest: darken(nth($color-codes, $i), $darkest-value)
        --#{nth($color-names, $i)}--lighten: lighten(nth($color-codes, $i), $lighten-value)  
        --#{nth($color-names, $i)}--lightest: lighten(nth($color-codes, $i), $lightest-value)

@for $i from 1 through length($color-names)
    .btn-#{nth($color-names, $i)}
        background: nth($color-codes, $i)
        color: color-contrast(nth($color-codes, $i))

    .bg-#{nth($color-names, $i)}
        background: nth($color-codes, $i)
        
    .bg-text-#{nth($color-names, $i)}
        background: nth($color-codes, $i)
        color: color-contrast(nth($color-codes, $i))
    .text-#{nth($color-names, $i)}
        color: nth($color-codes, $i)