Improved contrast on poll results

nileane · Aug 31, 2024 · 7718c03 · 7718c03
1 parent 079780a
commit 7718c03
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 32 deletions.
diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
@@ -1956,7 +1956,7 @@ body.app-body  {
     overflow: hidden;
 }
 .app-body :is(.status, .detailed-status) .poll__option {
-    border: 1px solid var(--color-lines);
+    border: 1px solid var(--color-lines-translucent);
     color: var(--color-content-fg);
     font-weight: 500;
     padding: 8px;
@@ -2025,14 +2025,15 @@ body.app-body  {
     position: absolute;
     right: 3px;
     height: 20px;
+    color: var(--color-accent);
 }
 .app-body .poll__option:has(+ .poll__chart.leading) .poll__voted {
     right: 28px;
     color: var(--color-confirm-fg);
 }
 .app-body .poll__chart {
     background: var(--color-lines);
-    opacity: .5;
+    opacity: .8;
     height: auto;
     border-radius: 8px 0 0 8px;
     position: absolute;
@@ -2042,27 +2043,26 @@ body.app-body  {
 }
 @media (prefers-color-scheme: dark) {
     .app-body .poll__chart {
-        opacity: .65;
+        opacity: 1;
     }
 }
 .app-body .poll__chart.leading,
 .app-body .muted .poll__chart.leading,
 .app-body .poll__option:has(.poll__voted) + .poll__chart.leading {
-    background: var(--color-confirm-bg);
-    opacity: 1;
+    background: var(--color-confirm);
+    opacity: .5;
 }
 .app-body .poll__option:has(.poll__voted) {
     border-color: var(--color-accent);
     background-color: transparent;
-    color: var(--color-accent);
 }
 .app-body .poll__option:has(.poll__voted) + .poll__chart {
-    background-color: var(--color-accent-bg);
+    background-color: color-mix(in srgb, var(--color-accent), transparent 70%);
     opacity: 1;
 }
 .app-body .poll__option:has(+ .poll__chart.leading),
 .app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) {
-    border-color: var(--color-confirm-bg);
+    border-color: color-mix(in srgb, var(--color-confirm), transparent 30%);
     color: var(--color-content-fg);
     background-color: transparent;
     background-size: 20px;

diff --git a/TangerineUI-lagoon.css b/TangerineUI-lagoon.css
@@ -1956,7 +1956,7 @@ body.app-body  {
     overflow: hidden;
 }
 .app-body :is(.status, .detailed-status) .poll__option {
-    border: 1px solid var(--color-lines);
+    border: 1px solid var(--color-lines-translucent);
     color: var(--color-content-fg);
     font-weight: 500;
     padding: 8px;
@@ -2025,14 +2025,15 @@ body.app-body  {
     position: absolute;
     right: 3px;
     height: 20px;
+    color: var(--color-accent);
 }
 .app-body .poll__option:has(+ .poll__chart.leading) .poll__voted {
     right: 28px;
     color: var(--color-confirm-fg);
 }
 .app-body .poll__chart {
     background: var(--color-lines);
-    opacity: .5;
+    opacity: .8;
     height: auto;
     border-radius: 8px 0 0 8px;
     position: absolute;
@@ -2042,27 +2043,26 @@ body.app-body  {
 }
 @media (prefers-color-scheme: dark) {
     .app-body .poll__chart {
-        opacity: .65;
+        opacity: 1;
     }
 }
 .app-body .poll__chart.leading,
 .app-body .muted .poll__chart.leading,
 .app-body .poll__option:has(.poll__voted) + .poll__chart.leading {
-    background: var(--color-confirm-bg);
-    opacity: 1;
+    background: var(--color-confirm);
+    opacity: .5;
 }
 .app-body .poll__option:has(.poll__voted) {
     border-color: var(--color-accent);
     background-color: transparent;
-    color: var(--color-accent);
 }
 .app-body .poll__option:has(.poll__voted) + .poll__chart {
-    background-color: var(--color-accent-bg);
+    background-color: color-mix(in srgb, var(--color-accent), transparent 70%);
     opacity: 1;
 }
 .app-body .poll__option:has(+ .poll__chart.leading),
 .app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) {
-    border-color: var(--color-confirm-bg);
+    border-color: color-mix(in srgb, var(--color-confirm), transparent 30%);
     color: var(--color-content-fg);
     background-color: transparent;
     background-size: 20px;

diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
@@ -1956,7 +1956,7 @@ body.app-body  {
     overflow: hidden;
 }
 .app-body :is(.status, .detailed-status) .poll__option {
-    border: 1px solid var(--color-lines);
+    border: 1px solid var(--color-lines-translucent);
     color: var(--color-content-fg);
     font-weight: 500;
     padding: 8px;
@@ -2025,14 +2025,15 @@ body.app-body  {
     position: absolute;
     right: 3px;
     height: 20px;
+    color: var(--color-accent);
 }
 .app-body .poll__option:has(+ .poll__chart.leading) .poll__voted {
     right: 28px;
     color: var(--color-confirm-fg);
 }
 .app-body .poll__chart {
     background: var(--color-lines);
-    opacity: .5;
+    opacity: .8;
     height: auto;
     border-radius: 8px 0 0 8px;
     position: absolute;
@@ -2042,27 +2043,26 @@ body.app-body  {
 }
 @media (prefers-color-scheme: dark) {
     .app-body .poll__chart {
-        opacity: .65;
+        opacity: 1;
     }
 }
 .app-body .poll__chart.leading,
 .app-body .muted .poll__chart.leading,
 .app-body .poll__option:has(.poll__voted) + .poll__chart.leading {
-    background: var(--color-confirm-bg);
-    opacity: 1;
+    background: var(--color-confirm);
+    opacity: .5;
 }
 .app-body .poll__option:has(.poll__voted) {
     border-color: var(--color-accent);
     background-color: transparent;
-    color: var(--color-accent);
 }
 .app-body .poll__option:has(.poll__voted) + .poll__chart {
-    background-color: var(--color-accent-bg);
+    background-color: color-mix(in srgb, var(--color-accent), transparent 70%);
     opacity: 1;
 }
 .app-body .poll__option:has(+ .poll__chart.leading),
 .app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) {
-    border-color: var(--color-confirm-bg);
+    border-color: color-mix(in srgb, var(--color-confirm), transparent 30%);
     color: var(--color-content-fg);
     background-color: transparent;
     background-size: 20px;

diff --git a/TangerineUI.css b/TangerineUI.css
@@ -1956,7 +1956,7 @@ body.app-body  {
     overflow: hidden;
 }
 .app-body :is(.status, .detailed-status) .poll__option {
-    border: 1px solid var(--color-lines);
+    border: 1px solid var(--color-lines-translucent);
     color: var(--color-content-fg);
     font-weight: 500;
     padding: 8px;
@@ -2025,14 +2025,15 @@ body.app-body  {
     position: absolute;
     right: 3px;
     height: 20px;
+    color: var(--color-accent);
 }
 .app-body .poll__option:has(+ .poll__chart.leading) .poll__voted {
     right: 28px;
     color: var(--color-confirm-fg);
 }
 .app-body .poll__chart {
     background: var(--color-lines);
-    opacity: .5;
+    opacity: .8;
     height: auto;
     border-radius: 8px 0 0 8px;
     position: absolute;
@@ -2042,27 +2043,26 @@ body.app-body  {
 }
 @media (prefers-color-scheme: dark) {
     .app-body .poll__chart {
-        opacity: .65;
+        opacity: 1;
     }
 }
 .app-body .poll__chart.leading,
 .app-body .muted .poll__chart.leading,
 .app-body .poll__option:has(.poll__voted) + .poll__chart.leading {
-    background: var(--color-confirm-bg);
-    opacity: 1;
+    background: var(--color-confirm);
+    opacity: .5;
 }
 .app-body .poll__option:has(.poll__voted) {
     border-color: var(--color-accent);
     background-color: transparent;
-    color: var(--color-accent);
 }
 .app-body .poll__option:has(.poll__voted) + .poll__chart {
-    background-color: var(--color-accent-bg);
+    background-color: color-mix(in srgb, var(--color-accent), transparent 70%);
     opacity: 1;
 }
 .app-body .poll__option:has(+ .poll__chart.leading),
 .app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) {
-    border-color: var(--color-confirm-bg);
+    border-color: color-mix(in srgb, var(--color-confirm), transparent 30%);
     color: var(--color-content-fg);
     background-color: transparent;
     background-size: 20px;