Cappuccino theme

cabal.project.freeze

@@ -41,11 +41,11 @@ constraints: any.Glob ==0.10.2,
              any.cborg ==0.2.10.0,
              any.cereal ==0.5.8.3,
              any.citeproc ==0.8.1.1,
-             any.colour ==2.3.6,
+             any.colour ==2.3.7,
              any.commonmark ==0.2.6.1,
              any.commonmark-extensions ==0.2.5.6,
              any.commonmark-pandoc ==0.2.2.3,
-             any.comonad ==5.0.9,
+             any.comonad ==5.0.10,
              any.conduit ==1.3.6.1,
              any.conduit-extra ==1.3.8,
              any.containers ==0.6.7,
@@ -70,7 +70,7 @@ constraints: any.Glob ==0.10.2,
              any.distributive ==0.6.2.1,
              any.djot ==0.1.2.3,
              any.dlist ==1.0,
-             any.doclayout ==0.5,
+             any.doclayout ==0.5.0.1,
              any.doctemplates ==0.11.0.1,
              any.easy-file ==0.2.5,
              any.emojis ==0.1.4.1,
@@ -85,13 +85,11 @@ constraints: any.Glob ==0.10.2,
              any.ghc-prim ==0.10.0,
              any.gridtables ==0.1.1.0,
              any.haddock-library ==1.11.0,
-             any.hakyll ==4.16.8.0,
+             any.hakyll ==4.16.7.1,
              hakyll -buildwebsite +checkexternal +previewserver +usepandoc +watchserver,
              any.half ==0.3.3,
              any.hashable ==1.4.7.0,
              any.haskell-lexer ==1.2,
-             any.haskell-src-exts ==1.23.1,
-             any.haskell-src-meta ==0.8.15,
              any.hinotify ==0.4.2,
              any.hourglass ==0.2.12,
              any.http-client ==0.7.19,
@@ -110,19 +108,12 @@ constraints: any.Glob ==0.10.2,
              any.ipynb ==0.2,
              any.jira-wiki-markup ==1.5.1,
              any.libyaml ==0.1.4,
-             any.lifted-base ==0.2.3.12,
              any.lrucache ==1.2.0.1,
              any.memory ==0.18.0,
              any.mime-types ==0.1.2.1,
              any.monad-control ==1.0.3.1,
-             any.monad-logger ==0.3.42,
-             monad-logger +template_haskell,
-             any.monad-loops ==0.4.3,
-             monad-loops +base4,
              any.mono-traversable ==1.0.21.0,
              any.mtl ==2.3.1,
-             any.mtl-compat ==0.2.2,
-             mtl-compat -two-point-one -two-point-two,
              any.network ==3.1.4.0,
              any.network-byte-order ==0.1.7,
              any.network-control ==0.1.3,
@@ -148,8 +139,6 @@ constraints: any.Glob ==0.10.2,
              any.regex-base ==0.94.0.3,
              any.regex-tdfa ==1.3.2.5,
              any.resourcet ==1.2.6,
-             any.retry ==0.9.3.1,
-             retry -lib-werror,
              any.rts ==1.0.2,
              any.safe ==0.3.21,
              any.safe-exceptions ==0.1.7.4,
@@ -167,11 +156,8 @@ constraints: any.Glob ==0.10.2,
              any.split ==0.2.5,
              any.splitmix ==0.1.3,
              any.stm ==2.5.1.0,
-             any.stm-chans ==3.0.0.11,
              any.streaming-commons ==0.2.3.1,
              any.strict ==0.5.1,
-             any.string-interpolate ==0.3.4.0,
-             string-interpolate -bytestring-builder -extended-benchmarks -text-builder,
              any.syb ==0.7.3,
              any.tagged ==0.8.9,
              any.tagsoup ==0.14.8,
@@ -185,11 +171,8 @@ constraints: any.Glob ==0.10.2,
              any.text-short ==0.1.6.1,
              any.th-abstraction ==0.6.0.0,
              any.th-compat ==0.1.7,
