@docpensieve/theme 0.1.4 → 0.2.0-beta.1

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.
Files changed (7) hide show
  1. package/README.md +4 -0
  2. package/package.json +3 -3
  3. package/src/tailwind-provider.js +21 -1
  4. package/styles/custom.css +10 -0
  5. package/styles/prose.css +40 -0
  6. package/styles/structure.css +42 -0
  7. package/styles/tailwind-bridge.css +14 -3
package/README.md CHANGED
@@ -1,3 +1,7 @@
1
+ <p align="center">
2
+ <img src="https://raw.githubusercontent.com/Juniors017/docpensieve/main/branding/logo.jpg" alt="DocPensieve — Documentation &amp; Magical Memory" width="180">
3
+ </p>
4
+
1
5
  # @docpensieve/theme
2
6
 
3
7
  > Composable themes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@docpensieve/theme",
3
- "version": "0.1.4",
3
+ "version": "0.2.0-beta.1",
4
4
  "description": "DocPensieve theme system: composable providers (Tailwind, custom)",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -20,7 +20,7 @@
20
20
  "types"
21
21
  ],
22
22
  "dependencies": {
23
- "@docpensieve/shared": "0.1.4",
23
+ "@docpensieve/shared": "0.2.0-beta.1",
24
24
  "tailwindcss": "^4.3.3"
25
25
  },
26
26
  "keywords": [
@@ -35,7 +35,7 @@
35
35
  "url": "git+https://github.com/Juniors017/docpensieve.git",
36
36
  "directory": "packages/theme"
37
37
  },
38
- "homepage": "https://github.com/Juniors017/docpensieve#readme",
38
+ "homepage": "https://docpensieve.com",
39
39
  "bugs": {
40
40
  "url": "https://github.com/Juniors017/docpensieve/issues"
41
41
  },
