arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

fix(13-05): add tone-aware hover colors to icon-button (danger/warning/success/neutral)

Browse source
This commit is contained in:
Arthur Belleville 2026-05-16 17:59:17 +02:00
parent cae5e7c785
commit d2c5a0cc07
No known key found for this signature in database
1 changed files with 47 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
backend/internal/web/ui/icon-button.css
View file

@ -21,14 +21,37 @@
outline: none;
}
/* Solid tone — base colors */
.ui-icon-button-solid.ui-icon-button-neutral {
color: var(--color-text-muted);
}
.ui-icon-button-solid.ui-icon-button-danger {
color: var(--color-status-danger-foreground);
}
.ui-icon-button-solid.ui-icon-button-warning {
color: var(--color-status-warning-foreground);
}
.ui-icon-button-solid.ui-icon-button-success {
color: var(--color-status-success-foreground);
}
/* Solid tone — hover */
.ui-icon-button-solid.ui-icon-button-neutral:hover {
background: var(--color-surface-neutral-hover);
color: var(--color-text-primary);
}
.ui-icon-button-solid.ui-icon-button-danger:hover {
background: var(--color-status-danger-soft-bg-hover);
color: var(--color-status-danger-strong-hover);
}
.ui-icon-button-solid.ui-icon-button-warning:hover {
background: var(--color-status-warning-soft-bg-hover);
color: var(--color-status-warning-strong-hover);
}
.ui-icon-button-solid.ui-icon-button-success:hover {
background: var(--color-status-success-soft-bg-hover);
color: var(--color-status-success-strong-hover);
}
.borderless-icon-button {
appearance: none;
@ -39,10 +62,33 @@
outline: none;
}
.ui-icon-button-ghost.ui-icon-button-neutral,
/* Ghost tone — base colors */
.ui-icon-button-ghost.ui-icon-button-neutral {
color: var(--color-text-faint);
}
.ui-icon-button-ghost.ui-icon-button-danger {
color: var(--color-text-faint);
}
.ui-icon-button-ghost.ui-icon-button-warning {
color: var(--color-text-faint);
}
.ui-icon-button-ghost.ui-icon-button-success {
color: var(--color-text-faint);
}
/* Ghost tone — hover */
.ui-icon-button-ghost.ui-icon-button-neutral:hover {
color: var(--color-text-primary);
}
.ui-icon-button-ghost.ui-icon-button-danger:hover {
color: var(--color-status-danger-icon-hover);
}
.ui-icon-button-ghost.ui-icon-button-warning:hover {
color: var(--color-status-warning-strong);
}
.ui-icon-button-ghost.ui-icon-button-success:hover {
color: var(--color-status-success-strong);
}
.borderless-icon-button svg {
height: 1rem;