Deprecated: Paste Console theme #2084
-
Paste Console theme deprecated November 30thWith the new Console experience being made Generally Available to all customers, the Design Systems team is deprecating the legacy Console theme in Paste. The default theme is the recommended configuration for all Paste consumers going forward. The Console theme will be removed from Paste on February 4th, 2022 as a major release and will affect the following packages:
For more information on how to change the theme and more FAQs, please read our documentation. If you have any questions, please post them below. What do I need to do?If possible, migrate to the new Console repo because they use the default theme and load the fonts for you. Otherwise, if you use the Console theme, you will need to update the theme prop from “console” to “default” on the import {Theme} from '@twilio-paste/theme';
<Theme.Provider theme="default">
<App />
</Theme.Provider>If you are using Paste components and only using tokens to style your app, the You also need to load the correct fonts for the default theme. The best way to do this is to include the following snippet in the <link rel="preconnect" href="https://assets.twilio.com" crossorigin />
<link rel="stylesheet" href="https://assets.twilio.com/public_assets/paste-fonts/main-1.2.0/fonts.css" />Alternatively, Paste will automatically load the default theme's font via JavaScript. Note: this will result in slower download times than including the fonts in the Why is the Console theme being deprecated?The Console theme was initially created as a migration tool to make it easier to adopt Paste in Twilio UIs. The default theme was later created to unite Twilio UIs under the new Twilio product design language. With the new Console experience — which uses the default theme — going GA, we are ready to make the full switch to the default theme. Do I have to do it by February 4th?If you upgrade Paste to the new major version without switching themes, the default theme will automatically be shown instead of the Console theme. We, therefore, strongly recommend testing the default theme in your applications before you upgrade. If you have any feedback or need any help, please post below. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
|
hey team, we are trying to migrate the theme but we have component which is using As I see in the this comment of @richbachman looks like it change the design token from I tried to use const StyledBox = styled(Box)({
backgroundColor: 'colorBackgroundBody',
// ...
});I also saw some examples using something like this but not sure if it's the proper way const StyledBox = styled.box`
backgroundColor: ${props => props.theme.backgroundColors.colorBackgroundBody}; // Typescript is complaning that the property doesn't exist...
`;I made it work with with export const RadioToggle: React.FC<RadioToggleProps> = ({
currentValue,
handleChange,
radioValues,
}) => {
const theme = useTheme();
return (
<Box as="div" id="view-container" width="size200">
<Box
backgroundColor={theme.backgroundColors.colorBackgroundBody}This is the original component: export const RadioToggle: React.FC<RadioToggleProps> = ({
currentValue,
handleChange,
radioValues,
}) => (
<Box as="div" id="view-container" width="size200">
<Box
backgroundColor="colorBackgroundBody"
borderColor="colorBorderLight"
borderRadius="borderRadius20"
borderStyle="solid"
borderWidth="borderWidth10"
display="inline-flex"
maxWidth="size40"
>
<Box
as="fieldset"
display="inherit"
borderWidth="borderWidth0"
padding="space0"
margin="space0"
>
{radioValues.map((radioValue) => (
<StyledRadio
data-s="radio-toggle-input"
key={radioValue}
currentValue={currentValue}
value={radioValue}
handleChange={handleChange}
/>
))}
</Box>
</Box>
</Box>
); |
Beta Was this translation helpful? Give feedback.
-
|
Hi 👋 I'm hoping this will be easier than expected to resolve. The change was made due to Dark mode, where we discovered the To mitigate it we switched to a What you're seeing is our warning to you to switch to the new naming convention before we remove the old tokens. The switch should be easy. For the most part light becomes weak and dark becomes strong. We included a table in the changelog of design tokens for Core 9.2.0 https://paste.twilio.design/core/changelog#9-2-0 The table was correct at time of printing, there were a couple of updates in later updates, but minor. This happened some time ago though, and we move pretty quickly so it's easy to miss. Lesson for me here, is to include a link to a change log or similar with the in app deprecation notice to help in the future. |
Beta Was this translation helpful? Give feedback.
-
|
Ok, thanks @SiTaggart. It worked! 🙇 Anyway, just for curiosity, this is the right way to use design tokens for a custom components? Or it doesn't work since it's a Paste component? const StyledBox = styled(Box)({
backgroundColor: 'colorBackgroundBody',
// ... more properties
}); |
Beta Was this translation helpful? Give feedback.
-
|
So, the best way to create custom components, which will give you the easiest upgrade path to future versions of Paste, is to use We have this guide on the website to explain it. https://paste.twilio.design/customization/composing-custom-components-with-design-tokens You can use emotions styled too, but it get complicated, real quick. To automatically translate design token names to values you must use our css function to create the css. We touch on it briefly here https://paste.twilio.design/tokens/theme-package/#styled-component, but it's not something we advise. Out of curiosity, what draws you to using |
Beta Was this translation helpful? Give feedback.
-
|
Yes, you are right, with |
Beta Was this translation helpful? Give feedback.
-
|
Commenting to mark this as answered |
Beta Was this translation helpful? Give feedback.
Commenting to mark this as answered