PrimeNG19 custom preset

I have upgraded the application to Angular19 and PrimeNG19 and writing my custom preset. It looks like the background from disabled is applied to checkDisabled as well and the borderColor from checkDisabled is applied to disabled.


export const corePreset = definePreset(Aura, {
colors: {
primary: {
50: '#e3f2fd',
100: '#bbdefb',
200: '#90caf9',
300: '#64b5f6',
400: '#42a5f5',
500: '#2196F3',
600: '#1e88e5',
700: '#1976D2',
800: '#1565c0',
900: '#0d47a1',
contrast: '#ffffff',
},
surface: {
0: '#ffffff',
100: '#f8f9fa',
200: '#e9ecef',
300: '#dee2e6',
400: '#ced4da',
500: '#adb5bd',
600: '#6c757d',
700: '#495057',
800: '#343a40',
900: '#212529',
},
success: {
500: 'var(--p-primary-color)',
contrast: 'var(--p-primary-color-contrast)',
},
info: {
500: '#2196F3',
contrast: '#ffffff',
},
},
borderRadius: {
md: '3px',
},
borderWidth: {
sm: '2px'
},
transition: {
duration: '0.2s',
},

disabledOpacity: '0.6',
components: {
checkbox: {
width: '20px',
height: '20px',

box: {
borderWidth: 'var(--p-borderWidth-md)',
borderStyle: 'solid',
borderColor: 'var(--p-surface-400)',
background: 'var(--p-surface-0)',
borderRadius: 'var(--p-border-radius-md)',
transition: 'background-color var(--p-transition-duration)',
iconColor: 'var(--p-surface-0)',
},

hover: {
borderColor: '#60b5e6'
},

checked: {
background: '#60b5e6',
borderColor: '#60b5e6',
color: 'var(--p-surface-0)',
hover: {
background: '#178de0',
borderColor: '#178de0',
},
},

disabled: {
background: '#e9ecef',
borderColor: '#ced4da',
color: 'var(--p-surface-0)',
},

checkedDisabled: {
opacity: '0.6',
background: '#60b5e6',
borderColor: '#60b5e6',
iconColor: 'var(--p-surface-0)',
},

icon: {
size: '14px',
color: 'var(--p-surface-0)',
},

label: {
color: 'var(--p-text-color)',
disabled: {
color: 'var(--p-surface-500)',
},
},
},


}


});

I have tried multiple approaches, also with css overrides directly in styles.scss but it seems to not be working.

Continue reading...