@abgov/design-tokens 2.8.0 → 2.8.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/details-design-tokens.json +1 -1
  2. package/data/component-design-tokens/notification-banner-design-tokens.json +6 -6
  3. package/dist/tokens.css +8 -8
  4. package/dist/tokens.scss +8 -8
  5. package/package.json +1 -1
package/data/component-design-tokens/details-design-tokens.json CHANGED
@@ -46,7 +46,7 @@
46
46
  },
47
47
  "details-focus-border": {
48
48
  "value": {
49
- "width": "{borderWidth.xl}",
49
+ "width": "{borderWidth.l}",
50
50
  "style": "solid",
51
51
  "color": "{color.interactive.focus}"
52
52
  },
package/data/component-design-tokens/notification-banner-design-tokens.json CHANGED
@@ -192,27 +192,27 @@
192
192
  "type": "color"
193
193
  },
194
194
  "notification-banner-information-high-focus-border": {
195
- "value": "0 0 0 3px {color.greyscale.white}",
195
+ "value": "0 0 0 {borderWidth.l} {color.greyscale.white}",
196
196
  "type": "other"
197
197
  },
198
198
  "notification-banner-information-low-focus-border": {
199
- "value": "0 0 0 3px {color.info.dark}",
199
+ "value": "0 0 0 {borderWidth.l} {color.info.dark}",
200
200
  "type": "other"
201
201
  },
202
202
  "notification-banner-important-high-focus-border": {
203
- "value": "0 0 0 3px {color.important.text-dark}",
203
+ "value": "0 0 0 {borderWidth.l} {color.important.text-dark}",
204
204
  "type": "other"
205
205
  },
206
206
  "notification-banner-important-low-focus-border": {
207
- "value": "0 0 0 3px {color.important.text-dark}",
207
+ "value": "0 0 0 {borderWidth.l} {color.important.text-dark}",
208
208
  "type": "other"
209
209
  },
210
210
  "notification-banner-emergency-high-focus-border": {
211
- "value": "0 0 0 3px {color.greyscale.white}",
211
+ "value": "0 0 0 {borderWidth.l} {color.greyscale.white}",
212
212
  "type": "other"
213
213
  },
214
214
  "notification-banner-emergency-low-focus-border": {
215
- "value": "0 0 0 3px {color.emergency.dark}",
215
+ "value": "0 0 0 {borderWidth.l} {color.emergency.dark}",
216
216
  "type": "other"
217
217
  },
