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:
parent
519c0ae3a9
commit
806b474599
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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";
|
||||
|
||||
// ===========================================================================
|
||||
// 组件
|
||||
// ===========================================================================
|
||||
|
||||
@ -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 {},
|
||||
"管理文章"
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user