@sps-woodland/tokens 7.0.0

package/config-src/formats/utility-class-builders/typeSize.ts

@@ -0,0 +1,30 @@
+import type { UtilityClassBuilder } from "./UtilityClassBuilder";
+
+export const typeSizeClasses: UtilityClassBuilder = {
+  appliesTo: (token) => token.attributes.category === "size"
+    && token.attributes.type === "type",
+  build(token, dictionary) {
+    const [prefix, prop] = {
+      font: ["fs", "font-size"],
+      line: ["lh", "line-height"],
+    }[token.attributes.subitem];
+
+    let composite = "";
+    if (token.attributes.subitem === "font") {
+      const lhToken = dictionary.tokens.size.type[token.attributes.item].line;
+      composite = `
+        .type-${token.attributes.item} {
+          font-size: ${token.variableReference} !important;
+          line-height: ${lhToken.variableReference} !important;
+        }
+      `;
+    }
+
+    return `
+      .${prefix}-${token.attributes.item} {
+        ${prop}: ${token.variableReference} !important;
+      }
+      ${composite}
+    `;
+  },
+};

package/config-src/formats/utility-class-builders/typeWeight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeWeight.js","sourceRoot":"","sources":["typeWeight.ts"],"names":[],"mappings":";;;AAEa,QAAA,iBAAiB,GAAwB;IACpD,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,MAAM;WACrD,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,QAAQ;IACvC,KAAK,CAAC,KAAK;QACT,OAAO;YACC,KAAK,CAAC,UAAU,CAAC,IAAI;uBACV,KAAK,CAAC,iBAAiB;;KAEzC,CAAC;IACJ,CAAC;CACF,CAAC"}

package/config-src/formats/utility-class-builders/typeWeight.ts

@@ -0,0 +1,13 @@
+import type { UtilityClassBuilder } from "./UtilityClassBuilder";
+
+export const typeWeightClasses: UtilityClassBuilder = {
+  appliesTo: (token) => token.attributes.category === "type"
+    && token.attributes.type === "weight",
+  build(token) {
+    return `
+      .fw-${token.attributes.item} {
+        font-weight: ${token.variableReference} !important;
+      }
+    `;
+  },
+};

package/config-src/formats/utilityClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilityClasses.js","sourceRoot":"","sources":["utilityClasses.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wEAA+C;AAE/C,mDAAqC;AACrC,mCAA+B;AAE/B,0DAA8D;AAC9D,wDAA4D;AAC5D,wDAA4D;AAC5D,gEAAoE;AACpE,8DAAkE;AAClE,gEAAoE;AACpE,oEAAwE;AAGxE,MAAM,aAAa,GAA0B;IAC3C,oBAAY;IACZ,kBAAW;IACX,kBAAW;IACX,0BAAe;IACf,wBAAc;IACd,0BAAe;IACf,8BAAiB;CAClB,CAAC;AAEF,SAAS,iBAAiB,CAAC,OAAe,EAAE,MAAc;IACxD,QAAQ,MAAM,EAAE;QACd,KAAK,KAAK;YACR,OAAO,SAAS,OAAO,GAAG,CAAC;QAE7B,KAAK,MAAM;YACT,OAAO,IAAI,OAAO,EAAE,CAAC;QAEvB;YACE,MAAM,IAAI,KAAK,CAAC,mBAAmB,MAAM,EAAE,CAAC,CAAC;KAChD;AACH,CAAC;AAED,SAAS,qBAAqB,CAAC,SAA6B,EAAE,MAAc;IAC1E,KAAK,MAAM,KAAK,IAAI,SAAS,EAAE;QAC7B,KAAK,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;KACjE;AACH,CAAC;AAED,SAAS,YAAY,CAAC,KAAuB,EAAE,UAAsB;IACnE,MAAM,iBAAiB,GAAG,aAAa,CAAC,IAAI,CAC1C,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CACtC,CAAC;IACF,IAAI,iBAAiB,EAAE;QACrB,OAAO,IAAA,YAAI,EAAC,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;KACzD;IACD,oCAAoC;IACpC,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,0BAAe,CAAC,cAAc,CAAC;IAC7B,IAAI,EAAE,qBAAqB;IAC3B,SAAS,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;QAC5B,qBAAqB,CAAC,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QACnD,MAAM,OAAO,GAAG,UAAU,CAAC,SAAS;aACjC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;aAC/C,IAAI,CAAC,IAAI,CAAC,CAAC;QAEd,OAAO,QAAQ,CAAC,MAAM,CAAC;QACnB,0BAAe,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC;QAClD,OAAO;KACV,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IACxB,CAAC;CACF,CAAC,CAAC;AAEH,0BAAe,CAAC,cAAc,CAAC;IAC7B,IAAI,EAAE,sBAAsB;IAC5B,SAAS,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;QAC5B,qBAAqB,CAAC,UAAU,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;QACpD,MAAM,OAAO,GAAG,UAAU,CAAC,SAAS;aACjC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;aAC/C,IAAI,CAAC,IAAI,CAAC,CAAC;QAEd,OAAO,QAAQ,CAAC,MAAM,CAAC;QACnB,0BAAe,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC;;QAElD,OAAO;KACV,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IACzB,CAAC;CACF,CAAC,CAAC"}

