Socket
Socket
Sign inDemoInstall

@twilio-paste/theme

Package Overview
Dependencies
143
Maintainers
4
Versions
103
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@twilio-paste/theme

Paste Design System Theme Package which provides support for APIs to theme UIs and components.


Version published
Maintainers
4
Weekly downloads
10,384
decreased by-16.59%

Weekly downloads

Readme

Source

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="default">
  <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);

useThemeContrastCheck

Import the useThemeContrastCheck hook into any Paste app and have it automatically detect color contrast ratio issues with the currently used theme, based on the Paste Design Token pairing requirements.

import {useThemeContrastCheck} from '@twilio-paste/core/theme-utils';

const SomewhereInYourApp = () => {
  const {
    textContrastRating,
    uiControlContrastRating,
    numberOfTextFailures,
    numberOfUIControlFailures,
    totalFailures,
  } = useThemeContrastCheck();

  return <div />;
};

Use your component when it is a child of the Paste theme provider, or Customization Provider.

import {Theme} from '@twilio-paste/core/theme';

const App = () => {
  return (
    <Theme.Provider theme="default">
      <SomewhereInYourApp />
    </Theme.Provider>
  );
};

FAQs

Last updated on 31 Jan 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc