@use "sass:map";

$tokens: (
    light: (--http-put-color: #dd1398,
        --http-patch-color: #038481,
        --http-trace-color: #8a3800,
        --text-success:#1d8039,
        --json-expand-arrow: #4646e6,
        --hljs-bg-color:#fefefe,
        --hljs-color:#545454,
        --hljs-comment-color:#696969,
        --hljs-variable-color:#d91e18,
        --hljs-number-color:#a65b00,
        --hljs-attribute-color:#a55a00,
        --hljs-string-color:#008000,
        --hljs-title-color:#0078a1,
        --hljs-keyword-color:#7928a1,
        --calendar-indicator-filter: invert(0)),
    dark: (--http-put-color: #f15cbe,
        --http-patch-color: #04a7a3,
        --http-trace-color: #fc6600,
        --text-success:#42be65,
        --json-expand-arrow: #4589ff, // --cds-border-interactive
        --hljs-bg-color:#2b2b2b,
        --hljs-color:#f8f8f2,
        --hljs-comment-color:#d4d0ab,
        --hljs-variable-color:#ffa07a,
        --hljs-number-color:#f5ab35,
        --hljs-attribute-color:#ffd700,
        --hljs-string-color:#abe338,
        --hljs-title-color:#00e0e0,
        --hljs-keyword-color:#e2bee8,
        --calendar-indicator-filter: invert(1))
);

@function token($mode, $key) {
    @return map.get(map.get($tokens, $mode), $key);
}

@mixin themed($prop, $key, $important: false) {
    .apic-explorer-light & {
        @if $important {
            #{$prop}: token(light, $key) !important;
        } @else {
            #{$prop}: token(light, $key);
        }
    }

    .apic-explorer-dark & {
        @if $important {
            #{$prop}: token(dark, $key) !important;
        } @else {
            #{$prop}: token(dark, $key);
        }
    }
}