218
218
  "notification-banner-information-high-close-bg-hover": {
package/dist/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 06 May 2026 21:29:23 GMT
3
+ * Generated on Tue, 12 May 2026 20:39:31 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -609,12 +609,12 @@
609
609
  --goa-notification-banner-important-high-close-bg-hover: var(--goa-color-important-default);
610
610
  --goa-notification-banner-information-low-close-bg-hover: var(--goa-color-info-border);
611
611
  --goa-notification-banner-information-high-close-bg-hover: var(--goa-color-info-dark);
612
- --goa-notification-banner-emergency-low-focus-border: 0 0 0 3px var(--goa-color-emergency-dark);
613
- --goa-notification-banner-emergency-high-focus-border: 0 0 0 3px var(--goa-color-greyscale-white);
614
- --goa-notification-banner-important-low-focus-border: 0 0 0 3px var(--goa-color-important-text-dark);
615
- --goa-notification-banner-important-high-focus-border: 0 0 0 3px var(--goa-color-important-text-dark);
616
- --goa-notification-banner-information-low-focus-border: 0 0 0 3px var(--goa-color-info-dark);
617
- --goa-notification-banner-information-high-focus-border: 0 0 0 3px var(--goa-color-greyscale-white);
612
+ --goa-notification-banner-emergency-low-focus-border: 0 0 0 var(--goa-border-width-l) var(--goa-color-emergency-dark);
613
+ --goa-notification-banner-emergency-high-focus-border: 0 0 0 var(--goa-border-width-l) var(--goa-color-greyscale-white);
614
+ --goa-notification-banner-important-low-focus-border: 0 0 0 var(--goa-border-width-l) var(--goa-color-important-text-dark);
615
+ --goa-notification-banner-important-high-focus-border: 0 0 0 var(--goa-border-width-l) var(--goa-color-important-text-dark);
616
+ --goa-notification-banner-information-low-focus-border: 0 0 0 var(--goa-border-width-l) var(--goa-color-info-dark);
617
+ --goa-notification-banner-information-high-focus-border: 0 0 0 var(--goa-border-width-l) var(--goa-color-greyscale-white);
618
618
  --goa-notification-banner-emergency-low-color-border: var(--goa-color-emergency-border);
619
619
  --goa-notification-banner-emergency-low-color-icon: var(--goa-color-emergency-dark);
620
620
  --goa-notification-banner-emergency-low-color-text: var(--goa-color-emergency-dark);
@@ -889,7 +889,7 @@
889
889
  --goa-details-padding-left: var(--goa-space-xs);
890
890
  --goa-details-padding-bottom: var(--goa-space-xs);
891
891
  --goa-details-margin-bottom: var(--goa-space-xs);
892
- --goa-details-focus-border: var(--goa-border-width-xl) solid var(--goa-color-interactive-focus);
892
+ --goa-details-focus-border: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
893
893
  --goa-details-content-padding-top: var(--goa-space-s);
894
894
  --goa-details-content-padding-right: var(--goa-space-m);
895
895
  --goa-details-content-padding-bottom: var(--goa-space-s);
package/dist/tokens.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 06 May 2026 21:29:23 GMT
3
+ // Generated on Tue, 12 May 2026 20:39:30 GMT
4
4
 
5
5
  $goa-accordion-color-bg-heading: #ffffff;
6
6
  $goa-accordion-color-filled-bg-heading: #f2f0f0;
@@ -334,7 +334,7 @@ $goa-details-content-padding-bottom: 0.75rem;
334
334
  $goa-details-content-padding-left: 19px;
335
335
  $goa-details-content-padding-right: 1rem;
336
336
  $goa-details-content-padding-top: 0.75rem;
337
- $goa-details-focus-border: 3px solid #006dcc;
337
+ $goa-details-focus-border: 2px solid #006dcc;
338
338
  $goa-details-margin-bottom: 0.5rem;
339
339
  $goa-details-padding-bottom: 0.5rem;
340
340
  $goa-details-padding-left: 0.5rem;
@@ -755,12 +755,12 @@ $goa-notification-banner-emergency-low-color-bg: #fdded9;
755
755
  $goa-notification-banner-emergency-low-color-text: #a91a10;
756
756
  $goa-notification-banner-emergency-low-color-icon: #a91a10;
757
757
  $goa-notification-banner-emergency-low-color-border: #eeaea5;
758
- $goa-notification-banner-information-high-focus-border: 0 0 0 3px #ffffff;
759
- $goa-notification-banner-information-low-focus-border: 0 0 0 3px #004a8f;
760
- $goa-notification-banner-important-high-focus-border: 0 0 0 3px #4d3700;
761
- $goa-notification-banner-important-low-focus-border: 0 0 0 3px #4d3700;
762
- $goa-notification-banner-emergency-high-focus-border: 0 0 0 3px #ffffff;
763
- $goa-notification-banner-emergency-low-focus-border: 0 0 0 3px #a91a10;
758
+ $goa-notification-banner-information-high-focus-border: 0 0 0 2px #ffffff;
759
+ $goa-notification-banner-information-low-focus-border: 0 0 0 2px #004a8f;
760
+ $goa-notification-banner-important-high-focus-border: 0 0 0 2px #4d3700;
761
+ $goa-notification-banner-important-low-focus-border: 0 0 0 2px #4d3700;
762
+ $goa-notification-banner-emergency-high-focus-border: 0 0 0 2px #ffffff;
763
+ $goa-notification-banner-emergency-low-focus-border: 0 0 0 2px #a91a10;
764
764
  $goa-notification-banner-information-high-close-bg-hover: #004a8f;
765
765
  $goa-notification-banner-information-low-close-bg-hover: #cbeaf7;
766
766
  $goa-notification-banner-important-high-close-bg-hover: #f9ce2d;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/design-tokens",
3
- "version": "2.8.0",
3
+ "version": "2.8.1",
4
4
  "main": "./index.js",
5
5
  "repository": {
6
6
  "type": "git",