@abgov/design-tokens 2.1.1 → 2.2.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 (8) hide show
  1. package/data/component-design-tokens/accordion-design-tokens.json +2 -2
  2. package/data/component-design-tokens/container-design-tokens.json +2 -2
  3. package/data/component-design-tokens/modal-design-tokens.json +4 -4
  4. package/data/component-design-tokens/radio-design-tokens.json +20 -0
  5. package/data/goa-global-design-tokens.json +118 -60
  6. package/dist/tokens.css +43 -25
  7. package/dist/tokens.scss +43 -25
  8. package/package.json +1 -1
package/data/component-design-tokens/accordion-design-tokens.json CHANGED
@@ -13,7 +13,7 @@
13
13
  },
14
14
  "accordion-border": {
15
15
  "value": {
16
- "color": "{color.greyscale.100}",
16
+ "color": "{color.greyscale.200}",
17
17
  "width": "{borderWidth.s}",
18
18
  "style": "solid"
19
19
  },
@@ -21,7 +21,7 @@
21
21
  },
22
22
  "accordion-divider": {
23
23
  "value": {
24
- "color": "{color.greyscale.100}",
24
+ "color": "{color.greyscale.200}",
25
25
  "width": "{borderWidth.s}",
26
26
  "style": "solid"
27
27
  },
package/data/component-design-tokens/container-design-tokens.json CHANGED
@@ -5,7 +5,7 @@
5
5
  },
6
6
  "container-border": {
7
7
  "value": {
8
- "color": "{color.greyscale.150}",
8
+ "color": "{color.greyscale.200}",
9
9
  "width": "{borderWidth.s}",
10
10
  "style": "solid"
11
11
  },
@@ -81,7 +81,7 @@
81
81
  "value": {
82
82
  "width": "{borderWidth.s}",
83
83
  "style": "solid",
84
- "color": "{color.greyscale.150}"
84
+ "color": "{color.greyscale.200}"
85
85
  },
86
86
  "type": "border"
87
87
  },
package/data/component-design-tokens/modal-design-tokens.json CHANGED
@@ -111,7 +111,7 @@
111
111
  "description": "Heading section padding"
112
112
  },
113
113
  "modal-content-padding": {
114
- "value": "{space.l} {space.l} {space.xl} {space.l}",
114
+ "value": "{space.l} 0 {space.xl} 0",
115
115
  "type": "spacing",
116
116
  "description": "Content section padding"
117
117
  },
@@ -126,12 +126,12 @@
126
126
  "description": "Outer content wrapper padding"
127
127
  },
128
128
  "modal-scrollable-padding-desktop": {
129
- "value": "0",
129
+ "value": "{space.l}",
130
130
  "type": "spacing",
131
131
  "description": "Scrollable component horizontal padding for desktop"
132
132
  },
133
133
  "modal-scrollable-padding-mobile": {
134
- "value": "0",
134
+ "value": "{space.m}",
135
135
  "type": "spacing",
136
136
  "description": "Scrollable component horizontal padding for mobile"
137
137
  },
@@ -151,7 +151,7 @@
151
151
  "description": "Callout variant heading padding for mobile (16px all around)"
152
152
  },
153
153
  "modal-content-padding-mobile": {
154
- "value": "{space.l} {space.m} {space.xl} {space.m}",
154
+ "value": "{space.l} 0 {space.xl} 0",
155
155
  "type": "spacing",
156
156
  "description": "Content section padding for mobile (24px top, 16px sides, 32px bottom)"
157
157
  },
package/data/component-design-tokens/radio-design-tokens.json CHANGED
@@ -131,6 +131,10 @@
131
131
  "value": "{space.s}",
132
132
  "type": "spacing"
133
133
  },
134
+ "radio-gap-label-compact": {
135
+ "value": "{space.xs}",
136
+ "type": "spacing"
137
+ },
134
138
  "radio-group-gap-horizontal": {
135
139
  "value": "{space.xl}",
136
140
  "type": "spacing"
@@ -196,5 +200,21 @@
196
200
  "radio-size": {
197
201
  "value": "{space.l}",
198
202
  "type": "sizing"
203
+ },
204
+ "radio-reveal-margin": {
205
+ "value": "{space.2xs} 0 0 calc({space.s} - 1px)",
206
+ "type": "spacing"
207
+ },
208
+ "radio-reveal-padding": {
209
+ "value": "{space.m} {space.l}",
210
+ "type": "spacing"
211
+ },
212
+ "radio-reveal-border": {
213
+ "value": {
214
+ "width": "{borderWidth.s}",
215
+ "style": "solid",
216
+ "color": "{color.greyscale.200}"
217
+ },
218
+ "type": "border"
199
219
  }
200
220
  }
package/data/goa-global-design-tokens.json CHANGED
@@ -879,69 +879,85 @@
879
879
  },
