
@use "sass:map";
@use "sass:color";

@function to_rgba($color, $alpha: 1) {
    @return "" + color.channel($color, "red") + "," + color.channel($color, "green") + "," + color.channel($color, "blue");
}

// @see @/config/theme.json
$default: (
    "primary": #1164a3,
    "secondary": #199AFC,
    "accent": #ff5a02,
    "background": #f9f9f9,
    "background-contrast": #141414,
    "surface": #ffffff,
    "surface-contrast": #000000,
    "border": #f5f5f5,
    "text": #2a2a2a,
    "text-contrast": #ffffff,
    "text-secondary": #494949,
    "text-disabled": #999999,
    // All the colors defined in the default theme but not defined in the dark theme will be used in the dark theme 'as is'
    "danger": #d93131,
    "success": #21b621,
    "warning": #f1cc14,
    "info": #2760dc
);

$dark: (
    "primary": #1164a3,
    "secondary": #199AFC,
    "accent": #ff5a02,
    "background": #020617,
    "background-contrast": #f1f1f1,
    "surface": #232323,
    "surface-contrast": #d6d6d6,
    "border": #373737,
    "text": #f1f1f1,
    "text-contrast": #1f1f1f,
    "text-secondary": #d1d1d1,
    "text-disabled": #999999
    // Override the default theme colors with the dark theme colors
    // "danger": #ea3434,
    // ...
);

// This can be used to set the default theme, or changed to a different theme with a custom class name
:root {
    // Declare a variable for each key in the map
    @each $key, $value in $default {
        --#{$key}: #{to_rgba($value, 1)};
    }

}

.dark {
    @each $key, $value in $dark {
        --#{$key}: #{to_rgba($value, 1)};
    }
}
