Jun 21, 2021
  • Add globalTextStyle and globalHeadingStyle functions for applying standard text styles to foreign markup in vanilla-extract stylesheets

    Note: These utilities should only be used when you have no control over the HTML.

    EXAMPLE USAGE

    // styles.css.ts
    import { style, globalStyle } from '@vanilla-extract/css';
    import { globalHeadingStyle, globalTextStyle } from 'braid-design-system/css';
    
    export const root = style({});
    
    // Target all <h2> elements within the root class
    globalStyle(
      `${root} h2`,
      globalHeadingStyle({
        level: '2',
      })
    );
    
    // Target all <p> elements within the root class
    globalStyle(
      `${root} p`,
      globalTextStyle({
        size: 'standard',
        weight: 'regular',
      })
    );