From d59e3441a42c455c542091452d97557dc2701aeb Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Tue, 3 Sep 2024 18:38:09 +0200
Subject: [PATCH] Update CSS text variables

---
 src/assets/css/src/0.2.variables.css    |  8 ++++----
 src/assets/css/src/2.blocks.button.css  |  2 +-
 src/assets/css/src/2.blocks.pill.css    |  2 +-
 src/assets/css/src/3.utilities.text.css | 19 +++++++------------
 src/components/Menu.vue                 |  3 ++-
 src/views/Home.vue                      | 11 +++++++----
 6 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/assets/css/src/0.2.variables.css b/src/assets/css/src/0.2.variables.css
index 2682489..7bddd84 100755
--- a/src/assets/css/src/0.2.variables.css
+++ b/src/assets/css/src/0.2.variables.css
@@ -39,10 +39,10 @@
   --space-2xl: 2rem;   /* 32px */
 
   /* Type scale */
-  --text-sm: 0.75rem;   /* 12px */
-  --text-md: 0.875rem;  /* 14px */
-  --text-lg: 0.9375rem; /* 16px */
-  --text-xl: 1.5rem;    /* 24px */
+  --text-xs: .75rem;  /* 12px */
+  --text-sm: .875rem; /* 14px */
+  --text-md: 1rem;     /* 16px */
+  --text-lg: 1.5rem;   /* 24px */
 
   /* Leading */
   --leading-none: 1;
diff --git a/src/assets/css/src/2.blocks.button.css b/src/assets/css/src/2.blocks.button.css
index b1bb6e9..abd3a4b 100644
--- a/src/assets/css/src/2.blocks.button.css
+++ b/src/assets/css/src/2.blocks.button.css
@@ -9,7 +9,7 @@
   padding: var(--space-md) var(--space-lg);
   text-align: center;
   text-decoration: none;
-  font-size: var(--text-md);
+  font-size: var(--text-sm);
   line-height: var(--leading-md);
   font-weight: 500;
   border-radius: var(--rounded-md);
diff --git a/src/assets/css/src/2.blocks.pill.css b/src/assets/css/src/2.blocks.pill.css
index 7d5c2fa..d50d443 100644
--- a/src/assets/css/src/2.blocks.pill.css
+++ b/src/assets/css/src/2.blocks.pill.css
@@ -8,7 +8,7 @@
   padding: var(--space-xs) var(--space-md);
   text-align: center;
   text-decoration: none;
-  font-size: var(--text-md);
+  font-size: var(--text-sm);
   font-weight: 500;
   border-radius: var(--rounded-full);
   background-color: var(--background, var(--color-primary-100));
diff --git a/src/assets/css/src/3.utilities.text.css b/src/assets/css/src/3.utilities.text.css
index bb4b566..2909cbc 100644
--- a/src/assets/css/src/3.utilities.text.css
+++ b/src/assets/css/src/3.utilities.text.css
@@ -21,22 +21,17 @@
 
 /* Font sizes */
 
-.text-sm { 
-  font-size: 1rem;
-  font-size: var(--text-sm);
-  line-height: 1.5; /* 24px */
-}
-.text-md {
-  font-size: var(--text-md);
+.text-sm {
+  font-size: var(--text-sm); /* 14px */
   line-height: 1.4285714286; /* 20px */
 }
-.text-lg { 
-  font-size: var(--text-lg);
+.text-md {
+  font-size: var(--text-md); /* 16px */
   line-height: 1.5; /* 24px */
 }
-.text-xl {
-  font-size: var(--text-xl);
-  line-height: 1.111;
+.text-lg { 
+  font-size: var(--text-lg); /* 24px */
+  line-height: 1.5; /* 36px */
 }
 
 
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index b1a7a88..4e144b8 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -30,7 +30,7 @@
 	</aside>
 </template>
 
-<style>
+<style scoped>
 
 	button[aria-controls="menu"] {
 		position: fixed;
@@ -91,6 +91,7 @@
 		content: attr(data-count);
 		display: inline-block;
 		color: var(--color-primary);
+		font-size: var(--text-sm);
 		font-weight: 500;
 		margin-left: auto;
 	}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index fe0581d..e55b2b6 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,11 +2,12 @@
   <h1 class="sr-only">{{ data.content.title }}</h1>
   <div class="with-sidebar">  
     <Menu />
-    <!-- TODO: convert to Tabs.vue component -->
+    <!-- TODO: convert to TabList.vue component -->
     <main>
       <h2 id="tabslist" class="sr-only">Projets</h2>
       <header role="tablist"
               aria-labelledby="tablist">
+        <!-- Tab.vue -->
         <button id="projets-en-cours-label"
                 type="button"
                 role="tab"
@@ -30,6 +31,7 @@
           <span class="count">8</span>
         </button>
       </header>
+      <!-- TabPanel.vue -->
       <section id="projets-en-cours"
                role="tabpanel"
                tabindex="0"
@@ -78,7 +80,7 @@
   </div>
 </template>
 
-<style>
+<style scoped>
 
   /* TABS */
 
@@ -99,7 +101,7 @@
     position: relative;
     display: inline-flex;
     align-items: center;
-    font-size: var(--text-lg);
+    font-size: var(--text-md);
     border-radius: var(--rounded-full);
     background-color: var(--background, var(--color-background));
     color: var(--color, var(--color-text));
@@ -119,6 +121,7 @@
     font-family: var(--font-serif);
   }
   [role="tab"] .count {
+    font-size: var(--text-sm);
     font-weight: 500;
   }
 
@@ -160,7 +163,7 @@
   }
   .project-item h3 {
     font-family: var(--font-serif);
-    font-size: var(--text-xl);
+    font-size: var(--text-lg);
     margin-bottom: var(--space-sm);
   }
   .project-item p {