Type Styles
We use fluid scaling for typography, meaning we don’t need to specify exact breakpoints. Instead, we define sizes for desktop & mobile and use relative units for the other values to allow the styles to scale seamlessly without much work. With this in mind, it’s important to ensure line-height and letter-spacing are set in percentage (%) values, not pixels.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body
Caption
Utility
Fluid Utility
We use fluid scaling for utility classes, meaning we don’t need to specify exact breakpoints. Instead, we define sizes for desktop & mobile and use relative units for the other values to allow the styles to scale seamlessly without much work.
Following are the utilities are available available:
fluid-text-[mobile|desktop]fluid-line-height-[mobile|desktop]fluid-gap-[mobile|desktop]fluid-pl-[mobile|desktop]fluid-pr-[mobile|desktop]fluid-pb-[mobile|desktop]fluid-pt-[mobile|desktop]fluid-ml-[mobile|desktop]fluid-mr-[mobile|desktop]fluid-mb-[mobile|desktop]fluid-mt-[mobile|desktop]fluid-inset-[mobile|desktop]fluid-top-[mobile|desktop]fluid-right-[mobile|desktop]fluid-bottom-[mobile|desktop]fluid-left-[mobile|desktop]fluid-size-[mobile|desktop]
Note: Replace mobile with Mobile Pixel Size Base and desktop with Desktop Size base
Examples:
Fluid, 12|16
Fluid, 30|70
fluid-size-[200|400]
Buttons
Spacing
Border Radius
Colors
Weber palette from
design.manifest.json.
Surfaces, type, links, and accents also follow the section
color scheme (Theme settings), so you can compare schemes
against the fixed neutrals and system colors below.
Brand & link
Surfaces
Text
Borders & disabled
System & feedback
Neutrals
Grey ramp and black / white (fixed tokens; not overridden by color schemes).
Form Controls
Some help text here
Provide a message
Select a country
This is a custom Select field
This is a custom Select field
Swiper Carousels
Product Cards
Lèchefrite
Compatible avec les barbecues à pellets SmokeFi...
Cheminée d’allumage Rapidfire
Granulés de bois dur naturel Le Mélange du chef
Sac de 20 livres
Icons
Dialogs / Modals
Inner modal
Deferred section
Deferred template
Deferred template
This markup lived in a <template> until the dialog was first opened.
Dynamic Product Card
Section Injection with Live Params
Enter something to search for
Tabs component
Typically, this component would be rendered dynamically as part of section blocks, or something similiar, and the attributes could all be controlled dynamically. For the sake of the styleguide, I've hardcoded three tabs.