feat: easier list item theming

dojo · Apr 13, 2021 · d7658b6 · d7658b6
1 parent 4b0ce16
commit d7658b6
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 4 deletions.
diff --git a/src/theme/dojo/list-item.m.css b/src/theme/dojo/list-item.m.css
@@ -16,14 +16,18 @@
 .root.active {
 	border: 1px solid var(--color-highlight-border);
 	transition: none;
+	background: var(--list-item-active-background);
+	color: var(--list-item-active-color);
 }
 
 .selected {
-	background: var(--color-background-faded);
+	background: var(--list-item-selected-background);
+	color: var(--list-item-selected-color);
 }
 
 .disabled {
-	color: var(--color-text-faded);
+	color: var(--list-item-disabled-color);
+	background: var(--list-item-disabled-background);
 	font-style: italic;
 }
 

diff --git a/src/theme/dojo/variants/dark.m.css b/src/theme/dojo/variants/dark.m.css
@@ -71,6 +71,13 @@
 	--tab-button-active-color: var(--color-highlight);
 	--tab-button-disabled-color: var(--color-border);
 
+	--list-item-selected-background: var(--color-background-faded);
+	--list-item-selected-color: var(--color-text-primary);
+	--list-item-disabled-background: inherit;
+	--list-item-disabled-color: var(--color-text-faded);
+	--list-item-active-background: inherit;
+	--list-item-active-color: var(--color-text-primary);
+
 	--loader-size-small: 24px;
 	--loader-size-medium: 36px;
 	--loader-size-large: 48px;

diff --git a/src/theme/dojo/variants/default.m.css b/src/theme/dojo/variants/default.m.css
@@ -76,6 +76,13 @@
 	--tab-button-active-color: var(--color-highlight);
 	--tab-button-disabled-color: var(--color-border);
 
+	--list-item-selected-background: var(--color-background-faded);
+	--list-item-selected-color: var(--color-text-primary);
+	--list-item-disabled-background: inherit;
+	--list-item-disabled-color: var(--color-text-faded);
+	--list-item-active-background: inherit;
+	--list-item-active-color: var(--color-text-primary);
+
 	--fab-background: var(--color-background);
 	--fab-color: inherit;
 

diff --git a/src/theme/material/list-item.m.css b/src/theme/material/list-item.m.css
@@ -16,12 +16,19 @@
 }
 
 .root.selected {
-	background: var(--mdc-theme-on-surface-hover);
+	background: var(--mdc-list-item-selected-background);
+	color: var(--mdc-list-item-selected-color);
+}
+
+.root.disabled {
+	background: var(--mdc-list-item-disabled-background);
+	color: var(--mdc-list-item-disabled-color);
 }
 
 .active {
 	border: none;
-	background: var(--mdc-theme-on-surface);
+	background: var(--mdc-list-item-active-background);
+	color: var(--mdc-list-item-active-color);
 	min-height: 48px;
 	height: 100%;
 	box-shadow: none;

diff --git a/src/theme/material/variants/dark.m.css b/src/theme/material/variants/dark.m.css
@@ -96,4 +96,11 @@
 	--loader-size-small: 24px;
 	--loader-size-medium: 36px;
 	--loader-size-large: 48px;
+
+	--mdc-list-item-selected-background: var(--mdc-theme-on-surface-hover);
+	--mdc-list-item-selected-color: var(--mdc-text-color);
+	--mdc-list-item-disabled-background: inherit;
+	--mdc-list-item-disabled-color: var(--mdc-text-color);
+	--mdc-list-item-active-background: var(--mdc-theme-on-surface);
+	--mdc-list-item-active-color: var(--mdc-text-color);
 }
diff --git a/src/theme/material/variants/default.m.css b/src/theme/material/variants/default.m.css
@@ -107,4 +107,11 @@
 	--loader-size-small: 24px;
 	--loader-size-medium: 36px;
 	--loader-size-large: 48px;
+
+	--mdc-list-item-selected-background: var(--mdc-theme-on-surface-hover);
+	--mdc-list-item-selected-color: var(--mdc-text-color);
+	--mdc-list-item-disabled-background: inherit;
+	--mdc-list-item-disabled-color: var(--mdc-text-color);
+	--mdc-list-item-active-background: var(--mdc-theme-on-surface);
+	--mdc-list-item-active-color: var(--mdc-text-color);
 }