From 8c93a1756ad7c54a526a23d762c50b234661e3c0 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Thu, 20 Feb 2025 09:54:06 +1100
Subject: [PATCH] fix: update color variables in styles to avoid the conflict
 with other variables

---
 src/style.scss          | 16 ++++++++--------
 src/utils/applyColor.ts | 10 +++++-----
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/style.scss b/src/style.scss
index 8290d31..204b490 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,14 +1,14 @@
 .datenel-component {
 	user-select: none;
-	color: var(--main-color);
+	color: var(--datenel-main-color);
 
 	button {
 		border: none;
 		background: none;
 		cursor: pointer;
-		color: var(--main-color);
+		color: var(--datenel-main-color);
 		&:hover {
-			background: var(--hover-color);
+			background: var(--datenel-hover-color);
 		}
 	}
 
@@ -28,7 +28,7 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		border-bottom: 1px solid var(--border-color);
+		border-bottom: 1px solid var(--datenel-border-color);
 
 		button {
 			img {
@@ -59,7 +59,7 @@
 			border-radius: 0.25rem;
 			padding: 0.25rem 0;
 			&:hover {
-				background: var(--hover-color);
+				background: var(--datenel-hover-color);
 			}
 		}
 	}
@@ -88,7 +88,7 @@
 				opacity: 0.3;
 			}
 			&:hover {
-				background: var(--hover-color);
+				background: var(--datenel-hover-color);
 			}
 			.today-indicator {
 				position: absolute;
@@ -98,8 +98,8 @@
 			}
 
 			&.active {
-				background: var(--accent-color);
-				color: var(--reversed-color);
+				background: var(--datenel-accent-color);
+				color: var(--datenel-reversed-color);
 			}
 		}
 	}
diff --git a/src/utils/applyColor.ts b/src/utils/applyColor.ts
index 9b100ea..3434cd5 100644
--- a/src/utils/applyColor.ts
+++ b/src/utils/applyColor.ts
@@ -13,9 +13,9 @@ export default (id: string, colorValues: {
 }) => {
 	const element = document.querySelector(`#__datenel-${id}`) as HTMLDivElement
 	if (!element) return
-	element.style.setProperty(`--main-color`, colorValues.mainColor)
-	element.style.setProperty(`--accent-color`, colorValues.accentColor)
-	element.style.setProperty(`--reversed-color`, colorValues.reversedColor)
-	element.style.setProperty(`--hover-color`, colorValues.hoverColor)
-	element.style.setProperty(`--border-color`, colorValues.borderColor)
+	element.style.setProperty(`--datenel-main-color`, colorValues.mainColor)
+	element.style.setProperty(`--datenel-accent-color`, colorValues.accentColor)
+	element.style.setProperty(`--datenel-reversed-color`, colorValues.reversedColor)
+	element.style.setProperty(`--datenel-hover-color`, colorValues.hoverColor)
+	element.style.setProperty(`--datenel-border-color`, colorValues.borderColor)
 }
\ No newline at end of file