Programatically create theme CSS properties with Sass.

index.sass

$themeColours: (
    "gray",
    "red",
    "orange",
    "yellow",
    "green",
    "teal",
    "blue",
    "cyan",
    "purple",
    "pink",
    "base",
    "accent",
);

@each $themeColour, $i in $themeColours {

    /* Normal */

    .theme__#{$themeColour} {
        border-color: var(--fold-color-#{$themeColour}-3) !important;
        background-color: var(--fold-color-#{$themeColour}-4) !important;
    }

    .theme__#{$themeColour}.button:hover {
        border-color: var(--fold-color-#{$themeColour}-3) !important;
        background-color: var(--fold-color-#{$themeColour}-2) !important;
    }

    .theme__#{$themeColour} .text,
    .theme__#{$themeColour} .heading {
        color: var(--fold-color-#{$themeColour}-6) !important;
    }	

    .theme__#{$themeColour} svg {
        fill: var(--fold-color-#{$themeColour}-6) !important;
    }	

    /* Active */

    .theme__#{$themeColour}.active {
        border-color: var(--fold-color-#{$themeColour}-3) !important;
        background-color: var(--fold-color-#{$themeColour}-1)  !important;
    }

    .theme__#{$themeColour}.active.button:hover {
        border-color: var(--fold-color-#{$themeColour}-4) !important;
        background-color: var(--fold-color-#{$themeColour}-2)  !important;
    }

    .theme__#{$themeColour}.active .text,
    .theme__#{$themeColour}.active .heading {
        color: var(--fold-color-#{$themeColour}-5) !important;
    }	

    .theme__#{$themeColour}.active svg {
        fill: var(--fold-color-#{$themeColour}-5) !important;
    }	

    /* Solid */

    .theme__#{$themeColour}-solid {
        border-color: var(--fold-color-#{$themeColour}-7) !important;
        background-color: var(--fold-color-#{$themeColour}-6) !important;
    }

    .theme__#{$themeColour}-solid.button:hover {
        border-color: var(--fold-color-#{$themeColour}-8) !important;
        background-color: var(--fold-color-#{$themeColour}-7) !important;
    }

    .theme__#{$themeColour}-solid .text,
    .theme__#{$themeColour}-solid .heading {
        color: var(--fold-color-#{$themeColour}-2) !important;
    }	

    .theme__#{$themeColour}-solid svg {
        fill: var(--fold-color-#{$themeColour}-2) !important;
    }	
    
    /* Solid active */

    .theme__#{$themeColour}-solid.active {
        border-color: var(--fold-color-#{$themeColour}-9) !important;
        background-color: var(--fold-color-#{$themeColour}-7) !important;
    }

    .theme__#{$themeColour}-solid.active.button:hover {
        border-color: var(--fold-color-#{$themeColour}-10) !important;
        background-color: var(--fold-color-#{$themeColour}-8) !important;
    }

    .theme__#{$themeColour}-solid.active .text,
    .theme__#{$themeColour}-solid.active .heading {
        color: var(--fold-color-#{$themeColour}-5) !important;
    }	

    .theme__#{$themeColour}-solid.active svg {
        fill: var(--fold-color-#{$themeColour}-1) !important;
    }	
}