feat(notification): support component tokens

[janhassel]

Right now, the inline notification and toast notification components do not match the intended style (based on sketch kit) when used in dark themes (g90/g100) with props.lowContrast.

This PR implements the component-token approach used for the tag component. When css custom properties are not used, this will correct the styling to match the specs. With css custom properties enabled, developers are required to manually emit the component tokens (as with the tag tokens). Example:

$feature-flags: (
  enable-css-custom-properties: true,
);

@import '~carbon-components/scss/globals/scss/theme';
@import '~carbon-components/scss/globals/scss/component-tokens';

@import '~carbon-components/scss/components/tag/tokens';
@import '~carbon-components/scss/components/notification/tokens';

:root {
  @include carbon--theme($carbon--theme--g100, true) {
    @include emit-component-tokens($tag-colors);
    @include emit-component-tokens($notification-colors);
  }
}

Changelog

New

• Added notification/_tokens.scss with component-specific tokens for low-contrast notifications

Changed

• Changed notification implementation to use component tokens via get-token-value mixin

Removed

• Removed stop-gaps and overrides that forced white theme colors

Testing / Reviewing

In the deploy preview, enable low contrast variant in both inline and toast notification story and change theme to g90 or g100. Also, ensure styling on white/g10 has no regressions.

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 823ce50

https://deploy-preview-7808--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit 823ce50

https://deploy-preview-7808--carbon-components-react.netlify.app