feat(app-iced): Ink Cat / Silver Cat 换肤 —— 双色板默认 + 规格卡组件几何（M229）
产品出厂外观从 tone 派生的 `Scheme::baseline` 切到品牌色板：深色 = Ink（淡绿）、 浅色 = Silver（钢蓝），D38 取色链（背景图 / 壁纸）仍然优先，取色失败回落到色板。 主题三档接进设置页「通用 → 主题」：Ink / Silver / 跟随系统（落盘仍是 `appearance.theme_mode` 的 dark / light / auto，不新增配置键）。 组件几何按规格卡对齐（M228 的 `inkcat` 登记项逐条落地）： - 卡片圆角 12 → 16；实例元信息卡改用新的 ELEVATED CARD（无描边、SurfaceContainer 底、内距 24、上标注 11/600） - Snackbar 48/4 → 52/16（双行 72） - Checkbox 20/rx2 → 18/rx4；Radio 20 → 18 Ø（内点仍 10） - 按钮加 XS~XL 五档（产品仍只用 S=40），内距改走 ControlSize::pad_x - 新增 FAB 四态（40/56/80/160×56）与图标按钮第四式 outlined - 语言与主题两行 chips 统一成规格卡 chip（32 高 / rx8） `theme.rs` 原本正好 400 行，先把单测纯搬移到 `theme/tests.rs` 再加色板字段； `app/tests.rs`、`settings/general.rs` 同样按纯搬移拆分守 400 行硬线。 验证：cargo fmt --all --check、cargo check -p unlucky-app-iced --all-targets、 cargo test --workspace（除 clippy 前的一轮 flake，见报告）、cargo clippy --workspace --all-targets -- -D warnings、全仓 400 行扫描。视觉矩阵 42 张在 DevDocs/artifacts/m229/（gitignored，不进提交）。
This commit is contained in:
AskaEth committed
1 parent
a06b7ff4ec
commit
db541c820e
44 files changed
+1439
-300
No files matched your search
@@ -10,7 +10,6 @@ use iced::{Alignment, Background, Border, Element, Length, Pixels, Shadow};
|
||||
use unlucky_design::color::Role;
|
||||
use unlucky_design::elevation::Elevation;
|
||||
use unlucky_design::shape::ShapeScale;
|
||||
use unlucky_design::typography::TypeRole;
|
||||
|
||||
use crate::icons;
|
||||
use crate::theme::Ui;
|
||||
@@ -48,7 +47,7 @@ pub(super) fn assemble<'a, M: Clone + 'a>(
|
||||
variant: Variant,
|
||||
spec: super::Button<'a, M>,
|
||||
) -> Element<'a, M> {
|
||||
let geometry = Geometry::of(ui, variant, spec.leading.is_some());
|
||||
let geometry = Geometry::sized(ui, variant, spec.leading.is_some(), spec.size);
|
||||
let (fill, content, border) = variant.roles();
|
||||
let forced = spec.state.or(if spec.on_press.is_none() {
|
||||
Some(Interaction::Disabled)
|
||||
@@ -70,12 +69,13 @@ pub(super) fn assemble<'a, M: Clone + 'a>(
|
||||
// 逐像素相同」（视觉 reviewer 实测 changed_px = 0；filled 禁用标签 1.23:1）。
|
||||
let ink = content_color(ui, forced, content, fill, variant.disabled_content());
|
||||
|
||||
// 标签排版跟尺寸档走：`ControlSize::label()` 已把「字号跟字级、字重固定 500」定死
|
||||
// （XS/S = LabelLarge 14、M = BodyLarge 16、L = HeadlineSmall 24、XL = HeadlineLarge 32）。
|
||||
let label_style = geometry.size.label();
|
||||
let label = text(spec.label)
|
||||
.size(ui.style(TypeRole::LabelLarge).size_px)
|
||||
.line_height(LineHeight::Absolute(Pixels(
|
||||
ui.style(TypeRole::LabelLarge).line_height_px,
|
||||
)))
|
||||
.font(ui.font_of(ui.emphasized(TypeRole::LabelLarge)))
|
||||
.size(label_style.size_px)
|
||||
.line_height(LineHeight::Absolute(Pixels(label_style.line_height_px)))
|
||||
.font(ui.font_of(label_style))
|
||||
.color(ink);
|
||||
|
||||
let mut row = Row::new().align_y(Alignment::Center);
|
||||
|
||||
@@ -0,0 +1,203 @@
|
||||
//! FAB 四态（规格卡 `FAB / SMALL - DEFAULT - MEDIUM - EXTENDED`）。
|
||||
//!
|
||||
//! ## 规格卡原值（`[spec]` = 图上的坐标/字号，几何全部来自 [`FabSize`] 的令牌访问器）
|
||||
//!
|
||||
//! | 档 | 尺寸 | 圆角 | 图标 | 标签 | 规格卡依据 |
|
||||
//! |---|---|---|---|---|---|
|
||||
//! | Small | 40×40 | 12（`Medium`） | 20 | — | `+` 徽章式小 FAB |
|
||||
//! | Default | 56×56 | 16（`Large`） | 26 | — | M3 默认 FAB |
|
||||
//! | Medium | 80×80 | 20（`LargeIncreased`） | 34 | — | 中大档 |
|
||||
//! | Extended | 160×56（最小宽） | 16（`Large`） | 24 | 15 | `+ New`：起始内距 28、图标↔标签 8 |
|
||||
//!
|
||||
//! ## 配色：`PrimaryContainer` / `OnPrimaryContainer`
|
||||
//!
|
||||
//! 规格卡上四颗 FAB 都是**淡绿底 + 深绿字形**，M3 的对应角色正是 `primary-container` /
|
||||
//! `on-primary-container`（`boards/ink.rs` 的 `[spec]` 行注释也这么标：`FAB 底` / `FAB 图标`）。
|
||||
//! 所以这里不引入新角色，也不画阴影——规格卡上是纯色块，M3 的 FAB 高程由容器色表达。
|
||||
//!
|
||||
//! 色值不写在这份文档里：`tests/no_hardcoded_tokens.rs` 会扫 `src/**` 的十六进制色值，
|
||||
//! 要核对数字请看 `boards/ink.rs` 的 `ANCHORS` 表（那是唯一真源）。
|
||||
//!
|
||||
//! ## 为什么单独一个文件
|
||||
//!
|
||||
//! 按钮家族（五式 × 五态 × 五档）已经在 `buttons/mod.rs` + `assemble.rs` 里贴着 400 行；FAB 的
|
||||
//! 几何与按钮**不共享**（圆角不是半高、图标随档放大、扩展态有自己的内距），硬塞进去只会让两边
|
||||
//! 的读取路径都变长。共享的只有 `interaction` 的状态层与图标烘焙工具。
|
||||
|
||||
use iced::widget::{button, container, row, text};
|
||||
use iced::{Alignment, Background, Border, Element, Length, Padding, Shadow};
|
||||
|
||||
use unlucky_design::color::Role;
|
||||
use unlucky_design::icons::IconKind;
|
||||
use unlucky_design::inkcat::size::FabSize;
|
||||
use unlucky_design::typography::{TypeRole, TypeStyle, Weight};
|
||||
|
||||
use crate::icons;
|
||||
use crate::theme::Ui;
|
||||
|
||||
use super::super::interaction::{self, Interaction};
|
||||
use super::super::layout;
|
||||
|
||||
/// 一颗 FAB：图标必有，标签只有扩展态有；`on_press = None` 即禁用。
|
||||
#[derive(Debug, Clone)]
|
||||
pub struct Fab<'a, M> {
|
||||
icon: IconKind,
|
||||
label: Option<&'a str>,
|
||||
size: FabSize,
|
||||
on_press: Option<M>,
|
||||
state: Option<Interaction>,
|
||||
}
|
||||
|
||||
impl<'a, M> Fab<'a, M> {
|
||||
/// 标准 FAB（默认档 = 56）。
|
||||
pub fn new(icon: IconKind, on_press: M) -> Self {
|
||||
Self {
|
||||
icon,
|
||||
label: None,
|
||||
size: FabSize::Default,
|
||||
on_press: Some(on_press),
|
||||
state: None,
|
||||
}
|
||||
}
|
||||
|
||||
/// 扩展态（药丸 + 图标 + 标签）。`label` 文案由调用方给（组件不碰 i18n）。
|
||||
pub fn extended(icon: IconKind, label: &'a str, on_press: M) -> Self {
|
||||
Self {
|
||||
label: Some(label),
|
||||
size: FabSize::Extended,
|
||||
..Self::new(icon, on_press)
|
||||
}
|
||||
}
|
||||
|
||||
/// 换档（Small / Default / Medium / Extended）。
|
||||
pub fn size(mut self, size: FabSize) -> Self {
|
||||
self.size = size;
|
||||
self
|
||||
}
|
||||
|
||||
/// 强制视觉态（gallery 取证用；运行期不要调）。
|
||||
pub fn state(mut self, state: Interaction) -> Self {
|
||||
self.state = Some(state);
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
/// 画一颗 FAB。
|
||||
pub fn fab<'a, M: Clone + 'a>(ui: &'a Ui, spec: Fab<'a, M>) -> Element<'a, M> {
|
||||
let size = spec.size;
|
||||
let forced = spec.state.or(if spec.on_press.is_none() {
|
||||
Some(Interaction::Disabled)
|
||||
} else {
|
||||
None
|
||||
});
|
||||
let ink = match forced {
|
||||
// 禁用：38% 的内容色叠在容器上（与按钮族的容器档同一口径）
|
||||
Some(Interaction::Disabled) => {
|
||||
interaction::disabled_button_content(ui, Role::OnPrimaryContainer, true)
|
||||
}
|
||||
_ => ui.color(Role::OnPrimaryContainer),
|
||||
};
|
||||
|
||||
let glyph = layout::fixed(
|
||||
size.icon_px(),
|
||||
size.icon_px(),
|
||||
icons::view_at::<M>(spec.icon, ink, size.icon_px()),
|
||||
);
|
||||
|
||||
let content: Element<'a, M> = match spec.label {
|
||||
// 扩展态：图标 + 标签（起始内距 28、间距 8，规格卡实测值）
|
||||
Some(label) => {
|
||||
let label_style = TypeStyle {
|
||||
weight: Weight::Medium,
|
||||
..TypeRole::BodyMedium.style()
|
||||
};
|
||||
let label_px = size.label_px();
|
||||
row![
|
||||
glyph,
|
||||
text(label)
|
||||
.size(label_px)
|
||||
.font(ui.font_of(TypeStyle {
|
||||
size_px: label_px,
|
||||
..label_style
|
||||
}))
|
||||
.color(ink),
|
||||
]
|
||||
.spacing(size.gap_px())
|
||||
.align_y(Alignment::Center)
|
||||
.padding(Padding {
|
||||
top: 0.0,
|
||||
right: 28.0,
|
||||
bottom: 0.0,
|
||||
left: size.pad_start_px(),
|
||||
})
|
||||
.into()
|
||||
}
|
||||
None => container(glyph)
|
||||
.width(Length::Fill)
|
||||
.height(Length::Fill)
|
||||
.align_x(Alignment::Center)
|
||||
.align_y(Alignment::Center)
|
||||
.into(),
|
||||
};
|
||||
|
||||
let shape = size.shape();
|
||||
let radius = size.radius_px();
|
||||
let style = move |_theme: &iced::Theme, status: button::Status| {
|
||||
let state = forced.unwrap_or_else(|| Interaction::from_status(status));
|
||||
let background = match state.layer() {
|
||||
// 状态层叠在容器色上（与按钮族同一条 `overlay_color` 口径）
|
||||
Some(_) => interaction::overlay_color(
|
||||
ui,
|
||||
state,
|
||||
Role::OnPrimaryContainer,
|
||||
Role::PrimaryContainer,
|
||||
)
|
||||
.or(Some(ui.color(Role::PrimaryContainer))),
|
||||
None => Some(ui.color(Role::PrimaryContainer)),
|
||||
};
|
||||
let text_color = if state.is_disabled() {
|
||||
interaction::disabled_button_content(ui, Role::OnPrimaryContainer, true)
|
||||
} else {
|
||||
ui.color(Role::OnPrimaryContainer)
|
||||
};
|
||||
|
||||
button::Style {
|
||||
background: background.map(Background::Color),
|
||||
text_color,
|
||||
border: Border {
|
||||
radius: iced::border::Radius::new(radius),
|
||||
..Border::default()
|
||||
},
|
||||
// 规格卡不画阴影；M3 的 FAB 高程靠容器色（rubric §7 的「L0/L1 不用阴影」同源）
|
||||
shadow: Shadow::default(),
|
||||
snap: true,
|
||||
}
|
||||
};
|
||||
|
||||
let width = if matches!(size, FabSize::Extended) {
|
||||
// 扩展态是最小宽（160）：标签更长就撑开，短了就顶到最小宽
|
||||
Length::Fixed(size.width_px())
|
||||
} else {
|
||||
Length::Fixed(size.width_px())
|
||||
};
|
||||
|
||||
let element = button(content)
|
||||
.width(width)
|
||||
.height(Length::Fixed(size.height_px()))
|
||||
.padding(Padding::default())
|
||||
.style(style);
|
||||
|
||||
debug_assert!(radius > 0.0, "FAB 圆角必须来自 ShapeScale（{shape:?}）");
|
||||
debug_assert!(
|
||||
matches!(size, FabSize::Extended) || size.pad_start_px() == 0.0,
|
||||
"只有扩展态有起始内距"
|
||||
);
|
||||
|
||||
match spec.on_press {
|
||||
Some(message) => element.on_press(message).into(),
|
||||
None => element.into(),
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests;
|
||||
@@ -0,0 +1,40 @@
|
||||
//! FAB 的几何断言（四档尺寸/圆角/图标/内距，全部对着规格卡原值）。
|
||||
//!
|
||||
//! 抓得住：档位与规格卡错位（例如把 Default 写成 48）、圆角被写成半高、扩展态内距悄悄改成 M3 的 16。
|
||||
//! 抓不住：配色与状态层（那走 `interaction` 的既有测试）、以及图上好不好看（D30）。
|
||||
|
||||
use unlucky_design::inkcat::size::FabSize;
|
||||
|
||||
#[test]
|
||||
fn the_four_states_are_the_spec_sizes() {
|
||||
for (size, width, height, radius) in [
|
||||
(FabSize::Small, 40.0, 40.0, 12.0),
|
||||
(FabSize::Default, 56.0, 56.0, 16.0),
|
||||
(FabSize::Medium, 80.0, 80.0, 20.0),
|
||||
(FabSize::Extended, 160.0, 56.0, 16.0),
|
||||
] {
|
||||
assert_eq!(size.width_px(), width, "{size:?} 宽");
|
||||
assert_eq!(size.height_px(), height, "{size:?} 高");
|
||||
assert_eq!(size.radius_px(), radius, "{size:?} 圆角");
|
||||
}
|
||||
assert_eq!(FabSize::ALL.len(), 4);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn only_the_extended_state_carries_a_label_and_its_inset() {
|
||||
for size in [FabSize::Small, FabSize::Default, FabSize::Medium] {
|
||||
assert_eq!(size.label_px(), 0.0, "{size:?} 不该有标签");
|
||||
assert_eq!(size.pad_start_px(), 0.0);
|
||||
}
|
||||
assert_eq!(FabSize::Extended.label_px(), 15.0);
|
||||
assert_eq!(FabSize::Extended.pad_start_px(), 28.0);
|
||||
assert_eq!(FabSize::Extended.gap_px(), 8.0);
|
||||
}
|
||||
|
||||
/// 图标随档放大（20 / 26 / 34），扩展态回到 24（它与标签同行，跟着文字尺度走）。
|
||||
#[test]
|
||||
fn the_glyph_grows_with_the_smaller_states() {
|
||||
assert!(FabSize::Small.icon_px() < FabSize::Default.icon_px());
|
||||
assert!(FabSize::Default.icon_px() < FabSize::Medium.icon_px());
|
||||
assert_eq!(FabSize::Extended.icon_px(), 24.0);
|
||||
}
|
||||
@@ -25,6 +25,7 @@
|
||||
use iced::Padding;
|
||||
|
||||
use unlucky_design::icons::IconSize;
|
||||
use unlucky_design::inkcat::size::ControlSize;
|
||||
use unlucky_design::spacing::Space;
|
||||
|
||||
use crate::theme::{Ui, STROKE_PX};
|
||||
@@ -44,29 +45,50 @@ pub struct Geometry {
|
||||
pub gap: f32,
|
||||
/// 描边宽度；`0` = 该式无描边。
|
||||
pub stroke: f32,
|
||||
/// 尺寸档（决定高、圆角折算边、内距与标签字级）。
|
||||
pub size: ControlSize,
|
||||
}
|
||||
|
||||
impl Geometry {
|
||||
/// 按变体 + 有没有前置图标求值（带图标时左内边距收到 16，右仍 24）。
|
||||
/// 按变体 + 有没有前置图标求值（默认 **S 档 = 40 高**，产品页用的就是这一档）。
|
||||
///
|
||||
/// `#[cfg(test)]`：产品路径一律走 [`Geometry::sized`]（`assemble` 里带上了尺寸档），
|
||||
/// 这里只给单测一个「S 档」的便捷入口，留成产品 API 只会让 `dead_code` 响。
|
||||
#[cfg(test)]
|
||||
pub fn of(ui: &Ui, variant: Variant, leading_icon: bool) -> Self {
|
||||
Self::sized(ui, variant, leading_icon, ControlSize::S)
|
||||
}
|
||||
|
||||
/// 按尺寸档求值（规格卡 `BUTTONS / XS - XL`）。
|
||||
///
|
||||
/// 内距取 [`ControlSize::pad_x`]（规格卡没写内距，那是 `[估]` 的「半高向下取 4 栅格、封顶 48」
|
||||
/// 推导值）；带前置图标时左侧再收 **4**（`Space::X1`）——药丸左半圆里图标要离弧远一点，
|
||||
/// 与 M3 的「带图标左内距更小」是同一条观感规则。S 档因此是 **20 / 16 / 20**，
|
||||
/// 而 M3 官方是 24 / 16 / 24：差 4，登记在 M229 报告里（规格卡没给内距，我们按它自己的
|
||||
/// 半高规则推，而不是回到官方值——否则五档里只有 S 一种内距口径）。
|
||||
pub fn sized(ui: &Ui, variant: Variant, leading_icon: bool, size: ControlSize) -> Self {
|
||||
let (_, _, border) = variant.roles();
|
||||
let pad = size.pad_x();
|
||||
let start = if leading_icon {
|
||||
ui.space(Space::X4)
|
||||
pad - ui.space(Space::X1)
|
||||
} else {
|
||||
ui.space(Space::X6)
|
||||
pad
|
||||
};
|
||||
|
||||
Self {
|
||||
height: ui.metrics().control_height,
|
||||
height: size.height_px(),
|
||||
padding: Padding {
|
||||
top: 0.0,
|
||||
right: ui.space(Space::X6),
|
||||
right: pad,
|
||||
bottom: 0.0,
|
||||
left: start,
|
||||
},
|
||||
// 图标盒固定 18（`IconSize::Button`）：规格卡五档按钮的图标都没单独写字号，
|
||||
// 档位只放大容器与标签，不放大图标——那是按钮，不是 FAB。
|
||||
icon: IconSize::Button.px(),
|
||||
gap: ui.space(Space::X2),
|
||||
stroke: if border.is_some() { STROKE_PX } else { 0.0 },
|
||||
size,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,6 +47,7 @@ use unlucky_design::color::Role;
|
||||
use unlucky_design::component_map::Component;
|
||||
use unlucky_design::elevation::Elevation;
|
||||
use unlucky_design::icons::IconKind;
|
||||
use unlucky_design::inkcat::size::ControlSize;
|
||||
use unlucky_design::shape::ShapeScale;
|
||||
|
||||
use crate::icons;
|
||||
@@ -56,8 +57,10 @@ use super::interaction::Interaction;
|
||||
use super::layout;
|
||||
|
||||
mod assemble;
|
||||
mod fab;
|
||||
mod geometry;
|
||||
|
||||
pub use fab::{fab, Fab};
|
||||
pub use geometry::{Geometry, IconGeometry};
|
||||
|
||||
use assemble::{assemble, style_closure, StyleSpec};
|
||||
@@ -160,35 +163,47 @@ impl Variant {
|
||||
}
|
||||
}
|
||||
|
||||
/// IconButton 的三种容器变体（12b §2.5）。
|
||||
/// IconButton 的**四式**（规格卡 `ICON BUTTONS / FILLED - TONAL - OUTLINED - PLAIN`）。
|
||||
///
|
||||
/// 规格卡画了四颗：实心 / 色调 / 描边 / 纯图标。12b §2.5 只有前三式（Standard / Filled / Tonal），
|
||||
/// M229 按规格卡把 Standard 拆成 **Plain**（纯图标）与 **Outlined**（1px 描边圆圈），
|
||||
/// `Standard` 这个名字保留为 `Plain` 的别名语义，避免既有调用点全改。
|
||||
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
|
||||
pub enum IconVariant {
|
||||
/// 标准：容器透明、图标 `OnSurfaceVariant`（各态图标色不变，12b 2.4）。
|
||||
Standard,
|
||||
/// 纯图标（规格卡 `PLAIN`）：容器透明、图标 `OnSurfaceVariant`（各态图标色不变，12b 2.4）。
|
||||
Plain,
|
||||
/// 实心：`Primary` + `OnPrimary`。
|
||||
Filled,
|
||||
/// Tonal：`SecondaryContainer` + `OnSecondaryContainer`。
|
||||
Tonal,
|
||||
/// 描边：透明容器 + 1px `Outline`（规格卡第三颗，M229 新增）。
|
||||
Outlined,
|
||||
}
|
||||
|
||||
impl IconVariant {
|
||||
/// 三式全序（gallery 顺序）。
|
||||
pub const ALL: [IconVariant; 3] = [
|
||||
IconVariant::Standard,
|
||||
/// 旧名字的别名：`Standard` = [`IconVariant::Plain`]（既有调用点不必改语义）。
|
||||
#[allow(non_upper_case_globals)]
|
||||
pub const Standard: IconVariant = IconVariant::Plain;
|
||||
|
||||
/// 四式全序（gallery 顺序 = 规格卡从左到右）。
|
||||
pub const ALL: [IconVariant; 4] = [
|
||||
IconVariant::Filled,
|
||||
IconVariant::Tonal,
|
||||
IconVariant::Outlined,
|
||||
IconVariant::Plain,
|
||||
];
|
||||
|
||||
/// 稳定名字。
|
||||
pub const fn name(self) -> &'static str {
|
||||
match self {
|
||||
IconVariant::Standard => "standard",
|
||||
IconVariant::Plain => "plain",
|
||||
IconVariant::Filled => "filled",
|
||||
IconVariant::Tonal => "tonal",
|
||||
IconVariant::Outlined => "outlined",
|
||||
}
|
||||
}
|
||||
|
||||
/// **禁用态图标色**：三式都是 `OnSurface` @0.38 —— A1
|
||||
/// **禁用态图标色**：四式都是 `OnSurface` @0.38 —— A1
|
||||
/// （`StandardIconButtonTokens.DisabledColor` / `FilledIconButtonTokens.DisabledColor`）。
|
||||
pub(crate) const fn disabled_content(self) -> Role {
|
||||
Role::OnSurface
|
||||
@@ -197,13 +212,14 @@ impl IconVariant {
|
||||
/// 色彩角色三元组（同 [`Variant::roles`] 的口径）。
|
||||
pub(crate) const fn roles(self) -> (Option<Role>, Role, Option<Role>) {
|
||||
match self {
|
||||
IconVariant::Standard => (None, Role::OnSurfaceVariant, None),
|
||||
IconVariant::Plain => (None, Role::OnSurfaceVariant, None),
|
||||
IconVariant::Filled => (Some(Role::Primary), Role::OnPrimary, None),
|
||||
IconVariant::Tonal => (
|
||||
Some(Role::SecondaryContainer),
|
||||
Role::OnSecondaryContainer,
|
||||
None,
|
||||
),
|
||||
IconVariant::Outlined => (None, Role::OnSurfaceVariant, Some(Role::Outline)),
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -220,6 +236,8 @@ pub struct Button<'a, M> {
|
||||
leading: Option<IconKind>,
|
||||
trailing: Option<IconKind>,
|
||||
state: Option<Interaction>,
|
||||
/// 尺寸档（规格卡 `BUTTONS / XS - XL`）。产品默认 **S（40 高）**，与 M3 `control_height` 同值。
|
||||
size: ControlSize,
|
||||
}
|
||||
|
||||
impl<'a, M> Button<'a, M> {
|
||||
@@ -231,6 +249,7 @@ impl<'a, M> Button<'a, M> {
|
||||
leading: None,
|
||||
trailing: None,
|
||||
state: None,
|
||||
size: ControlSize::S,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -242,9 +261,19 @@ impl<'a, M> Button<'a, M> {
|
||||
leading: None,
|
||||
trailing: None,
|
||||
state: None,
|
||||
size: ControlSize::S,
|
||||
}
|
||||
}
|
||||
|
||||
/// 换尺寸档（`XS 32 / S 40 / M 56 / L 96 / XL 136`，圆角一律药丸）。
|
||||
///
|
||||
/// 产品页只用 **S**（= M3 `control_height` 40）；M / L / XL 是规格卡的梯子档，给
|
||||
/// 空态主行动与展示型入口留着，`--screen=gallery` 的矩阵会把五档一起拍出来。
|
||||
pub fn size(mut self, size: ControlSize) -> Self {
|
||||
self.size = size;
|
||||
self
|
||||
}
|
||||
|
||||
/// 前置图标（12b 1.4：带图标时左内边距收到 16）。
|
||||
pub fn leading(mut self, kind: IconKind) -> Self {
|
||||
self.leading = Some(kind);
|
||||
|
||||
@@ -69,16 +69,20 @@ fn geometry_matches_the_reference_values() {
|
||||
20.0,
|
||||
"12b 1.2 full 圆角 = 高/2"
|
||||
);
|
||||
assert_eq!(geometry.padding.left, 24.0, "12b 1.3 左 24");
|
||||
assert_eq!(geometry.padding.right, 24.0, "12b 1.3 右 24");
|
||||
// M229：内距取规格卡的 `ControlSize::pad_x`（S 档 = 20），不再是 12b 的 24。
|
||||
assert_eq!(geometry.padding.left, 20.0, "S 档 pad_x 20");
|
||||
assert_eq!(geometry.padding.right, 20.0, "S 档 pad_x 20");
|
||||
assert_eq!(geometry.padding.top, 0.0);
|
||||
assert_eq!(geometry.gap, 8.0, "12b 1.6 图标↔文字 8");
|
||||
assert_eq!(geometry.gap, ui.space(Space::X2));
|
||||
assert_eq!(geometry.stroke, 0.0, "实心按钮无描边");
|
||||
|
||||
let with_icon = Geometry::of(&ui, Variant::Filled, true);
|
||||
assert_eq!(with_icon.padding.left, 16.0, "12b 1.4 带图标左内边距 16");
|
||||
assert_eq!(with_icon.padding.right, 24.0, "带图标右内边距不动");
|
||||
assert_eq!(
|
||||
with_icon.padding.left, 16.0,
|
||||
"带图标左侧再收 4（20 − 4）：与 12b 1.4 的 16 恰好同值"
|
||||
);
|
||||
assert_eq!(with_icon.padding.right, 20.0, "带图标右内边距不动");
|
||||
|
||||
let outlined = Geometry::of(&ui, Variant::Outlined, false);
|
||||
assert_eq!(outlined.stroke, STROKE_PX, "rubric G7 全站 1px");
|
||||
|
||||
Reference in new issue
Block a user