panic.haus/web-ui
1
0
Fork 0
Code Issues Pull Requests 10 Actions Packages Projects Releases Activity

make accent overridable, v0.1.11
All checks were successful
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/promote/production Build is passing
Details

Browse Source
This commit is contained in:
Beatrice Dellacà
2026-02-23 22:59:57 +01:00
parent 29a4e8c2ee
commit 5cc3e3646c
4 changed files with 48 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/styles/components.css
View File

@@ -12,7 +12,12 @@
appearance: none;
-webkit-appearance: none;
-webkit-text-fill-color: var(--text-primary);
@apply w-full rounded-xl px-3 py-2 text-sm outline-none transition focus:border-accent-400 focus:ring-2 focus:ring-accent-400/30;
@apply w-full rounded-xl px-3 py-2 text-sm outline-none transition;
}
.field:focus {
border-color: rgb(var(--accent-400));
box-shadow: 0 0 0 2px rgb(var(--accent-400) / 0.3);
}
.field::placeholder {
@@ -55,7 +60,13 @@
}
.btn-solid.btn-primary {
@apply bg-accent-500 text-white hover:bg-accent-400 disabled:opacity-100;
background-color: rgb(var(--accent-500));
color: rgb(var(--accent-contrast));
@apply disabled:opacity-100;
}
.btn-solid.btn-primary:hover {
background-color: rgb(var(--accent-400));
}
.btn-solid.btn-primary:disabled {
@@ -107,16 +118,19 @@
}
.btn-outlined.btn-primary {
@apply border-accent-500 text-accent-300;
border-color: rgb(var(--accent-500));
color: rgb(var(--accent-300));
background-color: transparent;
}
.btn-outlined.btn-primary:hover {
@apply bg-accent-500/15 text-accent-300;
background-color: rgb(var(--accent-500) / 0.15);
color: rgb(var(--accent-300));
}
.btn-outlined.btn-primary:disabled {
@apply border-accent-500/40 text-accent-300/60;
border-color: rgb(var(--accent-500) / 0.4);
color: rgb(var(--accent-300) / 0.6);
background-color: transparent;
}
@@ -149,16 +163,17 @@
}
.btn-noborder.btn-primary {
@apply text-accent-300;
color: rgb(var(--accent-300));
background-color: transparent;
}
.btn-noborder.btn-primary:hover {
@apply bg-accent-500/15 text-accent-300;
background-color: rgb(var(--accent-500) / 0.15);
color: rgb(var(--accent-300));
}
.btn-noborder.btn-primary:disabled {
@apply text-accent-300/60;
color: rgb(var(--accent-300) / 0.6);
background-color: transparent;
}
@@ -228,6 +243,15 @@
color: var(--error-text);
}
.ui-accent-active {
background-color: rgb(var(--accent-500));
color: rgb(var(--accent-contrast));
}
.ui-accent-active:hover {
background-color: rgb(var(--accent-400));
}
.chip-root {
@apply inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold leading-none;
}