| 1 | ---
|
| 2 | title: Core
|
| 3 | isExperimentalPackage: true
|
| 4 | ---
|
| 5 |
|
| 6 | 🚧 — Under construction
|
| 7 |
|
| 8 | ## SparkProvider
|
| 9 |
|
| 10 | The SparkProvider component is a
|
| 11 | [Context provider](https://reactjs.org/docs/context.html#contextprovider) to
|
| 12 | provide functionality for the following things:
|
| 13 |
|
| 14 | - **A theme provider** allows for overriding the default theme
|
| 15 | - **A link component provider** allows for passing in a custom link component
|
| 16 | (created with the `makeLinkComponent` function in `@spark-web/link`) that will
|
| 17 | be using internally by `Link`, `ButtonLink` and `TextLink` (useful for
|
| 18 | creating links that use client-side transitions instead of full page refreshes
|
| 19 | like [next/link](https://nextjs.org/docs/api-reference/next/link)) does. For a
|
| 20 | reference take a look at the source for
|
| 21 | [UniversalNextLink](/package/next-utils#universal-next-link)
|
| 22 | - An id provider for generating unique ids. This will be deprecated in a future
|
| 23 | release once the design system has been upgraded to React 18.
|
| 24 | - A minimal CSS reset
|
| 25 | - Calls `useFocusVisible` which we use to show focus rings when navigating with
|
| 26 | keyboard, but _not_ when using a pointing device (such as a mouse or
|
| 27 | trackpad).
|
| 28 |
|
| 29 | ## AesteticoStylesheet
|
| 30 |
|
| 31 | Uses Emotion's `Global` component to set a stylesheet to load the Aestetico font
|
| 32 | from Brighte's CDN.
|