Update text-color-light definitions to be more consistent (#1299)

2 files changed, 24 insertions, 22 deletions

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 0c6ab336..ccdb2d9c 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -88,13 +88,11 @@
     --link-color: var(--accent-color);
 
     --text-color: #000000;
-    --text-color-light: #777777;
-    --text-color-very-light: #999999;
     --kanji-text-color: var(--text-color);
     --kanji-popular-text-color: var(--accent-color);
-    --kanji-rare-text-color: var(--text-color-very-light);
+    --kanji-rare-text-color: var(--text-color-light4);
     --kanji-furigana-text-color: inherit;
-    --reason-text-color: var(--text-color-light);
+    --reason-text-color: var(--text-color-light3);
 
     --light-border-color: #eeeeee;
     --medium-border-color: #dddddd;
@@ -149,13 +147,11 @@
     --link-color: var(--accent-color);
 
     --text-color: #d4d4d4;
-    --text-color-light: #888888;
-    --text-color-very-light: #666666;
     --kanji-text-color: var(--text-color);
     --kanji-popular-text-color: var(--accent-color);
-    --kanji-rare-text-color: var(--text-color-very-light);
+    --kanji-rare-text-color: var(--text-color-light4);
     --kanji-furigana-text-color: inherit;
-    --reason-text-color: var(--text-color-light);
+    --reason-text-color: var(--text-color-light3);
 
     --light-border-color: #2f2f2f;
     --medium-border-color: #3f3f3f;
@@ -960,10 +956,10 @@ button.action-button[data-icon=source-term]::before {
 }
 .term-definition-item::marker,
 .term-glossary-item::marker {
-    color: var(--text-color-light);
+    color: var(--text-color-light3);
 }
 .term-definition-disambiguation-list {
-    color: var(--text-color-light);
+    color: var(--text-color-light3);
 }
 .term-definition-disambiguation-list[data-count='0'] {
     display: none;
@@ -1023,10 +1019,10 @@ button.action-button[data-icon=source-term]::before {
 }
 .frequency-group-item::marker,
 .frequency-item::marker {
-    color: var(--text-color-light);
+    color: var(--text-color-light3);
 }
 .frequency-disambiguation {
-    color: var(--text-color-light);
+    color: var(--text-color-light3);
 }
 .frequency-separator::before {
     content: '';
@@ -1079,7 +1075,7 @@ button.action-button[data-icon=source-term]::before {
     white-space: pre-wrap;
     content: var(--compact-list-separator);
     display: inline;
-    color: var(--text-color-light);
+    color: var(--text-color-light3);
 }
 :root[data-glossary-layout-mode=compact] .frequency-tag-list,
 .frequency-group-item[data-count='1'] .frequency-tag-list {
@@ -1112,7 +1108,7 @@ button.action-button[data-icon=source-term]::before {
 }
 .term-pitch-accent-group::marker,
 .term-pitch-accent::marker {
-    color: var(--text-color-light);
+    color: var(--text-color-light3);
 }
 .term-pitch-accent {
     display: list-item;
@@ -1127,7 +1123,7 @@ button.action-button[data-icon=source-term]::before {
 }
 .term-pitch-accent-disambiguation-list {
     padding-right: 0.25em;
-    color: var(--text-color-light);
+    color: var(--text-color-light3);
 }
 .term-pitch-accent-disambiguation-list::before {
     content: '(';
@@ -1253,7 +1249,7 @@ button.action-button[data-icon=source-term]::before {
     display: table;
     table-layout: fixed;
     white-space: normal;
-    color: var(--text-color-light);
+    color: var(--text-color-light3);
 }
 .term-glossary-item[data-has-image=true][data-image-load-state=load-error] .term-glossary-image-container-overlay::after {
     content: 'Image failed to load';
@@ -1358,7 +1354,7 @@ button.action-button[data-icon=source-term]::before {
     list-style-type: none;
 }
 .kanji-glossary-item::marker {
-    color: var(--text-color-light);
+    color: var(--text-color-light3);
 }
 
 
@@ -1642,7 +1638,7 @@ button.footer-notification-close-button:active {
     white-space: pre-wrap;
     content: var(--compact-list-separator);
     display: inline;
-    color: var(--text-color-light);
+    color: var(--text-color-light3);
 }
 
 :root[data-glossary-layout-mode=compact] .entry-body-section>h5 {
@@ -1680,7 +1676,7 @@ button.footer-notification-close-button:active {
     white-space: pre-wrap;
     content: var(--compact-list-separator);
     display: inline;
-    color: var(--text-color-light);
+    color: var(--text-color-light3);
 }
 
 :root[data-glossary-layout-mode=compact] .term-glossary-image-container {
diff --git a/ext/mixed/css/material.css b/ext/mixed/css/material.css
index 6d56edfc..7da515b5 100644
--- a/ext/mixed/css/material.css
+++ b/ext/mixed/css/material.css
@@ -51,7 +51,10 @@
     --menu-shadow: 0 1px 3px 1px var(--shadow-color), 0 2px 4px 3px var(--shadow-color);
 
     --text-color: #222222;
-    --text-color-light: #666666;
+    --text-color-light1: #555555;
+    --text-color-light2: #666666;
+    --text-color-light3: #777777;
+    --text-color-light4: #888888;
     --background-color: #f8f9fa;
     --background-color-light: #ffffff;
 
@@ -105,7 +108,10 @@
 }
 :root[data-theme=dark] {
     --text-color: #d4d4d4;
-    --text-color-light: #909090;
+    --text-color-light1: #aaaaaa;
+    --text-color-light2: #999999;
+    --text-color-light3: #888888;
+    --text-color-light4: #777777;
     --background-color: #1e1e1e;
     --background-color-light: #0a0a0a;
 
@@ -950,7 +956,7 @@ button.popup-menu-item:active:not(:disabled) {
     box-shadow: none;
 }
 button.popup-menu-item:disabled {
-    color: var(--text-color-light);
+    color: var(--text-color-light2);
 }
 .popup-menu-item-icon {
     display: block;