@autoguru/overdrive 4.60.0 → 4.62.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 (44) hide show
  1. package/dist/components/Alert/Alert.js +1 -1
  2. package/dist/components/Box/useBox/useBox.d.ts +1 -1
  3. package/dist/components/Button/Button.d.ts +1 -1
  4. package/dist/components/Button/Button.d.ts.map +1 -1
  5. package/dist/components/Button/Button.js +2 -0
  6. package/dist/components/DateInput/DateInput.js +1 -1
  7. package/dist/components/EditableText/EditableText.css.js +1 -1
  8. package/dist/components/StandardModal/StandardModal.js +1 -1
  9. package/dist/components/Tooltip/Tooltip.d.ts +5 -5
  10. package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
  11. package/dist/components/Tooltip/Tooltip.js +20 -11
  12. package/dist/components/Tooltip/index.d.ts +1 -1
  13. package/dist/components/Tooltip/index.d.ts.map +1 -1
  14. package/dist/components/Tooltip/useTooltip/useTooltip.d.ts +18 -7
  15. package/dist/components/Tooltip/useTooltip/useTooltip.d.ts.map +1 -1
  16. package/dist/components/Tooltip/useTooltip/useTooltip.js +11 -9
  17. package/dist/components/private/InputBase/InputState.css.js +1 -1
  18. package/dist/components/private/InputBase/NotchedBase.css.js +1 -1
  19. package/dist/components/private/InputBase/withEnhancedInput.css.js +1 -1
  20. package/dist/styles/sprinkles.css.d.ts +12 -12
  21. package/dist/styles/sprinkles.css.d.ts.map +1 -1
  22. package/dist/styles/sprinkles.css.js +10 -8
  23. package/dist/themes/base/index.d.ts +118 -18
  24. package/dist/themes/base/index.d.ts.map +1 -1
  25. package/dist/themes/base/space.spec.js +3 -3
  26. package/dist/themes/base/tokens.d.ts +59 -9
  27. package/dist/themes/base/tokens.d.ts.map +1 -1
  28. package/dist/themes/base/tokens.js +96 -13
  29. package/dist/themes/flat_red/index.d.ts +118 -18
  30. package/dist/themes/flat_red/index.d.ts.map +1 -1
  31. package/dist/themes/flat_red/tokens.d.ts +59 -9
  32. package/dist/themes/flat_red/tokens.d.ts.map +1 -1
  33. package/dist/themes/index.d.ts +118 -18
  34. package/dist/themes/index.d.ts.map +1 -1
  35. package/dist/themes/makeTheme.d.ts +59 -9
  36. package/dist/themes/makeTheme.d.ts.map +1 -1
  37. package/dist/themes/neutral/index.d.ts +118 -18
  38. package/dist/themes/neutral/index.d.ts.map +1 -1
  39. package/dist/themes/neutral/tokens.d.ts +59 -9
  40. package/dist/themes/neutral/tokens.d.ts.map +1 -1
  41. package/dist/themes/theme.css.d.ts +59 -9
  42. package/dist/themes/theme.css.d.ts.map +1 -1
  43. package/dist/themes/theme.css.js +63 -18
  44. package/package.json +1 -1
package/dist/themes/base/index.d.ts CHANGED
@@ -123,14 +123,16 @@ declare const _default: {
123
123
  primary: `var(--${string})`;
124
124
  secondary: `var(--${string})`;
125
125
  reverse: `var(--${string})`;
126
- tertiaryInactive: `var(--${string})`;
127
- tertiaryInactiveLight: `var(--${string})`;
126
+ tertiary: `var(--${string})`;
127
+ placeholder: `var(--${string})`;
128
128
  };
129
129
  background: {
130
130
  default: `var(--${string})`;
131
131
  reverse: `var(--${string})`;
132
132
  inactive: `var(--${string})`;
133
133
  emphasisInactive: `var(--${string})`;
134
+ emphasisLight: `var(--${string})`;
135
+ modal: `var(--${string})`;
134
136
  };