package/config-src/formats/utilityClasses.ts

@@ -0,0 +1,77 @@
+import StyleDictionary from "style-dictionary";
+import type { Dictionary, TransformedToken } from "style-dictionary";
+import * as prettier from "prettier";
+import { trim } from "./utils";
+
+import { colorClasses } from "./utility-class-builders/color";
+import { gridClasses } from "./utility-class-builders/grid";
+import { iconClasses } from "./utility-class-builders/icon";
+import { iconSizeClasses } from "./utility-class-builders/iconSize";
+import { spacingClasses } from "./utility-class-builders/spacing";
+import { typeSizeClasses } from "./utility-class-builders/typeSize";
+import { typeWeightClasses } from "./utility-class-builders/typeWeight";
+import type { UtilityClassBuilder } from "./utility-class-builders/UtilityClassBuilder";
+
+const classBuilders: UtilityClassBuilder[] = [
+  colorClasses,
+  gridClasses,
+  iconClasses,
+  iconSizeClasses,
+  spacingClasses,
+  typeSizeClasses,
+  typeWeightClasses,
+];
+
+function variableReference(varName: string, format: string): string {
+  switch (format) {
+    case "css":
+      return `var(--${varName})`;
+
+    case "scss":
+      return `$${varName}`;
+
+    default:
+      throw new Error(`Unknown format: ${format}`);
+  }
+}
+
+function addVariableReferences(allTokens: TransformedToken[], format: string): void {
+  for (const token of allTokens) {
+    token.variableReference = variableReference(token.name, format);
+  }
+}
+
+function buildClasses(token: TransformedToken, dictionary: Dictionary): string {
+  const applicableBuilder = classBuilders.find(
+    (builder) => builder.appliesTo(token)
+  );
+  if (applicableBuilder) {
+    return trim(applicableBuilder.build(token, dictionary));
+  }
+  // console.log("unhandled:", token);
+  return "";
+}
+
+["css", "scss"].forEach((lang) => {
+  StyleDictionary.registerFormat({
+    name: `${lang}/utility-classes`,
+    formatter({ file, dictionary }) {
+      addVariableReferences(dictionary.allTokens, lang);
+
+      const builtClasses = dictionary.allTokens
+        .map((token) => buildClasses(token, dictionary))
+        .join("\n");
+
+      const staticClasses = classBuilders
+        .map((builder) => builder.staticClasses)
+        .filter(Boolean)
+        .join("\n");
+
+      return prettier.format(`
+        ${StyleDictionary.formatHelpers.fileHeader({ file })}
+        ${builtClasses}
+        ${staticClasses}
+      `, { parser: lang });
+    },
+  });
+});

package/config-src/formats/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["utils.ts"],"names":[],"mappings":";;;AAAA,SAAgB,cAAc,CAAC,MAAW;IACxC,IAAI,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE;QAClC,OAAO,MAAM,CAAC,KAAK,CAAC;KACrB;IACD,OAAO,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;SACvB,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;QACnB,GAAG,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;QACvC,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;AACX,CAAC;AATD,wCASC;AAED,SAAgB,IAAI,CAAC,GAAW;IAC9B,OAAO,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;AAC1C,CAAC;AAFD,oBAEC"}

