diff --git a/packages/calcite-design-tokens/src/$config.ts b/packages/calcite-design-tokens/src/$config.ts index 02ddd7f9c31..b91778cd2ee 100644 --- a/packages/calcite-design-tokens/src/$config.ts +++ b/packages/calcite-design-tokens/src/$config.ts @@ -15,7 +15,7 @@ export const config: CalciteTokenTransformConfig = { }, output: { dir: resolve(__dirname, "../dist"), - platforms: [Platform.SCSS, Platform.CSS, Platform.JS, Platform.JSON, Platform.ES6], + platforms: [Platform.SCSS, Platform.CSS, Platform.JS, Platform.DOCS, Platform.ES6], expandFiles: { css: { typography: "classes.css", diff --git a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts index 841f1725f62..b4d1b8a3ebd 100644 --- a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts +++ b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts @@ -16,6 +16,7 @@ import { registerValueStringWrapper } from "./styleDictionary/transformer/value/ import { registerValueEvaluateMath } from "./styleDictionary/transformer/value/valueCheckEvaluateMath.js"; import { registerValueRGBA } from "./styleDictionary/transformer/value/valueRGBA.js"; import { registerNameSpacePath } from "./styleDictionary/transformer/name/nameSpacePath.js"; +import { registerFormatterDocs } from "./styleDictionary/formatter/docs.js"; export async function registerCalciteTransformers(sd: StyleDictionary): Promise { // Here we are registering the Transforms provided by Token Studio however, @@ -41,4 +42,5 @@ export async function registerCalciteTransformers(sd: StyleDictionary): Promise< registerValueAssetToken(sd); registerValueStringWrapper(sd); registerNameSpacePath(sd); + registerFormatterDocs(sd); } diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts new file mode 100644 index 00000000000..d28760334cf --- /dev/null +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts @@ -0,0 +1,30 @@ +import { Core as StyleDictionary } from "style-dictionary"; +import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments"; + +export const formatDocsPlatform: CalledFormatterFunction = (args) => { + const output = { + timestamp: Date.now(), + tokens: {}, + }; + for (let i = 0; i < args.dictionary.allTokens.length; i++) { + const token = args.dictionary.allTokens[i]; + + if (!output.tokens[token.type]) { + output.tokens[token.type] = []; + } + output.tokens[token.type].push(token); + } + + return JSON.stringify(output, null, 2); +}; + +export const registerFormatterDocs = (sd: StyleDictionary): void => { + const formatterConfig: FormatterConfig = { + name: CalciteDocs, + formatter: formatDocsPlatform, + }; + + sd.registerFormat(formatterConfig); +}; + +export const CalciteDocs = "calcite/format/docs"; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts index 92af85d5032..65591b529f6 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts @@ -3,12 +3,13 @@ import { FormatterRules, MappedFormatterArguments } from "../../../types/styleDi import { CalciteCss } from "./css.js"; import { CalciteJs } from "./javascript.js"; import { CalciteScss } from "./scss.js"; +import { CalciteDocs } from "./docs.js"; const formatters: Partial> = { css: CalciteCss, scss: CalciteScss, sass: CalciteScss, - json: "json", + docs: CalciteDocs, js: CalciteJs, es6: "javascript/es6", ts: "typescript/module-declarations", diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts index 39ed0127352..21c5196f71f 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts @@ -59,7 +59,7 @@ export function formatExtraOutput( ...(mixins || []), ].filter((t) => t); break; - case "json": + case "docs": case "js": case "es6": const exports = index.export?.map((exp) => @@ -95,7 +95,7 @@ export function formatExtraOutput( case Platform.JS: writeFileSync(absoluteFilePath, args.header + "export default " + outputList[0] + "\n"); break; - case Platform.JSON: + case Platform.DOCS: writeFileSync(absoluteFilePath, outputList[0]); break; default: diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/attributes/attributePlatformName.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/attributes/attributePlatformName.ts index 2273b636836..7858d0d8a0a 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/attributes/attributePlatformName.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/attributes/attributePlatformName.ts @@ -11,7 +11,7 @@ export const transformAttributesNamesPerPlatform: CalledTransformerFunction<{ [k options: { ...args.options, platform, - prefix: platform === Platform.JSON || platform === Platform.JS ? undefined : args.options.prefix, + prefix: platform === Platform.DOCS || platform === Platform.JS ? undefined : args.options.prefix, }, }); diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.spec.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.spec.ts index ab81de4943f..d5eb4746058 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.spec.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.spec.ts @@ -51,14 +51,14 @@ describe("Set transformed name to token reference based on current platform", () }); }); - describe("handle json format", () => { + describe("handle docs format", () => { it("should transform a token name to a token reference", () => { const token = { name: "some fake name", path: ["tier", "group", "element", "property", "state"], } as TransformedToken; const args = { - options: { platform: "json" }, + options: { platform: "docs" }, } as TransformerArgs; const transformedName = transformNamesSet(token, args); expect(transformedName).toBe("tier.group.element.property.state"); diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.ts index fa53e755904..243e04501d4 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.ts @@ -17,7 +17,7 @@ export const transformNamesSet: CalledTransformerFunction = (token, args ? transformNamesKebabCase(token, args) : transformNamesCamelCase(token, args), }; - return platform === Platform.JSON || platform === Platform.JS + return platform === Platform.DOCS || platform === Platform.JS ? transformNamesJoinPath(token, args) : createTokenReference(t, args); }; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts index 498790c4b69..2b9cb880d7e 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts @@ -59,7 +59,7 @@ export const transformations: Record = { css: styles, sass: styles, scss: styles, - json: js, + docs: js, js, es6, }; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils/setTokenNameByPlatform.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils/setTokenNameByPlatform.ts index 7651e4b79d4..5a964d47489 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils/setTokenNameByPlatform.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils/setTokenNameByPlatform.ts @@ -14,7 +14,7 @@ export function setTokenNameByPlatform(token: TransformedToken, args: PlatformOp ...token, name: ["css", "scss", "sass"].includes(format) ? kebabCaseName : camelCaseName, }; - return format === Platform.JSON || format === Platform.JS + return format === Platform.DOCS || format === Platform.JS ? transformNamesJoinPath(token, args) : createTokenReference(t, args); } diff --git a/packages/calcite-design-tokens/support/types/fileExtensions.ts b/packages/calcite-design-tokens/support/types/fileExtensions.ts index 7db7ec424f6..95806ac7541 100644 --- a/packages/calcite-design-tokens/support/types/fileExtensions.ts +++ b/packages/calcite-design-tokens/support/types/fileExtensions.ts @@ -4,7 +4,7 @@ export const fileExtension: PlatformObject = { css: ".css", sass: ".scss", scss: ".scss", - json: ".json", + docs: ".json", js: ".js", es6: ".js", ts: ".d.ts", diff --git a/packages/calcite-design-tokens/support/types/platform.ts b/packages/calcite-design-tokens/support/types/platform.ts index 319deb45209..4e0d8e82c49 100644 --- a/packages/calcite-design-tokens/support/types/platform.ts +++ b/packages/calcite-design-tokens/support/types/platform.ts @@ -2,7 +2,7 @@ export const enum Platform { CSS = "css", SCSS = "scss", SASS = "sass", - JSON = "json", + DOCS = "docs", JS = "js", ES6 = "es6", }