How do we ensure that paste components wrapped in a CustomizationProvider adopt a custom theme from Flex's UI attributes?

[WillCKyle]

I worked with Twilio representatives a few months ago and got a working solution but, as we know, things change quickly. Our solution to have a single custom theme adopted by multiple plugins in Flex, each containing Paste components wrapped in a CustomizationProvider at the level where a custom component is injected into Flex, was to update Flex's UI attributes with a custom theme.

The theme object currently contains the subobjects of "islight", "tokens", and "componentThemeOverrides". This last subobject currently contains custom styling for both Paste components and Flex components. E.G:
"card": { "borderRadius": "16px" }
"MainHeader": { "Container": { "background": "#10203E", "color": "#ffffff" } }

The CustomizationProvider looks like:

flex.AgentDesktopView.Panel2 .Content .replace( <CustomizationProvider key="customization" baseTheme="dark">

The UI attributes are updating and Flex components styles are being read but Paste components are not pulling the customized tokens or from customized styling overrides. Paste was reading the theme before but not now.

[SiTaggart]

Hi @WillCKyle, we're reaching out to the Flex team as we don't actually influence how they implement Paste in Flex.

[WillCKyle]

Thank you for reaching out to them for that clarification. In the mean time, can you please confirm that the structure of my theme is correct for use with Paste's CustomizationProvider? It's hard to keep track given the quickly moving development of both Paste and Flex. The structure is:

"theme": {
  "isLight": false,
  "tokens": { 
    "backgroundColors": { "colorBackgroundPrimary": "#000000", ...more tokens... }
    // ...more token categories... 
  },
  "componentThemeOverrides": {
    "input": { "borderRadius": "16px" },
    // ...more Paste component styling overrides...
  }
}

[SiTaggart]

It doesn't look like our shape, but I don't know what Flex does to what you provide to shape it into something that Paste accepts.

Our documentation can be found https://paste.twilio.design/customization/customization-provider

[WillCKyle]

Thank you. I believe this was working at some point. The "tokens" object has children that mirror the Paste theme structure you posted. But if it did work at one point, it definitely does not work now. I sent a separate support ticket to the Flex team as well for more clarification on the interaction between Paste and Flex. I'll post an update in this ticket when I get more information. Please keep me updated about your communications with them too.

[SiTaggart]

Oof, I'm sorry you're experiencing that. That does sound like a bug in the Flex app, hopefully they respond to the support ticket soon