@publier/shell 4.4.0 → 4.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1 @@
1
+ const e=[`almond`,`aspen`,`catppuccin`,`dark`,`dusk`,`emerald`,`enterprise`,`light`,`maple`,`neutral`,`ocean`,`purple`,`ruby`,`solar`,`vitepress`];function t(){return e}function n(t){return e.includes(t)}export{n,t as r,e as t};
@@ -6,7 +6,7 @@
6
6
  * Node-side introspection (reading CSS files, computing contrast) lives in
7
7
  * `./loader.ts` to keep `node:fs` out of the browser bundle path.
8
8
  */
9
- declare const AVAILABLE_THEMES: readonly ['almond', 'aspen', 'catppuccin', 'dark', 'dusk', 'emerald', 'light', 'maple', 'neutral', 'ocean', 'purple', 'ruby', 'solar', 'vitepress'];
9
+ declare const AVAILABLE_THEMES: readonly ['almond', 'aspen', 'catppuccin', 'dark', 'dusk', 'emerald', 'enterprise', 'light', 'maple', 'neutral', 'ocean', 'purple', 'ruby', 'solar', 'vitepress'];
10
10
  type ThemePreset = (typeof AVAILABLE_THEMES)[number];
11
11
  /** Return a read-only copy of the built-in preset list. */
12
12
  declare function listPresets(): readonly ThemePreset[];
@@ -1,4 +1,4 @@
1
- import { i as listPresets, n as ThemePreset, r as isValidPreset, t as AVAILABLE_THEMES } from "../presets-BpOSAh0T.mjs";
1
+ import { i as listPresets, n as ThemePreset, r as isValidPreset, t as AVAILABLE_THEMES } from "../presets-DHzqBvCI.mjs";
2
2
  //#region src/tailwind/index.d.ts
3
3
  declare const PRESET_CSS_PATH: '@publier/shell/tailwind/preset.css';
4
4
  //#endregion
@@ -1 +1 @@
1
- import{n as e,r as t,t as n}from"../presets-BSnEdPYj.mjs";const r=`@publier/shell/tailwind/preset.css`;export{n as AVAILABLE_THEMES,r as PRESET_CSS_PATH,e as isValidPreset,t as listPresets};
1
+ import{n as e,r as t,t as n}from"../presets-CYFX0GLA.mjs";const r=`@publier/shell/tailwind/preset.css`;export{n as AVAILABLE_THEMES,r as PRESET_CSS_PATH,e as isValidPreset,t as listPresets};
@@ -1,4 +1,4 @@
1
- import { i as listPresets, n as ThemePreset, r as isValidPreset, t as AVAILABLE_THEMES } from "../presets-BpOSAh0T.mjs";
1
+ import { i as listPresets, n as ThemePreset, r as isValidPreset, t as AVAILABLE_THEMES } from "../presets-DHzqBvCI.mjs";
2
2
  //#region src/tailwind/override.d.ts
3
3
  /** Shape of a parsed `theme.yaml`. Fields match `content-spec/theme.schema.json`. */
