gabriel / musehub public
_buttons.scss
149 lines 4.0 KB
Raw
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ breaking 1 day ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Buttons
3 // File: src/scss/components/_buttons.scss
4 //
5 // Variants: .btn--primary .btn--ghost .btn--danger .btn--secondary
6 // .btn--create .btn--accent .btn--cta .btn--sm
7 // Tokens: --color-accent, --color-success, --color-danger, --gradient-spectral
8 // --bg-overlay, --bg-hover, --border-default, --text-primary
9 // Usage: <button class="btn btn--primary">Save</button>
10 //
11 // Notes: .btn--cta uses the spectral gradient — reserved for marketing CTAs.
12 // .btn--primary is accent blue (interactive confirm).
13 // .btn--danger is for destructive actions only.
14 // ─────────────────────────────────────────────────────────────────────────────
15
16 .btn {
17 display: inline-flex;
18 align-items: center;
19 gap: var(--space-2);
20 padding: 6px var(--space-4);
21 border-radius: var(--radius-base);
22 font-family: var(--font-sans);
23 font-size: var(--text-sm);
24 font-weight: var(--weight-medium);
25 line-height: var(--line-height-tight);
26 cursor: pointer;
27 border: 1px solid transparent;
28 transition: background var(--transition-fast), border-color var(--transition-fast),
29 box-shadow var(--transition-fast), color var(--transition-fast);
30 text-decoration: none;
31 white-space: nowrap;
32 user-select: none;
33 letter-spacing: 0;
34
35 svg { flex-shrink: 0; }
36
37 &:focus-visible {
38 outline: 2px solid var(--color-accent);
39 outline-offset: 2px;
40 }
41
42 &:active:not(:disabled) {
43 transform: translateY(0);
44 opacity: 0.95;
45 }
46
47 &:disabled {
48 opacity: 0.4;
49 cursor: not-allowed;
50 }
51 }
52
53 .btn--primary, .btn-primary {
54 background: var(--color-accent);
55 color: #fff;
56 border-color: var(--color-accent);
57
58 &:not(:disabled):hover {
59 opacity: 0.88;
60 transform: translateY(-1px);
61 text-decoration: none;
62 }
63 }
64
65 .btn--ghost, .btn-ghost {
66 background: transparent;
67 color: var(--text-secondary);
68 border-color: var(--border-default);
69
70 &:not(:disabled):hover {
71 background: var(--bg-overlay);
72 color: var(--text-primary);
73 text-decoration: none;
74 }
75 }
76
77 .btn--danger, .btn-danger {
78 background: var(--color-danger-bg);
79 color: #fff;
80 border-color: var(--color-danger-bg);
81
82 &:not(:disabled):hover {
83 background: var(--color-danger);
84 border-color: var(--color-danger);
85 text-decoration: none;
86 }
87 }
88
89 .btn--secondary, .btn-secondary {
90 background: var(--bg-overlay);
91 color: var(--text-secondary);
92 border-color: var(--border-default);
93
94 &:not(:disabled):hover {
95 background: var(--bg-hover);
96 color: var(--text-primary);
97 border-color: var(--border-strong);
98 text-decoration: none;
99 }
100 }
101
102 .btn--create, .btn-create {
103 background: var(--color-success-bg);
104 color: #fff;
105 border-color: var(--color-success-bg);
106
107 &:not(:disabled):hover {
108 background: var(--color-success);
109 border-color: var(--color-success);
110 text-decoration: none;
111 }
112 }
113
114 .btn--accent, .btn-accent {
115 background: var(--color-accent-muted);
116 color: var(--text-primary);
117 border-color: var(--color-accent-muted);
118
119 &:not(:disabled):hover {
120 background: var(--color-accent);
121 border-color: var(--color-accent);
122 text-decoration: none;
123 }
124 }
125
126 .btn--cta, .btn-cta {
127 background: var(--gradient-spectral);
128 color: #fff;
129 border-color: transparent;
130 font-weight: var(--weight-semibold);
131
132 &:not(:disabled):hover {
133 opacity: 0.88;
134 transform: translateY(-1px);
135 text-decoration: none;
136 }
137 }
138
139 .btn--sm, .btn-sm {
140 padding: 4px var(--space-3);
141 font-size: var(--text-xs);
142 border-radius: var(--radius-sm);
143 }
144
145 .btn--lg, .btn-lg {
146 padding: 10px var(--space-6);
147 font-size: var(--text-base);
148 border-radius: var(--radius-md);
149 }
File History 1 commit
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ 1 day ago