880
880
  "letterSpacing": {
881
881
  "3xs": {
882
- "value": "-0.5",
883
- "type": "letterSpacing"
882
+ "value": "-0.03125rem",
883
+ "type": "letterSpacing",
884
+ "description": "-0.5px"
884
885
  },
885
886
  "2xs": {
886
- "value": "-0.5",
887
- "type": "letterSpacing"
887
+ "value": "-0.03125rem",
888
+ "type": "letterSpacing",
889
+ "description": "-0.5px"
888
890
  },
889
891
  "xs": {
890
- "value": "-0.75",
891
- "type": "letterSpacing"
892
+ "value": "-0.046875rem",
893
+ "type": "letterSpacing",
894
+ "description": "-0.75px"
892
895
  },
893
896
  "s": {
894
- "value": "-0.75",
895
- "type": "letterSpacing"
897
+ "value": "-0.046875rem",
898
+ "type": "letterSpacing",
899
+ "description": "-0.75px"
896
900
  },
897
901
  "m": {
898
- "value": "-1",
899
- "type": "letterSpacing"
902
+ "value": "-0.0625rem",
903
+ "type": "letterSpacing",
904
+ "description": "-1px"
900
905
  },
901
906
  "l": {
902
- "value": "-1.25",
903
- "type": "letterSpacing"
907
+ "value": "-0.078125rem",
908
+ "type": "letterSpacing",
909
+ "description": "-1.25px"
904
910
  },
905
911
  "xl": {
906
- "value": "-1.5",
907
- "type": "letterSpacing"
912
+ "value": "-0.09375rem",
913
+ "type": "letterSpacing",
914
+ "description": "-1.5px"
908
915
  },
909
916
  "2xl": {
910
- "value": "-1.5",
911
- "type": "letterSpacing"
917
+ "value": "-0.09375rem",
918
+ "type": "letterSpacing",
919
+ "description": "-1.5px"
912
920
  },
913
921
  "mobile": {
914
922
  "3xs": {
915
- "value": "-0.5",
916
- "type": "letterSpacing"
923
+ "value": "-0.03125rem",
924
+ "type": "letterSpacing",
925
+ "description": "-0.5px"
917
926
  },
918
927
  "2xs": {
919
- "value": "-0.5",
920
- "type": "letterSpacing"
928
+ "value": "-0.03125rem",
929
+ "type": "letterSpacing",
930
+ "description": "-0.5px"
921
931
  },
922
932
  "xs": {
923
- "value": "-0.75",
924
- "type": "letterSpacing"
933
+ "value": "-0.046875rem",
934
+ "type": "letterSpacing",
935
+ "description": "-0.75px"
925
936
  },
926
937
  "s": {
927
- "value": "-0.75",
928
- "type": "letterSpacing"
938
+ "value": "-0.046875rem",
939
+ "type": "letterSpacing",
940
+ "description": "-0.75px"
929
941
  },
930
942
  "m": {
931
- "value": "-1",
932
- "type": "letterSpacing"
943
+ "value": "-0.0625rem",
944
+ "type": "letterSpacing",
945
+ "description": "-1px"
933
946
  },
934
947
  "l": {
935
- "value": "-1.25",
936
- "type": "letterSpacing"
948
+ "value": "-0.078125rem",
949
+ "type": "letterSpacing",
950
+ "description": "-1.25px"
937
951
  },
938
952
  "xl": {
939
- "value": "-1.5",
940
- "type": "letterSpacing"
953
+ "value": "-0.09375rem",
954
+ "type": "letterSpacing",
955
+ "description": "-1.5px"
941
956
  },
942
957
  "2xl": {
943
- "value": "-1.5",
944
- "type": "letterSpacing"
958
+ "value": "-0.09375rem",
959
+ "type": "letterSpacing",
960
+ "description": "-1.5px"
945
961
  }
946
962
  }
947
963
  },
@@ -952,70 +968,91 @@
952
968
  "fontFamily": "{fontFamily.sans}",
953
969
  "fontWeight": "{fontWeight.semiBold}",
954
970
  "fontSize": "{fontSize.3}",
955
- "lineHeight": "{lineHeight.2}",
956
- "letterSpacing": "{letterSpacing.2xs}"
971
+ "lineHeight": "{lineHeight.2}"
957
972
  },
958
973
  "type": "typography"
959
974
  },
975
+ "2xs-letter-spacing": {
976
+ "value": "{letterSpacing.2xs}",
977
+ "type": "letterSpacing"
978
+ },
960
979
  "xs": {
961
980
  "value": {
962
981
  "fontFamily": "{fontFamily.sans}",
963
982
  "fontWeight": "{fontWeight.semiBold}",
964
983
  "fontSize": "{fontSize.5}",
965
- "lineHeight": "{lineHeight.3}",
966
- "letterSpacing": "{letterSpacing.xs}"
984
+ "lineHeight": "{lineHeight.3}"
967
985
  },
968
986
  "type": "typography"
969
987
  },
988
+ "xs-letter-spacing": {
989
+ "value": "{letterSpacing.xs}",
990
+ "type": "letterSpacing"
991
+ },
970
992
  "s": {
971
993
  "value": {
972
994
  "fontFamily": "{fontFamily.sans}",
973
995
  "fontWeight": "{fontWeight.semiBold}",
974
996
  "fontSize": "{fontSize.6}",
975
- "lineHeight": "{lineHeight.4}",
976
- "letterSpacing": "{letterSpacing.s}"
997
+ "lineHeight": "{lineHeight.4}"
977
998
  },
978
999
  "type": "typography"
979
1000
  },
1001
+ "s-letter-spacing": {
1002
+ "value": "{letterSpacing.s}",
1003
+ "type": "letterSpacing"
1004
+ },
980
1005
  "m": {
981
1006
  "value": {
982
1007
  "fontFamily": "{fontFamily.sans}",
983
1008
  "fontWeight": "{fontWeight.bold}",
984
1009
  "fontSize": "{fontSize.7}",
985
- "lineHeight": "{lineHeight.5}",
986
- "letterSpacing": "{letterSpacing.m}"
1010
+ "lineHeight": "{lineHeight.5}"
987
1011
  },
988
1012
  "type": "typography"
989
1013
  },
