fix: Passing grade tooltip color contrast ratio (#39)

arbirali · web-flow · commit 0c120e90a69d · 2025-06-16T14:14:20.000+05:00
diff --git a/paragon/_progress.scss b/paragon/_progress.scss
@@ -108,7 +108,7 @@
             color: $text-color;
         }
         .donut-chart-label {
-            color: #4B5563;
+            color: $gray-700;
         }
     }
     .grade-bar .grade-bar__base {
@@ -168,15 +168,15 @@
     }
 }
 #minimum-grade-tooltip.bg-primary-500 {
-    background: #9CA3AF !important;
-    border-color: #9CA3AF !important;
+    background: $gray-700 !important;
+    border-color: $gray-700 !important;
     filter: none;
     .arrow {
         &:before {
-            border-bottom-color: #9CA3AF !important;
+            border-bottom-color: $gray-700 !important;
         }
         &:after {
-            border-bottom-color: #9CA3AF !important;
+            border-bottom-color: $gray-700 !important;
         }
     }
     .popover-body {
diff --git a/paragon/_variables.scss b/paragon/_variables.scss
@@ -4,6 +4,7 @@ $primary-light: #F2F7F8;
 $light-dark: #374151;
 $text-color: #111827;
 $text-color-primary: #515661;
+$gray-700: #4b5563;
 $text-color-light: #515661;
 
 // for toggle theme button
diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss
@@ -1099,15 +1099,15 @@ svg {
     }
 }
 #minimum-grade-tooltip.bg-primary-500 {
-    background: #9CA3AF !important;
-    border-color: #9CA3AF !important;
+    background: $gray-700 !important;
+    border-color: $gray-700 !important;
     filter: none;
     .arrow {
         &:before {
-            border-bottom-color: #9CA3AF !important;
+            border-bottom-color: $gray-700 !important;
         }
         &:after {
-            border-bottom-color: #9CA3AF !important;
+            border-bottom-color: $gray-700 !important;
         }
     }
     .popover-body {

Original file line number	Diff line number	Diff line change
`@@ -108,7 +108,7 @@`
`108`	`108`	`color: $text-color;`
`109`	`109`	`}`
`110`	`110`	`.donut-chart-label {`
`111`		`- color: #4B5563;`
	`111`	`+ color: $gray-700;`
`112`	`112`	`}`
`113`	`113`	`}`
`114`	`114`	`.grade-bar .grade-bar__base {`
`@@ -168,15 +168,15 @@`
`168`	`168`	`}`
`169`	`169`	`}`
`170`	`170`	`#minimum-grade-tooltip.bg-primary-500 {`
`171`		`- background: #9CA3AF !important;`
`172`		`- border-color: #9CA3AF !important;`
	`171`	`+ background: $gray-700 !important;`
	`172`	`+ border-color: $gray-700 !important;`
`173`	`173`	`filter: none;`
`174`	`174`	`.arrow {`
`175`	`175`	`&:before {`
`176`		`- border-bottom-color: #9CA3AF !important;`
	`176`	`+ border-bottom-color: $gray-700 !important;`
`177`	`177`	`}`
`178`	`178`	`&:after {`
`179`		`- border-bottom-color: #9CA3AF !important;`
	`179`	`+ border-bottom-color: $gray-700 !important;`
`180`	`180`	`}`
`181`	`181`	`}`
`182`	`182`	`.popover-body {`
Original file line number	Diff line number	Diff line change
`@@ -1099,15 +1099,15 @@ svg {`
`1099`	`1099`	`}`
`1100`	`1100`	`}`
`1101`	`1101`	`#minimum-grade-tooltip.bg-primary-500 {`
`1102`		`- background: #9CA3AF !important;`
`1103`		`- border-color: #9CA3AF !important;`
	`1102`	`+ background: $gray-700 !important;`
	`1103`	`+ border-color: $gray-700 !important;`
`1104`	`1104`	`filter: none;`
`1105`	`1105`	`.arrow {`
`1106`	`1106`	`&:before {`
`1107`		`- border-bottom-color: #9CA3AF !important;`
	`1107`	`+ border-bottom-color: $gray-700 !important;`
`1108`	`1108`	`}`
`1109`	`1109`	`&:after {`
`1110`		`- border-bottom-color: #9CA3AF !important;`
	`1110`	`+ border-bottom-color: $gray-700 !important;`
`1111`	`1111`	`}`
`1112`	`1112`	`}`
`1113`	`1113`	`.popover-body {`