@use "sass:color";
@use "sass:list";

$_shade-labels: ("05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95");
@mixin _generate-colour-classes($name, $colours) {
    @for $i from 1 through list.length($_shade-labels) {
        $shade: list.nth($_shade-labels, $i);
        $colour: list.nth($colours, $i);
        
        .fg-#{$name}--#{$shade} {
            color: $colour;
        }
        
        .bg-#{$name}--#{$shade} {
            background-color: $colour;
        }
    }
}

// The following colours can be generated using this formula, where tint and shade factors are [0,1]. 
// brand--05 is a 90% tint, brand--10 is a 80% tint, brand--20 is a 60% tint, etc... past --50 it becomes shade in the ascending direction
// Tints: New value = current value + ((255 - current value) x tint factor)
// Shades: New value = current value x shade factor

$brand: #df3062;
// Generated from https://maketintsandshades.com/#df3062
$brand--05: #fceaef;
$brand--10: #f9d6e0;
$brand--20: #f2acc0;
$brand--30: #ec83a1;
$brand--40: #e55981;
$brand--50: $brand;
$brand--60: #b2264e;
$brand--70: #861d3b;
$brand--80: #591327;
$brand--90: #2d0a14;
$brand--95: #16050a;

/* // foul green
$brand: #30dd33;
$brand--05: #EAFCEB;
$brand--10: #d6f8d6;
$brand--20: #acf1ad;
$brand--30: #83eb85;
$brand--40: #59e45c;
$brand--50: $brand;
$brand--60: #26b129;
$brand--70: #1d851f;
$brand--80: #135814;
$brand--90: #0a2c0a;
$brand--95: #051605; */

/* // pastel blue
$brand: #86a4d8;
$brand--05: #f3f6fb;
$brand--10: #e7edf7;
$brand--20: #cfdbef;
$brand--30: #b6c8e8;
$brand--40: #9eb6e0;
$brand--50: $brand;
$brand--60: #6b83ad;
$brand--70: #506282;
$brand--80: #364256;
$brand--90: #1b212b;
$brand--95: #0d1016; */

@include _generate-colour-classes("brand", ($brand--05, $brand--10, $brand--20, $brand--30, $brand--40, $brand--50, $brand--60, $brand--70, $brand--80, $brand--90, $brand--95));

$grey: #888888;
// Generated from https://maketintsandshades.com/#888888
$grey--05: #f3f3f3;
$grey--10: #e7e7e7;
$grey--20: #cfcfcf;
$grey--30: #b8b8b8;
$grey--40: #a0a0a0;
$grey--50: $grey;
$grey--60: #6d6d6d;
$grey--70: #525252;
$grey--80: #363636;
$grey--90: #1b1b1b;
$grey--95: #0e0e0e;

@include _generate-colour-classes("grey", ($grey--05, $grey--10, $grey--20, $grey--30, $grey--40, $grey--50, $grey--60, $grey--70, $grey--80, $grey--90, $grey--95));

.fg-white {
    color: white;
}

$panel-background: $grey--10;  // for use in headers and footers
