compose_rust/

tokens.rs

//! Design token tables.
//!
//! The tables are authored here, in Rust, because Rust is the single source for everything
//! that has two representations, and because values written in Kotlin by hand would go
//! unverified. They are *executed* in the Renderer: codegen writes them into
//! `Protocol.gen.kt` as Kotlin objects, so they enter the Renderer binary at build time and
//! never cross the boundary at run time. The Host still sends roles and never a token
//! table.
//!
//! What the Renderer implementer still owns is the rules these values feed: how an
//! elevation is drawn, how each `ButtonVariant` is styled, and motion.

use crate::schema::{
    COLOR_ROLE_COUNT, Color, ColorRole, ColorScheme, DesignSystem, ShapeRole, SpaceRole, TypeRole,
};

/// One `ColorRole` slot in both schemes, in `ColorRole` tag order.
#[derive(Clone, Copy, Debug, Eq, PartialEq)]
pub struct ColorToken {
    pub role: ColorRole,
    pub light: Color,
    pub dark: Color,
}

/// One rung of the nine-rung type ladder (13.2).
#[derive(Clone, Copy, Debug, PartialEq)]
pub struct TypeToken {
    pub role: TypeRole,
    /// Font size in sp.
    pub size: f32,
    /// 100 to 900.
    pub weight: u16,
    /// Line height in sp.
    pub line_height: f32,
    /// Letter spacing in sp, which may be negative.
    pub letter_spacing: f32,
    /// True when the rung uses the monospace family rather than the default one.
    pub monospace: bool,
}

#[derive(Clone, Copy, Debug, PartialEq)]
pub struct ShapeToken {
    pub role: ShapeRole,
    /// Corner radius in dp. `Full` uses a radius large enough to read as a pill.
    pub radius: f32,
}

#[derive(Clone, Copy, Debug, PartialEq)]
pub struct SpaceToken {
    pub role: SpaceRole,
    /// Spacing in dp.
    pub value: f32,
}

/// Items 1 to 4 of the 14.6 table for one design system.
#[derive(Clone, Copy, Debug, PartialEq)]
pub struct DesignTokenTable {
    pub system: DesignSystem,
    /// The published guideline the values come from, recorded as 14.3 asks.
    pub reference: &'static str,
    pub default_family: &'static str,
    pub monospace_family: &'static str,
    pub colors: &'static [ColorToken; COLOR_ROLE_COUNT],
    pub type_scale: &'static [TypeToken; 9],
    pub shapes: &'static [ShapeToken; 6],
    pub spaces: &'static [SpaceToken; 7],
}

impl DesignTokenTable {
    pub fn color(&self, role: ColorRole, scheme: ColorScheme) -> Color {
        let token = self.colors[role as usize - 1];
        // `FollowSystem` is resolved by the Renderer, which is the side that knows.
        // Asking the Host for it can only mean light.
        if scheme == ColorScheme::Dark {
            token.dark
        } else {
            token.light
        }
    }
}

/// Every design system's table, in `DesignSystem` tag order.
///
/// A fourth design system is one entry here plus one Renderer rule implementation.
/// Nothing in `widgets.rs`, the Modifier schema or the Property schema moves (14.1).
pub const DESIGN_TOKENS: &[DesignTokenTable] = &[
    MATERIAL3,
    APPLE_HIG,
    FLUENT,
    ADWAITA,
    BREEZE,
    DEEPIN,
    LIQUID_GLASS,
];

pub fn table(system: DesignSystem) -> &'static DesignTokenTable {
    &DESIGN_TOKENS[system as usize - 1]
}

macro_rules! colors {
    ($($role:ident: $light:literal / $dark:literal),+ $(,)?) => {
        &[$(ColorToken {
            role: ColorRole::$role,
            light: Color::rgb($light),
            dark: Color::rgb($dark),
        }),+]
    };
}

macro_rules! type_scale {
    ($($role:ident: $size:literal / $weight:literal / $line:literal / $spacing:literal / $mono:literal),+ $(,)?) => {
        &[$(TypeToken {
            role: TypeRole::$role,
            size: $size,
            weight: $weight,
            line_height: $line,
            letter_spacing: $spacing,
            monospace: $mono,
        }),+]
    };
}

macro_rules! shapes {
    ($($role:ident: $radius:literal),+ $(,)?) => {
        &[$(ShapeToken { role: ShapeRole::$role, radius: $radius }),+]
    };
}

macro_rules! spaces {
    ($($role:ident: $value:literal),+ $(,)?) => {
        &[$(SpaceToken { role: SpaceRole::$role, value: $value }),+]
    };
}

const MATERIAL3: DesignTokenTable = DesignTokenTable {
    system: DesignSystem::Material3,
    reference: "Material 3 Expressive shape, colour and type scales, m3.material.io, 2025",
    default_family: "Roboto",
    monospace_family: "Roboto Mono",
    colors: colors! {
        Primary: 0x6750a4 / 0xd0bcff,
        OnPrimary: 0xffffff / 0x381e72,
        Secondary: 0x625b71 / 0xccc2dc,
        OnSecondary: 0xffffff / 0x332d41,
        Surface: 0xfef7ff / 0x141218,
        OnSurface: 0x1d1b20 / 0xe6e0e9,
        SurfaceVariant: 0xe7e0ec / 0x49454f,
        OnSurfaceVariant: 0x49454f / 0xcac4d0,
        Background: 0xfef7ff / 0x141218,
        OnBackground: 0x1d1b20 / 0xe6e0e9,
        Outline: 0x79747e / 0x938f99,
        OutlineVariant: 0xcac4d0 / 0x49454f,
        Error: 0xb3261e / 0xf2b8b5,
        OnError: 0xffffff / 0x601410,
        // Material 3's own `surfaceContainer`, which is how this system raises a panel:
        // `Surface` and `Background` are one value here by design, so the container roles
        // are the only thing that separates a layer from the page.
        SurfaceContainer: 0xf3edf7 / 0x211f26,
        // The baseline scheme's own third accent and its four container tones. Material 3
        // is where the container idea comes from, so these are its published values rather
        // than anything derived here.
        Tertiary: 0x7d5260 / 0xefb8c8,
        OnTertiary: 0xffffff / 0x492532,
        PrimaryContainer: 0xeaddff / 0x4f378b,
        OnPrimaryContainer: 0x21005d / 0xeaddff,
        SecondaryContainer: 0xe8def8 / 0x4a4458,
        OnSecondaryContainer: 0x1d192b / 0xe8def8,
        TertiaryContainer: 0xffd8e4 / 0x633b48,
        OnTertiaryContainer: 0x31111d / 0xffd8e4,
        // Code colours. Material 3 publishes no code editor scheme, so these are derived from
        // the base roles above by the fixed rule in `code_colours.rs`: each syntax ink takes one
        // base role, the removed ink is the error role, the added ink is the error role turned
        // to a green hue at the same tone and chroma, and the line and word backgrounds are those
        // inks laid over the panel. `fr13_1_3_derived_code_colours_follow_the_rule` recomputes
        // every one of them, so a change to a base role has to be carried through here.
        SyntaxKeyword: 0x6750a4 / 0xd0bcff,
        SyntaxString: 0x7d5260 / 0xefb8c8,
        SyntaxComment: 0x49454f / 0xcac4d0,
        SyntaxNumber: 0x31111d / 0xffd8e4,
        SyntaxConstant: 0x31111d / 0xffd8e4,
        SyntaxType: 0x625b71 / 0xccc2dc,
        SyntaxFunction: 0x21005d / 0xeaddff,
        SyntaxVariable: 0x1d1b20 / 0xe6e0e9,
        SyntaxProperty: 0x1d192b / 0xe8def8,
        SyntaxOperator: 0x49454f / 0xcac4d0,
        SyntaxPunctuation: 0x49454f / 0xcac4d0,
        SyntaxTag: 0x6750a4 / 0xd0bcff,
        SyntaxAttribute: 0x625b71 / 0xccc2dc,
        SyntaxEscape: 0xb3261e / 0xf2b8b5,
        SyntaxMacro: 0x625b71 / 0xccc2dc,
        DiffAdded: 0x006d17 / 0xb2ceaa,
        DiffRemoved: 0xb3261e / 0xf2b8b5,
        DiffModified: 0x7d5260 / 0xefb8c8,
        DiffAddedContainer: 0xd6dedc / 0x3e4240,
        DiffRemovedContainer: 0xebd5dd / 0x4b3e43,
        DiffAddedEmphasis: 0xaac7b4 / 0x5b655b,
        DiffRemovedEmphasis: 0xe0b1b6 / 0x755c5f,
    },
    type_scale: type_scale! {
        Display: 57.0 / 400 / 64.0 / 0.0 / false,
        Headline: 32.0 / 400 / 40.0 / 0.0 / false,
        Title: 22.0 / 400 / 28.0 / 0.0 / false,
        Subtitle: 16.0 / 500 / 24.0 / 0.15 / false,
        Body: 16.0 / 400 / 24.0 / 0.5 / false,
        BodyStrong: 16.0 / 500 / 24.0 / 0.15 / false,
        Label: 14.0 / 500 / 20.0 / 0.1 / false,
        Caption: 12.0 / 400 / 16.0 / 0.4 / false,
        Mono: 14.0 / 400 / 20.0 / 0.0 / true,
    },
    // The expressive ladder, which is the baseline one shifted up a rung at every step
    // above the smallest. This is the loudest thing about the reference screens: a card
    // there is cut at twenty eight rather than sixteen, a sheet is rounder still, and the
    // buttons and the chips and the selected destination are all capsules. The baseline
    // ladder drew the same layout with corners half the size, which reads as the previous
    // version of Material rather than as this one.
    shapes: shapes! {
        None: 0.0,
        ExtraSmall: 4.0,
        Small: 12.0,
        Medium: 16.0,
        Large: 28.0,
        Full: 1000.0,
    },
    spaces: spaces! {
        None: 0.0,
        Xs: 4.0,
        Sm: 8.0,
        Md: 16.0,
        Lg: 24.0,
        Xl: 32.0,
        Xxl: 48.0,
    },
};

const APPLE_HIG: DesignTokenTable = DesignTokenTable {
    system: DesignSystem::Cupertino,
    reference: "Apple Human Interface Guidelines, system colors and Dynamic Type, 2024",
    default_family: "SF Pro",
    monospace_family: "SF Mono",
    colors: colors! {
        Primary: 0x007aff / 0x0a84ff,
        OnPrimary: 0xffffff / 0xffffff,
        Secondary: 0x5856d6 / 0x5e5ce6,
        OnSecondary: 0xffffff / 0xffffff,
        Surface: 0xffffff / 0x1c1c1e,
        OnSurface: 0x000000 / 0xffffff,
        // The page is the grouped background and the variant is the colour an incoming
        // message bubble has. They used to carry the same value, so anything filled with
        // one on a page of the other was drawn, in the right colour, and invisible.
        SurfaceVariant: 0xe9e9eb / 0x2c2c2e,
        OnSurfaceVariant: 0x3c3c43 / 0xebebf5,
        Background: 0xf2f2f7 / 0x000000,
        OnBackground: 0x000000 / 0xffffff,
        Outline: 0xc6c6c8 / 0x38383a,
        OutlineVariant: 0xe5e5ea / 0x48484a,
        Error: 0xff3b30 / 0xff453a,
        OnError: 0xffffff / 0xffffff,
        // secondarySystemGroupedBackground: the colour of a grouped box sitting on the
        // grouped page. It matches `Surface` here, and that is correct rather than a
        // duplicate: on iOS a panel on the grouped page is the plain reading surface, and
        // what makes it a panel is that the page underneath is not.
        SurfaceContainer: 0xffffff / 0x1c1c1e,
        // systemPurple, the third of the platform accents after blue and indigo.
        Tertiary: 0xaf52de / 0xbf5af2,
        OnTertiary: 0xffffff / 0xffffff,
        // iOS has no published container tones, so these are the tinted fills the platform
        // draws by hand: a wash of the accent in light, and a deep, desaturated version of
        // it in dark, which is what a selected row or a tinted card looks like there.
        PrimaryContainer: 0xd6e4ff / 0x0a2d52,
        OnPrimaryContainer: 0x003070 / 0xcfe3ff,
        SecondaryContainer: 0xe2e0ff / 0x262663,
        OnSecondaryContainer: 0x2a1b70 / 0xdedcff,
        TertiaryContainer: 0xf3ddfb / 0x3f1a52,
        OnTertiaryContainer: 0x3d0b52 / 0xf1d9fa,
        // Code colours, after Xcode's Default (Light) and Default (Dark). UNVERIFIED: Xcode's
        // themes are not published as files, so these were written from the shipped editor
        // rather than read from a source, and need checking against Xcode itself. Xcode has no
        // diff palette of its own, so the diff inks are the platform's accessible green and red
        // and the line and word backgrounds are those inks laid over the panel. Where a value
        // had to be moved in tone to keep 4.5:1 on this system's panel, the original is noted.
        SyntaxKeyword: 0x9b2393 / 0xfc5fa3,
        SyntaxString: 0xc41a16 / 0xfc6a5d,
        // SyntaxComment is 0x5d6c79 / 0x6c7986 in the editor.
        SyntaxComment: 0x5d6c79 / 0x798693,
        SyntaxNumber: 0x1c00cf / 0xd0bf69,
        SyntaxConstant: 0x6c36a9 / 0xa167e6,
        SyntaxType: 0x3900a0 / 0xd0a8ff,
        SyntaxFunction: 0x326d74 / 0x67b7a4,
        SyntaxVariable: 0x000000 / 0xdfdfe0,
        SyntaxProperty: 0x326d74 / 0x67b7a4,
        SyntaxOperator: 0x000000 / 0xdfdfe0,
        SyntaxPunctuation: 0x000000 / 0xdfdfe0,
        SyntaxTag: 0x0b4f79 / 0x5dd8ff,
        SyntaxAttribute: 0x815f03 / 0xbf8555,
        SyntaxEscape: 0x1c00cf / 0xd0bf69,
        SyntaxMacro: 0x643820 / 0xfd8f3f,
        // DiffAdded is 0x248a3d / 0x30d158 in the editor.
        DiffAdded: 0x087a2f / 0x30d158,
        // DiffRemoved is 0xd70015 / 0xff6961 in the editor.
        DiffRemoved: 0xce0014 / 0xff6e66,
        DiffModified: 0x007aff / 0x0a84ff,
        DiffAddedContainer: 0xe1efe6 / 0x20402a,
        DiffRemovedContainer: 0xf9e0e3 / 0x492c2c,
        DiffAddedEmphasis: 0xb5d7c1 / 0x246435,
        DiffRemovedEmphasis: 0xf0b3b9 / 0x773d3b,
    },
    // The large title is bold. Both reference screens set it that way, "Contacts" over a
    // grouped list and "Cupertino" over a search field, and a large title at book weight
    // is the one thing that stops an iOS screen reading as an iOS screen.
    type_scale: type_scale! {
        Display: 34.0 / 700 / 41.0 / 0.37 / false,
        Headline: 28.0 / 400 / 34.0 / 0.36 / false,
        Title: 22.0 / 400 / 28.0 / 0.35 / false,
        Subtitle: 17.0 / 600 / 22.0 / -0.41 / false,
        Body: 17.0 / 400 / 22.0 / -0.41 / false,
        BodyStrong: 17.0 / 600 / 22.0 / -0.41 / false,
        Label: 15.0 / 400 / 20.0 / -0.24 / false,
        Caption: 12.0 / 400 / 16.0 / 0.0 / false,
        Mono: 15.0 / 400 / 20.0 / 0.0 / true,
    },
    // HIG corners are continuous curvature. The radius is the same number, but the
    // Renderer is expected to draw it with a squircle rather than a circular arc.
    shapes: shapes! {
        None: 0.0,
        ExtraSmall: 4.0,
        Small: 8.0,
        Medium: 10.0,
        Large: 14.0,
        Full: 1000.0,
    },
    spaces: spaces! {
        None: 0.0,
        Xs: 4.0,
        Sm: 8.0,
        Md: 16.0,
        Lg: 20.0,
        Xl: 32.0,
        Xxl: 44.0,
    },
};

