Theme

ThemeProvider and theme types. Required for using components.

Defines theme appearance, theme typings and a Theme Provider component. Default theme values are set to a Casper UI-theme (see contents of theme-casper-ui.ts). To override the default appearance, provide your own theme values to the Theme Provider.

Theme Provider

The Theme Provider is a React Context that extends the Chakra Provider. It provides all children rendered within with their theme appearance.

Place it at the top level of your application:

import { ThemeProvider } from "@caspeco/casper-ui-library";

return <ThemeProvider>{/* Your app consuming Casper UI components goes here */}</ThemeProvider>;

Customize theme

To override the default appearance, provide your own theme values to the Theme Provider. The values that can be customized are colors and fonts (must include fontStyleSheet).

<ThemeProvider
  colors={{
    accent: 'red',
    onAccent: 'white',
    // ...rest of color theme
  }}
  fonts={{
    body: 'Nerko One',
    header: 'Nerko One',
    subheader: 'Nerko One',
  }}
  fontStyleSheet={`
    @font-face {
      font-family: 'Nerko One';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/nerkoone/v15/m8JQjfZSc7OXlB3ZMOjDd5RARGmK3Q.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6;
    }
    /* ...additional weights or other fonts */
  `}
>
{/* Your app consuming Casper UI components goes here */}
</>

Theme Variables

To consume and apply theme appearance in components and in applications, you can refer to the theme variable enums (see example usage below). The following theme variables are available:

For example, you can apply theme variables to components using style props:

import { Box, Text, ThemeColor, ThemeRadius, ThemeSpace } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Box borderRadius={ThemeRadius.Large} p={ThemeSpace.Large} bg={ThemeColor.SuccessContainer}>
      <Text color={ThemeColor.OnSuccessContainer}>Some nice custom component using theme styles</Text>
    </Box>
  );
}

Locale

Pass a locale prop to ThemeProvider to set the language used by every localized component rendered within it:

import { ThemeProvider } from "@caspeco/casper-ui-library";

return (
  <ThemeProvider locale="sv-SE">{/* Your app consuming Casper UI components goes here */}</ThemeProvider>
);

It defaults to en-US when omitted. See the Localization guide for the full list of supported locales and which components are localized.