package/config-src/formats/utils.ts

@@ -0,0 +1,14 @@
+export function simplifyTokens(tokens: any): any {
+  if (tokens.hasOwnProperty("value")) {
+    return tokens.value;
+  }
+  return Object.keys(tokens)
+    .reduce((acc, key) => {
+      acc[key] = simplifyTokens(tokens[key]);
+      return acc;
+    }, {});
+}
+
+export function trim(str: string): string {
+  return str.replace(/^\s+/gm, "").trim();
+}

package/config-src/formats/vanillaExtractSprinkleValues.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vanillaExtractSprinkleValues.js","sourceRoot":"","sources":["vanillaExtractSprinkleValues.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wEAA+C;AAC/C,mDAAqC;AACrC,mCAAyC;AAEzC,0BAAe,CAAC,cAAc,CAAC;IAC7B,IAAI,EAAE,iCAAiC;IACvC,SAAS,CAAC,EAAE,UAAU,EAAE;QACtB,MAAM,KAIF,IAAA,sBAAc,EAAC,UAAU,CAAC,MAAM,CAAC,EAJ/B,EACJ,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,UAAU,OAEmB,EADhC,WAAW,cAHV,iBAIL,CAAoC,CAAC;QACtC,MAAM,EACJ,IAAI,EAAE,cAAc,KAElB,UAAU,EADT,eAAe,UAChB,UAAU,EAHR,QAGL,CAAa,CAAC;QAEf,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;aACpC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;YACnB,IAAI,OAAO,WAAW,CAAC,GAAG,CAAC,KAAK,QAAQ,EAAE;gBACxC,KAAK,MAAM,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE;oBAClD,GAAG,CAAC,GAAG,GAAG,IAAI,MAAM,EAAE,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;iBACpD;aACF;iBAAM;gBACL,GAAG,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;aAC7B;YACD,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,EAAE,CAAC,CAAC;QAET,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC;aAC1C,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,iCACjB,GAAG,KACN,CAAC,GAAG,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,IAC/B,EAAE,EAAE,CAAC,CAAC;QAEV,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC;aAC5C,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,iCACjB,GAAG,KACN,CAAC,GAAG,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,IAC/B,EAAE,EAAE,CAAC,CAAC;QAEV,MAAM,MAAM,mBACV,MAAM;YACN,SAAS;YACT,WAAW,IACR,WAAW,CACf,CAAC;QAEF,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE;YAC9C,IAAI,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE;gBAC9B,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC;aAClD;iBAAM;gBACL,MAAM,CAAC,GAAG,CAAC,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;aACpC;SACF;QAED,OAAO,QAAQ,CAAC,MAAM,CAAC;;;;;;oDAMyB,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;KAC9E,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;IAC/B,CAAC;CACF,CAAC,CAAC"}

package/config-src/formats/vanillaExtractSprinkleValues.ts

@@ -0,0 +1,73 @@
+import StyleDictionary from "style-dictionary";
+import * as prettier from "prettier";
+import { simplifyTokens } from "./utils";
+
+StyleDictionary.registerFormat({
+  name: "vanilla-extract/sprinkle-values",
+  formatter({ dictionary }) {
+    const {
+      color: colorTokens,
+      size: sizeTokens,
+      ...otherTokens
+    } = simplifyTokens(dictionary.tokens);
+    const {
+      type: typeSizeTokens,
+      spacing: spacingSizeTokens,
+      ...otherSizeTokens
+    } = sizeTokens;
+
+    const colors = Object.keys(colorTokens)
+      .reduce((acc, key) => {
+        if (typeof colorTokens[key] === "object") {
+          for (const subkey of Object.keys(colorTokens[key])) {
+            acc[`${key}-${subkey}`] = colorTokens[key][subkey];
+          }
+        } else {
+          acc[key] = colorTokens[key];
+        }
+        return acc;
+      }, {});
+
+    const fontSizes = Object.keys(typeSizeTokens)
+      .reduce((acc, key) => ({
+        ...acc,
+        [key]: typeSizeTokens[key].font,
+      }), {});
+
+    const lineHeights = Object.keys(typeSizeTokens)
+      .reduce((acc, key) => ({
+        ...acc,
+        [key]: typeSizeTokens[key].line,
+      }), {});
+
+    const values = {
+      colors,
+      fontSizes,
+      lineHeights,
+      spacing: {
+        ...spacingSizeTokens,
+        none: 0,
+        auto: "auto",
+      },
+      ...otherTokens,
+    };
+
+    for (const key of Object.keys(otherSizeTokens)) {
+      // some need to be merged vs overwriting
+      if (values.hasOwnProperty(key)) {
+        Object.assign(values[key], otherSizeTokens[key]);
+      } else {
+        values[key] = otherSizeTokens[key];
+      }
+    }
+
+    return prettier.format(`
+      /* eslint-disable */
+      /**
+       * GENERATED
+       * Do not edit directly
+       */
+      export const sprinkleValues = Object.freeze(${JSON.stringify(values, null, 0)});
+    `, { parser: "typescript" });
+  },
+});

