{"version":3,"sources":["webpack:///./src/pages/installing-spark/installing-fonts.mdx","webpack:///./src/components/layouts/InstallingSparkLayout.js"],"names":["_frontmatter","layoutProps","MDXLayout","DefaultLayout","MDXContent","components","props","mdxType","parentName","isMDXComponent","InstallingSparkLayout","children","location","initialContext"],"mappings":"0RAOO,IAAMA,EAAe,GAOtBC,EAAc,CAClBD,gBAEIE,EAAYC,IACH,SAASC,EAAT,GAGZ,IAFDC,EAEC,EAFDA,WACGC,E,oIACF,mBACD,OAAO,YAACJ,EAAD,iBAAeD,EAAiBK,EAAhC,CAAuCD,WAAYA,EAAYE,QAAQ,cAI5E,0DACA,uPAIA,oDACA,oKAGA,qBAAG,sBAAQC,WAAW,KAAnB,SAAH,0DACA,yBACE,qBAAOA,WAAW,SAChB,kBAAIA,WAAW,SACb,gCAAIA,WAAW,MAAS,CACtB,MAAS,OADX,iBAGA,gCAAIA,WAAW,MAAS,CACtB,MAAS,OADX,QAGA,gCAAIA,WAAW,MAAS,CACtB,MAAS,OADX,iBAKJ,qBAAOA,WAAW,SAChB,kBAAIA,WAAW,SACb,gCAAIA,WAAW,MAAS,CACtB,MAAS,OACR,0BAAYA,WAAW,MAAvB,yBACH,gCAAIA,WAAW,MAAS,CACtB,MAAS,OADX,WAGA,gCAAIA,WAAW,MAAS,CACtB,MAAS,OADX,gDAEoD,sBAAQA,WAAW,MAAnB,SAFpD,gCAE+H,0BAAYA,WAAW,MAAvB,SAF/H,OAEyL,0BAAYA,WAAW,MAAvB,QAFzL,4BAIF,kBAAIA,WAAW,SACb,gCAAIA,WAAW,MAAS,CACtB,MAAS,OACR,0BAAYA,WAAW,MAAvB,uBACH,gCAAIA,WAAW,MAAS,CACtB,MAAS,OACR,sBAAQA,WAAW,MAAnB,cAFH,WAGA,gCAAIA,WAAW,MAAS,CACtB,MAAS,OADX,+DAEmE,sBAAQA,WAAW,MAAnB,SAFnE,qBAEmI,0BAAYA,WAAW,MAAvB,QAFnI,8GAEmS,0BAAYA,WAAW,MAAvB,QAFnS,8BAEmX,0BAAYA,WAAW,MAAvB,gBAFnX,kCAE+c,+BAAGA,WAAW,MAAS,CACle,KAAQ,6EADmc,QAF/c,MAMF,kBAAIA,WAAW,SACb,gCAAIA,WAAW,MAAS,CACtB,MAAS,OACR,0BAAYA,WAAW,MAAvB,mBACH,gCAAIA,WAAW,MAAS,CACtB,MAAS,OADX,aAGA,gCAAIA,WAAW,MAAS,CACtB,MAAS,OADX,iEAEqE,sBAAQA,WAAW,MAAnB,SAFrE,uHAMN,qCAAoB,0BAAYA,WAAW,KAAvB,kBAApB,8CACA,uBAAK,kCAAMA,WAAW,OAAU,CAC5B,UAAa,wBADZ,+uBAiCL,6CACA,wGACA,sBACE,kBAAIA,WAAW,MAAK,+BAAGA,WAAW,MAAS,CACvC,KAAQ,2FADQ,SAGpB,kBAAIA,WAAW,MAAK,+BAAGA,WAAW,MAAS,CACvC,KAAQ,yFADQ,YAGpB,kBAAIA,WAAW,MAAK,+BAAGA,WAAW,MAAS,CACvC,KAAQ,uFADQ,WAItB,gGACF,+BAAGA,WAAW,KAAQ,CAChB,KAAQ,gCADd,aADE,KAIA,yCACA,sBACE,kBAAIA,WAAW,MAAf,+CAAoE,sBAAQA,WAAW,MAAnB,cAApE,8BAAkJ,sBAAQA,WAAW,MAAnB,UAAlJ,KACA,kBAAIA,WAAW,MAAf,gHAMNJ,EAAWK,gBAAiB,E,uGCpJ5B,qCAIA,SAASC,EAAT,GAAwD,IAAvBC,EAAsB,EAAtBA,SAAUC,EAAY,EAAZA,SACzC,OACE,kBAAC,IAAD,CAAQC,eAAe,mBAAmBD,SAAUA,GACjDD,G,uPAYQD","file":"component---src-pages-installing-spark-installing-fonts-mdx-322e0d2fe6ddabc35a63.js","sourcesContent":["import * as React from 'react'\n  /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsx mdx */\n\nimport DefaultLayout from \"/opt/build/repo/src/components/layouts/InstallingSparkLayout.js\";\nimport { SprkTable } from \"@sparkdesignsystem/spark-react\";\nexport const _frontmatter = {};\n\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return <div {...props} />;\n};\n\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n  components,\n  ...props\n}) {\n  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n\n\n    <h1>{`Getting Started with Spark Fonts`}</h1>\n    <p>{`As part of Spark, our design system includes functionality\nfor applying web fonts. It allows you to configure your font\nsetup using Sass variables which will be included in the\nSpark CSS bundle when you build your site.`}</p>\n    <h2>{`Configuring Sass Variables`}</h2>\n    <p>{`There are unique Sass variables that allow you to\nconfigure Spark fonts for your build. Refer to the\ndescriptions to learn what they are.`}</p>\n    <p><strong parentName=\"p\">{`Note:`}</strong>{` They must be set in your Sass before importing Spark.`}</p>\n    <table>\n      <thead parentName=\"table\">\n        <tr parentName=\"thead\">\n          <th parentName=\"tr\" {...{\n            \"align\": null\n          }}>{`Sass Variable`}</th>\n          <th parentName=\"tr\" {...{\n            \"align\": null\n          }}>{`Type`}</th>\n          <th parentName=\"tr\" {...{\n            \"align\": null\n          }}>{`Description`}</th>\n        </tr>\n      </thead>\n      <tbody parentName=\"table\">\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": null\n          }}><inlineCode parentName=\"td\">{`$sprk-using-webfonts`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": null\n          }}>{`boolean`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": null\n          }}>{`Informs Spark that webfonts will be applied. `}<strong parentName=\"td\">{`Note:`}</strong>{` Change default setting from `}<inlineCode parentName=\"td\">{`false`}</inlineCode>{` to `}<inlineCode parentName=\"td\">{`true`}</inlineCode>{` to use Spark webfonts.`}</td>\n        </tr>\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": null\n          }}><inlineCode parentName=\"td\">{`$sprk-font-display`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": null\n          }}><strong parentName=\"td\">{`(Optional)`}</strong>{` string`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": null\n          }}>{`Controls behavior of the text while fonts are being loaded. `}<strong parentName=\"td\">{`Note:`}</strong>{` Default value is `}<inlineCode parentName=\"td\">{`swap`}</inlineCode>{` which will cause text to render using a fallback font until the custom font is available. Correct font is `}<inlineCode parentName=\"td\">{`swap`}</inlineCode>{`ped in. Information on the `}<inlineCode parentName=\"td\">{`font-display`}</inlineCode>{` property and values are found `}<a parentName=\"td\" {...{\n              \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display\"\n            }}>{`here`}</a>{`.`}</td>\n        </tr>\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": null\n          }}><inlineCode parentName=\"td\">{`$sprk-webfonts`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": null\n          }}>{`Sass List`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": null\n          }}>{`Expects a Sass List containing one or more nested Sass Lists. `}<strong parentName=\"td\">{`Note:`}</strong>{` The nested lists should contain the font’s URL, name and weight. It does require a series of font declarations.`}</td>\n        </tr>\n      </tbody>\n    </table>\n    <p>{`A full valid `}<inlineCode parentName=\"p\">{`$sprk-webfonts`}</inlineCode>{` object example looks something like this:`}</p>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-javascript\"\n      }}>{`$sprk-using-webfonts: true;\n$sprk-webfonts:\n(\n  (\n    url('https://www.example.com/MyFont-Bold.woff2') format('woff2'),\n    url('https://www.example.com/MyFont-Bold.woff') format('woff')\n  ),\n  MyFont, 700\n),\n(\n  (\n    url('https://www.example.com/MyFont-Medium.woff2') format('woff2'),\n    url('https://www.example.com/MyFont-Medium.woff') format('woff')\n  ),\n  MyFont, 500\n),\n(\n  (\n    url('https://www.example.com/MyFont-Regular.woff2') format('woff2'),\n    url('https://www.example.com/MyFont-Regular.woff') format('woff')\n  ),\n  MyFont, 400\n),\n(\n  (\n    url('https://www.example.com/MyFont-Light.woff2') format('woff2'),\n    url('https://www.example.com/MyFont-Light.woff') format('woff')\n  ),\n  MyFont, 300\n);\n`}</code></pre>\n    <h3>{`Additional Examples`}</h3>\n    <p>{`Check out these completed font setup examples supported by Spark to learn more:`}</p>\n    <ul>\n      <li parentName=\"ul\"><a parentName=\"li\" {...{\n          \"href\": \"https://github.com/sparkdesignsystem/spark-starter-html/blob/main/src/styles/main.scss\"\n        }}>{`HTML`}</a></li>\n      <li parentName=\"ul\"><a parentName=\"li\" {...{\n          \"href\": \"https://github.com/sparkdesignsystem/spark-starter-angular/blob/main/src/styles.scss\"\n        }}>{`Angular`}</a></li>\n      <li parentName=\"ul\"><a parentName=\"li\" {...{\n          \"href\": \"https://github.com/sparkdesignsystem/spark-starter-react/blob/main/src/styles.scss\"\n        }}>{`React`}</a></li>\n    </ul>\n    <p>{`Internal users can access a directory of our CDN resources by clicking\n`}<a parentName=\"p\" {...{\n        \"href\": \"http://shorty/sparkassetcdn\"\n      }}>{`this link`}</a>{`.`}</p>\n    <h3>{`Troubleshooting`}</h3>\n    <ul>\n      <li parentName=\"ul\">{`Rocket products must include the font name, `}<strong parentName=\"li\">{`RocketSans`}</strong>{`. Remove all references of `}<strong parentName=\"li\">{`MyFont`}</strong>{`.`}</li>\n      <li parentName=\"ul\">{`Include all four font weights - 300, 400, 500, and 700 - within your build for the fonts to work properly.`}</li>\n    </ul>\n\n    </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\n      ","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Layout from './Layout';\n\nfunction InstallingSparkLayout({ children, location }) {\n  return (\n    <Layout initialContext=\"installing-spark\" location={location}>\n      {children}\n    </Layout>\n  );\n}\n\nInstallingSparkLayout.propTypes = {\n  children: PropTypes.node,\n  location: PropTypes.shape({\n    pathname: PropTypes.string,\n  }),\n};\n\nexport default InstallingSparkLayout;\n"],"sourceRoot":""}