1014
+ "m-letter-spacing": {
1015
+ "value": "{letterSpacing.m}",
1016
+ "type": "letterSpacing"
1017
+ },
990
1018
  "l": {
991
1019
  "value": {
992
1020
  "fontFamily": "{fontFamily.sans}",
993
1021
  "fontWeight": "{fontWeight.bold}",
994
1022
  "fontSize": "{fontSize.8}",
995
- "lineHeight": "{lineHeight.6}",
996
- "letterSpacing": "{letterSpacing.l}"
1023
+ "lineHeight": "{lineHeight.6}"
997
1024
  },
998
1025
  "type": "typography"
999
1026
  },
1027
+ "l-letter-spacing": {
1028
+ "value": "{letterSpacing.l}",
1029
+ "type": "letterSpacing"
1030
+ },
1000
1031
  "xl": {
1001
1032
  "value": {
1002
1033
  "fontFamily": "{fontFamily.sans}",
1003
1034
  "fontWeight": "{fontWeight.bold}",
1004
1035
  "fontSize": "{fontSize.9}",
1005
- "lineHeight": "{lineHeight.7}",
1006
- "letterSpacing": "{letterSpacing.xl}"
1036
+ "lineHeight": "{lineHeight.7}"
1007
1037
  },
1008
1038
  "type": "typography"
1009
1039
  },
1040
+ "xl-letter-spacing": {
1041
+ "value": "{letterSpacing.xl}",
1042
+ "type": "letterSpacing"
1043
+ },
1010
1044
  "2xl": {
1011
1045
  "value": {
1012
1046
  "fontFamily": "{fontFamily.sans}",
1013
1047
  "fontWeight": "{fontWeight.bold}",
1014
1048
  "fontSize": "{fontSize.10}",
1015
- "lineHeight": "{lineHeight.8}",
1016
- "letterSpacing": "{letterSpacing.2xl}"
1049
+ "lineHeight": "{lineHeight.8}"
1017
1050
  },
1018
1051
  "type": "typography"
1052
+ },
1053
+ "2xl-letter-spacing": {
1054
+ "value": "{letterSpacing.2xl}",
1055
+ "type": "letterSpacing"
1019
1056
  }
1020
1057
  },
1021
1058
  "body": {
@@ -1092,70 +1129,91 @@
1092
1129
  "fontFamily": "{fontFamily.sans}",
1093
1130
  "fontWeight": "{fontWeight.semiBold}",
1094
1131
  "fontSize": "{fontSize.3}",
1095
- "lineHeight": "{lineHeight.2}",
1096
- "letterSpacing": "{letterSpacing.mobile.2xs}"
1132
+ "lineHeight": "{lineHeight.2}"
1097
1133
  },
1098
1134
  "type": "typography"
1099
1135
  },
1136
+ "2xs-letter-spacing": {
1137
+ "value": "{letterSpacing.mobile.2xs}",
1138
+ "type": "letterSpacing"
1139
+ },
1100
1140
  "xs": {
1101
1141
  "value": {
1102
1142
  "fontFamily": "{fontFamily.sans}",
1103
1143
  "fontWeight": "{fontWeight.semiBold}",
1104
1144
  "fontSize": "{fontSize.5}",
1105
- "lineHeight": "{lineHeight.3}",
1106
- "letterSpacing": "{letterSpacing.mobile.xs}"
1145
+ "lineHeight": "{lineHeight.3}"
1107
1146
  },
1108
1147
  "type": "typography"
1109
1148
  },
1149
+ "xs-letter-spacing": {
1150
+ "value": "{letterSpacing.mobile.xs}",
1151
+ "type": "letterSpacing"
1152
+ },
1110
1153
  "s": {
1111
1154
  "value": {
1112
1155
  "fontFamily": "{fontFamily.sans}",
1113
1156
  "fontWeight": "{fontWeight.semiBold}",
1114
1157
  "fontSize": "{fontSize.6}",
1115
- "lineHeight": "{lineHeight.4}",
1116
- "letterSpacing": "{letterSpacing.mobile.s}"
1158
+ "lineHeight": "{lineHeight.4}"
1117
1159
  },
1118
1160
  "type": "typography"
1119
1161
  },
1162
+ "s-letter-spacing": {
1163
+ "value": "{letterSpacing.mobile.s}",
1164
+ "type": "letterSpacing"
1165
+ },
1120
1166
  "m": {
1121
1167
  "value": {
1122
1168
  "fontFamily": "{fontFamily.sans}",
1123
1169
  "fontWeight": "{fontWeight.bold}",
1124
1170
  "fontSize": "{fontSize.7}",
1125
- "lineHeight": "{lineHeight.5}",
1126
- "letterSpacing": "{letterSpacing.mobile.m}"
1171
+ "lineHeight": "{lineHeight.5}"
1127
1172
  },
1128
1173
  "type": "typography"
1129
1174
  },
1175
+ "m-letter-spacing": {
1176
+ "value": "{letterSpacing.mobile.m}",
1177
+ "type": "letterSpacing"
1178
+ },
1130
1179
  "l": {
1131
1180
  "value": {
1132
1181
  "fontFamily": "{fontFamily.sans}",
1133
1182
  "fontWeight": "{fontWeight.bold}",
1134
1183
  "fontSize": "{fontSize.8}",
1135
- "lineHeight": "{lineHeight.6}",
1136
- "letterSpacing": "{letterSpacing.mobile.l}"
1184
+ "lineHeight": "{lineHeight.6}"
1137
1185
  },
1138
1186
  "type": "typography"
1139
1187
  },
