TL;DR: Can you set up the SASS variables to let you set up hover, active and focus background colours for all the custom ionic colours (primary, secondary, red…)
I’m wondering if my dream of never writing another line of button css code is feasible.
I want to type color=“red” in the HTML and have the hover, active and focus background colour be set to either the contrast colour or a shaded version of thPreformatted texte red (that I can choose the shading). This would then be the same if i suddenly wanted a blue button
The Sass overriding indicates that there are functions built in that could do these things:
$button-md-background-color-activated: color-shade($button-md-background-color)
$button-md-text-color:color-contrast($colors-md, $button-md-background-color)
However, I seem to be unable to set them in Theme/Variables (this could be my miss-understanding of usage). For example:
$button-md-background-color-activated: color-contrast($colors-md, $button-md-background-color)
This does not work as it cannot find the variables.
So is it possible to create a custom Sass function to do this and set it to the sass variables to allow custom styling to be applied to buttons in every custom colour? Or even amend the existing ones (change shading percentage for example)