Improve expression variables (#1453)

* Improve how colors are used for expressions

* Add more color definitions

1 files changed, 38 insertions, 20 deletions

diff --git a/ext/css/display.css b/ext/css/display.css
index 63213103..0b1c5f93 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -108,7 +108,12 @@
     --expression-text-color: var(--text-color);
     --expression-text-color-popular: var(--accent-color);
     --expression-text-color-rare: var(--text-color-light4);
-    --expression-furigana-text-color: inherit;
+    --expression-furigana-text-color: var(--expression-text-color);
+    --expression-furigana-text-color-popular: var(--expression-text-color-popular);
+    --expression-furigana-text-color-rare: var(--expression-text-color-rare);
+    --expression-reading-text-color: var(--expression-furigana-text-color);
+    --expression-reading-text-color-popular: var(--expression-furigana-text-color-popular);
+    --expression-reading-text-color-rare: var(--expression-furigana-text-color-rare);
     --expression-kanji-border-color: var(--dark-border-color);
 
     --light-border-color: #eeeeee;
@@ -173,7 +178,12 @@
     --expression-text-color: var(--text-color);
     --expression-text-color-popular: var(--accent-color);
     --expression-text-color-rare: var(--text-color-light4);
-    --expression-furigana-text-color: inherit;
+    --expression-furigana-text-color: var(--expression-text-color);
+    --expression-furigana-text-color-popular: var(--expression-text-color-popular);
+    --expression-furigana-text-color-rare: var(--expression-text-color-rare);
+    --expression-reading-text-color: var(--expression-furigana-text-color);
+    --expression-reading-text-color-popular: var(--expression-furigana-text-color-popular);
+    --expression-reading-text-color-rare: var(--expression-furigana-text-color-rare);
     --expression-kanji-border-color: var(--dark-border-color);
 
     --light-border-color: #2f2f2f;
@@ -818,19 +828,31 @@ button.action-button[data-icon=source-term]::before {
 
 
 /* Expressions */
-.expression-kanji-link {
-    border-bottom: var(--expression-thin-border-size) dashed var(--expression-kanji-border-color);
-    color: var(--expression-text-color);
-    text-decoration: none;
-    cursor: pointer;
-}
 .expression-list {
     display: inline;
     margin-right: var(--expression-list-end-space);
 }
 .expression {
+    --expression-current-text-color: var(--expression-text-color);
+    --expression-current-kanji-text-color: var(--expression-current-text-color);
+    --expression-current-kanji-border-color: var(--expression-kanji-border-color);
+    --expression-current-reading-text-color: var(--expression-reading-text-color);
+    --expression-current-furigana-text-color: var(--expression-furigana-text-color);
+
     display: inline-block;
 }
+.entry[data-expression-multi=true] .expression[data-frequency=popular] {
+    --expression-current-text-color: var(--expression-text-color-popular);
+    --expression-current-kanji-text-color: var(--expression-current-text-color-popular);
+    --expression-current-reading-text-color: var(--expression-reading-text-color-popular);
+    --expression-current-furigana-text-color: var(--expression-furigana-text-color-popular);
+}
+.entry[data-expression-multi=true] .expression[data-frequency=rare] {
+    --expression-current-text-color: var(--expression-text-color-rare);
+    --expression-current-kanji-text-color: var(--expression-current-text-color-rare);
+    --expression-current-reading-text-color: var(--expression-reading-text-color-rare);
+    --expression-current-furigana-text-color: var(--expression-furigana-text-color-rare);
+}
 .expression-details {
     display: inline;
 }
@@ -861,11 +883,11 @@ button.action-button[data-icon=source-term]::before {
     margin-left: var(--expression-reading-space);
 }
 .expression-text {
-    color: var(--expression-text-color);
+    color: var(--expression-current-text-color);
     font-size: var(--expression-font-size);
 }
 .expression-reading {
-    color: var(--expression-text-color);
+    color: var(--expression-current-reading-text-color);
     font-size: var(--expression-reading-font-size);
 }
 .expression-list>.expression:not(:last-of-type)>.expression-text-container>.expression-text-outer::after {
@@ -877,17 +899,13 @@ button.action-button[data-icon=source-term]::before {
     font-size: var(--expression-reading-font-size);
 }
 .expression-text>ruby>rt {
-    color: var(--expression-furigana-text-color);
-}
-.entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-text,
-.entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-reading,
-.entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-kanji-link {
-    color: var(--expression-text-color-popular);
+    color: var(--expression-current-furigana-text-color);
 }
-.entry[data-expression-multi=true] .expression[data-frequency=rare] .expression-text,
-.entry[data-expression-multi=true] .expression[data-frequency=rare] .expression-reading,
-.entry[data-expression-multi=true] .expression[data-frequency=rare] .expression-kanji-link {
-    color: var(--expression-text-color-rare);
+.expression-kanji-link {
+    border-bottom: var(--expression-thin-border-size) dashed var(--expression-current-kanji-border-color);
+    color: var(--expression-current-kanji-text-color);
+    text-decoration: none;
+    cursor: pointer;
 }
 .entry[data-expression-multi=true] .expression-list-details {
     display: block;