1188
+ "l-letter-spacing": {
1189
+ "value": "{letterSpacing.mobile.l}",
1190
+ "type": "letterSpacing"
1191
+ },
1140
1192
  "xl": {
1141
1193
  "value": {
1142
1194
  "fontFamily": "{fontFamily.sans}",
1143
1195
  "fontWeight": "{fontWeight.bold}",
1144
1196
  "fontSize": "{fontSize.8}",
1145
- "lineHeight": "{lineHeight.6}",
1146
- "letterSpacing": "{letterSpacing.mobile.xl}"
1197
+ "lineHeight": "{lineHeight.6}"
1147
1198
  },
1148
1199
  "type": "typography"
1149
1200
  },
1201
+ "xl-letter-spacing": {
1202
+ "value": "{letterSpacing.mobile.xl}",
1203
+ "type": "letterSpacing"
1204
+ },
1150
1205
  "2xl": {
1151
1206
  "value": {
1152
1207
  "fontFamily": "{fontFamily.sans}",
1153
1208
  "fontWeight": "{fontWeight.bold}",
1154
1209
  "fontSize": "{fontSize.9}",
1155
- "lineHeight": "{lineHeight.7}",
1156
- "letterSpacing": "{letterSpacing.mobile.2xl}"
1210
+ "lineHeight": "{lineHeight.7}"
1157
1211
  },
1158
1212
  "type": "typography"
1213
+ },
1214
+ "2xl-letter-spacing": {
1215
+ "value": "{letterSpacing.mobile.2xl}",
1216
+ "type": "letterSpacing"
1159
1217
  }
1160
1218
  },
1161
1219
  "body": {
package/dist/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 20 Feb 2026 20:43:39 GMT
3
+ * Generated on Mon, 30 Mar 2026 15:39:38 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -25,22 +25,22 @@
25
25
  --goa-translate-default: translateY(0);
26
26
  --goa-input-color-background-error-hover: #f4c8c5;
27
27
  --goa-input-color-border-readonly: #e1dedd;
28
- --goa-letter-spacing-mobile-2xl: -1.5;
29
- --goa-letter-spacing-mobile-xl: -1.5;
30
- --goa-letter-spacing-mobile-l: -1.25;
31
- --goa-letter-spacing-mobile-m: -1;
32
- --goa-letter-spacing-mobile-s: -0.75;
33
- --goa-letter-spacing-mobile-xs: -0.75;
34
- --goa-letter-spacing-mobile-2xs: -0.5;
35
- --goa-letter-spacing-mobile-3xs: -0.5;
36
- --goa-letter-spacing-2xl: -1.5;
37
- --goa-letter-spacing-xl: -1.5;
38
- --goa-letter-spacing-l: -1.25;
39
- --goa-letter-spacing-m: -1;
40
- --goa-letter-spacing-s: -0.75;
41
- --goa-letter-spacing-xs: -0.75;
42
- --goa-letter-spacing-2xs: -0.5;
43
- --goa-letter-spacing-3xs: -0.5;
28
+ --goa-letter-spacing-mobile-2xl: -0.09375rem;
29
+ --goa-letter-spacing-mobile-xl: -0.09375rem;
30
+ --goa-letter-spacing-mobile-l: -0.078125rem;
31
+ --goa-letter-spacing-mobile-m: -0.0625rem;
32
+ --goa-letter-spacing-mobile-s: -0.046875rem;
33
+ --goa-letter-spacing-mobile-xs: -0.046875rem;
34
+ --goa-letter-spacing-mobile-2xs: -0.03125rem;
35
+ --goa-letter-spacing-mobile-3xs: -0.03125rem;
36
+ --goa-letter-spacing-2xl: -0.09375rem;
37
+ --goa-letter-spacing-xl: -0.09375rem;
38
+ --goa-letter-spacing-l: -0.078125rem;
39
+ --goa-letter-spacing-m: -0.0625rem;
40
+ --goa-letter-spacing-s: -0.046875rem;
41
+ --goa-letter-spacing-xs: -0.046875rem;
42
+ --goa-letter-spacing-2xs: -0.03125rem;
43
+ --goa-letter-spacing-3xs: -0.03125rem;
44
44
  --goa-font-weight-bold: 700;
45
45
  --goa-font-weight-semi-bold: 600;
46
46
  --goa-font-weight-medium: 500;
@@ -251,8 +251,6 @@
251
251
  --goa-radio-border-radius: 50%;
252
252
  --goa-push-drawer-transition-time: 0.25s;
253
253
  --goa-circular-progress-color-background: rgba(255, 255, 255, 0.9);
254
- --goa-modal-scrollable-padding-mobile: 0;
255
- --goa-modal-scrollable-padding-desktop: 0;
256
254
  --goa-modal-content-wrapper-padding: 0;
257
255
  --goa-modal-max-width: 480px;
258
256
  --goa-modal-content-margin-mobile: 0;
@@ -352,12 +350,19 @@
352
350
  --goa-typography-mobile-body-m: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-sans);
353
351
  --goa-typography-mobile-body-s: var(--goa-font-weight-regular) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
354
352
  --goa-typography-mobile-body-xs: var(--goa-font-weight-regular) var(--goa-font-size-2)/var(--goa-line-height-1) var(--goa-font-family-sans);
353
+ --goa-typography-mobile-heading-2xl-letter-spacing: var(--goa-letter-spacing-mobile-2xl);
355
354
  --goa-typography-mobile-heading-2xl: var(--goa-font-weight-bold) var(--goa-font-size-9)/var(--goa-line-height-7) var(--goa-font-family-sans);
355
+ --goa-typography-mobile-heading-xl-letter-spacing: var(--goa-letter-spacing-mobile-xl);
356
356
  --goa-typography-mobile-heading-xl: var(--goa-font-weight-bold) var(--goa-font-size-8)/var(--goa-line-height-6) var(--goa-font-family-sans);
