Revert "Use currentColor to style svg (#9316)" (#9799)

This reverts commit dc7f2a57bb.

core/ui/EditTemplate/tags.tid

@@ -17,11 +17,13 @@ tags: $:/tags/EditTemplate
 	<$let backgroundColor=<<colour>> >
 		<span class="tc-tag-label tc-tag-list-item tc-small-gap-right"
 			data-tag-title=<<currentTiddler>>
-			style=`color:$(foregroundColor)$; background-color:$(backgroundColor)$;`
+			style=`color:$(foregroundColor)$; fill:$(foregroundColor)$; background-color:$(backgroundColor)$;`
 		>
 			<$transclude tiddler=<<icon>>/>
 			<$view field="title" format="text"/>
-			<$button class="tc-btn-invisible tc-remove-tag-button">
+			<$button class="tc-btn-invisible tc-remove-tag-button"
+				style.fill=<<foregroundColor>>
+			>
 				<$action-listops $tiddler=<<saveTiddler>> $field=<<tagField>> $subfilter="-[{!!title}]"/>
 				{{$:/core/images/close-button}}
 			</$button>

core/ui/ViewTemplate/title.tid

@@ -2,7 +2,7 @@ title: $:/core/ui/ViewTemplate/title
 tags: $:/tags/ViewTemplate
 
 \whitespace trim
-\define title-styles() color:$(foregroundColor)$;
+\define title-styles() fill:$(foregroundColor)$;
 
 <div class="tc-tiddler-title tc-clearfix">
 	<div class="tc-titlebar">

core/wiki/macros/tag.tid

@@ -3,6 +3,7 @@ tags: $:/tags/Macro
 
 \define tag-pill-styles()
 background-color:$(backgroundColor)$;
+fill:$(foregroundColor)$;
 color:$(foregroundColor)$;
 \end
 

core/wiki/macros/thumbnails.tid

@@ -21,7 +21,7 @@ tags: $:/tags/Macro
 	style="width:$width$px;height:$height$px;background-color:$background-color$;"
 ></$reveal></div><div
 	class="tc-thumbnail-icon"
-	style="color:$color$;"
+	style="fill:$color$;color:$color$;"
 >$icon$</div><div class="tc-thumbnail-caption">$caption$</div></div></$link>
 \end
 

plugins/tiddlywiki/comments/styles.tid

@@ -25,7 +25,7 @@ tags: [[$:/tags/Stylesheet]]
 }
 
 .tc-comment-button button svg {
-	color: <<colour download-background>>;
+	fill: <<colour download-background>>;
 	height: 2em;
 	width: 2em;
 }

plugins/tiddlywiki/menubar/styles.tid

