#![forbid(unsafe_code)]
use std::fmt::Write as _;
pub const DEFAULT_BASE_PX: u16 = 16;
pub const BASE_TOKEN: &str = "geometry-base";
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
pub struct Ratio {
pub numerator: u16,
pub denominator: u16,
}
impl Ratio {
#[must_use]
pub const fn px_at(self, base_px: u16) -> u16 {
let (n, d) = (self.numerator as u32, self.denominator as u32);
let scaled = base_px as u32 * n;
((scaled * 2 + d) / (d * 2)) as u16
}
#[must_use]
pub fn scale(self, base: f32) -> f32 {
base * f32::from(self.numerator) / f32::from(self.denominator)
}
#[must_use]
pub fn quanta(self, base: f32, quantum: f32) -> u32 {
if !quantum.is_finite() || quantum <= 0.0 || !base.is_finite() {
return 0;
}
let exact = self.scale(base) / quantum;
if exact <= 0.0 {
0
} else {
exact.round() as u32
}
}
#[must_use]
pub fn quantize(self, base: f32, quantum: f32) -> f32 {
if !quantum.is_finite() || quantum <= 0.0 || !base.is_finite() {
return 0.0;
}
self.quanta(base, quantum) as f32 * quantum
}
#[must_use]
pub fn css(self) -> String {
match (self.numerator, self.denominator) {
(n, d) if n == d => format!("var(--{BASE_TOKEN})"),
(n, 1) => format!("calc(var(--{BASE_TOKEN}) * {n})"),
(n, d) => format!("calc(var(--{BASE_TOKEN}) * {n} / {d})"),
}
}
}
#[derive(Debug, Clone, Copy, PartialEq)]
pub struct Surface {
pub base: f32,
pub quantum: f32,
}
impl Surface {
#[must_use]
pub fn web() -> Self {
Self {
base: f32::from(DEFAULT_BASE_PX),
quantum: 1.0,
}
}
#[must_use]
pub fn terminal() -> Self {
Self {
base: 1.0,
quantum: 1.0,
}
}
#[must_use]
pub fn resolve(self, ratio: Ratio) -> f32 {
ratio.quantize(self.base, self.quantum)
}
#[must_use]
pub fn quanta(self, ratio: Ratio) -> u32 {
ratio.quanta(self.base, self.quantum)
}
#[must_use]
pub fn gap(self, gap: Gap, density: Density) -> u32 {
self.quanta(gap.step_at(density).ratio())
}
}
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default)]
pub enum Density {
#[default]
Pointer,
Touch,
}
impl Density {
#[must_use]
pub const fn media_condition(self) -> &'static str {
match self {
Self::Pointer => "(hover: hover) and (pointer: fine)",
Self::Touch => "(hover: none), (pointer: coarse)",
}
}
}
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, PartialOrd, Ord, Default)]
pub enum SizeClass {
Compact,
#[default]
Medium,
Expanded,
}
impl SizeClass {
#[must_use]
pub const fn min_px(self) -> u16 {
match self {
Self::Compact => 0,
Self::Medium => 600,
Self::Expanded => 840,
}
}
#[must_use]
pub fn media_condition(self) -> String {
match self {
Self::Compact => format!("(max-width: {}px)", Self::Medium.min_px() - 1),
Self::Medium => format!(
"(min-width: {}px) and (max-width: {}px)",
Self::Medium.min_px(),
Self::Expanded.min_px() - 1
),
Self::Expanded => format!("(min-width: {}px)", Self::Expanded.min_px()),
}
}
#[must_use]
pub const fn token(self) -> &'static str {
match self {
Self::Compact => "size-compact",
Self::Medium => "size-medium",
Self::Expanded => "size-expanded",
}
}
#[must_use]
pub const fn all() -> [Self; 3] {
[Self::Compact, Self::Medium, Self::Expanded]
}
#[must_use]
pub const fn at_width(px: u16) -> Self {
if px >= Self::Expanded.min_px() {
Self::Expanded
} else if px >= Self::Medium.min_px() {
Self::Medium
} else {
Self::Compact
}
}
}
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, PartialOrd, Ord)]
pub enum Gap {
Bound,
Peer,
Group,
Section,
Pane,
Page,
}
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, PartialOrd, Ord)]
pub enum Step {
Hair,
Tight,
Snug,
Base,
Roomy,
Wide,
Loose,
Broad,
Vast,
Colossal,
}
impl Step {
#[must_use]
pub const fn ratio(self) -> Ratio {
let (numerator, denominator) = match self {
Self::Hair => (1, 8),
Self::Tight => (1, 4),
Self::Snug => (3, 8),
Self::Base => (1, 2),
Self::Roomy => (5, 8),
Self::Wide => (3, 4),
Self::Loose => (1, 1),
Self::Broad => (3, 2),
Self::Vast => (2, 1),
Self::Colossal => (3, 1),
};
Ratio {
numerator,
denominator,
}
}
#[must_use]
pub const fn px(self) -> u16 {
self.ratio().px_at(DEFAULT_BASE_PX)
}
#[must_use]
pub const fn token(self) -> &'static str {
match self {
Self::Hair => "step-hair",
Self::Tight => "step-tight",
Self::Snug => "step-snug",
Self::Base => "step-base",
Self::Roomy => "step-roomy",
Self::Wide => "step-wide",
Self::Loose => "step-loose",
Self::Broad => "step-broad",
Self::Vast => "step-vast",
Self::Colossal => "step-colossal",
}
}
#[must_use]
pub const fn all() -> [Self; 10] {
[
Self::Hair,
Self::Tight,
Self::Snug,
Self::Base,
Self::Roomy,
Self::Wide,
Self::Loose,
Self::Broad,
Self::Vast,
Self::Colossal,
]
}
}
impl Gap {
#[must_use]
pub const fn step_at(self, density: Density) -> Step {
match self {
Self::Bound => Step::Tight,
Self::Peer => match density {
Density::Pointer => Step::Snug,
Density::Touch => Step::Roomy,
},
Self::Group => match density {
Density::Pointer => Step::Roomy,
Density::Touch => Step::Wide,
},
Self::Section => match density {
Density::Pointer => Step::Wide,
Density::Touch => Step::Loose,
},
Self::Pane => Step::Broad,
Self::Page => Step::Vast,
}
}
#[must_use]
pub const fn step(self) -> Step {
self.step_at(Density::Pointer)
}
#[must_use]
pub const fn px_at(self, density: Density) -> u16 {
self.step_at(density).px()
}
#[must_use]
pub const fn px(self) -> u16 {
self.step().px()
}
#[must_use]
pub const fn token(self) -> &'static str {
match self {
Self::Bound => "gap-bound",
Self::Peer => "gap-peer",
Self::Group => "gap-group",
Self::Section => "gap-section",
Self::Pane => "gap-pane",
Self::Page => "gap-page",
}
}
#[must_use]
pub const fn all() -> [Self; 6] {
[
Self::Bound,
Self::Peer,
Self::Group,
Self::Section,
Self::Pane,
Self::Page,
]
}
}
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
pub enum Text {
Fine,
Note,
Body,
Lead,
Subhead,
Head,
Title,
Display,
Hero,
}
impl Text {
#[must_use]
pub const fn ratio(self) -> Ratio {
let (numerator, denominator) = match self {
Self::Fine => (3, 4),
Self::Note => (7, 8),
Self::Body => (1, 1),
Self::Lead => (9, 8),
Self::Subhead => (5, 4),
Self::Head => (3, 2),
Self::Title => (2, 1),
Self::Display => (5, 2),
Self::Hero => (3, 1),
};
Ratio {
numerator,
denominator,
}
}
#[must_use]
pub const fn px(self) -> u16 {
self.ratio().px_at(DEFAULT_BASE_PX)
}
#[must_use]
pub const fn token(self) -> &'static str {
match self {
Self::Fine => "text-fine",
Self::Note => "text-note",
Self::Body => "text-body",
Self::Lead => "text-lead",
Self::Subhead => "text-subhead",
Self::Head => "text-head",
Self::Title => "text-title",
Self::Display => "text-display",
Self::Hero => "text-hero",
}
}
#[must_use]
pub const fn all() -> [Self; 9] {
[
Self::Fine,
Self::Note,
Self::Body,
Self::Lead,
Self::Subhead,
Self::Head,
Self::Title,
Self::Display,
Self::Hero,
]
}
}
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
pub enum Radius {
Square,
Fine,
Control,
Panel,
Round,
}
impl Radius {
#[must_use]
pub const fn ratio(self) -> Option<Ratio> {
let (numerator, denominator) = match self {
Self::Square => (0, 1),
Self::Fine => (1, 8),
Self::Control => (1, 4),
Self::Panel => (1, 2),
Self::Round => return None,
};
Some(Ratio {
numerator,
denominator,
})
}
#[must_use]
pub const fn px(self) -> Option<u16> {
match self.ratio() {
Some(r) => Some(r.px_at(DEFAULT_BASE_PX)),
None => None,
}
}
#[must_use]
pub fn css(self) -> String {
match self {
Self::Square => "0".to_owned(),
Self::Round => "50%".to_owned(),
other => other
.ratio()
.expect("every rung but Round has a ratio")
.css(),
}
}
#[must_use]
pub const fn token(self) -> &'static str {
match self {
Self::Square => "radius-square",
Self::Fine => "radius-fine",
Self::Control => "radius-control",
Self::Panel => "radius-panel",
Self::Round => "radius-round",
}
}
#[must_use]
pub const fn all() -> [Self; 5] {
[
Self::Square,
Self::Fine,
Self::Control,
Self::Panel,
Self::Round,
]
}
}
#[must_use]
pub fn scale_css_declarations() -> String {
let mut out = String::new();
let _ = writeln!(
out,
" /* Every size below is a ratio of this. Scale it and the whole\n \
layout scales with it, including for a user who has asked for\n \
larger text. */\n --{BASE_TOKEN}: 1rem;\n"
);
out.push_str(" /* Raw scale. Prefer a --gap-* below; reach here only when\n");
out.push_str(" no relationship describes the distance. */\n");
for step in Step::all() {
let _ = writeln!(out, " --{}: {};", step.token(), step.ratio().css());
}
out
}
#[must_use]
pub fn text_css_declarations() -> String {
let mut out = String::new();
out.push_str(" /* Type. Named for what the text is; the size follows.\n");
out.push_str(" Ratios of the base, so text tracks the reader's own\n");
out.push_str(" root size. Density-invariant: text is not a target. */\n");
for text in Text::all() {
let _ = writeln!(out, " --{}: {};", text.token(), text.ratio().css());
}
out
}
#[must_use]
pub fn radius_css_declarations() -> String {
let mut out = String::new();
out.push_str(" /* Corners. Rounding says a thing is meant to be pressed,\n");
out.push_str(" so the scale is short on purpose and square is a rung\n");
out.push_str(" rather than the absence of one. */\n");
for radius in Radius::all() {
let _ = writeln!(out, " --{}: {};", radius.token(), radius.css());
}
out
}
#[must_use]
pub fn gap_css_declarations(density: Density) -> String {
let mut out = String::new();
for gap in Gap::all() {
let _ = writeln!(
out,
" --{}: var(--{});",
gap.token(),
gap.step_at(density).token()
);
}
out
}
pub const CSS_LAYER: &str = "makeover";
#[must_use]
pub fn in_css_layer(css: &str) -> String {
let mut out = format!("@layer {CSS_LAYER} {{\n");
for line in css.lines() {
if line.is_empty() {
out.push('\n');
} else {
let _ = writeln!(out, " {line}");
}
}
out.push_str("}\n");
out
}
#[must_use]
pub fn geometry_css_vars(density: Density) -> String {
format!(
":root {{\n{}\n{}\n{}\n{}}}\n",
scale_css_declarations(),
gap_css_declarations(density),
text_css_declarations(),
radius_css_declarations()
)
}
#[must_use]
pub fn density_css(explicit_touch: Option<&str>) -> String {
in_css_layer(&density_declarations(explicit_touch))
}
fn density_declarations(explicit_touch: Option<&str>) -> String {
let mut css = geometry_css_vars(Density::Pointer);
css.push_str("\n/* Touch: targets separate, shells hold. */\n");
css.push_str("@media ");
css.push_str(Density::Touch.media_condition());
css.push_str(" {\n");
for line in gap_css_overrides(":root", Density::Touch).lines() {
css.push_str(" ");
css.push_str(line);
css.push('\n');
}
css.push_str("}\n");
if let Some(selector) = explicit_touch {
css.push_str("\n/* An explicit user choice, last so it wins over detection. */\n");
css.push_str(&gap_css_overrides(selector, Density::Touch));
}
css
}
#[must_use]
pub fn gap_css_overrides(selector: &str, density: Density) -> String {
format!("{selector} {{\n{}}}\n", gap_css_declarations(density))
}
#[cfg(test)]
mod tests {
use super::*;
#[test]
fn density_is_selected_by_capability_not_by_width_or_agent() {
let css = density_css(None);
assert!(css.contains("@media (hover: none), (pointer: coarse)"));
assert!(!css.contains("max-width"), "a breakpoint crept in");
assert!(!css.contains("min-width"), "a breakpoint crept in");
assert!(!css.contains("ui-mode"), "a device mode crept in");
}
#[test]
fn the_spacing_layer_is_emitted_inside_the_family_layer() {
let css = density_css(None);
assert!(css.starts_with(&format!("@layer {CSS_LAYER} {{\n")));
assert!(css.trim_end().ends_with('}'));
assert!(css.contains(" :root {"));
assert!(css.contains("--gap-peer"));
}
#[test]
fn the_type_ramp_ascends_and_never_repeats_a_size() {
let sizes: Vec<u16> = Text::all().iter().map(|t| t.px()).collect();
assert!(sizes.windows(2).all(|w| w[0] < w[1]), "{sizes:?}");
assert_eq!(sizes, vec![12, 14, 16, 18, 20, 24, 32, 40, 48]);
}
#[test]
fn the_type_ramp_has_a_legibility_floor() {
assert_eq!(Text::Fine.px(), 12);
assert!(Text::all().iter().all(|t| t.px() >= 12));
}
#[test]
fn the_corner_scale_is_short_and_ordered() {
let px: Vec<Option<u16>> = Radius::all().iter().map(|r| r.px()).collect();
assert_eq!(px, vec![Some(0), Some(2), Some(4), Some(8), None]);
}
#[test]
fn square_and_round_are_spelled_not_calculated() {
assert_eq!(Radius::Square.css(), "0");
assert_eq!(Radius::Round.css(), "50%");
assert_eq!(Radius::Round.ratio(), None);
assert!(Radius::Control.css().contains(BASE_TOKEN));
}
#[test]
fn type_does_not_move_with_density() {
let css = density_css(Some(".ui-mode-mobile"));
let root_end = css.find("@media").expect("a touch block");
assert!(css[..root_end].contains("--text-body"));
assert!(!css[root_end..].contains("--text-"), "{}", &css[root_end..]);
}
#[test]
fn every_type_token_scales_from_the_one_base() {
for text in Text::all() {
let css = text.ratio().css();
assert!(css.contains(BASE_TOKEN), "{}: {css}", text.token());
}
}
#[test]
fn wrapping_leaves_no_trailing_whitespace_on_blank_lines() {
let css = in_css_layer("a {\n\nb\n}\n");
assert!(!css.lines().any(|l| l != l.trim_end()), "{css:?}");
}
#[test]
fn the_two_density_conditions_are_complements_and_not_negations() {
let pointer = Density::Pointer.media_condition();
let touch = Density::Touch.media_condition();
assert!(pointer.contains("hover: hover") && touch.contains("hover: none"));
assert!(pointer.contains("pointer: fine") && touch.contains("pointer: coarse"));
assert!(touch.contains(", "), "touch must be an OR");
assert!(pointer.contains(" and "), "pointer must be an AND");
assert!(!pointer.contains(','), "pointer must not be an OR");
}
#[test]
fn the_emitted_touch_block_is_the_condition_and_not_a_second_copy_of_it() {
let css = density_css(None);
assert!(css.contains(&format!("@media {}", Density::Touch.media_condition())));
}
#[test]
fn an_explicit_choice_is_emitted_after_the_detection() {
let css = density_css(Some(".ui-mode-mobile"));
let media = css.find("@media").expect("media query");
let explicit = css.find(".ui-mode-mobile").expect("explicit selector");
assert!(explicit > media, "the explicit selector must come last");
}
#[test]
fn without_an_explicit_selector_there_are_exactly_two_presets() {
assert_eq!(density_css(None).matches("--gap-peer").count(), 2);
}
#[test]
fn the_hig_relationships_land_on_the_hig_values() {
assert_eq!(Gap::Bound.px(), 4);
assert_eq!(Gap::Peer.px(), 6);
assert_eq!(Gap::Group.px(), 10);
assert_eq!(Gap::Section.px(), 12);
}
#[test]
fn every_ratio_divides_the_default_base_exactly() {
for step in Step::all() {
let r = step.ratio();
assert_eq!(
u32::from(DEFAULT_BASE_PX) * u32::from(r.numerator) % u32::from(r.denominator),
0,
"{step:?} is fractional at the default base"
);
}
}
#[test]
fn ratios_scale_linearly() {
for step in Step::all() {
assert_eq!(
step.ratio().px_at(DEFAULT_BASE_PX * 2),
step.px() * 2,
"{step:?} does not double with the base"
);
}
}
#[test]
fn steps_ascend_and_never_repeat() {
let px: Vec<u16> = Step::all().iter().map(|s| s.px()).collect();
let mut sorted = px.clone();
sorted.sort_unstable();
sorted.dedup();
assert_eq!(px, sorted, "steps must be strictly ascending");
}
#[test]
fn gaps_ascend_with_their_relationships_at_every_density() {
for density in [Density::Pointer, Density::Touch] {
let px: Vec<u16> = Gap::all().iter().map(|g| g.px_at(density)).collect();
let mut sorted = px.clone();
sorted.sort_unstable();
assert_eq!(px, sorted, "{density:?}: a looser relationship is tighter");
}
}
#[test]
fn touch_separates_targets_and_holds_the_shells() {
for gap in [Gap::Peer, Gap::Group, Gap::Section] {
assert!(
gap.px_at(Density::Touch) > gap.px_at(Density::Pointer),
"{gap:?} separates tap targets and must open on touch"
);
}
for gap in [Gap::Bound, Gap::Pane, Gap::Page] {
assert_eq!(
gap.px_at(Density::Touch),
gap.px_at(Density::Pointer),
"{gap:?} is not a tap target and must not move with the input device"
);
}
}
#[test]
fn touch_never_resolves_tighter_than_pointer() {
for gap in Gap::all() {
assert!(
gap.px_at(Density::Touch) >= gap.px_at(Density::Pointer),
"{gap:?}: Touch resolved tighter than Pointer"
);
}
}
#[test]
fn the_pointer_retune_is_not_blocked_by_touch() {
assert!(
Gap::Section.px_at(Density::Touch) <= Gap::Pane.px_at(Density::Touch),
"Touch inverted internally, which is what set the old floor"
);
assert!(Gap::Section.px_at(Density::Touch) >= 16);
}
#[test]
fn size_classes_partition_every_width_exactly_once() {
for px in 0..=4000u16 {
let hits: Vec<SizeClass> = SizeClass::all()
.into_iter()
.filter(|c| {
let lo = c.min_px();
let hi = match c {
SizeClass::Compact => SizeClass::Medium.min_px() - 1,
SizeClass::Medium => SizeClass::Expanded.min_px() - 1,
SizeClass::Expanded => u16::MAX,
};
px >= lo && px <= hi
})
.collect();
assert_eq!(hits.len(), 1, "{px}px matched {hits:?}");
assert_eq!(hits[0], SizeClass::at_width(px), "{px}px disagrees");
}
}
#[test]
fn the_quoted_boundaries_are_the_ones_material_publishes() {
assert_eq!(SizeClass::Compact.min_px(), 0);
assert_eq!(SizeClass::Medium.min_px(), 600);
assert_eq!(SizeClass::Expanded.min_px(), 840);
}
#[test]
fn the_media_conditions_do_not_overlap_at_the_boundary() {
assert_eq!(
SizeClass::Compact.media_condition(),
"(max-width: 599px)",
"Compact must stop one pixel below Medium"
);
assert_eq!(
SizeClass::Medium.media_condition(),
"(min-width: 600px) and (max-width: 839px)"
);
assert_eq!(SizeClass::Expanded.media_condition(), "(min-width: 840px)");
}
#[test]
fn size_class_does_not_reach_the_gap_scale() {
let _ = geometry_css_vars(Density::Pointer);
let _ = Gap::Page.px_at(Density::Touch);
assert_eq!(SizeClass::all().len(), 3);
}
#[test]
fn a_terminal_resolves_the_vocabulary_to_whole_cells() {
let t = Surface::terminal();
let cells: Vec<u32> = Gap::all()
.iter()
.map(|g| t.gap(*g, Density::Pointer))
.collect();
assert_eq!(cells, vec![0, 0, 1, 1, 2, 2]);
}
#[test]
fn collapsing_is_allowed_but_inverting_is_not() {
for quantum in [0.5_f32, 1.0, 2.0, 3.0, 7.0] {
for density in [Density::Pointer, Density::Touch] {
let s = Surface {
base: 16.0,
quantum,
};
let v: Vec<u32> = Gap::all().iter().map(|g| s.gap(*g, density)).collect();
let mut sorted = v.clone();
sorted.sort_unstable();
assert_eq!(v, sorted, "quantum {quantum} {density:?} inverted: {v:?}");
}
}
}
#[test]
fn the_web_surface_agrees_with_the_pixel_helper() {
let w = Surface::web();
for step in Step::all() {
assert_eq!(
w.resolve(step.ratio()) as u16,
step.px(),
"{step:?} disagrees between surface and px_at"
);
}
}
#[test]
fn quantising_is_monotonic_in_the_ratio() {
let (base, quantum) = (16.0, 1.0);
let mut previous = 0;
for step in Step::all() {
let q = step.ratio().quanta(base, quantum);
assert!(q >= previous, "{step:?} went backwards");
previous = q;
}
}
#[test]
fn a_degenerate_quantum_yields_nothing_rather_than_panicking() {
let r = Step::Loose.ratio();
for bad in [0.0_f32, -1.0, f32::NAN] {
assert_eq!(r.quanta(16.0, bad), 0);
assert!(r.quantize(16.0, bad).abs() < f32::EPSILON);
}
assert_eq!(r.quanta(f32::INFINITY, 1.0), 0);
}
#[test]
fn px_at_rounds_rather_than_truncating() {
assert_eq!(Step::Snug.ratio().px_at(15), 6);
assert_eq!(Step::Snug.ratio().px_at(DEFAULT_BASE_PX), 6);
}
#[test]
fn tokens_are_unique() {
let mut names: Vec<&str> = Step::all().iter().map(|s| s.token()).collect();
names.extend(Gap::all().iter().map(|g| g.token()));
names.extend(Text::all().iter().map(|t| t.token()));
names.extend(Radius::all().iter().map(|r| r.token()));
let count = names.len();
names.sort_unstable();
names.dedup();
assert_eq!(names.len(), count, "token names collide");
}
#[test]
fn css_is_expressed_over_the_base_never_in_pixels() {
let css = geometry_css_vars(Density::Pointer);
assert!(css.starts_with(":root {\n"));
assert!(css.trim_end().ends_with('}'));
assert!(css.contains("--geometry-base: 1rem;"));
for step in Step::all() {
let line = format!("--{}: {}", step.token(), step.ratio().css());
assert!(css.contains(&line), "missing or wrong: {line}");
}
let scale = scale_css_declarations();
assert!(
!scale.contains("px;"),
"the scale must not emit pixel literals:\n{scale}"
);
}
#[test]
fn ratio_css_drops_redundant_arithmetic() {
assert_eq!(Step::Loose.ratio().css(), "var(--geometry-base)");
assert_eq!(Step::Vast.ratio().css(), "calc(var(--geometry-base) * 2)");
assert_eq!(
Step::Snug.ratio().css(),
"calc(var(--geometry-base) * 3 / 8)"
);
}
#[test]
fn gaps_reference_steps_rather_than_repeating_values() {
let css = geometry_css_vars(Density::Pointer);
assert!(css.contains("--gap-peer: var(--step-snug);"));
assert!(!css.contains("--gap-peer: calc"));
}
#[test]
fn a_density_override_emits_only_the_relational_layer() {
let css = gap_css_overrides(".ui-mode-mobile", Density::Touch);
assert!(css.contains("--gap-peer: var(--step-"));
let declared: Vec<&str> = css
.lines()
.filter_map(|l| l.trim().strip_prefix("--"))
.filter_map(|l| l.split(':').next())
.collect();
assert!(
declared.iter().all(|t| t.starts_with("gap-")),
"only the relational layer may be overridden, got {declared:?}"
);
}
}