Recount-Server/web/sass/variables.scss

@use 'catppuccin';

@each $flavor, $color in catppuccin.$palette {
    body.#{$flavor} {
        --#{$prefix}-base: #{map-get($color, 'base')};
        --#{$prefix}-crust: #{map-get($color, 'crust')};
        --#{$prefix}-mantle: #{map-get($color, 'mantle')};
        --#{$prefix}-surface0: #{map-get($color, 'surface0')};
        --#{$prefix}-surface1: #{map-get($color, 'surface1')};
        --#{$prefix}-surface2: #{map-get($color, 'surface2')};
        --#{$prefix}-overlay0: #{map-get($color, 'overlay0')};
        --#{$prefix}-overlay1: #{map-get($color, 'overlay1')};
        --#{$prefix}-overlay2: #{map-get($color, 'overlay2')};
        --#{$prefix}-text: #{map-get($color, 'text')};
        --#{$prefix}-green: #{map-get($color, 'green')};
        --#{$prefix}-red: #{map-get($color, 'red')};
        --#{$prefix}-sky: #{map-get($color, 'sky')};
        --#{$prefix}-sapphire: #{map-get($color, 'sapphire')};
        --#{$prefix}-teal: #{map-get($color, 'teal')};
        --#{$prefix}-maroon: #{map-get($color, 'maroon')};
        --#{$prefix}-mauve: #{map-get($color, 'mauve')};

        --#{$prefix}-nav-bg: #{map-get($color, 'sky')};
        --#{$prefix}-nav-color: #{map-get($color, 'base')};
        --#{$prefix}-nav-logo-bg: #{map-get($color, 'teal')};
        --#{$prefix}-nav-hover:  #{map-get($color, 'surface2')};
        --#{$prefix}-nav-active-bg: #{map-get($color, 'mauve')};
        --#{$prefix}-nav-active-color: #{map-get($color, 'base')};
    }
}

@each $color, $_ in map-get(catppuccin.$palette, 'latte') {
    .c-#{$color} {
        background-color: var(--#{$prefix}-#{$color}) !important;
    }
}

.tc-text {
    color: var(--#{$prefix}-text);
}