-             any.th-expand-syns ==0.4.12.0,
              any.th-lift ==0.8.6,
              any.th-lift-instances ==0.1.20,
-             any.th-orphans ==0.13.17,
-             any.th-reify-many ==0.1.10,
              any.these ==1.2.1,
              any.time ==1.12.2,
              any.time-compat ==1.9.9,
@@ -232,4 +215,4 @@ constraints: any.Glob ==0.10.2,
              any.yaml ==0.11.11.2,
              any.zip-archive ==0.4.3.2,
              any.zlib ==0.7.0.0
-index-state: hackage.haskell.org 2026-04-02T12:38:26Z
+index-state: hackage.haskell.org 2026-04-30T12:51:47Z

static/css/annotations.css

@@ -30,12 +30,18 @@ mark.user-annotation:hover { filter: brightness(0.80); }
 [data-theme="dark"] mark.user-annotation.user-annotation--steel { background-color: rgba(112, 150, 184, 0.42); }
 [data-theme="dark"] mark.user-annotation.user-annotation--rose  { background-color: rgba(200, 116, 116, 0.42); }
 
+/* Cappuccino — dark warm bg, so highlights need dark-mode-level opacity */
+[data-theme="cappuccino"] mark.user-annotation.user-annotation--amber { background-color: rgba(245, 180,  70, 0.42); }
+[data-theme="cappuccino"] mark.user-annotation.user-annotation--sage  { background-color: rgba(130, 175, 140, 0.42); }
+[data-theme="cappuccino"] mark.user-annotation.user-annotation--steel { background-color: rgba(140, 170, 200, 0.42); }
+[data-theme="cappuccino"] mark.user-annotation.user-annotation--rose  { background-color: rgba(220, 140, 140, 0.42); }
+
 /* System dark mode fallback (for prefers-color-scheme without explicit data-theme) */
 @media (prefers-color-scheme: dark) {
-    :root:not([data-theme="light"]) mark.user-annotation.user-annotation--amber { background-color: rgba(245, 158,  11, 0.40); }
+    :root:not([data-theme]) mark.user-annotation.user-annotation--amber { background-color: rgba(245, 158,  11, 0.40); }
-    :root:not([data-theme="light"]) mark.user-annotation.user-annotation--sage  { background-color: rgba(107, 158, 120, 0.42); }
+    :root:not([data-theme]) mark.user-annotation.user-annotation--sage  { background-color: rgba(107, 158, 120, 0.42); }
-    :root:not([data-theme="light"]) mark.user-annotation.user-annotation--steel { background-color: rgba(112, 150, 184, 0.42); }
+    :root:not([data-theme]) mark.user-annotation.user-annotation--steel { background-color: rgba(112, 150, 184, 0.42); }
-    :root:not([data-theme="light"]) mark.user-annotation.user-annotation--rose  { background-color: rgba(200, 116, 116, 0.42); }
+    :root:not([data-theme]) mark.user-annotation.user-annotation--rose  { background-color: rgba(200, 116, 116, 0.42); }
 }
 
 /* ============================================================

static/css/base.css

@@ -193,9 +193,41 @@
     --hm-4: #d4d0c8;
 }
 
+/* ============================================================
+   CAPPUCCINO (warm milky-coffee — opt-in only, no system trigger)
+   ============================================================ */
+
+[data-theme="cappuccino"] {
+    --bg:              #553a28;
+    --bg-nav:          #503626;
+    --bg-offset:       #4a3324;
+    --text:            #ead0a0;   /* warm microfoam — golden cream */
+    --text-muted:      #d0b888;
+    --text-faint:      #b09575;
+    --border:          #7a5d44;
+    --border-muted:    #6a4f38;
+
+    --link:            #ead0a0;
+    --link-underline:  #b09575;
+    --link-hover:      #f5e6c0;
+    --link-hover-underline: #f5e6c0;
+    --link-visited:    #d0b888;
+
+    --selection-bg:    #ead0a0;
+    --selection-text:  #3a2418;
+
+    --bg-subtle:       var(--bg-offset);
+
+    --hm-0: #4a3324;
+    --hm-1: #6a4f38;
+    --hm-2: #8d6c4e;
+    --hm-3: #b09575;
+    --hm-4: #ead0a0;
+}
+
 /* System dark mode fallback */
 @media (prefers-color-scheme: dark) {
-    :root:not([data-theme="light"]) {
+    :root:not([data-theme]) {
         --bg:              #121212;
         --bg-nav:          #181818;
         --bg-offset:       #1a1a1a;

static/css/print.css

@@ -10,7 +10,8 @@
        reaching for hardcoded #fff/#000 again.
     ---------------------------------------------------------------- */
     :root,
-    [data-theme="dark"] {
+    [data-theme="dark"],
+    [data-theme="cappuccino"] {
         --bg:           #ffffff;
         --bg-offset:    #f5f5f5;
         --bg-subtle:    #f9f9f9;

static/css/reading.css

@@ -35,8 +35,13 @@ body.reading-mode {
     background-color: var(--bg);
 }
 
+[data-theme="cappuccino"] body.reading-mode {
+    --bg: #634432;
+    background-color: var(--bg);
+}
+
 @media (prefers-color-scheme: dark) {
-    :root:not([data-theme="light"]) body.reading-mode {
+    :root:not([data-theme]) body.reading-mode {
         --bg: #1c1917;
         background-color: var(--bg);
     }

static/css/typography.css

@@ -240,8 +240,17 @@ sub { font-variant-position: sub; line-height: 1; }
         rgba(80, 110, 160, 0) 100%
     );
 }
+[data-theme="cappuccino"] #markdownBody mark:not(.user-annotation) {
+    background-image: linear-gradient(
+        104deg,
+        rgba(245, 215, 130, 0)    0%,
+        rgba(245, 215, 130, 0.45) 2%,
+        rgba(230, 195, 110, 0.55) 98%,
+        rgba(230, 195, 110, 0)    100%
+    );
+}
 @media (prefers-color-scheme: dark) {
-    :root:not([data-theme="light"]) #markdownBody mark:not(.user-annotation) {
+    :root:not([data-theme]) #markdownBody mark:not(.user-annotation) {
         background-image: linear-gradient(
             104deg,
             rgba(100, 130, 180, 0) 0%,

static/js/settings.js

@@ -90,8 +90,9 @@
     ------------------------------------------------------------------ */
 
     function handle(action) {
-        if      (action === 'theme-light')   setTheme('light');
+        if      (action === 'theme-light')      setTheme('light');
-        else if (action === 'theme-dark')    setTheme('dark');
+        else if (action === 'theme-dark')       setTheme('dark');
+        else if (action === 'theme-cappuccino') setTheme('cappuccino');
         else if (action === 'text-smaller')  shiftSize(-1);
         else if (action === 'text-larger')   shiftSize(+1);
         else if (action === 'focus-mode')    toggleDataAttr('focus-mode',    'data-focus-mode');

static/js/theme.js

@@ -14,7 +14,7 @@
 
     /* Theme */
     var storedTheme = safeGet('theme');
-    if (storedTheme === 'dark' || storedTheme === 'light') {
+    if (storedTheme === 'dark' || storedTheme === 'light' || storedTheme === 'cappuccino') {
         document.documentElement.setAttribute('data-theme', storedTheme);
     }
 

templates/partials/nav.html

@@ -18,6 +18,7 @@
                             <div class="settings-row">
                                 <button type="button" class="settings-btn" data-action="theme-light">Light</button>
                                 <button type="button" class="settings-btn" data-action="theme-dark">Dark</button>
+                                <button type="button" class="settings-btn" data-action="theme-cappuccino">Cappuccino</button>
                             </div>
                         </div>
                         <div class="settings-section">

templates/score-reader.html

@@ -18,6 +18,7 @@
                     <div class="settings-row">
                         <button class="settings-btn" data-action="theme-light">Light</button>
                         <button class="settings-btn" data-action="theme-dark">Dark</button>
+                        <button class="settings-btn" data-action="theme-cappuccino">Cappuccino</button>
                     </div>
                 </div>
             </div>