357
+ --goa-typography-mobile-heading-l-letter-spacing: var(--goa-letter-spacing-mobile-l);
357
358
  --goa-typography-mobile-heading-l: var(--goa-font-weight-bold) var(--goa-font-size-8)/var(--goa-line-height-6) var(--goa-font-family-sans);
359
+ --goa-typography-mobile-heading-m-letter-spacing: var(--goa-letter-spacing-mobile-m);
358
360
  --goa-typography-mobile-heading-m: var(--goa-font-weight-bold) var(--goa-font-size-7)/var(--goa-line-height-5) var(--goa-font-family-sans);
361
+ --goa-typography-mobile-heading-s-letter-spacing: var(--goa-letter-spacing-mobile-s);
359
362
  --goa-typography-mobile-heading-s: var(--goa-font-weight-semi-bold) var(--goa-font-size-6)/var(--goa-line-height-4) var(--goa-font-family-sans);
363
+ --goa-typography-mobile-heading-xs-letter-spacing: var(--goa-letter-spacing-mobile-xs);
360
364
  --goa-typography-mobile-heading-xs: var(--goa-font-weight-semi-bold) var(--goa-font-size-5)/var(--goa-line-height-3) var(--goa-font-family-sans);
365
+ --goa-typography-mobile-heading-2xs-letter-spacing: var(--goa-letter-spacing-mobile-2xs);
361
366
  --goa-typography-mobile-heading-2xs: var(--goa-font-weight-semi-bold) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
362
367
  --goa-typography-number-l: var(--goa-font-weight-medium) var(--goa-line-height-4)/var(--goa-font-size-7) var(--goa-font-family-number);
363
368
  --goa-typography-number-m: var(--goa-font-weight-medium) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-number);
@@ -366,12 +371,19 @@
366
371
  --goa-typography-body-m: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-sans);
367
372
  --goa-typography-body-s: var(--goa-font-weight-regular) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
368
373
  --goa-typography-body-xs: var(--goa-font-weight-regular) var(--goa-font-size-2)/var(--goa-line-height-1) var(--goa-font-family-sans);
374
+ --goa-typography-heading-2xl-letter-spacing: var(--goa-letter-spacing-2xl);
369
375
  --goa-typography-heading-2xl: var(--goa-font-weight-bold) var(--goa-font-size-10)/var(--goa-line-height-8) var(--goa-font-family-sans);
376
+ --goa-typography-heading-xl-letter-spacing: var(--goa-letter-spacing-xl);
370
377
  --goa-typography-heading-xl: var(--goa-font-weight-bold) var(--goa-font-size-9)/var(--goa-line-height-7) var(--goa-font-family-sans);
378
+ --goa-typography-heading-l-letter-spacing: var(--goa-letter-spacing-l);
371
379
  --goa-typography-heading-l: var(--goa-font-weight-bold) var(--goa-font-size-8)/var(--goa-line-height-6) var(--goa-font-family-sans);
380
+ --goa-typography-heading-m-letter-spacing: var(--goa-letter-spacing-m);
372
381
  --goa-typography-heading-m: var(--goa-font-weight-bold) var(--goa-font-size-7)/var(--goa-line-height-5) var(--goa-font-family-sans);
382
+ --goa-typography-heading-s-letter-spacing: var(--goa-letter-spacing-s);
373
383
  --goa-typography-heading-s: var(--goa-font-weight-semi-bold) var(--goa-font-size-6)/var(--goa-line-height-4) var(--goa-font-family-sans);
384
+ --goa-typography-heading-xs-letter-spacing: var(--goa-letter-spacing-xs);
374
385
  --goa-typography-heading-xs: var(--goa-font-weight-semi-bold) var(--goa-font-size-5)/var(--goa-line-height-3) var(--goa-font-family-sans);
386
+ --goa-typography-heading-2xs-letter-spacing: var(--goa-letter-spacing-2xs);
375
387
  --goa-typography-heading-2xs: var(--goa-font-weight-semi-bold) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
376
388
  --goa-color-text-disabled: var(--goa-color-greyscale-700);
377
389
  --goa-color-text-light: var(--goa-color-greyscale-white);
@@ -487,6 +499,9 @@
487
499
  --goa-side-menu-color-bg-menu-item-hover: var(--goa-color-greyscale-100);
488
500
  --goa-side-menu-color-bg: var(--goa-color-greyscale-white);
489
501
  --goa-side-menu-border-right: var(--goa-border-width-s) solid var(--goa-color-greyscale-150);
502
+ --goa-radio-reveal-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
503
+ --goa-radio-reveal-padding: var(--goa-space-m) var(--goa-space-l);
504
+ --goa-radio-reveal-margin: var(--goa-space-2xs) 0 0 calc(var(--goa-space-s) - 1px);
490
505
  --goa-radio-size: var(--goa-space-l);
491
506
  --goa-radio-label-compact: var(--goa-font-weight-medium) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
492
507
  --goa-radio-label: var(--goa-font-weight-medium) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-sans);
@@ -497,6 +512,7 @@
497
512
  --goa-radio-group-gap-vertical: var(--goa-space-m);
498
513
  --goa-radio-group-gap-horizontal-compact: var(--goa-space-l);
499
514
  --goa-radio-group-gap-horizontal: var(--goa-space-xl);
515
+ --goa-radio-gap-label-compact: var(--goa-space-xs);
500
516
  --goa-radio-gap-label: var(--goa-space-s);
501
517
  --goa-radio-color-bg-error: var(--goa-color-emergency-light);
