feat: refine overall font stylings

globalbrain · Feb 16, 2023 · 595dc50 · 595dc50
1 parent 0463f23
commit 595dc50
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 13 deletions.
diff --git a/lib/components/SDropdownSectionFilter.vue b/lib/components/SDropdownSectionFilter.vue
@@ -102,13 +102,12 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   border-radius: 6px;
   padding: 0 8px;
   width: 100%;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 32px;
   background-color: var(--c-bg);
   transition: border-color 0.25s;
 
   &::placeholder {
-    font-weight: 500;
     color: var(--c-text-3);
   }
 

diff --git a/lib/components/SDropdownSectionFilterItemAvatar.vue b/lib/components/SDropdownSectionFilterItemAvatar.vue
@@ -32,7 +32,7 @@ defineProps<{
   display: inline-block;
   padding-left: 8px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

diff --git a/lib/components/SDropdownSectionFilterItemText.vue b/lib/components/SDropdownSectionFilterItemText.vue
@@ -22,6 +22,6 @@ defineProps<{
   display: inline-block;
   line-height: 20px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
 }
 </style>
diff --git a/lib/components/SDropdownSectionMenu.vue b/lib/components/SDropdownSectionMenu.vue
@@ -29,7 +29,7 @@ defineProps<{
   text-align: left;
   line-height: 32px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   transition: color 0.25s, background-color 0.25s;
 
   &:hover {

diff --git a/lib/components/SInputBase.vue b/lib/components/SInputBase.vue
@@ -114,7 +114,6 @@ function getErrorMsg(validation: Validatable) {
   align-items: baseline;
   width: 100%;
   line-height: 16px;
-  font-weight: 500;
   cursor: pointer;
   transition: color 0.25s;
 }
@@ -126,6 +125,7 @@ function getErrorMsg(validation: Validatable) {
 }
 
 .label-text-value {
+  font-weight: 500;
   color: var(--input-label-color);
 }
 
@@ -144,7 +144,7 @@ function getErrorMsg(validation: Validatable) {
   display: inline-block;
   margin-left: 8px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   color: var(--c-text-2);
 }
 
@@ -158,7 +158,7 @@ function getErrorMsg(validation: Validatable) {
   padding: 6px 0 0 0;
   line-height: 18px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   color: var(--input-error-text-color);
   transition: opacity 0.25s, transform 0.25s;
 }
@@ -168,7 +168,7 @@ function getErrorMsg(validation: Validatable) {
   padding: 4px 0 0;
   line-height: 20px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   color: var(--c-text-2);
 }
 

diff --git a/lib/components/SInputRadio.vue b/lib/components/SInputRadio.vue
@@ -123,6 +123,6 @@ function onClick() {
   padding-left: 10px;
   line-height: 20px;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 400;
 }
 </style>
diff --git a/lib/components/SPill.vue b/lib/components/SPill.vue
@@ -53,7 +53,7 @@ function onClick() {
   display: inline-block;
   border: 1px solid transparent;
   letter-spacing: 0.4px;
-  font-weight: 600;
+  font-weight: 500;
   transition: border-color 0.25s, color 0.25s, background-color 0.25s;
 }
 

diff --git a/lib/styles/variables.css b/lib/styles/variables.css
@@ -58,8 +58,8 @@
   --c-neutral-dark-dimm-2: rgba(255, 255, 255, 0.24);
 
   --c-text-light-1: #1f1f1f;
-  --c-text-light-2: rgba(60, 60, 67, 0.6);
-  --c-text-light-3: rgba(60, 60, 67, 0.3);
+  --c-text-light-2: rgba(60, 60, 67, 0.72);
+  --c-text-light-3: rgba(60, 60, 67, 0.39);
 
   --c-text-dark-1: rgba(235, 235, 245, 0.98);
   --c-text-dark-2: rgba(235, 235, 245, 0.6);