mobster-cli 0.4.3__py3-none-any.whl

mobile_agent/brand.py

@@ -0,0 +1,454 @@
+# Generated by scripts/gen_brand_tokens.py from docs/brand/tokens.json. Don't edit: change the source and run it.
+"""Mobster's design tokens for Python: the palettes, the type, the token stylesheet and the mark.
+
+The source is docs/brand/tokens.json (the brand guide, § 9). The HTML reports embed STYLESHEET, the terminal
+UI and the CLI's colours read LIGHT and DARK. A see-through colour is given as it shows over paper.
+"""
+
+LIGHT = {
+    "paper": "#F8F8F8",
+    "surface": "#FFFFFF",
+    "sunken": "#F0F0F0",
+    "ink": "#181818",
+    "ink-2": "#505050",
+    "ink-3": "#636363",
+    "ink-4": "#9F9F9F",
+    "line": "#E4E4E4",
+    "line-strong": "#D5D5D5",
+    "line-mark": "#888888",
+    "line-mark-hover": "#666666",
+    "violet": "#6E56F6",
+    "violet-solid": "#6E56F6",
+    "violet-text": "#5B41E8",
+    "violet-wash": "#EFECFF",
+    "green": "#0D6F44",
+    "amber": "#8B5000",
+    "coral": "#B3301F",
+    "card": "#F0F0F0",
+    "card-hover": "#EBEBEB",
+    "primary-hover": "#454545",
+    "focus-ring": "#6E56F6",
+    "scrim": "#B9B9B9"
+}
+DARK = {
+    "paper": "#121212",
+    "surface": "#1B1B1B",
+    "sunken": "#171717",
+    "ink": "#F2F2F2",
+    "ink-2": "#B3B3B3",
+    "ink-3": "#939393",
+    "ink-4": "#6A6A6A",
+    "line": "#2B2B2B",
+    "line-strong": "#3C3C3C",
+    "line-mark": "#828282",
+    "line-mark-hover": "#A4A4A4",
+    "violet": "#7D68FF",
+    "violet-solid": "#6E56F6",
+    "violet-text": "#A493FF",
+    "violet-wash": "#232038",
+    "green": "#6ED2A0",
+    "amber": "#EDBB64",
+    "coral": "#F58D79",
+    "card": "#1D1D1D",
+    "card-hover": "#232323",
+    "primary-hover": "#C5C5C5",
+    "focus-ring": "#7D68FF",
+    "scrim": "#0B0B0B"
+}
+# The tokens as tokens.json writes them ("#060508 62%" stays see-through, which a terminal can draw).
+RAW = {
+    "light": {
+        "paper": "#F8F8F8",
+        "surface": "#FFFFFF",
+        "sunken": "#F0F0F0",
+        "ink": "#181818",
+        "ink-2": "#505050",
+        "ink-3": "#636363",
+        "ink-4": "#9F9F9F",
+        "line": "#E4E4E4",
+        "line-strong": "#D5D5D5",
+        "line-mark": "ink 50%",
+        "line-mark-hover": "ink 65%",
+        "violet": "#6E56F6",
+        "violet-solid": "#6E56F6",
+        "violet-text": "#5B41E8",
+        "violet-wash": "#EFECFF",
+        "green": "#0D6F44",
+        "amber": "#8B5000",
+        "coral": "#B3301F",
+        "card": "ink 3.5% on paper",
+        "card-hover": "ink 6% on paper",
+        "primary-hover": "ink 80% on paper",
+        "focus-ring": "violet 100%",
+        "scrim": "ink 28%"
+    },
+    "dark": {
+        "paper": "#121212",
+        "surface": "#1B1B1B",
+        "sunken": "#171717",
+        "ink": "#F2F2F2",
+        "ink-2": "#B3B3B3",
+        "ink-3": "#939393",
+        "ink-4": "#6A6A6A",
+        "line": "#2B2B2B",
+        "line-strong": "#3C3C3C",
+        "line-mark": "ink 50%",
+        "line-mark-hover": "ink 65%",
+        "violet": "#7D68FF",
+        "violet-solid": "#6E56F6",
+        "violet-text": "#A493FF",
+        "violet-wash": "violet 16%",
+        "green": "#6ED2A0",
+        "amber": "#EDBB64",
+        "coral": "#F58D79",
+        "card": "#FFFFFF 4.5% on paper",
+        "card-hover": "#FFFFFF 7% on paper",
+        "primary-hover": "ink 80% on paper",
+        "focus-ring": "violet 100%",
+        "scrim": "#060606 62%"
+    }
+}
+# Charts' categorical colours, in order (tokens.json "data"): the PDF's charts and the app's --data-N.
+DATA = {
+    "light": [
+        "#2A78D6",
+        "#E3612C",
+        "#009D6B",
+        "#B97D04",
+        "#D1668F"
+    ],
+    "dark": [
+        "#3987E5",
+        "#D95926",
+        "#199E70",
+        "#C98500",
+        "#D55181"
+    ]
+}
+FONT_SANS = "\"Mobster Sans\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
+FONT_MONO = "\"Mobster Code\", ui-monospace, \"SF Mono\", Menlo, monospace"
+WEIGHT = {"body": 400, "nav": 430, "medium": 500, "card-title": 560, "title": 580, "semibold": 600}
+TYPE = {  # size, line height (px)
+    "xs": (12, 18),
+    "sm": (13, 20),
+    "base": (14, 22),
+    "md": (15, 22),
+    "lg": (16, 24),
+    "title": (17, 24),
+    "xl": (20, 28),
+    "headline": (22, 28),
+    "2xl": (28, 36),
+    "display": (34, 40),
+}
+SPACE = [4, 8, 12, 16, 24, 32, 48]
+RADIUS = {
+    "2xs": 4,
+    "xs": 6,
+    "inner": 8,
+    "control": 10,
+    "input": 12,
+    "container": 16,
+    "bubble": 18,
+    "card": 20,
+    "card-lg": 24,
+    "full": 999
+}
+EASE = {
+    "out": "cubic-bezier(.23, 1, .32, 1)",
+    "standard": "cubic-bezier(.23, 1, .32, 1)",
+    "in-out": "cubic-bezier(.23, 1, .32, 1)",
+    "spring": "cubic-bezier(.23, 1, .32, 1)"
+}
+DURATION = {
+    "short": 150,
+    "medium": 200,
+    "long": 240
+}
+STYLESHEET = '''\
+:root {
+  color-scheme: light dark;
+  --paper: #f8f8f8;
+  --surface: #ffffff;
+  --sunken: #f0f0f0;
+  --ink: #181818;
+  --ink-2: #505050;
+  --ink-3: #636363;
+  --ink-4: #9f9f9f;
+  --line: #e4e4e4;
+  --line-strong: #d5d5d5;
+  --line-mark: color-mix(in srgb, var(--ink) 50%, transparent);
+  --line-mark-hover: color-mix(in srgb, var(--ink) 65%, transparent);
+  --violet: #6e56f6;
+  --violet-solid: #6e56f6;
+  --violet-text: #5b41e8;
+  --violet-wash: #efecff;
+  --green: #0d6f44;
+  --amber: #8b5000;
+  --coral: #b3301f;
+  --card: color-mix(in srgb, var(--ink) 3.5%, var(--paper));
+  --card-hover: color-mix(in srgb, var(--ink) 6%, var(--paper));
+  --primary-hover: color-mix(in srgb, var(--ink) 80%, var(--paper));
+  --focus-ring: var(--violet);
+  --scrim: color-mix(in srgb, var(--ink) 28%, transparent);
+  --shadow-card: 0 0 #0000;
+  --shadow-shot: 0 0 0 1px rgb(0 0 0 / .1), 0 1px 2px rgb(24 24 24 / .06), 0 28px 56px -32px rgb(24 24 24 / .32);
+  --shadow-button-secondary: inset 0 0 0 1px var(--line-strong), 0 1px 2px rgb(24 24 24 / .05);
+  --shadow-thumb: 0 0 0 .5px rgb(24 24 24 / .06), 0 1px 3px rgb(24 24 24 / .16);
+  --shadow-app-icon: 0 0 0 .5px rgb(24 24 24 / .08), 0 1px 2px rgb(24 24 24 / .06);
+  --shadow-glass-card: 0 1px 2px rgb(24 24 24 / .04), 0 16px 32px -24px rgb(24 24 24 / .2);
+  --glass-bar: color-mix(in srgb, var(--paper) 78%, transparent);
+  --glass-panel: color-mix(in srgb, #ffffff 72%, transparent);
+  --glass-card: color-mix(in srgb, #ffffff 60%, transparent);
+  --glass-art: color-mix(in srgb, #ffffff 10%, transparent);
+  --glass-edge: color-mix(in srgb, #000000 8%, transparent);
+  --glass-highlight: color-mix(in srgb, #ffffff 60%, transparent);
+  --glass-edge-hover: color-mix(in srgb, #000000 13%, transparent);
+  --glass-card-hover: color-mix(in srgb, #ffffff 60%, transparent);
+  --glass-art-edge: color-mix(in srgb, #ffffff 14%, transparent);
+  --glass-art-highlight: color-mix(in srgb, #ffffff 34%, transparent);
+  --font-sans: "Mobster Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: "Mobster Code", ui-monospace, "SF Mono", Menlo, monospace;
+  --weight-body: 400;
+  --weight-nav: 430;
+  --weight-medium: 500;
+  --weight-card-title: 560;
+  --weight-title: 580;
+  --weight-semibold: 600;
+  --radius-2xs: 4px;
+  --radius-xs: 6px;
+  --radius-inner: 8px;
+  --radius-control: 10px;
+  --radius-input: 12px;
+  --radius-container: 16px;
+  --radius-bubble: 18px;
+  --radius-card: 20px;
+  --radius-card-lg: 24px;
+  --radius-full: 999px;
+  --ease-out: cubic-bezier(.23, 1, .32, 1);
+  --ease-standard: cubic-bezier(.23, 1, .32, 1);
+  --ease-in-out: cubic-bezier(.23, 1, .32, 1);
+  --ease-spring: cubic-bezier(.23, 1, .32, 1);
+  --duration-short: 150ms;
+  --duration-medium: 200ms;
+  --duration-long: 240ms;
+  --glass-bar-filter: blur(20px) saturate(1.6);
+  --glass-panel-filter: blur(24px) saturate(1.8);
+  --glass-card-filter: blur(20px) saturate(1.5);
+  --glass-art-filter: blur(16px) saturate(1.4);
+  --glass-art-edge: color-mix(in srgb, #ffffff 14%, transparent);
+  --glass-art-highlight: color-mix(in srgb, #ffffff 34%, transparent);
+  --glass-art-fallback: color-mix(in srgb, #121212 72%, transparent);
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --paper: #121212;
+    --surface: #1b1b1b;
+    --sunken: #171717;
+    --ink: #f2f2f2;
+    --ink-2: #b3b3b3;
+    --ink-3: #939393;
+    --ink-4: #6a6a6a;
+    --line: #2b2b2b;
+    --line-strong: #3c3c3c;
+    --line-mark: color-mix(in srgb, var(--ink) 50%, transparent);
+    --line-mark-hover: color-mix(in srgb, var(--ink) 65%, transparent);
+    --violet: #7d68ff;
+    --violet-solid: #6e56f6;
+    --violet-text: #a493ff;
+    --violet-wash: color-mix(in srgb, var(--violet) 16%, transparent);
+    --green: #6ed2a0;
+    --amber: #edbb64;
+    --coral: #f58d79;
+    --card: color-mix(in srgb, #ffffff 4.5%, var(--paper));
+    --card-hover: color-mix(in srgb, #ffffff 7%, var(--paper));
+    --primary-hover: color-mix(in srgb, var(--ink) 80%, var(--paper));
+    --focus-ring: var(--violet);
+    --scrim: color-mix(in srgb, #060606 62%, transparent);
+    --shadow-card: inset 0 0 0 1px rgb(255 255 255 / .06);
+    --shadow-shot: 0 0 0 1px rgb(255 255 255 / .1), 0 28px 56px -32px rgb(0 0 0 / .7);
+    --shadow-button-secondary: inset 0 0 0 1px var(--line-strong), 0 1px 2px rgb(24 24 24 / .05);
+    --shadow-thumb: 0 1px 2px rgb(0 0 0 / .45);
+    --shadow-app-icon: 0 0 0 1px rgb(255 255 255 / .1);
+    --shadow-glass-card: 0 24px 48px -32px rgb(0 0 0 / .8);
+    --glass-bar: color-mix(in srgb, var(--paper) 72%, transparent);
+    --glass-panel: color-mix(in srgb, #1e1e1e 70%, transparent);
+    --glass-card: color-mix(in srgb, #1e1e1e 60%, transparent);
+    --glass-art: color-mix(in srgb, #ffffff 10%, transparent);
+    --glass-edge: color-mix(in srgb, #ffffff 9%, transparent);
+    --glass-highlight: color-mix(in srgb, #ffffff 14%, transparent);
+    --glass-edge-hover: color-mix(in srgb, #ffffff 16%, transparent);
+    --glass-card-hover: color-mix(in srgb, #ffffff 3%, transparent);
+    --glass-art-edge: color-mix(in srgb, #ffffff 14%, transparent);
+    --glass-art-highlight: color-mix(in srgb, #ffffff 34%, transparent);
+  }
+}
+'''
+LIGHT_STYLESHEET = '''\
+:root {
+  color-scheme: light;
+  --paper: #f8f8f8;
+  --surface: #ffffff;
+  --sunken: #f0f0f0;
+  --ink: #181818;
+  --ink-2: #505050;
+  --ink-3: #636363;
+  --ink-4: #9f9f9f;
+  --line: #e4e4e4;
+  --line-strong: #d5d5d5;
+  --line-mark: color-mix(in srgb, var(--ink) 50%, transparent);
+  --line-mark-hover: color-mix(in srgb, var(--ink) 65%, transparent);
+  --violet: #6e56f6;
+  --violet-solid: #6e56f6;
+  --violet-text: #5b41e8;
+  --violet-wash: #efecff;
+  --green: #0d6f44;
+  --amber: #8b5000;
+  --coral: #b3301f;
+  --card: color-mix(in srgb, var(--ink) 3.5%, var(--paper));
+  --card-hover: color-mix(in srgb, var(--ink) 6%, var(--paper));
+  --primary-hover: color-mix(in srgb, var(--ink) 80%, var(--paper));
+  --focus-ring: var(--violet);
+  --scrim: color-mix(in srgb, var(--ink) 28%, transparent);
+  --shadow-card: 0 0 #0000;
+  --shadow-shot: 0 0 0 1px rgb(0 0 0 / .1), 0 1px 2px rgb(24 24 24 / .06), 0 28px 56px -32px rgb(24 24 24 / .32);
+  --shadow-button-secondary: inset 0 0 0 1px var(--line-strong), 0 1px 2px rgb(24 24 24 / .05);
+  --shadow-thumb: 0 0 0 .5px rgb(24 24 24 / .06), 0 1px 3px rgb(24 24 24 / .16);
+  --shadow-app-icon: 0 0 0 .5px rgb(24 24 24 / .08), 0 1px 2px rgb(24 24 24 / .06);
+  --shadow-glass-card: 0 1px 2px rgb(24 24 24 / .04), 0 16px 32px -24px rgb(24 24 24 / .2);
+  --glass-bar: color-mix(in srgb, var(--paper) 78%, transparent);
+  --glass-panel: color-mix(in srgb, #ffffff 72%, transparent);
+  --glass-card: color-mix(in srgb, #ffffff 60%, transparent);
+  --glass-art: color-mix(in srgb, #ffffff 10%, transparent);
+  --glass-edge: color-mix(in srgb, #000000 8%, transparent);
+  --glass-highlight: color-mix(in srgb, #ffffff 60%, transparent);
+  --glass-edge-hover: color-mix(in srgb, #000000 13%, transparent);
+  --glass-card-hover: color-mix(in srgb, #ffffff 60%, transparent);
+  --glass-art-edge: color-mix(in srgb, #ffffff 14%, transparent);
+  --glass-art-highlight: color-mix(in srgb, #ffffff 34%, transparent);
+  --font-sans: "Mobster Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: "Mobster Code", ui-monospace, "SF Mono", Menlo, monospace;
+  --weight-body: 400;
+  --weight-nav: 430;
+  --weight-medium: 500;
+  --weight-card-title: 560;
+  --weight-title: 580;
+  --weight-semibold: 600;
+  --radius-2xs: 4px;
+  --radius-xs: 6px;
+  --radius-inner: 8px;
+  --radius-control: 10px;
+  --radius-input: 12px;
+  --radius-container: 16px;
+  --radius-bubble: 18px;
+  --radius-card: 20px;
+  --radius-card-lg: 24px;
+  --radius-full: 999px;
+  --ease-out: cubic-bezier(.23, 1, .32, 1);
+  --ease-standard: cubic-bezier(.23, 1, .32, 1);
+  --ease-in-out: cubic-bezier(.23, 1, .32, 1);
+  --ease-spring: cubic-bezier(.23, 1, .32, 1);
+  --duration-short: 150ms;
+  --duration-medium: 200ms;
+  --duration-long: 240ms;
+  --glass-bar-filter: blur(20px) saturate(1.6);
+  --glass-panel-filter: blur(24px) saturate(1.8);
+  --glass-card-filter: blur(20px) saturate(1.5);
+  --glass-art-filter: blur(16px) saturate(1.4);
+  --glass-art-edge: color-mix(in srgb, #ffffff 14%, transparent);
+  --glass-art-highlight: color-mix(in srgb, #ffffff 34%, transparent);
+  --glass-art-fallback: color-mix(in srgb, #121212 72%, transparent);
+}
+'''
+PRINT_STYLESHEET = '''\
+@media print {
+  :root {
+    color-scheme: light;
+    --paper: #f8f8f8;
+    --surface: #ffffff;
+    --sunken: #f0f0f0;
+    --ink: #181818;
+    --ink-2: #505050;
+    --ink-3: #636363;
+    --ink-4: #9f9f9f;
+    --line: #e4e4e4;
+    --line-strong: #d5d5d5;
+    --line-mark: color-mix(in srgb, var(--ink) 50%, transparent);
+    --line-mark-hover: color-mix(in srgb, var(--ink) 65%, transparent);
+    --violet: #6e56f6;
+    --violet-solid: #6e56f6;
+    --violet-text: #5b41e8;
+    --violet-wash: #efecff;
+    --green: #0d6f44;
+    --amber: #8b5000;
+    --coral: #b3301f;
+    --card: color-mix(in srgb, var(--ink) 3.5%, var(--paper));
+    --card-hover: color-mix(in srgb, var(--ink) 6%, var(--paper));
+    --primary-hover: color-mix(in srgb, var(--ink) 80%, var(--paper));
+    --focus-ring: var(--violet);
+    --scrim: color-mix(in srgb, var(--ink) 28%, transparent);
+    --shadow-card: 0 0 #0000;
+    --shadow-shot: 0 0 0 1px rgb(0 0 0 / .1), 0 1px 2px rgb(24 24 24 / .06), 0 28px 56px -32px rgb(24 24 24 / .32);
+    --shadow-button-secondary: inset 0 0 0 1px var(--line-strong), 0 1px 2px rgb(24 24 24 / .05);
+    --shadow-thumb: 0 0 0 .5px rgb(24 24 24 / .06), 0 1px 3px rgb(24 24 24 / .16);
+    --shadow-app-icon: 0 0 0 .5px rgb(24 24 24 / .08), 0 1px 2px rgb(24 24 24 / .06);
+    --shadow-glass-card: 0 1px 2px rgb(24 24 24 / .04), 0 16px 32px -24px rgb(24 24 24 / .2);
+    --glass-bar: color-mix(in srgb, var(--paper) 78%, transparent);
+    --glass-panel: color-mix(in srgb, #ffffff 72%, transparent);
+    --glass-card: color-mix(in srgb, #ffffff 60%, transparent);
+    --glass-art: color-mix(in srgb, #ffffff 10%, transparent);
+    --glass-edge: color-mix(in srgb, #000000 8%, transparent);
+    --glass-highlight: color-mix(in srgb, #ffffff 60%, transparent);
+    --glass-edge-hover: color-mix(in srgb, #000000 13%, transparent);
+    --glass-card-hover: color-mix(in srgb, #ffffff 60%, transparent);
+    --glass-art-edge: color-mix(in srgb, #ffffff 14%, transparent);
+    --glass-art-highlight: color-mix(in srgb, #ffffff 34%, transparent);
+  }
+}
+'''
+# The mark (docs/brand/logo/mark-<theme>.svg, drawn by scripts/gen_brand_tokens.py).
+MARK = {
+    "light": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width=\"512\" height=\"512\" role=\"img\" aria-label=\"Mobster\"><path d=\"M222.8 36L225.2 36C263.28 36 282.33 36 296.87 43.41A68 68 0 0 1 326.59 73.13C334 87.67 334 106.72 334 144.8L334 166.67L114 166.67L114 144.8C114 106.72 114 87.67 121.41 73.13A68 68 0 0 1 151.13 43.41C165.67 36 184.72 36 222.8 36ZM232.4 190.67L343.6 190.67C362.64 190.67 372.16 190.67 379.44 194.37A34 34 0 0 1 394.29 209.23C398 216.5 398 226.02 398 245.07L398 266.93C398 285.98 398 295.5 394.29 302.77A34 34 0 0 1 379.44 317.63C372.16 321.33 362.64 321.33 343.6 321.33L232.4 321.33C213.36 321.33 203.84 321.33 196.56 317.63A34 34 0 0 1 181.71 302.77C178 295.5 178 285.98 178 266.93L178 245.07C178 226.02 178 216.5 181.71 209.23A34 34 0 0 1 196.56 194.37C203.84 190.67 213.36 190.67 232.4 190.67ZM114 345.33L334 345.33L334 367.2C334 405.28 334 424.33 326.59 438.87A68 68 0 0 1 296.87 468.59C282.33 476 263.28 476 225.2 476L222.8 476C184.72 476 165.67 476 151.13 468.59A68 68 0 0 1 121.41 438.87C114 424.33 114 405.28 114 367.2L114 345.33Z\" fill=\"#181818\"/></svg>",
+    "dark": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width=\"512\" height=\"512\" role=\"img\" aria-label=\"Mobster\"><path d=\"M222.8 36L225.2 36C263.28 36 282.33 36 296.87 43.41A68 68 0 0 1 326.59 73.13C334 87.67 334 106.72 334 144.8L334 166.67L114 166.67L114 144.8C114 106.72 114 87.67 121.41 73.13A68 68 0 0 1 151.13 43.41C165.67 36 184.72 36 222.8 36ZM232.4 190.67L343.6 190.67C362.64 190.67 372.16 190.67 379.44 194.37A34 34 0 0 1 394.29 209.23C398 216.5 398 226.02 398 245.07L398 266.93C398 285.98 398 295.5 394.29 302.77A34 34 0 0 1 379.44 317.63C372.16 321.33 362.64 321.33 343.6 321.33L232.4 321.33C213.36 321.33 203.84 321.33 196.56 317.63A34 34 0 0 1 181.71 302.77C178 295.5 178 285.98 178 266.93L178 245.07C178 226.02 178 216.5 181.71 209.23A34 34 0 0 1 196.56 194.37C203.84 190.67 213.36 190.67 232.4 190.67ZM114 345.33L334 345.33L334 367.2C334 405.28 334 424.33 326.59 438.87A68 68 0 0 1 296.87 468.59C282.33 476 263.28 476 225.2 476L222.8 476C184.72 476 165.67 476 151.13 468.59A68 68 0 0 1 121.41 438.87C114 424.33 114 405.28 114 367.2L114 345.33Z\" fill=\"#F2F2F2\"/></svg>"
+}
+# The mark on the 16 px grid in whole pixels: (x, y, width, height, colour), drawn in order. A round corner's
+# pixel is the colour at 60% over the theme's paper. The terminal UI draws it in half blocks.
+PIXEL_MARK = {
+    "light": [
+        (3, 1, 8, 4, '#181818'),
+        (10, 1, 1, 1, '#727272'),
+        (3, 1, 1, 1, '#727272'),
+        (6, 6, 8, 4, '#181818'),
+        (13, 6, 1, 1, '#727272'),
+        (13, 9, 1, 1, '#727272'),
+        (6, 9, 1, 1, '#727272'),
+        (6, 6, 1, 1, '#727272'),
+        (3, 11, 8, 4, '#181818'),
+        (10, 14, 1, 1, '#727272'),
+        (3, 14, 1, 1, '#727272'),
+    ],
+    "dark": [
+        (3, 1, 8, 4, '#F2F2F2'),
+        (10, 1, 1, 1, '#989898'),
+        (3, 1, 1, 1, '#989898'),
+        (6, 6, 8, 4, '#F2F2F2'),
+        (13, 6, 1, 1, '#989898'),
+        (13, 9, 1, 1, '#989898'),
+        (6, 9, 1, 1, '#989898'),
+        (6, 6, 1, 1, '#989898'),
+        (3, 11, 8, 4, '#F2F2F2'),
+        (10, 14, 1, 1, '#989898'),
+        (3, 14, 1, 1, '#989898'),
+    ],
+}
+
+
+def rgb(value):
+    """A #RRGGBB colour as (red, green, blue), 0 to 255."""
+    value = value.lstrip("#")
+    return tuple(int(value[i:i + 2], 16) for i in (0, 2, 4))
+
+
+def mix(top, amount, under):
+    """``top`` at ``amount`` (0 to 1) over ``under``, as #RRGGBB: a wash for a surface that draws opaque."""
+    a, b = rgb(top), rgb(under)
+    return "#" + "".join(f"{round(x * amount + y * (1 - amount)):02X}" for x, y in zip(a, b))