Those are color variables defined in the theme.yaml. Here is example f this file content:
dark-background: "#1C1E2E" #var(--dark-background)
medium-background: "#242635" #var(--medium-background)
light-background: "#2C2E3C" #var(--light-background)
components-background: "#242635" #var(--components-background)
bright-text: "#ffffff" #var(--bright-text)
dimmed-text: "#A4A7B4" #var(--dimmed-text)
dark-text: "#444856" #var(--dark-text)
cyan-text: "#1bbfff" #var(--cyan-text)
alert-text: "#CD1015" #var(--alert-text)
The first column shows actual definitions of different interface components, the second one displays as comment variable to be used to use specific color in the UI. For this matter you can define in your theme additional colors, that are not specific to UI elements, but also can be used same way. Here is sample of color palette I’m using in my theme:
orange1: "#F5A624"
orange2: "#DBBC09"
orange3: "#AB6D09"
orange4: "#784E07"
orange5: "#452F05"
orange6: "#121003"
Please note that not all cards accpt variables as color definition, though…