@abgov/design-tokens 2.1.0 → 2.2.0

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/header-design-tokens.json +8 -8
  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/header-design-tokens.json CHANGED
@@ -100,25 +100,25 @@
100
100
  "value": "13rem",
101
101
  "type": "dimension"
102
102
  },
103
- "app-header-subline-color": {
103
+ "app-header-secondary-text-color": {
104
104
  "value": "{color.text.secondary}",
105
105
  "type": "color",
106
- "description": "Subline text color"
106
+ "description": "Secondary text color"
107
107
  },
108
- "app-header-subline-typography-desktop": {
108
+ "app-header-secondary-text-typography-desktop": {
109
109
  "value": "{typography.body.s}",
110
110
  "type": "other",
111
- "description": "Subline typography on desktop"
111
+ "description": "Secondary text typography on desktop"
112
112
  },
113
- "app-header-subline-typography-mobile": {
113
+ "app-header-secondary-text-typography-mobile": {
114
114
  "value": "{typography.body.xs}",
115
115
  "type": "other",
116
- "description": "Subline typography on mobile"
116
+ "description": "Secondary text typography on mobile"
117
117
  },
118
- "app-header-service-name-subline-gap": {
118
+ "app-header-service-name-secondary-text-gap": {
119
119
  "value": "{space.3xs}",
120
120
  "type": "spacing",
121
- "description": "Vertical gap between service name and subline"
121
+ "description": "Vertical gap between service name and secondary text"
122
122
  },
123
123
  "app-header-service-phase-gap-horizontal": {
124
124
  "value": "{space.m}",
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 Wed, 18 Feb 2026 17:08:45 GMT
3
+ * Generated on Mon, 23 Mar 2026 20:26:33 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;
@@ -352,12 +352,19 @@
352
352
  --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
353
  --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
354
  --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);
355
+ --goa-typography-mobile-heading-2xl-letter-spacing: var(--goa-letter-spacing-mobile-2xl);
355
356
  --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);
357
+ --goa-typography-mobile-heading-xl-letter-spacing: var(--goa-letter-spacing-mobile-xl);
356
358
  --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);
359
+ --goa-typography-mobile-heading-l-letter-spacing: var(--goa-letter-spacing-mobile-l);
357
360
  --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);
361
+ --goa-typography-mobile-heading-m-letter-spacing: var(--goa-letter-spacing-mobile-m);
358
362
  --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);
363
+ --goa-typography-mobile-heading-s-letter-spacing: var(--goa-letter-spacing-mobile-s);
359
364
  --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);
365
+ --goa-typography-mobile-heading-xs-letter-spacing: var(--goa-letter-spacing-mobile-xs);
360
366
  --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);
367
+ --goa-typography-mobile-heading-2xs-letter-spacing: var(--goa-letter-spacing-mobile-2xs);
361
368
  --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
369
  --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
370
  --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 +373,19 @@
366
373
  --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
374
  --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
375
  --goa-typography-body-xs: var(--goa-font-weight-regular) var(--goa-font-size-2)/var(--goa-line-height-1) var(--goa-font-family-sans);
376
+ --goa-typography-heading-2xl-letter-spacing: var(--goa-letter-spacing-2xl);
369
377
  --goa-typography-heading-2xl: var(--goa-font-weight-bold) var(--goa-font-size-10)/var(--goa-line-height-8) var(--goa-font-family-sans);
378
+ --goa-typography-heading-xl-letter-spacing: var(--goa-letter-spacing-xl);
370
379
  --goa-typography-heading-xl: var(--goa-font-weight-bold) var(--goa-font-size-9)/var(--goa-line-height-7) var(--goa-font-family-sans);
380
+ --goa-typography-heading-l-letter-spacing: var(--goa-letter-spacing-l);
371
381
  --goa-typography-heading-l: var(--goa-font-weight-bold) var(--goa-font-size-8)/var(--goa-line-height-6) var(--goa-font-family-sans);
382
+ --goa-typography-heading-m-letter-spacing: var(--goa-letter-spacing-m);
372
383
  --goa-typography-heading-m: var(--goa-font-weight-bold) var(--goa-font-size-7)/var(--goa-line-height-5) var(--goa-font-family-sans);
384
+ --goa-typography-heading-s-letter-spacing: var(--goa-letter-spacing-s);
373
385
  --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);
386
+ --goa-typography-heading-xs-letter-spacing: var(--goa-letter-spacing-xs);
374
387
  --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);
388
+ --goa-typography-heading-2xs-letter-spacing: var(--goa-letter-spacing-2xs);
375
389
  --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
390
  --goa-color-text-disabled: var(--goa-color-greyscale-700);
377
391
  --goa-color-text-light: var(--goa-color-greyscale-white);
@@ -487,6 +501,9 @@
487
501
  --goa-side-menu-color-bg-menu-item-hover: var(--goa-color-greyscale-100);
488
502
  --goa-side-menu-color-bg: var(--goa-color-greyscale-white);