const FLUENT: DesignTokenTable = DesignTokenTable {
    system: DesignSystem::Fluent,
    reference: "WinUI / Fluent 2 web and Windows tokens, fluent2.microsoft.design, 2024",
    default_family: "Segoe UI Variable",
    monospace_family: "Cascadia Mono",
    colors: colors! {
        Primary: 0x0f6cbd / 0x479ef5,
        OnPrimary: 0xffffff / 0x000000,
        Secondary: 0xebf3fc / 0x0c3b5e,
        OnSecondary: 0x0f548c / 0xffffff,
        Surface: 0xffffff / 0x292929,
        OnSurface: 0x242424 / 0xffffff,
        // Fluent layers by lightness rather than by outline, and the page it layers on is
        // the solid background base. The old trio sat within five parts of each other, so
        // the layering was there in the numbers and not on the screen.
        SurfaceVariant: 0xeaeaea / 0x333333,
        OnSurfaceVariant: 0x424242 / 0xd6d6d6,
        Background: 0xf3f3f3 / 0x1f1f1f,
        OnBackground: 0x242424 / 0xffffff,
        Outline: 0xd1d1d1 / 0x666666,
        OutlineVariant: 0xe0e0e0 / 0x3d3d3d,
        Error: 0xc50f1f / 0xdc626d,
        OnError: 0xffffff / 0x000000,
        // The card layer, which Fluent lifts off the solid background base by lightness.
        SurfaceContainer: 0xffffff / 0x2b2b2b,
        // The shared purple ramp, which is Fluent's accent beside the brand blue.
        Tertiary: 0x8764b8 / 0xb18cd9,
        OnTertiary: 0xffffff / 0x22103a,
        // Fluent's brand tints, which are how it fills a selected or highlighted region:
        // two steps of the brand ramp in light, and the dark shades of it in dark. The
        // secondary tint is a step deeper than the primary one rather than a different
        // hue, because Fluent's second accent is the same blue used more strongly.
        PrimaryContainer: 0xcfe4fa / 0x0c3b5e,
        OnPrimaryContainer: 0x0c3b5e / 0xcfe4fa,
        SecondaryContainer: 0xb4d6fa / 0x123d61,
        OnSecondaryContainer: 0x0b3350 / 0xb4d6fa,
        TertiaryContainer: 0xe8dcf7 / 0x3b2159,
        OnTertiaryContainer: 0x341a5e / 0xe8dcf7,
        // Code colours, read from VS Code's Light+ and Dark+ in microsoft/vscode:
        // extensions/theme-defaults/themes/light_vs.json (f93fdeb4), light_plus.json (09fe3fcb),
        // dark_vs.json (f93fdeb4), dark_plus.json (e061feef). Punctuation is the editor
        // foreground and macros take keyword.control, which is what a preprocessor directive is
        // scoped as. The diff backgrounds are VS Code's own defaults from
        // src/vs/platform/theme/common/colors/editorColors.ts (463b5e85): lines at
        // rgba(155,185,85,.2) and rgba(255,0,0,.2), words at #9ccc2c40/33 and #ff000033 over
        // them, resolved over this system's panel. Where a value had to be moved in tone to keep
        // 4.5:1 on this system's panel, the editor's own value is noted.
        SyntaxKeyword: 0x0000ff / 0x569cd6,
        SyntaxString: 0xa31515 / 0xce9178,
        // SyntaxComment is 0x008000 / 0x6a9955 in the editor.
        SyntaxComment: 0x008000 / 0x6f9e5a,
        SyntaxNumber: 0x098658 / 0xb5cea8,
        SyntaxConstant: 0x0070c1 / 0x4fc1ff,
        SyntaxType: 0x267f99 / 0x4ec9b0,
        SyntaxFunction: 0x795e26 / 0xdcdcaa,
        SyntaxVariable: 0x001080 / 0x9cdcfe,
        SyntaxProperty: 0x001080 / 0x9cdcfe,
        SyntaxOperator: 0x000000 / 0xd4d4d4,
        SyntaxPunctuation: 0x000000 / 0xd4d4d4,
        SyntaxTag: 0x800000 / 0x569cd6,
        SyntaxAttribute: 0xe50000 / 0x9cdcfe,
        SyntaxEscape: 0xee0000 / 0xd7ba7d,
        SyntaxMacro: 0xaf00db / 0xc586c0,
        // DiffAdded is 0x098658 / 0xb5cea8 in the editor.
        DiffAdded: 0x007b50 / 0xb5cea8,
        DiffRemoved: 0xa31515 / 0xce9178,
        DiffModified: 0x0451a5 / 0x569cd6,
        DiffAddedContainer: 0xebf1dd / 0x414733,
        DiffRemovedContainer: 0xffcccc / 0x552222,
        DiffAddedEmphasis: 0xd7e8b1 / 0x536232,
        DiffRemovedEmphasis: 0xff9999 / 0x771b1b,
    },
    type_scale: type_scale! {
        Display: 40.0 / 600 / 52.0 / 0.0 / false,
        Headline: 28.0 / 600 / 36.0 / 0.0 / false,
        Title: 20.0 / 600 / 28.0 / 0.0 / false,
        Subtitle: 16.0 / 600 / 22.0 / 0.0 / false,
        Body: 14.0 / 400 / 20.0 / 0.0 / false,
        BodyStrong: 14.0 / 600 / 20.0 / 0.0 / false,
        Label: 12.0 / 400 / 16.0 / 0.0 / false,
        Caption: 12.0 / 400 / 16.0 / 0.0 / false,
        Mono: 13.0 / 400 / 18.0 / 0.0 / true,
    },
    shapes: shapes! {
        None: 0.0,
        ExtraSmall: 2.0,
        Small: 3.0,
        Medium: 4.0,
        Large: 8.0,
        Full: 1000.0,
    },
    spaces: spaces! {
        None: 0.0,
        Xs: 2.0,
        Sm: 4.0,
        Md: 8.0,
        Lg: 12.0,
        Xl: 20.0,
        Xxl: 32.0,
    },
};

