Styling Patterns

[mannycarrera4]

How do we style and use our styling utilities

As we build and design components, it's worth keeping track of certain patterns to optimize the style transform and to keep consistency across our components. This discussion is intended as a guidance for how we implement styles.

createStencil

• This utility should be the default function used when styling an element.
• When naming a stencil, it should follow whatever component you're styling, followed by the word Stencil. Example: const menuCardStencil = createStencil({}). MenuCard being the component you're applying the stencil to.
• Until we drop support for Style Props, use mergeStyles when calling your stencil. <Element {...mergeStyles(elemProps, myComponentStencil())}/>

Tokens

• Use tokens whenever possible.
• For 0 based value, use system.shape.zero for border-radius and system.space.zero for other px based values (except non px values, such as opacity, z-index).
• Use this migration discussion to reference a mapping of old tokens

px2rem

• Instead of px values consider to use px2rem helper function if value is not represented by token

<Element/>

• In most cases where a component renders a single element, use <Element/> in the return function. This prevents us from using components that might compose style and behavior. Not all use cases might be this simple.
• The goal is to separate styles from behavior to ensure our css is what consumers expect.