502
518
  --goa-radio-color-bg-disabled: var(--goa-color-greyscale-150);
@@ -597,12 +613,14 @@
597
613
  --goa-modal-callout-information-border: var(--goa-color-info-border);
598
614
  --goa-modal-callout-information-bg: var(--goa-color-info-light);
599
615
  --goa-modal-actions-padding-mobile: 0 var(--goa-space-m) var(--goa-space-m) var(--goa-space-m);
600
- --goa-modal-content-padding-mobile: var(--goa-space-l) var(--goa-space-m) var(--goa-space-xl) var(--goa-space-m);
616
+ --goa-modal-content-padding-mobile: var(--goa-space-l) 0 var(--goa-space-xl) 0;
601
617
  --goa-modal-callout-heading-padding-mobile: var(--goa-space-m);
602
618
  --goa-modal-heading-padding-mobile: var(--goa-space-m);
603
619
  --goa-modal-callout-heading-padding: var(--goa-space-m) var(--goa-space-l);
620
+ --goa-modal-scrollable-padding-mobile: var(--goa-space-m);
621
+ --goa-modal-scrollable-padding-desktop: var(--goa-space-l);
604
622
  --goa-modal-actions-padding: 0 var(--goa-space-xl) var(--goa-space-xl) var(--goa-space-xl);
605
- --goa-modal-content-padding: var(--goa-space-l) var(--goa-space-l) var(--goa-space-xl) var(--goa-space-l);
623
+ --goa-modal-content-padding: var(--goa-space-l) 0 var(--goa-space-xl) 0;
606
624
  --goa-modal-heading-padding: 20px var(--goa-space-l);
607
625
  --goa-modal-heading-border-bottom: var(--goa-border-width-s) solid var(--goa-color-greyscale-150);
608
626
  --goa-modal-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-150);
@@ -839,7 +857,7 @@
839
857
  --goa-container-info-border: var(--goa-border-width-s) solid var(--goa-color-info-border);
840
858
  --goa-container-info-heading-bg-color: var(--goa-color-info-default);
841
859
  --goa-container-info-bg-color: var(--goa-color-info-background);
842
- --goa-container-non-interactive-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-150);
860
+ --goa-container-non-interactive-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
843
861
  --goa-container-non-interactive-heading-bg-color: var(--goa-color-greyscale-50);
844
862
  --goa-container-non-interactive-bg-color: var(--goa-color-greyscale-50);
845
863
  --goa-container-interactive-border: var(--goa-border-width-s) solid var(--goa-color-brand-default);
@@ -852,7 +870,7 @@
852
870
  --goa-container-padding-compact: var(--goa-space-m);
853
871
  --goa-container-padding: var(--goa-space-xl);
854
872
  --goa-container-shadow: var(--goa-shadow-200);
855
- --goa-container-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-150);
873
+ --goa-container-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
856
874
  --goa-container-border-radius: var(--goa-border-radius-xl);
857
875
  --goa-checkbox-size: var(--goa-space-l);
858
876
  --goa-checkbox-gap-compact: var(--goa-space-xs);
@@ -1032,8 +1050,8 @@
1032
1050
  --goa-accordion-border-radius-focus: var(--goa-border-radius-xl) var(--goa-border-radius-xl) var(--goa-border-radius-xs) var(--goa-border-radius-xs);
1033
1051
  --goa-accordion-border-radius: var(--goa-border-radius-xl);
1034
1052
  --goa-accordion-divider-hover: var(--goa-border-width-s) solid var(--goa-color-greyscale-black);
1035
- --goa-accordion-divider: var(--goa-border-width-s) solid var(--goa-color-greyscale-100);
1036
- --goa-accordion-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-100);
1053
+ --goa-accordion-divider: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
1054
+ --goa-accordion-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
1037
1055
  --goa-accordion-color-bg-content: var(--goa-color-greyscale-white);
1038
1056
  --goa-accordion-color-bg-heading: var(--goa-color-greyscale-white);
1039
1057
  --goa-input-color-text-default: var(--goa-color-text-default);
package/dist/tokens.scss CHANGED
@@ -1,12 +1,12 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 20 Feb 2026 20:43:39 GMT
3
+ // Generated on Mon, 30 Mar 2026 15:39:38 GMT
4
4
 
5
5
  $goa-accordion-color-bg-heading: #ffffff;
6
6
  $goa-accordion-color-bg-content: #ffffff;
7
7
  $goa-accordion-color-heading: #000000;
8
- $goa-accordion-border: 1px solid #f2f0f0;
9
- $goa-accordion-divider: 1px solid #f2f0f0;
8
+ $goa-accordion-border: 1px solid #cdcdcd;
9
+ $goa-accordion-divider: 1px solid #cdcdcd;
10
10
  $goa-accordion-divider-hover: 1px solid #000000;
11
11
  $goa-accordion-border-radius: 0.75rem;
12
12
  $goa-accordion-border-radius-focus: 0.75rem 0.75rem 0.25rem 0.25rem;
@@ -240,7 +240,7 @@ $goa-checkbox-label-font-size: 400 1.125rem/1.5rem acumin-variable, helvetica-ne
240
240
  $goa-checkbox-label-font-size-compact: 400 1rem/1.375rem acumin-variable, helvetica-neue, arial, sans-serif;
241
241
  $goa-checkbox-size: 1.5rem;
242
242
  $goa-container-border-radius: 0.75rem;
243
- $goa-container-border: 1px solid #e9e9e9;
243
+ $goa-container-border: 1px solid #cdcdcd;
244
244
  $goa-container-shadow: 0px 3px 1px -1px #1a1a1a12;
