Help mixing in dark mode / inverse components into an otherwise light design

[stern-shawn]

Hiya!

I'm trying to implement the new design for the Twilio Code Exchange site using Paste, and am running into some difficulties reconciling what I can do vs what the design is asking for.

The design:

I've been able to replicate the hero section by manually reproducing the DisplayHeading element with inverted text colors, and fortunately the Input field and others in that zone support a variant='inverse' prop to handle meeting the request of our designer.

Unfortunately, such variants don't exist for Pills/Form Pills which are part of the design so far. Intuitively I've tried wrapping the card headers inside of <Theme.Provider theme="twilio-dark" /> (vs the top-level theme provider with is set to twilio), but that is unexpectedly affecting the rest of the app, not just the elements that are children of the Theme.Provider:

example code:

return (
    // Stand in for Card
    <Box
      as="article"
      borderWidth="borderWidth10"
      borderColor="colorBorderWeaker"
      borderStyle="solid"
      borderRadius="borderRadius30"
    >
      <Theme.Provider theme="twilio-dark">
        <Box
          backgroundColor="colorBackgroundInverseStrong"
          color="colorTextInverse"
          paddingY="space50"
          paddingX="space70"
          margin="space0"
          borderTopLeftRadius="borderRadius20"
          borderTopRightRadius="borderRadius20"
          fontWeight="fontWeightSemibold"
          fontSize="fontSize30"
        >
          <FormPillGroup {...pillState} aria-label="tags">
            {productTags.slice(0, 2).map((product) => {
              const ProductIcon = Literal.productIcon(product);
              return (
                <FormPill
                  {...pillState}
                  key={product}
                  onSelect={filterProduct(product)}
                  selected={filters.products?.includes(product)}
                >
                  <ProductIcon decorative={false} title={`Twilio ${Literal.productName(product)}`} />
                  {Literal.productName(product)}
                </FormPill>
              );
            })}
            {productTags.length > 2 && <FormPill {...pillState}>+ {productTags.length - 2}</FormPill>}
          </FormPillGroup>
        </Box>
      </Theme.Provider>
      <Box>
        ... rest of the card content
      </Box>
</Box>

Is it not technically sound to mix providers like this, and they all globally affect the CSS of the app? If so, how could we get inverted pills, shy of having to rewrite them ourselves? 😅 Appreciate any guidance!

Note: I was able to do this without any visual affects in a separate PR where I'm proving out the idea of an API Reference docs section, because we need inverted badges. Not sure why that was fine but this is causing chaos 😓

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

---

Hiya!

It sounds like you're trying to achieve a specific design using the Paste Design System for the Twilio Code Exchange site, particularly looking to use inverted styles for Pills/Form Pills that match the rest of your design's aesthetic.

From what you've described, it seems you've encountered an issue with trying to use the Theme.Provider to switch themes for a specific component or section of your application, which is not behaving as expected. The Theme.Provider is designed to theme your entire application or a large section of it, and using it in a nested manner for individual components like you've attempted can lead to unexpected global effects, as you've noticed.

Unfortunately, based on the provided Paste documentation sections, there isn't a direct mention of support for an inverse variant or similar for the FormPill component that would easily allow you to achieve the desired inverted style directly within the component's API.

However, considering the flexibility and composability that Paste aims to provide, one approach to achieve the desired look for your Pills/Form Pills without needing to rewrite them completely or rely on nested Theme.Provider instances, is to manually style these components to match your design requirements. This can be done by utilizing the available style props on the FormPill component or by creating a custom theme that applies only to the parts of your application where you need these inverted styles, though the latter might not be as granular as you need.

Given the limitations and the information provided, here's a suggestion on how you might proceed without explicit support for an inverse variant for FormPill:

1. Manual Styling with Style Props: Use the available style props on the FormPill component to manually adjust the background color, text color, and any other relevant styles to achieve the inverted look. This approach requires no changes to the theme and focuses on adjusting the component's appearance directly.

2. Custom CSS: As a more advanced option, you could consider applying custom CSS to target the specific FormPill components you wish to style inversely. This would involve using class names or styled-components (if you're using them in your project) to apply the necessary styles.

Unfortunately, without direct support for an inverse variant in the FormPill component or clear guidance on achieving this from the provided documentation sections, these suggestions are more about leveraging general web development techniques rather than a Paste-specific solution.

For more detailed guidance or to explore if there have been any updates or workarounds since the knowledge cutoff date, I recommend reaching out directly to the Paste Design System team or consulting the latest version of the Paste documentation at https://paste.twilio.design.

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:

• Question about UI when it migrated from v1 to v2 - Answer (updated: 08/25/2023, similarity score: 86%)
• Chip/Pill Input - Answer (updated: 07/11/2023, similarity score: 86%)
• Display/Form Pill Input UI/UX (updated: 06/22/2022, similarity score: 85%)

[serifluous]

Hey @stern-shawn ! Can you submit a dependency request for inverse variants of Pills and Badges? https://airtable.com/appwvsQKyJHfnG5Sa/shrvMvL3BG6Zm0f9l

For more context on inverse variants vs. themes: It's definitely not recommended to mix themes within an app—it gets pretty wonky like you've noticed hah. "Inverse" variants (and tokens) are ones we've specifically styled and implemented on certain components where they've needed to look the same when a user flips between dark and light modes—usually on navigation bars.

Some things that would be helpful to know so we can get this prioritized:

1. Can you send the Figma file where the inverse Pills and Badges are used? Curious to see how your designer implemented this.
2. In the screenshot you shared, the inverse pills look like 2 different colors (example: "Conversations" vs. "Chat"). If we build them, we likely won't provide 2 colors because pills aren't able to communicate hierarchy like what's shown in the screenshot. (I'm assuming its meant to communicate hierarchy, but let me know if not!)
3. Also, in the screenshot you shared, what's the interaction on the "+3" pill, if there is any?

Feel free to tag your designer into this discussion or sign up for office hours too with them https://docs.google.com/spreadsheets/d/10vD91zdwr9hjgDOV3HSGnoC0LgvYw-thmn3X_kvW0xk/edit?gid=664218049#gid=664218049

[stern-shawn]

Thanks, Sarah!

1. Here you go!
2. Yeah, there's a degree of hierarchy being communicated 😓 The first pill with the lighter background is the main Twilio product used in the code sample, and the additional products are all darker. I've emulated this in a custom inverted display pill for now as a selected state but that feels weird given that like you and the docs say, Display pills aren't for interactivity or communicating information like that necesssarily.
3. No interaction! If the user hovers over the +n pill they would see title text with a list of all the omitted products that aren't shown for space reasons. Eg Voice and Runtime would appear in the bubble

Our designer is @blbelli, I'll see if we can't find office hour time, unfortunately we're trying to launch this to production on June 12th which looks like the next opportunity 😭

Code for my custom hack at the moment (very much a copy-paste of DisplayPill with color edits and a false selected state):

import { secureExternalLink } from '@twilio-paste/core/anchor';
import { Box, safelySpreadBoxProps, type BoxElementProps } from '@twilio-paste/core/box';
import type { HTMLPasteProps } from '@twilio-paste/types';
import * as React from 'react';

export type DisplayPillProps = HTMLPasteProps<'a'> & {
  /**
   * Overrides the default element name to apply unique styles with the Customization Provider
   *
   * @default 'DISPLAY_PILL'
   * @type {BoxElementProps['element']}
   */
  element?: BoxElementProps['element'];
  /**
   * Set if a pill appears with 'selected' styles
   *
   * @type {boolean}
   * @memberof DisplayPillProps
   */
  selected?: boolean;
};

/**
 * Display represents a saved entity as part of a collection, usually as a result of multi selection.
 * Display pills should not be used in forms or for editing
 * @example
 * <DisplayPill
 *   onFocus={() => {
 *     console.log('Focused Tennis!');
 *   }}
 *   onBlur={() => {
 *     console.log('Blurred Tennis!');
 *   }}
 *   href="https://google.com"
 * >
 *   Tennis
 * </DisplayPill>
 * @see https://paste.twilio.design/components/display-pill-group
 */
export const InverseDisplayPill = React.forwardRef<HTMLAnchorElement, DisplayPillProps>(
  ({ element = 'DISPLAY_PILL', selected, ...props }, ref) => {
    return (
      <Box as="li" listStyleType="none">
        <Box
          {...safelySpreadBoxProps(props)}
          {...(props.href ? secureExternalLink(props.href) : {})}
          ref={ref}
          element={element}
          as={props.href ? 'a' : 'div'}
          alignItems="center"
          backgroundColor={selected ? 'colorBackgroundInverseStrong' : 'colorBackgroundInverseWeakElevation'}
          borderRadius="borderRadiusPill"
          boxShadow="shadowBorderInverseWeaker"
          color="colorTextInverseWeak"
          columnGap="space20"
          cursor={props.href ? 'pointer' : 'default'}
          display="flex"
          fontSize="fontSize20"
          fontWeight="fontWeightMedium"
          lineHeight="lineHeight10"
          paddingX="space30"
          paddingY="space20"
          outline="none"
          _hover={
            props.href
              ? {
                  boxShadow: 'shadowBorderInverse',
                  textDecoration: 'none',
                }
              : undefined
          }
          _focus={{
            boxShadow: 'shadowFocusInverse',
            textDecoration: 'none',
          }}
        >
          {props.children}
        </Box>
      </Box>
    );
  },
);

InverseDisplayPill.displayName = 'InverseDisplayPill';

[serifluous]

ooh yeah, that date's coming up soon. The route you're going down with creating custom component with Box + Text and copying the existing Display Pill code is going to be your best bet to ship by then.

I'll keep your dependency request for the inverse Display Pill on our roadmap still, and you can swap to the Paste component when we do release it.

(And for some unsolicited design feedback: imo the lighter pill didn't really read to me as the "main product" at first. It seemed like it was the parent product, and the darker ones were children. Happy to chat more about this too if/when you and @blbelli have an iteration on this planned. We can figure out if there's something in Paste we should add to support this use case, or if it's just better to go the custom route for the different colored pill).

[blbelli]

Thanks for calling that out. I can see how the lighter pill might read more like a parent element. That's good to keep that in mind for the future and how we might make the hierarchy clearer. I really appreciate you working with us and the design feedback.