@@ -87,6 +87,8 @@ nav.tc-menubar li.tc-menubar-item > button {
 	font-weight: 700;
 	color: <<colour foreground>>;
 	color: <<colour menubar-foreground>>;
+	fill: <<colour foreground>>;
+	fill: <<colour menubar-foreground>>;
 	text-decoration: none;
 	padding: 0.5em;
 	margin: 0;
@@ -103,14 +105,16 @@ nav.tc-menubar li.tc-menubar-item > button.tc-selected {
 	background: <<colour menubar-foreground>>;
 	color: <<colour background>>;
 	color: <<colour menubar-background>>;
+	fill: <<colour background>>;
+	fill: <<colour menubar-background>>;
 }
 
 nav.tc-menubar li.tc-menubar-item svg {
 	transition: none;
 	width: 1em;
 	height: 1em;
-	color: <<colour foreground>>;
-	color: <<colour menubar-foreground>>;
+	fill: <<colour foreground>>;
+	fill: <<colour menubar-foreground>>;
 }
 
 nav.tc-menubar li.tc-menubar-item .tc-menubar-dropdown-arrow svg {
@@ -120,8 +124,8 @@ nav.tc-menubar li.tc-menubar-item .tc-menubar-dropdown-arrow svg {
 
 nav.tc-menubar li.tc-menubar-item > a.tc-selected svg,
 nav.tc-menubar li.tc-menubar-item > button.tc-selected svg {
-	color: <<colour background>>;
-	color: <<colour menubar-background>>;
+	fill: <<colour background>>;
+	fill: <<colour menubar-background>>;
 }
 
 nav.tc-menubar li.tc-menubar-item > a:hover,
@@ -131,6 +135,8 @@ nav.tc-menubar li.tc-menubar-item > button:hover {
 	background: <<colour menubar-foreground>>;
 	color: <<colour background>>;
 	color: <<colour menubar-background>>;
+	fill: <<colour background>>;
+	fill: <<colour menubar-background>>;
 	border-radius: 0;
 	text-decoration: none;
 }
@@ -142,6 +148,8 @@ nav.tc-menubar li.tc-menubar-item > button:active {
 	background: <<colour menubar-foreground>>;
 	color: <<colour background>>;
 	color: <<colour menubar-background>>;
+	fill: <<colour background>>;
+	fill: <<colour menubar-background>>;
 	border-radius: 0;
 	text-decoration: none;
 }

plugins/tiddlywiki/text-slicer/styles.tid

@@ -96,7 +96,7 @@ div.tc-edit-template-document-tiddler-heading a:hover {
 
 .tc-view-template-document-tiddler-heading-icon svg,
 .tc-edit-template-document-tiddler-heading-icon svg {
-	color: <<colour background>>;	
+	fill: <<colour background>>;	
 }
 
 .tc-view-template-document-tiddler {

plugins/tiddlywiki/tour/simplified-tiddler-with-tags.tid

@@ -3,6 +3,7 @@ title: $:/plugins/tiddlywiki/tour/simplified-tiddler-with-tags
 \whitespace trim
 \define tag-pill-styles()
 background-color:$(backgroundColor)$;
+fill:$(foregroundColor)$;
 color:$(foregroundColor)$;
 \end
 

plugins/tiddlywiki/tour/styles.tid

@@ -66,6 +66,7 @@ tags: $:/tags/Stylesheet
 
 .tc-tour-panel-controls .tc-tour-panel-list-button.tc-selected {
 	color: <<colour tour-chooser-button-selected-foreground>>;
+	fill: <<colour tour-chooser-button-selected-foreground>>;
 	background: <<color tour-chooser-button-selected-background>>;
 }
 
@@ -103,6 +104,7 @@ tags: $:/tags/Stylesheet
 	border-radius: 1em;
 	background: <<colour tour-chooser-item-start-background>>;
 	color: <<colour tour-chooser-item-start-foreground>>;
+	fill: <<colour tour-chooser-item-start-foreground>>;
 	text-transform: uppercase;
 }
 
@@ -165,7 +167,7 @@ tags: $:/tags/Stylesheet
 }
 
 .tc-tour-task svg {
-	color: <<colour tour-step-task-foreground>>;
+	fill: <<colour tour-step-task-foreground>>;
 	vertical-align: middle;
 	width: 1.2em;
 	height: 1.2em;
@@ -238,6 +240,7 @@ tags: $:/tags/Stylesheet
 .tc-tour-settings-tour-step-launch-button:hover {
 	background: <<colour foreground>>;
 	color: <<colour background>>;
+	fill: <<colour background>>;
 }
 
 .tc-tour-settings-tour-step-heading-step-number {

plugins/tiddlywiki/upgrade/styles.tid

@@ -20,11 +20,11 @@ tags: $:/tags/Stylesheet
 .tc-upgrade-wizard svg.tc-image-download-button {
 	width: 14em;
 	height: 14em;
-	color: <<colour muted-foreground>>;
+	fill: <<colour muted-foreground>>;
 }
 
 .tc-upgrade-wizard:hover svg.tc-image-download-button {
-	color: <<colour foreground>>;
+	fill: <<colour foreground>>;
 }
 
 .tc-upgrade-wizard svg .tc-image-download-button-ring {

themes/tiddlywiki/seamless/base.tid

@@ -94,7 +94,7 @@ html:-webkit-full-screen {
 
 /* Adjust the colour of the page controls */
 body.tc-body .tc-page-controls svg {
-	color: <<colour muted-foreground>>;
+	fill: <<colour muted-foreground>>;
 }
 
 /* Adjust the colour of the sidebar selected tabs */

themes/tiddlywiki/vanilla/base.tid

@@ -94,6 +94,7 @@ button:-moz-focusring, input:-moz-focusring, textarea:-moz-focusring, select:-mo
 html button {
 	line-height: 1.2;
 	color: <<colour button-foreground>>;
+	fill: <<colour button-foreground>>;
 	background: <<colour button-background>>;
 	border-color: <<colour button-border>>;
 	cursor: pointer;
@@ -104,6 +105,10 @@ button:disabled {
 	color: <<colour muted-foreground>>;
 }
 
+button:disabled svg {
+	fill: <<colour muted-foreground>>;
+}
+
 /*
 ** Basic element styles
 */
@@ -126,7 +131,7 @@ body.tc-body {
 	<<custom-background-datauri>>
 	color: <<colour foreground>>;
 	background-color: <<colour page-background>>;
-	fill: currentColor;
+	fill: <<colour foreground>>;
 }
 
 <<if-background-attachment """
@@ -573,7 +578,7 @@ a.tc-tiddlylink-external:hover {
 
 .tc-sidebar-tab-open .tc-btn-invisible.tc-btn-mini svg {
 	font-size: 0.7em;
-	color: <<colour muted-foreground>>;
+	fill: <<colour muted-foreground>>;
 }
 
 /*
@@ -606,6 +611,7 @@ button svg, button img, label svg, label img {
 	border: none;
 	cursor: pointer;
 	color: <<colour foreground>>;
+	fill: <<colour foreground>>;
 }
 
 button:disabled.tc-btn-invisible  {
@@ -631,6 +637,10 @@ html body.tc-body .tc-btn-boxed svg {
 	color: <<colour background>>;
 }
 
+html body.tc-body .tc-btn-boxed:hover svg {
+	fill: <<colour background>>;
+}
+
 .tc-btn-rounded {
 	font-size: 0.5em;
 	line-height: 2;
@@ -644,7 +654,7 @@ html body.tc-body .tc-btn-boxed svg {
 
 html body.tc-body .tc-btn-rounded svg {
 	font-size: 1.6666em;
-	color: <<colour background>>;
+	fill: <<colour background>>;
 }
 
 .tc-btn-rounded:hover {
@@ -653,10 +663,14 @@ html body.tc-body .tc-btn-rounded svg {
 	color: <<colour muted-foreground>>;
 }
 
+html body.tc-body .tc-btn-rounded:hover svg {
+	fill: <<colour muted-foreground>>;
+}
+
 .tc-btn-icon svg {
 	height: 1em;
 	width: 1em;
-	color: <<colour muted-foreground>>;
+	fill: <<colour muted-foreground>>;
 }
 
 
@@ -680,6 +694,7 @@ html body.tc-body .tc-btn-rounded svg {
 	margin: 4px 8px 4px 8px;
 	background: <<colour download-background>>;
 	color: <<colour download-foreground>>;
+	fill: <<colour download-foreground>>;
 	border: none;
 	border-radius: 2px;
 	font-size: 1.2em;
@@ -692,6 +707,7 @@ html body.tc-body .tc-btn-rounded svg {
 	height: 2em;
 	width: 2em;
 	vertical-align: middle;
+	fill: <<colour download-foreground>>;
 }
 
 .tc-primary-btn {
@@ -704,6 +720,7 @@ html body.tc-body .tc-btn-rounded svg {
 
 .tc-sidebar-lists button {
 	color: <<colour sidebar-button-foreground>>;
+	fill: <<colour sidebar-button-foreground>>;
 }
 
 .tc-sidebar-lists button.tc-btn-mini {
@@ -744,11 +761,11 @@ button svg.tc-image-button, button .tc-image-button img {
 
 .tc-unfold-banner svg, .tc-fold-banner svg {
 	height: 0.75em;
-	color: <<colour tiddler-controls-foreground>>;
+	fill: <<colour tiddler-controls-foreground>>;
 }
 
 .tc-unfold-banner:hover svg, .tc-fold-banner:hover svg {
-	color: <<colour tiddler-controls-foreground-hover>>;
+	fill: <<colour tiddler-controls-foreground-hover>>;
 }
 
 .tc-fold-banner {
@@ -903,11 +920,11 @@ button.tc-btn-invisible.tc-remove-tag-button {
 }
 
 .tc-topbar svg {
-	color: <<colour muted-foreground>>;
+	fill: <<colour muted-foreground>>;
 }
 
 .tc-topbar button:hover svg {
-	color: <<colour foreground>>;
+	fill: <<colour foreground>>;
 }
 
 @media (max-width: <<sidebarbreakpoint-minus-one>>) {
@@ -920,6 +937,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
 
 .tc-sidebar-header {
 	color: <<colour sidebar-foreground>>;
+	fill: <<colour sidebar-foreground>>;
 }
 
 .tc-sidebar-header .tc-title a.tc-tiddlylink-resolves {
@@ -969,11 +987,11 @@ button.tc-btn-invisible.tc-remove-tag-button {
 }
 
 .tc-page-controls svg {
-	color: <<colour sidebar-controls-foreground>>;
+	fill: <<colour sidebar-controls-foreground>>;
 }
 
 .tc-page-controls button:hover svg, .tc-page-controls a:hover svg {
-	color: <<colour sidebar-controls-foreground-hover>>;
+	fill: <<colour sidebar-controls-foreground-hover>>;
 }
 
 .tc-sidebar-lists .tc-menu-list-item {
@@ -1270,7 +1288,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
 
 .tc-tiddler-controls button svg, .tc-tiddler-controls button img,
 .tc-search button svg, .tc-search a svg {
-	color: <<colour tiddler-controls-foreground>>;
+	fill: <<colour tiddler-controls-foreground>>;
 }
 
 .tc-tiddler-controls button svg, .tc-tiddler-controls button img {
@@ -1285,12 +1303,12 @@ button.tc-btn-invisible.tc-remove-tag-button {
 
 .tc-tiddler-controls button.tc-selected svg,
 .tc-page-controls button.tc-selected svg  {
-	color: <<colour tiddler-controls-foreground-selected>>;
+	fill: <<colour tiddler-controls-foreground-selected>>;
 }
 
 .tc-tiddler-controls button.tc-btn-invisible:hover svg,
 .tc-search button:hover svg, .tc-search a:hover svg {
-	color: <<colour tiddler-controls-foreground-hover>>;
+	fill: <<colour tiddler-controls-foreground-hover>>;
 }
 
 @media print {
@@ -1418,6 +1436,7 @@ html body.tc-body.tc-single-tiddler-window {
 	vertical-align: middle;
 	background-color: <<colour tiddler-controls-foreground>>;
 	color: <<colour tiddler-controls-foreground-selected>>;
+	fill: <<colour tiddler-controls-foreground-selected>>;
 	border-radius: 4px;
 	padding: 3px;
 	margin: 2px 0 2px 4px;
@@ -1448,6 +1467,7 @@ html body.tc-body.tc-single-tiddler-window {
 
 .tc-editor-toolbar button:hover {
 	background-color: <<colour tiddler-controls-foreground-selected>>;
+	fill: <<colour background>>;
 	color: <<colour background>>;
 }
 
@@ -1528,43 +1548,43 @@ html body.tc-body.tc-single-tiddler-window {
 */
 
 .tc-page-controls svg.tc-image-new-button {
-	color: <<colour toolbar-new-button>>;
+	fill: <<colour toolbar-new-button>>;
 }
 
 .tc-page-controls svg.tc-image-options-button {
-	color: <<colour toolbar-options-button>>;
+	fill: <<colour toolbar-options-button>>;
 }
 
 .tc-page-controls svg.tc-image-save-button {
-	color: <<colour toolbar-save-button>>;
+	fill: <<colour toolbar-save-button>>;
 }
 
 .tc-tiddler-controls button svg.tc-image-info-button {
-	color: <<colour toolbar-info-button>>;
+	fill: <<colour toolbar-info-button>>;
 }
 
 .tc-tiddler-controls button svg.tc-image-edit-button {
-	color: <<colour toolbar-edit-button>>;
+	fill: <<colour toolbar-edit-button>>;
 }
 
 .tc-tiddler-controls button svg.tc-image-close-button {
-	color: <<colour toolbar-close-button>>;
+	fill: <<colour toolbar-close-button>>;
 }
 
 .tc-tiddler-controls button svg.tc-image-delete-button {
-	color: <<colour toolbar-delete-button>>;
+	fill: <<colour toolbar-delete-button>>;
 }
 
 .tc-tiddler-controls button svg.tc-image-cancel-button {
-	color: <<colour toolbar-cancel-button>>;
+	fill: <<colour toolbar-cancel-button>>;
 }
 
 .tc-tiddler-controls button svg.tc-image-done-button {
-	color: <<colour toolbar-done-button>>;
+	fill: <<colour toolbar-done-button>>;
 }
 
 .tc-page-controls svg.tc-image-layout-button {
-	color: <<colour toolbar-options-button>>;
+	fill: <<colour toolbar-options-button>>;
 }
 
 /*
@@ -1704,7 +1724,7 @@ html body.tc-body.tc-single-tiddler-window {
 .tc-edit-field-remove svg {
 	height: 1em;
 	width: 1em;
-	color: <<colour muted-foreground>>;
+	fill: <<colour muted-foreground>>;
 	vertical-align: middle;
 }
 
@@ -1818,7 +1838,7 @@ html body.tc-body.tc-single-tiddler-window {
 .tc-btn-dropdown svg, .tc-btn-dropdown img {
 	height: 1em;
 	width: 1em;
-	color: <<colour muted-foreground>>;
+	fill: <<colour muted-foreground>>;
 }
 
 .tc-drop-down-wrapper {
@@ -1841,15 +1861,15 @@ html body.tc-body.tc-single-tiddler-window {
 }
 
 .tc-drop-down button svg, .tc-drop-down a svg  {
-	color: <<colour foreground>>;
+	fill: <<colour foreground>>;
 }
 
 .tc-drop-down button:disabled svg {
-	color: <<colour muted-foreground>>;
+	fill: <<colour muted-foreground>>;
 }
 
 .tc-drop-down button.tc-btn-invisible:hover svg {
-	color: <<colour background>>;
+	fill: <<colour background>>;
 }
 
 .tc-drop-down .tc-drop-down-info {
@@ -2336,6 +2356,7 @@ html body.tc-body.tc-single-tiddler-window {
 .tc-manager-list-item-heading-selected {
 	font-weight: bold;
 	color: <<colour background>>;
+	fill: <<colour background>>;
 	background-color: <<colour foreground>>;
 }
 
@@ -2473,7 +2494,7 @@ html body.tc-body.tc-single-tiddler-window {
 }
 
 .tc-alert-toolbar svg {
-	color: <<colour alert-muted-foreground>>;
+	fill: <<colour alert-muted-foreground>>;
 }
 
 .tc-alert-subtitle {
@@ -2530,12 +2551,14 @@ html body.tc-body.tc-single-tiddler-window {
 	border-bottom: none;
 	background: <<colour dirty-indicator>>;
 	color: <<colour background>>;
+	fill: <<colour background>>;
 }
 
 .tc-drafts-list a:hover {
 	text-decoration: none;
 	background: <<colour foreground>>;
 	color: <<colour background>>;
+	fill: <<colour background>>;
 }
 
 .tc-drafts-list a svg {
@@ -2568,16 +2591,13 @@ html body.tc-body.tc-single-tiddler-window {
 	display: flex;
 	text-shadow: none;
 	border: 1px solid <<colour muted-foreground>>;
+	fill: <<colour muted-foreground>>;
 	background-color: <<colour background>>;
 	margin: 0.5em 0 0.5em 0;
 	padding: 4px;
 	align-items: center;
 }
 
-.tc-plugin-info svg {
-	color: <<colour muted-foreground>>;
-}
-
 .tc-sidebar-lists a.tc-tiddlylink.tc-plugin-info {
 	color: <<colour tiddler-link-foreground>>;
 }
@@ -2619,14 +2639,11 @@ a.tc-tiddlylink.tc-plugin-info:hover {
 	text-decoration: none;
 	background-color: <<colour primary>>;
 	color: <<colour background>>;
-}
-
-a.tc-tiddlylink.tc-plugin-info:hover svg {
-	color: <<colour foreground>>;
+	fill: <<colour foreground>>;
 }
 
 a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk > svg {
-	color: <<colour background>>;
+	fill: <<colour background>>;
 }
 
 a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-stability {
@@ -2750,6 +2767,7 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
 	font-weight: bold;
 	background: green;
 	color: white;
+	fill: white;
 	border-radius: 4px;
 	padding: 3px;
 }
@@ -2940,7 +2958,7 @@ input.tc-palette-manager-colour-input {
 	width: 0.7em;
 	height: 0.7em;
 	vertical-align: middle;
-	color: <<colour sidebar-foreground>>;
+	fill: <<colour sidebar-foreground>>;
 }
 
 .tc-table-of-contents ol {
@@ -3063,6 +3081,7 @@ html body.tc-dirty svg.tc-image-save-button-dynamic .tc-image-save-button-dynami
 }
 
 html body.tc-dirty span.tc-dirty-indicator, html body.tc-dirty span.tc-dirty-indicator svg {
+	fill: <<colour dirty-indicator>>;
 	color: <<colour dirty-indicator>>;
 }
 
@@ -3149,7 +3168,7 @@ html body.tc-dirty span.tc-dirty-indicator, html body.tc-dirty span.tc-dirty-ind
 
 .tc-thumbnail-wrapper:hover .tc-thumbnail-icon svg,
 .tc-thumbnail-wrapper:hover .tc-thumbnail-icon img {
-	color: #fff;
+	fill: #fff;
 	<<filter "drop-shadow(3px 3px 4px rgba(0,0,0,0.6))">>
 }
 
@@ -3256,7 +3275,7 @@ html body.tc-dirty span.tc-dirty-indicator, html body.tc-dirty span.tc-dirty-ind
 }
 
 .tc-tree svg {
-	color: #acacac;
+	fill: #acacac;
 }
 
 .tc-tree span svg {
@@ -3373,6 +3392,7 @@ span.tc-translink > a:first-child {
 }
 
 .tc-test-case-result-icon {
+	fill: #fff;
 	padding: 0.25em;
 	display: inline-block;
 	line-height: 0;
@@ -3381,10 +3401,6 @@ span.tc-translink > a:first-child {
 	<<margin-end "0.25em">>
 }
 
-.tc-test-case-result-icon svg {
-	color: #fff;
-}
-
 .tc-test-case-result-icon-pass {
 	background-color: green;
 }
@@ -3418,7 +3434,7 @@ span.tc-translink > a:first-child {
 }
 
 .tc-test-case-toolbar svg {
-	color: <<colour tiddler-controls-foreground>>;
+	fill: <<colour tiddler-controls-foreground>>;
 }
 
 .tc-test-case-toolbar .tc-drop-down {