@autoguru/overdrive 4.61.0 → 4.63.0

package/dist/themes/base/index.d.ts

@@ -87,6 +87,10 @@ declare const _default: {
                     '100': `var(--${string})`;
                 };
             };
+            brand: {
+                solid: `var(--${string})`;
+                onSolid: `var(--${string})`;
+            };
             surface: {
                 page: `var(--${string})`;
                 hard: `var(--${string})`;
@@ -123,14 +127,16 @@ declare const _default: {
                 primary: `var(--${string})`;
                 secondary: `var(--${string})`;
                 reverse: `var(--${string})`;
-                tertiaryInactive: `var(--${string})`;
-                tertiaryInactiveLight: `var(--${string})`;
+                tertiary: `var(--${string})`;
+                placeholder: `var(--${string})`;
             };
             background: {
                 default: `var(--${string})`;
                 reverse: `var(--${string})`;
                 inactive: `var(--${string})`;
                 emphasisInactive: `var(--${string})`;
+                emphasisLight: `var(--${string})`;
+                modal: `var(--${string})`;
             };
             border: {
                 default: `var(--${string})`;
@@ -138,46 +144,94 @@ declare const _default: {
                 selected: `var(--${string})`;
                 strong: `var(--${string})`;
             };
+            focus: {
+                ring: `var(--${string})`;
+            };
             info: {
                 text: `var(--${string})`;
                 foreground: `var(--${string})`;
-                background: `var(--${string})`;
+                backgroundStrong: `var(--${string})`;
+                backgroundSubtle: `var(--${string})`;
             };
             success: {
                 text: `var(--${string})`;
                 foreground: `var(--${string})`;
-                backgroundDark: `var(--${string})`;
-                backgroundLight: `var(--${string})`;
+                backgroundStrong: `var(--${string})`;
+                backgroundSubtle: `var(--${string})`;
             };
             warning: {
                 text: `var(--${string})`;
                 foreground: `var(--${string})`;
-                backgroundDark: `var(--${string})`;
-                backgroundLight: `var(--${string})`;
+                backgroundStrong: `var(--${string})`;
+                backgroundSubtle: `var(--${string})`;
             };
             alert: {
                 text: `var(--${string})`;
                 foreground: `var(--${string})`;
-                background: `var(--${string})`;
+                backgroundStrong: `var(--${string})`;
+                backgroundSubtle: `var(--${string})`;
             };
             button: {
                 primary: {
                     solid: {
                         default: `var(--${string})`;
                         hover: `var(--${string})`;
-                        pressed: `var(--${string})`;
                         border: `var(--${string})`;
+                        pressed: `var(--${string})`;
+                        text: `var(--${string})`;
                     };
                     outlined: {
                         border: `var(--${string})`;
                         text: `var(--${string})`;
+                        hover: `var(--${string})`;
+                        pressed: `var(--${string})`;
                     };
                 };
                 critical: {
                     solid: {
                         default: `var(--${string})`;
+                        hover: `var(--${string})`;
+                        border: `var(--${string})`;
+                        pressed: `var(--${string})`;
+                        text: `var(--${string})`;
                     };
+                    outlined: {
+                        border: `var(--${string})`;
+                        text: `var(--${string})`;
+                        hover: `var(--${string})`;
+                        pressed: `var(--${string})`;
+                    };
+                };
+                secondary: {
+                    border: `var(--${string})`;
+                    hover: `var(--${string})`;
+                    pressed: `var(--${string})`;
+                    text: `var(--${string})`;
                 };
+                disabled: {
+                    fill: `var(--${string})`;
+                    text: `var(--${string})`;
+                };
+            };
+            link: {
+                primary: `var(--${string})`;
+                secondary: `var(--${string})`;
+                hover: `var(--${string})`;
+                pressed: `var(--${string})`;
+                critical: `var(--${string})`;
+                criticalHover: `var(--${string})`;
+                criticalPressed: `var(--${string})`;
+            };
+            illustration: {
+                brightSide: `var(--${string})`;
+                darkSide: `var(--${string})`;
+                lightFill: `var(--${string})`;
+                mainFill: `var(--${string})`;
+                outline: `var(--${string})`;
+                shadow: `var(--${string})`;
+                white: `var(--${string})`;
+                yellowDarkSide: `var(--${string})`;
+                yellowMainFill: `var(--${string})`;
             };
         };
         colours: {
@@ -565,6 +619,10 @@ declare const _default: {
                 };
                 white: `var(--${string})`;
             };
+            brand: {
+                solid: string;
+                onSolid: string;
+            };
             surface: {
                 page: string;
                 hard: string;
@@ -601,14 +659,16 @@ declare const _default: {
                 primary: string;
                 secondary: string;
                 reverse: string;
-                tertiaryInactive: string;
-                tertiaryInactiveLight: string;
+                tertiary: string;
+                placeholder: string;
             };
             background: {
                 default: string;
                 reverse: string;
                 inactive: string;
                 emphasisInactive: string;
+                emphasisLight: string;
+                modal: string;
             };
             border: {
                 default: string;
@@ -616,46 +676,94 @@ declare const _default: {
                 selected: string;
                 strong: string;
             };
+            focus: {
+                ring: string;
+            };
             info: {
                 text: string;
                 foreground: string;
-                background: string;
+                backgroundStrong: string;
+                backgroundSubtle: string;
             };
             success: {
                 text: string;
                 foreground: string;
-                backgroundDark: string;
-                backgroundLight: string;
+                backgroundStrong: string;
+                backgroundSubtle: string;
             };
             warning: {
                 text: string;
                 foreground: string;
-                backgroundDark: string;
-                backgroundLight: string;
+                backgroundStrong: string;
+                backgroundSubtle: string;
             };
             alert: {
                 text: string;
                 foreground: string;
-                background: string;
+                backgroundStrong: string;
+                backgroundSubtle: string;
             };
             button: {
                 primary: {
                     solid: {
                         default: string;
                         hover: string;
-                        pressed: string;
                         border: string;
+                        pressed: string;
+                        text: string;
                     };
                     outlined: {
                         border: string;
                         text: string;
+                        hover: string;
+                        pressed: string;
                     };
                 };
                 critical: {
                     solid: {
                         default: string;
+                        hover: string;
+                        border: string;
+                        pressed: string;
+                        text: string;
                     };
+                    outlined: {
+                        border: string;
+                        text: string;
+                        hover: string;
+                        pressed: string;
+                    };
+                };
+                secondary: {
+                    border: string;
+                    hover: string;
+                    pressed: string;
+                    text: string;
                 };
+                disabled: {
+                    fill: string;
+                    text: string;
+                };
+            };
+            link: {
+                primary: string;
+                secondary: string;
+                hover: string;
+                pressed: string;
+                critical: string;
+                criticalHover: string;
+                criticalPressed: string;
+            };
+            illustration: {
+                brightSide: string;
+                darkSide: string;
+                lightFill: string;
+                mainFill: string;
+                outline: string;
+                shadow: string;
+                white: string;
+                yellowDarkSide: string;
+                yellowMainFill: string;
             };
         };
         colours: {

package/dist/themes/base/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}

package/dist/themes/base/space.spec.js

@@ -10,7 +10,7 @@ import { tokens as baseTokens } from "./tokens.js";
  */
 const EXPECTED_SPACE = {
   none: '0px',
-  '0': '0px',
+  '0': '2px',
   '1': '4px',
   '2': '8px',
   '3': '12px',
@@ -28,8 +28,8 @@ describe('space token ladder', () => {
   it('base theme maps every key to its exact DS-2026 pixel value', () => {
     expect(baseTokens.space).toStrictEqual(EXPECTED_SPACE);
   });
-  it('`0` and `none` both resolve to 0px (no 2px footgun)', () => {
-    expect(baseTokens.space['0']).toBe('0px');
+  it('`0` is the 2px smallest step; `none` is true zero (DS-2026)', () => {
+    expect(baseTokens.space['0']).toBe('2px');
     expect(baseTokens.space.none).toBe('0px');
   });
   it('neutral theme inherits the base ladder unchanged via deepmerge', () => {

package/dist/themes/base/tokens.d.ts

@@ -98,6 +98,23 @@ export declare const tokens: {
             };
             white: `var(--${string})`;
         };
+        /**
+         * Seeded to the values the surfaces reading it render today, so adding
+         * this pair is byte-identical on every theme: `solid` matches
+         * `color.foreground.primary` and `onSolid` matches
+         * `color.background.default`.
+         *
+         * Raw hex, not a `colours.gamut.*` var alias — `color.gamut.*` is a
+         * transition bridge onto the legacy gamut, which `flat_red` overrides.
+         * Raw hex keeps the resolved value the same in all three themes, and is
+         * how `foreground.primary` / `background.default` are already seeded.
+         *
+         * A tenant re-brands this pair at runtime via `colorOverrides`.
+         */
+        brand: {
+            solid: string;
+            onSolid: string;
+        };
         surface: {
             page: string;
             hard: string;
@@ -134,14 +151,16 @@ export declare const tokens: {
             primary: string;
             secondary: string;
             reverse: string;
-            tertiaryInactive: string;
-            tertiaryInactiveLight: string;
+            tertiary: string;
+            placeholder: string;
         };
         background: {
             default: string;
             reverse: string;
             inactive: string;
             emphasisInactive: string;
+            emphasisLight: string;
+            modal: string;
         };
         border: {
             default: string;
@@ -149,47 +168,95 @@ export declare const tokens: {
             selected: string;
             strong: string;
         };
+        focus: {
+            ring: string;
+        };
         info: {
             text: string;
             foreground: string;
-            background: string;
+            backgroundStrong: string;
+            backgroundSubtle: string;
         };
         success: {
             text: string;
             foreground: string;
-            backgroundDark: string;
-            backgroundLight: string;
+            backgroundStrong: string;
+            backgroundSubtle: string;
         };
         warning: {
             text: string;
             foreground: string;
-            backgroundDark: string;
-            backgroundLight: string;
+            backgroundStrong: string;
+            backgroundSubtle: string;
         };
         alert: {
             text: string;
             foreground: string;
-            background: string;
+            backgroundStrong: string;
+            backgroundSubtle: string;
         };
         button: {
             primary: {
                 solid: {
                     default: string;
                     hover: string;
-                    pressed: string;
                     border: string;
+                    pressed: string;
+                    text: string;
                 };
                 outlined: {
                     border: string;
                     text: string;
+                    hover: string;
+                    pressed: string;
                 };
             };
             critical: {
                 solid: {
                     default: string;
+                    hover: string;
+                    border: string;
+                    pressed: string;
+                    text: string;
                 };
+                outlined: {
+                    border: string;
+                    text: string;
+                    hover: string;
+                    pressed: string;
+                };
+            };
+            secondary: {
+                border: string;
+                hover: string;
+                pressed: string;
+                text: string;
+            };
+            disabled: {
+                fill: string;
+                text: string;
             };
         };
+        link: {
+            primary: string;
+            secondary: string;
+            hover: string;
+            pressed: string;
+            critical: string;
+            criticalHover: string;
+            criticalPressed: string;
+        };
+        illustration: {
+            brightSide: string;
+            darkSide: string;
+            lightFill: string;
+            mainFill: string;
+            outline: string;
+            shadow: string;
+            white: string;
+            yellowDarkSide: string;
+            yellowMainFill: string;
+        };
     };
     colours: {
         gamut: {

package/dist/themes/base/tokens.d.ts.map

@@ -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"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/tokens.ts"],"names":[],"mappings":"AASA;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4BjB;;;;;;;;;;WAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA2DH;;;;;;;;;;;;WAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoZkB,CAAC"}

package/dist/themes/base/tokens.js

@@ -19,7 +19,8 @@ export const tokens = {
     medium: '940px'
   },
   space: {
-    '0': '0px',
+    '0': '2px',
+    // DS-2026: smallest step is 2px (use `none` for true zero)
     '1': '4px',
     '2': '8px',
     '3': '12px',
@@ -104,6 +105,24 @@ export const tokens = {
       },
       white: overdriveTokens.colours.gamut.white
     },
+    /**
+     * Seeded to the values the surfaces reading it render today, so adding
+     * this pair is byte-identical on every theme: `solid` matches
+     * `color.foreground.primary` and `onSolid` matches
+     * `color.background.default`.
+     *
+     * Raw hex, not a `colours.gamut.*` var alias — `color.gamut.*` is a
+     * transition bridge onto the legacy gamut, which `flat_red` overrides.
+     * Raw hex keeps the resolved value the same in all three themes, and is
+     * how `foreground.primary` / `background.default` are already seeded.
+     *
+     * A tenant re-brands this pair at runtime via `colorOverrides`.
+     */
+    brand: {
+      solid: colourMap.gray['900'],
+      // #212338
+      onSolid: colourMap.white // #ffffff
+    },
     surface: {
       page: colourMap.white,
       hard: colourMap.gray['900'],
@@ -143,9 +162,9 @@ export const tokens = {
       // #484c5f
       reverse: colourMap.white,
       // #ffffff
-      tertiaryInactive: colourMap.gray['400'],
+      tertiary: colourMap.gray['400'],
       // #8f95a1
-      tertiaryInactiveLight: colourMap.gray['300'] // #d4d9dd
+      placeholder: colourMap.gray['300'] // #d4d9dd
     },
     background: {
       default: colourMap.white,
@@ -154,7 +173,11 @@ export const tokens = {
       // #212338
       inactive: colourMap.gray['300'],
       // #d4d9dd
-      emphasisInactive: colourMap.gray['200'] // #eef0f2
+      emphasisInactive: colourMap.gray['200'],
+      // #eef0f2
+      emphasisLight: colourMap.gray['100'],
+      // #fafbfc
+      modal: '#21233840' // gray-900 @ 25% (Figma background/modal)
     },
     border: {
       default: colourMap.gray['300'],
@@ -165,37 +188,44 @@ export const tokens = {
       // #5c6172
       strong: colourMap.gray['900'] // #212338
     },
+    focus: {
+      ring: colourMap.green['600'] // #01c68c
+    },
     info: {
       text: colourMap.blue['900'],
       // #0d47a1
       foreground: colourMap.blue['600'],
       // #0d54e5
-      background: '#e1edfe' // Figma info surface — NOT blue-200 (#bad4ff)
+      backgroundStrong: colourMap.blue['600'],
+      // #0d54e5
+      backgroundSubtle: '#e1edfe' // Figma info surface — NOT blue-200 (#bad4ff)
     },
     success: {
       text: colourMap.green['900'],
       // #00574c
       foreground: colourMap.green['600'],
       // #01c68c
-      backgroundDark: colourMap.green['800'],
+      backgroundStrong: colourMap.green['800'],
       // #18856f
-      backgroundLight: colourMap.green['200'] // #e3f8f0
+      backgroundSubtle: colourMap.green['200'] // #e3f8f0
     },
     warning: {
       text: colourMap.red['800'],
       // #96110e (Figma warning/text is RED, not yellow)
       foreground: colourMap.yellow['800'],
       // #f69a1f
-      backgroundDark: colourMap.yellow['500'],
+      backgroundStrong: colourMap.yellow['500'],
       // #ffc001
-      backgroundLight: colourMap.yellow['200'] // #ffedb5
+      backgroundSubtle: colourMap.yellow['200'] // #ffedb5
     },
     alert: {
       text: colourMap.red['800'],
       // #96110e
       foreground: colourMap.red['600'],
       // #d42b26
-      background: colourMap.red['200'] // #ffd4d4
+      backgroundStrong: colourMap.red['600'],
+      // #d42b26
+      backgroundSubtle: colourMap.red['200'] // #ffd4d4
     },
     button: {
       primary: {
@@ -204,21 +234,92 @@ export const tokens = {
           // #71edc2
           hover: colourMap.green['400'],
           // #36e5aa
+          border: colourMap.green['600'],
+          // #01c68c
           pressed: colourMap.green['600'],
           // #01c68c
-          border: colourMap.green['600'] // #01c68c
+          text: colourMap.gray['900'] // #212338
         },
         outlined: {
           border: colourMap.green['800'],
           // #18856f
-          text: colourMap.green['800'] // #18856f
+          text: colourMap.green['800'],
+          // #18856f
+          hover: colourMap.green['100'],
+          // #f2fdf9
+          pressed: colourMap.green['200'] // #e3f8f0
         }
       },
       critical: {
         solid: {
-          default: colourMap.red['500'] // #e12e28
+          default: colourMap.red['500'],
+          // #e12e28
+          hover: colourMap.red['600'],
+          // #d42b26
+          border: colourMap.red['800'],
+          // #96110e
+          pressed: colourMap.red['800'],
+          // #96110e
+          text: colourMap.white // #ffffff
+        },
+        outlined: {
+          border: colourMap.red['800'],
+          // #96110e
+          text: colourMap.red['800'],
+          // #96110e
+          hover: colourMap.red['100'],
+          // #fdf4f4
+          pressed: colourMap.red['200'] // #ffd4d4
         }
+      },
+      secondary: {
+        border: colourMap.gray['300'],
+        // #d4d9dd
+        hover: colourMap.gray['100'],
+        // #fafbfc
+        pressed: colourMap.gray['200'],
+        // #eef0f2
+        text: colourMap.gray['900'] // #212338
+      },
+      disabled: {
+        fill: colourMap.gray['200'],
+        // #eef0f2
+        text: colourMap.gray['400'] // #8f95a1
       }
+    },
+    link: {
+      primary: colourMap.green['800'],
+      // #18856f
+      secondary: colourMap.gray['900'],
+      // #212338
+      hover: colourMap.green['700'],
+      // #03af83
+      pressed: colourMap.green['400'],
+      // #36e5aa
+      critical: colourMap.red['700'],
+      // #b51e1a
+      criticalHover: colourMap.red['500'],
+      // #e12e28
+      criticalPressed: colourMap.red['300'] // #ef918e
+    },
+    illustration: {
+      brightSide: colourMap.gray['400'],
+      // #8f95a1
+      darkSide: colourMap.gray['700'],
+      // #484c5f
+      lightFill: colourMap.gray['300'],
+      // #d4d9dd
+      mainFill: colourMap.gray['600'],
+      // #5c6172
+      outline: colourMap.gray['900'],
+      // #212338
+      shadow: '#8f95a140',
+      // gray-400 @ 25% (Figma illustration/shadow)
+      white: colourMap.white,
+      // #ffffff
+      yellowDarkSide: colourMap.yellow['700'],
+      // #f9a715
+      yellowMainFill: colourMap.yellow['500'] // #ffc001
     }
   },
   colours: {