From b888524dbf95e7b667d5169157bc58d2548686fc Mon Sep 17 00:00:00 2001
From: Antoine Dewez <44063631+Zewed@users.noreply.github.com>
Date: Thu, 8 Aug 2024 16:29:42 +0200
Subject: [PATCH] fix(frontend): talk with models (#2981)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

---------

Co-authored-by: Stan Girard <girard.stanislas@gmail.com>
---
 frontend/app/colors.css  | 11 +++++++++++
 frontend/app/globals.css | 18 +++++++++---------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/frontend/app/colors.css b/frontend/app/colors.css
index 4f4e5c530..c45c1f388 100644
--- a/frontend/app/colors.css
+++ b/frontend/app/colors.css
@@ -46,4 +46,15 @@
     /* Success */
     --success: #47a455;
     --success-lightest: #d0edd4;
+
+    /* Code */
+    --code-yellow: #e6db74;
+    --code-grey: #f8f8f2; 
+    --code-green: #a6e22e;
+    --code-purple: #ae81ff;
+    --code-red: #f92672;
+    --code-dark-grey: #f8f8f2;
+    --code-very-dark-grey: #75715e;
+    --code-blue: #66d9ef;
+    --code-orange: #fd971f;
 }
\ No newline at end of file
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 7c4fee244..593337e12 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -128,12 +128,12 @@ body.dark_mode {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: #75715e;
+  color: var(--code-very-dark-grey);
   font-style: italic;
 }
 
 .token.punctuation {
-  color: #f8f8f2;
+  color: var(--code-dark-grey);
 }
 
 .token.property,
@@ -141,12 +141,12 @@ body.dark_mode {
 .token.constant,
 .token.symbol,
 .token.deleted {
-  color: #f92672; 
+  color: var(--code-red); 
 }
 
 .token.boolean,
 .token.number {
-  color: #ae81ff;
+  color: var(--code-purple);
 }
 
 .token.selector,
@@ -155,7 +155,7 @@ body.dark_mode {
 .token.char,
 .token.builtin,
 .token.inserted {
-  color: #a6e22e; 
+  color: var(--code-green); 
 }
 
 .token.operator,
@@ -164,23 +164,23 @@ body.dark_mode {
 .language-css .token.string,
 .style .token.string,
 .token.variable {
-  color: #f8f8f2; 
+  color: var(--code-grey); 
 }
 
 .token.atrule,
 .token.attr-value,
 .token.function,
 .token.class-name {
-  color: #e6db74;
+  color: var(--code-yellow);
 }
 
 .token.keyword {
-  color: #66d9ef; 
+  color: var(--code-blue); 
 }
 
 .token.regex,
 .token.important {
-  color: #fd971f;
+  color: var(--code-orange);
 }
 
 .token.important,