Notification Banner 2.0 Update

# Notification banner Component Style & Token Update Spec

## 1. Props & Variants Overview

| Prop / Variant | New? |  Notes |
| -------------- |--|  ----- |
| `emphasis` | ✅ | New variants for high and low emphasis |
| `compact` | ✅ | New variant for mobile and smaller container widths |

## 2. Style + Token Comparison Table

| Token / raw style                                   | CSS Property     | Variant / State             | Current value             | New value               | Status    | Notes        |
|-----------------------------------------------------|------------------|-----------------------------|---------------------------|-------------------------|-----------|--------------|
| --goa-notification-banner-custom-color-bg           | background-color |                             | {color.info.default}      | {color.info.default}    | Unchanged |              |
| --goa-notification-banner-custom-color-icon         | color            |                             | {color.greyscale.white}   | {color.greyscale.white} | Unchanged |              |
| --goa-notification-banner-custom-color-text         | color            |                             | {color.text.light}        | {color.text.light}      | Unchanged |              |
| --goa-notification-banner-emergency-color-bg        | background-color | Emergency + High emphasis   | {color.emergency.default} | #DA291C                 | Changed   |              |
| --goa-notification-banner-emergency-color-icon      | color            | Emergency + High emphasis   | {color.greyscale.white}   | {color.greyscale.white} | Unchanged |              |
| --goa-notification-banner-emergency-color-text      | color            | Emergency + High emphasis   | {color.text.light}        | {color.text.light}      | Unchanged |              |
| —goa-notification-banner-low-emergency-color-bg     | background-color | Emergency + Low emphasis    |                           | #FFF6F6                 | New       |              |
| —goa-notification-banner-low-emergency-color-border | border-color     | Emergency + Low emphasis    |                           | #F4C8C5                 | New       |              |
| —goa-notification-banner-low-emergency-color-icon   | color            | Emergency + Low emphasis    |                           | #DA291C                 | New       |              |
| —goa-notification-banner-low-emergency-color-text   | color            | Emergency + Low emphasis    |                           | #A91A10                 | New       |              |
| --goa-notification-banner-event-color-bg            | background-color | Event                       | {color.info.default}      | {color.info.default}    | Unchanged | Legacy token |
| --goa-notification-banner-event-color-icon          | color            | Event                       | {color.greyscale.white}   | {color.greyscale.white} | Unchanged | Legacy token |
| --goa-notification-banner-event-color-text          | color            | Event                       | {color.text.light}        | {color.text.light}      | Unchanged | Legacy token |
| --goa-notification-banner-gap                       | gap              |                             | {space.m}                 | {space.m}               | Unchanged |              |
| --goa-notification-banner-important-color-bg        | background-color | Important + High emphasis   | {color.warning.default}   | #FFB800                 | Changed   |              |
| --goa-notification-banner-important-color-icon      | color            | Important + High emphasis   | {color.greyscale.black}   | #4D3700                 | Changed   |              |
| --goa-notification-banner-important-color-text      | color            | Important + High emphasis   | {color.text.default}      | #4D3700                 | Changed   |              |
| —goa-notification-banner-low-important-color-bg     | background-color | Important + Low  emphasis   |                           | #FDE3A1                 | New       |              |
| —goa-notification-banner-low-important-color-border | border-color     | Important + Low  emphasis   |                           | #FDE3A1                 | New       |              |
| —goa-notification-banner-low-important-color-icon   | color            | Important + Low  emphasis   |                           | #CC9300                 | New       |              |
| —goa-notification-banner-low-important-color-text   | color            | Important + Low  emphasis   |                           | #4D3700                 | New       |              |
| --goa-notification-banner-information-color-bg      | color            | Information + High emphasis | {color.info.default}      | #0077AD                 | Changed   |              |
| --goa-notification-banner-information-color-icon    | color            | Information + High emphasis | {color.greyscale.white}   | {color.greyscale.white} | Unchanged |              |
| --goa-notification-banner-information-color-text    | color            | Information + High emphasis | {color.text.light}        | {color.text.light}      | Unchanged |              |
| —goa-notification-banner-low-information-color-bg   | color            | Information + Low emphasis  |                           | #EBF8FF                 | New       |              |
| —goa-notification-banner-low-information-color-icon | color            | Information + Low emphasis  |                           | #0077AD                 | New       |              |
| —goa-notification-banner-low-information-color-text | color            | Information + Low emphasis  |                           | #0077AD                 | New       |              |
| --goa-notification-banner-padding-lr-large-screen   | padding          | Large screen                | {space.3xl}               | {space.3xl}             | Unchanged |              |
| --goa-notification-banner-padding-lr-medium-screen  | padding          | Medium screen               | {space.l}                 | {space.l}               | Unchanged |              |
| --goa-notification-banner-padding-lr-small-screen   | padding          | Small screen                | {space.m}                 | {space.m}               | Unchanged |              |
| --goa-notification-banner-padding-tb                | padding          |                             | {space.l}                 | {space.l}               | Unchanged |              |
| --goa-notification-banner-size-icon                 | size             |                             | {iconSize.4}              | {iconSize.4}            | Unchanged |              |
| --goa-notification-banner-text-size                 | font-size        |                             | {typography.body.m}       | {typography.body.m}     | Unchanged |              |
| —goa-notification-banner-compact-gap                | gap              | Compact                     |                           | {space.s}               | New       |              |
| —goa-notification-banner-compact-padding-tb         | padding          | Compact                     |                           | {space.m}               | New       |              |
| —goa-notification-banner-compact-padding-lr         | padding          | Compact                     |                           | {space.m} {space.s}     | New       |              |

