feat(theme): 新增冷调玫瑰第二色用于次要按钮

在 input.css 的 @theme 新增 accent-2 / accent-2-soft 主题变量,
用于与鼠尾草绿主色成对的次要操作按钮。

颜色选择经 HSL 分析:色相 342°(冷调玫瑰,区别于暖砖红 9°),
饱和度 28%(低饱和从属于主色),保证视觉为浅色系且不浊。
对比度:亮色 #83495b vs 米白底 6.5:1、暗色 #cca4b0 vs entry 底 7.46:1,
均过 WCAG AA。

新增 BTN_SECONDARY 常量(ghost 描边风格)用于 dashboard「管理文章」
按钮,与「写文章」实心主按钮构成主次层级。两按钮统一用
inline-flex items-center justify-center 保证文字水平垂直居中、等高。
This commit is contained in:
xfy 2026-06-25 15:06:45 +08:00
parent 519c0ae3a9
commit 806b474599
3 changed files with 15 additions and 3 deletions

View File

@ -16,6 +16,8 @@
--color-paper-border: #e7e5e0;
--color-paper-accent: #5c7a5e;
--color-paper-accent-soft: #e8f0e8;
--color-paper-accent-2: #83495b;
--color-paper-accent-2-soft: #f3e8eb;
--radius-paper: 8px;
--gap-paper: 24px;
@ -50,6 +52,8 @@
--color-paper-border: #2a2b2e;
--color-paper-accent: #7da97f;
--color-paper-accent-soft: #1e2e1e;
--color-paper-accent-2: #cca4b0;
--color-paper-accent-2-soft: #331f25;
}
}

View File

@ -58,6 +58,14 @@ pub const BTN_TEXT_RED: &str =
/// 主题绿(鼠尾草)文字小按钮(行内恢复)。
pub const BTN_TEXT_ACCENT: &str = "text-xs text-paper-accent hover:text-paper-primary transition-colors cursor-pointer";
// --- 次要按钮冷调玫瑰第二色ghost 描边风格,从属于主色鼠尾草绿) ---
/// 次要按钮:冷调玫瑰描边 ghost 风格。
/// 用于与主操作按钮paper-accent 实心)成对的次操作,如「管理文章」「重建内容」。
/// 亮色文字 #83495b vs 米白底 6.5:1、暗色 #cca4b0 vs entry 底 7.46:1均过 WCAG AA。
pub const BTN_SECONDARY: &str =
"px-6 py-3 rounded-full text-sm font-medium text-center text-paper-accent-2 border border-paper-accent-2/40 hover:border-paper-accent-2 hover:bg-paper-accent-2-soft transition-all cursor-pointer";
// ===========================================================================
// 组件
// ===========================================================================

View File

@ -12,8 +12,8 @@ use crate::api::comments::get_pending_count;
use crate::api::posts::{get_post_stats, list_posts};
#[cfg(target_arch = "wasm32")]
use crate::api::posts::{PostListResponse, PostStatsResponse};
use crate::components::ui::ADMIN_CARD_CLASS;
use crate::components::skeletons::atoms::SkeletonBox;
use crate::components::ui::{BTN_SECONDARY, ADMIN_CARD_CLASS};
use crate::models::post::{PostListItem, PostStats};
use crate::router::Route;
@ -106,12 +106,12 @@ pub fn Admin() -> Element {
div { class: "grid grid-cols-1 md:grid-cols-2 gap-4",
Link {
class: "bg-paper-accent text-paper-theme rounded-full px-6 py-3 text-center font-medium hover:brightness-110 active:scale-[0.98] transition-all duration-200 cursor-pointer",
class: "inline-flex items-center justify-center bg-paper-accent text-paper-theme rounded-full px-6 py-3 text-center font-medium hover:brightness-110 active:scale-[0.98] transition-all duration-200 cursor-pointer",
to: Route::Write {},
"写文章"
}
Link {
class: "bg-paper-tertiary text-paper-primary rounded-full px-6 py-3 text-center font-medium hover:opacity-80 transition-opacity cursor-pointer",
class: "inline-flex items-center justify-center {BTN_SECONDARY}",
to: Route::Posts {},
"管理文章"
}