Loading haxcellence..

DDD provides our design language, but it also is a BaseClass and (technically) a web component in our repo (d-d-d). This guide will help you implement DDD in your projects. DDD Extends LitElement and provides some built in ways that it manages font and CSS application both globally as well as localized to your element.

Install

After installing in your project, we leverage DDD by importing either the BaseClass OR the SuperClass.

You can also implement DDD by just using DDDSuper. The difference is that DDD also pulls in SimpleColorsSuper which supplies logic and color theory for a spectrum of values we are currently phasing out. While not required, these colors are still under consideration for being official colors to leverage along side  those in DDD

DDD usage

The big deal with DDD is that it's resetting styling on things like h1, h2, p, etc, bringing in our standard fonts (and applying them) but also that it's supplying tons of CSS variables. To see them all in one place, see this file in the code repo for a sense of what and how you can change things  however the Design Documentation page has all of this laid out in visual detail.

Common things you'll want to use the CSS variables to do

Those three things alone will make your elements feel like it is part of the HAX ecosystem. Fonts should automatically be applied as a result of how DDD naturally works but if not you can apply the font-family and font-weight to match the standard as well.