gabriel / musehub public
_buttons.scss
149 lines 4.0 KB
Raw
sha256:34035d72cef530c1ab9d6a6f53be18d803dde705fc3157617d70352a96d0747b Merge branch 'fix/wire-push-external-parent-manifest' into dev Human 8 days 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 14 commits
sha256:34035d72cef530c1ab9d6a6f53be18d803dde705fc3157617d70352a96d0747b Merge branch 'fix/wire-push-external-parent-manifest' into dev Human 8 days ago
sha256:fc04e4cae9e1774d6a21b65c45daeed0e6787eb581d13aa1b03bfe9384a34226 Merge branch 'fix/two-column-scroll-layout' into dev Human 8 days ago
sha256:408916fc5973ba59c6e4eebaa80ebdcc801c0a63205651e25009d11548f79454 chore: bump version to 0.2.0.dev2 — nightly.2, matching muse Sonnet 4.6 patch 11 days ago
sha256:d035733f21ccff27735fddebfbbe0ed24565a32a22db8de5885402262671ecd2 chore: bump version to 0.2.0rc15 for musehub#113 fix release Sonnet 4.6 patch 14 days ago
sha256:0032d6cfa33bc3c8367436ad768e7dd0e339b4332153160247da8266cb5fa352 Merge branch 'task/version-tags-phase3-server' into dev Human 17 days ago
sha256:4669620efda9ff41c55bdefd1f7bfe1c239d468428744c84ead9957e5a003a53 merge: rescue snapshot-recovery hardening (c00aa21d) into d… Opus 4.8 minor ⚠ 29 days ago
sha256:a59da49c4611b970fc4b6ae48678ce4943261c213a07ddbd73ce9201df869b4a fix: remove false-positive proposal_comments index drop fro… Sonnet 4.6 patch 33 days ago
sha256:0a240d6dbff234f07d98a28a4a9a68db702f3f9ff9260196f24219bdb1c0b6f3 feat: render markdown mists as HTML with heading anchor links Sonnet 4.6 patch 34 days ago
sha256:24a7d47486ebc4ebd1832830580e177ec6f877b48dced8c000e198cdec4ce9d6 Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 35 days ago
sha256:b9ff931d147e0114a1f17060f415b89ed551c170a91ff226c70437aa5c85f9ee Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 35 days ago
sha256:d1122d21e73471879b460037b22c0b50fded7c423444a176f248428f75dac39c Merge 'task/fix-issue-pagination-cursor' into 'dev' — propo… Human 35 days ago
sha256:01e18975e73d2b3cd5b6db7929c895bef9aa6e0d4391dc5b2adfc548b41318dd Merge 'feat/adding-debug-logs-to-staging' into 'dev' — prop… Human 35 days ago
sha256:6b1949fc2797ca4c1936a637a4cbfec828ef56cf52398a2e74ca3c4f494e728f fix: use wire_bytes not mpack_bytes_raw in compute_object_b… Sonnet 4.6 patch 48 days ago
sha256:b99f2455dc346966d040133f5203297e6e3ef5803a93728a2c30568d0a0f7583 rename: delta_add → delta_upsert across wire format, models… Sonnet 4.6 patch 50 days ago