/* Emily — the theme palettes. Owned by W7 (docs/API.md §8e). * * A person picks the colours they like on the Family settings screen and the choice * follows them to their other devices: App.setTheme stores it on their own row. * `data-theme` on picks the palette and `data-mode` picks light or dark inside * it, so a palette and the phone's own preference compose instead of fighting. * * Only the 21 tokens docs/API.md §8e allows are set here. Spacing, radii, * shadows and fonts stay in base.css: a theme is colour, and a layout that moved with * the palette would shift the family's controls around. * * `hearth` is the palette base.css already carries — the same hexes, so a browser * that never runs the client, and a family that never picks anything, look exactly as * they did before this file existed. * * Every colour was measured with the WCAG 2.1 relative-luminance formula against the * background it is actually painted on, in both halves of every theme: text and the * dim/faint labels clear 4.5:1 on every surface, --on-accent clears 4.5:1 on --accent * and on --accent-hover, and the accent stands at least 3:1 off its surface. * Nothing here is eyeballed. */ /* hearth — Warm amber. The app as it is today. */ [data-theme="hearth"] { --bg: #faf7f4; --surface: #ffffff; --surface-2: #f4efe9; --surface-3: #e9e1d8; --text: #2a2421; --text-dim: #6c625b; --text-faint: #6e635c; --border: #e8ded4; --border-strong: #d8cabc; --accent: #bb5c0e; --accent-hover: #a94f08; --accent-soft: #fdeee0; --accent-text: #8a3f05; --on-accent: #ffffff; --good: #1c7a48; --good-soft: #e4f5ea; --warn: #9c6306; --warn-soft: #fdf2dd; --danger: #b3382c; --danger-soft: #fcebe8; --info-soft: #e8f1fb; --on-good: #ffffff; --on-warn: #ffffff; --on-danger: #ffffff; } [data-theme="hearth"][data-mode="dark"] { --bg: #17130f; --surface: #211c17; --surface-2: #2a231d; --surface-3: #352c24; --text: #f6f0ea; --text-dim: #b6a99d; --text-faint: #93867b; --border: #3a3028; --border-strong: #4c4036; --accent: #f2913f; --accent-hover: #ffa658; --accent-soft: #382414; --accent-text: #ffcfa3; --on-accent: #24160a; --good: #6ede9c; --good-soft: #16301f; --warn: #f0c268; --warn-soft: #33280f; --danger: #ff8f83; --danger-soft: #3a1c18; --info-soft: #16273a; --on-good: #101010; --on-warn: #101010; --on-danger: #101010; } /* forest — Leaf green on a pale paper. Calm, outdoors, a little earthy. */ [data-theme="forest"] { /* light */ --bg: #f2f7f1; --surface: #fbfdfa; --surface-2: #e8f1e6; --surface-3: #d9e7d5; --text: #17281a; --text-dim: #3c5140; --text-faint: #506553; --border: #d5e2d1; --border-strong: #bccfb8; --accent: #1e6b3c; --accent-hover: #16522e; --accent-soft: #e0f1e4; --accent-text: #14532c; --on-accent: #ffffff; --good: #0f7a5f; --good-soft: #f0f8f5; --warn: #8a5805; --warn-soft: #faefd7; --danger: #a6352a; --danger-soft: #fbe7e3; --info-soft: #e4eef7; --on-good: #ffffff; --on-warn: #ffffff; --on-danger: #ffffff; } [data-theme="forest"][data-mode="dark"] { /* dark */ --bg: #0d1a12; --surface: #14251a; --surface-2: #1b2f21; --surface-3: #24402c; --text: #eef6ef; --text-dim: #b0c6b4; --text-faint: #99b09e; --border: #29402f; --border-strong: #3a5741; --accent: #5fd08c; --accent-hover: #7adfa2; --accent-soft: #143024; --accent-text: #a9e9c3; --on-accent: #06180e; --good: #4fd1b0; --good-soft: #0d2b23; --warn: #f0c268; --warn-soft: #33280f; --danger: #ff9a8c; --danger-soft: #3a1c18; --info-soft: #12283a; --on-good: #101010; --on-warn: #101010; --on-danger: #101010; } /* ocean — Sea blue on a cool white. Airy and quiet, the colour of a clear morning. */ [data-theme="ocean"] { /* light */ --bg: #eff5f9; --surface: #fbfdff; --surface-2: #e5eef6; --surface-3: #d4e3f0; --text: #10202c; --text-dim: #37536a; --text-faint: #486176; --border: #d2e0ec; --border-strong: #b6cbe0; --accent: #0d5c9c; --accent-hover: #0a4676; --accent-soft: #ddeefb; --accent-text: #0a4576; --on-accent: #ffffff; --good: #0f7048; --good-soft: #ddf0e5; --warn: #8a5805; --warn-soft: #faefd7; --danger: #a8332a; --danger-soft: #fbe7e3; --info-soft: #e3f1f8; --on-good: #ffffff; --on-warn: #ffffff; --on-danger: #ffffff; } [data-theme="ocean"][data-mode="dark"] { /* dark */ --bg: #06161f; --surface: #0c2130; --surface-2: #122b3d; --surface-3: #1a3a4f; --text: #e9f4fa; --text-dim: #a8c4d6; --text-faint: #8dabbe; --border: #1e3d51; --border-strong: #2c536b; --accent: #3ec2f0; --accent-hover: #63d3f7; --accent-soft: #0c2f44; --accent-text: #9fdcf7; --on-accent: #04161f; --good: #4fd6a0; --good-soft: #0a2b22; --warn: #f0c268; --warn-soft: #33280f; --danger: #ff9a8c; --danger-soft: #3a1c18; --info-soft: #10314a; --on-good: #101010; --on-warn: #101010; --on-danger: #101010; } /* berry — Plum and raspberry on a blush paper. Warm, a little sweet, still grown up. */ [data-theme="berry"] { /* light */ --bg: #faf0f5; --surface: #fefbfd; --surface-2: #f5e6ee; --surface-3: #ecd6e2; --text: #2a1420; --text-dim: #5a3648; --text-faint: #755164; --border: #ecd4e0; --border-strong: #dbbad0; --accent: #9c2b63; --accent-hover: #7c1f4d; --accent-soft: #fbe2ef; --accent-text: #8a1553; --on-accent: #ffffff; --good: #0f7048; --good-soft: #ddf0e5; --warn: #8a5805; --warn-soft: #faefd7; --danger: #b03a2e; --danger-soft: #fbe4e1; --info-soft: #e9eef8; --on-good: #ffffff; --on-warn: #ffffff; --on-danger: #ffffff; } [data-theme="berry"][data-mode="dark"] { /* dark */ --bg: #150d14; --surface: #1e131c; --surface-2: #291a26; --surface-3: #372332; --text: #f7eef4; --text-dim: #c6a8bb; --text-faint: #ac8ea3; --border: #3b2735; --border-strong: #523a4a; --accent: #f57ab8; --accent-hover: #ff96c8; --accent-soft: #3a1a2c; --accent-text: #fbb8d8; --on-accent: #2a0a1c; --good: #5fd6a0; --good-soft: #0f2b23; --warn: #f0c268; --warn-soft: #33280f; --danger: #ff9a8c; --danger-soft: #3a1c18; --info-soft: #1c2440; --on-good: #101010; --on-warn: #101010; --on-danger: #101010; } /* slate — Quiet cool grey with a graphite accent. Almost no colour, so the money is the only loud thing on screen. */ [data-theme="slate"] { /* light */ --bg: #f3f4f6; --surface: #fdfdff; --surface-2: #ebedf0; --surface-3: #dfe2e7; --text: #1b1f24; --text-dim: #4a5058; --text-faint: #596068; --border: #dcdfe4; --border-strong: #c2c7ce; --accent: #454c57; --accent-hover: #343a43; --accent-soft: #e9eaed; --accent-text: #39404a; --on-accent: #ffffff; --good: #15704a; --good-soft: #ddf0e6; --warn: #8a5805; --warn-soft: #faefd7; --danger: #a8332a; --danger-soft: #fbe7e3; --info-soft: #e9eef4; --on-good: #ffffff; --on-warn: #ffffff; --on-danger: #ffffff; } [data-theme="slate"][data-mode="dark"] { /* dark */ --bg: #15171a; --surface: #1d2024; --surface-2: #25292e; --surface-3: #31363d; --text: #eef0f3; --text-dim: #b0b6bf; --text-faint: #9fa5ad; --border: #2f343a; --border-strong: #434a52; --accent: #a3aebd; --accent-hover: #bcc6d2; --accent-soft: #232730; --accent-text: #c4cdd8; --on-accent: #12151a; --good: #4fd6a0; --good-soft: #10251c; --warn: #f0c268; --warn-soft: #33280f; --danger: #ff9a8c; --danger-soft: #3a1c18; --info-soft: #1b2430; --on-good: #101010; --on-warn: #101010; --on-danger: #101010; } /* midnight — Deep night indigo. Dusk lavender by day, near-black by night, one bright indigo accent. */ [data-theme="midnight"] { /* light */ --bg: #e9e7f6; --surface: #fdfcff; --surface-2: #ded9f2; --surface-3: #cdc7ea; --text: #171633; --text-dim: #3f3c66; --text-faint: #4f4c74; --border: #d6d2ec; --border-strong: #bab4e0; --accent: #4a3fbf; --accent-hover: #3a30a0; --accent-soft: #e5e1fb; --accent-text: #3b2fa8; --on-accent: #ffffff; --good: #0f7048; --good-soft: #ddefe8; --warn: #8a5805; --warn-soft: #faefd7; --danger: #a8332a; --danger-soft: #fbe7e3; --info-soft: #e6e9f8; --on-good: #ffffff; --on-warn: #ffffff; --on-danger: #ffffff; } [data-theme="midnight"][data-mode="dark"] { /* dark */ --bg: #07070f; --surface: #0f0f1c; --surface-2: #171728; --surface-3: #20203a; --text: #f0eff9; --text-dim: #b4b1d6; --text-faint: #928fbb; --border: #26263f; --border-strong: #38385a; --accent: #8f8bf5; --accent-hover: #a5a1ff; --accent-soft: #1a1938; --accent-text: #c3c0ff; --on-accent: #08081a; --good: #4fd6a0; --good-soft: #0b2320; --warn: #f0c268; --warn-soft: #33280f; --danger: #ff9a8c; --danger-soft: #3a1c18; --info-soft: #141a3a; --on-good: #101010; --on-warn: #101010; --on-danger: #101010; }