Usage
The DXP Connected Design System is designed to be used in various contexts, including but not limited to AEM. The output of the styleguide is CSS only as is meant to be used with semantic HTML.
Development
Section titled “Development”Because we are actively developing this styleguide from scratch we will document the current status per component / part. This helps us to keep track of what’s ready or not to be used.
- WIP: Component is still a work in progress. Use at your own peril.
- Alpha: Component is in alpha state. Ready to be implemented / evaluated by the Foundation Team.
- Beta: Component is in beta state. Ready to be tested by a wider audience.
- Ready: Component is ready to be used.
CSS layers
Section titled “CSS layers”As a consumer you should put all your styles into a CSS layer called tng.userstyles.
AEM Usage
Section titled “AEM Usage”The styles will be made available globally automatically as part of DXP Headless build setup. This means the code should never be included as part of your team’s build pipeline, at least not for components that are meant to be part of our AEM sites.
External Usage
Section titled “External Usage”In many cases you’ll still want to be able to use these styles outside of AEM, for example in Storybook or other sandbox tools. In these cases you can include the CSS directly in your project. The CSS is available as a package on npm, so you can install it with:
npm install --save-dev @tmedxp/styleguidepnpm add --save-dev @tmedxp/styleguideDepending on your needs we provide these potential imports for you.
@tmedxp/styleguide/lexus/icons— import the lexus icons reference@tmedxp/styleguide/lexus.css— import the styleguide with lexus design tokens@tmedxp/styleguide/toyota/icons— import the toyota icons reference@tmedxp/styleguide/toyota.css— import the styleguide with toyota design tokens
For some changes to be correctly applied between different brands we need to know which brand is currently active. This is done by adding a data-brand attribute to the html element.
<html data-brand="lexus"> ...</html>When you are not using the shared component library or not working within the DXP AEM environment, you will need to configure the font face. Check out this reference for more details.
Storybook
Section titled “Storybook”Update your previewHead config with your desired CSS.
<link rel="stylesheet" href="/node_modules/@tmedxp/styleguide/toyota.css" />Because the styleguide will be used side-by-side with existing component styles we have to apply a reset on the root of each new component. This reset is necessary because the current styles apply a lot of styles directly to HTML elements.
<div class="tng-root">…</div>