Is your feature request related to a problem? Please describe.
I want to be able to customize the component by only changing design tokens names so that I can experiment with new designs or make customization that might be needed for just my implementation.
Describe the solution you'd like
All the tokens used should have a semantic name. i.e. --ds-alert-padding-left vs the direct --ds-size-100. Doing that allows the themer to easily change the padding of just the alert component instead of all references to ds-size-100
CSS parts can do some of this but we have to explicitly allow that and each element we want the implementer to access. Using design tokens will automatically allow theming.
Additional context
As we dive into more theming use cases this type of system will give implementers a ton of flexibility and remove the need for urgent updates on our side. It will also allow components to be themed for holidays or other special events.
Is your feature request related to a problem? Please describe.
I want to be able to customize the component by only changing design tokens names so that I can experiment with new designs or make customization that might be needed for just my implementation.
Describe the solution you'd like
All the tokens used should have a semantic name. i.e.
--ds-alert-padding-leftvs the direct--ds-size-100. Doing that allows the themer to easily change the padding of just the alert component instead of all references tods-size-100https://github.com/AlaskaAirlines/auro-alert/blob/3685829b7c2b2c679bab62845eaf03500d5eaf92/src/style.scss#L70
Describe alternatives you've considered
CSS parts can do some of this but we have to explicitly allow that and each element we want the implementer to access. Using design tokens will automatically allow theming.
Additional context
As we dive into more theming use cases this type of system will give implementers a ton of flexibility and remove the need for urgent updates on our side. It will also allow components to be themed for holidays or other special events.