Nesting a CustomizationProvider into a ThemeProvider

[justinmcbride]

Hi there,

I'm implementing a design with my team, and we started to use the CustomizationProvider. Once we did this, I noticed that our fonts no longer aligned with what was provided by the Theme.Provider component. It seems that the CustomizationProvider by default doesn't override many styles, but it does the font.

I've created a sandbox to show the issue: https://codesandbox.io/p/sandbox/paste-theme-font-wrappers-wwhyzj

How can we use the CustomizationProvider elements={...}> component without it overriding the font family of all nested components?

Thank you

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Hi there,

To use the CustomizationProvider without it overriding the font family of all nested components, you can manually create a custom theme by duplicating the Paste default theme and changing only the design token values you want to customize, excluding the font family tokens if you wish to keep them unchanged. This approach allows you to override specific styles such as font weights and border widths, without affecting the font family across your application.

Here's an example of how you might set up the CustomizationProvider to customize certain aspects of your theme while preserving the default font family:

import {CustomizationProvider} from '@twilio-paste/core/customization';

const MyApp = () => (
  <CustomizationProvider baseTheme="default" theme={{
    "fontWeights": {
      "fontWeightNormal": "light",
      "fontWeightMedium": "500",
      "fontWeightBold": "600"
    },
    "borderWidths": {
      "borderWidth10": '2px',
      "borderWidth20": '4rem',
      "borderWidth30": '4em'
    }
  }}>
    {/* rest of app */}
  </CustomizationProvider>
)

In this example, we're customizing fontWeights and borderWidths without specifying any changes to the fontFamily, thus the default font family provided by Paste will remain in effect.

Remember, when specifying the baseTheme in a TypeScript Flex plugin or any TypeScript project, ensure the value is all lowercase (e.g., baseTheme="default") to avoid any issues.

For more information on using the CustomizationProvider and creating a custom theme, you can refer to the CustomizationProvider documentation.

If you have any more questions or need further assistance, feel free to ask!

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Adding Custom CSS Support for all component in Paste - Answer (updated: 04/14/2023, similarity score: 86%)
• CustomizationProvider and available baseTheme properties (updated: 12/07/2023, similarity score: 86%)
• How can CustomizationProvider be used in a typescript Flex plugin? - Answer (updated: 10/15/2022, similarity score: 85%)

[justinmcbride]

Passing a blank theme prop theme={{}} does not help rectify the situation.

[serifluous]

Hey @justinmcbride ! Can you share where you're using CustomizationProvider? It should only be used for apps external to Twilio / by Twilio customers, so I wanted to check to make sure we can fully help solve your issue.

[justinmcbride]

Hi @serifluous , thanks for the response.
A search across the Console monorepo shows it being used by many different teams, so it seems like we maybe missed the memo a bit there. For example, here's one usage of another team at random: https://github.com/twilio-internal/console/blob/main/apps/console/src/app/applications/Flex/apps/Teams/components/add-users/AddUsersModal.tsx#L173

Our immediate team was using it to provide additional styles to our components, as seen in our feature branch PR: https://github.com/twilio-internal/console/pull/10270/files#diff-57d9ebabc49b34d2aeea63a1ac3121ca8f0e05f16405b8b2ff958ee6c58a4ea5R33

We might be able to look into changing this, but it's a bit tight on timeline now to do an overhaul of the component styling providers.

What would your suggestion be? Is there a way to avoid the issues that I'm running into in the OP?

Thank you!

[serifluous]

Hey @justinmcbride ! This is a really good callout—I'm going to add a few warnings to the customization docs pages that are meant only for Twilio customers and that shouldn't be used internally.

In the meantime, can you share screenshots of what components you're trying to style and where? Feel free to drop them in slack in #help-design-system if they can't be shared publicly. A link to a Figma file with comments pointing to those components works too. Feel free to @ mention me there.

^ There are a few things seeing those screens might help with:

1. The design might not be fully aligned with the system, and we can point you to the actual out-of-the-box Paste component that should be used.
2. We can point you to how to build those components with our primitive components and design tokens. More info about that here: https://paste.twilio.design/customization/composing-custom-components-with-design-tokens