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 { .datenel-component {
user-select: none; user-select: none;
color: var(--main-color); color: var(--datenel-main-color);
button { button {
border: none; border: none;
background: none; background: none;
cursor: pointer; cursor: pointer;
color: var(--main-color); color: var(--datenel-main-color);
&:hover { &:hover {
background: var(--hover-color); background: var(--datenel-hover-color);
} }
} }
@ -28,7 +28,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--datenel-border-color);
button { button {
img { img {
@ -59,7 +59,7 @@
border-radius: 0.25rem; border-radius: 0.25rem;
padding: 0.25rem 0; padding: 0.25rem 0;
&:hover { &:hover {
background: var(--hover-color); background: var(--datenel-hover-color);
} }
} }
} }
@ -88,7 +88,7 @@
opacity: 0.3; opacity: 0.3;
} }
&:hover { &:hover {
background: var(--hover-color); background: var(--datenel-hover-color);
} }
.today-indicator { .today-indicator {
position: absolute; position: absolute;
@ -98,8 +98,8 @@
} }
&.active { &.active {
background: var(--accent-color); background: var(--datenel-accent-color);
color: var(--reversed-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 const element = document.querySelector(`#__datenel-${id}`) as HTMLDivElement
if (!element) return if (!element) return
element.style.setProperty(`--main-color`, colorValues.mainColor) element.style.setProperty(`--datenel-main-color`, colorValues.mainColor)
element.style.setProperty(`--accent-color`, colorValues.accentColor) element.style.setProperty(`--datenel-accent-color`, colorValues.accentColor)
element.style.setProperty(`--reversed-color`, colorValues.reversedColor) element.style.setProperty(`--datenel-reversed-color`, colorValues.reversedColor)
element.style.setProperty(`--hover-color`, colorValues.hoverColor) element.style.setProperty(`--datenel-hover-color`, colorValues.hoverColor)
element.style.setProperty(`--border-color`, colorValues.borderColor) element.style.setProperty(`--datenel-border-color`, colorValues.borderColor)
} }