@docpensieve/theme 0.2.0-beta.1 → 0.2.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.
- package/package.json +2 -2
- package/styles/prose.css +13 -0
- package/styles/structure.css +45 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@docpensieve/theme",
|
|
3
|
-
"version": "0.2.0
|
|
3
|
+
"version": "0.2.0",
|
|
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.2.0
|
|
23
|
+
"@docpensieve/shared": "0.2.0",
|
|
24
24
|
"tailwindcss": "^4.3.3"
|
|
25
25
|
},
|
|
26
26
|
"keywords": [
|
package/styles/prose.css
CHANGED
|
@@ -147,3 +147,16 @@
|
|
|
147
147
|
background: var(--dp-accent-soft);
|
|
148
148
|
color: inherit;
|
|
149
149
|
}
|
|
150
|
+
|
|
151
|
+
/* The light / dark switch of the header. */
|
|
152
|
+
.dp-scheme-toggle {
|
|
153
|
+
border: 1px solid var(--dp-border);
|
|
154
|
+
border-radius: var(--dp-radius);
|
|
155
|
+
background: transparent;
|
|
156
|
+
color: var(--dp-text-soft);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.dp-scheme-toggle:hover {
|
|
160
|
+
border-color: var(--dp-text-soft);
|
|
161
|
+
color: var(--dp-text);
|
|
162
|
+
}
|
package/styles/structure.css
CHANGED
|
@@ -83,6 +83,51 @@ body {
|
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
+
/* The light / dark switch: at the end of the header, one icon at a time —
|
|
87
|
+
the moon to go dark, the sun to go light. Its look is in prose.css. */
|
|
88
|
+
.dp-scheme-toggle {
|
|
89
|
+
display: inline-flex;
|
|
90
|
+
align-items: center;
|
|
91
|
+
justify-content: center;
|
|
92
|
+
inline-size: 2rem;
|
|
93
|
+
block-size: 2rem;
|
|
94
|
+
padding: 0;
|
|
95
|
+
margin-inline-start: auto;
|
|
96
|
+
cursor: pointer;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.dp-search + .dp-scheme-toggle {
|
|
100
|
+
margin-inline-start: 0;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.dp-scheme-toggle[hidden] {
|
|
104
|
+
display: none;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.dp-scheme-toggle svg {
|
|
108
|
+
inline-size: 1.1rem;
|
|
109
|
+
block-size: 1.1rem;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.dp-scheme-toggle .dp-scheme-sun,
|
|
113
|
+
:root.dark .dp-scheme-toggle .dp-scheme-moon {
|
|
114
|
+
display: none;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
:root.dark .dp-scheme-toggle .dp-scheme-sun {
|
|
118
|
+
display: block;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
@media (prefers-color-scheme: dark) {
|
|
122
|
+
:root:not(.light) .dp-scheme-toggle .dp-scheme-sun {
|
|
123
|
+
display: block;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
:root:not(.light) .dp-scheme-toggle .dp-scheme-moon {
|
|
127
|
+
display: none;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
86
131
|
.dp-header {
|
|
87
132
|
position: sticky;
|
|
88
133
|
top: 0;
|