From c70a4da5cb8917255019945cf9b52fb3c0ffccb1 Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Wed, 17 Jan 2024 09:29:02 +0000
Subject: [PATCH] Add new color tokens for Wagtail and update existing tokens,
 dark theme

---
 client/src/tokens/colorThemes.js |  8 ++++----
 client/src/tokens/colors.js      | 30 ++++++++++++++++++++++++------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/client/src/tokens/colorThemes.js b/client/src/tokens/colorThemes.js
index dd37e47578..17d5033e6a 100644
--- a/client/src/tokens/colorThemes.js
+++ b/client/src/tokens/colorThemes.js
@@ -293,19 +293,19 @@ const dark = [
         cssVariable: '--w-color-surface-field-inactive',
       },
       'surface-header': {
-        value: 'var(--w-color-grey-600)',
+        value: 'var(--w-color-grey-700)',
         bgUtility: 'w-bg-surface-header',
         textUtility: 'w-text-surface-header',
         cssVariable: '--w-color-surface-header',
       },
       'surface-menus': {
-        value: 'var(--w-color-grey-500)',
+        value: 'var(--w-color-grey-800)',
         bgUtility: 'w-bg-surface-menus',
         textUtility: 'w-text-surface-menus',
         cssVariable: '--w-color-surface-menus',
       },
       'surface-menu-item-active': {
-        value: 'var(--w-color-grey-600)',
+        value: 'var(--w-color-grey-700)',
         bgUtility: 'w-bg-surface-menu-item-active',
         textUtility: 'w-text-surface-menu-item-active',
         cssVariable: '--w-color-surface-menu-item-active',
@@ -335,7 +335,7 @@ const dark = [
         cssVariable: '--w-color-surface-button-inactive',
       },
       'surface-button-outline-hover': {
-        value: 'var(--w-color-grey-500)',
+        value: 'var(--w-color-grey-700)',
         bgUtility: 'w-bg-surface-button-outline-hover',
         textUtility: 'w-text-surface-button-outline-hover',
         cssVariable: '--w-color-surface-button-outline-hover',
diff --git a/client/src/tokens/colors.js b/client/src/tokens/colors.js
index c017d4ab55..0cede50b82 100644
--- a/client/src/tokens/colors.js
+++ b/client/src/tokens/colors.js
@@ -30,6 +30,24 @@ const staticColors = {
     },
   },
   grey: {
+    800: {
+      hex: '#1D1D1D',
+      hsl: 'hsl(0 0% 11.4%)',
+      bgUtility: 'w-bg-grey-800',
+      textUtility: 'w-text-grey-800',
+      cssVariable: '--w-color-grey-800',
+      usage: 'Backgrounds for panels in dark theme',
+      contrastText: 'white',
+    },
+    700: {
+      hex: '#222222',
+      hsl: 'hsl(0 0% 13.3%)',
+      bgUtility: 'w-bg-grey-700',
+      textUtility: 'w-text-grey-700',
+      cssVariable: '--w-color-grey-700',
+      usage: 'Backgrounds for panels in dark theme',
+      contrastText: 'white',
+    },
     600: {
       hex: '#262626',
       hsl: 'hsl(0 0% 14.9%)',
@@ -193,8 +211,8 @@ const staticColors = {
       contrastText: 'white',
     },
     100: {
-      hex: '#1F7E9A',
-      hsl: 'hsl(193.7 66.5% 36.3%)',
+      hex: '#1D7792',
+      hsl: 'hsl(193 66.9% 34.3%)',
       bgUtility: 'w-bg-info-100',
       textUtility: 'w-text-info-100',
       cssVariable: '--w-color-info-100',
@@ -253,8 +271,8 @@ const staticColors = {
   },
   critical: {
     200: {
-      hex: '#CD4444',
-      hsl: 'hsl(0 57.8% 53.5%)',
+      hex: '#CA3B3B',
+      hsl: 'hsl(0 57.4% 51.2%)',
       bgUtility: 'w-bg-critical-200',
       textUtility: 'w-text-critical-200',
       cssVariable: '--w-color-critical-200',
@@ -271,8 +289,8 @@ const staticColors = {
       contrastText: 'primary',
     },
     50: {
-      hex: '#FDE9E9',
-      hsl: 'hsl(0 83.3% 95.3%)',
+      hex: '#FEF0F0',
+      hsl: 'hsl(0 87.5% 96.9%)',
       bgUtility: 'w-bg-critical-50',
       textUtility: 'w-text-critical-50',
       cssVariable: '--w-color-critical-50',