From 0b1721480827b21cc3c9d7d9138c312e80f4dc90 Mon Sep 17 00:00:00 2001
From: Michael Taranto <michaeltaranto@users.noreply.github.com>
Date: Thu, 9 Nov 2023 13:17:51 +1100
Subject: [PATCH] seekJobs: Update `formAccent` colour (#1387)

---
 .changeset/tender-garlics-reply.md            | 14 +++++++++++
 .../src/lib/color/palette.ts                  | 12 ++++++++++
 .../src/lib/themes/seekJobs/tokens.ts         | 24 +++++++++----------
 3 files changed, 38 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/tender-garlics-reply.md

diff --git a/.changeset/tender-garlics-reply.md b/.changeset/tender-garlics-reply.md
new file mode 100644
index 00000000000..f9d1e2bfe3c
--- /dev/null
+++ b/.changeset/tender-garlics-reply.md
@@ -0,0 +1,14 @@
+---
+'braid-design-system': minor
+---
+
+---
+updated:
+  - seekJobs
+---
+
+**seekJobs:** Update `formAccent` colour
+
+The `formAccent` tone, used through our form fields and buttons, is being updated to a derivative of the SEEK brand blue.
+
+As this update only relates to the `seekJobs` theme, consumers of other themes will not be affected.
diff --git a/packages/braid-design-system/src/lib/color/palette.ts b/packages/braid-design-system/src/lib/color/palette.ts
index 3edbf001df1..8e43a5bdea4 100644
--- a/packages/braid-design-system/src/lib/color/palette.ts
+++ b/packages/braid-design-system/src/lib/color/palette.ts
@@ -36,6 +36,18 @@ export const palette = {
     100: '#DCE5F2',
     50: '#F0F6FC',
   },
+  seekBlueLight: {
+    900: '#081C60',
+    800: '#122F83',
+    700: '#1E47A9',
+    600: '#2A60CD',
+    500: '#4B84E7',
+    400: '#6AA1F3',
+    300: '#99BFF7',
+    200: '#C9DEFA',
+    100: '#E5F0FD',
+    50: '#F0F7FE',
+  },
   red: {
     900: '#750606',
     800: '#941110',
diff --git a/packages/braid-design-system/src/lib/themes/seekJobs/tokens.ts b/packages/braid-design-system/src/lib/themes/seekJobs/tokens.ts
index ab968769dbc..22da459c9f4 100644
--- a/packages/braid-design-system/src/lib/themes/seekJobs/tokens.ts
+++ b/packages/braid-design-system/src/lib/themes/seekJobs/tokens.ts
@@ -1,4 +1,4 @@
-import { lighten, darken, saturate, rgba } from 'polished';
+import { lighten, darken, rgba } from 'polished';
 import { palette } from '../../color/palette';
 import { makeTokens } from '../baseTokens/apac';
 
@@ -149,9 +149,9 @@ export default makeTokens({
         xlarge: '24px',
       },
       color: {
-        formAccent: palette.violet['500'],
-        formAccentLight: palette.violet['300'],
-        focus: rgba(palette.violet['300'], 0.7),
+        formAccent: palette.seekBlueLight['700'],
+        formAccentLight: palette.seekBlueLight['300'],
+        focus: rgba(palette.seekBlueLight['300'], 0.7),
         promote: palette.purple['700'],
         promoteLight: palette.purple['300'],
         neutralLight: palette.grey['100'],
@@ -159,8 +159,8 @@ export default makeTokens({
     },
     color: {
       foreground: {
-        formAccent: palette.violet['500'],
-        formAccentLight: palette.violet['300'],
+        formAccent: palette.seekBlueLight['700'],
+        formAccentLight: palette.seekBlueLight['300'],
         link: palette.grey['700'],
         linkHover: palette.grey['700'],
         linkLight: '#fff',
@@ -173,12 +173,12 @@ export default makeTokens({
       background: {
         body: '#fff',
         bodyDark: palette.grey['800'],
-        formAccent: palette.violet['500'],
-        formAccentActive: darken(0.05, palette.violet['500']),
-        formAccentHover: saturate(0.5, lighten(0.075, palette.violet['500'])),
-        formAccentSoft: palette.violet['50'],
-        formAccentSoftActive: darken(0.05, palette.violet['50']),
-        formAccentSoftHover: darken(0.025, palette.violet['50']),
+        formAccent: palette.seekBlueLight['700'],
+        formAccentActive: darken(0.05, palette.seekBlueLight['700']),
+        formAccentHover: lighten(0.075, palette.seekBlueLight['700']),
+        formAccentSoft: palette.seekBlueLight['50'],
+        formAccentSoftActive: darken(0.05, palette.seekBlueLight['50']),
+        formAccentSoftHover: darken(0.025, palette.seekBlueLight['50']),
         promote: palette.purple['700'],
         promoteLight: palette.purple['100'],
         neutralLight: palette.grey['75'],