How do I get the Segment logo color if using the Twilio theme?

[cfree]

I'm newish to Paste, using v17, and building a component in the Marketing Campaigns app that connects to both Twilio and Segment, but I'm unable to assign a Box element a background color using a hex value and colorBackgroundBrandHighlight resolves to the Twilio red. I've tried assigning it a style prop but Box doesn't allow for that. What am I missing?

[dosubot[bot]]

Hey @cfree! 👋 I'm Dosu, your friendly neighborhood bot here to tackle bugs, answer your queries, and guide you on your journey to becoming a contributor, all while the human maintainers are busy elsewhere. I'm diving into your issue now and will get back to you with some insights in a jiffy! 🛠️

[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!

In the Paste design system, you cannot directly use hex values or custom styles for components like Box. Paste is designed to use design tokens for styling, including colors, borders, backgrounds, text, and more. This approach ensures consistency across Twilio's suite of products and allows for safe upgrades and maintenance of the design system across numerous applications.

For setting a background color on a Box component, you would use one of the available color tokens provided by Paste. For example, if you're trying to set the background color to Twilio red (which you've mentioned is represented by colorBackgroundBrandHighlight), you would do it like this:

import {Box} from '@twilio-paste/core/box';

const MyComponent = () => (
  <Box backgroundColor="colorBackgroundBrandHighlight">
    Your content here
  </Box>
);

If you need to use a specific color that is not available as a token in Paste, you would need to use the Customization Provider to override specific tokens to use new values. This allows you to introduce new colors in a controlled manner, ensuring they align with the design system's guidelines and can be maintained over time.

Remember, direct usage of hex values or custom styles outside of what's provided by the design tokens and the Customization Provider is not supported in Paste. This ensures consistency and maintainability across all applications using the design system.

For more information on design tokens and how to use them, you can visit the Paste design tokens documentation.

Hope this helps!

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:

• Callout component has no background for "new" variation (updated: 03/17/2023, similarity score: 85%)
• Using DataVisualization tokens anywhere you can specify a color (updated: 09/27/2023, similarity score: 84%)
• Unable to use Box paste component in my environment (updated: 06/28/2022, similarity score: 84%)

[dosubot[bot]]

To use the Segment logo color within the Paste design system, you'll need to utilize the Customization Provider to override specific tokens with new values. Here's how you can do it:

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

const App = () => {
  return (
    <CustomizationProvider
      baseTheme="default"
      theme={{
        backgroundColors: {
          colorBackgroundBrandHighlight: 'colorBackgroundBrand30' // Segment logo color token
        }
      }}
    >
      <Box backgroundColor="colorBackgroundBrandHighlight">...</Box>
    </CustomizationProvider>
  )
}

In this snippet, colorBackgroundBrandHighlight is overridden to use colorBackgroundBrand30, which you'll replace with the actual token for the Segment logo color. This approach ensures that your application remains consistent with the design system's guidelines while allowing for the customization you need.

For further guidance and examples on using the Customization Provider, you might find these discussions helpful:

• I want new color #3179 (comment)
• Preferred approach for styling in Flex 2.0 #1902 (comment)

These discussions provide insights into using new colors and customizing your application with the Paste design system, which could be beneficial as you work on integrating the Segment logo color into your component.

Details

Sources

• I want new color
• Preferred approach for styling in Flex 2.0
• packages/paste-design-tokens/tokens/global/background-color.yml
• packages/paste-icons/src/ProductSegmentIcon.tsx

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[cfree]

I have to create a new theme just to use the Segment color? I'll just stick to CSS.

[nkrantz]

Hey @cfree -

Dosubot is our experimental tool that helps answer discussions questions but always needs to be checked by a member of the Paste team before it should be fully trusted. The Customization Provider is only for external users of the design system and shouldn't be used on Twilio applications, so dosu didn't quite get it right here.

What is the color you're trying to use as a Box background color? Have you confirmed that it's not an existing background color token? Any of those tokens can be passed as values to Box styles.

Using tokens rather than hardcoded hex/rgb values helps to create a more seamless user experience across products, no matter how they are built, by allowing the visual design language to be shared from a single source of truth. As the attributes of a design language are never hard-coded into any file, an evolution of the design language can be made with fewer updates to design assets and products by just updating the token values from that single central source.

Let me know if you have more questions about how styles are used in Paste!