@readme/markdown 15.0.0 → 15.0.2

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,11 @@
1
+ import type { Transform } from 'mdast-util-from-markdown';
2
+ /**
3
+ * Rewrites JSX attribute expressions (`icon={String(1 + 3)}`) into plain string attributes
4
+ * holding their literal source, so nothing downstream can evaluate them.
5
+ *
6
+ * This is the RMDX counterpart to mdxish's `preserveExpressionsAsText` parse option: safeMode's
7
+ * contract is enforced once, at the head of the pipeline, rather than at every `getAttrs()` call
8
+ * site. Only registered when safeMode is on.
9
+ */
10
+ declare const flattenAttributeExpressions: () => Transform;
11
+ export default flattenAttributeExpressions;
@@ -1,5 +1,6 @@
1
1
  import compatabilityTransfomer from './compatability';
2
2
  import divTransformer from './div';
3
+ import flattenAttributeExpressions from './flatten-attribute-expressions';
3
4
  import handleMissingComponents from './handle-missing-components';
4
5
  import injectComponents from './inject-components';
5
6
  import mdxToHast from './mdx-to-hast';
@@ -11,7 +12,7 @@ import tablesToJsx from './tables-to-jsx';
11
12
  import tailwindTransformer from './tailwind';
12
13
  import validateMCPIntro from './validate-mcpintro';
13
14
  import variablesTransformer from './variables';
14
- export { compatabilityTransfomer, divTransformer, injectComponents, mdxToHast, mdxishTables, mermaidTransformer, readmeComponentsTransformer, readmeToMdx, tablesToJsx, tailwindTransformer, handleMissingComponents, validateMCPIntro, variablesTransformer, };
15
+ export { compatabilityTransfomer, divTransformer, flattenAttributeExpressions, injectComponents, mdxToHast, mdxishTables, mermaidTransformer, readmeComponentsTransformer, readmeToMdx, tablesToJsx, tailwindTransformer, handleMissingComponents, validateMCPIntro, variablesTransformer, };
15
16
  export declare const defaultTransforms: {
16
17
  calloutTransformer: ({ isMdxish }?: {
17
18
  isMdxish?: boolean;
@@ -1,6 +1,6 @@
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;display:flex;font-size:16px;font-weight:500;padding:10px;position:relative;text-align:left;width:100%}.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
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}[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){[data-color-mode=auto] .Card_card,[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
- .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)}
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
 
6
6
  /*# sourceMappingURL=render-fixture.css.map*/
@@ -1 +1 @@
1
- {"version":3,"file":"render-fixture.css","mappings":"AAAA,WACE,oDACA,iEACA,kBAEA,iBACE,mBACA,oDACA,SACA,kBACA,yCACA,eACA,aACA,eACA,gBACA,aACA,kBACA,gBACA,WAEA,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;ACzDN,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,sBCXA,kCDcE,8DACA,mECTA,mCAFF,sEDUE,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,uC","sources":["webpack://@readme/markdown/./components/Accordion/style.scss","webpack://@readme/markdown/./components/Cards/style.scss","webpack://@readme/markdown/./styles/mixins/dark-mode.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 display: flex;\n font-size: 16px;\n font-weight: 500;\n padding: 10px;\n position: relative;\n text-align: left;\n width: 100%;\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/dark-mode.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 dark-mode {\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","/* We’re planning to move this in to the monorepo in which case\n we could share the dark mode mix in. Kelly is planning to take\n some time to make that move so can we add a comment here to\n circle back on this at that point?\n\n - Rafe\n April 2025\n*/\n\n@mixin dark-mode($global: false) {\n $root: &;\n\n @if not $root {\n [data-color-mode='dark'] {\n @content;\n }\n\n [data-color-mode='auto'],\n [data-color-mode='system'] {\n @media (prefers-color-scheme: dark) {\n @content;\n }\n }\n } @else if $global {\n :global([data-color-mode='dark']) & {\n @content;\n }\n\n :global([data-color-mode='auto']) &,\n :global([data-color-mode='system']) & {\n @media (prefers-color-scheme: dark) {\n @content;\n }\n }\n } @else {\n [data-color-mode='dark'] & {\n @content;\n }\n\n [data-color-mode='auto'] &,\n [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"],"names":[],"sourceRoot":""}
1
+ {"version":3,"file":"render-fixture.css","mappings":"AAAA,WACE,oDACA,iEACA,kBAEA,iBACE,mBACA,oDACA,SACA,kBACA,yCACA,eACA,aACA,eACA,gBACA,aACA,kBACA,gBACA,WAEA,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;ACzDN,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,sBCXA,kCDcE,8DACA,mECTA,mCAFF,sEDUE,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/dark-mode.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 display: flex;\n font-size: 16px;\n font-weight: 500;\n padding: 10px;\n position: relative;\n text-align: left;\n width: 100%;\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/dark-mode.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 dark-mode {\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","/* We’re planning to move this in to the monorepo in which case\n we could share the dark mode mix in. Kelly is planning to take\n some time to make that move so can we add a comment here to\n circle back on this at that point?\n\n - Rafe\n April 2025\n*/\n\n@mixin dark-mode($global: false) {\n $root: &;\n\n @if not $root {\n [data-color-mode='dark'] {\n @content;\n }\n\n [data-color-mode='auto'],\n [data-color-mode='system'] {\n @media (prefers-color-scheme: dark) {\n @content;\n }\n }\n } @else if $global {\n :global([data-color-mode='dark']) & {\n @content;\n }\n\n :global([data-color-mode='auto']) &,\n :global([data-color-mode='system']) & {\n @media (prefers-color-scheme: dark) {\n @content;\n }\n }\n } @else {\n [data-color-mode='dark'] & {\n @content;\n }\n\n [data-color-mode='auto'] &,\n [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":""}