Merge branch 'develop' into feat/labels-update

thelia · Jun 25, 2024 · ef23d23 · ef23d23
2 parents a49ae08 + cd3edbb
commit ef23d23
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 81 deletions.
diff --git a/components/Atoms/Colors/Colors.twig b/components/Atoms/Colors/Colors.twig
@@ -1,5 +1,5 @@
 {% for line in colors %}
-  <div class="flex gap-4 mb-4">
+  <div class="flex flex-wrap gap-4 mb-4">
     {% for color in line %}
       <div>
         <div class="Color shadow-lg p-2">

diff --git a/components/Atoms/Colors/colors.json b/components/Atoms/Colors/colors.json
@@ -1,24 +1,50 @@
 {
-  "vermillon": [
+  "main": [
+    "bg-vermillon-dark",
+    "bg-vermillon",
+    "bg-vermillon-medium",
     "bg-vermillon-light",
     "bg-vermillon-lighter",
-    "bg-vermillon-lightest",
-    "bg-vermillon-dark"
+    "bg-black",
+    "bg-grey-darker",
+    "bg-grey-dark",
+    "bg-grey",
+    "bg-grey-light",
+    "bg-grey-lighter",
+    "bg-grey-lightest",
+    "bg-white"
   ],
-  "charcoal": ["bg-charcoal-light", "bg-charcoal-medium", "bg-charcoal-dark"],
-  "pearl": ["bg-pearl-light", "bg-pearl-medium"],
-  "grey": ["bg-grey-medium", "bg-grey-dark"],
-  "white": ["bg-white"],
-  "red": ["bg-red-light", "bg-red", "bg-background-red"],
-  "green": ["bg-green-light", "bg-green-dark"],
-  "wheat": ["bg-wheat-light", "bg-wheat", "bg-wheat-dark"],
-  "ultramarine-blue": ["bg-ultramarine-blue-light", "bg-ultramarine-blue-dark"],
-  "caribbean-green": ["bg-caribbean-green"],
-  "others": [
-    "bg-purple",
-    "bg-turquoise",
+  "forms": [
+    "bg-success-darkest",
+    "bg-success-dark",
+    "bg-success",
+    "bg-success-lightest",
+    "bg-error-darkest",
+    "bg-error-dark",
+    "bg-error",
+    "bg-error-light",
+    "bg-error-lightest",
+    "bg-warning-darkest",
+    "bg-warning",
+    "bg-warning-light",
+    "bg-warning-lightest",
+    "bg-informative-darkest",
+    "bg-informative",
+    "bg-informative-lightest",
+    "bg-validated-darkest",
+    "bg-validated",
+    "bg-validated-lightest"
+  ],
+  "labels": [
     "bg-brown",
-    "bg-apple-green",
-    "bg-pink"
+    "bg-brown-light",
+    "bg-electric-blue",
+    "bg-electric-blue-light",
+    "bg-purple",
+    "bg-purple-light",
+    "bg-lavender",
+    "bg-lavender-light",
+    "bg-magenta",
+    "bg-magenta-light"
   ]
 }
diff --git a/components/variables.css b/components/variables.css
@@ -1,41 +1,58 @@
 :root {
-  --vermillon-light: #fa533c;
-  --vermillon-lighter: #ff8f80;
-  --vermillon-lightest: #ffeaf8;
-  --vermillon-dark: #c4311c;
+  --vermillon-dark: #ff4822;
+  --vermillon: #ff7036;
+  --vermillon-medium: #ffb698;
+  --vermillon-light: #ffe5db;
+  --vermillon-lighter: #ffede5;
+  --vermillon-lightest: #fff5f1;
+
+  --black: #282828;
+  --grey-darker: #424242;
+  --grey-dark: #545454;
+  --grey: #808080;
+  --grey-lighter: #d6d6d6;
+  --grey-lightest: #f5f5f5;
 
-  --charcoal-light: #444444;
-  --charcoal-medium: #333333;
-  --charcoal-dark: #222222;
+  --white: #ffffff;
 
-  --pearl-light: #f5f5f5;
-  --pearl-medium: #ebebeb;
+  --success-darkest: #067d44;
+  --success-dark: #08a65a;
+  --success: #37e17b;
+  --success-lightest: #f8fffb;
 
-  --grey-medium: #9b9b9b;
-  --grey-dark: #787878;
+  --error-darkest: #b70101;
+  --error-dark: #d00000;
+  --error: #eb0000;
+  --error-light: #ff6666;
+  --error-lightest: #ffe1e1;
 
-  --white: #ffffff;
+  --warning-darkest: #9e5400;
+  --warning: #ffa800;
+  --warning-light: #ffdd9c;
+  --warning-lightest: #fff9ee;
 
-  --red-light: #ed5656;
-  --red: #d21919;
-  --background-red: #ffeded;
+  --informative-darkest: #298094;
+  --informative: #40b1ca;
+  --informative-lightesr: #e9fbff;
 
-  --green-light: #eafbf5;
-  --green-dark: #008958;
+  --validated-darkest: #23806f;
+  --validated: #40cab1;
+  --validated-lightest: #eefffc;
 
-  --wheat-light: #fff4de;
-  --wheat: #ffdd9c;
-  --wheat-dark: #ffab0c;
+  --brown: #a33900;
+  --brown-light: #eb8e5c;
 
-  --ultramarine-blue-light: #ecf6ff;
-  --ultramarine-blue-dark: #3162df;
+  --electric-blue: #0531a8;
+  --electric-blue-light: #6f95fb;
 
-  --caribbean-green: #00d4a1;
   --purple: #5f0ab5;
-  --turquoise: #0fc8d3;
-  --brown: #820000;
-  --apple-green: #57c032;
-  --pink: #d800df;
+  --purple-light: #ba7df8;
+
+  --lavender: #c800cc;
+  --lavender-light: #fb4dff;
+
+  --magenta: #cc006e;
+  --magenta-light: #ff5cb4;
 
   --font-weight-h1: 700;
   --font-weight-h2: 800;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,49 +5,61 @@ module.exports = {
     extend: {
       colors: {
         vermillon: {
-          light: 'var(--vermillon-light)',
-          lighter: 'var(--vermillon-lighter)',
-          lightest: 'var(--vermillon-lightest)',
-          dark: 'var(--vermillon-dark)'
-        },
-        charcoal: {
-          light: 'var(--charcoal-light)',
-          medium: 'var(--charcoal-medium)',
-          dark: 'var(--charcoal-dark)'
-        },
-        pearl: {
-          light: 'var(--pearl-light)',
-          medium: 'var(--pearl-medium)'
+          dark: '#ff4822',
+          DEFAULT: '#ff7036',
+          medium: '#ffb698',
+          light: '#ffe5db',
+          lighter: '#ffede5',
+          lightest: '#fff5f1'
         },
+        black: '#282828',
         grey: {
-          medium: 'var(--grey-medium)',
-          dark: 'var(--grey-dark)'
+          darker: '#424242',
+          dark: '#545454',
+          DEFAULT: '#808080',
+          light: '#d6d6d6',
+          lightest: '#f5f5f5'
+        },
+        white: '#ffffff',
+        success: {
+          darkest: '#067d44',
+          dark: '#08a65a',
+          DEFAULT: '#37e17b',
+          lightest: '#f8fffb'
         },
-        white: 'var(--white)',
-        red: {
-          light: 'var(--red-light)',
-          DEFAULT: 'var(--red)'
+        error: {
+          darkest: '#b70101',
+          dark: '#d00000',
+          DEFAULT: '#eb0000',
+          light: '#ff6666',
+          lightest: '#ffe1e1'
         },
-        'background-red': 'var(--background-red)',
-        green: {
-          light: 'var(--green-light)',
-          dark: 'var(--green-dark)'
+        warning: {
+          darkest: '#9e5400',
+          DEFAULT: '#ffa800',
+          light: '#ffdd9c',
+          lightest: '#fff9ee'
         },
-        wheat: {
-          light: 'var(--wheat-light)',
-          DEFAULT: 'var(--wheat)',
-          dark: 'var(--wheat-dark)'
+        informative: {
+          darkest: '#298094',
+          DEFAULT: '#40b1ca',
+          lightest: '#e9fbff'
         },
-        'ultramarine-blue': {
-          light: 'var(--ultramarine-blue-light)',
-          dark: 'var(--ultramarine-blue-dark)'
+        validated: {
+          darkest: '#23806f',
+          DEFAULT: '#40cab1',
+          lightest: '#eefffc'
         },
-        'caribbean-green': 'var(--caribbean-green)',
-        purple: 'var(--purple)',
-        turquoise: 'var(--turquoise)',
-        brown: 'var(--brown)',
-        'apple-green': 'var(--apple-green)',
-        pink: 'var(--pink)'
+        brown: '#a33900',
+        'brown-light': '#eb8e5c',
+        'electric-blue': '#0531a8',
+        'electric-blue-light': '#6f95fb',
+        purple: '#5f0ab5',
+        'purple-light': '#ba7df8',
+        lavender: '#c800cc',
+        'lavender-light': '#fb4dff',
+        magenta: '#cc006e',
+        'magenta-light': '#ff5cb4'
       },
       screens: {
         xs: '320px',