Astrian/datenel-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

fix: update color variables in styles to avoid the conflict with other variables

Browse Source
This commit is contained in:
Astrian Zheng 2025-02-20 09:54:06 +11:00
parent 09b7f0b997
commit 8c93a1756a
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
2 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/style.scss
View File

@ -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);
}
}
}

10
src/utils/applyColor.ts
View File

@ -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)
}