135
137
  border: {
136
138
  default: `var(--${string})`;
@@ -138,46 +140,94 @@ declare const _default: {
138
140
  selected: `var(--${string})`;
139
141
  strong: `var(--${string})`;
140
142
  };
143
+ focus: {
144
+ ring: `var(--${string})`;
145
+ };
141
146
  info: {
142
147
  text: `var(--${string})`;
143
148
  foreground: `var(--${string})`;
144
- background: `var(--${string})`;
149
+ backgroundStrong: `var(--${string})`;
150
+ backgroundSubtle: `var(--${string})`;
145
151
  };
146
152
  success: {
147
153
  text: `var(--${string})`;
148
154
  foreground: `var(--${string})`;
149
- backgroundDark: `var(--${string})`;
150
- backgroundLight: `var(--${string})`;
155
+ backgroundStrong: `var(--${string})`;
156
+ backgroundSubtle: `var(--${string})`;
151
157
  };
152
158
  warning: {
153
159
  text: `var(--${string})`;
154
160
  foreground: `var(--${string})`;
155
- backgroundDark: `var(--${string})`;
156
- backgroundLight: `var(--${string})`;
161
+ backgroundStrong: `var(--${string})`;
162
+ backgroundSubtle: `var(--${string})`;
157
163
  };
158
164
  alert: {
159
165
  text: `var(--${string})`;
160
166
  foreground: `var(--${string})`;
161
- background: `var(--${string})`;
167
+ backgroundStrong: `var(--${string})`;
168
+ backgroundSubtle: `var(--${string})`;
162
169
  };
163
170
  button: {
164
171
  primary: {
165
172
  solid: {
166
173
  default: `var(--${string})`;
167
174
  hover: `var(--${string})`;
168
- pressed: `var(--${string})`;
169
175
  border: `var(--${string})`;
176
+ pressed: `var(--${string})`;
177
+ text: `var(--${string})`;
170
178
  };
171
179
  outlined: {
172
180
  border: `var(--${string})`;
173
181
  text: `var(--${string})`;
182
+ hover: `var(--${string})`;
183
+ pressed: `var(--${string})`;
174
184
  };
175
185
  };
176
186
  critical: {
177
187
  solid: {
178
188
  default: `var(--${string})`;
189
+ hover: `var(--${string})`;
190
+ border: `var(--${string})`;
191
+ pressed: `var(--${string})`;
192
+ text: `var(--${string})`;
193
+ };
194
+ outlined: {
195
+ border: `var(--${string})`;
196
+ text: `var(--${string})`;
197
+ hover: `var(--${string})`;
198
+ pressed: `var(--${string})`;
179
199
  };
180
200
  };
201
+ secondary: {
202
+ border: `var(--${string})`;
203
+ hover: `var(--${string})`;
204
+ pressed: `var(--${string})`;
205
+ text: `var(--${string})`;
206
+ };
207
+ disabled: {
208
+ fill: `var(--${string})`;
209
+ text: `var(--${string})`;
210
+ };
211
+ };
212
+ link: {
213
+ primary: `var(--${string})`;
214
+ secondary: `var(--${string})`;
215
+ hover: `var(--${string})`;
216
+ pressed: `var(--${string})`;
217
+ critical: `var(--${string})`;
218
+ criticalHover: `var(--${string})`;
219
+ criticalPressed: `var(--${string})`;
220
+ };
221
+ illustration: {
222
+ brightSide: `var(--${string})`;
223
+ darkSide: `var(--${string})`;
224
+ lightFill: `var(--${string})`;
225
+ mainFill: `var(--${string})`;
226
+ outline: `var(--${string})`;
227
+ shadow: `var(--${string})`;
228
+ white: `var(--${string})`;
229
+ yellowDarkSide: `var(--${string})`;
230
+ yellowMainFill: `var(--${string})`;
181
231
  };
182
232
  };
