feat(design): M70 默认色候选 —— 浅冷天蓝落成两行常量 + 三档候选色卡
默认色从官方紫 `#6750A4` 换成「浅冷天蓝」,并把「换默认只改哪一行」做成常量: - `palettes::DEFAULT_SEED` = `#87CEEB`(CSS skyblue)+ `palettes::DEFAULT_NEUTRAL_CHROMA` = 12 - `Palettes::baseline()` / `Scheme::baseline()` = 产品默认(消费方拿到的就是它) - 官方口径锚点独立保留:`Palettes::official_baseline()` / `Scheme::official_baseline()` (种子 `#6750A4` + 中性 6),官方对齐测试改指向它,98 项仍每通道误差 0 - 新增 `Palettes::from_seed_with_neutral_chroma(seed, neutral_chroma)`:中性彩度从写死 常数变成入参(neutral-variant 按官方 +2 跟随),算法、tone 表、gamut 映射一行未动 有意偏离登记(已写进 color 模块文档):中性彩度 6 → 12 是对官方 Tonal Spot 的偏离, 理由=产品要冷调表面;primary 的 tone 被官方钉在 40,种子再浅也变不成浅蓝, 「浅」只能落在中性色上。 三档候选(同一条 HCT 管道,只差种子与中性彩度)逐个 pin 在 tests/skyseed_candidates.rs: ① 保守蓝 `#2196F3`/6、② 冷调蓝 `#2196F3`/12、③ 浅冷蓝 `#87CEEB`/12(临时默认,待用户确认)。 WCAG AA 扩到候选档:26 组 × 3 档 × 2 模式 = 156 项全绿,最紧 4.99:1。
This commit is contained in:
1 parent
c20c742b60
commit
79404fa9d1
6 files changed
+476
-34
No files matched your search
@@ -27,7 +27,8 @@
|
||||
//! | tone | CIELAB `L*` | CIELAB `L*`(同一个 `Y` 轴) | 逐值一致 |
|
||||
//! | 色相 / 彩度 | CAM16 | CAM16(D65 默认观察条件) | 逐值一致(误差 < 1e-4) |
|
||||
//! | gamut 映射 | `HctSolver` | 同一套两段求解器,关键平面表原样搬运 | 逐通道一致 |
|
||||
//! | 调色板彩度 | Tonal Spot 变体:36 / 16 / 24 / 6 / 8,error 25°/84 | 同 | 逐值一致 |
|
||||
//! | 调色板彩度 | Tonal Spot 变体:36 / 16 / 24 / 6 / 8,error 25°/84 | 同(primary/secondary/tertiary/neutral-variant/error 逐值一致) | 逐值一致 |
|
||||
//! | 中性彩度 | 6(几乎无色) | 官方口径 6;**产品默认用 12**(有意偏离,见下节「出厂默认色」) | 仅此处偏离 |
|
||||
//! | 角色 tone 表 | ColorSpec2021 | 同(49 角色 × light/dark) | 逐值一致 |
|
||||
//!
|
||||
//! 对齐证据在 `tests/official_baseline.rs` 与 `tests/official_accent.rs`:期望值全部由
|
||||
@@ -50,11 +51,34 @@
|
||||
//! tertiary 三族,中性色与 error 保持基线。强调族的色值与官方 `from_seed(accent)` 逐个对得上
|
||||
//! (`tests/official_accent.rs`,8 个种子 × 12 个强调族角色 × 2 模式 = 192 项)。
|
||||
//!
|
||||
//! ## 出厂默认色(M70:浅冷天蓝)——含一处**有意偏离**
|
||||
//!
|
||||
//! 产品默认不走官方紫,而是「浅冷天蓝」。默认值收在两个常量里,**换默认只改这两行**:
|
||||
//!
|
||||
//! | 常量 | 当前值 | 官方值 | 说明 |
|
||||
//! |---|---|---|---|
|
||||
//! | [`palettes::DEFAULT_SEED`] | `#87CEEB`(CSS `skyblue`) | `#6750A4`([`palettes::BASELINE_SEED`]) | 种子只贡献**色相**(CAM16 ≈ 226°);种子彩度会被 Tonal Spot 丢掉 |
|
||||
//! | [`palettes::DEFAULT_NEUTRAL_CHROMA`] | `12` | `6` | 让 surface / surface-container-* 带淡蓝调 |
|
||||
//!
|
||||
//! > ⚠️ **有意偏离登记**:中性彩度 6 → 12 是对官方 Tonal Spot 的偏离,理由=产品要「浅冷」的冷调表面。
|
||||
//! > 官方 6 的表面几乎无色,单靠换种子做不到「浅」——因为 primary 的 tone 被官方钉在 40,
|
||||
//! > 种子再浅主色也还是中蓝;**「浅」只能落在中性色上**。除这一处外全部走官方常数
|
||||
//! > (primary 36 / secondary 16 / tertiary 24 且色相 +60° / neutral-variant = neutral + 2 /
|
||||
//! > error 25°·84),tone 表与 gamut 映射一行未动。
|
||||
//!
|
||||
//! 官方口径的锚点仍然完整保留:[`Scheme::official_baseline`](种子 `#6750A4` + 中性 6)
|
||||
//! 是 `tests/official_baseline.rs` 的对账入口,98 项仍是每通道 ≤1;
|
||||
//! `tests/skyseed_candidates.rs` 把三档候选(保守蓝 / 冷调蓝 / 浅冷蓝)的色值逐个 pin 住,
|
||||
//! 换默认时它会指着要改的行。
|
||||
//!
|
||||
//! ⚠️ 当前默认色是「待用户确认」的**临时默认**(推荐档③ 浅冷蓝)。
|
||||
//!
|
||||
//! ## 对比度纪律(WCAG AA)
|
||||
//!
|
||||
//! - 所有 `on-*` 与其承载色(`*-container`、`primary`、`surface`)都满足 **≥ 4.5:1**;
|
||||
//! 这一条由 `tests/contrast_aa.rs` 全表验证,且因为 tone 轴固定,**换任何种子色都成立**
|
||||
//! (WCAG 对比度只取决于相对亮度,而 tone 直接钉住 `L*`)。
|
||||
//! (WCAG 对比度只取决于相对亮度,而 tone 直接钉住 `L*`;中性彩度同理,
|
||||
//! `sky_seed_candidates_meet_wcag_aa` 逐档验证了 M70 的三档候选)。
|
||||
//! - 例外(显式登记,非缺陷):
|
||||
//! - [`Role::Outline`] 对 [`Role::Surface`]:M3 定义的**非文字**元素(输入框描边),
|
||||
//! 目标 3:1,实测 light 4.26:1 / dark 5.89:1;
|
||||
@@ -76,7 +100,7 @@ mod space;
|
||||
mod viewing_conditions;
|
||||
|
||||
pub use hct::Hct;
|
||||
pub use palettes::{PaletteSlot, Palettes, BASELINE_SEED};
|
||||
pub use palettes::{PaletteSlot, Palettes, BASELINE_SEED, DEFAULT_NEUTRAL_CHROMA, DEFAULT_SEED};
|
||||
pub use roles::Role;
|
||||
pub use scheme::{Scheme, SchemeFlavor, SCRIM_ALPHA, SHADOW_ALPHA};
|
||||
pub use state::StateLayer;
|
||||
|
||||
@@ -8,13 +8,43 @@
|
||||
//! (色相 +60°)、neutral **6**、neutral-variant **8**、error 固定色相 **25** 彩度 **84**。
|
||||
//! 注意 primary 的 36 与种子自身的彩度无关——这是官方口径:Tonal Spot 是「镇静」变体,
|
||||
//! 再鲜艳的种子也会被收到 36,再灰的种子也会被提到 36。
|
||||
//!
|
||||
//! ## 两个入口:官方口径 vs 产品默认(M70)
|
||||
//!
|
||||
//! | 入口 | 种子 | 中性彩度 | 用途 |
|
||||
//! |---|---|---|---|
|
||||
//! | [`Palettes::official_baseline`] / [`super::Scheme::official_baseline`] | [`BASELINE_SEED`](`#6750A4`) | 6(官方) | 与官方 Java 实现逐角色对齐的**锚点**,`tests/official_baseline.rs` 用它 |
|
||||
//! | [`Palettes::baseline`] / [`super::Scheme::baseline`] | [`DEFAULT_SEED`] | [`DEFAULT_NEUTRAL_CHROMA`] | **产品出厂默认**(消费方拿到的就是它) |
|
||||
//!
|
||||
//! 换默认色只改 [`DEFAULT_SEED`] 与 [`DEFAULT_NEUTRAL_CHROMA`] 两行常量(中性彩度不动就只改一行),
|
||||
//! 然后重跑 `tests/skyseed_candidates.rs` 的 pin(它会打印新值并指出哪几行要同步)。
|
||||
//! 官方锚点不受影响——**算法没动,动的只是入参**。
|
||||
//!
|
||||
//! ⚠️ 中性彩度 6 → 12 是**有意偏离**官方 Tonal Spot(理由:产品要「浅冷」的冷调表面),
|
||||
//! 偏离登记见 [`super`] 模块文档的「出厂默认色」小节。
|
||||
|
||||
use super::tonal::TonalPalette;
|
||||
use super::Color;
|
||||
|
||||
/// M3 baseline 种子色(与 material-color-utilities 的默认基线同值)。
|
||||
///
|
||||
/// **不是**产品默认色——产品默认见 [`DEFAULT_SEED`]。
|
||||
pub const BASELINE_SEED: Color = Color::rgb(0x67, 0x50, 0xA4);
|
||||
|
||||
/// 产品出厂默认种子色(M70 候选③「浅冷蓝」,**待用户确认**)。
|
||||
///
|
||||
/// `#87CEEB` 就是 CSS 的 `skyblue`。注意它的彩度(36)会被 Tonal Spot 丢掉——
|
||||
/// 主色板的彩度恒为 36,种子只贡献**色相**(这里 CAM16 hue ≈ 226°,偏 cyanish 的蓝)。
|
||||
pub const DEFAULT_SEED: Color = Color::rgb(0x87, 0xCE, 0xEB);
|
||||
|
||||
/// 产品出厂默认的中性调色板彩度(官方 Tonal Spot 是 6,这里 12 = **有意偏离**)。
|
||||
///
|
||||
/// 官方 6 让表面几乎无色;12 让 surface / surface-container-* 带一层淡蓝调,
|
||||
/// 这是「浅冷天蓝」唯一能落在表面上的手段(primary 的 tone 被官方钉在 40,
|
||||
/// 种子再浅也变不成浅蓝)。安全区间 6..=12:neutral-variant = neutral + 2,
|
||||
/// 超过 13 会顶到 secondary 的 16,破坏「neutral < neutral-variant < secondary」。
|
||||
pub const DEFAULT_NEUTRAL_CHROMA: f64 = 12.0;
|
||||
|
||||
/// 调色板槽位(M3 的六条 tonal palette)。
|
||||
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
|
||||
pub enum PaletteSlot {
|
||||
@@ -24,9 +54,9 @@ pub enum PaletteSlot {
|
||||
Secondary,
|
||||
/// 第三调色板(种子色相 +60°,彩度 24)。
|
||||
Tertiary,
|
||||
/// 中性调色板(同色相,彩度 6)。
|
||||
/// 中性调色板(同色相;官方彩度 6,产品默认 12——见 [`DEFAULT_NEUTRAL_CHROMA`])。
|
||||
Neutral,
|
||||
/// 中性变体调色板(同色相,彩度 8)。
|
||||
/// 中性变体调色板(同色相,彩度 = neutral + 2;官方 8)。
|
||||
NeutralVariant,
|
||||
/// 错误调色板(固定红相 25°,彩度 84)。
|
||||
Error,
|
||||
@@ -38,10 +68,10 @@ const PRIMARY_CHROMA: f64 = 36.0;
|
||||
const SECONDARY_CHROMA: f64 = 16.0;
|
||||
/// tertiary 彩度。
|
||||
const TERTIARY_CHROMA: f64 = 24.0;
|
||||
/// neutral 彩度(几乎是灰)。
|
||||
const NEUTRAL_CHROMA: f64 = 6.0;
|
||||
/// neutral-variant 彩度。
|
||||
const NEUTRAL_VARIANT_CHROMA: f64 = 8.0;
|
||||
/// 官方 Tonal Spot 的 neutral 彩度(几乎是灰)。产品默认用 [`DEFAULT_NEUTRAL_CHROMA`]。
|
||||
const TONAL_SPOT_NEUTRAL_CHROMA: f64 = 6.0;
|
||||
/// neutral-variant 相对 neutral 的彩度偏移(官方 6 → 8,即 +2)。
|
||||
const NEUTRAL_VARIANT_OFFSET: f64 = 2.0;
|
||||
/// error 的色相(HCT 红相)。
|
||||
const ERROR_HUE_DEG: f64 = 25.0;
|
||||
/// error 的彩度。
|
||||
@@ -67,15 +97,33 @@ pub struct Palettes {
|
||||
}
|
||||
|
||||
impl Palettes {
|
||||
/// 出厂基线(种子 `#6750A4`)。
|
||||
/// **产品出厂默认**:种子 [`DEFAULT_SEED`] + 中性彩度 [`DEFAULT_NEUTRAL_CHROMA`]。
|
||||
///
|
||||
/// 消费方(`DesignTokens::baseline`、iced 适配层)拿到的就是这套,所以产品默认色
|
||||
/// 只需要改那两个常量。
|
||||
pub fn baseline() -> Self {
|
||||
Self::from_seed_with_neutral_chroma(DEFAULT_SEED, DEFAULT_NEUTRAL_CHROMA)
|
||||
}
|
||||
|
||||
/// **官方基线的锚点**:种子 [`BASELINE_SEED`] + 官方中性彩度 6(等价官方
|
||||
/// `SchemeTonalSpot(0xFF6750A4)`)。只给对齐测试与文档表格用。
|
||||
pub fn official_baseline() -> Self {
|
||||
Self::from_seed(BASELINE_SEED)
|
||||
}
|
||||
|
||||
/// 从一个种子色派生全套调色板(官方 Tonal Spot 变体)。
|
||||
/// 从一个种子色派生全套调色板(官方 Tonal Spot 变体,中性彩度取官方 6)。
|
||||
pub fn from_seed(seed: Color) -> Self {
|
||||
Self::from_seed_with_neutral_chroma(seed, TONAL_SPOT_NEUTRAL_CHROMA)
|
||||
}
|
||||
|
||||
/// 从一个种子色派生,并显式指定中性调色板彩度(`6.0` 即官方 Tonal Spot)。
|
||||
///
|
||||
/// 除 neutral 外**全部走官方常数**:primary 恒定 36、secondary 16、tertiary 24(色相 +60°)、
|
||||
/// neutral-variant = neutral + 2、error 固定 25°/84。所以这条入口不绕算法,
|
||||
/// 只是把「官方写死在 `getNeutralPalette` 里的那一个数」变成参数。
|
||||
pub fn from_seed_with_neutral_chroma(seed: Color, neutral_chroma: f64) -> Self {
|
||||
let hue = super::Hct::from_color(seed).hue;
|
||||
Self::tonal_spot(hue)
|
||||
Self::tonal_spot(hue, neutral_chroma)
|
||||
}
|
||||
|
||||
/// 只换强调色:primary/secondary/tertiary 跟着新强调色的色相走,
|
||||
@@ -94,14 +142,14 @@ impl Palettes {
|
||||
}
|
||||
}
|
||||
|
||||
/// 官方 Tonal Spot 的六条调色板(色相来自种子,彩度取官方常数)。
|
||||
fn tonal_spot(hue: f64) -> Self {
|
||||
/// 官方 Tonal Spot 的六条调色板(色相来自种子,彩度取官方常数,neutral 可调)。
|
||||
fn tonal_spot(hue: f64, neutral_chroma: f64) -> Self {
|
||||
Self {
|
||||
primary: TonalPalette::new(hue, PRIMARY_CHROMA),
|
||||
secondary: TonalPalette::new(hue, SECONDARY_CHROMA),
|
||||
tertiary: TonalPalette::new(hue + TERTIARY_HUE_SHIFT_DEG, TERTIARY_CHROMA),
|
||||
neutral: TonalPalette::new(hue, NEUTRAL_CHROMA),
|
||||
neutral_variant: TonalPalette::new(hue, NEUTRAL_VARIANT_CHROMA),
|
||||
neutral: TonalPalette::new(hue, neutral_chroma),
|
||||
neutral_variant: TonalPalette::new(hue, neutral_chroma + NEUTRAL_VARIANT_OFFSET),
|
||||
error: TonalPalette::new(ERROR_HUE_DEG, ERROR_CHROMA),
|
||||
}
|
||||
}
|
||||
@@ -129,8 +177,8 @@ mod tests {
|
||||
use super::*;
|
||||
|
||||
#[test]
|
||||
fn baseline_palettes_use_the_official_tonal_spot_chromas() {
|
||||
let palettes = Palettes::baseline();
|
||||
fn official_baseline_uses_the_official_tonal_spot_chromas() {
|
||||
let palettes = Palettes::official_baseline();
|
||||
assert_eq!(palettes.primary.chroma(), 36.0);
|
||||
assert_eq!(palettes.secondary.chroma(), 16.0);
|
||||
assert_eq!(palettes.tertiary.chroma(), 24.0);
|
||||
@@ -140,9 +188,42 @@ mod tests {
|
||||
assert_eq!(palettes.error.chroma(), 84.0);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn product_default_only_moves_the_named_knobs() {
|
||||
// 产品默认与官方锚点的差别必须**只**在种子色相与中性彩度两处:
|
||||
// primary/secondary/tertiary/error 的取法一模一样(算法没动)。
|
||||
let official = Palettes::official_baseline();
|
||||
let product = Palettes::baseline();
|
||||
assert_eq!(product.primary.chroma(), official.primary.chroma());
|
||||
assert_eq!(product.secondary.chroma(), official.secondary.chroma());
|
||||
assert_eq!(product.tertiary.chroma(), official.tertiary.chroma());
|
||||
assert_eq!(product.error, official.error);
|
||||
assert_eq!(product.neutral.chroma(), DEFAULT_NEUTRAL_CHROMA);
|
||||
assert_eq!(
|
||||
product.neutral_variant.chroma(),
|
||||
DEFAULT_NEUTRAL_CHROMA + NEUTRAL_VARIANT_OFFSET
|
||||
);
|
||||
let seed = super::super::Hct::from_color(DEFAULT_SEED);
|
||||
assert!((product.primary.hue_deg() - seed.hue).abs() < 1.0e-9);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn neutral_chroma_knob_keeps_the_official_ordering() {
|
||||
// 官方关系 neutral(6) < neutral-variant(8) < secondary(16) 在安全区间里必须一直成立,
|
||||
// 否则「表面比次色还艳」或两族撞色。
|
||||
for neutral in [6.0, 8.0, 10.0, 12.0] {
|
||||
let p = Palettes::from_seed_with_neutral_chroma(DEFAULT_SEED, neutral);
|
||||
assert!(p.neutral.chroma() < p.neutral_variant.chroma());
|
||||
assert!(p.neutral_variant.chroma() < p.secondary.chroma());
|
||||
// 中性彩度不影响 tone 轴:tone 98 的 surface 仍是最亮的那个。
|
||||
let surface = p.tone(PaletteSlot::Neutral, 98.0);
|
||||
assert!(surface.relative_luminance() > 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn baseline_hue_comes_from_the_seed() {
|
||||
let palettes = Palettes::baseline();
|
||||
let palettes = Palettes::official_baseline();
|
||||
let seed = super::super::Hct::from_color(BASELINE_SEED);
|
||||
assert!((palettes.primary.hue_deg() - seed.hue).abs() < 1.0e-9);
|
||||
assert!((palettes.neutral.hue_deg() - seed.hue).abs() < 1.0e-9);
|
||||
@@ -168,11 +249,4 @@ mod tests {
|
||||
assert_ne!(swapped.primary.hue_deg(), base.primary.hue_deg());
|
||||
assert_eq!(swapped.primary.chroma(), 36.0);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn neutral_variant_sits_between_neutral_and_secondary() {
|
||||
let palettes = Palettes::baseline();
|
||||
assert!(palettes.neutral.chroma() < palettes.neutral_variant.chroma());
|
||||
assert!(palettes.neutral_variant.chroma() < palettes.secondary.chroma());
|
||||
}
|
||||
}
|
||||
@@ -178,11 +178,21 @@ pub struct Scheme {
|
||||
}
|
||||
|
||||
impl Scheme {
|
||||
/// 出厂基线方案(种子 `#6750A4`,官方 Tonal Spot 输出)。
|
||||
/// **产品出厂默认方案**(种子 [`super::palettes::DEFAULT_SEED`] + 中性彩度
|
||||
/// [`super::palettes::DEFAULT_NEUTRAL_CHROMA`],见 [`Palettes::baseline`])。
|
||||
pub fn baseline(flavor: SchemeFlavor) -> Self {
|
||||
Self::from_palettes(&Palettes::baseline(), flavor)
|
||||
}
|
||||
|
||||
/// **官方基线锚点**(种子 `#6750A4` + 官方中性彩度 6,等价官方
|
||||
/// `SchemeTonalSpot(0xFF6750A4)`)。
|
||||
///
|
||||
/// 与 [`Scheme::baseline`] 的区别只有入参:算法、tone 表、gamut 映射完全同一条路径,
|
||||
/// 所以 `tests/official_baseline.rs` 拿它跟官方 Java 输出逐角色对账。
|
||||
pub fn official_baseline(flavor: SchemeFlavor) -> Self {
|
||||
Self::from_palettes(&Palettes::official_baseline(), flavor)
|
||||
}
|
||||
|
||||
/// 指定种子色的方案(表面色与强调色同源,等价官方 `SchemeTonalSpot`)。
|
||||
pub fn from_seed(flavor: SchemeFlavor, seed: Color) -> Self {
|
||||
Self::from_palettes(&Palettes::from_seed(seed), flavor)
|
||||
|
||||
Reference in new issue
Block a user