@spark-web/theme

title: Theme isExperimentalPackage: true

🚧 — Under construction

The theme packages exports a set of objects and utilities that are used internally to create Spark Web components as well as for consumers to be able to override

useGlobalTheme

The useGlobalTheme hook returns the name of the theme set in the GlobalThemeProvider. It defaults to brighte if there's no value provided.

useTheme

The useTheme hook returns an object with our theme tokens along with a set of styling utilities.

The theme will always be in the same shape, but the values can be overridden by passing in a custom theme to the SparkProvider.

Theme tokens differ slightly from the values passed into the provider (or the defaultTokens if you don't provide a theme) as they are run through the decorateTokens function which add some extra values that should never change (and therefore aren't themeable) as well as using Capsize to add tokens we need to trim space above capital letters and below the baseline so spacing between elements is consistent and doesn't vary depending on line-height, font-size etc.

For more documentation about our tokens, please see the tokens reference page.

mapResponsiveProp

Returns either the string value of the token provided to it, or an array which maps to our breakpoints (where index 0 refers to the mobile breakpoint, 1 is the tablet breakpoint and so on).

Theme utils

mapResponsiveScale

Helper for mapping keys/breakpoint map to a theme scale e.g.

mapResponsiveProp('small', { small: 8, large: 16 }); // 8
mapResponsiveProp(
  { mobile: 'small', tablet: 'large' },
  { small: 8, medium: 12, large: 16 }
); // [8, 16]

optimizeResponsiveArray

TODO

responsiveRange

Designed to be used alongside optimizeResponsiveArray.

responsiveStyles

TODO

resolveResponsiveProps

TODO

defaultTokens

This is the default tokens for the Brighte theme before they've been decorated.

makeSparkTheme

This function

• decorates to passed in tokens
• decorates them
• works out if the background tokens are dark or light
• adds the theme utils

Pass the result of this function into the SparkProvider if you want to override the default theme.