@spark-web/theme NPM

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

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]