const ADWAITA: DesignTokenTable = DesignTokenTable {
    system: DesignSystem::Gnome,
    reference: "GNOME Human Interface Guidelines and the libadwaita named colours, GNOME 50",
    default_family: "Cantarell",
    monospace_family: "Source Code Pro",
    colors: colors! {
        // accent_bg_color, blue 3 in the GNOME palette.
        Primary: 0x3584e4 / 0x3584e4,
        OnPrimary: 0xffffff / 0xffffff,
        // purple 3, the rare second accent. Never a second button colour.
        Secondary: 0x9141ac / 0xc061cb,
        // White in both schemes, which is what libadwaita puts on every accent fill but
        // yellow. On the lighter purple 2 of the dark scheme that measures 3.6:1, which
        // carries a short control label but would not carry body text. Nothing puts body
        // text on the second accent.
        OnSecondary: 0xffffff / 0xffffff,
        // view_bg_color: the white of a list or a text view.
        Surface: 0xffffff / 0x1e1e1e,
        OnSurface: 0x2e3436 / 0xffffff,
        // headerbar_bg_color: the slightly darker grey of chrome.
        SurfaceVariant: 0xebebeb / 0x303030,
        OnSurfaceVariant: 0x5e5c64 / 0xc0bfbc,
        // window_bg_color.
        Background: 0xfafafa / 0x242424,
        OnBackground: 0x2e3436 / 0xffffff,
        Outline: 0xcdc7c2 / 0x52514f,
        OutlineVariant: 0xe6e3e1 / 0x3a3a3a,
        // red 3 in light. Dark takes red 1, because the darker destructive red loses too
        // much contrast against a dark window.
        Error: 0xe01b24 / 0xff7b63,
        OnError: 0xffffff / 0x2a0a06,
        // An Adwaita card in light is white with a hairline around it, and white against
        // window_bg_color is five parts of grey: the border is what you actually see. A
        // role that has to be visible on the page by itself cannot be that, so the layer
        // is sidebar_bg_color, the grey Adwaita already uses for a panel beside the view.
        SurfaceContainer: 0xebebeb / 0x303030,
        // teal 4, the third of the GNOME accent colours after blue and purple. Like the
        // other two it holds one value across both schemes, which is how libadwaita ships
        // its accents.
        Tertiary: 0x2190a4 / 0x2190a4,
        OnTertiary: 0xffffff / 0xffffff,
        // Adwaita has no container tones of its own: it tints by drawing the accent at a
        // low alpha over whatever is behind. That cannot be a role, because a role answers
        // before anything knows what is behind it, so these are that same tint resolved
        // against the window colour, one per accent.
        PrimaryContainer: 0xd4e5fb / 0x1b3c5e,
        OnPrimaryContainer: 0x0d3b70 / 0xcfe0f7,
        SecondaryContainer: 0xecd9f1 / 0x44234c,
        OnSecondaryContainer: 0x45164f / 0xecd9f1,
        TertiaryContainer: 0xcfe9ed / 0x134249,
        OnTertiaryContainer: 0x0a3d45 / 0xcfe9ed,
        // Code colours, read from GtkSourceView's styles in GNOME/gtksourceview:
        // data/styles/Adwaita.xml (f9e0f254) and Adwaita-dark.xml (c4604e35). Keywords are
        // def:statement, variables def:identifier, tags and attributes xml:element-name and
        // xml:attribute-name, escapes def:special-char, macros def:preprocessor, and property,
        // operator and punctuation the text foreground. The diff inks are diff:added-line,
        // diff:removed-line and diff:changed-line; the line and word backgrounds are those inks
        // laid over the panel. Where a value had to be moved in tone to keep 4.5:1 on this
        // system's grey panel, the scheme's own value is noted.
        // SyntaxKeyword is 0xc64600 / 0xffa348 in the editor.
        SyntaxKeyword: 0xba4100 / 0xffa348,
        // SyntaxString is 0x218787 / 0x5bc8af in the editor.
        SyntaxString: 0x007778 / 0x5bc8af,
        // SyntaxComment is 0x77767b / 0x777777 in the editor.
        SyntaxComment: 0x6a6a6e / 0x999898,
        // SyntaxNumber is 0x4e57ba / 0x7d8ac7 in the editor.
        SyntaxNumber: 0x4e57ba / 0x8794d2,
        // SyntaxConstant is 0x4e57ba / 0x7d8ac7 in the editor.
        SyntaxConstant: 0x4e57ba / 0x8794d2,
        // SyntaxType is 0x218787 / 0x5bc8af in the editor.
        SyntaxType: 0x007778 / 0x5bc8af,
        // SyntaxFunction is 0x1c71d8 / 0x62a0ea in the editor.
        SyntaxFunction: 0x0067cd / 0x62a0ea,
        // SyntaxVariable is 0x4e9a06 / 0x4e9a06 in the editor.
        SyntaxVariable: 0x3b7800 / 0x5dab1e,
        SyntaxProperty: 0x504e55 / 0xc0bfbc,
        SyntaxOperator: 0x504e55 / 0xc0bfbc,
        SyntaxPunctuation: 0x504e55 / 0xc0bfbc,
        // SyntaxTag is 0x218787 / 0x33b2a4 in the editor.
        SyntaxTag: 0x007778 / 0x33b2a4,
        // SyntaxAttribute is 0xc64600 / 0xff7800 in the editor.
        SyntaxAttribute: 0xba4100 / 0xff7800,
        // SyntaxEscape is 0xed333b / 0xf66151 in the editor.
        SyntaxEscape: 0xd01a2a / 0xfd6656,
        // SyntaxMacro is 0xc64600 / 0xe66100 in the editor.
        SyntaxMacro: 0xba4100 / 0xfb7018,
        // DiffAdded is 0x26a1a2 / 0x33b2a4 in the editor.
        DiffAdded: 0x006a6b / 0x56cebf,
        // DiffRemoved is 0xf66151 / 0xf66151 in the editor.
        DiffRemoved: 0xae2d23 / 0xffa295,
        DiffModified: 0xe66100 / 0xff7800,
        DiffAddedContainer: 0xcfdcdc / 0x38504d,
        DiffRemovedContainer: 0xe4d4d3 / 0x594744,
        DiffAddedEmphasis: 0xa5c4c5 / 0x3f6f69,
        DiffRemovedEmphasis: 0xd9b2af / 0x835e58,
    },
    // libadwaita declares its title classes in points against an 11pt Cantarell body, and
    // they are heavy: the largest title is weight 800, not 700. Those point values are
    // carried over to sp here, which is why the body is 15 and not the 14 a Material scale
    // would use.
    type_scale: type_scale! {
        Display: 44.0 / 800 / 52.0 / -0.5 / false,
        Headline: 32.0 / 800 / 40.0 / -0.25 / false,
        Title: 24.0 / 700 / 32.0 / 0.0 / false,
        Subtitle: 20.0 / 700 / 28.0 / 0.0 / false,
        Body: 15.0 / 400 / 22.0 / 0.0 / false,
        BodyStrong: 15.0 / 700 / 22.0 / 0.0 / false,
        Label: 13.0 / 700 / 18.0 / 0.1 / false,
        Caption: 12.0 / 400 / 16.0 / 0.0 / false,
        Mono: 14.0 / 400 / 20.0 / 0.0 / true,
    },
    // libadwaita's own named radii: six on a button or an entry, twelve on a card or a
    // popover, fifteen on a window. The middle and top rungs were eight and twelve, which
    // put a card where a button belongs and a window where a card belongs, and the GNOME
    // 50 screen in docs/references/design-systems/gnome50/ shows the difference plainly:
    // the preferences groups are rounded well past the buttons inside them, and the
    // window is rounder again. Pills are kept for suggested actions and search entries.
    shapes: shapes! {
        None: 0.0,
        ExtraSmall: 4.0,
        Small: 6.0,
        Medium: 12.0,
        Large: 15.0,
        Full: 1000.0,
    },
    // GNOME lays out on a six pixel grid, and its dialogs are roomy.
    spaces: spaces! {
        None: 0.0,
        Xs: 3.0,
        Sm: 6.0,
        Md: 12.0,
        Lg: 18.0,
        Xl: 24.0,
        Xxl: 36.0,
    },
};

