From 08bc7b163bf68c3a5e519dd7d515f7c5894f0be0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Tue, 22 Aug 2023 09:54:30 +0200
Subject: [PATCH 1/4] feat: Enhance dark mode (fix #5034)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/cards/CardItem.vue       | 24 ++++++++++++++++--------
 src/components/cards/badges/DueDate.vue | 12 +++---------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 57d85947e..f0a18cf90 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -200,27 +200,28 @@ export default {
 	@import './../../css/animations';
 	@import './../../css/variables';
 
+	@mixin dark-card {
+		border: 2px solid var(--color-border-dark);
+		box-shadow: none;
+	}
+
 	.card {
-		transition: box-shadow 0.1s ease-in-out;
-		box-shadow: 0 0 2px 0 var(--color-box-shadow);
+		transition: border 0.1s ease-in-out;
 		border-radius: var(--border-radius-large);
 		font-size: 100%;
 		background-color: var(--color-main-background);
 		margin-bottom: $card-spacing;
+		border: 2px solid var(--color-border);
 
 		&:deep(*) {
 			cursor: pointer;
 		}
 
-		body.dark &, body.theme--dark & {
-			border: 2px solid var(--color-border);
-		}
-
 		&:hover {
-			box-shadow: 0 0 5px 0 var(--color-box-shadow);
+			border: 2px solid var(--color-border-dark);
 		}
 		&.current-card {
-			box-shadow: 0 0 5px 1px var(--color-box-shadow);
+			border: 2px solid var(--color-primary-element);
 		}
 
 		.card-upper {
@@ -326,4 +327,11 @@ export default {
 			color: transparent;
 		}
 	}
+
+	@media (prefers-color-scheme: dark) {
+		.card {
+			@include dark-card;
+		}
+
+	}
 </style>
diff --git a/src/components/cards/badges/DueDate.vue b/src/components/cards/badges/DueDate.vue
index ad1db8600..1ad226c08 100644
--- a/src/components/cards/badges/DueDate.vue
+++ b/src/components/cards/badges/DueDate.vue
@@ -75,12 +75,10 @@ export default {
 		border-radius: 3px;
 		margin-top: 9px;
 		margin-bottom: 9px;
-		padding: 3px 4px;
-		padding-right: 0;
+		padding: 3px 0 3px 4px;
 		font-size: 90%;
 		display: flex;
 		align-items: center;
-		opacity: .5;
 		flex-shrink: 1;
 		z-index: 2;
 
@@ -89,19 +87,15 @@ export default {
 		}
 
 		&.overdue {
-			background-color: var(--color-error);
-			color: var(--color-primary-element-text);
-			opacity: .7;
+			color: var(--color-error-text);
 			padding: 3px 4px;
 		}
 		&.now {
-			background-color: var(--color-warning);
-			opacity: .7;
+			color: var(--color-warning-text);
 			padding: 3px 4px;
 		}
 		&.next {
 			background-color: var(--color-background-dark);
-			opacity: .7;
 			padding: 3px 4px;
 		}
 

From f53785ef546da999dc457c4a091dc3a41d4ccf18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 30 Aug 2023 16:30:32 +0200
Subject: [PATCH 2/4] fix: Due date badge in dark mode / compact mode (fix
 #4386)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/cards/badges/DueDate.vue | 76 ++++++++++++++++---------
 1 file changed, 48 insertions(+), 28 deletions(-)

diff --git a/src/components/cards/badges/DueDate.vue b/src/components/cards/badges/DueDate.vue
index 1ad226c08..0a584f528 100644
--- a/src/components/cards/badges/DueDate.vue
+++ b/src/components/cards/badges/DueDate.vue
@@ -21,18 +21,31 @@
   -->
 
 <template>
-	<div v-if="card" class="duedate">
+	<div v-if="card" class="duedate" :data-due-state="dueState">
 		<transition name="zoom">
-			<div v-if="card.duedate" :class="dueIcon" :title="absoluteDate">
-				<span>{{ relativeDate }}</span>
+			<div v-if="card.duedate" class="due" :title="absoluteDate">
+				<Clock v-if="overdue" :size="16" />
+				<ClockOutline v-else :size="16" />
+				<span v-if="!compactMode" class="due--label">{{ relativeDate }}</span>
 			</div>
 		</transition>
 	</div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import moment from '@nextcloud/moment'
+import Clock from 'vue-material-design-icons/Clock.vue'
+import ClockOutline from 'vue-material-design-icons/ClockOutline.vue'
+import CalendarAlert from 'vue-material-design-icons/CalendarAlert.vue'
+import CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
 
+const DueState = {
+	Future: 'Future',
+	Next: 'Next',
+	Now: 'Now',
+	Overdue: 'Overdue',
+}
 export default {
 	name: 'DueDate',
 	props: {
@@ -41,19 +54,32 @@ export default {
 			default: null,
 		},
 	},
+	components: {
+		Clock,
+		ClockOutline,
+		CalendarAlert,
+		CalendarBlank,
+	},
 	computed: {
-		dueIcon() {
+		...mapState({
+			compactMode: state => state.compactMode,
+		}),
+		dueState() {
 			const days = Math.floor(moment(this.card.duedate).diff(this.$root.time, 'seconds') / 60 / 60 / 24)
 			if (days < 0) {
-				return 'icon-calendar due icon overdue'
+				return DueState.Overdue
 			}
 			if (days === 0) {
-				return 'icon-calendar-dark due icon now'
+				return DueState.Now
 			}
 			if (days === 1) {
-				return 'icon-calendar-dark due icon next'
+				return DueState.Overdue
 			}
-			return 'icon-calendar-dark due icon'
+
+			return DueState.Future
+		},
+		overdue() {
+			this.dueState === DueState.Overdue
 		},
 		relativeDate() {
 			const diff = moment(this.$root.time).diff(this.card.duedate, 'seconds')
@@ -63,49 +89,43 @@ export default {
 			return moment(this.card.duedate).fromNow()
 		},
 		absoluteDate() {
-			return moment(this.card.duedate).format('L')
+			return moment(this.card.duedate).format('LLLL')
 		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
-	.icon.due {
+	.due {
 		background-position: 4px center;
-		border-radius: 3px;
+		border-radius: var(--border-radius-large);
 		margin-top: 9px;
 		margin-bottom: 9px;
-		padding: 3px 0 3px 4px;
+		padding: 2px 8px;
 		font-size: 90%;
 		display: flex;
 		align-items: center;
 		flex-shrink: 1;
 		z-index: 2;
 
-		.icon {
-			background-size: contain;
+		[data-due-state="Overdue"] & {
+			color: var(--color-main-background);
+			background-color: var(--color-error-text);
 		}
-
-		&.overdue {
-			color: var(--color-error-text);
-			padding: 3px 4px;
-		}
-		&.now {
-			color: var(--color-warning-text);
-			padding: 3px 4px;
-		}
-		&.next {
-			background-color: var(--color-background-dark);
-			padding: 3px 4px;
+		[data-due-state="Now"] & {
+			color: var(--color-main-background);
+			background-color: var(--color-warning);
 		}
 
-		&::before,
 		span {
-			margin-left: 20px;
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;
 		}
+
+		.due--label {
+			margin-left: 4px;
+		}
 	}
 
 	@media print {

From a8839ccb643e40c5387e9b5d61cb82b9131401ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 30 Aug 2023 16:41:57 +0200
Subject: [PATCH 3/4] fix: Use Lab for calculating text contrast color value
 (fix #3084)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 package-lock.json                 | 11 ++++++
 package.json                      |  1 +
 src/components/cards/CardItem.vue |  1 +
 src/mixins/color.js               | 63 ++-----------------------------
 4 files changed, 16 insertions(+), 60 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8d244015b..e182e9aec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@nextcloud/router": "^2.1.2",
         "@nextcloud/vue": "^7.12.4",
         "blueimp-md5": "^2.19.0",
+        "chroma-js": "^2.4.2",
         "dompurify": "^3.0.5",
         "lodash": "^4.17.21",
         "markdown-it": "^13.0.1",
@@ -6713,6 +6714,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "license": "MIT",
@@ -24826,6 +24832,11 @@
         "readdirp": "~3.6.0"
       }
     },
+    "chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "chrome-trace-event": {
       "version": "1.0.3",
       "peer": true
diff --git a/package.json b/package.json
index 8028de4fc..cfb79b881 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@nextcloud/router": "^2.1.2",
     "@nextcloud/vue": "^7.12.4",
     "blueimp-md5": "^2.19.0",
+    "chroma-js": "^2.4.2",
     "dompurify": "^3.0.5",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index f0a18cf90..a46ffcc9f 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -65,6 +65,7 @@
 
 				<CardMenu v-if="!editing && compactMode" :card="card" class="right" />
 			</div>
+
 			<transition-group v-if="card.labels && card.labels.length"
 				name="zoom"
 				tag="ul"
diff --git a/src/mixins/color.js b/src/mixins/color.js
index 7ab48790c..45c0441b2 100644
--- a/src/mixins/color.js
+++ b/src/mixins/color.js
@@ -20,76 +20,19 @@
  *
  */
 
+import chroma from "chroma-js"
+
 export default {
 	methods: {
-		hexToRgb(hex) {
-			const result = /^#?([A-Fa-f\d]{2})([A-Fa-f\d]{2})([A-Fa-f\d]{2})$/i.exec(hex)
-			if (result) {
-				return {
-					r: parseInt(result[1], 16),
-					g: parseInt(result[2], 16),
-					b: parseInt(result[3], 16),
-				}
-			}
-			return null
-		},
-		rgb2hls(rgb) {
-			// RGB2HLS by Garry Tan
-			// http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
-			const r = rgb.r / 255
-			const g = rgb.g / 255
-			const b = rgb.b / 255
-			const max = Math.max(r, g, b)
-			const min = Math.min(r, g, b)
-			let h
-			let s
-			const l = (max + min) / 2
-
-			if (max === min) {
-				h = s = 0 // achromatic
-			} else {
-				const d = max - min
-				s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
-				switch (max) {
-				case r:
-					h = (g - b) / d + (g < b ? 6 : 0)
-					break
-				case g:
-					h = (b - r) / d + 2
-					break
-				case b:
-					h = (r - g) / d + 4
-					break
-				}
-				h /= 6
-			}
-			return {
-				h, l, s,
-			}
-		},
 		textColor(hex) {
-
-			const rgb = this.hexToRgb(hex)
-			if (rgb === null) {
-				return '#000000'
-			}
-			const { l } = this.rgb2hls(rgb)
-
-			if (l < 0.5) {
-				return '#ffffff'
-			} else {
-				return '#000000'
-			}
-
+			return chroma(hex).get('lab.l') > 50 ? '#000000' : '#ffffff'
 		},
 		colorIsValid(hex) {
-
 			const re = /[A-Fa-f0-9]{6}/
 			if (re.test(hex)) {
 				return true
 			}
 			return false
-
 		},
 		randomColor() {
 			return Math.floor(Math.random() * (0xffffff + 1)).toString(16).padStart(6, '0')

From d3515de2652e22ed9eb0e42d77198682c65e2aa0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 1 Sep 2023 14:45:13 +0200
Subject: [PATCH 4/4] style: Fix code style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/cards/badges/DueDate.vue | 20 ++++++++------------
 src/mixins/color.js                     |  2 +-
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/components/cards/badges/DueDate.vue b/src/components/cards/badges/DueDate.vue
index 0a584f528..23ff1d4d3 100644
--- a/src/components/cards/badges/DueDate.vue
+++ b/src/components/cards/badges/DueDate.vue
@@ -37,8 +37,6 @@ import { mapState } from 'vuex'
 import moment from '@nextcloud/moment'
 import Clock from 'vue-material-design-icons/Clock.vue'
 import ClockOutline from 'vue-material-design-icons/ClockOutline.vue'
-import CalendarAlert from 'vue-material-design-icons/CalendarAlert.vue'
-import CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
 
 const DueState = {
 	Future: 'Future',
@@ -48,18 +46,16 @@ const DueState = {
 }
 export default {
 	name: 'DueDate',
+	components: {
+		Clock,
+		ClockOutline,
+	},
 	props: {
 		card: {
 			type: Object,
 			default: null,
 		},
 	},
-	components: {
-		Clock,
-		ClockOutline,
-		CalendarAlert,
-		CalendarBlank,
-	},
 	computed: {
 		...mapState({
 			compactMode: state => state.compactMode,
@@ -73,13 +69,13 @@ export default {
 				return DueState.Now
 			}
 			if (days === 1) {
-				return DueState.Overdue
+				return DueState.Next
 			}
 
 			return DueState.Future
 		},
 		overdue() {
-			this.dueState === DueState.Overdue
+			return this.dueState === DueState.Overdue
 		},
 		relativeDate() {
 			const diff = moment(this.$root.time).diff(this.card.duedate, 'seconds')
@@ -108,11 +104,11 @@ export default {
 		flex-shrink: 1;
 		z-index: 2;
 
-		[data-due-state="Overdue"] & {
+		[data-due-state='Overdue'] & {
 			color: var(--color-main-background);
 			background-color: var(--color-error-text);
 		}
-		[data-due-state="Now"] & {
+		[data-due-state='Now'] & {
 			color: var(--color-main-background);
 			background-color: var(--color-warning);
 		}
diff --git a/src/mixins/color.js b/src/mixins/color.js
index 45c0441b2..ddc386017 100644
--- a/src/mixins/color.js
+++ b/src/mixins/color.js
@@ -20,7 +20,7 @@
  *
  */
 
-import chroma from "chroma-js"
+import chroma from 'chroma-js'
 
 export default {
 	methods: {