package/src/tailwind-provider.js CHANGED
@@ -67,6 +67,26 @@ const TAILWIND_CLASSES = Object.freeze({
67
67
  /** Minimal stylesheet handed to Tailwind, unless the project says otherwise. */
68
68
  const DEFAULT_SOURCE = '@import "tailwindcss";';
69
69
 
70
+ /**
71
+ * The `dark:` variant, on the same rule as the skins' tokens: the system
72
+ * preference, unless a `dark` or `light` class on <html> — which
73
+ * theme.darkMode sets — decides. Tailwind alone follows the system only: a
74
+ * site kept dark would have shown its light utilities on a dark ground.
75
+ * Appended to any entry stylesheet, `theme.source` included.
76
+ */
77
+ const DARK_VARIANT = `
78
+ @custom-variant dark {
79
+ @media (prefers-color-scheme: dark) {
80
+ &:where(:not(.light, .light *)) {
81
+ @slot;
82
+ }
83
+ }
84
+ &:where(.dark, .dark *) {
85
+ @slot;
86
+ }
87
+ }
88
+ `;
89
+
70
90
  /** Tailwind theme: on-demand compilation of the classes actually used. */
71
91
  export class TailwindProvider extends BaseThemeProvider {
72
92
  static id = 'tailwind';
@@ -130,7 +150,7 @@ export class TailwindProvider extends BaseThemeProvider {
130
150
 
131
151
  let utilities;
132
152
  try {
133
- const compiler = await compile(this.source, {
153
+ const compiler = await compile(this.source + DARK_VARIANT, {
134
154
  base: dir,
135
155
  /** @param {string} id */
136
156
  async loadStylesheet(id) {
package/styles/custom.css CHANGED
@@ -21,6 +21,7 @@
21
21
  */
22
22
  @media (prefers-color-scheme: dark) {
23
23
  :root:not(.light) {
24
+ color-scheme: dark;
24
25
  --dp-bg: #0f1115;
25
26
  --dp-bg-soft: #171a21;
26
27
  --dp-text: #e8eaed;
@@ -34,6 +35,7 @@
34
35
  }
35
36
 
36
37
  :root.dark {
38
+ color-scheme: dark;
37
39
  --dp-bg: #0f1115;
38
40
  --dp-bg-soft: #171a21;
39
41
  --dp-text: #e8eaed;
@@ -103,6 +105,9 @@ a {
103
105
  color: var(--dp-text-soft);
104
106
  }
105
107
  .dp-versions > summary::after {
108
+ /* Its size only holds on a box: inline, only one border stroke was left. */
109
+ display: inline-block;
110
+ vertical-align: middle;
106
111
  content: '';
107
112
  width: 0.4rem;
108
113
  height: 0.4rem;
@@ -278,3 +283,8 @@ a {
278
283
  border-bottom: 1px solid var(--dp-border);
279
284
  }
280
285
  }
286
+
287
+ /* A light scheme set on purpose keeps the native controls light too. */
288
+ :root.light {
289
+ color-scheme: light;
290
+ }
package/styles/prose.css CHANGED
@@ -107,3 +107,43 @@
107
107
  border: 0;
108
108
  font-size: inherit;
109
109
  }
110
+
111
+ /* Search: the field of the header, then the search page. */
112
+ .dp-search input,
113
+ .dp-search-page input {
114
+ padding: 0.35rem 0.65rem;
115
+ border: 1px solid var(--dp-border);
116
+ border-radius: var(--dp-radius);
117
+ background: var(--dp-bg);
118
+ color: var(--dp-text);
119
+ font: inherit;
120
+ }
121
+
122
+ .dp-search-page input {
123
+ padding: 0.55rem 0.8rem;
124
+ font-size: 1.05rem;
125
+ }
126
+
127
+ .dp-search-page label {
128
+ margin-block-end: 0.4rem;
129
+ color: var(--dp-text-soft);
130
+ }
131
+
132
+ .dp-search-status {
133
+ color: var(--dp-text-soft);
134
+ }
135
+
136
+ .dp-search-results > li {
137
+ padding-block: 0.6rem;
138
+ border-block-end: 1px solid var(--dp-border);
139
+ }
140
+
141
+ .dp-search-results p {
142
+ margin: 0.25rem 0 0;
143
+ color: var(--dp-text-soft);
144
+ }
145
+
146
+ .dp-search-results mark {
147
+ background: var(--dp-accent-soft);
148
+ color: inherit;
149
+ }
package/styles/structure.css CHANGED
@@ -41,6 +41,48 @@ body {
41
41
  text-decoration: none;
42
42
  }
43
43
 
44
+ /* The project's logo, beside its name, at the height of the header's text. */
45
+ .dp-brand {
46
+ display: inline-flex;
47
+ align-items: center;
48
+ gap: 0.5rem;
49
+ }
50
+
51
+ .dp-brand-logo {
52
+ block-size: 1.75rem;
53
+ inline-size: auto;
54
+ }
55
+
56
+ /* Search: where the field sits, and the list of the search page. Their look
57
+ is in prose.css, shared by every theme: this file decides no colour. */
58
+ .dp-search {
59
+ margin-inline-start: auto;
60
+ }
61
+
62
+ .dp-search input {
63
+ inline-size: 100%;
64
+ max-inline-size: 14rem;
65
+ }
66
+
67
+ .dp-search-page label {
68
+ display: block;
69
+ }
70
+
71
+ .dp-search-page input {
72
+ inline-size: 100%;
73
+ }
74
+
75
+ .dp-search-results {
76
+ padding-inline-start: 0;
77
+ list-style: none;
78
+ }
79
+
80
+ @media (max-width: 40rem) {
81
+ .dp-search input {
82
+ max-inline-size: 8rem;
83
+ }
84
+ }
85
+
44
86
  .dp-header {
45
87
  position: sticky;
46
88
  top: 0;
package/styles/tailwind-bridge.css CHANGED
@@ -13,12 +13,13 @@
13
13
  /* --- Dark mode ----------------------------------------------------------- */
14
14
 
15
15
  /*
16
- * Tailwind v4 varies `dark:` on the system preference. These blocks follow
17
- * the same rule for the shared tokens, with the `.light` / `.dark` escape
18
- * hatch that theme.darkMode allows.
16
+ * The system preference decides, unless a `.dark` or `.light` class on <html>
17
+ * — set by theme.darkMode — does. The provider gives Tailwind's `dark:`
18
+ * variant the same rule, so that tokens and utilities never disagree.
19
19
  */
20
20
  @media (prefers-color-scheme: dark) {
21
21
  :root:not(.light) {
22
+ color-scheme: dark;
22
23
  --dp-bg: oklch(12.9% 0.042 264.695);
23
24
  --dp-bg-soft: oklch(20.8% 0.042 265.755);
24
25
  --dp-text: oklch(96.8% 0.007 247.896);
@@ -32,6 +33,7 @@
32
33
  }
33
34
 
34
35
  :root.dark {
36
+ color-scheme: dark;
35
37
  --dp-bg: oklch(12.9% 0.042 264.695);
36
38
  --dp-bg-soft: oklch(20.8% 0.042 265.755);
37
39
  --dp-text: oklch(96.8% 0.007 247.896);
@@ -91,6 +93,10 @@ a {
91
93
  /* --- Version switcher ---------------------------------------------------- */
92
94
 
93
95
  .dp-versions > summary::after {
96
+ /* Its size only holds on a box: inline, only one border stroke was left. */
97
+ display: inline-block;
98
+ margin-inline-start: 0.35rem;
99
+ vertical-align: middle;
94
100
  content: '';
95
101
  width: 0.4rem;
96
102
  height: 0.4rem;
@@ -129,3 +135,8 @@ a {
129
135
  border-bottom: 1px solid var(--dp-border);
130
136
  }
131
137
  }
138
+
139
+ /* A light scheme set on purpose keeps the native controls light too. */
140
+ :root.light {
141
+ color-scheme: light;
142
+ }