@abgov/design-tokens 2.3.2 → 2.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/data/component-design-tokens/modal-design-tokens.json +21 -1
  2. package/data/component-design-tokens/notification-banner-design-tokens.json +5 -5
  3. package/dist/tokens.css +9 -5
  4. package/dist/tokens.scss +9 -5
  5. package/package.json +1 -1
package/data/component-design-tokens/modal-design-tokens.json CHANGED
@@ -234,5 +234,25 @@
234
234
  "value": "{color.info.default}",
235
235
  "type": "color",
236
236
  "description": "Event callout icon color"
237
+ },
238
+ "modal-callout-information-close-bg-hover": {
239
+ "value": "{color.info.border}",
240
+ "type": "color",
241
+ "description": "Information callout close button hover background"
242
+ },
243
+ "modal-callout-success-close-bg-hover": {
244
+ "value": "{color.success.border}",
245
+ "type": "color",
246
+ "description": "Success callout close button hover background"
247
+ },
248
+ "modal-callout-important-close-bg-hover": {
249
+ "value": "{color.important.border}",
250
+ "type": "color",
251
+ "description": "Important callout close button hover background"
252
+ },
253
+ "modal-callout-emergency-close-bg-hover": {
254
+ "value": "{color.emergency.border}",
255
+ "type": "color",
256
+ "description": "Emergency callout close button hover background"
237
257
  }
238
- }
258
+ }
package/data/component-design-tokens/notification-banner-design-tokens.json CHANGED
@@ -64,7 +64,7 @@
64
64
  "type": "spacing"
65
65
  },
66
66
  "notification-banner-padding-tb": {
67
- "value": "{space.l}",
67
+ "value": "1.4375rem",
68
68
  "type": "spacing"
69
69
  },
70
70
  "notification-banner-size-icon": {
@@ -92,7 +92,7 @@
92
92
  "type": "spacing"
93
93
  },
94
94
  "notification-banner-padding-tb-compact": {
95
- "value": "{space.m}",
95
+ "value": "0.9375rem",
96
96
  "type": "spacing"
97
97
  },
98
98
  "notification-banner-padding-lr-small-screen-compact": {
@@ -224,11 +224,11 @@
224
224
  "type": "color"
225
225
  },
226
226
  "notification-banner-important-high-close-bg-hover": {
227
- "value": "{color.important.border}",
227
+ "value": "{color.important.default}",
228
228
  "type": "color"
229
229
  },
230
230
  "notification-banner-important-low-close-bg-hover": {
231
- "value": "{color.important.default}",
231
+ "value": "{color.important.border}",
232
232
  "type": "color"
233
233
  },
234
234
  "notification-banner-emergency-high-close-bg-hover": {
@@ -239,4 +239,4 @@
239
239
  "value": "{color.emergency.border}",
240
240
  "type": "color"
241
241
  }
242
- }
242
+ }
package/dist/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 14 Apr 2026 21:48:46 GMT
3
+ * Generated on Wed, 15 Apr 2026 16:45:29 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -256,6 +256,8 @@
256
256
  --goa-radio-border-radius: 50%;
257
257
  --goa-push-drawer-transition-time: 0.25s;
258
258
  --goa-circular-progress-color-background: rgba(255, 255, 255, 0.9);
259
+ --goa-notification-banner-padding-tb-compact: 0.9375rem;
260
+ --goa-notification-banner-padding-tb: 1.4375rem;
259
261
  --goa-modal-content-wrapper-padding: 0;
260
262
  --goa-modal-max-width: 480px;
261
263
  --goa-modal-content-margin-mobile: 0;
@@ -559,8 +561,8 @@
559
561
  --goa-pagination-gap: var(--goa-space-m);
560
562
  --goa-notification-banner-emergency-low-close-bg-hover: var(--goa-color-emergency-border);
561
563
  --goa-notification-banner-emergency-high-close-bg-hover: var(--goa-color-emergency-dark);
562
- --goa-notification-banner-important-low-close-bg-hover: var(--goa-color-important-default);
563
- --goa-notification-banner-important-high-close-bg-hover: var(--goa-color-important-border);
564
+ --goa-notification-banner-important-low-close-bg-hover: var(--goa-color-important-border);
565
+ --goa-notification-banner-important-high-close-bg-hover: var(--goa-color-important-default);
564
566
  --goa-notification-banner-information-low-close-bg-hover: var(--goa-color-info-border);
565
567
  --goa-notification-banner-information-high-close-bg-hover: var(--goa-color-info-dark);
566
568
  --goa-notification-banner-emergency-low-focus-border: 0 0 0 3px var(--goa-color-emergency-dark);
@@ -591,12 +593,10 @@
591
593
  --goa-notification-banner-padding-lr-large-screen-compact: var(--goa-space-2xl);
592
594
  --goa-notification-banner-padding-lr-medium-screen-compact: var(--goa-space-m);
593
595
  --goa-notification-banner-padding-lr-small-screen-compact: var(--goa-space-xs);
594
- --goa-notification-banner-padding-tb-compact: var(--goa-space-m);
595
596
  --goa-notification-banner-gap-compact: var(--goa-space-xs);
596
597
  --goa-notification-banner-custom-color-icon: var(--goa-color-greyscale-white);