## 3. New Tokens to Add

| Token                                               | Value               | Description                                |
|-----------------------------------------------------|---------------------|--------------------------------------------|
| —goa-notification-banner-low-emergency-color-bg     | #FFF6F6             | Low emphasis variant of Emergency banner   |
| —goa-notification-banner-low-emergency-color-border | #F4C8C5             | Low emphasis variant of Emergency banner   |
| —goa-notification-banner-low-emergency-color-icon   | #DA291C             | Low emphasis variant of Emergency banner   |
| —goa-notification-banner-low-emergency-color-text   | #A91A10             | Low emphasis variant of Emergency banner   |
| —goa-notification-banner-low-important-color-bg     | #FDE3A1             | Low emphasis variant of Important banner   |
| —goa-notification-banner-low-important-color-border | #FDE3A1             | Low emphasis variant of Important banner   |
| —goa-notification-banner-low-important-color-icon   | #CC9300             | Low emphasis variant of Important banner   |
| —goa-notification-banner-low-important-color-text   | #4D3700             | Low emphasis variant of Important banner   |
| —goa-notification-banner-low-information-color-bg   | #EBF8FF             | Low emphasis variant of Information banner |
| —goa-notification-banner-low-information-color-icon | #0077AD             | Low emphasis variant of Information banner |
| —goa-notification-banner-low-information-color-text | #0077AD             | Low emphasis variant of Information banner |
| —goa-notification-banner-compact-gap                | {space.s}           | Compact variant                            |
| —goa-notification-banner-compact-padding-tb         | {space.m}           | Compact variant                            |
| —goa-notification-banner-compact-padding-lr         | {space.m} {space.s} | Compact variant                            |

## 4. Deprecated / No Longer Used Tokens

| Token Name                                     | Last Used      | Notes |
|------------------------------------------------|----------------|-------|
| --goa-notification-banner-event-color-text     | For event type |       |
| --goa-notification-banner-event-color-icon     | For event type |       |
| --goa-notification-banner-event-color-bg       | For event type |       |
| --goa-notification-banner-emergency-color-text | For event type |       |

## 5. Implementation Notes

## 6. ✅ Clarified Responses

### Current Implementation Files Analyzed

- Global tokens: /design-tokens/data/goa-global-design-tokens.json
- Component tokens: /design-tokens/data/component-design-tokens/notification-banner-design-tokens.json
- Notification Banner components: /ui-components/libs/web-components/src/components/notification/Notification.svelte

### Figma Designs Analyzed
- Notification Banner component: https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/branch/Kkd4vrWhbQ9Oqv0WufXbXC/%E2%9D%96-Component-library-%7C-DDD?m=auto&node-id=633-11158&t=Vn3YsOIyArpWiUQq-1

### Key Changes Summary
- Updates colours and spacing
- Removes `event` from the `NotificationType` property
- Adds `compact` variant

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Notification Banner 2.0 Update #2947

Notification banner Component Style & Token Update Spec

1. Props & Variants Overview

2. Style + Token Comparison Table

3. New Tokens to Add

4. Deprecated / No Longer Used Tokens

5. Implementation Notes

6. ✅ Clarified Responses

Current Implementation Files Analyzed

Figma Designs Analyzed

Key Changes Summary

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Prop / Variant	New?	Notes
`emphasis`	✅	New variants for high and low emphasis
`compact`	✅	New variant for mobile and smaller container widths