489
503
  --goa-side-menu-border-right: var(--goa-border-width-s) solid var(--goa-color-greyscale-150);
504
+ --goa-radio-reveal-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
505
+ --goa-radio-reveal-padding: var(--goa-space-m) var(--goa-space-l);
506
+ --goa-radio-reveal-margin: var(--goa-space-2xs) 0 0 calc(var(--goa-space-s) - 1px);
490
507
  --goa-radio-size: var(--goa-space-l);
491
508
  --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
509
  --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 +514,7 @@
497
514
  --goa-radio-group-gap-vertical: var(--goa-space-m);
498
515
  --goa-radio-group-gap-horizontal-compact: var(--goa-space-l);
499
516
  --goa-radio-group-gap-horizontal: var(--goa-space-xl);
517
+ --goa-radio-gap-label-compact: var(--goa-space-xs);
500
518
  --goa-radio-gap-label: var(--goa-space-s);
501
519
  --goa-radio-color-bg-error: var(--goa-color-emergency-light);
502
520
  --goa-radio-color-bg-disabled: var(--goa-color-greyscale-150);
@@ -697,7 +715,7 @@
697
715
  --goa-app-header-utilities-gap: var(--goa-space-s);
698
716
  --goa-app-header-service-phase-row-gap: var(--goa-space-xs);
699
717
  --goa-app-header-service-phase-gap-horizontal: var(--goa-space-m);
700
- --goa-app-header-service-name-subline-gap: var(--goa-space-3xs);
718
+ --goa-app-header-service-name-secondary-text-gap: var(--goa-space-3xs);
701
719
  --goa-app-header-service-name-border-focus: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
702
720
  --goa-app-header-typography-service-name-mobile: var(--goa-font-weight-semi-bold) var(--goa-font-size-3)/var(--goa-line-height-1) var(--goa-font-family-sans);
703
721
  --goa-app-header-logo-service-gap-small-screen: var(--goa-space-l);
@@ -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);
@@ -1119,9 +1137,9 @@
1119
1137
  --goa-app-header-nav-text-color: var(--goa-color-text-secondary);
1120
1138
  --goa-app-header-color-text-nav-item-current: var(--goa-color-text-secondary);
1121
1139
  --goa-app-header-color-text-nav-item: var(--goa-color-text-secondary);
1122
- --goa-app-header-subline-typography-mobile: var(--goa-typography-body-xs);
1123
- --goa-app-header-subline-typography-desktop: var(--goa-typography-body-s);
1124
- --goa-app-header-subline-color: var(--goa-color-text-secondary);
1140
+ --goa-app-header-secondary-text-typography-mobile: var(--goa-typography-body-xs);
1141
+ --goa-app-header-secondary-text-typography-desktop: var(--goa-typography-body-s);
1142
+ --goa-app-header-secondary-text-color: var(--goa-color-text-secondary);
1125
1143
  --goa-app-header-typography-service-name: var(--goa-typography-heading-xs);
1126
1144
  --goa-app-header-color-service-name: var(--goa-color-text-default);
1127
1145
  --goa-step-typography-sublabel: var(--goa-typography-body-xs);
package/dist/tokens.scss CHANGED
@@ -1,12 +1,12 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 18 Feb 2026 17:08:45 GMT
3
+ // Generated on Mon, 23 Mar 2026 20:26:33 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;
@@ -496,10 +496,10 @@ $goa-app-header-typography-service-name-mobile: 600 1rem/1.25rem acumin-variable
496
496
  $goa-app-header-service-name-border-focus: 2px solid #006dcc;
497
497
  $goa-app-header-max-width-service-name: 40rem;
498
498
  $goa-app-header-min-width-service-name: 13rem;
499
- $goa-app-header-subline-color: #353535;
500
- $goa-app-header-subline-typography-desktop: 400 1rem/1.375rem acumin-variable, helvetica-neue, arial, sans-serif;
501
- $goa-app-header-subline-typography-mobile: 400 0.875rem/1.25rem acumin-variable, helvetica-neue, arial, sans-serif;
502
- $goa-app-header-service-name-subline-gap: 0.125rem;
499
+ $goa-app-header-secondary-text-color: #353535;
500
+ $goa-app-header-secondary-text-typography-desktop: 400 1rem/1.375rem acumin-variable, helvetica-neue, arial, sans-serif;
501
+ $goa-app-header-secondary-text-typography-mobile: 400 0.875rem/1.25rem acumin-variable, helvetica-neue, arial, sans-serif;
502
+ $goa-app-header-service-name-secondary-text-gap: 0.125rem;
503
503
  $goa-app-header-service-phase-gap-horizontal: 1rem;
504
504
  $goa-app-header-service-phase-gap-vertical: 6px;
505
505
  $goa-app-header-service-phase-row-gap: 0.5rem;
@@ -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.0",
3
+ "version": "2.2.0",
4
4
  "main": "./index.js",
5
5
  "repository": {
6
6
  "type": "git",