@patternfly/pfe-styles
Version:
Helper classes for PatternFly Elements
1 lines • 47.6 kB
Source Map (JSON)
{"version":3,"sources":["pfe-base.scss","../../pfe-sass/extends/_typography_extends.scss","../../pfe-sass/functions/_custom-properties.scss","pfe-base.css","../../pfe-sass/mixins/_custom-properties.scss","../../pfe-sass/mixins/_copy-mixins.scss"],"names":[],"mappings":"AAmFA;EC3EI,kFC6BgC;ED7BhC,iHC6BgC;ED5BhC,gBC4BgC;ED5BhC,+CC4BgC;ED3BhC,gBC2BgC;ED3BhC,sDC2BgC;ACjCpC;;AHyFA;;;EC5EI,4BAA8C;EAA9C,0DAA8C;AEPlD;;AHmFA;;;EC1EM,mBCkB8B;EDlB9B,+DCkB8B;ACrBpC;;AH6EA;;;EClEM,qBCU8B;EDV9B,iECU8B;ACfpC;;AHuEA;;EC1DM,kBCE8B;EDF9B,8DCE8B;ACVpC;;AHtBA;;;EAGE,8BAAsB;UAAtB,sBAAsB;AGyBxB;;AHtBA;;;;;;;;;;;;;;;;;EAiBE,UAAU;EACV,aAAa;AGyBf;;AH3CA;;;;;;;;;;;;;;;;;EAqBM,gBAAgB;AG0CtB;;AHtCA;;;;EAIE,SAAS;EACT,oBAAoB;AGyCtB;;AHtCA;;;;;;EAME,eAAe;EACf,YAAY;AGyCd;;AHtCA;EACE,SAAS;AGyCX;;AHtCA;EACE,iBAAiB;EACjB,yBAAyB;AGyC3B;;AHtCA;;EAEE,UAAU;EACV,gBAAgB;AGyClB;;AHpCA;EINU,+DAA+D;EAA/D,6EAA+D;EAA/D,4DAA+D;EAA/D,6EAA+D;EAA/D,6EAA+D;EAA/D,iFAA+D;EAA/D,2EAA+D;EAA/D,8FAA+D;EAA/D,8FAA+D;EAA/D,6FAA+D;EJQvE,cEpCkC;EFoClC,gDEpCkC;ACoFpC;;AHtCA;EAEE,8EAAA;EACA,eAA+D;EAA/D,qGAA+D;EAC/D,cElDkC;EFkDlC,6CElDkC;EFmDlC,gBAAgB;EAChB,SAAS;AGwCX;;AHpCA;EKEQ,wFH1D4B;EG0D5B,gIH1D4B;EG2D5B,gBH3D4B;EG2D5B,wDH3D4B;EG4D5B,gBH5D4B;EG4D5B,uDH5D4B;EG8D5B,kBAA4E;EAA5E,6GAA4E;AFqCpF;;AH3CA;EKnDQ,mBHL4B;EGK5B,kEHL4B;ACuGpC;;AH/CA;EKEQ,wFH1D4B;EG0D5B,gIH1D4B;EG2D5B,gBH3D4B;EG2D5B,wDH3D4B;EG4D5B,gBH5D4B;EG4D5B,uDH5D4B;EG8D5B,iBAA4E;EAA5E,4GAA4E;AFgDpF;;AHtDA;EKnDQ,mBHL4B;EGK5B,kEHL4B;ACkHpC;;AH1DA;EKEQ,wFH1D4B;EG0D5B,gIH1D4B;EG2D5B,gBH3D4B;EG2D5B,wDH3D4B;EG4D5B,gBH5D4B;EG4D5B,uDH5D4B;EG8D5B,kBAA4E;EAA5E,4GAA4E;AF2DpF;;AHjEA;EKnDQ,mBHL4B;EGK5B,kEHL4B;AC6HpC;;AHrEA;EKEQ,wFH1D4B;EG0D5B,gIH1D4B;EG2D5B,gBH3D4B;EG2D5B,wDH3D4B;EG4D5B,gBH5D4B;EG4D5B,uDH5D4B;EG8D5B,mBAA4E;EAA5E,6GAA4E;AFsEpF;;AH5EA;EKnDQ,mBHL4B;EGK5B,kEHL4B;ACwIpC;;AHhFA;EKEQ,wFH1D4B;EG0D5B,gIH1D4B;EG2D5B,gBH3D4B;EG2D5B,wDH3D4B;EG4D5B,gBH5D4B;EG4D5B,uDH5D4B;EG8D5B,eAA4E;EAA5E,yGAA4E;AFiFpF;;AHvFA;EKnDQ,mBHL4B;EGK5B,kEHL4B;ACmJpC;;AH3FA;EKEQ,wFH1D4B;EG0D5B,gIH1D4B;EG2D5B,gBH3D4B;EG2D5B,wDH3D4B;EG4D5B,gBH5D4B;EG4D5B,uDH5D4B;EG8D5B,mBAA4E;EAA5E,6GAA4E;AF4FpF;;AHlGA;EKnDQ,mBHL4B;EGK5B,kEHL4B;AC8JpC;;AHtGA;EKZY,eAA4D;EAA5D,qGAA4D;AFsHxE;;AH1GA;EKnDQ,qBHL4B;EGK5B,iEHL4B;ACsKpC;;AHhFA;EACE,0CErByH;EFqBzH,yCErByH;EFsBzH,gEEtByH;UFsBzH,wDEtByH;EFsBzH,sEEtByH;UFsBzH,8DEtByH;ACyG3H;;AHrFA;EAMM,oDE1BqH;EF0BrH,mDE1BqH;EF2BrH,4EE3BqH;UF2BrH,oEE3BqH;EF2BrH,kFE3BqH;UF2BrH,0EE3BqH;AC8G3H;;AH1FA;EAMM,oDE1BqH;EF0BrH,mDE1BqH;EF2BrH,4EE3BqH;UF2BrH,oEE3BqH;EF2BrH,kFE3BqH;UF2BrH,0EE3BqH;ACmH3H;;AH/FA;EAMM,sDE1BqH;EF0BrH,qDE1BqH;EF2BrH,yEE3BqH;UF2BrH,iEE3BqH;EF2BrH,+EE3BqH;UF2BrH,uEE3BqH;ACwH3H;;AHxFA;;EAEE,eAAe;AG2FjB","file":"pfe-base.css","sourcesContent":["//@TODO, pull from https://github.com/patternfly/patternfly-next/blob/master/src/patternfly/_globals.scss#L90\n@import \"../../pfe-sass/pfe-sass\";\n$LOCAL: pfelement;\n\n// NORMALIZE\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:root,\nbody,\np,\nblockquote,\nfigure,\nfieldset,\nlegend,\ntextarea,\npre,\niframe,\nhr,\nh1, \nh2, \nh3, \nh4, \nh5, \nh6 {\n padding: 0;\n margin-top: 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n margin: 0;\n font-family: inherit;\n}\n\nimg,\nembed,\niframe,\nobject,\naudio,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\niframe {\n border: 0;\n}\n\ntable {\n border-spacing: 0;\n border-collapse: collapse;\n}\n\ntd,\nth {\n padding: 0;\n text-align: left;\n}\n\n// PatternFly Styles\n\n:root {\n @include pfe-set-broadcast-context(light);\n font-size: pfe-var(FontSize--root);\n}\n\n// Note: this is a quick & heavy-handed solution for shrinking everything on mobile\n// @media (max-width: 768px) { \n// :root { \n// --pf-global--FontSize--root: 0.86em;\n// }\n// }\n\nbody {\n @extend %pfe-content-base;\n /* This variable is intentionally left empty for light DOM within components */\n font-size: var(--pf-c--FontSize, #{pfe-var(content--FontSize)});\n color: pfe-var(text);\n text-align: left;\n margin: 0;\n}\n\n// HTML TYPOGRAPHY\n.pfe-c-content {\n // HEADINGS\n @each $element in (h1, h2, h3, h4, h5, h6, p) {\n #{$element} {\n @include pfe-content ($element); \n }\n }\n\n // TEXT & LISTS\n // paragraphs, list items, etc inherit from the body\n dl,\n ol,\n ul {\n @extend %pfe-content--list;\n }\n dd,\n dt,\n li{\n @extend %pfe-content--list-item;\n }\n li > ol,\n li > ul {\n @extend %pfe-content--nested-list;\n }\n\n // @TODO: Tables, blockquotes\n\n}\n \n// LINKS \na {\n color: pfe-broadcasted(link);\n text-decoration: pfe-broadcasted(link-decoration);\n\n @each $state in (hover, focus, visited) {\n &:#{$state} {\n color: pfe-broadcasted(link--#{$state});\n text-decoration: pfe-broadcasted(link-decoration--#{$state});\n }\n }\n}\n\nbutton,\na {\n cursor: pointer;\n}\n","////\n/// @group typography\n////\n\n/// Base typography typically set on a body or html tag to cascade down to all typographical elements.\n/// @see {mixin} pfe-typography \n/// @requires {function} pfe-var\n%pfe-content-base {\n font-family: pfe-var(font-family);\n line-height: pfe-var(line-height);\n font-weight: pfe-var(font-weight--light);\n}\n\n/// List items\n/// @see {mixin} pfe-typography \n/// @requires {function} pfe-var\n%pfe-content--list {\n padding-left: calc(#{pfe-var(ui--indent)} * 2);\n &:not(:last-child):not(:empty) {\n margin-bottom: pfe-var(content-spacer--body--md); // 16px\n }\n}\n\n/// @see {mixin} pfe-typography \n/// @requires {function} pfe-var\n%pfe-content--list-item {\n &:not(:last-child):not(:empty) {\n margin-bottom: pfe-var(content-spacer--body--sm); // 8px\n }\n}\n\n/// Adds extra space above nested ordered or unordered lists, within other lists. `UL + UL` or `OL + OL`\n/// @see {mixin} pfe-typography \n/// @requires {function} pfe-var\n%pfe-content--nested-list {\n margin-top: pfe-var(content-spacer--body--sm); // 8px\n}\n\n// TITLE MODIFERS\n@each $size in (6xl, 5xl, 4xl, 3xl, 2xl, xl, lg, md, sm, xs) {\n %pfe-title--#{$size} {\n @include pfe-typography($size, $base: true, $spacing: true); \n }\n}\n\n// TEXT MODIFERS\n@each $size in (lg, md, sm, xs) {\n %pfe-text--#{$size} {\n @include pfe-typography($size, $type: \"text\"); \n }\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map - Sass map of variables\n/// @param {String} $fallback [null] - Optional fallback override\n/// @param {Boolean} $use-fallback [true] - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n // Start building the variable declaration\n $var-declaration: \"--#{$prefix}--\";\n @if $prefix == \"pf-c\" {\n $var-declaration: \"--#{$prefix}-\"; // one dash at the end\n }\n // If the category exists, inject that into the string\n @if $category != \"\" {\n $var-declaration: \"#{$var-declaration}#{$category}--\";\n }\n // Append the key to the string\n $var-declaration: \"#{$var-declaration}#{$key}\";\n\n // If the fallback is not provided but use-fallback is set to true\n @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n $fallback: map-get($map, $key);\n }\n @if $fallback != null {\n // Create the variable declaration\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration}); \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n/// :host {\n/// padding-top: #{pfe-local(paddingTop)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a fallback is not defined, use the global variables map\n @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n @if $region == null {\n $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n }\n @else {\n $submap: map-get($LOCAL-VARIABLES, $region);\n @if type-of($submap) == \"map\" {\n $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n }\n }\n }\n\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n\n // Start building the variable declaration\n $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n \n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n/// :host {\n/// color: pfe-broadcasted(link);\n/// }\n/// @example - css\n/// :host {\n/// color: var(--pfe-broadcasted--link, #06c);\n/// }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n $fallback: \"\";\n @if $use-fallback {\n $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n }\n @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n }\n @else {\n @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n/// .my-element {\n/// z-index: pfe-zindex( content );\n/// }\n\n@function pfe-zindex($cssvar) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-zindex, $var-name) != null {\n @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n }\n @else {\n @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n/// .my-element {\n/// background-color: pfe-fetch( ui-base );\n/// }\n@function pfe-fetch($name, $region: null) {\n $var-name: to-string($name, \"--\");\n @if $region != null and map-deep-get($LOCAL-VARIABLES, $region, $var-name) != null {\n @return map-deep-get($LOCAL-VARIABLES, $region, $var-name);\n }\n @else if $region == null and map-get($LOCAL-VARIABLES, $var-name) != null {\n @return map-get($LOCAL-VARIABLES, $var-name);\n }\n @else if map-get($pfe-vars, $var-name) != null {\n @return map-get($pfe-vars, $var-name);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return map-get($pfe-colors, $var-name);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return map-get($pfe-broadcasted, $var-name);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return map-get($pfe-typography-base, $var-name);\n }\n\n // PATTERNFLY CORE\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return map-get($pf-type-sizing, $var-name);\n }\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return map-get($pf-type-sizing--component, $var-name);\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return map-get($pf-type-sizing--modifers, $var-name);\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return map-get($pf-type-sizing--content, $var-name);\n }\n // DEPRECATED\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return map-get($pfe-typography-base-deprecated, $var-name);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return map-get($pfe-typography-deprecated, $var-name);\n }\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n/// .my-element {\n/// padding: pfe-var( container-spacer );\n/// font-size: pfe-var( font-size );\n/// }\n/// @example - css Rendered output\n/// .my-element {\n/// padding: var(--pfe-theme--container-spacer, 16px);\n/// font-size: var(--pfe-theme--font-size, 16px);\n/// }\n@function pfe-var($cssvar, $fallback: null) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-vars, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-vars, $fallback);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return pfe-get-from-map(\"color\", $var-name, $pfe-colors, $fallback);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-broadcasted);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base, $fallback);\n }\n // PATTERNFLY CORE:\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing, $fallback, $prefix: \"pf-global\");\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--modifers, $fallback, $prefix: \"pf-c\");\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--content, $fallback, $prefix: \"pf-c\");\n }\n // PFE components (must be below core)\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--component, $fallback);\n }\n\n // DEPRECATED:\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base-deprecated, $fallback);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-deprecated, $fallback);\n }\n\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}","body, .pfe-c-content p {\n font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif);\n line-height: var(--pfe-theme--line-height, 1.5);\n font-weight: var(--pfe-theme--font-weight--light, 300);\n}\n\n.pfe-c-content dl,\n.pfe-c-content ol,\n.pfe-c-content ul {\n padding-left: calc(var(--pfe-theme--ui--indent, 20px) * 2);\n}\n\n.pfe-c-content dl:not(:last-child):not(:empty),\n.pfe-c-content ol:not(:last-child):not(:empty),\n.pfe-c-content ul:not(:last-child):not(:empty) {\n margin-bottom: var(--pfe-theme--content-spacer--body--md, 1rem);\n}\n\n.pfe-c-content dd:not(:last-child):not(:empty),\n.pfe-c-content dt:not(:last-child):not(:empty),\n.pfe-c-content li:not(:last-child):not(:empty) {\n margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem);\n}\n\n.pfe-c-content li > ol,\n.pfe-c-content li > ul {\n margin-top: var(--pfe-theme--content-spacer--body--sm, 0.5rem);\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:root,\nbody,\np,\nblockquote,\nfigure,\nfieldset,\nlegend,\ntextarea,\npre,\niframe,\nhr,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n padding: 0;\n margin-top: 0;\n}\n\n:root:last-child,\nbody:last-child,\np:last-child,\nblockquote:last-child,\nfigure:last-child,\nfieldset:last-child,\nlegend:last-child,\ntextarea:last-child,\npre:last-child,\niframe:last-child,\nhr:last-child,\nh1:last-child,\nh2:last-child,\nh3:last-child,\nh4:last-child,\nh5:last-child,\nh6:last-child {\n margin-bottom: 0;\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n margin: 0;\n font-family: inherit;\n}\n\nimg,\nembed,\niframe,\nobject,\naudio,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\niframe {\n border: 0;\n}\n\ntable {\n border-spacing: 0;\n border-collapse: collapse;\n}\n\ntd,\nth {\n padding: 0;\n text-align: left;\n}\n\n:root {\n --pfe-broadcasted--text: var(--pfe-theme--color--text, #151515);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted, #6a6e73);\n --pfe-broadcasted--link: var(--pfe-theme--color--link, #06c);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover, #004080);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus, #004080);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited, #6753ac);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited, none);\n font-size: var(--pf-global--FontSize--root, 1em);\n}\n\nbody {\n /* This variable is intentionally left empty for light DOM within components */\n font-size: var(--pf-c--FontSize, var(--pf-c-content--FontSize, var(--pf-global--FontSize--md, 1rem)));\n color: var(--pfe-theme--color--text, #151515);\n text-align: left;\n margin: 0;\n}\n\n.pfe-c-content h1 {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif);\n line-height: var(--pfe-theme--line-height--heading, 1.3);\n font-weight: var(--pfe-theme--font-weight--normal, 400);\n font-size: var(--pf-c--FontSize, var(--pf-c-content--h1--FontSize, var(--pf-global--FontSize--3xl, 1.75rem)));\n}\n\n.pfe-c-content h1:not(:last-child):not(:empty) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem);\n}\n\n.pfe-c-content h2 {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif);\n line-height: var(--pfe-theme--line-height--heading, 1.3);\n font-weight: var(--pfe-theme--font-weight--normal, 400);\n font-size: var(--pf-c--FontSize, var(--pf-c-content--h2--FontSize, var(--pf-global--FontSize--2xl, 1.5rem)));\n}\n\n.pfe-c-content h2:not(:last-child):not(:empty) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem);\n}\n\n.pfe-c-content h3 {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif);\n line-height: var(--pfe-theme--line-height--heading, 1.3);\n font-weight: var(--pfe-theme--font-weight--normal, 400);\n font-size: var(--pf-c--FontSize, var(--pf-c-content--h3--FontSize, var(--pf-global--FontSize--xl, 1.25rem)));\n}\n\n.pfe-c-content h3:not(:last-child):not(:empty) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem);\n}\n\n.pfe-c-content h4 {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif);\n line-height: var(--pfe-theme--line-height--heading, 1.3);\n font-weight: var(--pfe-theme--font-weight--normal, 400);\n font-size: var(--pf-c--FontSize, var(--pf-c-content--h4--FontSize, var(--pf-global--FontSize--lg, 1.125rem)));\n}\n\n.pfe-c-content h4:not(:last-child):not(:empty) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem);\n}\n\n.pfe-c-content h5 {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif);\n line-height: var(--pfe-theme--line-height--heading, 1.3);\n font-weight: var(--pfe-theme--font-weight--normal, 400);\n font-size: var(--pf-c--FontSize, var(--pf-c-content--h5--FontSize, var(--pf-global--FontSize--md, 1rem)));\n}\n\n.pfe-c-content h5:not(:last-child):not(:empty) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem);\n}\n\n.pfe-c-content h6 {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif);\n line-height: var(--pfe-theme--line-height--heading, 1.3);\n font-weight: var(--pfe-theme--font-weight--normal, 400);\n font-size: var(--pf-c--FontSize, var(--pf-c-content--h6--FontSize, var(--pf-global--FontSize--sm, 0.875rem)));\n}\n\n.pfe-c-content h6:not(:last-child):not(:empty) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem);\n}\n\n.pfe-c-content p {\n font-size: var(--pf-c--FontSize, var(--pf-c-content--FontSize, var(--pf-global--FontSize--md, 1rem)));\n}\n\n.pfe-c-content p:not(:last-child):not(:empty) {\n margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem);\n}\n\na {\n color: var(--pfe-broadcasted--link, #06c);\n text-decoration: var(--pfe-broadcasted--link-decoration, none);\n}\n\na:hover {\n color: var(--pfe-broadcasted--link--hover, #004080);\n text-decoration: var(--pfe-broadcasted--link-decoration--hover, underline);\n}\n\na:focus {\n color: var(--pfe-broadcasted--link--focus, #004080);\n text-decoration: var(--pfe-broadcasted--link-decoration--focus, underline);\n}\n\na:visited {\n color: var(--pfe-broadcasted--link--visited, #6753ac);\n text-decoration: var(--pfe-broadcasted--link-decoration--visited, none);\n}\n\nbutton,\na {\n cursor: pointer;\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// This will print all the broadcast variables, and set the value to the context of your choosing, like on-dark or on-saturated.\n/// @param {String} $context - Look up values from contexts, i.e. \"light\" or \"saturated\"\n/// @param {List | String} $broadcast [$BROADCAST-VARS] - Optionally specify only one broadcast variable instead of the whole set, i.e. \"text\"\n/// @see $custom-prop-prefix\n/// @see $BROADCAST-VARS\n/// @example - scss - Usage in a container component, i.e. pfe-card\n/// :host {\n/// @include pfe-set-broadcast-context(dark);\n/// }\n/// @example - css - Rendered output\n/// :host {\n/// --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n/// --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #99ccff);\n/// --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #b38cd9);\n/// --pfe-broadcasted--link-decoration: none;\n/// --pfe-broadcasted--link-decoration--hover: underline;\n/// --pfe-broadcasted--link-decoration--focus: underline;\n/// --pfe-broadcasted--link-decoration--visited: none;\n/// }\n///\n@mixin pfe-set-broadcast-context($context, $broadcast: $BROADCAST-VARS) {\n @each $type in $broadcast {\n $list: ();\n $string: \"\";\n $context_string: \"\";\n $state: \"\";\n\n @if str-starts-with($type, \"link\") {\n $list: append($list, \"#{$type}\");\n\n @each $s in (hover, focus, visited) {\n $state: \"--#{$s}\";\n $string: \"#{$type}#{$state}\";\n\n @if not index($list, $string) {\n $list: append($list, \"#{$type}#{$state}\");\n }\n }\n } @else {\n @if not index($list, $string) {\n $list: append($list, \"#{$type}\");\n }\n }\n\n @if index($CONTEXTS, $context) != null {\n @if $context != \"light\" {\n $context_string: \"--on-#{$context}\";\n }\n }\n\n @each $item in $list {\n @if not index($BROADCAST-VARS, $type) {\n @warn \"--#{$custom-prop-prefix}-broadcasted--#{$item} variable is not in the $BROADCAST-VARS list.\";\n } @else if not pfe-broadcasted(#{$item}#{$context_string}) {\n @warn \"#{$item}#{$context_string} value does not currently exist.\";\n } @else {\n @if index($CONTEXTS, $context) != null {\n --#{$custom-prop-prefix}-broadcasted--#{$item}: #{pfe-var(#{$item}#{$context_string})};\n } @else {\n @error \"The #{$context} context does not appear to be part of a supported context.\";\n }\n }\n }\n }\n}\n\n/// Returns CSS Variable for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $value - The value of the css variable being defined\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example - scss\n/// :host {\n/// padding-top: pfe-local(paddingTop);\n/// padding-bottom: pfe-local(paddingBottom);\n/// }\n@mixin pfe-print-local($map: $LOCAL-VARIABLES) {\n @each $property, $value in $map {\n $name: \"--#{$property}\";\n $styles: $value;\n\n @if type-of($value) == \"map\" {\n @each $prop, $v in $value {\n $name: \"__#{$property}--#{$prop}\";\n $styles: $v;\n\n // Print the variable definition\n --#{$custom-prop-prefix}-#{$LOCAL}#{$name}: #{$styles};\n }\n } @else {\n // Print the variable definition\n --#{$custom-prop-prefix}-#{$LOCAL}#{$name}: #{$styles};\n }\n }\n}\n\n/// Surface properties\n/// This mixin creates an attribute for all the surface colors, then prints the local background color variable for the component, with the correct context colors.\n/// @param {List | String} $surfaces [$SURFACES] - defaults to the global $SURFACES list of all supported colors\n/// @param {String} $attr-name [pfe-var] - defaults to pfe-var, optionally pass in a custom name for the data attribute\n/// @example - scss - In your component stylesheet\n/// $LOCAL: band;\n/// @include pfe-surfaces;\n/// @example - css - Rendered result\n/// :host([color=\"darker\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darker, #464646);\n/// --context: dark;\n/// }\n/// :host([color=\"darkest\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darkest, #131313);\n/// --context: dark;\n/// }\n/// :host([color=\"base\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--base, #dfdfdf);\n/// --context: light;\n/// }\n/// :host([color=\"lighter\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lighter, #ececec);\n/// --context: light;\n/// }\n/// :host([color=\"lightest\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);\n/// --context: light;\n/// }\n/// :host([color=\"accent\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--accent, #ee0000);\n/// --context: saturated;\n/// }\n/// :host([color=\"complement\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--complement, #0477a4);\n/// --context: saturated;\n/// }\n@mixin pfe-surfaces($surfaces: $SURFACE, $attr-name: color) {\n @each $color in $surfaces {\n $context: #{pfe-get-context(surface--#{$color}--context)};\n :host([#{$attr-name}=\"#{$color}\"]) {\n @include pfe-print-local(\n (\n BackgroundColor: pfe-var(surface--#{$color}),\n context: pfe-var(surface--#{$color}--context, #{$context})\n )\n );\n @extend %fallback-surface;\n }\n }\n}\n\n/// Prints the `on` attribute with IE11 fallbacks\n/// @param {List} contexts [$CONTEXTS] - defaults to the global $CONTEXTS list of all supported contexts\n/// @param {Boolean} ie-fallback [true] - defaults to true, prints IE11 fallbacks\n/// @example - scss - In your component styles\n/// @include pfe-contexts; // imports on=\"light\" etc support\n/// @example - css - Rendered outputs\n/// :host([on=\"dark\"]) {\n/// --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n/// --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #99ccff);\n/// --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #b38cd9);\n/// --pfe-broadcasted--link-decoration: none;\n/// --pfe-broadcasted--link-decoration--hover: underline;\n/// --pfe-broadcasted--link-decoration--focus: underline;\n/// --pfe-broadcasted--link-decoration--visited: none;\n/// }\n/// @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */\n/// :host([on=\"dark\"]) {\n/// color: #fff;\n/// color: var(--pfe-theme--color--text--on-dark, #fff);\n/// }\n/// }\n/// // ...as well as all the values for :host([on=\"saturated\"]) and :host([on=\"light\"])\n@mixin pfe-contexts($contexts: $CONTEXTS, $ie-fallback: true) {\n // Helper attributes to aid in theming\n @each $context in $contexts {\n :host([on=\"#{$context}\"]) {\n @include pfe-set-broadcast-context($context);\n }\n }\n @if $ie-fallback {\n :host {\n @extend %fallback-text;\n }\n }\n}\n","@import \"../maps/_typography\";\n\n/// Mixin for creating an accessible focus state\n/// @group tools\n/// @param {Color} $color [$pfe-color--link]\n/// @see {variable} $pfe-color--link\n/// @example - scss\n/// .thing {\n/// @include pfe-accessibility-focus($pfe-color--link--on-dark);\n/// }\n/// @example - css\n/// .thing {\n/// outline-offset: 1px;\n/// outline-style: dotted;\n/// outline-width: 1px;\n/// text-decoration: none !important;\n/// outline-color: #73bcf7;\n/// }\n@mixin pfe-accessibility-focus($color: $pfe-color--link) {\n outline-offset: 1px;\n outline-style: dotted;\n outline-width: 1px;\n text-decoration: none !important;\n\n @if type-of($color) ==color {\n outline-color: $color;\n }\n}\n\n@mixin pfe-underline($color: default-link-hover-line, $opacity: 1) {\n text-decoration: underline;\n text-decoration-skip: ink;\n}\n\n/// Mixin for authors outside of PFE to control spacing between content\n/// @group typography\n/// @param {*} $sizing [lg, md, sm] \n/// @param {*} $type [heading, body] \n/// @example - scss\n/// @include pfe-content--text--spacing-block(sm);\n@mixin pfe-content--text--spacing-block($sizing: md, $type: body) {\n &:not(:last-child):not(:empty) {\n margin-bottom: pfe-var(content-spacer--#{$type}--#{$sizing}); //16px\n }\n} \n\n/// Mixin for authors outside of PFE to customize block level elements\n/// The variable stack includes a hook just for headings when they appear in the \n/// light DOM within components: --pf-c--FontSize\n///\n/// Components can't control the font size of block level elements like HTML headings \n/// when they are in the light DOM. A component _could_ redefine the variables for \n/// standard headings by using the variable hooks such as: `--pf-c--content--h4--FontSize` \n/// but it can't know if the light DOM might contain an H1, H2, H3, etc. it shouldn't\n/// redefine the variables for all possible headings. Instead, there is one dedicated\n/// variable for this purpose. \n/// @group typography\n/// @param {*} $sizing [h1, h2, h3, h4, h5, h6, p, small] \n/// @example - scss\n/// .project-wrapper h3 {\n/// @include pfe-title(xl); \n/// }\n/// @example - css\n/// .project-wrapper h3 {\n/// font-family: \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif;\n/// font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif);\n/// line-height: 1.3;\n/// line-height: var(--pfe-theme--line-height--heading, 1.3);\n/// font-weight: 500;\n/// font-weight: var(--pfe-theme--font-weight--normal, 500);\n/// font-size: 1.25rem;\n/// font-size: var(--pf-c--FontSize, var(--pf-c--content--h3--FontSize, var(--pf-global--FontSize--xl, 1.25rem)));\n/// }\n@mixin pfe-content ($element: \"p\", $base: false){\n // TEXT\n @if $element == \"p\" or $element == \"small\" {\n // Extend includes: line height, weight, font family\n @extend %pfe-content-base;\n\n // Accomodate for irregular variable naming\n @if $element == \"p\" {\n font-size: var(--pf-c--FontSize, pfe-var(content--FontSize));\n }\n @else {\n font-size: var(--pf-c--FontSize, pfe-var(content--#{$element}--FontSize));\n }\n @if $base {\n font-family: pfe-var(font-family);\n line-height: pfe-var(line-height);\n font-weight: pfe-var(font-weight--normal);\n }\n // spacing\n @include pfe-content--text--spacing-block(sm);\n } \n @else { // HEADINGS\n font-family: pfe-var(font-family--heading);\n line-height: pfe-var(line-height--heading);\n font-weight: pfe-var(font-weight--normal);\n\n font-size: var(--pf-c--FontSize, #{pfe-var(content--#{$element}--FontSize)});\n // spacing\n @include pfe-content--text--spacing-block(sm, heading);\n }\n}\n\n\n\n/// Mixin to generate a typography stack - font-family, font-size, line-height, font-weight\n/// and spacing between elements. It accepts a few inputs and determines what variable stack\n/// and CSS properties to output. NOTE! There is an alias mixin `pfe-c-typography` below for easier usage within components. \n/// @group typography\n/// @param {String} $sizing [xl] - Human-readable description for the font-size of the stack you are building.\n/// @param {String} $type [title] - Describes the type of element being created and determines which variable stack to pull from. Also accepts \"text\".\n/// @param {Bool} $base [true] You may opt out of other typography properties (besides size) such as font-weight and line-height (and font-family on text). \n/// @param {Bool} $spacing [true] - You may opt out of the margin-bottom which adds space below the typographical element \n/// @param {Bool} $important [false] - Boolean value for if properties need to be postfixed with `!important`. Use of `!important` is only recommended for utility classes.\n/// @param {Boolean} $use-local [false] - Set this to true when using the mixin within components. This will print a local CSS variable at the beginning of the CSS variable stack and will omit title/text variables. Note that this mixin will not utilize any values from the $LOCAL-VARIABLES map.\n/// @param {String} $region [null] - For use with local variables only. For more about the regional designation, see pfe-var().\n/// @param {Boolean} $light-dom-heading: [false] - Print the --pf-c--FontSize variable with a value of the font-size variable stack. For more information about --pf-c--FontSize, see the HTML HEADINGS section in pfe-base.scss.\n/// @requires {function} pfe-var\n/// @requires {function} pfe-local\n/// @requires {variable} $pf-title-set--mega\n/// @requires {variable} $pf-title-set--regular\n/// @requires {variable} $pf-title-set--tiny\n/// @example - scss - Basic example for xs text typography set\n/// .small-text {\n/// @include pfe-typography(\n/// $sizing: \"xs\",\n/// $type: \"text\",\n/// $base: true,\n/// $important: true,\n/// $use-local: false\n/// )\n/// }\n/// @example - css - Rendered result\n/// .small-text {\n/// font-size: 0.75rem !important;\n/// font-size: var(--pf-c-text--m-xs--FontSize, var(--pf-global--FontSize--xs, 0.75rem)) !important;\n/// font-family: \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif !important;\n/// font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n/// line-height: 1.5 !important;\n/// line-height: var(--pfe-theme--line-height, 1.5) !important;\n/// font-weight: 400 !important;\n/// font-weight: var(--pfe-theme--font-weight--normal, 400) !important;\n/// }\n/// \n/// .small-text:not(:last-child):not(:empty) {\n/// margin-bottom: 0.5rem !important;\n/// margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem) !important;\n/// }\n/// @example - scss - Basic example for 5xl title typography set\n/// .large-heading {\n/// @include pfe-typography(\n/// $sizing: \"5xl\",\n/// $type: \"title\",\n/// $important: true,\n/// $use-local: false\n/// )\n/// }\n/// @example - css - Rendered result\n/// .large-heading {\n/// font-family: \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif !important;\n/// font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n/// font-size: 2.5rem !important;\n/// font-size: var(--pf-c-title--m-5xl--FontSize, var(--pf-global--FontSize--5xl, 2.5rem)) !important;\n/// line-height: 1.2 !important;\n/// line-height: var(--pfe-theme--line-height--heading-mega, 1.2) !important;\n/// font-weight: 300 !important;\n/// font-weight: var(--pfe-theme--font-weight--light, 300) !important;\n/// }\n/// \n/// .large-heading:not(:last-child) {\n/// margin-bottom: 1.5rem !important;\n/// margin-bottom: var(--pfe-theme--content-spacer--heading--md, 1.5rem) !important;\n/// }\n@mixin pfe-typography (\n $sizing: \"xl\", \n $type: \"title\", \n $base: true, \n $spacing: true, \n $use-local: false,\n $region: null,\n $light-dom-heading: false,\n $important: false\n ){\n\n // Ensure that even numerical entries are treated like strings, \"6xl\" vs. 6xl\n $sizing: \"#{$sizing}\";\n\n // Adds !important to the end of the property; useful for utility classes only. Use with caution. \n $rules: \"\";\n @if $important {\n $rules: \" !important\";\n }\n // Text / body copy typography!\n @if $type == \"text\" { \n // Capture the values of properties to use directly or wrapped in the pfe-local function below\n $font-family: pfe-var(font-family);\n $line-height: pfe-var(line-height);\n $font-weight: pfe-var(font-weight--normal);\n $margin-bottom: pfe-var(content-spacer--body--sm);\n\n @if $use-local {\n $font-size: pfe-var(FontSize--#{$sizing});\n font-size: pfe-local(FontSize, $font-size, $region)#{$rules};\n @if $base { \n font-family: pfe-local(LineHeight, $font-family, $region)#{$rules};\n line-height: pfe-local(LineHeight, $line-height, $region)#{$rules};\n font-weight: pfe-local(FontWeight, $font-weight, $region)#{$rules};\n }\n @if $spacing { \n &:not(:last-child) {\n margin-bottom: pfe-local(MarginBottom, $margin-bottom, $region)#{$rules};\n }\n }\n }\n @else {\n // include text var and global var in stack\n $font-size: pfe-var(text--m-#{$sizing}--FontSize);\n font-size: $font-size#{$rules};\n @if $base { // these styles are ordinarily inherited from the body tag, but some projects may need extra specificity\n font-family: $font-family#{$rules};\n line-height: $line-height#{$rules};\n font-weight: $font-weight#{$rules};\n }\n @if $spacing { \n &:not(:last-child):not(:empty) {\n margin-bottom: $margin-bottom#{$rules}; //16px\n }\n }\n }\n // this CSS custom property is an extra hook for components to override things, like .pfe-card { --pf-c-FontSize: 32px; }\n @if $use-local and $light-dom-heading {\n --pf-c--FontSize: #{pfe-local(FontSize)};\n }\n }\n // Title typography!\n @else {\n // Capture the values of properties to use directly or wrapped in the pfe-local function below\n // Initialize variables at the $pf-title-set--tiny size\n // $sizing == \"lg\" or \"md\" or \"sm\" or \"xs\" \n $line-height: pfe-var(line-height);\n $font-weight: pfe-var(font-weight--normal);\n $margin-bottom: pfe-var(content-spacer--heading--sm);\n\n @if index($pf-title-set--mega, $sizing) != null {\n $line-height: pfe-var(line-height--heading-mega);\n $font-weight: pfe-var(font-weight--light);\n @if $spacing { \n $margin-bottom: pfe-var(content-spacer--heading--md);\n }\n }\n // $sizing == \"4xl\" or \"3xl\" or \"2xl\" \n @else if index($pf-title-set--regular, $sizing) != null {\n $line-height: pfe-var(line-height--heading);\n $font-weight: pfe-var(font-weight--normal);\n @if $spacing { \n $margin-bottom: pfe-var(content-spacer--heading--sm);\n }\n }\n // If this value was not found in the tiny set, it's likely not supported\n @else if index($pf-title-set--tiny, $sizing) == null {\n @warn \"#{$sizing} was not found in $pf-title-set--mega, $pf-title-set--regular, or $pf-title-set--tiny.\";\n }\n\n // For component use, this option allows the mixin to use values set in the component level map\n @if $use-local {\n // remove title var from stack, use global only\n $font-size: pfe-var(FontSize--#{$sizing});\n\n font-family: pfe-var(font-family--heading)#{$rules};\n font-size: pfe-local(FontSize, $font-size, $region)#{$rules};\n @if $base == true {\n line-height: pfe-local(LineHeight, $line-height, $region)#{$rules};\n font-weight: pfe-local(FontWeight, $font-weight, $region)#{$rules};\n }\n @if $spacing { \n &:not(:last-child) {\n margin-bottom: pfe-local(MarginBottom, $margin-bottom, $region)#{$rules};\n }\n }\n }\n \n @else {\n // include title var and global var in stack\n $font-size: pfe-var(title--m-#{$sizing}--FontSize);\n font-family: pfe-var(font-family--heading)#{$rules};\n font-size: $font-size#{$rules};\n @if $base == true {\n line-height: $line-height#{$rules};\n font-weight: $font-weight#{$rules};\n }\n @if $spacing { \n &:not(:last-child) {\n margin-bottom: $margin-bottom#{$rules};\n }\n }\n }\n // this CSS custom property is an extra hook for components to override things, like .pfe-card { --pf-c-FontSize: 32px; }\n @if $use-local and $light-dom-heading {\n --pf-c--FontSize: #{pfe-local(FontSize)};\n }\n }\n}\n\n/// ALIAS Typography mixin for generating the font-size only within components. Still accepts all arguments.\n/// @group typography\n/// @param {String} $sizing [xl] - Human-readable description for the font-size of the stack you are building.\n/// @param {String} $type [title] - Describes the type of element being created and determines which variable stack to pull from. Also accepts \"text\".\n/// @param {Bool} $base [false] You may opt out of other typography properties (besides size) such as font-weight and line-height (and font-family on text). \n/// @param {Bool} $spacing [false] - You may opt out of the margin-bottom which adds space below the typographical element \n/// @param {Bool} $important [false] - Boolean value for if properties need to be postfixed with `!important`. Use of `!important` is only recommended for utility classes.\n/// @param {Boolean} $use-local [true] - Set this to true when using the mixin within components. This will print a local CSS variable at the beginning of the CSS variable stack and will omit title/text variables. Note that this mixin will not utilize any values from the $LOCAL-VARIABLES map.\n/// @param {String} $region [null] - For use with local variables only. For more about the regional designation, see pfe-var().\n/// @param {Boolean} $light-dom-heading: [false] - Print the --pf-c--FontSize variable with a value of the font-size variable stack. For more information about --pf-c--FontSize, see the HTML HEADINGS section in pfe-base.scss.\n/// @requires {function} pfe-var\n/// @requires {function} pfe-local\n/// @requires {variable} $pf-title-set--mega\n/// @requires {variable} $pf-title-set--regular\n/// @requires {variable} $pf-title-set--tiny\n/// @example - scss - Basic example for medium text sizing\n/// $LOCAL: jump-links;\n/// .jump-links-text {\n/// @include pfe-c-typography($type: text, $sizing: md, $region: header, $light-dom-heading: true)\n/// }\n/// @example - css - Rendered result\n/// .jump-links-text {\n/// font-size: 1rem;\n/// font-size: var(--pfe-clipboard__header--FontSize, var(--pf-global--FontSize--md, 1rem));\n/// --pf-c--FontSize: var(--pfe-clipboard--FontSize, 1rem);\n/// }\n@mixin pfe-c-typography (\n $sizing: \"xl\", \n $type: \"title\", \n $base: false, // different than mixin above\n $spacing: false, // different than mixin above\n $use-local: true, \n $region: null,\n $light-dom-heading: false,\n $important: false\n) {\n @include pfe-typography(\n $sizing: $sizing,\n $type: $type,\n $base: $base,\n $spacing: $spacing,\n $use-local: $use-local,\n $region: $region,\n $light-dom-heading: $light-dom-heading,\n $important: $important,\n );\n}"],"sourceRoot":"../src"}