feat: add js platform formats to calcite-design-tokens

[alisonailea]

Related Issue: #7986

Summary

Adds two new platforms and four formats to design-token exports.

JS platform

The "js" platform creates a javascript object of the design-tokens and a typescript types declaration file representing that object. This format is necessary for documentation.

Examples

export default {
  core: {
    breakpoint: {
      width: {
        xxs: {
          value: "320px",
          type: "sizing",
          description: "Small handheld devices and mini-windows",
          filePath: "src/core.json",
          isSource: true,
          original: {
            value: "320px",
            type: "sizing",
            description: "Small handheld devices and mini-windows",
          },
          name: "xxs",
          attributes: {},
          path: ["core", "breakpoint", "width", "xxs"],
        },
      xs: {

declare const root: RootObject
export default root
interface RootObject {
  core: Core;
  semantic: Semantic;
}
interface Core {
  font: Font20;
  border: Border7;
  opacity: Opacity2;
  color: Color;
  sizing: Sizing;
  spacing: Sizing;
  breakpoint: Breakpoint;
  'z-index': Zindex;
}

ES6 platform

The "es6" platform provides the design tokens as tree-shakable javascript named exports.

Examples

export const CoreSpacing27 = "256px";
export const CoreSpacing28 = "288px";
export const CoreSpacingNone = "0px";
export const CoreBreakpointWidthXxs = "320px";
export const CoreBreakpointWidthXs = "476px";
export const CoreBreakpointWidthSm = "768px";
export const CoreBreakpointWidthMd = "1152px";
export const CoreBreakpointWidthLg = "1440px";

export const CoreSpacing27 : string;
export const CoreSpacing28 : string;
export const CoreSpacingNone : string;
export const CoreBreakpointWidthXxs : string;
export const CoreBreakpointWidthXs : string;
export const CoreBreakpointWidthSm : string;
export const CoreBreakpointWidthMd : string;
export const CoreBreakpointWidthLg : string;

[jcfranco]

Had a couple of questions, but this LGTM! 🚀🕹️

---

Do we have any control over the generated interfaces? The numbered interfaces/types are unexpected, IMO.

interface Core {
  font: Font20;
  border: Border7;
  opacity: Opacity2;
  color: Color;
  sizing: Sizing;
  spacing: Sizing;
  breakpoint: Breakpoint;
  'z-index': Zindex;
}

Not a deal breaker as these aren't exported.

[jcfranco]

Should we keep ./css/headless for backwards compatibility?

[alisonailea]

yep! sorry I pulled from my November release branch.

[jcfranco]

Nitpick: for readability, could these be named formatJs/formatTs (or similar)?

[alisonailea]

Do we have any control over the generated interfaces?

@jcfranco Technically yes. This was the default type shape generated by json-to-ts. However that seemed like a lot more work for a first pass and like you said, it's not exported.