4
4
  interface ThemeYaml {
@@ -1,2 +1,2 @@
1
- import{n as e,r as t,t as n}from"../presets-BSnEdPYj.mjs";import{tailwindComposeThemeCss as r,tailwindReadPresetCss as i,tailwindResolveTheme as a}from"@publier/native";import{fileURLToPath as o}from"node:url";const s=[`colors`,`typography`,`layout`,`prose`,`code`],c={colors:[`primary`,`primary-content`,`secondary`,`secondary-content`,`accent`,`accent-content`,`neutral`,`neutral-content`,`base-100`,`base-200`,`base-300`,`base-content`,`info`,`info-content`,`success`,`success-content`,`warning`,`warning-content`,`error`,`error-content`],typography:[`heading`,`body`,`mono`],layout:[`nav-height`,`sidebar-width`,`toc-width`,`page-max-width`],prose:[`content-gap-y`,`line-height`,`heading-line-height`],code:[`block-radius`,`inline-radius`,`inline-padding-y`,`inline-padding-x`]};function l(e){if(!e||typeof e!=`object`||Array.isArray(e))return{preset:void 0,overrides:{},overrideCss:``,errors:[]};let t=a(JSON.stringify(e));return{preset:t.preset??void 0,overrides:t.overrides,overrideCss:t.overrideCss,errors:t.errors.map(e=>({code:e.code,message:e.message,path:e.path}))}}function u(e){let t=Object.keys(e).sort();return t.length===0?``:`:root[data-theme="light"], :root[data-theme="dark"] {\n${t.map(t=>`\t${t}: ${e[t]};`).join(`
1
+ import{n as e,r as t,t as n}from"../presets-CYFX0GLA.mjs";import{tailwindComposeThemeCss as r,tailwindReadPresetCss as i,tailwindResolveTheme as a}from"@publier/native";import{fileURLToPath as o}from"node:url";const s=[`colors`,`typography`,`layout`,`prose`,`code`],c={colors:[`primary`,`primary-content`,`secondary`,`secondary-content`,`accent`,`accent-content`,`neutral`,`neutral-content`,`base-100`,`base-200`,`base-300`,`base-content`,`info`,`info-content`,`success`,`success-content`,`warning`,`warning-content`,`error`,`error-content`],typography:[`heading`,`body`,`mono`],layout:[`nav-height`,`sidebar-width`,`toc-width`,`page-max-width`],prose:[`content-gap-y`,`line-height`,`heading-line-height`],code:[`block-radius`,`inline-radius`,`inline-padding-y`,`inline-padding-x`]};function l(e){if(!e||typeof e!=`object`||Array.isArray(e))return{preset:void 0,overrides:{},overrideCss:``,errors:[]};let t=a(JSON.stringify(e));return{preset:t.preset??void 0,overrides:t.overrides,overrideCss:t.overrideCss,errors:t.errors.map(e=>({code:e.code,message:e.message,path:e.path}))}}function u(e){let t=Object.keys(e).sort();return t.length===0?``:`:root[data-theme="light"], :root[data-theme="dark"] {\n${t.map(t=>`\t${t}: ${e[t]};`).join(`
2
2
  `)}\n}\n`}function d(e,t){let n=l(e),r=t.defaultPreset;return n.preset!==void 0&&(t.isValidPreset(n.preset)?r=n.preset:n.errors.push({code:`unknown-preset`,message:`Unknown preset "${n.preset}". Theme will fall back to "${t.defaultPreset}".`,path:`preset`})),{...n,preset:r}}function f(e,t){return r(e,t)}const p=o(new URL(`./themes/`,import.meta.url));function m(e){return`${p}${e}.css`}async function h(e){return i(p,e)}export{n as AVAILABLE_THEMES,c as THEME_KEYS,s as THEME_SECTIONS,f as composeThemeCss,e as isValidPreset,t as listPresets,h as loadPresetCss,m as presetPath,u as renderOverrideCss,l as resolveTheme,d as resolveThemeWithPreset};
@@ -0,0 +1,129 @@
1
+ :root, [data-theme="light"] {
2
+ color-scheme: light;
3
+
4
+ --color-base-100: oklch(100% 0 0);
5
+ --color-base-200: oklch(98.51% 0 0);
6
+ --color-base-300: oklch(92.19% 0 0);
7
+ --color-base-content: oklch(20.46% 0 0);
8
+ --color-primary: oklch(37.15% 0 0);
9
+ --color-primary-content: oklch(98.51% 0 0);
10
+ --color-accent: oklch(55.55% 0 0);
11
+ --color-accent-content: oklch(98.51% 0 0);
12
+ --color-success: oklch(72.27% 0.192 149.58);
13
+ --color-error: oklch(57.71% 0.215 27.33);
14
+ --color-error-content: oklch(100.00% 0 0);
15
+
16
+ --radius-selector: 0;
17
+ --radius-field: 0;
18
+ --radius-box: 0;
19
+ --border: 1px;
20
+ --depth: 0;
21
+ --noise: 0;
22
+ }
23
+
24
+ [data-theme="dark"] {
25
+ color-scheme: dark;
26
+
27
+ --color-base-100: oklch(20.46% 0 0);
28
+ --color-base-200: oklch(25.2% 0 0);
29
+ --color-base-300: oklch(31.2% 0 0);
30
+ --color-base-content: oklch(92.19% 0 0);
31
+ --color-primary: oklch(76.5% 0 0);
32
+ --color-primary-content: oklch(20.46% 0 0);
33
+ --color-accent: oklch(70.8% 0 0);
34
+ --color-accent-content: oklch(20.46% 0 0);
35
+ --color-success: oklch(72.27% 0.192 149.58);
36
+ --color-error: oklch(57.71% 0.215 27.33);
37
+ --color-error-content: oklch(100.00% 0 0);
38
+
39
+ --radius-selector: 0;
40
+ --radius-field: 0;
41
+ --radius-box: 0;
42
+ --border: 1px;
43
+ --depth: 0;
44
+ --noise: 0;
45
+ }
46
+
47
+ @media (prefers-color-scheme: dark) {
48
+ :root:not([data-theme]) {
49
+ color-scheme: dark;
50
+
51
+ --color-base-100: oklch(20.46% 0 0);
52
+ --color-base-200: oklch(25.2% 0 0);
53
+ --color-base-300: oklch(31.2% 0 0);
54
+ --color-base-content: oklch(92.19% 0 0);
55
+ --color-primary: oklch(76.5% 0 0);
56
+ --color-primary-content: oklch(20.46% 0 0);
57
+ --color-accent: oklch(70.8% 0 0);
58
+ --color-accent-content: oklch(20.46% 0 0);
59
+ --color-success: oklch(72.27% 0.192 149.58);
60
+ --color-error: oklch(57.71% 0.215 27.33);
61
+ --color-error-content: oklch(100.00% 0 0);
62
+
63
+ --radius-selector: 0;
64
+ --radius-field: 0;
65
+ --radius-box: 0;
66
+ --border: 1px;
67
+ --depth: 0;
68
+ --noise: 0;
69
+ }
70
+ }
71
+
72
+ :root {
73
+ --publier-nav-height: 4rem;
74
+ --publier-sidebar-width: 18rem;
75
+ --publier-toc-width: 14rem;
76
+ --publier-page-max-width: 52rem;
77
+ --publier-layout-width: 1400px;
78
+ --publier-font-weight-heading: 600;
79
+ --publier-nav-item-radius: 0;
80
+ --publier-control-radius: 0;
81
+ --publier-surface-radius: 0;
82
+ --publier-card-radius: 0;
83
+ --publier-code-block-radius: 0;
84
+ --publier-code-inline-radius: 0;
85
+ --publier-header-hover-bg: transparent;
86
+ --publier-header-hover-opacity: 0.68;
87
+ --publier-header-active-bg: transparent;
88
+ }
89
+
90
+ :root,
91
+ :root[data-theme="light"] {
92
+
93
+ --color-pl-muted: oklch(42% 0 0);
94
+ --color-pl-muted-bg: oklch(95% 0 0);
95
+ --color-pl-subtle: oklch(55% 0 0);
96
+ --color-pl-card: oklch(99.5% 0 0);
97
+ --color-pl-card-hover: oklch(97% 0 0);
98
+ --color-pl-popover: oklch(99.5% 0 0);
99
+ --color-pl-border: oklch(90% 0 0);
100
+ --color-pl-border-strong: oklch(82% 0 0);
101
+ --color-pl-sidebar-accent: oklch(95% 0 0);
102
+ --color-pl-sidebar-active: color-mix(in oklch, var(--color-primary) 10%, transparent);
103
+ --color-pl-sidebar-active-fg: var(--color-primary);
104
+
105
+ --menu-active-bg: var(--color-pl-sidebar-active);
106
+ --menu-active-color: var(--color-pl-sidebar-active-fg);
107
+ --menu-hover-bg: var(--color-pl-sidebar-accent);
108
+ --menu-hover-color: var(--color-pl-sidebar-accent-fg);
109
+ }
110
+
111
+ :root[data-theme="dark"],
112
+ .dark {
113
+ --color-pl-muted: oklch(72% 0 0);
114
+ --color-pl-muted-bg: oklch(22.5% 0 0);
115
+ --color-pl-subtle: oklch(65% 0 0);
116
+ --color-pl-card: oklch(20.5% 0 0);
117
+ --color-pl-card-hover: oklch(26% 0 0);
118
+ --color-pl-popover: oklch(20.5% 0 0);
119
+ --color-pl-border: oklch(28% 0 0);
120
+ --color-pl-border-strong: oklch(36% 0 0);
121
+ --color-pl-sidebar-accent: oklch(26% 0 0);
122
+ --color-pl-sidebar-active: color-mix(in oklch, var(--color-primary) 14%, transparent);
123
+ --color-pl-sidebar-active-fg: var(--color-primary);
124
+
125
+ --menu-active-bg: var(--color-pl-sidebar-active);
126
+ --menu-active-color: var(--color-pl-sidebar-active-fg);
127
+ --menu-hover-bg: var(--color-pl-sidebar-accent);
128
+ --menu-hover-color: var(--color-pl-sidebar-accent-fg);
129
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@publier/shell",
3
- "version": "4.4.0",
3
+ "version": "4.5.0",
4
4
  "license": "UNLICENSED",
5
5
  "description": "Qwik + Astro docs layout for Publier sites.",
6
6
  "type": "module",
@@ -119,7 +119,7 @@
119
119
  "@github/details-menu-element": "^1.0.13",
120
120
  "@github/relative-time-element": "^5.3.1",
121
121
  "@github/tab-container-element": "^4.9.0",
122
- "@publier/native": "7.0.0",
122
+ "@publier/native": "7.0.1",
123
123
  "@tailwindcss/typography": "^0.5.20",
124
124
  "astro-pagefind": "^2.0.1",
125
125
  "daisyui": "^5.7.22",
@@ -20,7 +20,7 @@
20
20
  margin: 1rem 0;
21
21
  padding: 1rem;
22
22
  background: var(--color-base-100);
23
- border-radius: 0.5rem;
23
+ border-radius: var(--publier-surface-radius, 0.5rem);
24
24
  }
25
25
 
26
26
  .katex {
@@ -155,14 +155,55 @@ h6 {
155
155
  /* Group state derives from the active child; descriptions retain normal
156
156
  * foreground contrast. Mobile links use the same semantic active signal. */
157
157
  [data-publier-top-nav] a.btn-ghost[aria-current="page"],
158
+ [data-publier-top-nav] details[data-publier-nav-group]:has(a[aria-current="page"]) > summary {
159
+ color: var(--color-primary);
160
+ background-color: var(
161
+ --publier-header-active-bg,
162
+ color-mix(in oklab, var(--color-primary) 12%, transparent)
163
+ );
164
+ }
158
165
  [data-publier-nav-menu] a[aria-current="page"],
159
- [data-publier-top-nav] details[data-publier-nav-group]:has(a[aria-current="page"]) > summary,
160
166
  [data-publier-nav-mobile] details[data-publier-nav-group]:has(a[aria-current="page"]) > summary,
161
167
  [data-publier-nav-dialog] a[aria-current="page"] {
162
168
  color: var(--color-primary);
163
169
  background-color: color-mix(in oklab, var(--color-primary) 12%, transparent);
164
170
  }
165
171
 
172
+ /* Header links remain DaisyUI buttons for keyboard focus. Override its hover
173
+ * variables at the component so a ghost control never acquires a button border.
174
+ * Presets decide whether hover/active feedback uses a surface or text alone. */
175
+ [data-publier-top-nav] a.btn-ghost,
176
+ [data-publier-top-nav] details[data-publier-nav-group] > summary {
177
+ --btn-border: transparent;
178
+ border-color: transparent;
179
+ box-shadow: none;
180
+ border-radius: var(--radius-field);
181
+ translate: none;
182
+ scale: none;
183
+ }
184
+ @media (hover: hover) {
185
+ [data-publier-top-nav] a.btn-ghost:hover,
186
+ [data-publier-top-nav] details[data-publier-nav-group] > summary:hover {
187
+ --btn-bg: var(--publier-header-hover-bg, var(--color-pl-muted-bg));
188
+ --btn-fg: var(
189
+ --publier-header-hover-color,
190
+ color-mix(
191
+ in oklab,
192
+ var(--color-base-content) calc(var(--publier-header-hover-opacity, 1) * 100%),
193
+ var(--color-base-100)
194
+ )
195
+ );
196
+ background-color: var(--btn-bg);
197
+ color: var(--btn-fg);
198
+ }
199
+ }
200
+ [data-publier-top-nav] .navbar-start > a {
201
+ border-radius: var(--radius-field);
202
+ }
203
+ [data-publier-sidebar] .menu :is(a, summary) {
204
+ border-radius: var(--publier-nav-item-radius, 0.375rem);
205
+ }
206
+
166
207
  /* daisyUI defines active colors on each menu, shadowing root theme variables.
167
208
  * Bind the sidebar tokens at the component so both sidebar surfaces and folder
168
209
  * indexes retain their theme's selected foreground and background. */
@@ -202,7 +243,7 @@ h6 {
202
243
  text-decoration: none;
203
244
  color: var(--color-primary-content);
204
245
  background-color: var(--color-primary);
205
- border-radius: 0.375rem;
246
+ border-radius: var(--publier-control-radius, 0.375rem);
206
247
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
207
248
  }
208
249
 
@@ -226,7 +267,7 @@ publier-theme-toggle {
226
267
  width: 2.25rem;
227
268
  height: 2.25rem;
228
269
  padding: 0.375rem;
229
- border-radius: 0.375rem;
270
+ border-radius: var(--publier-control-radius, 0.375rem);
230
271
  color: var(--color-base-content);
231
272
  background-color: transparent;
232
273
  border: none;
@@ -350,7 +391,7 @@ html[data-banner-dismissed="true"] [data-publier-banner] {
350
391
  width: 100%;
351
392
  padding: 0.375rem 0.625rem;
352
393
  border: 1px solid var(--color-base-300);
353
- border-radius: 0.375rem;
394
+ border-radius: var(--publier-control-radius, 0.375rem);
354
395
  background-color: var(--color-base-200);
355
396
  color: var(--color-base-content);
356
397
  font-size: 0.875rem;
@@ -401,7 +442,7 @@ html[data-banner-dismissed="true"] [data-publier-banner] {
401
442
  padding: 0.25rem;
402
443
  background-color: var(--color-base-200);
403
444
  border: 1px solid var(--color-base-300);
404
- border-radius: 0.5rem;
445
+ border-radius: var(--publier-surface-radius, 0.5rem);
405
446
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
406
447
  max-height: 16rem;
407
448
  overflow-y: auto;
@@ -412,7 +453,7 @@ html[data-banner-dismissed="true"] [data-publier-banner] {
412
453
  align-items: center;
413
454
  gap: 0.5rem;
414
455
  padding: 0.375rem 0.625rem;
415
- border-radius: 0.3125rem;
456
+ border-radius: var(--publier-control-radius, 0.3125rem);
416
457
  font-size: 0.875rem;
417
458
  cursor: pointer;
418
459
  color: var(--color-base-content);
@@ -480,7 +521,7 @@ html[data-banner-dismissed="true"] [data-publier-banner] {
480
521
  gap: 0.375rem;
481
522
  padding: 0.375rem 0.75rem;
482
523
  border: 1px solid var(--color-base-300);
483
- border-radius: 0.375rem;
524
+ border-radius: var(--publier-control-radius, 0.375rem);
484
525
  background-color: var(--color-base-200);
485
526
  color: var(--color-base-content);
486
527
  font-size: 0.8125rem;
@@ -528,7 +569,7 @@ html[data-banner-dismissed="true"] [data-publier-banner] {
528
569
  padding: 0.375rem;
529
570
  background-color: var(--color-base-200);
530
571
  border: 1px solid var(--color-base-300);
531
- border-radius: 0.5rem;
572
+ border-radius: var(--publier-surface-radius, 0.5rem);
532
573
  box-shadow:
533
574
  0 4px 6px -1px rgb(0 0 0 / 0.1),
534
575
  0 2px 4px -2px rgb(0 0 0 / 0.1);
@@ -549,7 +590,7 @@ html[data-banner-dismissed="true"] [data-publier-banner] {
549
590
  font-weight: 400;
550
591
  line-height: 1.4;
551
592
  text-decoration: none;
552
- border-radius: 0.375rem;
593
+ border-radius: var(--publier-control-radius, 0.375rem);
553
594
  cursor: pointer;
554
595
  transition: background-color 100ms ease;
555
596
  }
@@ -602,7 +643,7 @@ aside.alert {
602
643
  align-items: start;
603
644
  padding: 0.625rem 0.875rem;
604
645
  gap: 0.625rem;
605
- border-radius: 0.5rem;
646
+ border-radius: var(--publier-surface-radius, 0.5rem);
606
647
  /* Match prose body text size — DaisyUI's default is 0.875rem (text-sm). */
607
648
  font-size: 1rem;
608
649
  line-height: 1.6;
@@ -784,9 +825,9 @@ body:has([data-publier-docs-header]) :is(h2, h3, h4)[id] {
784
825
  details.dropdown[data-publier-nav-group]:not([data-publier-docs-selector])
785
826
  > summary {
786
827
  transform: none;
787
- background-color: transparent;
788
- box-shadow: none;
789
- transition: color 150ms ease;
828
+ transition:
829
+ color 150ms ease,
830
+ background-color 150ms ease;
790
831
  }
791
832
  [data-publier-top-nav]:not([data-publier-docs-header])
792
833
  details.dropdown[data-publier-nav-group]:not([data-publier-docs-selector])
@@ -5,7 +5,7 @@
5
5
  * @import "@publier/tailwind/preset.css"; ← this file
6
6
  * @import "virtual:publier-theme-css"; ← resolves to one themes/<name>.css
7
7
  *
8
- * daisyUI built-in themes are disabled — Publier ships its own 14-theme set.
8
+ * daisyUI built-in themes are disabled — Publier ships its own theme set.
9
9
  * Theme files each declare two daisyUI named themes (`light` + `dark`) carrying
10
10
  * that preset's palette, so the runtime toggle writing `data-theme="light|dark"`
11
11
  * activates either variant without importing more CSS.
@@ -116,7 +116,7 @@
116
116
  /* ─── daisyUI status color fallbacks ─────────────────────
117
117
  * daisyUI v5 `alert-info/success/warning/error` read these tokens but
118
118
  * they are optional — daisyUI's built-in themes define them, Publier's
119
- * 14 custom themes do not. These defaults ensure every callout, badge,
119
+ * custom themes do not. These defaults ensure every callout, badge,
120
120
  * and alert renders with correct color on any Publier theme. Individual
121
121
  * theme files can override them per-theme if needed. */
122
122
  --color-info: oklch(55% 0.12 240);
@@ -1 +0,0 @@
1
- const e=[`almond`,`aspen`,`catppuccin`,`dark`,`dusk`,`emerald`,`light`,`maple`,`neutral`,`ocean`,`purple`,`ruby`,`solar`,`vitepress`];function t(){return e}function n(t){return e.includes(t)}export{n,t as r,e as t};