package/config-src/transforms/attrFont.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attrFont.js","sourceRoot":"","sources":["attrFont.ts"],"names":[],"mappings":";;;;;AAAA,wEAA+C;AAE/C,0BAAe,CAAC,iBAAiB,CAAC;IAChC,IAAI,EAAE,gBAAgB;IACtB,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,OAAO;WACpD,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,MAAM;IACrC,WAAW,CAAC,KAAK;QACf,MAAM,CACJ,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,MAAM,EACN,KAAK,EACN,GAAG,KAAK,CAAC,IAAI,CAAC;QACf,OAAO;YACL,QAAQ;YACR,IAAI;YACJ,MAAM;YACN,MAAM;YACN,KAAK;SACN,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/config-src/transforms/attrFont.ts

@@ -0,0 +1,24 @@
+import StyleDictionary from "style-dictionary";
+
+StyleDictionary.registerTransform({
+  name: "attribute/font",
+  type: "attribute",
+  matcher: (token) => token.attributes.category === "asset"
+    && token.attributes.type === "font",
+  transformer(token) {
+    const [
+      category,
+      type,
+      family,
+      weight,
+      style,
+    ] = token.path;
+    return {
+      category,
+      type,
+      family,
+      weight,
+      style,
+    };
+  },
+});

package/config-src/transforms/attrGridColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attrGridColumns.js","sourceRoot":"","sources":["attrGridColumns.ts"],"names":[],"mappings":";;;;;AAAA,wEAA+C;AAE/C,0BAAe,CAAC,iBAAiB,CAAC;IAChC,IAAI,EAAE,wBAAwB;IAC9B,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,MAAM;WACnD,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,SAAS;IACxC,WAAW,CAAC,KAAK;QACf,OAAO;YACL,QAAQ,EAAE,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;iBAC7B,IAAI,CAAC,KAAK,CAAC;iBACX,IAAI,CAAC,GAAG,CAAC;SACb,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/config-src/transforms/attrGridColumns.ts

@@ -0,0 +1,15 @@
+import StyleDictionary from "style-dictionary";
+
+StyleDictionary.registerTransform({
+  name: "attribute/grid-columns",
+  type: "attribute",
+  matcher: (token) => token.attributes.category === "grid"
+    && token.attributes.type === "columns",
+  transformer(token) {
+    return {
+      cssValue: new Array(token.value)
+        .fill("1fr")
+        .join(" "),
+    };
+  },
+});

package/config-src/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+      "outDir": "../config",
+      "sourceMap": true,
+      "declaration": false,
+      "downlevelIteration": true,
+      "moduleResolution": "node",
+      "resolveJsonModule": true,
+      "emitDecoratorMetadata": true,
+      "experimentalDecorators": true,
+      "esModuleInterop": true,
+      "target": "es6",
+      "typeRoots": ["node_modules/@types"],
+      "types": ["node"],
+      "lib": ["es6", "dom"],
+      "baseUrl": "./",
+      "module": "CommonJS",
+      "skipLibCheck": true
+  },
+  "exclude": []
+}