From 3afe69de9e6f969fe6a7294e06a8af702411cb54 Mon Sep 17 00:00:00 2001
From: Florian RICHER <florian.richer@unova.fr>
Date: Sun, 4 Jun 2023 18:23:39 +0200
Subject: [PATCH] Update colors from google material palette

---
 src/App.css                                  |  3 ---
 src/App.scss                                 |  3 +++
 src/App.tsx                                  |  2 +-
 src/components/Tag.scss                      |  3 ++-
 src/components/timeline/Timeline.scss        |  7 ++++---
 src/components/timeline/TimelineElement.scss | 15 +++++++++------
 tailwind.config.js                           | 15 ++++++++++++++-
 7 files changed, 33 insertions(+), 15 deletions(-)
 delete mode 100644 src/App.css
 create mode 100644 src/App.scss

diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 91214a1..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,3 +0,0 @@
-#root {
-    @apply m-0 p-0;
-}
\ No newline at end of file
diff --git a/src/App.scss b/src/App.scss
new file mode 100644
index 0000000..82e5123
--- /dev/null
+++ b/src/App.scss
@@ -0,0 +1,3 @@
+#root {
+    @apply m-0 p-0 bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface;
+}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index a017f16..7bc7d87 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import './App.css'
+import './App.scss'
 import TopComponent from "./components/TopComponent";
 import MonParcours from './components/MonParcours';
 
diff --git a/src/components/Tag.scss b/src/components/Tag.scss
index 86423e4..730bc17 100644
--- a/src/components/Tag.scss
+++ b/src/components/Tag.scss
@@ -1,3 +1,4 @@
 .tag {
-    @apply text-white bg-gray-500 rounded-lg px-3 py-1 font-thin text-sm;
+    @apply rounded-lg px-3 py-1 font-thin text-sm;
+    @apply bg-primary dark:bg-dark_primary text-on_primary dark:text-dark_on_primary;
 }
\ No newline at end of file
diff --git a/src/components/timeline/Timeline.scss b/src/components/timeline/Timeline.scss
index 8a3f931..c15bafe 100644
--- a/src/components/timeline/Timeline.scss
+++ b/src/components/timeline/Timeline.scss
@@ -1,13 +1,14 @@
 .timeline {
-    @apply w-full p-5;
+    @apply w-full px-5;
 
     & > ul {
         @apply list-none py-5 px-0 relative w-full max-w-5xl mx-auto;
 
         // Draw center line
         &:before {
-            @apply top-0 bottom-0 left-0 md:left-1/2 absolute content-[""] w-2 bg-[#f5f5f5];
-            box-shadow: 1px 1px 5px #dee1e4, -1px -1px 5px #fff;
+            @apply top-0 bottom-0 left-0 md:left-1/2 absolute content-[""] w-2;
+            @apply bg-primary/5 dark:bg-dark_primary/5;
+            // @apply shadow-2xl shadow-on_surface/50 dark:shadow-dark_on_surface/50;
         }
     }
 }
\ No newline at end of file
diff --git a/src/components/timeline/TimelineElement.scss b/src/components/timeline/TimelineElement.scss
index 806e60a..22418d3 100644
--- a/src/components/timeline/TimelineElement.scss
+++ b/src/components/timeline/TimelineElement.scss
@@ -3,8 +3,9 @@
 
     // Place point in center line
     &:before {
-        @apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-0 md:left-1/2 bg-[#f8f8f8] -ml-2 z-50;
-        box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
+        @apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-0 md:left-1/2 -ml-2 z-50;
+        @apply bg-primary/5 dark:bg-dark_primary/5;
+        // box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
     }
 
     &:nth-child(even) {
@@ -21,12 +22,14 @@
 
     .timeline-element__category {
         @apply top-5 flex md:justify-end mb-12;
+        @apply text-on_surface dark:text-dark_on_surface;
     }
 
     .timeline-element__info {
         & > details {
-            @apply mb-12 rounded-xl overflow-hidden relative bg-[#f5f5f5];
-            box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;
+            @apply mb-12 rounded-xl overflow-hidden relative;
+            @apply bg-primary/5 dark:bg-dark_primary/5;
+            // box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;
 
             & > summary, & > div {
                 @apply p-5;
@@ -34,6 +37,7 @@
     
             & > summary {
                 @apply block select-none cursor-pointer outline-none p-5 font-semibold;
+                @apply text-on_surface dark:text-dark_on_surface;
                 
                 // BEGIN TRANSITION
                 @apply mb-0;
@@ -41,14 +45,13 @@
                 // END TRANSITION
     
                 &:hover {
-                    @apply bg-[#f8f8f8];
+                    @apply bg-opacity-5;
                 }
             }
     
             &[open] {
                 & > summary {
                     @apply mb-5; // TRANSITION
-                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                 }
             }
         }
diff --git a/tailwind.config.js b/tailwind.config.js
index d37737f..b70538e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,8 +5,21 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: '#005db5',
+        dark_primary: '#a8c8ff',
+        on_primary: '#ffffff',
+        dark_on_primary: '#003062',
+        surface: '#fdfbff',
+        dark_surface: '#1a1b1e',
+        on_surface: '#1a1b1e',
+        dark_on_surface: '#e3e2e6'
+      }
+    },
   },
   plugins: [],
 }
 
+// #005eb6
+// https://m3.material.io/theme-builder#/custom
\ No newline at end of file