Agent task: 开发：A2/A3/A4 CSS token 与组件拆分

2026-06-16 21:22:31 +08:00
parent 0b8d9b2b23
commit db4c14c09f
7 changed files with 2920 additions and 2944 deletions
@@ -871,3 +871,130 @@ html[data-mnote-sidebar-resizing="true"] .mnote-sidebar-resizer::before {
  color: var(--wolai-accent);
 }

+
+/* ===== data-variant 通用按钮规则 ===== */
+/* primary */
+.mnote-btn[data-variant="primary"],
+[data-variant="primary"].mnote-btn {
+  background: var(--mnote-btn-primary-bg);
+  color: var(--mnote-btn-primary-color);
+}
+.mnote-btn[data-variant="primary"]:hover,
+[data-variant="primary"].mnote-btn:hover {
+  background: var(--mnote-btn-primary-hover-bg);
+}
+.mnote-btn[data-variant="primary"]:active,
+[data-variant="primary"].mnote-btn:active {
+  background: var(--mnote-btn-primary-active-bg);
+}
+.mnote-btn[data-variant="primary"]:disabled,
+[data-variant="primary"].mnote-btn:disabled {
+  opacity: var(--mnote-btn-primary-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* secondary */
+.mnote-btn[data-variant="secondary"],
+[data-variant="secondary"].mnote-btn {
+  background: var(--mnote-btn-secondary-bg);
+  color: var(--mnote-btn-secondary-color);
+}
+.mnote-btn[data-variant="secondary"]:hover,
+[data-variant="secondary"].mnote-btn:hover {
+  background: var(--mnote-btn-secondary-hover-bg);
+}
+.mnote-btn[data-variant="secondary"]:disabled,
+[data-variant="secondary"].mnote-btn:disabled {
+  opacity: var(--mnote-btn-secondary-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* outline */
+.mnote-btn[data-variant="outline"],
+[data-variant="outline"].mnote-btn {
+  background: var(--mnote-btn-outline-bg);
+  color: var(--mnote-btn-outline-color);
+  border-color: var(--mnote-btn-outline-border);
+}
+.mnote-btn[data-variant="outline"]:hover,
+[data-variant="outline"].mnote-btn:hover {
+  background: var(--mnote-btn-outline-hover-bg);
+}
+.mnote-btn[data-variant="outline"]:active,
+[data-variant="outline"].mnote-btn:active {
+  background: var(--mnote-btn-outline-active-bg);
+}
+.mnote-btn[data-variant="outline"]:disabled,
+[data-variant="outline"].mnote-btn:disabled {
+  opacity: var(--mnote-btn-outline-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* ghost */
+.mnote-btn[data-variant="ghost"],
+[data-variant="ghost"].mnote-btn {
+  background: var(--mnote-btn-ghost-bg);
+  color: var(--mnote-btn-ghost-color);
+}
+.mnote-btn[data-variant="ghost"]:hover,
+[data-variant="ghost"].mnote-btn:hover {
+  background: var(--mnote-btn-ghost-hover-bg);
+}
+.mnote-btn[data-variant="ghost"]:active,
+[data-variant="ghost"].mnote-btn:active {
+  background: var(--mnote-btn-ghost-active-bg);
+}
+.mnote-btn[data-variant="ghost"]:disabled,
+[data-variant="ghost"].mnote-btn:disabled {
+  opacity: var(--mnote-btn-ghost-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* danger */
+.mnote-btn[data-variant="danger"],
+[data-variant="danger"].mnote-btn {
+  background: var(--mnote-btn-danger-bg);
+  color: var(--mnote-btn-danger-color);
+}
+.mnote-btn[data-variant="danger"]:hover,
+[data-variant="danger"].mnote-btn:hover {
+  background: var(--mnote-btn-danger-hover-bg);
+}
+.mnote-btn[data-variant="danger"]:disabled,
+[data-variant="danger"].mnote-btn:disabled {
+  opacity: var(--mnote-btn-danger-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* ===== data-size 通用按钮规则 ===== */
+.mnote-btn[data-size="sm"],
+[data-size="sm"].mnote-btn {
+  height: var(--mnote-btn-sm-height);
+  padding: var(--mnote-btn-sm-padding);
+  font-size: var(--mnote-btn-sm-font-size);
+}
+.mnote-btn[data-size="md"],
+[data-size="md"].mnote-btn {
+  height: var(--mnote-btn-md-height);
+  padding: var(--mnote-btn-md-padding);
+  font-size: var(--mnote-btn-md-font-size);
+}
+.mnote-btn[data-size="lg"],
+[data-size="lg"].mnote-btn {
+  height: var(--mnote-btn-lg-height);
+  padding: var(--mnote-btn-lg-padding);
+  font-size: var(--mnote-btn-lg-font-size);
+}
+
+/* ===== data-state 按钮通用规则 ===== */
+.mnote-btn[data-state="hover"] {
+  filter: brightness(1.08);
+}
+.mnote-btn[data-state="active"] {
+  filter: brightness(0.88);
+}
+.mnote-btn[data-state="disabled"] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}