183
233
  colours: {
@@ -601,14 +651,16 @@ declare const _default: {
601
651
  primary: string;
602
652
  secondary: string;
603
653
  reverse: string;
604
- tertiaryInactive: string;
605
- tertiaryInactiveLight: string;
654
+ tertiary: string;
655
+ placeholder: string;
606
656
  };
607
657
  background: {
608
658
  default: string;
609
659
  reverse: string;
610
660
  inactive: string;
611
661
  emphasisInactive: string;
662
+ emphasisLight: string;
663
+ modal: string;
612
664
  };
613
665
  border: {
614
666
  default: string;
@@ -616,46 +668,94 @@ declare const _default: {
616
668
  selected: string;
617
669
  strong: string;
618
670
  };
671
+ focus: {
672
+ ring: string;
673
+ };
619
674
  info: {
620
675
  text: string;
621
676
  foreground: string;
622
- background: string;
677
+ backgroundStrong: string;
678
+ backgroundSubtle: string;
623
679
  };
624
680
  success: {
625
681
  text: string;
626
682
  foreground: string;
627
- backgroundDark: string;
628
- backgroundLight: string;
683
+ backgroundStrong: string;
684
+ backgroundSubtle: string;
629
685
  };
630
686
  warning: {
631
687
  text: string;
632
688
  foreground: string;
633
- backgroundDark: string;
634
- backgroundLight: string;
689
+ backgroundStrong: string;
690
+ backgroundSubtle: string;
635
691
  };
636
692
  alert: {
637
693
  text: string;
638
694
  foreground: string;
639
- background: string;
695
+ backgroundStrong: string;
696
+ backgroundSubtle: string;
640
697
  };
641
698
  button: {
642
699
  primary: {
643
700
  solid: {
644
701
  default: string;
645
702
  hover: string;
646
- pressed: string;
647
703
  border: string;
704
+ pressed: string;
705
+ text: string;
648
706
  };
649
707
  outlined: {
650
708
  border: string;
651
709
  text: string;
710
+ hover: string;
711
+ pressed: string;
652
712
  };
653
713
  };
654
714
  critical: {
655
715
  solid: {
656
716
  default: string;
717
+ hover: string;
718
+ border: string;
719
+ pressed: string;
720
+ text: string;
721
+ };
722
+ outlined: {
723
+ border: string;
724
+ text: string;
725
+ hover: string;
726
+ pressed: string;
657
727
  };
658
728
  };
729
+ secondary: {
730
+ border: string;
731
+ hover: string;
732
+ pressed: string;
733
+ text: string;
734
+ };
735
+ disabled: {
736
+ fill: string;
737
+ text: string;
738
+ };
739
+ };
740
+ link: {
741
+ primary: string;
742
+ secondary: string;
743
+ hover: string;
744
+ pressed: string;
745
+ critical: string;
746
+ criticalHover: string;
747
+ criticalPressed: string;
748
+ };
749
+ illustration: {
750
+ brightSide: string;
751
+ darkSide: string;
752
+ lightFill: string;
753
+ mainFill: string;
754
+ outline: string;
755
+ shadow: string;
756
+ white: string;
757
+ yellowDarkSide: string;
758
+ yellowMainFill: string;
659
759
  };
660
760
  };
661
761
  colours: {
package/dist/themes/base/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}
package/dist/themes/base/space.spec.js CHANGED
@@ -10,7 +10,7 @@ import { tokens as baseTokens } from "./tokens.js";
10
10
  */
11
11
  const EXPECTED_SPACE = {
12
12
  none: '0px',
13
- '0': '0px',
13
+ '0': '2px',
14
14
  '1': '4px',
15
15
  '2': '8px',
16
16
  '3': '12px',
@@ -28,8 +28,8 @@ describe('space token ladder', () => {
28
28
  it('base theme maps every key to its exact DS-2026 pixel value', () => {
29
29
  expect(baseTokens.space).toStrictEqual(EXPECTED_SPACE);
30
30
  });
31
- it('`0` and `none` both resolve to 0px (no 2px footgun)', () => {
32
- expect(baseTokens.space['0']).toBe('0px');
31
+ it('`0` is the 2px smallest step; `none` is true zero (DS-2026)', () => {
32
+ expect(baseTokens.space['0']).toBe('2px');
33
33
  expect(baseTokens.space.none).toBe('0px');
34
34
  });
35
35
  it('neutral theme inherits the base ladder unchanged via deepmerge', () => {
package/dist/themes/base/tokens.d.ts CHANGED
@@ -134,14 +134,16 @@ export declare const tokens: {
134
134
  primary: string;
135
135
  secondary: string;
136
136
  reverse: string;
137
- tertiaryInactive: string;
138
- tertiaryInactiveLight: string;
137
+ tertiary: string;
138
+ placeholder: string;
139
139
  };
140
140
  background: {
141
141
  default: string;
142
142
  reverse: string;
143
143
  inactive: string;
144
144
  emphasisInactive: string;
145
+ emphasisLight: string;
146
+ modal: string;
145
147
  };
146
148
  border: {
147
149
  default: string;
@@ -149,46 +151,94 @@ export declare const tokens: {
149
151
  selected: string;
150
152
  strong: string;
151
153
  };
154
+ focus: {
155
+ ring: string;
156
+ };
152
157
  info: {
153
158
  text: string;
154
159
  foreground: string;
155
- background: string;
160
+ backgroundStrong: string;
161
+ backgroundSubtle: string;
156
162
  };
157
163
  success: {
158
164
  text: string;
159
165
  foreground: string;
160
- backgroundDark: string;
161
- backgroundLight: string;
166
+ backgroundStrong: string;
167
+ backgroundSubtle: string;
162
168
  };
163
169
  warning: {
164
170
  text: string;
165
171
  foreground: string;
166
- backgroundDark: string;
167
- backgroundLight: string;
172
+ backgroundStrong: string;
173
+ backgroundSubtle: string;
168
174
  };
169
175
  alert: {
170
176
  text: string;
171
177
  foreground: string;
172
- background: string;
178
+ backgroundStrong: string;
179
+ backgroundSubtle: string;
173
180
  };
174
181
  button: {
175
182
  primary: {
176
183
  solid: {
177
184
  default: string;
178
185
  hover: string;
179
- pressed: string;
180
186
  border: string;
187
+ pressed: string;
188
+ text: string;
181
189
  };
182
190
  outlined: {
183
191
  border: string;
184
192
  text: string;
193
+ hover: string;
194
+ pressed: string;
185
195
  };
186
196
  };
187
197
  critical: {
188
198
  solid: {
189
199
  default: string;
200
+ hover: string;
201
+ border: string;
202
+ pressed: string;
203
+ text: string;
204
+ };
205
+ outlined: {
206
+ border: string;
207
+ text: string;
208
+ hover: string;
209
+ pressed: string;
190
210
  };
191
211
  };
212
+ secondary: {
213
+ border: string;
214
+ hover: string;
215
+ pressed: string;
216
+ text: string;
217
+ };
218
+ disabled: {
219
+ fill: string;
220
+ text: string;
221
+ };
222
+ };
223
+ link: {
224
+ primary: string;
225
+ secondary: string;
226
+ hover: string;
227
+ pressed: string;
228
+ critical: string;
229
+ criticalHover: string;
230
+ criticalPressed: string;
231
+ };
232
+ illustration: {
233
+ brightSide: string;
234
+ darkSide: string;
235
+ lightFill: string;
236
+ mainFill: string;
237
+ outline: string;
238
+ shadow: string;
239
+ white: string;
240
+ yellowDarkSide: string;
241
+ yellowMainFill: string;
192
242
  };
193
243
  };
194
244
  colours: {
package/dist/themes/base/tokens.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/tokens.ts"],"names":[],"mappings":"AASA;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4BjB;;;;;;;;;;WAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwZkB,CAAC"}
1
+ {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/tokens.ts"],"names":[],"mappings":"AASA;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4BjB;;;;;;;;;;WAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ckB,CAAC"}
package/dist/themes/base/tokens.js CHANGED
@@ -19,7 +19,8 @@ export const tokens = {
19
19
  medium: '940px'
20
20
  },
21
21
  space: {
22
- '0': '0px',
22
+ '0': '2px',
23
+ // DS-2026: smallest step is 2px (use `none` for true zero)
23
24
  '1': '4px',
24
25
  '2': '8px',
25
26
  '3': '12px',
@@ -143,9 +144,9 @@ export const tokens = {
143
144
  // #484c5f
144
145
  reverse: colourMap.white,
145
146
  // #ffffff
146
- tertiaryInactive: colourMap.gray['400'],
147
+ tertiary: colourMap.gray['400'],
147
148
  // #8f95a1
148
- tertiaryInactiveLight: colourMap.gray['300'] // #d4d9dd
149
+ placeholder: colourMap.gray['300'] // #d4d9dd
149
150
  },
150
151
  background: {
151
152
  default: colourMap.white,
@@ -154,7 +155,11 @@ export const tokens = {
154
155
  // #212338
155
156
  inactive: colourMap.gray['300'],
156
157
  // #d4d9dd
157
- emphasisInactive: colourMap.gray['200'] // #eef0f2
158
+ emphasisInactive: colourMap.gray['200'],
159
+ // #eef0f2
160
+ emphasisLight: colourMap.gray['100'],
161
+ // #fafbfc
162
+ modal: '#21233840' // gray-900 @ 25% (Figma background/modal)
158
163
  },
159
164
  border: {
160
165
  default: colourMap.gray['300'],
@@ -165,37 +170,44 @@ export const tokens = {
165
170
  // #5c6172
166
171
  strong: colourMap.gray['900'] // #212338
167
172
  },
173
+ focus: {
174
+ ring: colourMap.green['600'] // #01c68c
175
+ },
168
176
  info: {
169
177
  text: colourMap.blue['900'],
170
178
  // #0d47a1
171
179
  foreground: colourMap.blue['600'],
172
180
  // #0d54e5
173
- background: '#e1edfe' // Figma info surface — NOT blue-200 (#bad4ff)
181
+ backgroundStrong: colourMap.blue['600'],
182
+ // #0d54e5
183
+ backgroundSubtle: '#e1edfe' // Figma info surface — NOT blue-200 (#bad4ff)
174
184
  },
175
185
  success: {
176
186
  text: colourMap.green['900'],
177
187
  // #00574c
178
188
  foreground: colourMap.green['600'],
179
189
  // #01c68c
180
- backgroundDark: colourMap.green['800'],
190
+ backgroundStrong: colourMap.green['800'],
181
191
  // #18856f
182
- backgroundLight: colourMap.green['200'] // #e3f8f0
192
+ backgroundSubtle: colourMap.green['200'] // #e3f8f0
183
193
  },
184
194
  warning: {
185
195
  text: colourMap.red['800'],
186
196
  // #96110e (Figma warning/text is RED, not yellow)
187
197
  foreground: colourMap.yellow['800'],
188
198
  // #f69a1f
189
- backgroundDark: colourMap.yellow['500'],
199
+ backgroundStrong: colourMap.yellow['500'],
190
200
  // #ffc001
191
- backgroundLight: colourMap.yellow['200'] // #ffedb5
201
+ backgroundSubtle: colourMap.yellow['200'] // #ffedb5
192
202
  },
193
203
  alert: {
194
204
  text: colourMap.red['800'],
195
205
  // #96110e
196
206
  foreground: colourMap.red['600'],
197
207
  // #d42b26
198
- background: colourMap.red['200'] // #ffd4d4
208
+ backgroundStrong: colourMap.red['600'],
209
+ // #d42b26
210
+ backgroundSubtle: colourMap.red['200'] // #ffd4d4
199
211
  },
200
212
  button: {
201
213
  primary: {
@@ -204,21 +216,92 @@ export const tokens = {
204
216
  // #71edc2
205
217
  hover: colourMap.green['400'],
206
218
  // #36e5aa
219
+ border: colourMap.green['600'],
220
+ // #01c68c
207
221
  pressed: colourMap.green['600'],
208
222
  // #01c68c
209
- border: colourMap.green['600'] // #01c68c
223
+ text: colourMap.gray['900'] // #212338
210
224
  },
211
225
  outlined: {
212
226
  border: colourMap.green['800'],
213
227
  // #18856f
214
- text: colourMap.green['800'] // #18856f
228
+ text: colourMap.green['800'],
229
+ // #18856f
230
+ hover: colourMap.green['100'],
231
+ // #f2fdf9
232
+ pressed: colourMap.green['200'] // #e3f8f0
215
233
  }
216
234
  },
217
235
  critical: {
218
236
  solid: {
219
- default: colourMap.red['500'] // #e12e28
237
+ default: colourMap.red['500'],
238
+ // #e12e28
239
+ hover: colourMap.red['600'],
240
+ // #d42b26
241
+ border: colourMap.red['800'],
242
+ // #96110e
243
+ pressed: colourMap.red['800'],
244
+ // #96110e
245
+ text: colourMap.white // #ffffff
246
+ },
247
+ outlined: {
248
+ border: colourMap.red['800'],
249
+ // #96110e
250
+ text: colourMap.red['800'],
251
+ // #96110e
252
+ hover: colourMap.red['100'],
253
+ // #fdf4f4
254
+ pressed: colourMap.red['200'] // #ffd4d4
220
255
  }
256
+ },
257
+ secondary: {
258
+ border: colourMap.gray['300'],
259
+ // #d4d9dd
260
+ hover: colourMap.gray['100'],
261
+ // #fafbfc
262
+ pressed: colourMap.gray['200'],
263
+ // #eef0f2
264
+ text: colourMap.gray['900'] // #212338
265
+ },
266
+ disabled: {
267
+ fill: colourMap.gray['200'],
268
+ // #eef0f2
269
+ text: colourMap.gray['400'] // #8f95a1
221
270
  }
271
+ },
272
+ link: {
273
+ primary: colourMap.green['800'],
274
+ // #18856f
275
+ secondary: colourMap.gray['900'],
276
+ // #212338
277
+ hover: colourMap.green['700'],
278
+ // #03af83
279
+ pressed: colourMap.green['400'],
280
+ // #36e5aa
281
+ critical: colourMap.red['700'],
282
+ // #b51e1a
283
+ criticalHover: colourMap.red['500'],
284
+ // #e12e28
285
+ criticalPressed: colourMap.red['300'] // #ef918e
286
+ },
287
+ illustration: {
288
+ brightSide: colourMap.gray['400'],
289
+ // #8f95a1
290
+ darkSide: colourMap.gray['700'],
291
+ // #484c5f
292
+ lightFill: colourMap.gray['300'],
293
+ // #d4d9dd
294
+ mainFill: colourMap.gray['600'],
295
+ // #5c6172
296
+ outline: colourMap.gray['900'],
297
+ // #212338
298
+ shadow: '#8f95a140',
299
+ // gray-400 @ 25% (Figma illustration/shadow)
300
+ white: colourMap.white,
301
+ // #ffffff
302
+ yellowDarkSide: colourMap.yellow['700'],
303
+ // #f9a715
304
+ yellowMainFill: colourMap.yellow['500'] // #ffc001
222
305
  }
223
306
  },
224
307
  colours: {