245
245
  $goa-container-padding: 2rem;
246
246
  $goa-container-padding-compact: 1rem;
@@ -256,7 +256,7 @@ $goa-container-interactive-border: 1px solid #0081a2;
256
256
  $goa-container-non-interactive-bg-color: #f8f8f8;
257
257
  $goa-container-non-interactive-heading-bg-color: #f8f8f8;
258
258
  $goa-container-non-interactive-heading-text-color: #000000;
259
- $goa-container-non-interactive-border: 1px solid #e9e9e9;
259
+ $goa-container-non-interactive-border: 1px solid #cdcdcd;
260
260
  $goa-container-info-bg-color: #f4fdff;
261
261
  $goa-container-info-heading-bg-color: #0077ad;
262
262
  $goa-container-info-heading-text-color: #ffffff;
@@ -648,15 +648,15 @@ $goa-modal-content-margin-mobile: 0;
648
648
  $goa-modal-max-width: 480px;
649
649
  $goa-modal-heading-border-bottom: 1px solid #e9e9e9;
650
650
  $goa-modal-heading-padding: 20px 1.5rem;
651
- $goa-modal-content-padding: 1.5rem 1.5rem 2rem 1.5rem;
651
+ $goa-modal-content-padding: 1.5rem 0 2rem 0;
652
652
  $goa-modal-actions-padding: 0 2rem 2rem 2rem;
653
653
  $goa-modal-content-wrapper-padding: 0;
654
- $goa-modal-scrollable-padding-desktop: 0;
655
- $goa-modal-scrollable-padding-mobile: 0;
654
+ $goa-modal-scrollable-padding-desktop: 1.5rem;
655
+ $goa-modal-scrollable-padding-mobile: 1rem;
656
656
  $goa-modal-callout-heading-padding: 1rem 1.5rem;
657
657
  $goa-modal-heading-padding-mobile: 1rem;
658
658
  $goa-modal-callout-heading-padding-mobile: 1rem;
659
- $goa-modal-content-padding-mobile: 1.5rem 1rem 2rem 1rem;
659
+ $goa-modal-content-padding-mobile: 1.5rem 0 2rem 0;
660
660
  $goa-modal-actions-padding-mobile: 0 1rem 1rem 1rem;
661
661
  $goa-modal-callout-information-bg: #ebf8ff;
662
662
  $goa-modal-callout-information-border: #cbeaf7;
@@ -775,6 +775,7 @@ $goa-radio-color-bg-error: #fdded9;
775
775
  $goa-radio-color-bg-error-hover: #f4c8c5;
776
776
  $goa-radio-description: 400 0.875rem/1.25rem acumin-variable, helvetica-neue, arial, sans-serif;
777
777
  $goa-radio-gap-label: 0.75rem;
778
+ $goa-radio-gap-label-compact: 0.5rem;
778
779
  $goa-radio-group-gap-horizontal: 2rem;
779
780
  $goa-radio-group-gap-horizontal-compact: 1.5rem;
780
781
  $goa-radio-group-gap-vertical: 1rem;
@@ -789,6 +790,9 @@ $goa-radio-label: 500 1.125rem/1.5rem acumin-variable, helvetica-neue, arial, sa
789
790
  $goa-radio-label-color-disabled: #bab7b7;
790
791
  $goa-radio-label-compact: 500 1rem/1.375rem acumin-variable, helvetica-neue, arial, sans-serif;
791
792
  $goa-radio-size: 1.5rem;
793
+ $goa-radio-reveal-margin: 0.25rem 0 0 calc(0.75rem - 1px);
794
+ $goa-radio-reveal-padding: 1rem 1.5rem;
795
+ $goa-radio-reveal-border: 1px solid #cdcdcd;
792
796
  $goa-scrollable-padding-desktop: 2rem;
793
797
  $goa-scrollable-padding-mobile: 1.5rem;
794
798
  $goa-side-menu-border-right: 1px solid #e9e9e9;
@@ -1139,29 +1143,36 @@ $goa-font-weight-regular: 400;
1139
1143
  $goa-font-weight-medium: 500;
1140
1144
  $goa-font-weight-semi-bold: 600;
1141
1145
  $goa-font-weight-bold: 700;
1142
- $goa-letter-spacing-3xs: -0.5;
1143
- $goa-letter-spacing-2xs: -0.5;
1144
- $goa-letter-spacing-xs: -0.75;
1145
- $goa-letter-spacing-s: -0.75;
1146
- $goa-letter-spacing-m: -1;
1147
- $goa-letter-spacing-l: -1.25;
1148
- $goa-letter-spacing-xl: -1.5;
1149
- $goa-letter-spacing-2xl: -1.5;
1150
- $goa-letter-spacing-mobile-3xs: -0.5;
1151
- $goa-letter-spacing-mobile-2xs: -0.5;
1152
- $goa-letter-spacing-mobile-xs: -0.75;
1153
- $goa-letter-spacing-mobile-s: -0.75;
1154
- $goa-letter-spacing-mobile-m: -1;
1155
- $goa-letter-spacing-mobile-l: -1.25;
1156
- $goa-letter-spacing-mobile-xl: -1.5;
1157
- $goa-letter-spacing-mobile-2xl: -1.5;
1146
+ $goa-letter-spacing-3xs: -0.03125rem;
1147
+ $goa-letter-spacing-2xs: -0.03125rem;
1148
+ $goa-letter-spacing-xs: -0.046875rem;
1149
+ $goa-letter-spacing-s: -0.046875rem;
1150
+ $goa-letter-spacing-m: -0.0625rem;
1151
+ $goa-letter-spacing-l: -0.078125rem;
1152
+ $goa-letter-spacing-xl: -0.09375rem;
1153
+ $goa-letter-spacing-2xl: -0.09375rem;
1154
+ $goa-letter-spacing-mobile-3xs: -0.03125rem;
1155
+ $goa-letter-spacing-mobile-2xs: -0.03125rem;
1156
+ $goa-letter-spacing-mobile-xs: -0.046875rem;
1157
+ $goa-letter-spacing-mobile-s: -0.046875rem;
1158
+ $goa-letter-spacing-mobile-m: -0.0625rem;
1159
+ $goa-letter-spacing-mobile-l: -0.078125rem;
1160
+ $goa-letter-spacing-mobile-xl: -0.09375rem;
1161
+ $goa-letter-spacing-mobile-2xl: -0.09375rem;
1158
1162
  $goa-typography-heading-2xs: 600 1rem/1.375rem acumin-variable, helvetica-neue, arial, sans-serif;
