fix(files): pass WCAG AA for hover rows

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

1 files changed, 14 insertions, 15 deletions

diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 4fd64b89482..fc7c0a4af51 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -155,7 +155,7 @@
 
 		<!-- Size -->
 		<td v-if="isSizeAvailable"
-			:style="{ opacity: sizeOpacity }"
+			:style="sizeOpacity"
 			class="files-list__row-size"
 			data-cy-files-list-row-size
 			@click="openDetailsIfAvailable">
@@ -164,7 +164,7 @@
 
 		<!-- Mtime -->
 		<td v-if="isMtimeAvailable"
-			:style="{ opacity: mtimeOpacity }"
+			:style="mtimeOpacity"
 			class="files-list__row-mtime"
 			data-cy-files-list-row-mtime
 			@click="openDetailsIfAvailable">
@@ -371,17 +371,17 @@ export default Vue.extend({
 			return formatFileSize(size, true)
 		},
 		sizeOpacity() {
-			// Whatever theme is active, the contrast will pass WCAG AA
-			// with color main text over main background and an opacity of 0.7
-			const minOpacity = 0.7
 			const maxOpacitySize = 10 * 1024 * 1024
 
 			const size = parseInt(this.source.size, 10) || 0
 			if (!size || size < 0) {
-				return minOpacity
+				return {}
 			}
 
-			return minOpacity + (1 - minOpacity) * Math.pow((this.source.size / maxOpacitySize), 2)
+			const ratio = Math.round(Math.min(100, 100 * Math.pow((this.source.size / maxOpacitySize), 2)))
+			return {
+				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
+			}
 		},
 
 		mtime() {
@@ -391,22 +391,21 @@ export default Vue.extend({
 			return this.t('files_trashbin', 'A long time ago')
 		},
 		mtimeOpacity() {
-			// Whatever theme is active, the contrast will pass WCAG AA
-			// with color main text over main background and an opacity of 0.7
-			const minOpacity = 0.7
 			const maxOpacityTime = 31 * 24 * 60 * 60 * 1000 // 31 days
 
 			const mtime = this.source.mtime?.getTime?.()
 			if (!mtime) {
-				return minOpacity
+				return {}
 			}
 
 			// 1 = today, 0 = 31 days ago
-			const factor = (maxOpacityTime - (Date.now() - mtime)) / maxOpacityTime
-			if (factor < 0) {
-				return minOpacity
+			const ratio = Math.round(Math.min(100, 100 * (maxOpacityTime - (Date.now() - mtime)) / maxOpacityTime))
+			if (ratio < 0) {
+				return {}
+			}
+			return {
+				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
 			}
-			return minOpacity + (1 - minOpacity) * factor
 		},
 		mtimeTitle() {
 			if (this.source.mtime) {