CustomizationProvider changing Chat-Composer:focus box shadow

[bfeldatwilio]

I'm working to change the style of the ChatComposer by wrapping it in a Customization-Provider. I am noticing that the Customization-Provider is changing the :focus box shadow even with no other style modifications.

ChatComposer:focus alone: boxShadow: rgb(255, 255, 255) 0px 0px 0px 2px, rgb(0, 109, 250) 0px 0px 0px 3px, rgb(204, 228, 255) 0px 0px 0px

ChatComposer:focus wrapped in CustomizationProvider: box-shadow: rgba(2, 99, 224, 0.7) 0px 0px 0px 4px;

in Image: Top ChatComposer is wrapped in CustomizationProvider, bottom one is not.

[dosubot[bot]]

🤖

Hello @bfeldatwilio,

I'm Dosu, a bot here to assist you with bugs, answer your questions, and guide you on becoming a contributor to Paste while you wait for a human maintainer. I'm here to help! I'll be taking a closer look at your issue regarding the CustomizationProvider and the ChatComposer:focus box shadow and will provide you with a full answer shortly.

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

---

Sorry, I don't know how to help with that.

I did do a search though, 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:

• CustomizationProvider and available baseTheme properties (updated: 12/07/2023, similarity score: 85%)
• Removing hover/focus state styling for Input (updated: 08/10/2022, similarity score: 85%)
• Adding Custom CSS Support for all component in Paste - Answer (updated: 04/14/2023, similarity score: 84%)

[dosubot[bot]]

🤖

The CustomizationProvider in Twilio's Paste design system is altering the :focus box shadow of the ChatComposer because it uses the shadow-focus property defined in the design tokens. This property is used to provide a consistent focus state across all interactive elements in the design system.

The shadow-focus property is defined as follows in the provided YAML file:

shadow-focus:
  value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-60}"
  comment: Shadow for focus ring on interactive elements.

This means that when an element is in focus, it will have a box shadow with an offset of 0 in all directions, a blur radius of 20 (as defined by !offset-20), and a color of gray-60 (as defined by !palette-gray-60).

If you want to prevent the CustomizationProvider from altering the :focus box shadow of the ChatComposer, you can override the shadow-focus property in your custom theme. Here's an example of how you can do this:

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

const customTheme = {
  shadows: {
    shadowFocus: 'none',
  },
};

<CustomizationProvider theme={customTheme}>
  <ChatComposer />
</CustomizationProvider>

In this example, the shadowFocus property is set to 'none', which means that the ChatComposer will not have a box shadow when it is in focus. You can replace 'none' with any valid CSS box-shadow value to customize the focus state of the ChatComposer.

You can find more information about the shadow-focus property in the Paste design tokens documentation.

Sources

• packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml

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.

If you want to continue the conversation, start your reply with @dosu-bot.