const BREEZE: DesignTokenTable = DesignTokenTable {
    system: DesignSystem::Breeze,
    reference: "KDE Breeze colour schemes and the KDE Human Interface Guidelines, Plasma 6",
    default_family: "Noto Sans",
    monospace_family: "Hack",
    colors: colors! {
        // Plasma blue, the default highlight in both schemes.
        Primary: 0x3daee9 / 0x3daee9,
        // Breeze puts white on the highlight, which measures under three to one against
        // this blue. Dark ink keeps the same blue and stays readable at small sizes.
        OnPrimary: 0x06222e / 0x06222e,
        // The Breeze "positive" teal, its second accent. Dark ink again, for the same
        // reason: white on this green is about two to one.
        Secondary: 0x16a085 / 0x1abc9c,
        OnSecondary: 0x03201b / 0x03201b,
        // View background: the white of a list or an entry.
        Surface: 0xfcfcfc / 0x1b1e20,
        OnSurface: 0x232629 / 0xfcfcfc,
        // A step deeper than the window, in Breeze's own grey.
        SurfaceVariant: 0xe1e3e5 / 0x31363b,
        OnSurfaceVariant: 0x4d5052 / 0xbdc3c7,
        // Window background, a touch cooler and darker than the view.
        Background: 0xeff0f1 / 0x232629,
        OnBackground: 0x232629 / 0xfcfcfc,
        Outline: 0xbdc3c7 / 0x4d5155,
        OutlineVariant: 0xd8dbdd / 0x3f4449,
        // Breeze "negative".
        Error: 0xda4453 / 0xed8079,
        OnError: 0xffffff / 0x2a0806,
        // A framed panel in Plasma is the view colour sitting on the window: a step
        // lighter than the window in light, and a step darker in dark, because Breeze
        // Dark's view really is darker than its window. Either way the panel separates
        // from the page, which is the whole promise of the role.
        SurfaceContainer: 0xfcfcfc / 0x1b1e20,
        // Breeze "neutral", the amber it uses for a warning state, taken here as the third
        // accent. Dark ink on it for the same reason the other two carry dark ink: white
        // on any of these Breeze fills measures under three to one.
        Tertiary: 0xf67400 / 0xf8a44c,
        OnTertiary: 0x2b1200 / 0x2b1200,
        // Plasma tints a selected region with the highlight colour at low alpha over the
        // view. Resolved against the window colour, once per accent, so the role can answer
        // without knowing what it is over.
        PrimaryContainer: 0xd3ecf9 / 0x123b4f,
        OnPrimaryContainer: 0x0b3b52 / 0xcde6f5,
        SecondaryContainer: 0xd2ece5 / 0x103a32,
        OnSecondaryContainer: 0x083b31 / 0xcfe8e0,
        TertiaryContainer: 0xfae0c4 / 0x4a3113,
        OnTertiaryContainer: 0x4a2c00 / 0xf8dfc3,
        // Code colours, read from KSyntaxHighlighting in KDE/syntax-highlighting:
        // data/themes/breeze-light.theme (b5576b24) and breeze-dark.theme (9d1d9a4e). Keywords
        // are the normal text colour there, set bold by the editor. The diff inks follow
        // data/syntax/diff.xml (f8b28165), which draws an added line as Variable and a removed
        // line as String, and the modified ink is the theme's ModifiedLines. The backgrounds are
        // those inks laid over the panel. Where a value had to be moved in tone to keep 4.5:1,
        // the scheme's own value is noted.
        SyntaxKeyword: 0x1f1c1b / 0xcfcfc2,
        SyntaxString: 0xbf0303 / 0xf44f4f,
        // SyntaxComment is 0x898887 / 0x7a7c7d in the editor.
        SyntaxComment: 0x747473 / 0x848687,
        // SyntaxNumber is 0xb08000 / 0xf67400 in the editor.
        SyntaxNumber: 0x966d00 / 0xf67400,
        SyntaxConstant: 0xaa5500 / 0x27aeae,
        // SyntaxType is 0x0057ae / 0x2980b9 in the editor.
        SyntaxType: 0x0057ae / 0x3b8dc7,
        // SyntaxFunction is 0x644a9b / 0x8e44ad in the editor.
        SyntaxFunction: 0x644a9b / 0xb266d1,
        SyntaxVariable: 0x0057ae / 0x27aeae,
        SyntaxProperty: 0x0057ae / 0x27aeae,
        // SyntaxOperator is 0xca60ca / 0x3f8058 in the editor.
        SyntaxOperator: 0xaf48b1 / 0x519269,
        SyntaxPunctuation: 0x1f1c1b / 0xcfcfc2,
        SyntaxTag: 0x1f1c1b / 0xcfcfc2,
        // SyntaxAttribute is 0x0057ae / 0x2980b9 in the editor.
        SyntaxAttribute: 0x0057ae / 0x3b8dc7,
        // SyntaxEscape is 0x3daee9 / 0x3daee9 in the editor.
        SyntaxEscape: 0x007bac / 0x3daee9,
        SyntaxMacro: 0x006e28 / 0x27ae60,
        // DiffAdded is 0x0057ae / 0x27aeae in the editor.
        DiffAdded: 0x0057ae / 0x2cb1b1,
        // DiffRemoved is 0xbf0303 / 0xf44f4f in the editor.
        DiffRemoved: 0xbf0303 / 0xff736e,
        DiffModified: 0xfdbc4b / 0xc04900,
        DiffAddedContainer: 0xdee8f3 / 0x1e3b3d,
        DiffRemovedContainer: 0xf5dede / 0x492f30,
        DiffAddedEmphasis: 0xb0cae5 / 0x22595a,
        DiffRemovedEmphasis: 0xeab1b1 / 0x76403f,
    },
    // Plasma sets its interface in Noto Sans at 10pt, a step smaller than Adwaita's 11pt
    // Cantarell, and its headings are semi bold rather than the near black weights
    // libadwaita uses. Smaller and lighter at every rung, with tighter line heights to
    // match the denser spacing.
    type_scale: type_scale! {
        Display: 34.0 / 600 / 40.0 / 0.0 / false,
        Headline: 26.0 / 600 / 32.0 / 0.0 / false,
        Title: 19.0 / 600 / 24.0 / 0.0 / false,
        Subtitle: 16.0 / 500 / 21.0 / 0.0 / false,
        Body: 13.0 / 400 / 19.0 / 0.0 / false,
        BodyStrong: 13.0 / 600 / 19.0 / 0.0 / false,
        Label: 12.0 / 500 / 16.0 / 0.2 / false,
        Caption: 11.0 / 400 / 15.0 / 0.0 / false,
        Mono: 12.0 / 400 / 17.0 / 0.0 / true,
    },
    // Breeze barely rounds. Frames and buttons are a two to four pixel radius and the
    // largest containers stop at six, which is where the language gets its drafted look.
    shapes: shapes! {
        None: 0.0,
        ExtraSmall: 2.0,
        Small: 3.0,
        Medium: 4.0,
        Large: 6.0,
        Full: 1000.0,
    },
    // Kirigami's ladder: small spacing 4, large spacing 8, grid unit 18.
    spaces: spaces! {
        None: 0.0,
        Xs: 2.0,
        Sm: 4.0,
        Md: 8.0,
        Lg: 12.0,
        Xl: 18.0,
        Xxl: 24.0,
    },
};

const DEEPIN: DesignTokenTable = DesignTokenTable {
    system: DesignSystem::Deepin,
    reference: "Deepin Design specification and the DTK control defaults, deepin 23",
    default_family: "Noto Sans",
    monospace_family: "Noto Sans Mono",
    // Neutral greys, not warm ones. The palette here was written from memory once and
    // described itself as warm, with a trace of brown through every neutral. Deepin's own
    // screens are not: its system monitor is a white list on a light grey window with a
    // plain grey search field, and its calculator is a near black window of dark grey
    // keys. Nothing in either is warm, and the warmth was the most visible thing about
    // this system, so it was the most visible thing that was wrong.
    colors: colors! {
        // The brand blue.
        Primary: 0x0081ff / 0x3ba2ff,
        OnPrimary: 0xffffff / 0x04203a,
        // The amber that sits beside the blue in Deepin's own readouts, where a second
        // series is drawn in it.
        Secondary: 0xf2a13c / 0xffb964,
        OnSecondary: 0x2b1a05 / 0x33200a,
        // The reading surface: a white list in light, a dark grey key in dark.
        Surface: 0xffffff / 0x2a2a2a,
        OnSurface: 0x202020 / 0xf0f0f0,
        // The fill of a search field, and of the alternate row in a list.
        SurfaceVariant: 0xe6e6e6 / 0x3a3a3a,
        OnSurfaceVariant: 0x5a5a5a / 0xb4b4b4,
        // The window, which is the reading surface itself in light: a Deepin window is
        // white and what separates from it is the grey well beside the content, not a
        // white card on a grey page.
        Background: 0xffffff / 0x1a1a1a,
        OnBackground: 0x202020 / 0xf0f0f0,
        Outline: 0xcdcdcd / 0x4d4d4d,
        OutlineVariant: 0xe0e0e0 / 0x333333,
        Error: 0xff5736 / 0xff8a73,
        OnError: 0xffffff / 0x34110a,
        // The panel: the grey of a sidebar sunk into the white window, and in dark the
        // key grey, which is a step lighter than the near black window. Either way the
        // panel separates from the page, which is the promise of the role.
        SurfaceContainer: 0xf1f1f1 / 0x2a2a2a,
        // The violet of the deepin palette, the one accent here that is neither the brand
        // blue nor a warm colour.
        Tertiary: 0x7a5bd6 / 0x9f8ae3,
        OnTertiary: 0xffffff / 0x1d0f45,
        // Tints of the three accents, resolved neutrally against the page colour.
        PrimaryContainer: 0xd8ecff / 0x203547,
        OnPrimaryContainer: 0x00407f / 0x9dd0ff,
        SecondaryContainer: 0xfdf0e1 / 0x473928,
        OnSecondaryContainer: 0x79501e / 0xffdcb1,
        TertiaryContainer: 0xebe6f8 / 0x343042,
        OnTertiaryContainer: 0x3d2d6b / 0xcfc4f1,
        // Code colours. Deepin publishes no code editor scheme, so these are derived from the
        // base roles above by the same rule Material 3's are. The brand blue, the amber and the
        // error orange do not reach 4.5:1 on the grey panel as they are, so the rule moves them
        // darker in tone, keeping their hue and chroma.
        SyntaxKeyword: 0x006bd5 / 0x3ba2ff,
        SyntaxString: 0x7758d3 / 0x9f8ae3,
        SyntaxComment: 0x5a5a5a / 0xb4b4b4,
        SyntaxNumber: 0x3d2d6b / 0xcfc4f1,
        SyntaxConstant: 0x3d2d6b / 0xcfc4f1,
        SyntaxType: 0x9b5e00 / 0xffb964,
        SyntaxFunction: 0x00407f / 0x9dd0ff,
        SyntaxVariable: 0x202020 / 0xf0f0f0,
        SyntaxProperty: 0x79501e / 0xffdcb1,
        SyntaxOperator: 0x5a5a5a / 0xb4b4b4,
        SyntaxPunctuation: 0x5a5a5a / 0xb4b4b4,
        SyntaxTag: 0x006bd5 / 0x3ba2ff,
        SyntaxAttribute: 0x9b5e00 / 0xffb964,
        SyntaxEscape: 0xcd3416 / 0xff8a73,
        SyntaxMacro: 0x9b5e00 / 0xffb964,
        DiffAdded: 0x007118 / 0x76c270,
        DiffRemoved: 0xbb2608 / 0xff9783,
        DiffModified: 0x7a5bd6 / 0x9f8ae3,
        DiffAddedContainer: 0xd4e2d7 / 0x394838,
        DiffRemovedContainer: 0xebd9d5 / 0x55403c,
        DiffAddedEmphasis: 0xa9cbb0 / 0x486746,
        DiffRemovedEmphasis: 0xe1b4ab / 0x7f564e,
    },
    // A middle weight ladder. The body sits between Breeze's 13 and Adwaita's 15, and the
    // headings are semi bold with loose line heights, which suits the rounded shapes and
    // survives on a desktop whose default font is unknown.
    type_scale: type_scale! {
        Display: 40.0 / 600 / 50.0 / 0.0 / false,
        Headline: 30.0 / 600 / 38.0 / 0.0 / false,
        Title: 22.0 / 500 / 30.0 / 0.0 / false,
        Subtitle: 18.0 / 500 / 26.0 / 0.0 / false,
        Body: 14.0 / 400 / 21.0 / 0.0 / false,
        BodyStrong: 14.0 / 600 / 21.0 / 0.0 / false,
        Label: 13.0 / 500 / 18.0 / 0.3 / false,
        Caption: 12.0 / 400 / 17.0 / 0.0 / false,
        Mono: 13.0 / 400 / 19.0 / 0.0 / true,
    },
    // The roundest of the three Linux systems. Deepin's windows are rounded far past
    // anything GTK or Qt does, and its controls follow at a smaller radius, so even a
    // button reads as a lozenge next to a Breeze rectangle. The middle rung is ten rather
    // than twelve: the keys in the calculator screen are cut at about a sixth of their
    // height, which is where a Deepin button sits, and twelve was Adwaita's card radius
    // borrowed for a button.
    shapes: shapes! {
        None: 0.0,
        ExtraSmall: 6.0,
        Small: 8.0,
        Medium: 10.0,
        Large: 18.0,
        Full: 1000.0,
    },
    // Roomy, and on a ten pixel rhythm rather than GNOME's six or Kirigami's four.
    spaces: spaces! {
        None: 0.0,
        Xs: 4.0,
        Sm: 10.0,
        Md: 16.0,
        Lg: 20.0,
        Xl: 30.0,
        Xxl: 40.0,
    },
};

