marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-02-09 21:13:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: normalize button interaction states

Browse source
This commit is contained in:
Marco Allegretti 2026-01-29 16:34:29 +01:00
parent d9e6f21e2e
commit 63b46356bb
1 changed files with 45 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
frontend/src/components/ui/DesignSystemStyles.astro
View file

@ -61,6 +61,22 @@
--ui-glass-bg: rgba(24, 24, 27, 0.65); --ui-glass-bg: rgba(24, 24, 27, 0.65);
--ui-glass-border: rgba(255, 255, 255, 0.08); --ui-glass-border: rgba(255, 255, 255, 0.08);
--ui-soft-highlight: rgba(129, 140, 248, 0.16); --ui-soft-highlight: rgba(129, 140, 248, 0.16);
--ui-space-1: 0.25rem;
--ui-space-2: 0.5rem;
--ui-space-3: 0.75rem;
--ui-space-4: 1rem;
--ui-space-5: 1.25rem;
--ui-space-6: 1.5rem;
--ui-space-8: 2rem;
--ui-font-size-xs: 0.75rem;
--ui-font-size-sm: 0.875rem;
--ui-font-size-md: 1rem;
--ui-font-size-lg: 1.125rem;
--ui-font-weight-medium: 500;
--ui-font-weight-semibold: 600;
--ui-font-weight-bold: 700;
} }
* { * {
@ -216,10 +232,27 @@
gap: 0.5rem; gap: 0.5rem;
padding: 0.625rem 1rem; padding: 0.625rem 1rem;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
font-weight: 600; font-weight: var(--ui-font-weight-semibold);
font-size: 0.875rem; font-size: var(--ui-font-size-sm);
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: transform var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard), opacity var(--motion-fast) var(--easing-standard);
}
.ui-btn:active {
transform: translateY(1px);
}
:where(button.ui-btn):disabled,
:where(a.ui-btn)[aria-disabled='true'] {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
transform: none;
box-shadow: none;
} }
.ui-btn-primary { .ui-btn-primary {
@ -227,20 +260,25 @@
color: var(--color-on-primary); color: var(--color-on-primary);
} }
.ui-btn-primary:hover { :where(.ui-btn-primary):not([aria-disabled='true']):not(:disabled):hover {
background: var(--color-primary-hover); background: var(--color-primary-hover);
color: var(--color-on-primary); color: var(--color-on-primary);
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 10px 30px rgba(99, 102, 241, 0.24); box-shadow: 0 10px 30px rgba(99, 102, 241, 0.24);
} }
:where(.ui-btn-primary):not([aria-disabled='true']):not(:disabled):active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
.ui-btn-secondary { .ui-btn-secondary {
background: transparent; background: transparent;
border-color: var(--color-border); border-color: var(--color-border);
color: var(--color-text); color: var(--color-text);
} }
.ui-btn-secondary:hover { :where(.ui-btn-secondary):not([aria-disabled='true']):not(:disabled):hover {
border-color: var(--color-border-hover); border-color: var(--color-border-hover);
background: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.06);
color: var(--color-text); color: var(--color-text);
@ -251,7 +289,7 @@
color: var(--color-on-primary); color: var(--color-on-primary);
} }
.ui-btn-success:hover { :where(.ui-btn-success):not([aria-disabled='true']):not(:disabled):hover {
background: var(--color-success-hover); background: var(--color-success-hover);
color: var(--color-on-primary); color: var(--color-on-primary);
transform: translateY(-1px); transform: translateY(-1px);
@ -263,7 +301,7 @@
color: var(--color-on-primary); color: var(--color-on-primary);
} }
.ui-btn-danger:hover { :where(.ui-btn-danger):not([aria-disabled='true']):not(:disabled):hover {
background: var(--color-error-hover); background: var(--color-error-hover);
color: var(--color-on-primary); color: var(--color-on-primary);
transform: translateY(-1px); transform: translateY(-1px);
@ -275,7 +313,7 @@
color: var(--color-on-primary); color: var(--color-on-primary);
} }
.ui-btn-info:hover { :where(.ui-btn-info):not([aria-disabled='true']):not(:disabled):hover {
background: var(--color-info-hover); background: var(--color-info-hover);
color: var(--color-on-primary); color: var(--color-on-primary);
transform: translateY(-1px); transform: translateY(-1px);