sassdoc-theme-herman
Version:
An Odd SassDoc theme.
1 lines • 94.4 kB
Source Map (JSON)
{"version":3,"file":"app_styles.min.css","mappings":"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","sources":["webpack:///../../scss/main.scss","webpack:///../../node_modules/cssremedy/css/remedy.css","webpack:///../../scss/initial/_root.scss","webpack:///../../node_modules/accoutrement/sass/type/_fonts.scss","webpack:///../../node_modules/accoutrement/sass/type/_a11y.scss","webpack:///../../node_modules/accoutrement/sass/scale/_size.scss","webpack:///../../scss/initial/_icons.scss","webpack:///../../scss/initial/_sample-previews.scss","webpack:///../../node_modules/accoutrement/sass/tokens/_vars.scss","webpack:///../../scss/layout/_root.scss","webpack:///../../scss/layout/_regions.scss","webpack:///../../node_modules/accoutrement/sass/layout/_queries.scss","webpack:///../../scss/layout/_banner.scss","webpack:///../../scss/config/_banner.scss","webpack:///../../node_modules/accoutrement/sass/type/_pseudo-elements.scss","webpack:///../../node_modules/accoutrement/sass/layout/_z-index.scss","webpack:///../../scss/layout/_nav.scss","webpack:///../../node_modules/accoutrement/sass/color/_contrast.scss","webpack:///../../scss/config/_type.scss","webpack:///../../scss/layout/_main.scss","webpack:///../../scss/patterns/_type.scss","webpack:///../../scss/patterns/_forms.scss","webpack:///../../scss/component/_search.scss","webpack:///../../scss/component/_nav.scss","webpack:///../../scss/component/_footer.scss","webpack:///../../scss/component/_breadcrumb.scss","webpack:///../../scss/component/_project-meta.scss","webpack:///../../scss/component/_item.scss","webpack:///../../scss/previews/_highlight.scss","webpack:///../../scss/previews/_code.scss","webpack:///../../scss/previews/_examples.scss","webpack:///../../scss/previews/_icon.scss"],"sourcesContent":["*,::before,::after{box-sizing:border-box}html{line-sizing:normal}body{margin:0}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.17rem}h4{font-size:1rem}h5{font-size:.83rem}h6{font-size:.67rem}h1{margin:.67em 0}pre{white-space:pre-wrap}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%}img{border-style:none}svg{overflow:hidden}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}*{border:solid 0 currentcolor;font-size:inherit;line-height:inherit;margin:0;padding:0}:root{font-family:\"Source Sans 3\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:18px;font-size:calc(1em + .125vw);line-height:1.4}[hidden]{display:none !important}img{display:revert}::selection{background-color:hsl(195,45.7692307692%,87%)}mark{background-color:hsl(195,45.7692307692%,87%);display:inline-block;padding:0 .175rem}[href]:link,[href]:visited{color:rgb(184.6678125,29.77921875,108.1996875);text-decoration-color:rgb(237.416953125,198.6948046875,218.299921875);text-decoration-skip:auto;transition:text-decoration-color 250ms,color 200ms}[href]:hover,[href]:focus,[href]:active{color:hsl(195,85%,35%);text-decoration-color:currentcolor}pre{font-family:\"Source Code Pro\",Consolas,Menlo,Monaco,\"Lucida Console\",\"Liberation Mono\",\"DejaVu Sans Mono\",\"Bitstream Vera Sans Mono\",\"Courier New\",monospace,sans-serif;font-size:.9rem;overflow:auto;white-space:pre}code{font-family:\"Source Code Pro\",Consolas,Menlo,Monaco,\"Lucida Console\",\"Liberation Mono\",\"DejaVu Sans Mono\",\"Bitstream Vera Sans Mono\",\"Courier New\",monospace,sans-serif;font-weight:bolder}pre code{display:block;font-weight:normal}.is-hidden{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(1px 1px 1px 1px);height:1px;overflow:hidden;pointer-events:none;position:absolute;width:1px}[data-icon]{height:1em;width:1em;fill:currentcolor}[data-icon-size=nav-icon]{height:28px;width:28px}[data-icon-size=footer-logo]{height:2.8rem;width:2.8rem}:root{--herman-brand-blue:hsl(195,85%,35%);--herman-brand-pink:hsl(330,85%,48%)}[data-herman]{overflow-x:hidden}[data-region]{width:100%}[data-region=app]{display:flex;flex-direction:column;height:100%;margin:0 auto;min-height:100vh;padding:0}[data-region=container]{display:flex;flex:1 1 auto;position:relative}@media(min-width: 50em){[data-region=container]{justify-content:flex-end}}[data-region=banner]{border-bottom:8px solid hsl(195,85%,35%);box-shadow:0 2px 2px hsla(195,5%,35%,.5);display:block;position:relative;width:100%}[data-region=banner]::before,[data-region=banner]::after{content:\"\";border:.7rem solid rgba(0,0,0,0);border-top-color:hsl(195,85%,35%);border-width:.7rem 1.4rem 0;left:50%;position:absolute;top:100%;transition:border-width 200ms}[data-region=banner]::before{content:\"\";margin-top:8px;transform:translateX(-50%) translateY(-2px)}[data-region=banner]::after{content:\"\";border-top-color:#fff;transform:translateX(-50%) translateY(-4px)}[data-region=banner]{z-index:3;align-items:center;display:flex;padding:.7rem}.project-title{align-items:baseline;display:flex;margin-left:auto;margin-right:auto}.project-name{font-size:calc(1rem + 2vw);font-weight:bold;padding-left:.35rem;padding-right:.35rem}.project-name:link,.project-name:visited{text-decoration:none}.project-version{font-family:\"Source Sans 3\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;color:hsl(195,5%,35%);font-size:calc(1rem + .5vw)}[data-nav-toggle]{color:rgb(184.6678125,29.77921875,108.1996875);padding:.35rem}@media(min-width: 50em){[data-nav-toggle]{padding-left:.7rem;padding-right:.7rem}}@media(min-width: 65em){[data-nav-toggle]{display:none}}[data-nav-toggle]:hover,[data-nav-toggle]:focus,[data-nav-toggle]:active,[data-nav-toggle][aria-pressed=true]{color:hsl(195,85%,35%);outline:0}[data-region=nav]{z-index:2;align-items:stretch;display:flex;flex-direction:column;padding:1.4rem;white-space:nowrap;width:auto;background-color:hsl(195,85%,35%);color:#fff}[data-region=nav] [href]:link,[data-region=nav] [href]:visited{color:inherit}@media(max-width: 64.99em){[data-region=nav]{box-shadow:0 0 .35rem hsla(195,5%,35%,.5);inset:0 auto 0 0;position:absolute;transform:translateX(-102%);transition:transform .4s}[data-region=nav][aria-expanded=true]{transform:translateX(0)}}@media(min-width: 65em){[data-region=nav]{flex:0 0 auto}}[data-region=main]{z-index:1}@media(min-width: 50em){[data-region=main]{overflow:hidden}}[data-page]{padding:calc(0.7rem + 2.5vw);position:relative}.text-block{max-width:80ch}.text-block h1,.text-block h2,.text-block h3,.text-block h4,.text-block h5,.text-block h6{margin-top:0}.text-block h1,.text-block h2,.text-block h3,.text-block h4{color:hsl(195,5%,24.5%)}.text-block h1 a:link,.text-block h1 a:visited,.text-block h2 a:link,.text-block h2 a:visited,.text-block h3 a:link,.text-block h3 a:visited,.text-block h4 a:link,.text-block h4 a:visited{text-decoration-color:rgba(0,0,0,0)}.text-block h1 a:hover,.text-block h1 a:focus,.text-block h1 a:active,.text-block h2 a:hover,.text-block h2 a:focus,.text-block h2 a:active,.text-block h3 a:hover,.text-block h3 a:focus,.text-block h3 a:active,.text-block h4 a:hover,.text-block h4 a:focus,.text-block h4 a:active{text-decoration-color:currentcolor}.text-block h1+h2,.text-block h1+h3,.text-block h2+h2,.text-block h2+h3,.text-block h3+h2,.text-block h3+h3,.text-block h4+h2,.text-block h4+h3{margin-top:0}.text-block h1{font-size:calc(1rem + 2vw);margin-bottom:.7rem}.text-block h2,.text-block h3{margin-top:2.1rem}.text-block>h2:first-child,.text-block>h3:first-child{margin-top:0}.text-block h2{font-size:calc(1rem + 1vw);margin-bottom:.7rem}.text-block h3{font-size:calc(1rem + .5vw);font-weight:normal;margin-bottom:.7rem}.text-block p,.text-block pre{margin-bottom:1.05rem}.text-block ol,.text-block ul{margin:0 1.4rem 1.05rem}.text-block li>p{margin:.7rem 0}.text-block blockquote{border-left:.35rem solid hsl(0,0%,87%);font-size:calc(1rem + .5vw);margin-left:-1.4rem;padding-left:1.05rem}.text-block blockquote>p:not(:last-child){text-indent:-0.4em}.text-block blockquote>p:not(:last-child)::before,.text-block blockquote>p:not(:last-child)::after{content:\"“\";color:hsl(195,85%,35%)}.text-block blockquote>p:not(:last-child)::after{content:\"”\"}.text-block blockquote cite{display:block;font-size:1rem;font-style:normal}.config.invert-colors{background-color:hsl(195,85%,35%);color:#fff}.config.invert-colors [href]:link,.config.invert-colors [href]:visited{color:inherit}::placeholder{color:currentcolor;opacity:.5}input{background:none;border:1px solid hsl(0,0%,87%);color:inherit;font-size:.9rem;margin-bottom:.35rem;padding:.175rem .35rem;width:100%}input:focus{border-color:currentcolor;outline:0}.search-heading{font-size:calc(1rem + 2vw)}.search-term{font-family:\"Source Code Pro\",Consolas,Menlo,Monaco,\"Lucida Console\",\"Liberation Mono\",\"DejaVu Sans Mono\",\"Bitstream Vera Sans Mono\",\"Courier New\",monospace,sans-serif}.search-results{list-style:none}.search-result{margin:calc(0.7rem + 2.5vw) 0}[data-result-field=contents]{color:hsl(195,5%,35%)}[data-region=nav] ul{list-style:none}.nav-subsection{flex:0 0 auto}.nav-subsection:last-of-type{flex:1 0 auto}.nav-subsection+.nav-item{border-top:1px solid;margin-top:2.8rem;padding-top:1.4rem}.nav-home{font-size:calc(1rem + .5vw);font-weight:bold;margin-top:2.1rem}.nav-title{border-top:1px solid;font-size:inherit;font-weight:bold;margin:2.1rem 0 .7rem;padding-top:.175rem}.nav-item{list-style:none;margin:.35rem 0}[data-nav]:link,[data-nav]:visited{background:linear-gradient(to right, rgb(206.6775, 229.43625, 237.0225), rgb(206.6775, 229.43625, 237.0225)) no-repeat;background-size:0 4px;background-position:bottom left;color:#fff;line-height:1.1;padding-bottom:.175rem;text-decoration:none;transition:color .4s,background-size .4s}[data-nav]:hover,[data-nav]:focus,[data-nav]:active{background-size:100% 4px}[data-nav][data-nav=is-active]:link,[data-nav][data-nav=is-active]:visited,[data-nav][data-nav=is-active]:hover,[data-nav][data-nav=is-active]:focus,[data-nav][data-nav=is-active]:active{background-size:100% 4px}.footer-credit{border-top:1px solid hsl(195,45.7692307692%,87%);display:flow-root;flex:0 0 auto;font-size:.9rem;line-height:1.4rem;padding-top:1.4rem}.footer-credit span{display:block;overflow:hidden;white-space:nowrap}.footer-icon:link,.footer-icon:visited{color:inherit;float:left;margin-right:.35rem}.footer-link:link,.footer-link:visited{font-weight:bold;text-decoration-color:rgba(0,0,0,0)}.footer-link:hover,.footer-link:focus,.footer-link:active{text-decoration-color:currentcolor}.breadcrumb{background:hsl(195,45.7692307692%,87%);padding:.7rem calc(0.7rem + 2.5vw)}.breadcrumb a,.breadcrumb span,.breadcrumb strong{display:inline-block}.project-links{display:flex;justify-content:flex-end;margin:0 0 .7rem}@media(min-width: 50em){.project-links{margin-bottom:0}}.project-link-item{display:flex;list-style:none}.project-link-item+.project-link-item{margin-left:.7rem}.project-link:link,.project-link:visited{border:1px solid rgb(184.6678125,29.77921875,108.1996875);border-radius:1.4rem;padding:.35rem 1.4rem;text-align:center;text-decoration:none;transition:background-color .4s}.project-link:hover,.project-link:focus,.project-link:active{background-color:rgb(184.6678125,29.77921875,108.1996875);color:#fff}.item{margin-bottom:calc(4.2rem + 2.5vw)}[data-item-section]{margin-bottom:2.1rem}[data-item-section=header] .code-block,[data-item-section=header] .text-block{margin-bottom:.7rem}.item-title{font-size:calc(1rem + 1vw)}.item-subtitle{border-bottom:1px solid hsl(0,0%,87%);color:hsl(195,5%,35%);font-weight:normal;margin-bottom:.7rem}.item-subtitle-main{letter-spacing:.05em;text-transform:uppercase}.item-subtitle-main:not(:last-child)::after{content:\": \"}.item-subtitle-supplement{font-family:\"Source Code Pro\",Consolas,Menlo,Monaco,\"Lucida Console\",\"Liberation Mono\",\"DejaVu Sans Mono\",\"Bitstream Vera Sans Mono\",\"Courier New\",monospace,sans-serif;letter-spacing:0;padding-left:.35rem}.item-type,.item-name,.item-value,.alias-title{font-family:\"Source Code Pro\",Consolas,Menlo,Monaco,\"Lucida Console\",\"Liberation Mono\",\"DejaVu Sans Mono\",\"Bitstream Vera Sans Mono\",\"Courier New\",monospace,sans-serif;display:inline-block}.item-type,.item-value,.value-type,.item-note{color:hsl(195,5%,35%);display:inline-block;font-weight:normal}.alias{color:hsl(195,5%,35%);font-style:italic}.alias-title{font-style:normal;font-weight:bolder}.param-list{margin-bottom:.7rem}.param-title{color:hsl(195,5%,35%);font-size:calc(1rem + .5vw)}.param-details{margin-top:.35rem}@media(min-width: 40em){.param-details{margin-left:1.4rem}}@media(min-width: 40em){.requires-wrapper{display:flex;margin-bottom:2.1rem}.requires-wrapper [data-item-section]{flex:1 1 40%;margin-bottom:0;max-width:100%}.requires-wrapper [data-item-section]:first-child{margin-right:1.4rem}}.hljs-comment,.hljs-quote{color:#93a1a1}.hljs-keyword,.hljs-selector-tag,.hljs-addition{color:#859900}.hljs-number,.hljs-string,.hljs-meta .hljs-meta-string,.hljs-literal,.hljs-doctag,.hljs-regexp{color:#2aa198}.hljs-title,.hljs-section,.hljs-name,.hljs-selector-id,.hljs-selector-class{color:#268bd2}.hljs-attribute,.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-class .hljs-title,.hljs-type{color:#b58900}.hljs-symbol,.hljs-bullet,.hljs-subst,.hljs-meta,.hljs-meta .hljs-keyword,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-link{color:#cb4b16}.hljs-built_in,.hljs-deletion{color:#dc322f}.hljs-formula{background:#eee8d5}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bolder}.code-block{align-items:stretch;display:flex;flex:1 1 20em;flex-direction:column;max-height:16.8rem;max-width:100%;overflow:hidden}.code-header{background-color:hsl(195,45.7692307692%,87%);color:hsl(195,5%,24.5%);flex:0 0 auto;padding:0 .7rem}.code-description::before{content:\" – \"}.hljs-pre,.text-block pre{background-color:hsl(195,45.7692307692%,98.7%);border:1px solid hsl(195,45.7692307692%,87%);color:hsl(195,85%,35%);flex:1 1 auto;flex-wrap:wrap}.hljs-pre code,.text-block pre code{padding:.7rem}.example{margin-bottom:1.4rem}.example-code{align-items:stretch;display:flex;flex-wrap:wrap;overflow:hidden}.example-render{border:1px solid hsl(0,0%,87%);border-top:0;padding:.7rem}[data-sassdoc=icon-preview]{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));margin:0 -0.7rem}[data-sassdoc-icon]{margin:1.4rem .7rem;min-width:7rem}[data-sassdoc-icon] [data-icon]{height:calc(1rem + 2vw);width:calc(1rem + 2vw);margin-bottom:.7rem}[data-sassdoc=icon-info]{font-size:.9rem}","/* @docs\nlabel: Core Remedies\nversion: 0.1.0-beta.2\n\nnote: |\n These remedies are recommended\n as a starter for any project.\n\ncategory: file\n*/\n\n\n/* @docs\nlabel: Box Sizing\n\nnote: |\n Use border-box by default, globally.\n\ncategory: global\n*/\n*, ::before, ::after { box-sizing: border-box; }\n\n\n/* @docs\nlabel: Line Sizing\n\nnote: |\n Consistent line-spacing,\n even when inline elements have different line-heights.\n\nlinks:\n - https://drafts.csswg.org/css-inline-3/#line-sizing-property\n\ncategory: global\n*/\nhtml { line-sizing: normal; }\n\n\n/* @docs\nlabel: Body Margins\n\nnote: |\n Remove the tiny space around the edge of the page.\n\ncategory: global\n*/\nbody { margin: 0; }\n\n\n/* @docs\nlabel: Heading Sizes\n\nnote: |\n Switch to rem units for headings\n\ncategory: typography\n*/\nh1 { font-size: 2rem; }\nh2 { font-size: 1.5rem; }\nh3 { font-size: 1.17rem; }\nh4 { font-size: 1.00rem; }\nh5 { font-size: 0.83rem; }\nh6 { font-size: 0.67rem; }\n\n\n/* @docs\nlabel: H1 Margins\n\nnote: |\n Keep h1 margins consistent, even when nested.\n\ncategory: typography\n*/\nh1 { margin: 0.67em 0; }\n\n\n/* @docs\nlabel: Pre Wrapping\n\nnote: |\n Overflow by default is bad...\n\ncategory: typography\n*/\npre { white-space: pre-wrap; }\n\n\n/* @docs\nlabel: Horizontal Rule\n\nnote: |\n 1. Solid, thin horizontal rules\n 2. Remove Firefox `color: gray`\n 3. Remove default `1px` height, and common `overflow: hidden`\n\ncategory: typography\n*/\nhr {\n border-style: solid;\n border-width: 1px 0 0;\n color: inherit;\n height: 0;\n overflow: visible;\n}\n\n\n/* @docs\nlabel: Responsive Embeds\n\nnote: |\n 1. Block display is usually what we want\n 2. Remove strange space-below when inline\n 3. Responsive by default\n\ncategory: embedded elements\n*/\nimg, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n max-width: 100%;\n}\n\n\n/* @docs\nlabel: Aspect Ratios\n\nnote: |\n Maintain intrinsic aspect ratios when `max-width` is applied.\n `iframe`, `embed`, and `object` are also embedded,\n but have no intrinsic ratio,\n so their `height` needs to be set explicitly.\n\ncategory: embedded elements\n*/\nimg, svg, video, canvas {\n height: auto;\n}\n\n\n/* @docs\nlabel: Audio Width\n\nnote: |\n There is no good reason elements default to 300px,\n and audio files are unlikely to come with a width attribute.\n\ncategory: embedded elements\n*/\naudio { width: 100%; }\n\n\n/* @docs\nlabel: Image Borders\n\nnote: |\n Remove the border on images inside links in IE 10 and earlier.\n\ncategory: legacy browsers\n*/\nimg { border-style: none; }\n\n\n/* @docs\nlabel: SVG Overflow\n\nnote: |\n Hide the overflow in IE 10 and earlier.\n\ncategory: legacy browsers\n*/\nsvg { overflow: hidden; }\n\n\n/* @docs\nlabel: HTML5 Elements\n\nnote: |\n Default block display on HTML5 elements\n\ncategory: legacy browsers\n*/\narticle, aside, figcaption, figure, footer, header, hgroup, main, nav, section {\n display: block;\n}\n\n\n/* @docs\nlabel: Checkbox & Radio Inputs\n\nnote: |\n 1. Add the correct box sizing in IE 10\n 2. Remove the padding in IE 10\n\ncategory: legacy browsers\n*/\n[type='checkbox'],\n[type='radio'] {\n box-sizing: border-box;\n padding: 0;\n}\n","// Root Typography\n// ===============\n\n@use 'pkg:accoutrement' as tools;\n@use '../config';\n\n/// # Herman Typography\n/// Initial styling for typographic elements in Herman.\n///\n/// @link https://www.oddbird.net/accoutrement/ Accoutrement\n/// @group style-typography\n\n// Block Reset\n// -----------\n/// Since this was initially built with accoutrement/init --\n/// a more opinionated reset --\n/// this simplified block reset\n/// helps cover the basic assumptions of the code-base\n/// @group style-typography\n* {\n border: solid 0 currentcolor;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n}\n\n/// The root typographic styles provide a default font,\n/// responsive font-size, fallback font-size, and line-height.\n/// @group style-typography\n:root {\n @include tools.font-family('sans');\n\n font-size: tools.size('root');\n font-size: tools.size('responsive');\n line-height: tools.ratio('line-height');\n}\n\n// Hidden\n// ------\n/// Selected text uses a light color from the Herman color palette.\n/// @group style-typography\n[hidden] {\n display: none !important; /* stylelint-disable-line declaration-no-important */\n}\n\n// Images\n// ------\n/// Undo the block image display\n/// caused by changing our reset\n/// from accoutrement/init to cssremedy -\n/// since that would be a noticeable user-facing change.\n/// @group style-typography\nimg {\n display: revert;\n}\n\n// Selection\n// ---------\n/// Selected text uses a light color from the Herman color palette.\n/// @group style-typography\n::selection {\n background-color: tools.color('callout');\n}\n\n// Mark\n// ----\n/// For search-results, we mark target text with a background color.\n/// @group style-typography\nmark {\n background-color: tools.color('callout');\n display: inline-block;\n padding: 0 tools.size('quarter-shim');\n}\n\n// Links\n// -----\n/// Default links use both color and text-underline\n/// to stand out from basic text.\n/// @group style-typography\n/// @see $link\n/// @see $focus\n[href] {\n #{config.$link} {\n color: tools.color('action');\n text-decoration-color: tools.color('underline');\n text-decoration-skip: auto;\n transition:\n text-decoration-color 250ms,\n color 200ms;\n }\n\n #{config.$focus} {\n color: tools.color('focus');\n text-decoration-color: currentcolor;\n }\n}\n\n// Pre\n// ---\n/// Pre-formatted blocks use our monospace `code` font-stack,\n/// and a smaller font-size.\n/// @group style-typography\npre {\n @include tools.font-family('code');\n\n font-size: tools.size('code');\n overflow: auto;\n white-space: pre;\n}\n\n// Code\n// ----\n/// Code uses a monospace font-stack,\n/// and slightly bolder text when inline -\n/// but allows for syntax-highlighting in a block context.\n///\n/// @group style-typography\n/// @see {css} Code Blocks\ncode {\n @include tools.font-family('code');\n\n font-weight: bolder;\n\n pre & {\n display: block;\n font-weight: normal;\n }\n}\n\n// Is Hidden\n// ---------\n/// Text that is provided for screen-reader accessibility only,\n/// can be visually hidden without removing from the DOM.\n/// @group style-typography\n.is-hidden {\n @include tools.is-hidden;\n}\n","@use 'sass:list';\n@use 'sass:string';\n@use 'sass:map';\n@use 'sass:meta';\n@use '../tokens';\n@use '../tokens/api';\n@use './config';\n@use './normalize';\n@use './helpers';\n@use '../tokens/inspect';\n\n/// ### Using WebFonts\n///\n/// Once you've configured your webfont data into a map,\n/// these tools will help you access the data in various ways:\n/// from creating `@font-face` imports,\n/// to calling font-families by any given alias.\n///\n/// @group type-fonts\n\n// Font [function]\n// ---------------\n/// Retrieve and normalize font data from the `$fonts` map\n///\n/// @since 2.0.0 -\n/// - BREAKING: Non-map fonts are interpreted as font-stacks\n/// - BREAKING: Normalized font-data uses proper name-quotation,\n/// and ignores missing or private names/stacks\n/// @since 1.0.0 -\n/// - NEW: Provided to access and normalize a map of font data\n/// for any key in your global `$fonts` map\n/// - NEW: Accepts `$source` map argument,\n/// for custom source-palette\n///\n/// @group type-fonts\n/// @param {*} $font -\n/// A key for accessing the desired font in `$fonts`\n/// @param {map} $source [$fonts] -\n/// Optional Accoutrement-format map of fonts\n/// to use as the origin palette\n/// @return {map} -\n/// A parsed and normalized map of font-data\n@function font($font, $source: config.$fonts) {\n $data: api.get($source, $font);\n $normal: normalize.font($data, $font, $source);\n\n @return $normal;\n}\n\n// Compile Fonts\n// -------------\n/// Compile all the tokens in a font map.\n/// This is particularly useful for exporting\n/// a static version of the token map\n/// with all the Accoutrement syntax removed --\n/// e.g. for use in javascript or documentation.\n///\n/// @since 4.0.0 -\n/// - NEW: Provides an export option for font token maps\n///\n/// @group type-fonts\n///\n/// @param {map} $map [$fonts] -\n/// The map to be compiled\n/// @param {map | null} $source [$fonts] -\n/// A map of reference tokens that can be used\n/// for resolving fonts.\n/// (defaults to the global `$fonts` map)\n/// @return {map} -\n/// A copy of the original map,\n/// with all token values resolved\n@function compile-fonts($map: config.$fonts, $source: config.$fonts) {\n $source: map.merge($source or (), $map);\n\n @return tokens.map-compile-with($map, meta.get-function('font'), $source);\n}\n\n// Font Family [function]\n// ----------------------\n/// Access a font-family from your `$fonts` map,\n/// with name and font-stack.\n///\n/// @since 1.0.0 -\n/// - NEW: Accepts `$source` map argument,\n/// for custom source-palette\n/// @since type-4.0.0 -\n/// - BUGFIX: Provides the correct name for fonts when an alias is given\n///\n/// @group type-fonts\n/// @example scss\n/// $fonts: (\n/// 'sans': (\n/// 'name': 'FranklinGothic',\n/// 'stack': (Helvetica, Arial, sans-serif),\n/// ),\n/// );\n///\n/// html {\n/// font-family: tools.font-family('sans');\n/// }\n///\n/// @param {string} $key -\n/// The key-name of a font in your `$fonts` map.\n/// @param {map} $source [$fonts] -\n/// Optional Accoutrement-format map of fonts\n/// to use as the origin palette\n/// @return {String} -\n/// The full font-stack for the given font,\n/// ready for output with the `font-family` property.\n@function font-family($key, $source: config.$fonts) {\n $font: font($key, $source);\n\n @return map.get($font, 'stack');\n}\n\n// Font Family [mixin]\n// -------------------\n/// Output a font-stack to font-family based on your `$fonts` configuration.\n///\n/// @since 1.0.0 -\n/// - NEW: Accepts `$source` map argument,\n/// for custom source-palette\n///\n/// @group type-fonts\n/// @example scss\n/// $fonts: (\n/// 'FranklinGothic': (\n/// 'stack': (Helvetica, Arial, sans-serif),\n/// ),\n/// 'sans': '#FranklinGothic',\n/// );\n///\n/// html {\n/// @include tools.font-family('sans');\n/// }\n///\n/// @param {string} $key -\n/// The key-name of a font in your `$fonts` map.\n/// @param {map} $source [$fonts] -\n/// Optional Accoutrement-format map of fonts\n/// to use as the origin palette\n@mixin font-family($key, $source: config.$fonts) {\n font-family: font-family($key, $source);\n}\n\n// Font Face [mixin]\n// -----------------\n/// Import any local webfont defined in your `$fonts` configuration\n/// (variants without a path will not be imported).\n///\n/// @since 3.0.0 -\n/// - NEW: Supports `display` setting in font-maps\n/// @since 1.0.0 -\n/// - NEW: Accepts `$source` map argument,\n/// for custom source-palette\n/// @since type-4.0.0 -\n/// - BREAKING: No longer accepts the `$formats` parameter\n///\n/// @group type-fonts\n/// @example scss\n/// $fonts: (\n/// 'body-font': (\n/// 'name': 'Source Sans Pro',\n/// 'formats': 'woff2' 'woff' 'eot',\n/// 'normal': 'sans/sourcesanspro-regular-webfont',\n/// 'italic': 'sans/sourcesanspro-italic-webfont',\n/// 'bold': 'sans/sourcesanspro-bold-webfont',\n/// ),\n/// );\n/// @include tools.font-face('body-font');\n///\n/// @param {string} $key -\n/// The key-name of a font in your `$fonts` map\n/// @param {map} $source [$fonts] -\n/// Optional Accoutrement-format map of fonts\n/// to use as the origin palette\n/// @output `@font-face` import blocks for any defined font-variants.\n@mixin font-face($key, $source: config.$fonts) {\n $font: font($key, $source);\n $variants: helpers.font-get-variants($font);\n $name: map.get($font, 'name');\n\n @if (list.length($variants) > 0) {\n $unicode: map.get($font, 'unicode-range');\n $display: map.get($font, 'display');\n\n @each $variant, $data in $variants {\n $weight: list.nth($variant, 1);\n $style: list.nth($variant, 2);\n\n @include helpers.import-font-face(\n $name,\n $weight,\n $style,\n $data,\n $unicode,\n $display\n );\n }\n }\n}\n\n// Import WebFonts [mixin]\n// -----------------------\n/// Find all the fonts that include data for imports,\n/// and generate `@font-face` blocks for each individual font and variant.\n///\n/// @since 2.0.0 -\n/// - NEW: Accepts `$source` parameter,\n/// which uses global `$fonts` by default\n/// - BREAKING: No longer imports private fonts,\n/// but will import a direct alias of the private font\n/// @since 1.0.0 -\n/// - BREAKING: No longer accepts the `$fonts` parameter\n/// @since type-4.0.0 -\n/// - BREAKING: No longer accepts the `$formats` parameter\n///\n/// @group type-fonts\n/// @example scss\n/// $fonts: (\n/// 'body-font': (\n/// 'name': 'Source Sans Pro',\n/// 'formats': 'woff2' 'woff' 'eot',\n/// 'normal': 'sans/sourcesanspro-regular-webfont',\n/// 'italic': 'sans/sourcesanspro-italic-webfont',\n/// 'bold': 'sans/sourcesanspro-bold-webfont',\n/// ),\n/// // alias keys, and fonts without path data will be ignored…\n/// 'alias': '#body-font',\n/// 'google-font': (\n/// 'source': 'https://fonts.google.com/',\n/// ),\n/// );\n/// @include tools.import-webfonts;\n///\n/// @param {map} $source [$fonts] -\n/// Optional Accoutrement-format map of fonts\n/// to use as the origin palette\n/// @output Any number of `@font-face` blocks.\n@mixin import-webfonts($source: config.$fonts) {\n @each $key, $font in $source {\n @if not\n inspect.is-alias-for($source, $key) and not\n inspect.is-private-token($key)\n {\n @include font-face($key);\n }\n }\n}\n","// Hidden\n// ======\n\n/// # Accessibility\n///\n/// A simple set of utilities\n/// for handling text-visibility\n/// and screen-reader accessibility\n/// across your site.\n///\n/// @group type-a11y\n\n// Is Hidden\n// ---------\n/// Hide an element using either the `clip` or `position` method.\n/// @group type-a11y\n/// @param {'clip' | 'position'} $method ['clip'] -\n/// The hiding method to use.\n@mixin is-hidden($method: 'clip') {\n @if $method == 'position' {\n @include _is-hidden-position;\n } @else {\n @include _is-hidden-clip;\n }\n}\n\n// Is Hidden -- Position\n// ---------------------\n/// Hide an element by positioning it off the page.\n/// @group type-a11y\n/// @access private\n@mixin _is-hidden-position {\n left: -9999px;\n pointer-events: none;\n position: absolute;\n top: -9999px;\n}\n\n// Is Hidden -- Clip\n// -----------------\n/// Hide an element by clipping it in place.\n/// @group type-a11y\n/// @access private\n@mixin _is-hidden-clip {\n /* stylelint-disable-next-line property-no-deprecated */\n clip: rect(1px, 1px, 1px, 1px);\n clip-path: inset(1px 1px 1px 1px);\n height: 1px;\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n width: 1px;\n}\n","@use 'sass:meta';\n@use 'sass:map';\n@use 'sass:string';\n@use './config';\n@use '../tokens';\n@use '../tokens/api';\n\n/// # Accessing Sizes\n/// @group scale-sizes\n\n// Size [function]\n// ---------------\n/// Access a named size in your `$sizes` map,\n/// using any comparable units.\n///\n/// @since 1.0.0 -\n/// - BREAKING: The previous `$units…` vararg\n/// has been replaced with `$do` map argument,\n/// for flexible on-the-fly adjustments.\n/// Non-map `$do` values are converted to\n/// `('convert-units': $do)` before processing,\n/// to provide a shortcut for unit-conversions.\n/// `size('root', 'cm')` will continue to work,\n/// but `size('root', 'em', 10px)` should be changed to\n/// `size('root', 'em' 10px)` (with all unit args in a single list)\n/// - NEW: Accepts `$source` map argument,\n/// for custom source-palette\n///\n/// @group scale-sizes\n///\n/// @param {string} $size -\n/// The name of any size in your configuration\n/// @param {map | unit-args | null} $do [null] -\n/// A map of function/ratio adjustments to run on the returned value,\n/// or a unit followed by any necessary arguments\n/// for conversion\n/// @param {map} $source [$sizes] -\n/// Optional Accoutrement-format map of sizes to use as the origin palette\n/// @return {length} -\n/// The calculated length, in the requested units.\n@function size($size, $do: null, $source: config.$sizes) {\n @if ($do) and (meta.type-of($do) != 'map') {\n $do: (\n 'to': $do,\n );\n }\n\n $return: $size;\n\n @if (meta.type-of($size) == 'number') {\n // apply adjustments\n @if $do {\n $return: api.compile($source, $size $do);\n }\n } @else {\n // get the desired token\n $return: api.get($source, $size, $do);\n }\n\n @return if(\n sass((meta.type-of($return) == 'string')): string.unquote($return);\n else: $return\n );\n}\n\n// Compile Sizes\n// -------------\n/// Compile all the tokens in a size map.\n/// This is particularly useful for exporting\n/// a static version of the token map\n/// with all the Accoutrement syntax removed --\n/// e.g. for use in javascript or documentation.\n///\n/// @since 4.0.0 -\n/// - NEW: Provides an export option for size token maps\n///\n/// @group scale-sizes\n///\n/// @param {map} $map [$sizes] -\n/// The map to be compiled\n/// @param {map | null} $source [$sizes] -\n/// A map of reference tokens that can be used\n/// for resolving sizes.\n/// (defaults to the global `$sizes` map)\n/// @return {map} -\n/// A copy of the original map,\n/// with all token values resolved\n@function compile-sizes($map: config.$sizes, $source: config.$sizes) {\n $source: map.merge($source or (), $map);\n\n @return tokens.map-compile-with(\n $map,\n meta.get-function('size'),\n null,\n $source\n );\n}\n\n// Negative [function]\n// -------------------\n/// Return the inverse value of any length,\n/// in comparable units.\n///\n/// @since 1.0.0 -\n/// - BREAKING: The previous `$units…` vararg\n/// has been replaced with `$do` map argument,\n/// for flexible on-the-fly adjustments.\n/// Non-map `$do` values are converted to\n/// `('convert-units': $do)` before processing,\n/// to provide a shortcut for unit-conversions.\n/// `size('root', 'cm')` will continue to work,\n/// but `size('root', 'em', 10px)` should be changed to\n/// `size('root', 'em' 10px)` (with all unit args in a single list)\n/// - NEW: Accepts `$source` map argument,\n/// for custom source-palette\n///\n/// @group scale-sizes\n///\n/// @param {string | length | list} $size -\n/// The name of a size in your configuration (e.g. `line-height`),\n/// or a length to be converted into different units (e.g. `24px`),\n/// or a base-size and adjustments to be made\n/// (e.g. `24px (scale: '_minor-third' 2)`).\n/// For the sake of consistent documentation,\n/// I recommend keeping adjustments in the configuration\n/// whenever possible.\n/// @param {map | unit-args | null} $do [null] -\n/// A map of function/ratio adjustments to run on the returned value,\n/// or a unit followed by any necessary arguments\n/// for conversion\n/// @param {map} $source [$sizes] -\n/// Optional Accoutrement-format map of sizes to use as the origin palette\n/// @return {length} -\n/// The calculated negative length, in the requested units.\n@function negative($size, $do: null, $source: config.$sizes) {\n $size: size($size, $do, $source);\n\n @if (meta.type-of($size) == 'string') {\n @if (string.index($size, 'calc(') == 1) {\n $size: string.slice($size, 6, -2);\n }\n\n @return 'calc(-1 * (#{$size}))';\n }\n\n @return -1 * $size;\n}\n\n// Square [mixin]\n// --------------\n/// Create a square by setting equal CSS `height` and `width` properties\n/// with the given size & unit value.\n///\n/// @since 1.0.0 -\n/// - BREAKING: The previous `$units…` vararg\n/// has been replaced with `$do` map argument,\n/// for flexible on-the-fly adjustments.\n/// Non-map `$do` values are converted to\n/// `('convert-units': $do)` before processing,\n/// to provide a shortcut for unit-conversions.\n/// `size('root', 'cm')` will continue to work,\n/// but `size('root', 'em', 10px)` should be changed to\n/// `size('root', 'em' 10px)` (with all unit args in a single list)\n/// - NEW: Accepts `$source` map argument,\n/// for custom source-palette\n///\n/// @group scale-sizes\n///\n/// @param {string | length | list} $size -\n/// The name of a size in your configuration (e.g. `line-height`),\n/// or a length to be converted into different units (e.g. `24px`),\n/// or a base-size and adjustments to be made\n/// (e.g. `24px ('_minor-third': 2)`).\n/// For the sake of consistent documentation,\n/// I recommend keeping adjustments in the configuration\n/// whenever possible.\n/// @param {map | unit-args | null} $do [null] -\n/// A map of function/ratio adjustments to run on the returned value,\n/// or a unit followed by any necessary arguments\n/// for conversion\n/// @param {map} $source [$sizes] -\n/// Optional Accoutrement-format map of sizes to use as the origin palette\n/// @output -\n/// Equal CSS height and width properties,\n/// set to the given size and units.\n@mixin square($size, $do: null, $source: config.$sizes) {\n $size: size($size, $do, $source);\n\n height: $size;\n width: $size;\n}\n","// Icons\n// =====\n\n@use 'pkg:accoutrement' as tools;\n\n/// # Herman Icons\n/// Herman doesn't use very many icons internally…\n/// @icons assets/svg/\n/// @group style-icons\n\n/// ## macro `icon()`\n/// Icons should be added to the html using our\n/// `icon()` utility macro in Nunjucks.\n///\n/// - `name` :: {`string`}<br/>\n/// The string ID used to identify the icon desired.\n/// - `alt=none` :: {`string` | `none`}<br/>\n/// Alternate text for the icon will be visually hidden,\n/// but available to screen-readers.\n/// - `size=none` :: {`string` | `none`}<br/>\n/// Currently supported icon sizes include\n/// `'nav-icon'` and `'footer-logo'`.\n/// - `class=none` :: {`string` | `none`}<br/>\n/// Any classes that should be applied to the icon.\n///\n/// @group style-icons\n/// @example njk\n/// {% import 'utility.macros.njk' as utility %}\n/// {{ utility.icon('menu', size='nav-icon') }}\n\n// Data-Icon\n// ---------\n/// Icons inherit the color of their surroundings,\n/// and default to a `1em` square if no other dimensions are provided.\n/// @group style-icons\n[data-icon] {\n @include tools.square(1em);\n\n fill: currentcolor;\n}\n\n// Icon-Size: Nav\n// --------------\n/// Used for the menu-bar icon.\n/// @group style-icons\n[data-icon-size='nav-icon'] {\n @include tools.square('nav-icon');\n}\n\n// Icon-Size: Footer Logo\n// ----------------------\n/// Used for the footer Herman logo.\n/// @group style-icons\n[data-icon-size='footer-logo'] {\n @include tools.square('footer-logo');\n}\n","// Sample Previews\n// ===============\n\n@use 'pkg:accoutrement' as tools;\n@use '../samples/colors';\n\n// Add color sample CSS custom properties\n:root {\n @include tools.colors--(colors.$demo-colors);\n}\n","@use 'api';\n@use 'inspect';\n@use '../vars';\n@use 'sass:map';\n\n/// # Tokens » Custom Properties\n/// There are many cases where it can be useful\n/// to convert a Sass token map into CSS custom properties.\n/// Here are some tools to help.\n/// @group token-vars\n\n// Token--\n// -------\n/// Set a single custom property based on a map-token,\n/// with optional alias, fallback, and prefixing\n///\n/// @since 2.0.0 -\n/// - NEW: Initial release\n///\n/// @group token-vars\n/// @example scss\n/// $colors: (\n/// '_brand': hsl(120, 50%, 50%),\n/// 'text': '#_brand' ('color.scale': ('lightness': -50%)),\n/// 'border': '#text',\n/// );\n/// .example {\n/// @include tools.token--($colors, 'border');\n/// @include tools.token--($colors, 'outline', 'border', red);\n/// }\n///\n/// @param {map} $map -\n/// Accoutrement map of tokens to use as source\n/// @param {*} $token -\n/// Token name available in the source `$map`\n/// @param {string | null} $value [null] -\n/// Optional new value for the given token\n/// @param {*} $fallback [true] -\n/// The optional fallback value for a `var()` function:\n/// - `true` will generate a fallback based on the token value\n/// - A token name will fallback to the value of that\n/// CSS variable and then to the token's calculated value\n/// - Any other fallback will be passed through unchanged\n/// @param {string | null} $prefix [null] -\n/// Optional prefix used for naming token variables\n@mixin token--($map, $token, $value: null, $fallback: true, $prefix: null) {\n $prop: vars.ident($token, $prefix);\n $val: $value or $token;\n $ref: $value or inspect.is-alias-for($map, $val);\n\n @if ($ref) {\n $val: var-token($map, $ref, $fallback, $prefix);\n } @else {\n $val: api.get($map, $val);\n }\n\n #{$prop}: $val;\n}\n\n// Tokens--\n// --------\n/// Convert any Accoutrement Tokens map\n/// into CSS custom properties (aka variables).\n///\n/// - Token names that start with `_` or `-` are considered \"private\"\n/// and will not be output as variables\n/// - Tokens that contain a simple alias with no adjustments\n/// will be output with a `var()` value,\n/// keeping the alias relationship intact\n///\n/// @since 2.0.0 -\n/// - NEW: Initial release\n///\n/// @group token-vars\n/// @example scss\n/// $colors: (\n/// '_brand': hsl(120, 50%, 50%),\n/// 'text': '#_brand' ('color.scale': ('lightness': -50%)),\n/// 'border': '#text',\n/// );\n/// html {\n/// @include tools.tokens--($colors, 'color-');\n/// }\n///\n/// @param {map} $map -\n/// Accoutrement map of tokens to set as CSS variables\n/// @param {string | null} $prefix [null] -\n/// Optional prefix for naming token variables\n/// @output\n/// Custom properties for all public tokens in the map\n@mixin tokens--($map, $prefix: null) {\n @each $token in map.keys($map) {\n @if not inspect.is-private-token($token) {\n @include token--($map, $token, $prefix: $prefix);\n }\n }\n}\n\n// As-Var\n// ------\n/// Access the CSS variable associated with a given token,\n/// along with a fallback value based on the token itself\n///\n/// @since 2.0.0 -\n/// - NEW: Initial release\n///\n/// @group token-vars\n/// @example scss\n/// $colors: (\n/// '_brand': hsl(120, 50%, 50%),\n/// 'text': '#_brand' ('color.scale': ('lightness': -50%)),\n/// 'border': '#text',\n/// );\n/// .example {\n/// border-color: tools.var-token($colors, 'border');\n/// color: tools.var-token($colors, 'text', black);\n/// }\n///\n/// @param {map} $map -\n/// Accoutrement map of tokens to use as source\n/// @param {*} $token -\n/// Token name available in the source `$map`\n/// @param {*} $fallback [true] -\n/// The optional fallback value for a `var()` function:\n/// - `true` will try to generate a fallback based on the color value\n/// - A color name will fallback to the value of that\n/// CSS variable and then to the color's calculated value\n/// - Any other fallback will be passed through unchanged\n/// @param {string | null} $prefix [null] -\n/// Optional prefix used for naming token variables\n/// @return {string} -\n/// CSS variable call, in the format:\n/// `var(--<color>, <fallback>)`\n@function var-token($map, $token, $fallback: true, $prefix: null) {\n $var: vars.ident($token, $prefix);\n\n @if ($fallback == true) {\n @if map.has-key($map, $token) {\n @return var($var, api.get($map, $token));\n }\n } @else if map.has-key($map, $fallback) {\n @return var($var, var-token($map, $fallback, true, $prefix));\n } @else if $fallback {\n @return var($var, $fallback);\n }\n\n @return var($var);\n}\n","// Root Layout\n// ===========\n\n[data-herman] {\n overflow-x: hidden;\n}\n","// Layout Regions\n// ==============\n/// # Herman Layout Regions\n/// The Herman layout is comprised of several \"regions\" --\n/// such as the banner, nav, and main areas --\n/// as well as the `app` and `container` wrapping regions.\n/// @group style-regions\n\n@use 'pkg:accoutrement' as tools;\n\n// General\n// -------\n/// All regions are full-width by default.\n///\n/// @group style-regions\n[data-region] {\n width: 100%;\n}\n\n// App\n// ---\n/// The `app` region contains the entire application.\n///\n/// @group style-regions\n[data-region='app'] {\n display: flex;\n flex-direction: column;\n height: 100%;\n margin: 0 auto;\n min-height: 100vh;\n padding: 0;\n}\n\n// Container\n// ---------\n/// The `container` region acts as a layout wrapper\n/// for the navigation and main content.\n///\n/// @group style-regions\n[data-region='container'] {\n display: flex;\n flex: 1 1 auto;\n position: relative;\n\n @include tools.above('page-break') {\n justify-content: flex-end;\n }\n}\n","@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:math';\n@use '../scale';\n@use '../../sass/tokens';\n@use '../internal/throw';\n@use 'query-utils' as utils;\n\n/// # Media Queries\n/// @group layout-queries\n\n// Breakpoints\n// -----------\n/// Establish a map of named breakpoints.\n///\n/// If using [Accoutrement Scale](https://www.oddbird.net/accoutrement/docs/scale.html),\n/// you can use the scale syntax\n/// for describing size-relationships and adjustments –\n/// and even reference `$sizes` as though they are `$breakpoints`.\n/// Otherwise, the map should contain only valid CSS length values.\n///\n/// @since 0.1.0 -\n/// - BREAKING: Uses the new [shared](tokens.html) map syntax,\n/// for internal references and adjustments\n///\n/// @group layout-queries\n/// @link https://zellwk.com/blog/media-query-units/\n/// PX, EM, or REM Media Queries?\n/// @example scss - defining breakpoints\n/// tools.$breakpoints: (\n/// 'small': 30em,\n/// 'medium': 45em,\n/// );\n/// @example scss - using Accoutrement-scale\n/// tools.$breakpoints: (\n/// 'small': 30em ('convert-units': 'browser-ems'),\n/// 'medium': '#small' ('times': 1.5),\n/// );\n///\n/// @type map\n$breakpoints: () !default;\n\n// Break [function]\n// ----------------\n/// Return a breakpoint from the `$breakpoint` map,\n/// or the Accoutrement-scale `$sizes` map if it's available.\n///\n/// @since 1.0.0 -\n/// - NEW: Accepts `$do` map argument,\n/// for on-the-fly adjustments\n/// - NEW: Accepts `$source` map argument,\n/// for custom breakpoint source-palette\n/// - NEW: Accepts `$scale` boolean argument,\n/// to turn off access to [scale](scale.html) plugin `$sizes` map\n///\n/// @group layout-queries\n///\n/// @param {string} $break -\n/// The name or value of a breakpoint\n/// @param {map | null} $do [null] -\n/// A map of function/ratio adjustments to run on the returned value\n/// @param {map} $source [$breakpoints] -\n/// Optional Accoutrement-format map of breakpoints\n/// to use as the origin palette\n/// @param {boolean} $scale [true] -\n/// By default, we merge in any `$sizes` available\n/// from the [scale](scale.html) plugin --\n/// making both `$breakpoints` and `$sizes` keys available\n/// @return {length} -\n/// The retrieved value of a named breakpoint\n/// @throws `$break` is not a valid length or keyword\n@function break($break, $do: null, $source: $breakpoints, $scale: true) {\n @if ($scale) {\n $source: map.merge(scale.$sizes, $source);\n }\n\n @if (meta.type-of($break) == 'number') and (math.unit($break)) {\n // apply adjustments\n @if $do {\n @return tokens.compile($source, $break $do);\n }\n\n // return color without changes\n @return $break;\n }\n\n // get breakpoint\n $return: tokens.get($source, $break, $do);\n\n // validate\n @if (meta.type-of($return) != 'number') or (math.is-unitless($return)) {\n @return throw.error(\n '`#{$break}` is not a valid length or keyword for $break',\n 'break'\n );\n }\n\n @return $return;\n}\n\n// Below [mixin]\n// -------------\n/// Generate a max–<`width`/`height`> query,\n/// for styling elements below the given viewport width.\n///\n/// To help with overlapping min/max queries,\n/// we remove `1px` (or `0.01em`) from every max