web using penguin-ui

web/templates/ui/base.html

@@ -25,43 +25,62 @@
   <script src="https://cdn.jsdelivr.net/npm/htmx.org@2/dist/htmx.min.js"></script>
 
   {#
-    Penguin UI (https://www.penguinui.com) is Tailwind + Alpine, and its
-    components are what this app uses for anything the user has to be told:
-    ui/alert.html and ui/dialog.html. The focus plugin is what x-trap in the
-    dialog needs, and it has to load before Alpine itself.
+    Penguin UI (https://www.penguinui.com) is Tailwind + Alpine, and every
+    component on this site is one of its components: the navbar, the failure
+    alert and modal, and the toast, which is included straight out of
+    penguinui-components. The focus plugin is what x-trap in the modal needs,
+    and it has to load before Alpine itself.
   #}
   <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
   <style type="text/tailwindcss">
-    /* Penguin UI's "modern" theme setup: its semantic names, this app's palette. */
-    @theme {
-      --color-surface: #ffffff;
-      --color-surfaceAlt: #f3f5f7;
-      --color-surfaceDark: #152238;
-      --color-onSurface: #465267;
-      --color-onSurfaceStrong: #17202a;
-      --color-outline: #d9dfe7;
-      --color-primary: #2563eb;
-      --color-onPrimary: #ffffff;
-      --color-danger: #9d342d;
-      --color-success: #21643a;
+    /*
+      The theme penguinui-components/style.css declares, with this app's palette
+      in the light slots. The names are the library's and are not renamed: the
+      component markup here is the library's markup, so it asks for
+      `text-on-surface` and `rounded-radius` and has to find them.
+    */
+    @custom-variant dark (&:where(.dark, .dark *));
 
-      /*
-        The same palette again under the names penguinui-components/style.css
-        declares, for the component files this app includes from the library
-        unmodified rather than copying — currently the toast. The copies above
-        renamed these; a file used as the library ships it cannot be renamed,
-        so the theme answers to both spellings.
-      */
+    @theme {
+      /* Light theme — this app's palette. */
+      --color-surface: #ffffff;
       --color-surface-alt: #f3f5f7;
       --color-on-surface: #465267;
       --color-on-surface-strong: #17202a;
+      --color-primary: #2563eb;
       --color-on-primary: #ffffff;
+      --color-secondary: #152238;
+      --color-on-secondary: #ffffff;
+      --color-outline: #d9dfe7;
+      --color-outline-strong: #8f9bad;
+
+      /*
+        Dark theme. Nothing sets the `.dark` class the custom variant above
+        scopes these to, so they are inert — they exist because the library's
+        markup carries `dark:` classes and is used as it ships. Scoping the
+        variant to a class rather than leaving Tailwind's prefers-color-scheme
+        default is what keeps them from firing on an OS set to dark.
+      */
+      --color-surface-dark: #0f1722;
+      --color-surface-dark-alt: #152238;
+      --color-on-surface-dark: #cbd7e8;
+      --color-on-surface-dark-strong: #ffffff;
+      --color-primary-dark: #68a4ff;
+      --color-on-primary-dark: #0f1722;
+      --color-outline-dark: #33415a;
+      --color-outline-dark-strong: #cbd7e8;
+
+      /* Shared colours. */
       --color-info: #1d4e89;
       --color-on-info: #ffffff;
+      --color-success: #21643a;
       --color-on-success: #ffffff;
       --color-warning: #8a5a08;
       --color-on-warning: #ffffff;
+      --color-danger: #9d342d;
       --color-on-danger: #ffffff;
+
+      /* Border radius. */
       --radius-radius: 6px;
     }
   </style>