/// Apple's current language, the one macOS 26 and iOS 26 draw.
///
/// It shares a palette with `APPLE_HIG` above, because the system colours did not change:
/// what changed is what a surface is made of, how deep a corner is cut, and how far a
/// control is allowed to float. Two of those three are rules rather than tokens, so the
/// visible difference in this table is the shape ladder.
const LIQUID_GLASS: DesignTokenTable = DesignTokenTable {
    system: DesignSystem::LiquidGlass,
    reference: "Apple Human Interface Guidelines, Liquid Glass, system colors and Dynamic Type, 2026",
    default_family: "SF Pro",
    monospace_family: "SF Mono",
    colors: colors! {
        Primary: 0x007aff / 0x0a84ff,
        OnPrimary: 0xffffff / 0xffffff,
        Secondary: 0x5856d6 / 0x5e5ce6,
        OnSecondary: 0xffffff / 0xffffff,
        Surface: 0xffffff / 0x1c1c1e,
        OnSurface: 0x000000 / 0xffffff,
        // The secondary fill, which is what a glass surface tints towards when the blur
        // is unavailable and what a grouped row sits on.
        SurfaceVariant: 0xe9e9eb / 0x2c2c2e,
        OnSurfaceVariant: 0x3c3c43 / 0xebebf5,
        // The page is the document, not a grey well for it to sit in. That is the sharpest
        // difference from the flat language beside it, where a grouped page is grey and
        // the white rectangles on it are what a reader looks at: here the separation
        // comes from the material a panel is made of, so the page underneath can be the
        // reading surface itself.
        //
        // The dark page is pure black, which is right on a phone and wrong in a desktop
        // window. A window is the other value Apple specifies for this one role, and the
        // component rules choose between the two by window size. No other role is
        // specified twice, so no other role is chosen anywhere but here.
        Background: 0xffffff / 0x000000,
        OnBackground: 0x000000 / 0xffffff,
        Outline: 0xc6c6c8 / 0x38383a,
        OutlineVariant: 0xe5e5ea / 0x48484a,
        Error: 0xff3b30 / 0xff453a,
        OnError: 0xffffff / 0xffffff,
        // A panel has to lift off a page that is already white, so this is the lightest
        // system grey rather than another white.
        SurfaceContainer: 0xf2f2f7 / 0x1c1c1e,
        // Liquid Glass keeps Cupertino's accents, because it is the same platform
        // palette seen through a different material. What changes is how a surface is
        // drawn, not which purple Apple uses.
        Tertiary: 0xaf52de / 0xbf5af2,
        OnTertiary: 0xffffff / 0xffffff,
        PrimaryContainer: 0xd6e4ff / 0x0a2d52,
        OnPrimaryContainer: 0x003070 / 0xcfe3ff,
        SecondaryContainer: 0xe2e0ff / 0x262663,
        OnSecondaryContainer: 0x2a1b70 / 0xdedcff,
        TertiaryContainer: 0xf3ddfb / 0x3f1a52,
        OnTertiaryContainer: 0x3d0b52 / 0xf1d9fa,
        // Code colours, after Xcode as Cupertino's are, and UNVERIFIED for the same reason. The
        // panel is a step greyer here, so the diff inks are moved further in tone and the
        // backgrounds resolve differently.
        SyntaxKeyword: 0x9b2393 / 0xfc5fa3,
        SyntaxString: 0xc41a16 / 0xfc6a5d,
        // SyntaxComment is 0x5d6c79 / 0x6c7986 in the editor.
        SyntaxComment: 0x5d6c79 / 0x798693,
        SyntaxNumber: 0x1c00cf / 0xd0bf69,
        SyntaxConstant: 0x6c36a9 / 0xa167e6,
        SyntaxType: 0x3900a0 / 0xd0a8ff,
        SyntaxFunction: 0x326d74 / 0x67b7a4,
        SyntaxVariable: 0x000000 / 0xdfdfe0,
        SyntaxProperty: 0x326d74 / 0x67b7a4,
        SyntaxOperator: 0x000000 / 0xdfdfe0,
        SyntaxPunctuation: 0x000000 / 0xdfdfe0,
        SyntaxTag: 0x0b4f79 / 0x5dd8ff,
        SyntaxAttribute: 0x815f03 / 0xbf8555,
        SyntaxEscape: 0x1c00cf / 0xd0bf69,
        SyntaxMacro: 0x643820 / 0xfd8f3f,
        // DiffAdded is 0x248a3d / 0x30d158 in the editor.
        DiffAdded: 0x00722a / 0x30d158,
        // DiffRemoved is 0xd70015 / 0xff6961 in the editor.
        DiffRemoved: 0xc40012 / 0xff6e66,
        DiffModified: 0x007aff / 0x0a84ff,
        DiffAddedContainer: 0xd5e3de / 0x20402a,
        DiffRemovedContainer: 0xecd5dc / 0x492c2c,
        DiffAddedEmphasis: 0xa9ccb9 / 0x246435,
        DiffRemovedEmphasis: 0xe4a9b2 / 0x773d3b,
    },
    // Same sizes as the flat language, because Dynamic Type did not move, and heavier at
    // every rung that labels something. A label sitting on a translucent surface competes
    // with whatever shows through it, and every control label in the reference screens is
    // set semibold for that reason: the buttons in an alert, the segments of a picker, the
    // section heads of a formatting sheet.
    type_scale: type_scale! {
        Display: 34.0 / 700 / 41.0 / 0.37 / false,
        Headline: 28.0 / 700 / 34.0 / 0.36 / false,
        Title: 22.0 / 700 / 28.0 / 0.35 / false,
        Subtitle: 17.0 / 600 / 22.0 / -0.41 / false,
        Body: 17.0 / 400 / 22.0 / -0.41 / false,
        BodyStrong: 17.0 / 600 / 22.0 / -0.41 / false,
        Label: 15.0 / 600 / 20.0 / -0.24 / false,
        Caption: 12.0 / 500 / 16.0 / 0.0 / false,
        Mono: 15.0 / 400 / 20.0 / 0.0 / true,
    },
    // Deeper than the flat language, and continuous rather than circular. A surface that
    // catches light along its rim needs a corner long enough for the rim to travel round
    // it; a ten dp arc pinches that highlight into a point. The Renderer draws these as a
    // superellipse, which is the other half of the same decision.
    shapes: shapes! {
        None: 0.0,
        ExtraSmall: 6.0,
        Small: 10.0,
        Medium: 16.0,
        Large: 22.0,
        Full: 1000.0,
    },
    // Roomier than the flat language at every step above the smallest. Two reasons, both
    // visible in the reference: a twenty two dp corner needs more room inside it before
    // text stops crowding the curve, and these surfaces float with a margin around them
    // instead of running to the window edge, so the margin is a spacing step as well.
    spaces: spaces! {
        None: 0.0,
        Xs: 4.0,
        Sm: 10.0,
        Md: 18.0,
        Lg: 24.0,
        Xl: 36.0,
        Xxl: 48.0,
    },
};

#[cfg(test)]
mod tests {
    use super::*;
    use crate::schema::DESIGN_SYSTEM_SCHEMA;

    fn channel(value: u32) -> f64 {
        let value = f64::from(value) / 255.0;
        if value <= 0.040_45 {
            value / 12.92
        } else {
            ((value + 0.055) / 1.055).powf(2.4)
        }
    }

    fn luminance(color: Color) -> f64 {
        let argb = color.to_argb();
        0.2126 * channel((argb >> 16) & 0xff)
            + 0.7152 * channel((argb >> 8) & 0xff)
            + 0.0722 * channel(argb & 0xff)
    }

    fn contrast(first: Color, second: Color) -> f64 {
        let (high, low) = {
            let (a, b) = (luminance(first), luminance(second));
            if a > b { (a, b) } else { (b, a) }
        };
        (high + 0.05) / (low + 0.05)
    }

    /// Every `DesignSystem` variant has a table, so adding a variant without
    /// its values fails here rather than at run time.
    #[test]
    fn fr14_every_design_system_has_a_token_table() {
        assert_eq!(DESIGN_TOKENS.len(), DESIGN_SYSTEM_SCHEMA.len());
        for (index, variant) in DESIGN_SYSTEM_SCHEMA.iter().enumerate() {
            let table = DESIGN_TOKENS[index];
            assert_eq!(table.system as u16, variant.tag);
            assert!(
                !table.reference.is_empty(),
                "{} has no source",
                variant.name
            );
            assert!(!table.default_family.is_empty());
            assert!(!table.monospace_family.is_empty());
        }
    }

    /// The tables are ordered by role tag, so a Renderer can index them directly.
    #[test]
    fn fr14_tokens_are_stored_in_role_tag_order() {
        for table in DESIGN_TOKENS {
            for (index, token) in table.colors.iter().enumerate() {
                assert_eq!(token.role as usize, index + 1);
            }
            for (index, token) in table.type_scale.iter().enumerate() {
                assert_eq!(token.role as usize, index + 1);
            }
            for (index, token) in table.shapes.iter().enumerate() {
                assert_eq!(token.role as usize, index + 1);
            }
            for (index, token) in table.spaces.iter().enumerate() {
                assert_eq!(token.role as usize, index + 1);
            }
        }
    }

    /// A filled thing has to be visible on the page it sits on.
    ///
    /// Cupertino gave `SurfaceVariant` and `Background` the same value, so a chat bubble
    /// filled with the variant on a page of the background was drawn, with the right
    /// colour, and was invisible. Layering is the entire reason three roles exist.
    ///
    /// `Background` and `Surface` are deliberately not compared. Material 3 gives them the
    /// same value on purpose and expresses depth through tonal containers and elevation,
    /// so requiring those to differ would be requiring Material 3 to stop being itself.
    ///
    /// That is exactly why `SurfaceContainer` is checked here too. Material 3 having no
    /// gap between the page and the surface is not a defect, but it does mean `Surface` is
    /// not a role a panel can be made of, and until this role existed there was nothing in
    /// the vocabulary that promised to be visible on the page while holding `OnSurface`
    /// ink. A calculator readout filled with `Surface` disappeared under Material 3 and
    /// nothing here noticed, because nothing here was asked about it.
    #[test]
    fn fr14_surface_variant_is_visible_against_the_page_and_the_surface() {
        /// Summed channel distance in eight bit terms, which is enough to catch a collapse.
        fn apart(first: Color, second: Color) -> u32 {
            (0..3)
                .map(|channel| {
                    let shift = channel * 8;
                    let a = (first.0 >> shift) & 0xff;
                    let b = (second.0 >> shift) & 0xff;
                    a.abs_diff(b)
                })
                .sum()
        }

        for table in DESIGN_TOKENS {
            for scheme in [ColorScheme::Light, ColorScheme::Dark] {
                let variant = table.color(ColorRole::SurfaceVariant, scheme);
                for under in [ColorRole::Background, ColorRole::Surface] {
                    let distance = apart(variant, table.color(under, scheme));
                    assert!(
                        distance >= 24,
                        "{:?} {:?}: SurfaceVariant and {:?} are {} apart, which reads as \
                         one flat surface. Anything filled with one on a page of the other \
                         disappears.",
                        table.system,
                        scheme,
                        under,
                        distance
                    );
                }
                // A panel is raised off the page, so the layer role has to be visible
                // against the page. It is not compared against `Surface`, because in
                // Cupertino a panel on the grouped page is the plain reading surface and
                // the two carrying one value there is the correct answer, not a collapse.
                let container = table.color(ColorRole::SurfaceContainer, scheme);
                let distance = apart(container, table.color(ColorRole::Background, scheme));
                assert!(
                    distance >= 24,
                    "{:?} {:?}: SurfaceContainer and Background are {} apart, so a panel \
                     made of it is drawn and cannot be seen. This is the one role a panel \
                     can rely on, so it has to lift off the page in every system.",
                    table.system,
                    scheme,
                    distance
                );
                // The accent containers answer the same question for a tinted panel. A
                // tint nobody can see is a panel that is not there, and these are the
                // fills a screen made of coloured tiles is built out of.
                for container in [
                    ColorRole::PrimaryContainer,
                    ColorRole::SecondaryContainer,
                    ColorRole::TertiaryContainer,
                ] {
                    let distance = apart(
                        table.color(container, scheme),
                        table.color(ColorRole::Background, scheme),
                    );
                    assert!(
                        distance >= 24,
                        "{:?} {:?}: {:?} and Background are {} apart, so a tinted panel is \
                         drawn and cannot be seen.",
                        table.system,
                        scheme,
                        container,
                        distance
                    );
                }
            }
        }
    }

    /// The ladder descends from Display to Caption in every system. `Mono` sits
    /// outside the ladder, because it is a family choice and not a rung.
    #[test]
    fn fr13_type_ladder_is_monotonic() {
        for table in DESIGN_TOKENS {
            let ladder = &table.type_scale[..8];
            for pair in ladder.windows(2) {
                assert!(
                    pair[0].size >= pair[1].size,
                    "{:?}: {:?} is not larger than {:?}",
                    table.system,
                    pair[0].role,
                    pair[1].role
                );
            }
            for token in table.type_scale.iter() {
                assert!(token.size > 0.0);
                assert!((100..=900).contains(&token.weight));
                assert!(token.line_height >= token.size);
            }
            assert!(table.type_scale[TypeRole::Mono as usize - 1].monospace);
            assert!(
                table.type_scale[TypeRole::BodyStrong as usize - 1].weight
                    > table.type_scale[TypeRole::Body as usize - 1].weight
            );
        }
    }

    /// Radii and spacing grow with the role, starting at zero.
    #[test]
    fn fr13_shape_and_space_ladders_grow() {
        for table in DESIGN_TOKENS {
            assert_eq!(table.shapes[0].radius, 0.0);
            for pair in table.shapes.windows(2) {
                assert!(pair[1].radius > pair[0].radius, "{:?}", table.system);
            }
            assert_eq!(table.spaces[0].value, 0.0);
            for pair in table.spaces.windows(2) {
                assert!(pair[1].value > pair[0].value, "{:?}", table.system);
            }
        }
    }

    /// `On*` is readable on its pair in both schemes.
    ///
    /// Reading surfaces hold WCAG AA body text (4.5:1). Accent fills are held to 3:1,
    /// which is the AA large-text and non-text bound: Apple's systemBlue with white
    /// sits at about 4.0:1 and its systemRed at about 3.4:1, and those are the shipped
    /// platform colours. Tightening past that would mean inventing colours that no
    /// platform actually uses, which is worse than the looser bound.
    #[test]
    fn fr14_on_roles_stay_readable() {
        let reading = [
            (ColorRole::Surface, ColorRole::OnSurface),
            (ColorRole::SurfaceVariant, ColorRole::OnSurfaceVariant),
            (ColorRole::Background, ColorRole::OnBackground),
            // The layer role has no ink of its own: it holds the page's reading ink, and
            // that is the promise a caller relies on when filling a panel with it.
            (ColorRole::SurfaceContainer, ColorRole::OnSurface),
            // The accent containers exist so that a paragraph can land on a tinted panel,
            // not just a word, so they are held to the reading bound rather than to the
            // looser bound their accents keep.
            (ColorRole::PrimaryContainer, ColorRole::OnPrimaryContainer),
            (
                ColorRole::SecondaryContainer,
                ColorRole::OnSecondaryContainer,
            ),
            (ColorRole::TertiaryContainer, ColorRole::OnTertiaryContainer),
        ];
        let accent = [
            (ColorRole::Primary, ColorRole::OnPrimary),
            (ColorRole::Secondary, ColorRole::OnSecondary),
            (ColorRole::Tertiary, ColorRole::OnTertiary),
            (ColorRole::Error, ColorRole::OnError),
        ];
        for table in DESIGN_TOKENS {
            for scheme in [ColorScheme::Light, ColorScheme::Dark] {
                for (base, on) in reading {
                    let ratio = contrast(table.color(base, scheme), table.color(on, scheme));
                    assert!(
                        ratio >= 4.5,
                        "{:?} {scheme:?} {base:?}/{on:?} is {ratio:.2}:1",
                        table.system
                    );
                }
                for (base, on) in accent {
                    let ratio = contrast(table.color(base, scheme), table.color(on, scheme));
                    assert!(
                        ratio >= 3.0,
                        "{:?} {scheme:?} {base:?}/{on:?} is {ratio:.2}:1",
                        table.system
                    );
                }
            }
        }
    }

    /// No two design systems answer a whole ladder with the same values.
    ///
    /// A design system that agrees with another one on every colour, every type rung,
    /// every radius or every spacing step is that other system wearing a different name,
    /// and a caller who selected it would see no change at all. Checking each ladder
    /// separately is what catches a table that was copied and then edited in one place.
    #[test]
    fn fr14_no_two_design_systems_answer_a_whole_ladder_identically() {
        for (index, first) in DESIGN_TOKENS.iter().enumerate() {
            for second in &DESIGN_TOKENS[index + 1..] {
                assert_ne!(
                    first.colors, second.colors,
                    "{:?} and {:?} have the same palette",
                    first.system, second.system
                );
                assert_ne!(
                    first.type_scale, second.type_scale,
                    "{:?} and {:?} have the same type scale",
                    first.system, second.system
                );
                assert_ne!(
                    first.shapes, second.shapes,
                    "{:?} and {:?} round everything the same way",
                    first.system, second.system
                );
                assert_ne!(
                    first.spaces, second.spaces,
                    "{:?} and {:?} have the same spacing ladder",
                    first.system, second.system
                );
            }
        }
    }

    /// Code stays readable on the panel it is drawn on, in every system and both schemes.
    ///
    /// Every syntax ink, comments included, holds the body-text bound on `SurfaceContainer`,
    /// which is what a code block is filled with. Each diff ink holds it on its own line
    /// background, and so does the body ink, because an unchanged word on a changed line is
    /// still body text. The word background has to be visible on the line background, or
    /// the words that changed are not marked at all.
    #[test]
    fn fr13_1_3_code_colours_hold_their_contrast_in_every_system() {
        use crate::contrast::{DIFF_ROLES, MIN_SEPARATION, SYNTAX_ROLES, apart};
        for table in DESIGN_TOKENS {
            for scheme in [ColorScheme::Light, ColorScheme::Dark] {
                let panel = table.color(ColorRole::SurfaceContainer, scheme);
                for role in SYNTAX_ROLES {
                    let ratio = contrast(table.color(role, scheme), panel);
                    assert!(
                        ratio >= 4.5,
                        "{:?} {scheme:?}: {role:?} on the code panel is {ratio:.2}:1",
                        table.system
                    );
                }
                for (ink, line, word) in DIFF_ROLES {
                    let background = table.color(line, scheme);
                    let ratio = contrast(table.color(ink, scheme), background);
                    assert!(
                        ratio >= 4.5,
                        "{:?} {scheme:?}: {ink:?} on {line:?} is {ratio:.2}:1",
                        table.system
                    );
                    let body = contrast(table.color(ColorRole::OnSurface, scheme), background);
                    assert!(
                        body >= 4.5,
                        "{:?} {scheme:?}: body text on {line:?} is {body:.2}:1",
                        table.system
                    );
                    let distance = apart(table.color(word, scheme), background);
                    assert!(
                        distance >= MIN_SEPARATION,
                        "{:?} {scheme:?}: {word:?} is {distance} from {line:?}, so the changed \
                         words are not marked",
                        table.system
                    );
                }
            }
        }
    }

    /// The same code block does not come out in one keyword colour seven times.
    #[test]
    fn fr13_1_3_keyword_colour_differs_between_systems() {
        for scheme in [ColorScheme::Light, ColorScheme::Dark] {
            let keywords: std::collections::BTreeSet<u32> = DESIGN_TOKENS
                .iter()
                .map(|table| table.color(ColorRole::SyntaxKeyword, scheme).to_argb())
                .collect();
            assert!(
                keywords.len() >= 2,
                "every system paints keywords #{:08x} in {scheme:?}",
                keywords.first().copied().unwrap_or_default()
            );
        }
    }

    /// The two systems without a code editor scheme hold exactly what the rule derives
    /// from their own base roles.
    ///
    /// One unit of slack per channel, and only that. The derivation runs through powers,
    /// cube roots and an arctangent, and a different maths library may round the last bit
    /// of one of those the other way, which can move a channel that sits on a half by one.
    /// Anything more than that is a value that no longer follows the rule.
    #[test]
    fn fr13_1_3_derived_code_colours_follow_the_rule() {
        for system in [DesignSystem::Material3, DesignSystem::Deepin] {
            let table = table(system);
            for scheme in [ColorScheme::Light, ColorScheme::Dark] {
                let derived = crate::code_colours::derive(table, scheme);
                assert_eq!(derived.len(), 22);
                for (role, expected) in derived {
                    let shipped = table.color(role, scheme);
                    let off = [16, 8, 0]
                        .into_iter()
                        .map(|shift| {
                            ((shipped.to_argb() >> shift) & 0xff)
                                .abs_diff((expected.to_argb() >> shift) & 0xff)
                        })
                        .max()
                        .unwrap_or(0);
                    assert!(
                        off <= 1,
                        "{system:?} {scheme:?}: {role:?} is #{:06x} in the table and the rule \
                         gives #{:06x}",
                        shipped.to_argb() & 0xff_ffff,
                        expected.to_argb() & 0xff_ffff
                    );
                }
            }
        }
    }

    /// A syntax ink taken from a base role is that role's value where it already reads, so
    /// a reader can see in the table which role each one came from.
    #[test]
    fn fr13_1_3_a_derived_syntax_ink_is_its_base_role_where_that_reads() {
        for system in [DesignSystem::Material3, DesignSystem::Deepin] {
            let table = table(system);
            for scheme in [ColorScheme::Light, ColorScheme::Dark] {
                let panel = table.color(ColorRole::SurfaceContainer, scheme);
                for (role, from) in crate::code_colours::DERIVED_FROM {
                    let base = table.color(from, scheme);
                    if contrast(base, panel) >= 4.5 {
                        assert_eq!(
                            table.color(role, scheme),
                            base,
                            "{system:?} {scheme:?}: {role:?} should be {from:?}"
                        );
                    }
                }
                assert_eq!(
                    table.color(ColorRole::DiffModified, scheme),
                    table.color(ColorRole::Tertiary, scheme)
                );
            }
        }
    }

    /// `FollowSystem` is the Renderer's call, so the Host-side lookup can only
    /// report the light value. This documents that, rather than leaving it a surprise.
    #[test]
    fn fr14_follow_system_reads_as_light_on_the_host() {
        let table = table(DesignSystem::Material3);
        assert_eq!(
            table.color(ColorRole::Surface, ColorScheme::FollowSystem),
            table.color(ColorRole::Surface, ColorScheme::Light)
        );
    }
}