We like to use a convention of --hero-card-description-background-color : var(--simple-colors-default-theme-accent-12, #000000); and then leverage hero-card-description-background-color in the right spot. If it was a generic like "accent we use internal to the element" sort of scope, then we'd do something like:
the default-theme-accent style naming of simple colors allows for using the accent-color and dark property successfully
makes it more readable downstream
leveraging the default-theme-accent methodology allows us to be able to gaurentee a certain design / color pallet while maintaining accessibility (color contrast ratio)
We like to use a convention of
--hero-card-description-background-color : var(--simple-colors-default-theme-accent-12, #000000);and then leverage hero-card-description-background-color in the right spot. If it was a generic like "accent we use internal to the element" sort of scope, then we'd do something like:The reason we do it this way:
default-theme-accentstyle naming of simple colors allows for using theaccent-coloranddarkproperty successfullyhttps://github.com/dtn9197/herocard/blob/6672dc674a57a37de3c8076e355fe3ed443f2540/src/HeroCard.js#L29