$themeColors: 'blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple', 'gray', 'red', 'primary' !default;
$colorShades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 !default;
$surfaceShades: 0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 !default;
$rgbaShades: 10, 20, 30, 40, 50, 60, 70, 80, 90 !default;

@include surface-class('text', 'color', $surfaceShades);
@include surface-class('surface', 'background-color', $surfaceShades);
@include surface-class('border', 'border-color', $surfaceShades);
@include style-class('background-color', (bg-transparent:'transparent'), true);
@include style-class('border-color', (border-transparent:'transparent'), true);
@include color-class('text-', 'color', $themeColors, $colorShades);
@include color-class('bg-', 'background-color', $themeColors, $colorShades);
@include color-class('border-', 'border-color', $themeColors, $colorShades);
@include rgba-color-class('bg-', 'background-color', ('white': '255,255,255', 'black': '0,0,0'), $rgbaShades);
@include rgba-color-class('border-', 'border-color', ('white': '255,255,255', 'black': '0,0,0'), $rgbaShades);
@include rgba-color-class('text-', 'color', ('white': '255,255,255', 'black': '0,0,0'), $rgbaShades);

$custom-properties: (
    'text-primary': ('color': var(--p-primary-color)),
    'bg-primary': ('color': var(--p-primary-contrast-color), 'background-color': var(--p-primary-color)),
    'bg-primary-reverse': ('color': var(--p-primary-color), 'background-color': var(--p-primary-contrast-color)),
    'bg-white': ('background-color': #ffffff),
    'border-primary': ('border-color': var(--p-primary-color)),
    'text-white': ('color': #ffffff),
    'border-white': ('border-color': #ffffff),
    'text-color': ('color': var(--p-text-color)),
    'text-color-secondary': ('color': var(--p-text-muted-color)),
    'surface-ground': ('background-color': light-dark(var(--p-surface-50), var(--p-surface-950))),
    'surface-section': ('background-color': light-dark(var(--p-surface-0), var(--p-surface-950))),
    'surface-card': ('background-color': light-dark(var(--p-surface-0), var(--p-surface-900))),
    'surface-overlay': ('background-color': light-dark(var(--p-surface-0), var(--p-surface-900))),
    'surface-hover': ('background-color': light-dark(var(--p-surface-800), var(--p-surface-100))),
    'surface-border': ('border-color': light-dark(var(--p-surface-200), var(--p-surface-700)))
) !default;

@include generate-class($custom-properties, true, true);