auro-alert: Semantic token Aliases

[braven112]

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

auro-alert/src/style.scss

Line 70 in 3685829

padding: var(--ds-size-100, $ds-size-100);

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.