@docpensieve/theme 0.4.0-beta.1 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docpensieve/theme",
-  "version": "0.4.0-beta.1",
+  "version": "0.4.0",
   "description": "DocPensieve theme system: composable providers (Tailwind, custom)",
   "type": "module",
   "license": "MIT",
@@ -20,7 +20,7 @@
     "types"
   ],
   "dependencies": {
-    "@docpensieve/shared": "0.4.0-beta.1",
+    "@docpensieve/shared": "0.4.0",
     "tailwindcss": "^4.3.3"
   },
   "keywords": [

package/src/custom-provider.js

@@ -22,6 +22,14 @@ export const DEFAULT_TOKENS = Object.freeze({
   '--dp-rule': '#e8ebef',
   '--dp-accent': '#5b57d1',
   '--dp-accent-soft': '#f0effc',
+  // Meaning, not decoration: a tip, a caution and a danger. A component never
+  // writes a colour, so the three come from here.
+  '--dp-tip': '#0f7a5a',
+  '--dp-tip-soft': '#eaf7f2',
+  '--dp-attention': '#9a6400',
+  '--dp-attention-soft': '#fdf4e3',
+  '--dp-danger': '#b42318',
+  '--dp-danger-soft': '#fdf0ef',
   '--dp-shadow': 'rgba(20, 24, 34, 0.12)',
   '--dp-radius': '6px',
   '--dp-font': 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',

package/src/tailwind-provider.js

@@ -30,6 +30,13 @@ const TAILWIND_TOKENS = Object.freeze({
   '--dp-rule': 'oklch(92.9% 0.013 255.508)',
   '--dp-accent': 'oklch(51.1% 0.262 276.966)',
   '--dp-accent-soft': 'oklch(96.2% 0.018 272.314)',
+  // Meaning, not decoration: a tip, a caution and a danger.
+  '--dp-tip': 'oklch(50.8% 0.118 165.612)',
+  '--dp-tip-soft': 'oklch(97.9% 0.021 166.113)',
+  '--dp-attention': 'oklch(55.5% 0.123 66.442)',
+  '--dp-attention-soft': 'oklch(98% 0.016 73.684)',
+  '--dp-danger': 'oklch(50.5% 0.213 27.518)',
+  '--dp-danger-soft': 'oklch(97.1% 0.013 17.38)',
   '--dp-shadow': 'rgba(15, 23, 42, 0.12)',
   '--dp-radius': '0.375rem',
   '--dp-font': 'var(--font-sans, ui-sans-serif, system-ui, sans-serif)',
@@ -49,9 +56,14 @@ const TAILWIND_TOKENS = Object.freeze({
 const TAILWIND_CLASSES = Object.freeze({
   header:
     'dp-header border-b border-slate-200 bg-white/90 backdrop-blur dark:border-slate-800 dark:bg-slate-950/90',
+  // The same dress, without what holds it to the top of the screen.
+  headerStatic:
+    'dp-header dp-header--static border-b border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950',
   brand: 'dp-brand font-semibold tracking-tight text-slate-900 no-underline dark:text-slate-100',
   versionsList:
     'dp-versions-list rounded-md border border-slate-200 bg-white p-1 shadow-lg dark:border-slate-800 dark:bg-slate-900',
+  languagesList:
+    'dp-languages-list rounded-md border border-slate-200 bg-white p-1 shadow-lg dark:border-slate-800 dark:bg-slate-900',
   sidebar: 'dp-sidebar text-sm',
   navLink:
     'dp-nav-link block rounded px-2 py-1 no-underline text-slate-600 hover:bg-slate-100 hover:text-slate-900 aria-[current=page]:bg-indigo-50 aria-[current=page]:font-medium aria-[current=page]:text-indigo-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100 dark:aria-[current=page]:bg-slate-800 dark:aria-[current=page]:text-indigo-300',

package/styles/custom.css

@@ -30,6 +30,12 @@
     --dp-rule: #262a32;
     --dp-accent: #9b97f0;
     --dp-accent-soft: #1e1d33;
+    --dp-tip: #4cc79a;
+    --dp-tip-soft: #10241d;
+    --dp-attention: #e0a85a;
+    --dp-attention-soft: #241c10;
+    --dp-danger: #f2837a;
+    --dp-danger-soft: #2a1513;
     --dp-shadow: rgba(0, 0, 0, 0.45);
   }
 }
@@ -44,6 +50,12 @@
   --dp-rule: #262a32;
   --dp-accent: #9b97f0;
   --dp-accent-soft: #1e1d33;
+  --dp-tip: #4cc79a;
+  --dp-tip-soft: #10241d;
+  --dp-attention: #e0a85a;
+  --dp-attention-soft: #241c10;
+  --dp-danger: #f2837a;
+  --dp-danger-soft: #2a1513;
   --dp-shadow: rgba(0, 0, 0, 0.45);
 }
 
@@ -148,6 +160,35 @@ a {
   font-weight: 560;
 }
 
+/* The language switcher wears the same dress; a language this page has not
+   been translated into is dimmed rather than removed. */
+.dp-languages-list {
+  padding: 0.3rem;
+  background: var(--dp-bg);
+  border: 1px solid var(--dp-border);
+  border-radius: var(--dp-radius);
+  box-shadow: 0 8px 24px var(--dp-shadow);
+}
+.dp-languages-list a,
+.dp-languages-list span {
+  display: block;
+  padding: 0.3rem 0.55rem;
+  border-radius: 4px;
+  font-size: 0.86rem;
+  color: var(--dp-text);
+  text-decoration: none;
+}
+.dp-languages-list a:hover {
+  background: var(--dp-bg-soft);
+}
+.dp-languages-list a[aria-current] {
+  color: var(--dp-accent);
+  font-weight: 560;
+}
+.dp-languages-list span {
+  color: var(--dp-text-soft);
+}
+
 /* --- Side columns -------------------------------------------------------- */
 
 .dp-sidebar,

package/styles/prose.css

@@ -161,6 +161,31 @@
   color: var(--dp-text);
 }
 
+/* A folded category of the menu, and the menu of a narrow screen. */
+.dp-nav-summary {
+  display: block;
+  padding: 0.25rem 0.5rem;
+  color: var(--dp-text-soft);
+  font-weight: 600;
+}
+
+.dp-nav-summary:hover {
+  color: var(--dp-text);
+}
+
+.dp-sidebar-menu > summary {
+  border: 1px solid var(--dp-border);
+  border-radius: var(--dp-radius);
+  color: var(--dp-text-soft);
+  font-weight: 500;
+}
+
+.dp-sidebar-menu[open] > summary,
+.dp-sidebar-menu > summary:hover {
+  border-color: var(--dp-text-soft);
+  color: var(--dp-text);
+}
+
 /* The links of the header, and the menu that holds them on a narrow screen. */
 .dp-header-links a {
   color: var(--dp-text-soft);
@@ -172,6 +197,49 @@
   color: var(--dp-text);
 }
 
+.dp-mega > summary {
+  color: var(--dp-text-soft);
+  font-weight: 500;
+}
+
+.dp-mega > summary:hover,
+.dp-mega[open] > summary {
+  color: var(--dp-text);
+}
+
+.dp-mega-panel {
+  border: 1px solid var(--dp-border);
+  border-radius: var(--dp-radius);
+  background: var(--dp-bg);
+  box-shadow: 0 8px 24px var(--dp-shadow);
+}
+
+.dp-mega-title {
+  color: var(--dp-text-soft);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.dp-mega-panel a {
+  color: var(--dp-text);
+  text-decoration: none;
+}
+
+.dp-mega-panel a:hover {
+  color: var(--dp-accent);
+}
+
+/* Inside the menu of a narrow screen, the panel is part of the list. */
+.dp-menu-panel .dp-mega-panel {
+  border: 0;
+  border-inline-start: 1px solid var(--dp-border);
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
 .dp-menu > summary {
   border: 1px solid var(--dp-border);
   border-radius: var(--dp-radius);

package/styles/structure.css

@@ -22,6 +22,14 @@ html {
   scroll-padding-top: 4.5rem;
 }
 
+/*
+ * Nothing covers the top of the page once the header scrolls away: kept, the
+ * padding would leave a blank band above every heading reached by a link.
+ */
+html:has(.dp-header--static) {
+  scroll-padding-top: 0;
+}
+
 body {
   margin: 0;
 }
@@ -139,6 +147,15 @@ body {
   padding: 0 1.5rem;
 }
 
+/*
+ * Scrolls away with the page, giving its height back to the text. Written
+ * after the rule above, which it undoes: the element carries both classes,
+ * and of two rules of equal weight the last one wins.
+ */
+.dp-header--static {
+  position: static;
+}
+
 /* The version switcher is a <details>: it opens without JavaScript. */
 .dp-versions {
   position: relative;
@@ -160,6 +177,32 @@ body {
   list-style: none;
 }
 
+/* The language switcher works exactly like it, and is narrower: it holds
+   codes, not version numbers. */
+.dp-languages {
+  position: relative;
+}
+.dp-languages > summary {
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+.dp-languages > summary::-webkit-details-marker {
+  display: none;
+}
+.dp-languages-list {
+  position: absolute;
+  top: calc(100% + 0.4rem);
+  left: 0;
+  min-width: 5rem;
+  margin: 0;
+  list-style: none;
+}
+/* A language this page was never translated into: shown, never offered. */
+.dp-languages-list [aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
 /*
  * What the header offers beyond the brand — versions, links, search — is
  * written twice, and shown once: in a row on a wide screen, behind a menu
@@ -185,6 +228,59 @@ body {
   margin-inline-start: 0;
 }
 
+/*
+ * A header entry that opens a panel of links instead of leading anywhere.
+ * Its look is in prose.css.
+ */
+.dp-mega {
+  position: relative;
+}
+
+.dp-mega > summary {
+  cursor: pointer;
+  list-style: none;
+}
+
+.dp-mega > summary::-webkit-details-marker {
+  display: none;
+}
+
+.dp-mega-panel {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  gap: 1.25rem;
+  min-inline-size: 22rem;
+  padding: 1.1rem 1.25rem;
+}
+
+.dp-mega-panel ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dp-mega-title {
+  margin: 0 0 0.5rem;
+}
+
+/*
+ * Inside the menu of a narrow screen, the panel unfolds in place: laid over
+ * it, it would open outside the screen.
+ */
+.dp-menu-panel .dp-mega-panel {
+  position: static;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.75rem;
+  min-inline-size: 0;
+  padding: 0.5rem 0 0 0.75rem;
+}
+
 .dp-menu {
   display: none;
   position: relative;
@@ -310,6 +406,59 @@ body {
   font-weight: 600;
 }
 
+/*
+ * A folded category: a native details, whose handle carries the marker. Its
+ * look is in prose.css.
+ */
+.dp-nav-group > summary {
+  cursor: pointer;
+  list-style: none;
+}
+
+.dp-nav-group > summary::-webkit-details-marker {
+  display: none;
+}
+
+/* The marker turns with the fold, and never takes the focus on its own. */
+.dp-nav-group > summary::after {
+  content: '';
+  display: inline-block;
+  inline-size: 0.35rem;
+  block-size: 0.35rem;
+  margin-inline-start: 0.4rem;
+  border-inline-end: 1px solid currentColor;
+  border-block-end: 1px solid currentColor;
+  rotate: -45deg;
+  translate: 0 -0.1rem;
+}
+
+.dp-nav-group[open] > summary::after {
+  rotate: 45deg;
+  translate: 0 -0.15rem;
+}
+
+/*
+ * The menu of a narrow screen: folded above the content, where the column
+ * cannot stand. Shown instead of the column, never beside it.
+ */
+.dp-sidebar-menu {
+  display: none;
+  margin-block-end: 1.5rem;
+}
+
+.dp-sidebar-menu > summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 0.9rem;
+  cursor: pointer;
+  list-style: none;
+}
+
+.dp-sidebar-menu > summary::-webkit-details-marker {
+  display: none;
+}
+
 .dp-sidebar,
 .dp-toc {
   position: sticky;
@@ -398,13 +547,15 @@ body {
     padding: 1.5rem 25px 4rem;
   }
   /*
-   * On a small screen the menu moves above the content and stops being
-   * sticky: a fixed column would eat half of the useful surface.
+   * On a small screen the column gives way to the folded menu above the
+   * content: open, it would eat the first screen before a word is read.
    */
   .dp-sidebar {
-    position: static;
-    max-height: none;
-    padding-bottom: 1.25rem;
+    display: none;
+  }
+
+  .dp-sidebar-menu {
+    display: block;
   }
 }
 

package/styles/tailwind-bridge.css

@@ -28,6 +28,12 @@
     --dp-rule: oklch(27.9% 0.041 260.031);
     --dp-accent: oklch(78.5% 0.115 274.713);
     --dp-accent-soft: oklch(20.8% 0.042 265.755);
+    --dp-tip: oklch(76.5% 0.177 163.223);
+    --dp-tip-soft: oklch(26.2% 0.051 172.552);
+    --dp-attention: oklch(82.8% 0.189 84.429);
+    --dp-attention-soft: oklch(27.9% 0.077 45.635);
+    --dp-danger: oklch(70.4% 0.191 22.216);
+    --dp-danger-soft: oklch(25.8% 0.092 26.042);
     --dp-shadow: rgba(0, 0, 0, 0.45);
   }
 }
@@ -42,6 +48,12 @@
   --dp-rule: oklch(27.9% 0.041 260.031);
   --dp-accent: oklch(78.5% 0.115 274.713);
   --dp-accent-soft: oklch(20.8% 0.042 265.755);
+  --dp-tip: oklch(76.5% 0.177 163.223);
+  --dp-tip-soft: oklch(26.2% 0.051 172.552);
+  --dp-attention: oklch(82.8% 0.189 84.429);
+  --dp-attention-soft: oklch(27.9% 0.077 45.635);
+  --dp-danger: oklch(70.4% 0.191 22.216);
+  --dp-danger-soft: oklch(25.8% 0.092 26.042);
   --dp-shadow: rgba(0, 0, 0, 0.45);
 }
 

package/types/custom-provider.d.ts

@@ -19,6 +19,12 @@ export declare const DEFAULT_TOKENS: Readonly<{
     '--dp-rule': "#e8ebef";
     '--dp-accent': "#5b57d1";
     '--dp-accent-soft': "#f0effc";
+    '--dp-tip': "#0f7a5a";
+    '--dp-tip-soft': "#eaf7f2";
+    '--dp-attention': "#9a6400";
+    '--dp-attention-soft': "#fdf4e3";
+    '--dp-danger': "#b42318";
+    '--dp-danger-soft': "#fdf0ef";
     '--dp-shadow': "rgba(20, 24, 34, 0.12)";
     '--dp-radius': "6px";
     '--dp-font': "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
@@ -38,6 +44,12 @@ export declare class CustomProvider extends BaseThemeProvider {
         '--dp-rule': "#e8ebef";
         '--dp-accent': "#5b57d1";
         '--dp-accent-soft': "#f0effc";
+        '--dp-tip': "#0f7a5a";
+        '--dp-tip-soft': "#eaf7f2";
+        '--dp-attention': "#9a6400";
+        '--dp-attention-soft': "#fdf4e3";
+        '--dp-danger': "#b42318";
+        '--dp-danger-soft': "#fdf0ef";
         '--dp-shadow': "rgba(20, 24, 34, 0.12)";
         '--dp-radius': "6px";
         '--dp-font': "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";

package/types/tailwind-provider.d.ts

@@ -16,6 +16,12 @@ export declare class TailwindProvider extends BaseThemeProvider {
         '--dp-rule': "oklch(92.9% 0.013 255.508)";
         '--dp-accent': "oklch(51.1% 0.262 276.966)";
         '--dp-accent-soft': "oklch(96.2% 0.018 272.314)";
+        '--dp-tip': "oklch(50.8% 0.118 165.612)";
+        '--dp-tip-soft': "oklch(97.9% 0.021 166.113)";
+        '--dp-attention': "oklch(55.5% 0.123 66.442)";
+        '--dp-attention-soft': "oklch(98% 0.016 73.684)";
+        '--dp-danger': "oklch(50.5% 0.213 27.518)";
+        '--dp-danger-soft': "oklch(97.1% 0.013 17.38)";
         '--dp-shadow': "rgba(15, 23, 42, 0.12)";
         '--dp-radius': "0.375rem";
         '--dp-font': "var(--font-sans, ui-sans-serif, system-ui, sans-serif)";