Token / raw style	CSS Property	Variant / State	Current value	New value	Status	Notes
--goa-notification-banner-custom-color-bg	background-color		{color.info.default}	{color.info.default}	Unchanged
--goa-notification-banner-custom-color-icon	color		{color.greyscale.white}	{color.greyscale.white}	Unchanged
--goa-notification-banner-custom-color-text	color		{color.text.light}	{color.text.light}	Unchanged
--goa-notification-banner-emergency-color-bg	background-color	Emergency + High emphasis	{color.emergency.default}	#DA291C	Changed
--goa-notification-banner-emergency-color-icon	color	Emergency + High emphasis	{color.greyscale.white}	{color.greyscale.white}	Unchanged
--goa-notification-banner-emergency-color-text	color	Emergency + High emphasis	{color.text.light}	{color.text.light}	Unchanged
—goa-notification-banner-low-emergency-color-bg	background-color	Emergency + Low emphasis		#FFF6F6	New
—goa-notification-banner-low-emergency-color-border	border-color	Emergency + Low emphasis		#F4C8C5	New
—goa-notification-banner-low-emergency-color-icon	color	Emergency + Low emphasis		#DA291C	New
—goa-notification-banner-low-emergency-color-text	color	Emergency + Low emphasis		#A91A10	New
--goa-notification-banner-event-color-bg	background-color	Event	{color.info.default}	{color.info.default}	Unchanged	Legacy token
--goa-notification-banner-event-color-icon	color	Event	{color.greyscale.white}	{color.greyscale.white}	Unchanged	Legacy token
--goa-notification-banner-event-color-text	color	Event	{color.text.light}	{color.text.light}	Unchanged	Legacy token
--goa-notification-banner-gap	gap		{space.m}	{space.m}	Unchanged
--goa-notification-banner-important-color-bg	background-color	Important + High emphasis	{color.warning.default}	#FFB800	Changed
--goa-notification-banner-important-color-icon	color	Important + High emphasis	{color.greyscale.black}	#4D3700	Changed
--goa-notification-banner-important-color-text	color	Important + High emphasis	{color.text.default}	#4D3700	Changed
—goa-notification-banner-low-important-color-bg	background-color	Important + Low emphasis		#FDE3A1	New
—goa-notification-banner-low-important-color-border	border-color	Important + Low emphasis		#FDE3A1	New
—goa-notification-banner-low-important-color-icon	color	Important + Low emphasis		#CC9300	New
—goa-notification-banner-low-important-color-text	color	Important + Low emphasis		#4D3700	New
--goa-notification-banner-information-color-bg	color	Information + High emphasis	{color.info.default}	#0077AD	Changed
--goa-notification-banner-information-color-icon	color	Information + High emphasis	{color.greyscale.white}	{color.greyscale.white}	Unchanged
--goa-notification-banner-information-color-text	color	Information + High emphasis	{color.text.light}	{color.text.light}	Unchanged
—goa-notification-banner-low-information-color-bg	color	Information + Low emphasis		#EBF8FF	New
—goa-notification-banner-low-information-color-icon	color	Information + Low emphasis		#0077AD	New
—goa-notification-banner-low-information-color-text	color	Information + Low emphasis		#0077AD	New
--goa-notification-banner-padding-lr-large-screen	padding	Large screen	{space.3xl}	{space.3xl}	Unchanged
--goa-notification-banner-padding-lr-medium-screen	padding	Medium screen	{space.l}	{space.l}	Unchanged
--goa-notification-banner-padding-lr-small-screen	padding	Small screen	{space.m}	{space.m}	Unchanged
--goa-notification-banner-padding-tb	padding		{space.l}	{space.l}	Unchanged
--goa-notification-banner-size-icon	size		{iconSize.4}	{iconSize.4}	Unchanged
--goa-notification-banner-text-size	font-size		{typography.body.m}	{typography.body.m}	Unchanged
—goa-notification-banner-compact-gap	gap	Compact		{space.s}	New
—goa-notification-banner-compact-padding-tb	padding	Compact		{space.m}	New
—goa-notification-banner-compact-padding-lr	padding	Compact		{space.m} {space.s}	New

Token	Value	Description
—goa-notification-banner-low-emergency-color-bg	#FFF6F6	Low emphasis variant of Emergency banner
—goa-notification-banner-low-emergency-color-border	#F4C8C5	Low emphasis variant of Emergency banner
—goa-notification-banner-low-emergency-color-icon	#DA291C	Low emphasis variant of Emergency banner
—goa-notification-banner-low-emergency-color-text	#A91A10	Low emphasis variant of Emergency banner
—goa-notification-banner-low-important-color-bg	#FDE3A1	Low emphasis variant of Important banner
—goa-notification-banner-low-important-color-border	#FDE3A1	Low emphasis variant of Important banner
—goa-notification-banner-low-important-color-icon	#CC9300	Low emphasis variant of Important banner
—goa-notification-banner-low-important-color-text	#4D3700	Low emphasis variant of Important banner
—goa-notification-banner-low-information-color-bg	#EBF8FF	Low emphasis variant of Information banner
—goa-notification-banner-low-information-color-icon	#0077AD	Low emphasis variant of Information banner
—goa-notification-banner-low-information-color-text	#0077AD	Low emphasis variant of Information banner
—goa-notification-banner-compact-gap	{space.s}	Compact variant
—goa-notification-banner-compact-padding-tb	{space.m}	Compact variant
—goa-notification-banner-compact-padding-lr	{space.m} {space.s}	Compact variant

Token Name	Last Used	Notes
--goa-notification-banner-event-color-text	For event type
--goa-notification-banner-event-color-icon	For event type
--goa-notification-banner-event-color-bg	For event type
--goa-notification-banner-emergency-color-text	For event type

Notification Banner 2.0 Update #2947

Description

Notification banner Component Style & Token Update Spec

1. Props & Variants Overview

2. Style + Token Comparison Table

3. New Tokens to Add

4. Deprecated / No Longer Used Tokens

5. Implementation Notes

6. ✅ Clarified Responses

Current Implementation Files Analyzed

Figma Designs Analyzed

Key Changes Summary

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions