cadran_palette.hpp

Go to the documentation of this file.

// cadran_palette — the boards' two palettes as plain values (no view, no
// nanovg), every colour Cadran draws with: cadran::install_theme puts them
// in Aurore's themes under their keys (KEYS below), where a theme file
// can change any of them (docs/themes.md), and a host suite checks the
// contrast of every ink on every surface it is drawn on (tests/host;
// Theme::checkContrast does the same at run time, with CONTRAST below).
// Copyright (C) 2026 JigSawFr.  GPLv3-or-later (see LICENSE.GPL).
#pragma once
 
#include <cstdint>
 
namespace cadran::palette
{
struct Rgba
{
    uint8_t r, g, b, a;
};
 
struct Palette
{
    Rgba bg, text, text2, text3, surf, surf2, line, teal, teal_fill, teal_soft, amber, amber_fill, coral, coral_fill,
        coral_line, track, glow, glow_strong, amber_surf, amber_line, pill_ok, pill_ok_ink, rail_active, key_bg,
        key_fg, hl1, hl2, border;
    Rgba blue, violet; 
    Rgba coral_soft;
    Rgba well;
    Rgba pink;
    Rgba avatar0, avatar1, avatar2, avatar3;
    Rgba knob, knob_line;
    Rgba bar, bar_today;
    Rgba backdrop, toast, toast_text;
    Rgba on_fill;
    Rgba hold_fill;
    Rgba rail_shadow;
    Rgba click_pulse;
    Rgba text_off;
    Rgba brand_track, brand_fill, brand_glow;
};
 
constexpr Rgba NAVY = { 0x0B, 0x14, 0x24, 255 };
 
constexpr Palette DARK = {
    NAVY, // bg
    { 0xEE, 0xF2, 0xF8, 255 }, // text
    { 0xA9, 0xB5, 0xC9, 255 }, // text2
    { 0x83, 0x92, 0xAA, 255 }, // text3
    { 0x12, 0x1E, 0x33, 255 }, // surf
    { 0x1A, 0x2A, 0x45, 255 }, // surf2
    { 255, 255, 255, 36 }, // line
    { 0x2E, 0xC4, 0xA6, 255 }, // teal
    { 0x2E, 0xC4, 0xA6, 255 }, // teal_fill
    { 0x2E, 0xC4, 0xA6, 26 }, // teal_soft
    { 0xFF, 0xB5, 0x47, 255 }, // amber
    { 0xFF, 0xB5, 0x47, 255 }, // amber_fill
    { 0xFF, 0x7A, 0x7A, 255 }, // coral
    { 0xFF, 0x7A, 0x7A, 255 }, // coral_fill
    { 0xFF, 0x7A, 0x7A, 140 }, // coral_line
    { 255, 255, 255, 23 }, // track
    { 0x2E, 0xC4, 0xA6, 31 }, // glow
    { 0x2E, 0xC4, 0xA6, 51 }, // glow_strong
    { 0xFF, 0xB5, 0x47, 26 }, // amber_surf
    { 0xFF, 0xB5, 0x47, 90 }, // amber_line
    { 0x2E, 0xC4, 0xA6, 41 }, // pill_ok
    { 0x2E, 0xC4, 0xA6, 255 }, // pill_ok_ink
    { 0x2E, 0xC4, 0xA6, 36 }, // rail_active
    { 0xEE, 0xF2, 0xF8, 255 }, // key_bg
    NAVY, // key_fg
    { 0x2E, 0xC4, 0xA6, 255 }, // hl1
    { 0x9A, 0xF0, 0xDC, 255 }, // hl2
    { 255, 255, 255, 60 }, // border
    { 0x4F, 0xA3, 0xFF, 255 }, // blue
    { 0x9B, 0x8C, 0xF5, 255 }, // violet
    { 0xFF, 0x7A, 0x7A, 36 }, // coral_soft
    { 255, 255, 255, 46 }, // well
    { 0xE9, 0x6A, 0xA8, 255 }, // pink
    { 0x7C, 0x6C, 0xF2, 255 }, // avatar0
    { 0xFF, 0xB5, 0x47, 255 }, // avatar1
    { 0x4F, 0xA3, 0xFF, 255 }, // avatar2
    { 0xE9, 0x6A, 0xA8, 255 }, // avatar3
    { 0xFF, 0xFF, 0xFF, 255 }, // knob
    { 0x0B, 0x14, 0x24, 40 }, // knob_line
    { 0x5A, 0x71, 0x96, 255 }, // bar
    { 0x9F, 0xB4, 0xD4, 255 }, // bar_today
    { 3, 8, 18, 225 }, // backdrop
    { 0x1A, 0x2A, 0x45, 250 }, // toast
    { 0xEE, 0xF2, 0xF8, 255 }, // toast_text
    NAVY, // on_fill
    { 255, 255, 255, 70 }, // hold_fill
    { 0, 0, 0, 70 }, // rail_shadow
    { 0x2E, 0xC4, 0xA6, 38 }, // click_pulse
    { 0xEE, 0xF2, 0xF8, 110 }, // text_off
    { 0x1F, 0x33, 0x55, 255 }, // brand_track
    { 0x2E, 0xC4, 0xA6, 255 }, // brand_fill
    { 0x9A, 0xF0, 0xDC, 255 } // brand_glow
};
 
constexpr Palette LIGHT = {
    { 0xED, 0xF0, 0xF4, 255 }, // bg
    NAVY, // text
    { 0x3F, 0x4C, 0x63, 255 }, // text2
    { 0x5F, 0x6E, 0x88, 255 }, // text3
    { 0xFF, 0xFF, 0xFF, 255 }, // surf
    { 0xF3, 0xF5, 0xF8, 255 }, // surf2
    { 0x0B, 0x14, 0x24, 26 }, // line
    { 0x0A, 0x70, 0x5F, 255 }, // teal
    { 0x14, 0xA3, 0x8A, 255 }, // teal_fill
    { 0x14, 0xA3, 0x8A, 26 }, // teal_soft
    { 0x8A, 0x52, 0x00, 255 }, // amber
    { 0xE0, 0x93, 0x1B, 255 }, // amber_fill
    { 0xB7, 0x1C, 0x1C, 255 }, // coral
    { 0xE5, 0x48, 0x4D, 255 }, // coral_fill
    { 0xE3, 0x9A, 0x9A, 255 }, // coral_line
    { 0x0B, 0x14, 0x24, 26 }, // track
    { 0x2E, 0xC4, 0xA6, 41 }, // glow
    { 0x2E, 0xC4, 0xA6, 56 }, // glow_strong
    { 0xFF, 0xF3, 0xDF, 255 }, // amber_surf
    { 0xF3, 0xD5, 0x9C, 255 }, // amber_line
    { 0xD8, 0xF3, 0xEC, 255 }, // pill_ok
    { 0x0A, 0x6E, 0x5C, 255 }, // pill_ok_ink
    { 0x14, 0xA3, 0x8A, 36 }, // rail_active
    NAVY, // key_bg
    { 0xFF, 0xFF, 0xFF, 255 }, // key_fg
    { 0x0A, 0x70, 0x5F, 255 }, // hl1
    { 0x0F, 0x8A, 0x74, 255 }, // hl2
    { 0x0B, 0x14, 0x24, 60 }, // border
    { 0x1F, 0x5F, 0xC4, 255 }, // blue
    { 0x5B, 0x47, 0xC9, 255 }, // violet
    { 0xE5, 0x48, 0x4D, 28 }, // coral_soft
    { 0, 0, 0, 34 }, // well
    { 0xC2, 0x45, 0x7F, 255 }, // pink
    { 0x7C, 0x6C, 0xF2, 255 }, // avatar0
    { 0xFF, 0xB5, 0x47, 255 }, // avatar1
    { 0x4F, 0xA3, 0xFF, 255 }, // avatar2
    { 0xE9, 0x6A, 0xA8, 255 }, // avatar3
    { 0xFF, 0xFF, 0xFF, 255 }, // knob
    { 0x0B, 0x14, 0x24, 40 }, // knob_line
    { 0x7E, 0x90, 0xAE, 255 }, // bar
    { 0x4A, 0x5D, 0x7E, 255 }, // bar_today
    { 0x0B, 0x14, 0x24, 160 }, // backdrop
    { 0x0B, 0x14, 0x24, 240 }, // toast
    { 0xEE, 0xF2, 0xF8, 255 }, // toast_text
    NAVY, // on_fill
    { 255, 255, 255, 70 }, // hold_fill
    { 0, 0, 0, 70 }, // rail_shadow
    { 0x14, 0xA3, 0x8A, 38 }, // click_pulse
    { 0x0B, 0x14, 0x24, 110 }, // text_off
    { 0x1F, 0x33, 0x55, 255 }, // brand_track
    { 0x2E, 0xC4, 0xA6, 255 }, // brand_fill
    { 0x9A, 0xF0, 0xDC, 255 } // brand_glow
};
 
struct Key
{
    const char* name;
    Rgba Palette::*color;
};
 
constexpr Key KEYS[] = {
    { "aurore/background", &Palette::bg },
    { "aurore/clear", &Palette::bg },
    { "aurore/text", &Palette::text },
    // A secondary text (a switch's Off, a placeholder) in the third ink,
    // what cannot be used now in the faded one
    { "aurore/text_secondary", &Palette::text3 },
    { "aurore/text_disabled", &Palette::text_off },
    { "aurore/sidebar/background", &Palette::bg },
    { "aurore/sidebar/separator", &Palette::line },
    { "aurore/sidebar/active_item", &Palette::teal },
    { "aurore/applet_frame/separator", &Palette::line },
    { "aurore/header/border", &Palette::line },
    { "aurore/highlight/background", &Palette::surf },
    { "aurore/highlight/color1", &Palette::hl1 },
    { "aurore/highlight/color2", &Palette::hl2 },
    { "aurore/click_pulse", &Palette::click_pulse },
    { "aurore/button/primary_enabled_background", &Palette::teal_fill },
    { "aurore/button/primary_enabled_text", &Palette::on_fill },
    { "aurore/button/default_enabled_background", &Palette::surf2 },
    { "aurore/button/default_enabled_text", &Palette::text },
    { "aurore/button/enabled_border_color", &Palette::border },
    { "aurore/button/highlight_enabled_text", &Palette::teal },
    // A list line's plain value in the second ink, so the list screens
    // (cadran::List) take it as it is.
    { "aurore/list/listItem_value_color", &Palette::text2 },
    { "aurore/backdrop", &Palette::backdrop },
    { "aurore/notification/background", &Palette::toast },
    { "aurore/notification/text", &Palette::toast_text },
    { "cadran/navy", &Palette::on_fill },
    { "cadran/text", &Palette::text },
    { "cadran/text2", &Palette::text2 },
    { "cadran/text3", &Palette::text3 },
    { "cadran/text_off", &Palette::text_off },
    { "cadran/teal", &Palette::teal },
    { "cadran/teal_fill", &Palette::teal_fill },
    { "cadran/teal_soft", &Palette::teal_soft },
    { "cadran/amber", &Palette::amber },
    { "cadran/amber_fill", &Palette::amber_fill },
    { "cadran/coral", &Palette::coral },
    { "cadran/coral_fill", &Palette::coral_fill },
    { "cadran/coral_line", &Palette::coral_line },
    { "cadran/coral_soft", &Palette::coral_soft },
    { "cadran/track", &Palette::track },
    { "cadran/surf", &Palette::surf },
    { "cadran/surf2", &Palette::surf2 },
    { "cadran/line", &Palette::line },
    { "cadran/border", &Palette::border },
    { "cadran/glow", &Palette::glow },
    { "cadran/glow_strong", &Palette::glow_strong },
    { "cadran/amber_surf", &Palette::amber_surf },
    { "cadran/amber_line", &Palette::amber_line },
    { "cadran/pill_ok", &Palette::pill_ok },
    { "cadran/pill_ok_ink", &Palette::pill_ok_ink },
    { "cadran/rail_active", &Palette::rail_active },
    { "cadran/key_bg", &Palette::key_bg },
    { "cadran/key_fg", &Palette::key_fg },
    { "cadran/hl1", &Palette::hl1 },
    { "cadran/hl2", &Palette::hl2 },
    { "cadran/well", &Palette::well },
    { "cadran/blue", &Palette::blue },
    { "cadran/violet", &Palette::violet },
    { "cadran/pink", &Palette::pink },
    { "cadran/avatar0", &Palette::avatar0 },
    { "cadran/avatar1", &Palette::avatar1 },
    { "cadran/avatar2", &Palette::avatar2 },
    { "cadran/avatar3", &Palette::avatar3 },
    { "cadran/knob", &Palette::knob },
    { "cadran/knob_line", &Palette::knob_line },
    { "cadran/bar", &Palette::bar },
    { "cadran/bar_today", &Palette::bar_today },
    { "cadran/hold_fill", &Palette::hold_fill },
    { "cadran/rail_shadow", &Palette::rail_shadow },
    { "cadran/brand/track", &Palette::brand_track },
    { "cadran/brand/fill", &Palette::brand_fill },
    { "cadran/brand/glow", &Palette::brand_glow },
};
 
struct Contrast
{
    const char* ink;
    const char* surface;
    float minimum;
};
 
constexpr Contrast CONTRAST[] = {
    // The text and the inks, on the background, a card and the second surface.
    { "cadran/text", "aurore/background", 4.5f },
    { "cadran/text", "cadran/surf", 4.5f },
    { "cadran/text", "cadran/surf2", 4.5f },
    { "cadran/text2", "aurore/background", 4.5f },
    { "cadran/text2", "cadran/surf", 4.5f },
    { "cadran/text2", "cadran/surf2", 4.5f },
    { "cadran/text3", "aurore/background", 4.5f },
    { "cadran/text3", "cadran/surf", 4.5f },
    { "cadran/text3", "cadran/surf2", 4.5f },
    { "cadran/teal", "aurore/background", 4.5f },
    { "cadran/teal", "cadran/surf", 4.5f },
    { "cadran/teal", "cadran/surf2", 4.5f },
    { "cadran/amber", "aurore/background", 4.5f },
    { "cadran/amber", "cadran/surf", 4.5f },
    { "cadran/amber", "cadran/surf2", 4.5f },
    { "cadran/coral", "aurore/background", 4.5f },
    { "cadran/coral", "cadran/surf", 4.5f },
    { "cadran/coral", "cadran/surf2", 4.5f },
    { "cadran/blue", "aurore/background", 4.5f },
    { "cadran/blue", "cadran/surf", 4.5f },
    { "cadran/blue", "cadran/surf2", 4.5f },
    { "cadran/violet", "aurore/background", 4.5f },
    { "cadran/violet", "cadran/surf", 4.5f },
    { "cadran/violet", "cadran/surf2", 4.5f },
    // Where the palettes put an ink on a fill of their own.
    { "cadran/amber", "cadran/amber_surf", 4.5f },
    { "cadran/pill_ok_ink", "cadran/pill_ok", 4.5f },
    { "cadran/teal", "cadran/rail_active", 4.5f },
    { "cadran/key_fg", "cadran/key_bg", 4.5f },
    { "cadran/navy", "cadran/teal_fill", 4.5f },
    { "cadran/navy", "cadran/coral_fill", 4.5f },
    // The focus ring, both ends of its pulse, on the screen and on a card.
    { "aurore/highlight/color1", "aurore/background", 3.0f },
    { "aurore/highlight/color2", "aurore/background", 3.0f },
    { "aurore/highlight/color1", "cadran/surf", 3.0f },
    { "aurore/highlight/color2", "cadran/surf", 3.0f },
    // Secondary text in Aurore's cells, on a card too.
    { "aurore/text_secondary", "cadran/surf", 4.5f },
    { "aurore/list/listItem_value_color", "cadran/surf", 4.5f },
    // Shapes that carry meaning, at 3:1 (WCAG 1.4.11): a tile's icon, a
    // chart's bars. A switch off is told by its knob and outline, in text3.
    { "cadran/pink", "cadran/surf", 3.0f },
    { "cadran/bar", "cadran/surf", 3.0f },
    { "cadran/bar_today", "cadran/surf", 3.0f },
};
} // namespace cadran::palette