@readme/markdown 15.9.4 → 15.10.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.
- package/components/Cards/index.tsx +6 -1
- package/components/Cards/style.scss +15 -0
- package/dist/index.d.ts +1 -1
- package/dist/lib/index.d.ts +1 -0
- package/dist/lib/mdast-util/heading-id/index.d.ts +3 -0
- package/dist/lib/mdxish.d.ts +2 -0
- package/dist/lib/mdxishHeadingIds.d.ts +4 -0
- package/dist/lib/micromark/heading-id/index.d.ts +1 -0
- package/dist/lib/micromark/heading-id/syntax.d.ts +10 -0
- package/dist/lib/micromark/mdxish-extensions.d.ts +13 -7
- package/dist/main.css +1 -1
- package/dist/main.css.map +1 -1
- package/dist/main.js +464 -195
- package/dist/main.node.js +464 -195
- package/dist/main.node.js.map +1 -1
- package/dist/processor/compile/heading.d.ts +5 -0
- package/dist/processor/transform/mdxish/heading-ids.d.ts +14 -0
- package/dist/processor/transform/mdxish/heading-slugs.d.ts +2 -1
- package/dist/processor/utils.d.ts +9 -1
- package/dist/render-fixture.css +1 -1
- package/dist/render-fixture.css.map +1 -1
- package/dist/render-fixture.node.js +471 -195
- package/dist/render-fixture.node.js.map +1 -1
- package/package.json +2 -1
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { Heading, Parents } from 'mdast';
|
|
2
|
+
import type { Info, State } from 'mdast-util-to-markdown';
|
|
3
|
+
/** Writes an explicit heading id back as ` {#id}`. A setext heading, written for a line break, can't carry one. */
|
|
4
|
+
declare const heading: (node: Heading, parent: Parents | undefined, state: State, info: Info) => string;
|
|
5
|
+
export default heading;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { Root } from 'mdast';
|
|
2
|
+
import type { Plugin } from 'unified';
|
|
3
|
+
declare module 'vfile' {
|
|
4
|
+
interface DataMap {
|
|
5
|
+
/** Heading ids set by `{#id}`, which the slug pass must not hand to another heading. */
|
|
6
|
+
explicitHeadingIds?: Set<string>;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Records every heading id set by `{#id}`, so the slug pass never gives one to another heading.
|
|
11
|
+
* Warns when two headings share an id, since links can only reach the first.
|
|
12
|
+
*/
|
|
13
|
+
declare const headingIdsTransformer: Plugin<[], Root>;
|
|
14
|
+
export default headingIdsTransformer;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { Root } from 'hast';
|
|
2
|
+
import type { VFile } from 'vfile';
|
|
2
3
|
/**
|
|
3
4
|
* Rehype plugin that constructs ids for headings
|
|
4
5
|
* Id's are used to construct slug anchor links & Table of Contents during rendering
|
|
5
6
|
* Use the text / nodes that make up the heading to generate the id
|
|
6
7
|
*/
|
|
7
|
-
declare const generateSlugForHeadings: () => (tree: Root) => Root;
|
|
8
|
+
declare const generateSlugForHeadings: () => (tree: Root, file: VFile) => Root;
|
|
8
9
|
export default generateSlugForHeadings;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Root as HastRoot } from 'hast';
|
|
2
|
-
import type { Node, Root as MdastRoot, Root } from 'mdast';
|
|
2
|
+
import type { Heading, Node, Root as MdastRoot, Root, Text } from 'mdast';
|
|
3
3
|
import type { MdxJsxFlowElement, MdxJsxTextElement, MdxjsEsm } from 'mdast-util-mdx';
|
|
4
4
|
import type { MdxJsxAttribute } from 'mdast-util-mdx-jsx';
|
|
5
5
|
import type { Point, Position } from 'unist';
|
|
@@ -59,6 +59,14 @@ export declare const getHProps: <T>(node: Node) => T;
|
|
|
59
59
|
* @returns {Array} array of hProperty keys
|
|
60
60
|
*/
|
|
61
61
|
export declare const getHPropKeys: <T>(node: Node) => string[];
|
|
62
|
+
/** Turn a non-renderable evaluation result into a text node. */
|
|
63
|
+
export declare const createTextNode: (result: unknown, position: Position | undefined) => Text;
|
|
64
|
+
/**
|
|
65
|
+
* The id a heading's trailing `{#id}` set, when it is one the `{#id}` syntax can spell.
|
|
66
|
+
*
|
|
67
|
+
* Ids may use letters, numbers, `-`, `_`, `.` and `:`; anything else, like `x y`, is dropped.
|
|
68
|
+
*/
|
|
69
|
+
export declare const explicitHeadingId: (node: Heading) => string | undefined;
|
|
62
70
|
/**
|
|
63
71
|
* Gets the attributes of an MDX element and returns them as an object of hProperties.
|
|
64
72
|
*
|
package/dist/render-fixture.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.Accordion{background:rgba(var(--color-bg-page-rgb, white), 1);border:1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));border-radius:5px}.Accordion-title{align-items:center;background:rgba(var(--color-bg-page-rgb, white), 1);border:0;border-radius:5px;color:var(--color-text-default, #384248);cursor:pointer;font-size:16px;font-weight:500;padding:10px;position:relative;text-align:left;width:100%}.Accordion>.Accordion-title{display:flex}.Accordion-title:hover{background:var(--color-bg-hover, rgba(0, 0, 0, 0.05))}.Accordion[open] .Accordion-title{border-bottom-left-radius:0;border-bottom-right-radius:0}.Accordion-title::marker{content:""}.Accordion-title::-webkit-details-marker{display:none}.Accordion-toggleIcon,.Accordion-toggleIcon_opened{color:var(--color-text-minimum, #637288);font-size:14px;margin-left:5px;margin-right:10px;transition:transform .1s}.Accordion-toggleIcon_opened,.Accordion-toggleIcon_opened_opened{transform:rotate(90deg)}.Accordion-icon{color:var(--project-color-primary, inherit);margin-right:10px}.Accordion-content{color:var(--color-text-muted, #4f5a66);padding:5px 15px 0 15px}.Accordion-content>*{margin-bottom:var(--markdown-spacing, 15px)}
|
|
2
|
-
.CardsGrid{--CardsGrid-gap: 1.5em;--CardsGrid-columns: auto-fit;--CardsGrid-cardWidth: auto;display:grid;gap:var(--CardsGrid-gap);grid-template-columns:repeat(var(--CardsGrid-columns), minmax(var(--CardsGrid-cardWidth), 1fr))}.Card{--Card-badge-bg-color: var(--yellow);--Card-badge-color: var(--yellow10);--Card-content-color: var(--color-text-minimum);--Card-gap: 0.25em;--Card-href-arrow-opacity: 0;--Card-href-arrow-transform: translateX(-5px);--Card-icon-color: var(--color-text-default);--Card-icon-opacity: 0.65;--Card-icon-opacity-hover: 0.75;--Card-line-height: 1.4;--Card-shadow: none;--Card-title-color: var(--color-text-default);background:var(--Card-bg-color);border:1px solid var(--Card-border-color);border-radius:var(--border-radius-lg);box-shadow:var(--Card-shadow);display:flex;flex-direction:var(--Card-layout);gap:var(--Card-gap);line-height:var(--Card-line-height);padding:var(--Card-padding);text-decoration:none}.Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0);--Card-border-color: var(--color-border-default);--Card-layout: column;--Card-padding: 1.5em}.rm-ReadMe[data-color-mode=dark] .Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1)}@media(prefers-color-scheme: dark){.rm-ReadMe[data-color-mode=system] .Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1)}}.Card_tile{--Card-gap: 1em;--Card-icon-opacity: 0.5;--Card-layout: row}.Card_tile .Card-content{--Card-gap: 0}.Card[href]:not([href=""]){color:inherit;text-decoration:none}.Card[href]:not([href=""]):hover,.Card[href]:not([href=""]):active,.Card[href]:not([href=""]):focus{--Card-icon-opacity: var(--Card-icon-opacity-hover);--Card-href-arrow-opacity: 0.75;--Card-href-arrow-transform: none;background:var(--Card-bg-color-hover)}.Card-icon{color:var(--Card-icon-color);font-size:1.4em;margin-bottom:.5em;opacity:var(--Card-icon-opacity);transition:opacity var(--transition-timing) var(--transition-fast)}.Card-title{align-items:flex-start;color:var(--Card-title-color);display:flex;gap:.5em;font-weight:var(--font-weight-bold)}.Card-badge{align-items:center;background:var(--Card-badge-bg-color);border-radius:1em;color:var(--Card-badge-color);font-size:.6em;padding:0 .5em;display:inline-flex;position:relative;top:.5em}.Card-arrow{font-size:.8em;opacity:var(--Card-href-arrow-opacity);position:relative;top:.375em;transition:opacity var(--transition-timing) var(--transition-fast),transform var(--transition-timing) var(--transition-fast);transform:var(--Card-href-arrow-transform)}.Card-content{color:var(--Card-content-color);display:flex;flex-direction:column;font-size:1em;gap:var(--Card-gap)}.Card-content p:last-child{margin-bottom:0}
|
|
2
|
+
.CardsGrid{--CardsGrid-gap: 1.5em;--CardsGrid-columns: auto-fit;--CardsGrid-cardWidth: auto;display:grid;gap:var(--CardsGrid-gap);grid-template-columns:repeat(var(--CardsGrid-columns), minmax(var(--CardsGrid-cardWidth), 1fr))}.CardsGrid_wrap{grid-template-columns:repeat(auto-fill, minmax(max(min(var(--CardsGrid-cardWidth), 100%), (100% - (var(--CardsGrid-columns) - 1) * var(--CardsGrid-gap)) / var(--CardsGrid-columns)), 1fr))}.Card{--Card-badge-bg-color: var(--yellow);--Card-badge-color: var(--yellow10);--Card-content-color: var(--color-text-minimum);--Card-gap: 0.25em;--Card-href-arrow-opacity: 0;--Card-href-arrow-transform: translateX(-5px);--Card-icon-color: var(--color-text-default);--Card-icon-opacity: 0.65;--Card-icon-opacity-hover: 0.75;--Card-line-height: 1.4;--Card-shadow: none;--Card-title-color: var(--color-text-default);background:var(--Card-bg-color);border:1px solid var(--Card-border-color);border-radius:var(--border-radius-lg);box-shadow:var(--Card-shadow);display:flex;flex-direction:var(--Card-layout);gap:var(--Card-gap);line-height:var(--Card-line-height);padding:var(--Card-padding);text-decoration:none}.Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0);--Card-border-color: var(--color-border-default);--Card-layout: column;--Card-padding: 1.5em}.rm-ReadMe[data-color-mode=dark] .Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1)}@media(prefers-color-scheme: dark){.rm-ReadMe[data-color-mode=system] .Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1)}}.Card_tile{--Card-gap: 1em;--Card-icon-opacity: 0.5;--Card-layout: row}.Card_tile .Card-content{--Card-gap: 0}.Card[href]:not([href=""]){color:inherit;text-decoration:none}.Card[href]:not([href=""]):hover,.Card[href]:not([href=""]):active,.Card[href]:not([href=""]):focus{--Card-icon-opacity: var(--Card-icon-opacity-hover);--Card-href-arrow-opacity: 0.75;--Card-href-arrow-transform: none;background:var(--Card-bg-color-hover)}.Card-icon{color:var(--Card-icon-color);font-size:1.4em;margin-bottom:.5em;opacity:var(--Card-icon-opacity);transition:opacity var(--transition-timing) var(--transition-fast)}.Card-title{align-items:flex-start;color:var(--Card-title-color);display:flex;gap:.5em;font-weight:var(--font-weight-bold)}.Card-badge{align-items:center;background:var(--Card-badge-bg-color);border-radius:1em;color:var(--Card-badge-color);font-size:.6em;padding:0 .5em;display:inline-flex;position:relative;top:.5em}.Card-arrow{font-size:.8em;opacity:var(--Card-href-arrow-opacity);position:relative;top:.375em;transition:opacity var(--transition-timing) var(--transition-fast),transform var(--transition-timing) var(--transition-fast);transform:var(--Card-href-arrow-transform)}.Card-content{color:var(--Card-content-color);display:flex;flex-direction:column;font-size:1em;gap:var(--Card-gap)}.Card-content p:last-child{margin-bottom:0}
|
|
3
3
|
.Columns{display:grid;gap:var(--md, 20px)}@media(max-width: 414px){.Columns{grid-template-columns:1fr !important}}
|
|
4
4
|
.TabGroup-nav{border-bottom:solid var(--color-border-default, rgba(0, 0, 0, 0.1));margin-bottom:15px}.TabGroup-tab{background:none;border:0;color:var(--color-text-minimum, #637288);cursor:pointer;font-size:15px;font-weight:600;margin-right:15px;padding:0;padding-bottom:10px}.TabGroup-tab_active{background:none;border:0;border-bottom:solid var(--color-tab-active, currentcolor);color:var(--color-tab-active, currentcolor);font-size:15px;font-weight:600;margin-right:15px;margin-bottom:-2px;padding:0;padding-bottom:10px}.TabGroup-tab:hover{color:var(--color-text-muted, #4f5a66)}.TabGroup-icon{color:var(--project-color-primary, inherit);margin-right:10px}.TabGroup .TabContent{color:var(--color-text-muted, #4f5a66)}:where(.TabGroup .TabContent>*:not(:last-child)){margin-bottom:var(--markdown-spacing, 15px)}
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render-fixture.css","mappings":"AAAA,WACE,oDACA,iEACA,kBAEA,iBACE,mBACA,oDACA,SACA,kBACA,yCACA,eACA,eACA,gBACA,aACA,kBACA,gBACA,WAEA,4BACE,aAGF,uBACE,sDAGF,kCACE,4BACA,6BAGF,yBACE,WAGF,yCACE,aAIJ,mDAEE,yCACA,eACA,gBACA,kBACA,yBAEA,iEACE,wBAIJ,gBACE,4CACA,kBAGF,mBACE,uCACA,wBAEA,qBACE,4C;AC5DN,WACE,uBACA,8BACA,4BAEA,aACA,yBACA,gGAGF,MAGE,qCACA,oCACA,gDACA,mBACA,6BACA,8CACA,6CACA,0BACA,gCACA,wBACA,oBACA,8CAEA,gCACA,0CACA,sCACA,8BACA,aACA,kCACA,oBACA,oCACA,4BACA,qBAEA,WACE,2DACA,iEACA,iDACA,sBACA,sBCTA,4CDYE,8DACA,mECRA,mCADF,8CDQE,8DACA,oEAIJ,WACE,gBACA,yBACA,mBAEA,yBACE,cAKJ,2BACE,cACA,qBAEA,oGAGE,oDACA,gCACA,kCAEA,sCAIJ,WACE,6BACA,gBACA,mBACA,iCACA,mEAGF,YACE,uBACA,8BACA,aACA,SACA,oCAGF,YACE,mBACA,sCACA,kBACA,8BACA,eACA,eACA,oBACA,kBACA,SAGF,YACE,eACA,uCACA,kBACA,WACA,4HACE,CAEF,2CAGF,cACE,gCACA,aACA,sBACA,cACA,oBAEA,2BACE,gB;AE7HN,SACE,aACA,oBAEA,yBAJF,SAKI,sC;ACNF,cACE,oEACA,mBAGF,cACE,gBACA,SACA,yCACA,eACA,eACA,gBACA,kBACA,UACA,oBAEA,qBACE,gBACA,SACA,0DACA,4CACA,eACA,gBACA,kBACA,mBACA,UACA,oBAGF,oBACE,uCAIJ,eACE,4CACA,kBAGF,sBACE,uCAIJ,iDACE,4C","sources":["webpack://@readme/markdown/./components/Accordion/style.scss","webpack://@readme/markdown/./components/Cards/style.scss","webpack://@readme/markdown/./styles/mixins/when-color-mode-dark.scss","webpack://@readme/markdown/./components/Columns/style.scss","webpack://@readme/markdown/./components/Tabs/style.scss"],"sourcesContent":[".Accordion {\n background: rgba(var(--color-bg-page-rgb, white), 1);\n border: 1px solid var(--color-border-default, rgba(black, 0.1));\n border-radius: 5px;\n\n &-title {\n align-items: center;\n background: rgba(var(--color-bg-page-rgb, white), 1);\n border: 0;\n border-radius: 5px;\n color: var(--color-text-default, #384248);\n cursor: pointer;\n font-size: 16px;\n font-weight: 500;\n padding: 10px;\n position: relative;\n text-align: left;\n width: 100%;\n \n .Accordion > & {\n display: flex;\n }\n\n &:hover {\n background: var(--color-bg-hover, rgba(black, 0.05));\n }\n\n .Accordion[open] & {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &::marker {\n content: \"\";\n }\n\n &::-webkit-details-marker {\n display: none;\n } \n }\n\n &-toggleIcon,\n &-toggleIcon_opened {\n color: var(--color-text-minimum, #637288);\n font-size: 14px;\n margin-left: 5px;\n margin-right: 10px;\n transition: transform 0.1s;\n\n &_opened {\n transform: rotate(90deg);\n }\n }\n\n &-icon {\n color: var(--project-color-primary, inherit);\n margin-right: 10px;\n }\n\n &-content {\n color: var(--color-text-muted, #4f5a66);\n padding: 5px 15px 0 15px;\n\n > * {\n margin-bottom: var(--markdown-spacing, 15px);\n }\n }\n}\n","@import '../../styles/mixins/when-color-mode-dark.scss';\n\n$iphone-plus: 414px;\n\n.CardsGrid {\n --CardsGrid-gap: 1.5em;\n --CardsGrid-columns: auto-fit;\n --CardsGrid-cardWidth: auto;\n\n display: grid;\n gap: var(--CardsGrid-gap);\n grid-template-columns: repeat(var(--CardsGrid-columns), minmax(var(--CardsGrid-cardWidth), 1fr));\n}\n\n.Card {\n $card: &;\n\n --Card-badge-bg-color: var(--yellow);\n --Card-badge-color: var(--yellow10);\n --Card-content-color: var(--color-text-minimum);\n --Card-gap: 0.25em;\n --Card-href-arrow-opacity: 0;\n --Card-href-arrow-transform: translateX(-5px);\n --Card-icon-color: var(--color-text-default);\n --Card-icon-opacity: 0.65;\n --Card-icon-opacity-hover: 0.75;\n --Card-line-height: 1.4;\n --Card-shadow: none;\n --Card-title-color: var(--color-text-default);\n\n background: var(--Card-bg-color);\n border: 1px solid var(--Card-border-color);\n border-radius: var(--border-radius-lg);\n box-shadow: var(--Card-shadow);\n display: flex;\n flex-direction: var(--Card-layout);\n gap: var(--Card-gap);\n line-height: var(--Card-line-height);\n padding: var(--Card-padding);\n text-decoration: none;\n\n &_card {\n --Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0);\n --Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0);\n --Card-border-color: var(--color-border-default);\n --Card-layout: column;\n --Card-padding: 1.5em;\n\n @include when-color-mode-dark('.rm-ReadMe') {\n --Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);\n --Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1);\n }\n }\n\n &_tile {\n --Card-gap: 1em;\n --Card-icon-opacity: 0.5;\n --Card-layout: row;\n\n #{$card}-content {\n --Card-gap: 0;\n }\n }\n\n // needs specificity to override the default link styles; while preserving logic for empty hrefs\n &[href]:not([href='']) {\n color: inherit;\n text-decoration: none;\n\n &:hover,\n &:active,\n &:focus {\n --Card-icon-opacity: var(--Card-icon-opacity-hover);\n --Card-href-arrow-opacity: 0.75;\n --Card-href-arrow-transform: none;\n\n background: var(--Card-bg-color-hover);\n }\n }\n\n &-icon {\n color: var(--Card-icon-color);\n font-size: 1.4em;\n margin-bottom: 0.5em;\n opacity: var(--Card-icon-opacity);\n transition: opacity var(--transition-timing) var(--transition-fast);\n }\n\n &-title {\n align-items: flex-start;\n color: var(--Card-title-color);\n display: flex;\n gap: 0.5em;\n font-weight: var(--font-weight-bold);\n }\n\n &-badge {\n align-items: center;\n background: var(--Card-badge-bg-color);\n border-radius: 1em;\n color: var(--Card-badge-color);\n font-size: 0.6em;\n padding: 0 0.5em;\n display: inline-flex;\n position: relative;\n top: 0.5em;\n }\n\n &-arrow {\n font-size: 0.8em;\n opacity: var(--Card-href-arrow-opacity);\n position: relative;\n top: 0.375em;\n transition:\n opacity var(--transition-timing) var(--transition-fast),\n transform var(--transition-timing) var(--transition-fast);\n transform: var(--Card-href-arrow-transform);\n }\n\n &-content {\n color: var(--Card-content-color);\n display: flex;\n flex-direction: column;\n font-size: 1em;\n gap: var(--Card-gap);\n\n p:last-child {\n margin-bottom: 0;\n }\n }\n}\n","/**\n * Dark styles keyed off `$root`'s own `data-color-mode`, not any ancestor.\n * Unlike `dark-mode` (which matches ANY ancestor carrying the attribute —\n * see the warning on that mixin), this only fires when `$root` itself\n * declares the dark/system mode. None of this package's components carry\n * `data-color-mode` on their own root, so callers must pass the selector\n * for whichever wrapper actually carries it in their consuming app — there\n * is no default.\n *\n * IMPORTANT: this package ships one precompiled `dist/main.css` — there is\n * no build step where a consumer can supply their own value for `$root`.\n * Whatever gets passed at each `@include` call site below is permanent for\n * every installer of this package. Call sites currently hardcode\n * `'.rm-ReadMe'`, readme's hub color-mode wrapper, because readme is this\n * package's only real consumer today. If that ever changes, this becomes\n * silently wrong (not an error — dark mode just never activates) for any\n * consumer without that exact class in their DOM, and `$root` should be\n * dropped in favor of each component resolving its own nearest\n * `[data-color-mode]` ancestor at mount via `Element.closest()` and\n * stamping it onto its own root, so the CSS can self-anchor with no\n * hardcoded selector at all.\n *\n * $global: wrap the root-anchor selector in :global(), for use when this\n * file is imported into a CSS-module context (mirrors `dark-mode`'s param).\n */\n@mixin when-color-mode-dark($root, $global: false) {\n @if $global {\n :global(#{$root}[data-color-mode='dark']) & {\n @content;\n }\n\n :global(#{$root}[data-color-mode='system']) & {\n @media (prefers-color-scheme: dark) {\n @content;\n }\n }\n } @else {\n #{$root}[data-color-mode='dark'] & {\n @content;\n }\n\n #{$root}[data-color-mode='system'] & {\n @media (prefers-color-scheme: dark) {\n @content;\n }\n }\n }\n}\n","$iphone-plus: 414px;\n\n.Columns {\n display: grid;\n gap: var(--md, 20px);\n\n @media (max-width: $iphone-plus) {\n grid-template-columns: 1fr !important;\n }\n}\n",".TabGroup {\n &-nav {\n border-bottom: solid var(--color-border-default, #{rgba(black, 0.1)});\n margin-bottom: 15px;\n }\n\n &-tab {\n background: none;\n border: 0;\n color: var(--color-text-minimum, #637288);\n cursor: pointer;\n font-size: 15px;\n font-weight: 600;\n margin-right: 15px;\n padding: 0;\n padding-bottom: 10px;\n\n &_active {\n background: none;\n border: 0;\n border-bottom: solid var(--color-tab-active, currentcolor);\n color: var(--color-tab-active, currentcolor);\n font-size: 15px;\n font-weight: 600;\n margin-right: 15px;\n margin-bottom: -2px;\n padding: 0;\n padding-bottom: 10px;\n }\n\n &:hover {\n color: var(--color-text-muted, #4f5a66);\n }\n }\n\n &-icon {\n color: var(--project-color-primary, inherit);\n margin-right: 10px;\n }\n\n .TabContent {\n color: var(--color-text-muted, #4f5a66);\n }\n}\n\n:where(.TabGroup .TabContent > *:not(:last-child)) {\n margin-bottom: var(--markdown-spacing, 15px);\n}\n"],"names":[],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"render-fixture.css","mappings":"AAAA,WACE,oDACA,iEACA,kBAEA,iBACE,mBACA,oDACA,SACA,kBACA,yCACA,eACA,eACA,gBACA,aACA,kBACA,gBACA,WAEA,4BACE,aAGF,uBACE,sDAGF,kCACE,4BACA,6BAGF,yBACE,WAGF,yCACE,aAIJ,mDAEE,yCACA,eACA,gBACA,kBACA,yBAEA,iEACE,wBAIJ,gBACE,4CACA,kBAGF,mBACE,uCACA,wBAEA,qBACE,4C;AC5DN,WACE,uBACA,8BACA,4BAEA,aACA,yBACA,gGAIA,gBACE,4LAaJ,MAGE,qCACA,oCACA,gDACA,mBACA,6BACA,8CACA,6CACA,0BACA,gCACA,wBACA,oBACA,8CAEA,gCACA,0CACA,sCACA,8BACA,aACA,kCACA,oBACA,oCACA,4BACA,qBAEA,WACE,2DACA,iEACA,iDACA,sBACA,sBCxBA,4CD2BE,8DACA,mECvBA,mCADF,8CDuBE,8DACA,oEAIJ,WACE,gBACA,yBACA,mBAEA,yBACE,cAKJ,2BACE,cACA,qBAEA,oGAGE,oDACA,gCACA,kCAEA,sCAIJ,WACE,6BACA,gBACA,mBACA,iCACA,mEAGF,YACE,uBACA,8BACA,aACA,SACA,oCAGF,YACE,mBACA,sCACA,kBACA,8BACA,eACA,eACA,oBACA,kBACA,SAGF,YACE,eACA,uCACA,kBACA,WACA,4HACE,CAEF,2CAGF,cACE,gCACA,aACA,sBACA,cACA,oBAEA,2BACE,gB;AE5IN,SACE,aACA,oBAEA,yBAJF,SAKI,sC;ACNF,cACE,oEACA,mBAGF,cACE,gBACA,SACA,yCACA,eACA,eACA,gBACA,kBACA,UACA,oBAEA,qBACE,gBACA,SACA,0DACA,4CACA,eACA,gBACA,kBACA,mBACA,UACA,oBAGF,oBACE,uCAIJ,eACE,4CACA,kBAGF,sBACE,uCAIJ,iDACE,4C","sources":["webpack://@readme/markdown/./components/Accordion/style.scss","webpack://@readme/markdown/./components/Cards/style.scss","webpack://@readme/markdown/./styles/mixins/when-color-mode-dark.scss","webpack://@readme/markdown/./components/Columns/style.scss","webpack://@readme/markdown/./components/Tabs/style.scss"],"sourcesContent":[".Accordion {\n background: rgba(var(--color-bg-page-rgb, white), 1);\n border: 1px solid var(--color-border-default, rgba(black, 0.1));\n border-radius: 5px;\n\n &-title {\n align-items: center;\n background: rgba(var(--color-bg-page-rgb, white), 1);\n border: 0;\n border-radius: 5px;\n color: var(--color-text-default, #384248);\n cursor: pointer;\n font-size: 16px;\n font-weight: 500;\n padding: 10px;\n position: relative;\n text-align: left;\n width: 100%;\n \n .Accordion > & {\n display: flex;\n }\n\n &:hover {\n background: var(--color-bg-hover, rgba(black, 0.05));\n }\n\n .Accordion[open] & {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &::marker {\n content: \"\";\n }\n\n &::-webkit-details-marker {\n display: none;\n } \n }\n\n &-toggleIcon,\n &-toggleIcon_opened {\n color: var(--color-text-minimum, #637288);\n font-size: 14px;\n margin-left: 5px;\n margin-right: 10px;\n transition: transform 0.1s;\n\n &_opened {\n transform: rotate(90deg);\n }\n }\n\n &-icon {\n color: var(--project-color-primary, inherit);\n margin-right: 10px;\n }\n\n &-content {\n color: var(--color-text-muted, #4f5a66);\n padding: 5px 15px 0 15px;\n\n > * {\n margin-bottom: var(--markdown-spacing, 15px);\n }\n }\n}\n","@import '../../styles/mixins/when-color-mode-dark.scss';\n\n$iphone-plus: 414px;\n\n.CardsGrid {\n --CardsGrid-gap: 1.5em;\n --CardsGrid-columns: auto-fit;\n --CardsGrid-cardWidth: auto;\n\n display: grid;\n gap: var(--CardsGrid-gap);\n grid-template-columns: repeat(var(--CardsGrid-columns), minmax(var(--CardsGrid-cardWidth), 1fr));\n\n // Treat a fixed column count as a maximum: each track is at least an Nth of the row (auto-fill keeps\n // empty tracks so short rows stay N wide), and narrow rows drop columns instead of widening the page\n &_wrap {\n grid-template-columns: repeat(\n auto-fill,\n minmax(\n max(\n min(var(--CardsGrid-cardWidth), 100%),\n calc((100% - (var(--CardsGrid-columns) - 1) * var(--CardsGrid-gap)) / var(--CardsGrid-columns))\n ),\n 1fr\n )\n );\n }\n}\n\n.Card {\n $card: &;\n\n --Card-badge-bg-color: var(--yellow);\n --Card-badge-color: var(--yellow10);\n --Card-content-color: var(--color-text-minimum);\n --Card-gap: 0.25em;\n --Card-href-arrow-opacity: 0;\n --Card-href-arrow-transform: translateX(-5px);\n --Card-icon-color: var(--color-text-default);\n --Card-icon-opacity: 0.65;\n --Card-icon-opacity-hover: 0.75;\n --Card-line-height: 1.4;\n --Card-shadow: none;\n --Card-title-color: var(--color-text-default);\n\n background: var(--Card-bg-color);\n border: 1px solid var(--Card-border-color);\n border-radius: var(--border-radius-lg);\n box-shadow: var(--Card-shadow);\n display: flex;\n flex-direction: var(--Card-layout);\n gap: var(--Card-gap);\n line-height: var(--Card-line-height);\n padding: var(--Card-padding);\n text-decoration: none;\n\n &_card {\n --Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0);\n --Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0);\n --Card-border-color: var(--color-border-default);\n --Card-layout: column;\n --Card-padding: 1.5em;\n\n @include when-color-mode-dark('.rm-ReadMe') {\n --Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);\n --Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1);\n }\n }\n\n &_tile {\n --Card-gap: 1em;\n --Card-icon-opacity: 0.5;\n --Card-layout: row;\n\n #{$card}-content {\n --Card-gap: 0;\n }\n }\n\n // needs specificity to override the default link styles; while preserving logic for empty hrefs\n &[href]:not([href='']) {\n color: inherit;\n text-decoration: none;\n\n &:hover,\n &:active,\n &:focus {\n --Card-icon-opacity: var(--Card-icon-opacity-hover);\n --Card-href-arrow-opacity: 0.75;\n --Card-href-arrow-transform: none;\n\n background: var(--Card-bg-color-hover);\n }\n }\n\n &-icon {\n color: var(--Card-icon-color);\n font-size: 1.4em;\n margin-bottom: 0.5em;\n opacity: var(--Card-icon-opacity);\n transition: opacity var(--transition-timing) var(--transition-fast);\n }\n\n &-title {\n align-items: flex-start;\n color: var(--Card-title-color);\n display: flex;\n gap: 0.5em;\n font-weight: var(--font-weight-bold);\n }\n\n &-badge {\n align-items: center;\n background: var(--Card-badge-bg-color);\n border-radius: 1em;\n color: var(--Card-badge-color);\n font-size: 0.6em;\n padding: 0 0.5em;\n display: inline-flex;\n position: relative;\n top: 0.5em;\n }\n\n &-arrow {\n font-size: 0.8em;\n opacity: var(--Card-href-arrow-opacity);\n position: relative;\n top: 0.375em;\n transition:\n opacity var(--transition-timing) var(--transition-fast),\n transform var(--transition-timing) var(--transition-fast);\n transform: var(--Card-href-arrow-transform);\n }\n\n &-content {\n color: var(--Card-content-color);\n display: flex;\n flex-direction: column;\n font-size: 1em;\n gap: var(--Card-gap);\n\n p:last-child {\n margin-bottom: 0;\n }\n }\n}\n","/**\n * Dark styles keyed off `$root`'s own `data-color-mode`, not any ancestor.\n * Unlike `dark-mode` (which matches ANY ancestor carrying the attribute —\n * see the warning on that mixin), this only fires when `$root` itself\n * declares the dark/system mode. None of this package's components carry\n * `data-color-mode` on their own root, so callers must pass the selector\n * for whichever wrapper actually carries it in their consuming app — there\n * is no default.\n *\n * IMPORTANT: this package ships one precompiled `dist/main.css` — there is\n * no build step where a consumer can supply their own value for `$root`.\n * Whatever gets passed at each `@include` call site below is permanent for\n * every installer of this package. Call sites currently hardcode\n * `'.rm-ReadMe'`, readme's hub color-mode wrapper, because readme is this\n * package's only real consumer today. If that ever changes, this becomes\n * silently wrong (not an error — dark mode just never activates) for any\n * consumer without that exact class in their DOM, and `$root` should be\n * dropped in favor of each component resolving its own nearest\n * `[data-color-mode]` ancestor at mount via `Element.closest()` and\n * stamping it onto its own root, so the CSS can self-anchor with no\n * hardcoded selector at all.\n *\n * $global: wrap the root-anchor selector in :global(), for use when this\n * file is imported into a CSS-module context (mirrors `dark-mode`'s param).\n */\n@mixin when-color-mode-dark($root, $global: false) {\n @if $global {\n :global(#{$root}[data-color-mode='dark']) & {\n @content;\n }\n\n :global(#{$root}[data-color-mode='system']) & {\n @media (prefers-color-scheme: dark) {\n @content;\n }\n }\n } @else {\n #{$root}[data-color-mode='dark'] & {\n @content;\n }\n\n #{$root}[data-color-mode='system'] & {\n @media (prefers-color-scheme: dark) {\n @content;\n }\n }\n }\n}\n","$iphone-plus: 414px;\n\n.Columns {\n display: grid;\n gap: var(--md, 20px);\n\n @media (max-width: $iphone-plus) {\n grid-template-columns: 1fr !important;\n }\n}\n",".TabGroup {\n &-nav {\n border-bottom: solid var(--color-border-default, #{rgba(black, 0.1)});\n margin-bottom: 15px;\n }\n\n &-tab {\n background: none;\n border: 0;\n color: var(--color-text-minimum, #637288);\n cursor: pointer;\n font-size: 15px;\n font-weight: 600;\n margin-right: 15px;\n padding: 0;\n padding-bottom: 10px;\n\n &_active {\n background: none;\n border: 0;\n border-bottom: solid var(--color-tab-active, currentcolor);\n color: var(--color-tab-active, currentcolor);\n font-size: 15px;\n font-weight: 600;\n margin-right: 15px;\n margin-bottom: -2px;\n padding: 0;\n padding-bottom: 10px;\n }\n\n &:hover {\n color: var(--color-text-muted, #4f5a66);\n }\n }\n\n &-icon {\n color: var(--project-color-primary, inherit);\n margin-right: 10px;\n }\n\n .TabContent {\n color: var(--color-text-muted, #4f5a66);\n }\n}\n\n:where(.TabGroup .TabContent > *:not(:last-child)) {\n margin-bottom: var(--markdown-spacing, 15px);\n}\n"],"names":[],"sourceRoot":""}
|