597
598
  --goa-notification-banner-custom-color-bg: var(--goa-color-info-default);
598
599
  --goa-notification-banner-size-icon: var(--goa-icon-size-4);
599
- --goa-notification-banner-padding-tb: var(--goa-space-l);
600
600
  --goa-notification-banner-padding-lr-small-screen: var(--goa-space-m);
601
601
  --goa-notification-banner-padding-lr-medium-screen: var(--goa-space-l);
602
602
  --goa-notification-banner-padding-lr-large-screen: var(--goa-space-3xl);
@@ -609,6 +609,10 @@
609
609
  --goa-notification-banner-event-color-bg: var(--goa-color-info-default);
610
610
  --goa-notification-banner-emergency-color-icon: var(--goa-color-greyscale-white);
611
611
  --goa-notification-banner-emergency-color-bg: var(--goa-color-emergency-default);
612
+ --goa-modal-callout-emergency-close-bg-hover: var(--goa-color-emergency-border);
613
+ --goa-modal-callout-important-close-bg-hover: var(--goa-color-important-border);
614
+ --goa-modal-callout-success-close-bg-hover: var(--goa-color-success-border);
615
+ --goa-modal-callout-information-close-bg-hover: var(--goa-color-info-border);
612
616
  --goa-modal-callout-event-icon: var(--goa-color-info-default);
613
617
  --goa-modal-callout-event-border: var(--goa-color-info-border);
614
618
  --goa-modal-callout-event-bg: var(--goa-color-info-light);
package/dist/tokens.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 14 Apr 2026 21:48:46 GMT
3
+ // Generated on Wed, 15 Apr 2026 16:45:29 GMT
4
4
 
5
5
  $goa-accordion-color-bg-heading: #ffffff;
6
6
  $goa-accordion-color-bg-content: #ffffff;
@@ -674,6 +674,10 @@ $goa-modal-callout-emergency-icon: #da291c;
674
674
  $goa-modal-callout-event-bg: #ebf8ff;
675
675
  $goa-modal-callout-event-border: #cbeaf7;
676
676
  $goa-modal-callout-event-icon: #0077ad;
677
+ $goa-modal-callout-information-close-bg-hover: #cbeaf7;
678
+ $goa-modal-callout-success-close-bg-hover: #c4e3d2;
679
+ $goa-modal-callout-important-close-bg-hover: #fde3a1;
680
+ $goa-modal-callout-emergency-close-bg-hover: #eeaea5;
677
681
  $goa-notification-banner-emergency-color-bg: #da291c;
678
682
  $goa-notification-banner-emergency-color-icon: #ffffff;
679
683
  $goa-notification-banner-emergency-color-text: #ffffff;
@@ -690,14 +694,14 @@ $goa-notification-banner-information-color-text: #ffffff;
690
694
  $goa-notification-banner-padding-lr-large-screen: 4rem;
691
695
  $goa-notification-banner-padding-lr-medium-screen: 1.5rem;
692
696
  $goa-notification-banner-padding-lr-small-screen: 1rem;
693
- $goa-notification-banner-padding-tb: 1.5rem;
697
+ $goa-notification-banner-padding-tb: 1.4375rem;
694
698
  $goa-notification-banner-size-icon: 1.5rem;
695
699
  $goa-notification-banner-text-size: 400 1.125rem/1.5rem acumin-variable, helvetica-neue, arial, sans-serif;
696
700
  $goa-notification-banner-custom-color-bg: #0077ad;
697
701
  $goa-notification-banner-custom-color-icon: #ffffff;
698
702
  $goa-notification-banner-custom-color-text: #ffffff;
699
703
  $goa-notification-banner-gap-compact: 0.5rem;
700
- $goa-notification-banner-padding-tb-compact: 1rem;
704
+ $goa-notification-banner-padding-tb-compact: 0.9375rem;
701
705
  $goa-notification-banner-padding-lr-small-screen-compact: 0.5rem;
702
706
  $goa-notification-banner-padding-lr-medium-screen-compact: 1rem;
703
707
  $goa-notification-banner-padding-lr-large-screen-compact: 3rem;
@@ -730,8 +734,8 @@ $goa-notification-banner-emergency-high-focus-border: 0 0 0 3px #ffffff;
730
734
  $goa-notification-banner-emergency-low-focus-border: 0 0 0 3px #a91a10;
731
735
  $goa-notification-banner-information-high-close-bg-hover: #004a8f;
732
736
  $goa-notification-banner-information-low-close-bg-hover: #cbeaf7;
733
- $goa-notification-banner-important-high-close-bg-hover: #fde3a1;
734
- $goa-notification-banner-important-low-close-bg-hover: #f9ce2d;
737
+ $goa-notification-banner-important-high-close-bg-hover: #f9ce2d;
738
+ $goa-notification-banner-important-low-close-bg-hover: #fde3a1;
735
739
  $goa-notification-banner-emergency-high-close-bg-hover: #a91a10;
736
740
  $goa-notification-banner-emergency-low-close-bg-hover: #eeaea5;
737
741
  $goa-pagination-gap: 1rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/design-tokens",
3
- "version": "2.3.2",
3
+ "version": "2.4.1",
4
4
  "main": "./index.js",
5
5
  "repository": {
6
6
  "type": "git",