1163
+ $goa-typography-heading-2xs-letter-spacing: -0.03125rem;
1159
1164
  $goa-typography-heading-xs: 600 1.25rem/1.5rem acumin-variable, helvetica-neue, arial, sans-serif;
1165
+ $goa-typography-heading-xs-letter-spacing: -0.046875rem;
1160
1166
  $goa-typography-heading-s: 600 1.5rem/1.75rem acumin-variable, helvetica-neue, arial, sans-serif;
1167
+ $goa-typography-heading-s-letter-spacing: -0.046875rem;
1161
1168
  $goa-typography-heading-m: 700 1.75rem/2.25rem acumin-variable, helvetica-neue, arial, sans-serif;
1169
+ $goa-typography-heading-m-letter-spacing: -0.0625rem;
1162
1170
  $goa-typography-heading-l: 700 2rem/2.5rem acumin-variable, helvetica-neue, arial, sans-serif;
1171
+ $goa-typography-heading-l-letter-spacing: -0.078125rem;
1163
1172
  $goa-typography-heading-xl: 700 2.5rem/3rem acumin-variable, helvetica-neue, arial, sans-serif;
1173
+ $goa-typography-heading-xl-letter-spacing: -0.09375rem;
1164
1174
  $goa-typography-heading-2xl: 700 3rem/3.5rem acumin-variable, helvetica-neue, arial, sans-serif;
1175
+ $goa-typography-heading-2xl-letter-spacing: -0.09375rem;
1165
1176
  $goa-typography-body-xs: 400 0.875rem/1.25rem acumin-variable, helvetica-neue, arial, sans-serif;
1166
1177
  $goa-typography-body-s: 400 1rem/1.375rem acumin-variable, helvetica-neue, arial, sans-serif;
1167
1178
  $goa-typography-body-m: 400 1.125rem/1.5rem acumin-variable, helvetica-neue, arial, sans-serif;
@@ -1170,12 +1181,19 @@ $goa-typography-number-s: 500 1rem/1.375rem roboto-mono, monospace;
1170
1181
  $goa-typography-number-m: 500 1.125rem/1.5rem roboto-mono, monospace;
1171
1182
  $goa-typography-number-l: 500 1.75rem/1.75rem roboto-mono, monospace;
1172
1183
  $goa-typography-mobile-heading-2xs: 600 1rem/1.375rem acumin-variable, helvetica-neue, arial, sans-serif;
1184
+ $goa-typography-mobile-heading-2xs-letter-spacing: -0.03125rem;
1173
1185
  $goa-typography-mobile-heading-xs: 600 1.25rem/1.5rem acumin-variable, helvetica-neue, arial, sans-serif;
1186
+ $goa-typography-mobile-heading-xs-letter-spacing: -0.046875rem;
1174
1187
  $goa-typography-mobile-heading-s: 600 1.5rem/1.75rem acumin-variable, helvetica-neue, arial, sans-serif;
1188
+ $goa-typography-mobile-heading-s-letter-spacing: -0.046875rem;
1175
1189
  $goa-typography-mobile-heading-m: 700 1.75rem/2.25rem acumin-variable, helvetica-neue, arial, sans-serif;
1190
+ $goa-typography-mobile-heading-m-letter-spacing: -0.0625rem;
1176
1191
  $goa-typography-mobile-heading-l: 700 2rem/2.5rem acumin-variable, helvetica-neue, arial, sans-serif;
1192
+ $goa-typography-mobile-heading-l-letter-spacing: -0.078125rem;
1177
1193
  $goa-typography-mobile-heading-xl: 700 2rem/2.5rem acumin-variable, helvetica-neue, arial, sans-serif;
1194
+ $goa-typography-mobile-heading-xl-letter-spacing: -0.09375rem;
1178
1195
  $goa-typography-mobile-heading-2xl: 700 2.5rem/3rem acumin-variable, helvetica-neue, arial, sans-serif;
1196
+ $goa-typography-mobile-heading-2xl-letter-spacing: -0.09375rem;
1179
1197
  $goa-typography-mobile-body-xs: 400 0.875rem/1.25rem acumin-variable, helvetica-neue, arial, sans-serif;
1180
1198
  $goa-typography-mobile-body-s: 400 1rem/1.375rem acumin-variable, helvetica-neue, arial, sans-serif;
1181
1199
  $goa-typography-mobile-body-m: 400 1.125rem/1.5rem acumin-variable, helvetica-neue, arial, sans-serif;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/design-tokens",
3
- "version": "2.1.1",
3
+ "version": "2.2.1",
4
4
  "main": "./index.js",
5
5
  "repository": {
6
6
  "type": "git",