feat(theme): add support for accent-text

Joxit · Jan 7, 2023 · 441def4 · 441def4
1 parent 9b5b935
commit 441def4
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 18 deletions.
diff --git a/src/components/dialogs/dialogs-menu.riot b/src/components/dialogs/dialogs-menu.riot
@@ -115,6 +115,10 @@
       color: var(--primary-text);
     }
 
+    material-dropdown .material-dropdown-container .material-dropdown-item:hover {
+      background-color: rgba(0, 0, 0, 0.12);
+    }
+
     :host .material-dropdown-wrapper material-dropdown .material-dropdown-container {
       right: 0;
       top: 2em;

diff --git a/src/components/tag-history/tag-history.riot b/src/components/tag-history/tag-history.riot
@@ -23,7 +23,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         waves-color="var(--hover-background)"
         waves-center="true"
         rounded="true"
-        waves-color="#ddd"
         href="{ toTaglist() }"
         icon
       >
@@ -38,12 +37,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
   <material-tabs
     if="{ state.archs && state.loadend }"
-    color="#25313b"
-    text-color="#fff"
+    color="var(--background)"
+    text-color="var(--primary-text)"
+    text-selected-color="var(--accent-text)"
+    line-color="var(--background)"
+    line-selected-color="var(--accent-text)"
     useLine="{ true }"
     tabs="{ state.archs }"
     onTabChanged="{ onTabChanged }"
-    inverted
   ></material-tabs>
 
   <material-card each="{ element in state.elements }">

diff --git a/src/scripts/theme.js b/src/scripts/theme.js
@@ -3,12 +3,14 @@ const LIGHT_THEME = {
   'neutral-text': '#777',
   'background': '#fff',
   'hover-background': '#eee',
+  'accent-text': 'rgba(0,0,0,0.26)',
 };
 const DARK_THEME = {
   'primary-text': '#8A9EBA',
   'neutral-text': '#36527A',
   'background': '#22272e',
   'hover-background': '#30404D',
+  'accent-text': '#5684C4',
 };
 
 let THEME;

diff --git a/src/style.scss b/src/style.scss
@@ -95,13 +95,6 @@ material-tabs material-button .content .text {
   text-transform: none;
 }
 
-material-tabs .line-wrapper .line {
-  background-color: #25313b;
-}
-material-tabs material-button.selected .content .text {
-  color: #25313b;
-}
-
 material-spinner {
   align-self: center;
 }
@@ -143,7 +136,7 @@ h2 {
 }
 
 .list.highlight:hover {
-  background-color: var(--hover-background);
+  background-color: rgba(0, 0, 0, 0.12);
   cursor: pointer;
 }
 
@@ -250,7 +243,6 @@ material-card table th {
   text-align: left;
 }
 
-material-button:hover > :first-child,
 material-card .material-card-title-action material-button:hover button,
 material-card table tbody tr:hover {
   background-color: rgba(0, 0, 0, 0.12) !important;
@@ -288,7 +280,7 @@ material-card table th.material-card-th-sorted-descending:hover {
 
 material-card table th.material-card-th-sorted-ascending:hover:before,
 material-card table th.material-card-th-sorted-descending:hover:before {
-  color: rgba(0, 0, 0, 0.26);
+  color: var(--accent-text);
 }
 
 material-card table th.material-card-th-sorted-ascending:before,
@@ -390,10 +382,6 @@ taglist .image-size {
   width: 7em;
 }
 
-material-button:hover material-waves {
-  background: none;
-}
-
 material-card material-button {
   background-color: inherit;
 }