@readme/markdown 15.0.2 → 15.1.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/components/Callout/style.scss +6 -6
- package/components/Cards/style.scss +2 -2
- package/components/Glossary/index.tsx +5 -0
- package/components/Glossary/style.scss +5 -3
- package/components/Image/style.scss +2 -2
- package/dist/main.css +2 -2
- package/dist/main.css.map +1 -1
- package/dist/main.js +103 -34
- package/dist/main.node.js +103 -34
- package/dist/main.node.js.map +1 -1
- package/dist/render-fixture.css +1 -1
- package/dist/render-fixture.css.map +1 -1
- package/dist/render-fixture.node.js +103 -34
- package/dist/render-fixture.node.js.map +1 -1
- package/package.json +1 -1
- package/styles/mixins/dark-mode.scss +13 -0
- package/styles/mixins/when-color-mode-dark.scss +48 -0
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@readme/markdown",
|
|
3
3
|
"description": "ReadMe's React-based Markdown parser",
|
|
4
4
|
"author": "Rafe Goldberg <rafe@readme.io>",
|
|
5
|
-
"version": "15.0
|
|
5
|
+
"version": "15.1.0",
|
|
6
6
|
"main": "dist/main.node.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
8
|
"browser": "dist/main.js",
|
|
@@ -7,6 +7,19 @@
|
|
|
7
7
|
April 2025
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
+
/**
|
|
11
|
+
* When nested inside a selector, this matches ANY ancestor with the attribute
|
|
12
|
+
* — not the nearest one. That's wrong once a consuming app can have two
|
|
13
|
+
* independent `data-color-mode` scopes in the same tree (e.g. readme's
|
|
14
|
+
* SuperHub admin shell sets it on `<html>` for the admin's own UI theme,
|
|
15
|
+
* while `.rm-ReadMe` independently carries the hub's own): a component
|
|
16
|
+
* nested in a light `.rm-ReadMe` can still match a dark `<html>` ancestor
|
|
17
|
+
* and render dark. None of this package's components carry `data-color-mode`
|
|
18
|
+
* on their own root, so use `when-color-mode-dark($root)` instead, passing
|
|
19
|
+
* the selector for whichever wrapper actually carries it in the consuming
|
|
20
|
+
* app — it anchors to that element specifically, so the nearest declared
|
|
21
|
+
* value always wins.
|
|
22
|
+
*/
|
|
10
23
|
@mixin dark-mode($global: false) {
|
|
11
24
|
$root: &;
|
|
12
25
|
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Dark styles keyed off `$root`'s own `data-color-mode`, not any ancestor.
|
|
3
|
+
* Unlike `dark-mode` (which matches ANY ancestor carrying the attribute —
|
|
4
|
+
* see the warning on that mixin), this only fires when `$root` itself
|
|
5
|
+
* declares the dark/system mode. None of this package's components carry
|
|
6
|
+
* `data-color-mode` on their own root, so callers must pass the selector
|
|
7
|
+
* for whichever wrapper actually carries it in their consuming app — there
|
|
8
|
+
* is no default.
|
|
9
|
+
*
|
|
10
|
+
* IMPORTANT: this package ships one precompiled `dist/main.css` — there is
|
|
11
|
+
* no build step where a consumer can supply their own value for `$root`.
|
|
12
|
+
* Whatever gets passed at each `@include` call site below is permanent for
|
|
13
|
+
* every installer of this package. Call sites currently hardcode
|
|
14
|
+
* `'.rm-ReadMe'`, readme's hub color-mode wrapper, because readme is this
|
|
15
|
+
* package's only real consumer today. If that ever changes, this becomes
|
|
16
|
+
* silently wrong (not an error — dark mode just never activates) for any
|
|
17
|
+
* consumer without that exact class in their DOM, and `$root` should be
|
|
18
|
+
* dropped in favor of each component resolving its own nearest
|
|
19
|
+
* `[data-color-mode]` ancestor at mount via `Element.closest()` and
|
|
20
|
+
* stamping it onto its own root, so the CSS can self-anchor with no
|
|
21
|
+
* hardcoded selector at all.
|
|
22
|
+
*
|
|
23
|
+
* $global: wrap the root-anchor selector in :global(), for use when this
|
|
24
|
+
* file is imported into a CSS-module context (mirrors `dark-mode`'s param).
|
|
25
|
+
*/
|
|
26
|
+
@mixin when-color-mode-dark($root, $global: false) {
|
|
27
|
+
@if $global {
|
|
28
|
+
:global(#{$root}[data-color-mode='dark']) & {
|
|
29
|
+
@content;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
:global(#{$root}[data-color-mode='system']) & {
|
|
33
|
+
@media (prefers-color-scheme: dark) {
|
|
34
|
+
@content;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
} @else {
|
|
38
|
+
#{$root}[data-color-mode='dark'] & {
|
|
39
|
+
@content;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
#{$root}[data-color-mode='system'] & {
|
|
43
|
+
@media (prefers-color-scheme: dark) {
|
|
44
|
+
@content;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|