diff --git a/packages/calcite-design-tokens/package.json b/packages/calcite-design-tokens/package.json index 3d8706d1cee..3b6a811ca9e 100644 --- a/packages/calcite-design-tokens/package.json +++ b/packages/calcite-design-tokens/package.json @@ -12,28 +12,7 @@ "main": "./dist/js/global.js", "types": "./dist/js/global.d.ts", "files": [ - "./dist/css/global.css", - "./dist/css/breakpoint.css", - "./dist/css/classes.css", - "./dist/css/core.css", - "./dist/css/light.css", - "./dist/css/dark.css", - "./dist/css/index.css", - "./dist/css/global.css", - "./dist/scss/breakpoints.scss", - "./dist/scss/mixins.scss", - "./dist/scss/core.scss", - "./dist/scss/light.scss", - "./dist/scss/dark.scss", - "./dist/scss/index.scss", - "./dist/es6/core.js", - "./dist/es6/core.d.ts", - "./dist/es6/global.js", - "./dist/es6/global.d.ts", - "./dist/js/core.d.ts", - "./dist/js/core.js", - "./dist/js/global.d.ts", - "./dist/js/global.js" + "./dist/**/*" ], "repository": { "type": "git", diff --git a/packages/calcite-design-tokens/src/$config.ts b/packages/calcite-design-tokens/src/$config.ts index 8f5c9579b76..02ddd7f9c31 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.ES6], + platforms: [Platform.SCSS, Platform.CSS, Platform.JS, Platform.JSON, Platform.ES6], expandFiles: { css: { typography: "classes.css", diff --git a/packages/calcite-design-tokens/support/tests/index.spec.ts b/packages/calcite-design-tokens/support/tests/index.spec.ts index 0696b5d373d..70ac0ddfa5c 100644 --- a/packages/calcite-design-tokens/support/tests/index.spec.ts +++ b/packages/calcite-design-tokens/support/tests/index.spec.ts @@ -69,6 +69,17 @@ describe.skip("generated tokens", () => { }); }); + describe("JSON", () => { + it("global should match", () => { + const global = readFileSync(resolve(__dirname, "../../dist/js/global.json"), "utf-8"); + expect(global).toMatchSnapshot(); + }); + it("core should match", () => { + const core = readFileSync(resolve(__dirname, "../../dist/js/core.json"), "utf-8"); + expect(core).toMatchSnapshot(); + }); + }); + describe("ES6", () => { it("global should match", () => { let global = readFileSync(resolve(__dirname, "../../dist/es6/calcite-headless.js"), "utf-8"); diff --git a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts index 3d682d3b91c..841f1725f62 100644 --- a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts +++ b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts @@ -15,6 +15,7 @@ import { registerValueAssetToken } from "./styleDictionary/transformer/value/val import { registerValueStringWrapper } from "./styleDictionary/transformer/value/valueStringWrapper.js"; import { registerValueEvaluateMath } from "./styleDictionary/transformer/value/valueCheckEvaluateMath.js"; import { registerValueRGBA } from "./styleDictionary/transformer/value/valueRGBA.js"; +import { registerNameSpacePath } from "./styleDictionary/transformer/name/nameSpacePath.js"; export async function registerCalciteTransformers(sd: StyleDictionary): Promise { // Here we are registering the Transforms provided by Token Studio however, @@ -39,4 +40,5 @@ export async function registerCalciteTransformers(sd: StyleDictionary): Promise< registerValueAlignFontWeightAndStyles(sd); registerValueAssetToken(sd); registerValueStringWrapper(sd); + registerNameSpacePath(sd); } diff --git a/packages/calcite-design-tokens/support/token-transformer/sd-run.ts b/packages/calcite-design-tokens/support/token-transformer/sd-run.ts index aa2dbf60c0a..56690d2e749 100644 --- a/packages/calcite-design-tokens/support/token-transformer/sd-run.ts +++ b/packages/calcite-design-tokens/support/token-transformer/sd-run.ts @@ -3,7 +3,7 @@ import { default as StyleDictionary } from "style-dictionary"; import { registerCalciteTransformers } from "./registerCalciteTransformers.js"; import { filterSource } from "./styleDictionary/filter/filterSource.js"; import { fileExtension } from "../types/fileExtensions.js"; -import { PlatformFormats, PlatformUnion, TypescriptPlatform } from "../types/platform.js"; +import { Platform, PlatformFormats, PlatformUnion, TypescriptPlatform } from "../types/platform.js"; import { CalciteConfigStyleDictionaryRunner } from "../types/config.js"; import { Options } from "../types/styleDictionary/options.js"; @@ -25,10 +25,10 @@ const files = (platform: PlatformUnion, name: string, options?: Options): File[] }); switch (platform) { - case "js": - case "es6": + case Platform.JS: + case Platform.ES6: f.push({ - format: format(platform === "js" ? TypescriptPlatform.TS : TypescriptPlatform.ES6TS), + format: format(platform === Platform.JS ? TypescriptPlatform.TS : TypescriptPlatform.ES6TS), destination: destination(name, TypescriptPlatform.TS), filter: filterSource, options: { ...options, platform }, 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 d10e743a91f..92af85d5032 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 @@ -8,6 +8,7 @@ const formatters: Partial> = { css: CalciteCss, scss: CalciteScss, sass: CalciteScss, + json: "json", 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 765e8492237..39ed0127352 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,6 +59,7 @@ export function formatExtraOutput( ...(mixins || []), ].filter((t) => t); break; + case "json": case "js": case "es6": const exports = index.export?.map((exp) => @@ -94,6 +95,9 @@ export function formatExtraOutput( case Platform.JS: writeFileSync(absoluteFilePath, args.header + "export default " + outputList[0] + "\n"); break; + case Platform.JSON: + writeFileSync(absoluteFilePath, outputList[0]); + break; default: break; } 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 c7bea82affe..2273b636836 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 @@ -1,25 +1,18 @@ import { Core as StyleDictionary } from "style-dictionary"; -import { PlatformUnion } from "../../../../types/platform.js"; +import { Platform, PlatformUnion } from "../../../../types/platform.js"; import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; import { transformNamesSet } from "../name/nameSet.js"; export const transformAttributesNamesPerPlatform: CalledTransformerFunction<{ [key: string]: any }> = (token, args) => { const tokenNameOutputByPlatform = args.options.platforms.reduce((acc, platform) => { - let file; - let platformArgs; - - if ("platform" in args) { - file = args.file; - platformArgs = args.platform; - } else { - file = args.files[0]; - platformArgs = args; - } - acc[platform] = transformNamesSet(token, { - ...platformArgs, - files: [{ ...file, format: platform }], + ...args, + options: { + ...args.options, + platform, + prefix: platform === Platform.JSON || platform === Platform.JS ? undefined : args.options.prefix, + }, }); return acc; 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 a666eded1d0..ab81de4943f 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,6 +51,20 @@ describe("Set transformed name to token reference based on current platform", () }); }); + describe("handle json 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" }, + } as TransformerArgs; + const transformedName = transformNamesSet(token, args); + expect(transformedName).toBe("tier.group.element.property.state"); + }); + }); + describe("handle es6 format", () => { it("should transform a token name to a token reference", () => { const token = { 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 9ef56445f7b..fa53e755904 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,9 @@ export const transformNamesSet: CalledTransformerFunction = (token, args ? transformNamesKebabCase(token, args) : transformNamesCamelCase(token, args), }; - return platform === Platform.JS ? transformNamesJoinPath(token, args) : createTokenReference(t, args); + return platform === Platform.JSON || platform === Platform.JS + ? transformNamesJoinPath(token, args) + : createTokenReference(t, args); }; export const registerNameSet = (sd: StyleDictionary): void => { diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.spec.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.spec.ts new file mode 100644 index 00000000000..f95984f5beb --- /dev/null +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.spec.ts @@ -0,0 +1,21 @@ +import { registerStyleDictionaryTransform } from "../../../../test/utils/registerStyleDictionaryFunction"; +import { TransformedToken } from "../../../../types/styleDictionary/transformedToken"; +import { registerNameSpacePath, transformNamesSpacePath } from "./nameSpacePath"; + +describe("StyleDictionary Transform Name to a spaced path", () => { + describe("register", () => { + it("should call StyleDictionary registerTransform", () => registerStyleDictionaryTransform(registerNameSpacePath)); + }); + + describe("transformer", () => { + it("should transform a token name to a spaced path", () => { + const token = { + name: "some fake name", + path: ["tier", "group", "element", "property", "state"], + } as TransformedToken; + const args = {}; + const transformedName = transformNamesSpacePath(token, args); + expect(transformedName).toBe("Tier Group Element Property State"); + }); + }); +}); diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.ts new file mode 100644 index 00000000000..0a9d83bab8a --- /dev/null +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.ts @@ -0,0 +1,31 @@ +import { Core as StyleDictionary } from "style-dictionary"; +import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; +import { parseTokenPath } from "../utils/parseTokenPath.js"; +import { capitalCase } from "change-case"; + +export const transformNamesSpacePath: CalledTransformerFunction = (token, args) => { + const [tokenPath, negNameRef] = parseTokenPath( + [].concat(args.options?.prefix, token.path).filter((p) => p && p !== args?.options?.prefix) + ); + let name = capitalCase(tokenPath.join(" ")); + + for (let i = 0; i < negNameRef.length; i++) { + const negName = negNameRef[i]; + const n = negName.slice(1); + name = name.replace(n, negName); + } + + return name; +}; + +export const registerNameSpacePath = (sd: StyleDictionary): void => { + const transformerConfig: TransformerConfig = { + name: nameSpacePath, + transformer: transformNamesSpacePath, + type: "name", + }; + + sd.registerTransform(transformerConfig); +}; + +export const nameSpacePath = "name/calcite/space-path"; 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 5d1ba82f374..498790c4b69 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 @@ -9,11 +9,11 @@ import { valueAlignFontWeightAndStyles } from "./value/valueAlignFontWeightAndSt import { valueStringWrapper } from "./value/valueStringWrapper.js"; import { nameKebabCase } from "./name/nameKebabCase.js"; import { attributePlatformNames } from "./attributes/attributePlatformName.js"; -import { nameJoinPath } from "./name/nameJoinPath.js"; import { nameCamelCase } from "./name/nameCamelCase.js"; import { PlatformUnion } from "../../../types/platform.js"; import { valueEvaluateMath } from "./value/valueCheckEvaluateMath.js"; import { CalciteValueRGBA } from "./value/valueRGBA.js"; +import { nameSpacePath } from "./name/nameSpacePath.js"; export type TransformerTypeUnion = `${TransformerTypeEnum}`; @@ -52,13 +52,14 @@ export const styles = [ nameKebabCase, ]; -export const js = [...globalTransformations, attributePlatformNames, nameJoinPath]; +export const js = [...globalTransformations, attributePlatformNames, nameSpacePath]; export const es6 = [...globalTransformations, "ts/descriptionToComment", "attribute/cti", "color/hex", nameCamelCase]; export const transformations: Record = { css: styles, sass: styles, scss: styles, + json: 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 15c09a4a470..7651e4b79d4 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,5 +14,7 @@ export function setTokenNameByPlatform(token: TransformedToken, args: PlatformOp ...token, name: ["css", "scss", "sass"].includes(format) ? kebabCaseName : camelCaseName, }; - return format === Platform.JS ? transformNamesJoinPath(token, args) : createTokenReference(t, args); + return format === Platform.JSON || 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 2bb7ad2cc20..7db7ec424f6 100644 --- a/packages/calcite-design-tokens/support/types/fileExtensions.ts +++ b/packages/calcite-design-tokens/support/types/fileExtensions.ts @@ -4,6 +4,7 @@ export const fileExtension: PlatformObject = { css: ".css", sass: ".scss", scss: ".scss", + json: ".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 44a62f06f5a..319deb45209 100644 --- a/packages/calcite-design-tokens/support/types/platform.ts +++ b/packages/calcite-design-tokens/support/types/platform.ts @@ -2,6 +2,7 @@ export const enum Platform { CSS = "css", SCSS = "scss", SASS = "sass", + JSON = "json", JS = "js", ES6 = "es6", }