standardise buttons: .btn base class (border-radius 10px, padding var(--space-xs))

2026-06-25 16:19:19 +02:00 · 2026-05-05 11:34:13 +02:00
parent b58445f71c
commit bca707ee96
30 changed files with 333 additions and 442 deletions
--- a/app/public/assets/css/common.css
+++ b/app/public/assets/css/common.css
@@ -390,6 +390,174 @@ main {
    }
 }

+/* ============================================================
+   BUTTONS — shared .btn base class
+   Targets both <a> and <button>, always has a background.
+   border-radius: 10px; padding: var(--space-xs)
+   ============================================================ */
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-3xs);
+    padding: var(--space-xs);
+    border-radius: 10px;
+    font-size: var(--step--1);
+    font-family: inherit;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    cursor: pointer;
+    text-decoration: none;
+    line-height: 1.3;
+    border: none;
+    transition:
+        background 0.15s,
+        opacity 0.15s,
+        box-shadow 0.15s,
+        filter 0.15s;
+}
+
+.btn:hover {
+    filter: brightness(0.92);
+}
+
+/* Primary: accent background, white text */
+.btn--primary {
+    background: var(--accent-primary);
+    color: var(--accent-foreground);
+}
+
+.btn--primary:hover {
+    background: var(--accent-secondary);
+    filter: none;
+}
+
+/* Secondary: light background with border */
+.btn--secondary {
+    background: var(--bg-primary);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-primary);
+}
+
+.btn--secondary:hover {
+    border-color: var(--text-secondary);
+    color: var(--text-primary);
+    filter: none;
+}
+
+/* Muted secondary: bg-secondary background */
+.btn--muted {
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-primary);
+}
+
+.btn--muted:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    filter: none;
+}
+
+/* Ghost: transparent bg, border, for links styled as buttons */
+.btn--ghost {
+    background: transparent;
+    color: var(--text-secondary);
+    border: 1px solid var(--border-primary);
+}
+
+.btn--ghost:hover {
+    border-color: var(--text-secondary);
+    color: var(--text-primary);
+    filter: none;
+}
+
+/* Danger: red background */
+.btn--danger {
+    background: var(--accent-red);
+    color: var(--accent-foreground);
+}
+
+.btn--danger:hover {
+    filter: brightness(0.9);
+}
+
+/* Warning: yellow background */
+.btn--warning {
+    background: var(--accent-yellow);
+    color: var(--text-primary);
+}
+
+.btn--warning:hover {
+    filter: brightness(0.9);
+}
+
+/* Success: green background */
+.btn--success {
+    background: var(--accent-green);
+    color: var(--accent-foreground);
+}
+
+.btn--success:hover {
+    filter: brightness(0.9);
+}
+
+/* Small size modifier */
+.btn--sm {
+    padding: var(--space-2xs) var(--space-xs);
+    font-size: var(--step--2);
+}
+
+/* Large size modifier */
+.btn--lg {
+    padding: var(--space-s) var(--space-m);
+    font-size: var(--step-0);
+}
+
+/* Semantic colour modifiers on the muted base (for table/action buttons) */
+.btn--blue {
+    background: var(--blue-muted-bg);
+    color: var(--accent-blue);
+    border: 1px solid var(--blue-muted-border);
+}
+
+.btn--blue:hover {
+    background: var(--blue-muted-bg-hover);
+    filter: none;
+}
+
+.btn--yellow {
+    background: var(--yellow-muted-bg);
+    color: var(--accent-yellow);
+    border: 1px solid var(--yellow-muted-border);
+}
+
+.btn--yellow:hover {
+    background: var(--yellow-muted-bg-hover);
+    filter: none;
+}
+
+.btn--green {
+    background: var(--green-muted-bg);
+    color: var(--accent-green);
+    border: 1px solid var(--green-muted-border);
+}
+
+.btn--green:hover {
+    background: var(--green-muted-bg-hover);
+    filter: none;
+}
+
+.btn--red {
+    background: var(--error-muted-bg);
+    color: var(--error);
+    border: 1px solid var(--danger-border-muted);
+}
+
+.btn--red:hover {
+    filter: brightness(0.9);
+}
+
 /* ============================================================
   SEMANTIC HTML ELEMENTS — baseline styling shared everywhere
   ============================================================ */