Nighttime Peanut Migrations
    Wondering what’s next for npm?Check out our public roadmap! »

    @twilio-paste/theme
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.2 • Public • Published

    ThemeProvider

    The Paste ThemeProvider leverages React's Context to provide the theme object to any descendant components in the tree. For that reason, we recommend wrapping your application at the root level with the Paste ThemeProvider. This allows all sub-components to retrieve the correct token value for the supplied theme.

    import {Theme} from '@twilio-paste/theme';
    
    <Theme.Provider theme="console">
      <App />
    </Theme.Provider>

    Using tokens in custom components

    Sometimes you will need to create something custom that is not available in Paste but you need that component to still look like it's from Paste. The use of Paste Tokens in your styles is the way that you can access global design properties used in all Paste Components.

    Styled Component

    By using the Theme.Provider, when you create a custom component using Styling-Library, the theme object is available on props via context. You can access those via the css utility or props object directly.

    This is the preferred method.

    import {styled, css} from '@twilio-paste/styling-library';
    
    const custom = styled.div(
      css({
        backgroundColor: 'colorBackgroundPrimary',
        padding: 'spacing20',
      })
    );

    Paste ThemeConsumer

    Paste Theme provides a React Context Consumer for the theme called Theme.Consumer. The Theme.Consumer takes a function as a child, which provides the theme object as an argument.

    import {Theme} from '@twilio-paste/theme';
    
    <Theme.Consumer>
      {({theme}) => {
        return <p>What is the default text color {theme.textColors.colorText}</p>;
      }}
    </Theme.Consumer>

    Paste useTheme Hook

    Paste Theme provides a React Hook called useTheme which returns the theme object from the React Context via the Theme Provider.

    import React from 'react';
    import {useTheme} from '@twilio-paste/theme';
    
    const HookExampleComponent = (): React.ReactElement => {
      const theme = useTheme();
      return <p>What is the default text color {theme.textColors.colorText}</p>;
    };

    Higher Order Component (HoC)

    Paste also provides a HoC to be able to access the theme object.

    import React from 'react';
    import {withTheme} from '@twilio-paste/theme';
    
    const ExampleComponent = ({theme}) => <p>What is the default text color {theme.textColors.colorText}</p>;
    
    // Provides this component with the theme object as a prop
    const ExampleComponentwithTheme = withTheme(ExampleComponent);

    Keywords

    none

    Install

    npm i @twilio-paste/theme

    DownloadsWeekly Downloads

    1,086

    Version

    5.0.2

    License

    MIT

    Unpacked Size

    294 kB

    Total Files

    44

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar