design-tokens-starter

Design tokens platform to maintain project design, inspired by salesforce-ux

yarn install

and

yarn build

Publish

npm version patch && npm publish --access public

HTML Rendrer layout

${this.renderSection("sizing", "Sizing")}
${this.renderSection("spacing", "Spacing")}
${this.renderSection("font", "Fonts")}
${this.renderSection("font-style", "Font Styles")}
${this.renderSection("font-weight", "Font Weights")}
${this.renderSection("font-size", "Font Sizes")}
${this.renderSection("line-height", "Line Heights")}
${this.renderSection("font-family", "Font Families")}
${this.renderSection("border-style", "Border Styles")}
${this.renderSection("border-color", "Border Colors")}
${this.renderSection("radius", "Radius")}
${this.renderSection("border-radius", "Border Radii")}
${this.renderSection("hr-color", "Horizontal Rule Colors")}
${this.renderSection("background-color", "Background Colors")}
${this.renderSection("gradient", "Gradients")}
${this.renderSection(
"background-gradient",
"Background Gradients"
)}
${this.renderSection("drop-shadow", "Drop Shadows")}
${this.renderSection("box-shadow", "Box Shadows")}
${this.renderSection(
"inner-shadow",
"Inner Drop Shadows",
this.renderDropShadow
)}
${this.renderSection("text-color", "Text Colors")}
${this.renderSection("text-shadow", "Text Shadows")}
${this.renderSection("time", "Time")}
${this.renderSection("media-query", "Media Queries")}