Cambiar variables CSS
Client-Side
| Clave | Opciones disponibles |
| Propiedad | customization.visual.style.customVariables.{textPrimaryColor, textSecondaryColor, inputBackgroundColor, formBackgroundColor, baseColor, baseColorFirstVariant, baseColorSecondVariant, errorColor, successColor, successSecondaryColor, outlinePrimaryColor, outlineSecondaryColor, buttonTextColor, fontSizeExtraExtraSmall, fontSizeExtraSmall, fontSizeSmall, fontSizeMedium, fontSizeLarge, fontSizeExtraLarge, fontWeightNormal, fontWeightSemiBold, formInputsTextTransform, inputVerticalPadding, inputHorizontalPadding, inputFocusedBoxShadow, inputErrorFocusedBoxShadow, inputBorderWidth, inputFocusedBorderWidth, borderRadiusSmall, borderRadiusMedium, borderRadiusLarge, formPadding} |
const settings = {
...,
customization: {
visual: {
style: {
customVariables: {
textPrimaryColor: 'string',
textSecondaryColor: 'string',
...,
},
},
}
...,
},
}const customization = {
visual: {
style: {
customVariables: {
textPrimaryColor: 'string'
textSecondaryColor: 'string'
}
}
}
};Importante
Si necesitas personalizar el estilo visual de Brick además de personalizar temas y variables personalizadas, te recomendamos que no utilices como referencia o selector el valor de las clases e ID de CSS que son enviados con los Bricks, ya que se generan automáticamente durante el proceso de build de la aplicación y cambian regularmente. Utiliza la herencia de elementos HTML para acceder a lo que necesitas personalizar.