seekJobs: Update formAccent colour (#1387)

seek-oss · Nov 9, 2023 · 0b17214 · 0b17214
1 parent 4196708
commit 0b17214
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git a/.changeset/tender-garlics-reply.md 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
@@ -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
@@ -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,18 +149,18 @@ 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'],
       },
     },
     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'],