Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@twilio-paste/theme
Advanced tools
Paste Design System Theme Package which provides support for APIs to theme UIs and components.
Readme
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>;
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.
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 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 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>;
};
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);
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
Paste Design System Theme Package which provides support for APIs to theme UIs and components.
The npm package @twilio-paste/theme receives a total of 9,483 weekly downloads. As such, @twilio-paste/theme popularity was classified as popular.
We found that @twilio-paste/theme demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.