@docpensieve/theme 0.4.0-beta.2 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docpensieve/theme",
-  "version": "0.4.0-beta.2",
+  "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.2",
+    "@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/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

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)";