refactor: css variable color name

alcpereira · Oct 5, 2024 · e4a1f32 · e4a1f32
1 parent 4d595e1
commit e4a1f32
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 14 deletions.
diff --git a/src/components/Bubble/Bubble.css b/src/components/Bubble/Bubble.css
@@ -1,6 +1,6 @@
 .bubble {
-  border: 1px solid var(--light-grey);
-  color: var(--light-grey);
+  border: 1px solid var(--color-neutral-400);
+  color: var(--color-neutral-400);
   padding: 0.125em 0.75em;
   border-radius: 1.5em;
   flex-shrink: 0;

diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
@@ -7,7 +7,7 @@
 
 .header__lines > p {
   margin: 0;
-  color: var(--light-grey);
+  color: var(--color-neutral-400);
   font-size: 20px;
   line-height: 1.3;
 }

diff --git a/src/components/Profile/Profile.css b/src/components/Profile/Profile.css
@@ -36,12 +36,12 @@
 .profile__education-school {
   font-weight: 600;
   font-size: 14px;
-  color: var(--light-grey);
+  color: var(--color-neutral-400);
 }
 
 .profile__education-years,
 .profile__education-location {
-  color: var(--light-grey);
+  color: var(--color-neutral-400);
   font-size: 14px;
 }
 

diff --git a/src/components/Profile/ProfileImage/ProfileImage.css b/src/components/Profile/ProfileImage/ProfileImage.css
@@ -8,5 +8,5 @@
 }
 
 .profile__header__image__border img {
-  border: 3px solid var(--red);
+  border: 3px solid var(--color-primary-500);
 }
diff --git a/src/components/Profile/ProfileLanguages/ProfileLanguages.css b/src/components/Profile/ProfileLanguages/ProfileLanguages.css
@@ -10,7 +10,7 @@
 }
 
 .profile__languages-level {
-  color: var(--light-grey);
+  color: var(--color-neutral-400);
 }
 
 .profile__languages-container {

diff --git a/src/components/Separator/Separator.css b/src/components/Separator/Separator.css
@@ -1,5 +1,5 @@
 .separator {
   height: 1px;
   width: 100%;
-  background-color: var(--light-grey-transparent);
+  background-color: var(--color-neutral-200);
 }
diff --git a/src/components/Title/Title.css b/src/components/Title/Title.css
@@ -1,6 +1,6 @@
 .title {
-  background-color: var(--red);
-  color: white;
+  background-color: var(--color-primary-500);
+  color: var(--color-neutral-100);
   padding: 0.25em 0.5em;
   border-radius: 0.5em;
   text-transform: uppercase;

diff --git a/src/index.css b/src/index.css
@@ -6,8 +6,9 @@
   font-weight: 400;
   -print-color-adjust: exact;
 
-  --red: rgb(167, 67, 67);
-  --light-grey: rgb(94, 90, 94);
-  --light-grey-transparent: rgb(94, 90, 94, 0.3);
-  --black: rgb(20, 20, 20);
+  --color-primary-500: rgb(167, 67, 67);
+  --color-neutral-100: rgb(255, 255, 255);
+  --color-neutral-200: rgb(94, 90, 94, 0.3);
+  --color-neutral-400: rgb(94, 90, 94);
+  --color-neutral-900: rgb(20, 20, 20);
 }