From f61e0ecda0112f68f13f838bb4b2417b4b3469b3 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Fri, 13 Dec 2024 14:36:28 -0800 Subject: [PATCH 01/91] WIP: styledictionary4 config setup --- .../calcite-design-tokens/src/config/scss.ts | 56 ++++++++++++++ .../support/actions/registerActions.ts | 5 ++ .../actions/scss/generateBreakpoints.ts | 75 +++++++++++++++++++ .../support/buildTokens.ts | 44 +++++++++++ .../support/filter/dark.ts | 14 ++++ .../support/filter/light.ts | 14 ++++ .../support/header/calcite-default.ts | 13 ++++ .../styleDictionary/filter/filterDark.ts | 14 ++++ .../styleDictionary/filter/filterLight.ts | 14 ++++ .../support/transforms/name/includeMinus.ts | 21 ++++++ .../support/transforms/name/includePlus.ts | 19 +++++ .../transforms/name/removeColorMode.ts | 18 +++++ .../support/transforms/name/removeTier.ts | 15 ++++ .../support/transforms/registerTransforms.ts | 14 ++++ .../support/transforms/value/mathSum.ts | 69 +++++++++++++++++ .../support/utils/node.ts | 5 ++ .../icons/arrow-bold-down-24.svg | 1 - 17 files changed, 410 insertions(+), 1 deletion(-) create mode 100644 packages/calcite-design-tokens/src/config/scss.ts create mode 100644 packages/calcite-design-tokens/support/actions/registerActions.ts create mode 100644 packages/calcite-design-tokens/support/actions/scss/generateBreakpoints.ts create mode 100644 packages/calcite-design-tokens/support/buildTokens.ts create mode 100644 packages/calcite-design-tokens/support/filter/dark.ts create mode 100644 packages/calcite-design-tokens/support/filter/light.ts create mode 100644 packages/calcite-design-tokens/support/header/calcite-default.ts create mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterDark.ts create mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterLight.ts create mode 100644 packages/calcite-design-tokens/support/transforms/name/includeMinus.ts create mode 100644 packages/calcite-design-tokens/support/transforms/name/includePlus.ts create mode 100644 packages/calcite-design-tokens/support/transforms/name/removeColorMode.ts create mode 100644 packages/calcite-design-tokens/support/transforms/name/removeTier.ts create mode 100644 packages/calcite-design-tokens/support/transforms/registerTransforms.ts create mode 100644 packages/calcite-design-tokens/support/transforms/value/mathSum.ts create mode 100644 packages/calcite-design-tokens/support/utils/node.ts delete mode 100644 packages/calcite-ui-icons/icons/arrow-bold-down-24.svg diff --git a/packages/calcite-design-tokens/src/config/scss.ts b/packages/calcite-design-tokens/src/config/scss.ts new file mode 100644 index 00000000000..5ca4d8611d4 --- /dev/null +++ b/packages/calcite-design-tokens/src/config/scss.ts @@ -0,0 +1,56 @@ +import { TransformedToken } from "style-dictionary"; +import { formats, transformGroups, transforms } from "style-dictionary/enums"; +import { nameRemoveTier } from "../../support/transforms/name/removeTier.js"; +import { nameRemoveColorMode } from "../../support/transforms/name/removeColorMode.js"; +import { nameIncludePlus } from "../../support/transforms/name/includePlus.js"; +import { nameIncludeMinus } from "../../support/transforms/name/includeMinus.js"; +import { HeaderCalciteDefault } from "../../support/header/calcite-default.js"; +import { ValueMathSum } from "../../support/transforms/value/mathSum.js"; +import { ActionGenerateSCSSBreakpoints } from "../../support/actions/scss/generateBreakpoints.js"; +import { FilterLightColorTokens } from "../../support/filter/light.js"; +import { FilterDarkColorTokens } from "../../support/filter/dark.js"; + +export default { + actions: [ActionGenerateSCSSBreakpoints], + transformGroup: transformGroups.scss, + transforms: [ + ValueMathSum, + transforms.nameKebab, + nameRemoveTier, + nameRemoveColorMode, + nameIncludePlus, + nameIncludeMinus, + ], + buildPath: "dist/", + prefix: "calcite", + files: [ + { + destination: "light.scss", + format: formats.scssVariables, + filter: FilterLightColorTokens, + }, + { + destination: "dark.scss", + format: formats.scssVariables, + filter: FilterDarkColorTokens, + }, + { + destination: "global.scss", + format: formats.scssVariables, + filter: (token: TransformedToken): boolean => { + return ( + token.isSource && + token.type !== "dark" && + token.type !== "light" && + token.type !== "breakpoint" && + token.type !== "min" && + token.type !== "max" && + token.type !== "typography" + ); + }, + }, + ], + options: { + fileHeader: HeaderCalciteDefault, + }, +}; diff --git a/packages/calcite-design-tokens/support/actions/registerActions.ts b/packages/calcite-design-tokens/support/actions/registerActions.ts new file mode 100644 index 00000000000..bd04ce5c141 --- /dev/null +++ b/packages/calcite-design-tokens/support/actions/registerActions.ts @@ -0,0 +1,5 @@ +import { registerGenerateSCSSBreakpoints } from "./scss/generateBreakpoints.js"; + +export async function registerCalciteActions(sd: StyleDictionary): Promise { + registerGenerateSCSSBreakpoints(sd); +} diff --git a/packages/calcite-design-tokens/support/actions/scss/generateBreakpoints.ts b/packages/calcite-design-tokens/support/actions/scss/generateBreakpoints.ts new file mode 100644 index 00000000000..a943caea8a1 --- /dev/null +++ b/packages/calcite-design-tokens/support/actions/scss/generateBreakpoints.ts @@ -0,0 +1,75 @@ +import { promises } from "fs"; +import StyleDictionary, { Dictionary, PlatformConfig, TransformedToken } from "style-dictionary"; +import { isObjectOfStringsOrNumbers, transformMathSum } from "../../transforms/value/mathSum.js"; + +async function createFileIfNotExists(filePath, content) { + try { + const fileHandle = await promises.open(filePath, "wx"); + await fileHandle.writeFile(content); + await fileHandle.close(); + console.log(`File created: ${filePath}`); + } catch (err) { + if (err.code === "EEXIST") { + await promises.writeFile(filePath, content); + } else { + debugger; + throw err; + } + } +} + +async function removeFile(filePath) { + try { + await promises.unlink(filePath); + console.log("File removed successfully:", filePath); + } catch (err) { + console.error("Error removing file:", err); + } +} + +const cleanSCSSBreakpoints = async function (dictionary: Dictionary, config: PlatformConfig) { + console.log("Cleaning assets directory"); + await removeFile(config.buildPath + "breakpoints.scss"); +}; + +const generateSCSSBreakpoints = async function (dictionary: Dictionary, config: PlatformConfig) { + const breakpointTokens: TransformedToken[] = dictionary.allTokens.reduce((acc, token) => { + if (token.isSource && token.type === "breakpoint") { + acc.push({ + ...token, + value: transformMathSum(token), + }); + } + return acc; + }, []); + if (breakpointTokens.length > 0) { + const breakpointsString = breakpointTokens + .reduce((acc, token) => { + if (typeof token.value === "string" || typeof token.value === "number") { + acc.push(`$${token.name}: ${token.value};`); + } else if (isObjectOfStringsOrNumbers(token.value)) { + Object.entries(token.value).forEach(([key, value]) => { + acc.push(`$${token.name}-${key}: ${value}px;`); + }); + } + return acc; + }, []) + .join("\n"); + + const filePath = `${config.buildPath}breakpoints.scss`; + const content = [config.options.fileHeader, breakpointsString].join("\n\n"); + + await createFileIfNotExists(filePath, content); + debugger; + } + + return; +}; + +export const ActionGenerateSCSSBreakpoints = "calcite/action/scss/generateBreakpoints"; +export const registerGenerateSCSSBreakpoints = (sd: StyleDictionary): void => + sd.registerAction({ + name: ActionGenerateSCSSBreakpoints, + do: generateSCSSBreakpoints, + undo: cleanSCSSBreakpoints, + }); diff --git a/packages/calcite-design-tokens/support/buildTokens.ts b/packages/calcite-design-tokens/support/buildTokens.ts new file mode 100644 index 00000000000..6b91fd5a351 --- /dev/null +++ b/packages/calcite-design-tokens/support/buildTokens.ts @@ -0,0 +1,44 @@ +import { resolve } from "path"; +import StyleDictionary from "style-dictionary"; +import { logBrokenReferenceLevels, logWarningLevels, logVerbosityLevels } from "style-dictionary/enums"; +import { registerCalciteTransformers } from "./transforms/registerTransforms.js"; +import { registerCalciteActions } from "./actions/registerActions.js"; +import scss from "../src/config/scss.js"; +import { registerCalciteDefaultFileHeader } from "./header/calcite-default.js"; +import { __dirname } from "./utils/node.js"; +import { registerFilterLightColorTokens } from "./filter/light.js"; +import { registerFilterDarkColorTokens } from "./filter/dark.js"; + +const sd = new StyleDictionary({ + // configuration + source: [resolve(__dirname, "../src/semantic/*.json")], + include: [resolve(__dirname, "../src/core/*.json")], + platforms: { + scss, + }, + log: { + warnings: logWarningLevels.warn, + verbosity: logVerbosityLevels.verbose, + errors: { + brokenReferences: logBrokenReferenceLevels.throw, + }, + }, + expand: { + include: ["color", "boxShadow"], + typesMap: { + color: "color", + boxShadow: "shadow", + light: "color", + dark: "color", + min: "breakpoint", + max: "breakpoint", + }, + }, +}); + +await registerFilterLightColorTokens(sd); +await registerFilterDarkColorTokens(sd); +await registerCalciteDefaultFileHeader(sd); +await registerCalciteTransformers(sd); +await registerCalciteActions(sd); +await sd.buildAllPlatforms(); diff --git a/packages/calcite-design-tokens/support/filter/dark.ts b/packages/calcite-design-tokens/support/filter/dark.ts new file mode 100644 index 00000000000..e5065681707 --- /dev/null +++ b/packages/calcite-design-tokens/support/filter/dark.ts @@ -0,0 +1,14 @@ +import StyleDictionary, { TransformedToken } from "style-dictionary"; + +export function filterDarkColorTokens(token: TransformedToken): boolean { + return token.isSource && token.type === "color" && token.path[token.path.length - 1] === "dark"; +} + +export function registerFilterDarkColorTokens(sd: StyleDictionary): void { + return sd.registerFilter({ + name: FilterDarkColorTokens, + filter: filterDarkColorTokens, + }); +} + +export const FilterDarkColorTokens = "filter/DarkColorTokens"; diff --git a/packages/calcite-design-tokens/support/filter/light.ts b/packages/calcite-design-tokens/support/filter/light.ts new file mode 100644 index 00000000000..a61d3b4f4e8 --- /dev/null +++ b/packages/calcite-design-tokens/support/filter/light.ts @@ -0,0 +1,14 @@ +import StyleDictionary, { TransformedToken } from "style-dictionary"; + +export function filterLightColorTokens(token: TransformedToken): boolean { + return token.isSource && token.type === "color" && token.path[token.path.length - 1] === "light"; +} + +export function registerFilterLightColorTokens(sd: StyleDictionary): void { + return sd.registerFilter({ + name: FilterLightColorTokens, + filter: filterLightColorTokens, + }); +} + +export const FilterLightColorTokens = "filter/lightColorTokens"; diff --git a/packages/calcite-design-tokens/support/header/calcite-default.ts b/packages/calcite-design-tokens/support/header/calcite-default.ts new file mode 100644 index 00000000000..23830923490 --- /dev/null +++ b/packages/calcite-design-tokens/support/header/calcite-default.ts @@ -0,0 +1,13 @@ +import StyleDictionary from "style-dictionary"; + +export const headerCalciteDefault = (passedMessage = [""]): Promise | string[] => { + return ["// Calcite Design System", "// Do not edit directly, this file was auto-generated.", ...passedMessage]; +}; + +export const registerCalciteDefaultFileHeader = (sd: StyleDictionary): void => + sd.registerFileHeader({ + name: HeaderCalciteDefault, + fileHeader: headerCalciteDefault, + }); + +export const HeaderCalciteDefault = "calcite/header/default"; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterDark.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterDark.ts new file mode 100644 index 00000000000..712e797ed40 --- /dev/null +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterDark.ts @@ -0,0 +1,14 @@ +import StyleDictionary, { TransformedToken } from "style-dictionary"; + +export function filterDarkMatcher(token: TransformedToken): boolean { + return token.path.includes("dark"); +} + +export function registerFilterDark(sd: StyleDictionary): void { + sd.registerFilter({ + name: filterDark, + filter: filterDarkMatcher, + }); +} + +export const filterDark = "filter/dark"; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterLight.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterLight.ts new file mode 100644 index 00000000000..9f96de764d1 --- /dev/null +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterLight.ts @@ -0,0 +1,14 @@ +import StyleDictionary, { TransformedToken } from "style-dictionary"; + +export function filterLightMatcher(token: TransformedToken): boolean { + return token.path.includes("light"); +} + +export function registerFilterLight(sd: StyleDictionary): void { + sd.registerFilter({ + name: filterLight, + filter: filterLightMatcher, + }); +} + +export const filterLight = "filter/light"; diff --git a/packages/calcite-design-tokens/support/transforms/name/includeMinus.ts b/packages/calcite-design-tokens/support/transforms/name/includeMinus.ts new file mode 100644 index 00000000000..829ecd4040b --- /dev/null +++ b/packages/calcite-design-tokens/support/transforms/name/includeMinus.ts @@ -0,0 +1,21 @@ +import StyleDictionary, { TransformedToken } from "style-dictionary"; + +export function transformNameIncludeMinus(token: TransformedToken): string { + const hasMinus = token.isSource && token.path.find((el) => el[0] === "-"); + + if (hasMinus) { + const scale = hasMinus.replace("-", ""); + return token.name.replace(scale, `--${scale}`); + } + return token.name; +} + +export function registerNameIncludeMinus(sd: StyleDictionary): void { + sd.registerTransform({ + name: nameIncludeMinus, + transform: transformNameIncludeMinus, + type: "name", + }); +} + +export const nameIncludeMinus = "calcite/name/includeMinus"; diff --git a/packages/calcite-design-tokens/support/transforms/name/includePlus.ts b/packages/calcite-design-tokens/support/transforms/name/includePlus.ts new file mode 100644 index 00000000000..2876b3724c7 --- /dev/null +++ b/packages/calcite-design-tokens/support/transforms/name/includePlus.ts @@ -0,0 +1,19 @@ +import StyleDictionary, { TransformedToken } from "style-dictionary"; + +export function transformNameIncludePlus(token: TransformedToken): string { + if (token.isSource && token.path[token.path.length - 1].includes("+")) { + const scale = token.path[token.path.length - 1].replace("+", ""); + return token.name.replace(scale, `${scale}-plus`); + } + return token.name; +} + +export function registerNameIncludePlus(sd: StyleDictionary): void { + sd.registerTransform({ + name: nameIncludePlus, + transform: transformNameIncludePlus, + type: "name", + }); +} + +export const nameIncludePlus = "calcite/name/includePlus"; diff --git a/packages/calcite-design-tokens/support/transforms/name/removeColorMode.ts b/packages/calcite-design-tokens/support/transforms/name/removeColorMode.ts new file mode 100644 index 00000000000..762bd94671d --- /dev/null +++ b/packages/calcite-design-tokens/support/transforms/name/removeColorMode.ts @@ -0,0 +1,18 @@ +import StyleDictionary, { TransformedToken } from "style-dictionary"; + +export function transformNamesRemoveColorMode(token: TransformedToken): string { + if (token.type === "dark" || token.type === "light") { + return token.name.replace(/-(light|dark)$/, ""); + } + return token.name; +} + +export function registerNameRemoveColorMode(sd: StyleDictionary): void { + sd.registerTransform({ + name: nameRemoveColorMode, + transform: transformNamesRemoveColorMode, + type: "name", + }); +} + +export const nameRemoveColorMode = "calcite/name/removeColorMode"; diff --git a/packages/calcite-design-tokens/support/transforms/name/removeTier.ts b/packages/calcite-design-tokens/support/transforms/name/removeTier.ts new file mode 100644 index 00000000000..5cf21cee21f --- /dev/null +++ b/packages/calcite-design-tokens/support/transforms/name/removeTier.ts @@ -0,0 +1,15 @@ +import StyleDictionary, { TransformedToken } from "style-dictionary"; + +export function transformNamesRemoveTier(token: TransformedToken): string { + return token.name.replace(/(core|semantic)-/, ""); +} + +export function registerNameRemoveTier(sd: StyleDictionary): void { + sd.registerTransform({ + name: nameRemoveTier, + transform: transformNamesRemoveTier, + type: "name", + }); +} + +export const nameRemoveTier = "calcite/name/removeTier"; diff --git a/packages/calcite-design-tokens/support/transforms/registerTransforms.ts b/packages/calcite-design-tokens/support/transforms/registerTransforms.ts new file mode 100644 index 00000000000..cb4c25b7c63 --- /dev/null +++ b/packages/calcite-design-tokens/support/transforms/registerTransforms.ts @@ -0,0 +1,14 @@ +import StyleDictionary from "style-dictionary"; +import { registerNameRemoveTier } from "./name/removeTier.js"; +import { registerNameRemoveColorMode } from "./name/removeColorMode.js"; +import { registerNameIncludePlus } from "./name/includePlus.js"; +import { registerNameIncludeMinus } from "./name/includeMinus.js"; +import { registerMathSum } from "./value/mathSum.js"; + +export async function registerCalciteTransformers(sd: StyleDictionary): Promise { + registerNameRemoveTier(sd); + registerNameRemoveColorMode(sd); + registerNameIncludePlus(sd); + registerNameIncludeMinus(sd); + registerMathSum(sd); +} diff --git a/packages/calcite-design-tokens/support/transforms/value/mathSum.ts b/packages/calcite-design-tokens/support/transforms/value/mathSum.ts new file mode 100644 index 00000000000..b4fb880bbfe --- /dev/null +++ b/packages/calcite-design-tokens/support/transforms/value/mathSum.ts @@ -0,0 +1,69 @@ +import StyleDictionary, { TransformedToken } from "style-dictionary"; + +const operatorRegex = new RegExp(/(\d+)\s*([\+\-\*x\/\%])\s*(\d+)/, "g"); + +function hasOperator(value: string): RegExpExecArray { + return operatorRegex.exec(value); +} + +function mathSum(value: string): string { + const operator = hasOperator(value); + + if (operator) { + switch (operator[2]) { + case "+": + return `${Number(operator[1]) + Number(operator[3])}`; + case "-": + return `${Number(operator[1]) - Number(operator[3])}`; + case "*": + case "x": + return `${Number(operator[1]) * Number(operator[3])}`; + case "/": + return `${Number(operator[1]) / Number(operator[3])}`; + case "%": + return `${Number(operator[1]) % Number(operator[3])}`; + default: + return value; + } + } + + return value; +} + +export function isObjectOfStringsOrNumbers(obj: any): obj is Record { + if (typeof obj !== "object" || obj === null) { + return false; + } + + for (const key in obj) { + if (typeof obj[key] !== "string" && typeof obj[key] !== "number") { + return false; + } + } + + return true; +} + +export function transformMathSum(token: TransformedToken): any { + if (typeof token.value === "string") { + return mathSum(token.value); + } else if (isObjectOfStringsOrNumbers(token.value)) { + return Object.entries(token.value).reduce((acc, [key, value]) => { + acc[key] = mathSum(value); + return acc; + }, {}); + } else { + return token.value; + } +} + +export function registerMathSum(sd: StyleDictionary): void { + sd.registerTransform({ + name: ValueMathSum, + transform: transformMathSum, + type: "value", + filter: (token) => !!Number(token.value) || !!hasOperator(token.value), + }); +} + +export const ValueMathSum = "calcite/value/mathSum"; diff --git a/packages/calcite-design-tokens/support/utils/node.ts b/packages/calcite-design-tokens/support/utils/node.ts new file mode 100644 index 00000000000..80bda90c23d --- /dev/null +++ b/packages/calcite-design-tokens/support/utils/node.ts @@ -0,0 +1,5 @@ +import { dirname } from "path"; +import { fileURLToPath } from "url"; + +export const __filename = fileURLToPath(import.meta.url); +export const __dirname = dirname(__filename); diff --git a/packages/calcite-ui-icons/icons/arrow-bold-down-24.svg b/packages/calcite-ui-icons/icons/arrow-bold-down-24.svg deleted file mode 100644 index 20faf553c10..00000000000 --- a/packages/calcite-ui-icons/icons/arrow-bold-down-24.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From 24896e226c7e18491ea70dc4ffa6a56a3e71dc8b Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Mon, 16 Dec 2024 17:57:20 -0800 Subject: [PATCH 02/91] revert(icons): restore deleted icon --- packages/calcite-ui-icons/icons/arrow-bold-down-24.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 packages/calcite-ui-icons/icons/arrow-bold-down-24.svg diff --git a/packages/calcite-ui-icons/icons/arrow-bold-down-24.svg b/packages/calcite-ui-icons/icons/arrow-bold-down-24.svg new file mode 100644 index 00000000000..20faf553c10 --- /dev/null +++ b/packages/calcite-ui-icons/icons/arrow-bold-down-24.svg @@ -0,0 +1 @@ + \ No newline at end of file From 10ee40f00fefe3ed36ef22ba12bbee69d3e9984e Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 17 Dec 2024 14:15:42 -0800 Subject: [PATCH 03/91] fix(tsconfig): resolve build error --- packages/calcite-design-tokens/tsconfig-base.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-design-tokens/tsconfig-base.json b/packages/calcite-design-tokens/tsconfig-base.json index c31bc3b1706..0714dca0780 100644 --- a/packages/calcite-design-tokens/tsconfig-base.json +++ b/packages/calcite-design-tokens/tsconfig-base.json @@ -7,7 +7,7 @@ "experimentalDecorators": true, "lib": ["dom", "dom.iterable", "ES2021"], "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "nodenext", "noUnusedLocals": true, "noUnusedParameters": true, "resolveJsonModule": true, From 2aa4daf0b669265b86585f65ea6ac0b1a1bd2d3a Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 17 Dec 2024 14:17:04 -0800 Subject: [PATCH 04/91] feat(shadow): transform design token shadow values --- .../support/transforms/value/shadow.ts | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 packages/calcite-design-tokens/support/transforms/value/shadow.ts diff --git a/packages/calcite-design-tokens/support/transforms/value/shadow.ts b/packages/calcite-design-tokens/support/transforms/value/shadow.ts new file mode 100644 index 00000000000..9ed2ababa97 --- /dev/null +++ b/packages/calcite-design-tokens/support/transforms/value/shadow.ts @@ -0,0 +1,21 @@ +import StyleDictionary from "style-dictionary"; + +export function transformValueShadowShorthand(token: any): any { + if (token.filePath.includes("shadow")) { + if (token.type === "boxShadow") { + return `${Object.values(token.value).join(" ")}`; + } + } + + return token.value; +} + +export function registerValueShadowShorthand(sd: typeof StyleDictionary): void { + sd.registerTransform({ + name: ValueShadowShorthand, + transform: transformValueShadowShorthand, + type: "value", + }); +} + +export const ValueShadowShorthand = "calcite/value/ShadowShorthand"; From 86b384edf520f8132ed2ad0c6f07d7a70e6769ae Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 17 Dec 2024 14:17:59 -0800 Subject: [PATCH 05/91] chore(registerTransforms): add transforms --- .../support/transforms/registerTransforms.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/calcite-design-tokens/support/transforms/registerTransforms.ts b/packages/calcite-design-tokens/support/transforms/registerTransforms.ts index cb4c25b7c63..b45c76a23ca 100644 --- a/packages/calcite-design-tokens/support/transforms/registerTransforms.ts +++ b/packages/calcite-design-tokens/support/transforms/registerTransforms.ts @@ -3,12 +3,14 @@ import { registerNameRemoveTier } from "./name/removeTier.js"; import { registerNameRemoveColorMode } from "./name/removeColorMode.js"; import { registerNameIncludePlus } from "./name/includePlus.js"; import { registerNameIncludeMinus } from "./name/includeMinus.js"; -import { registerMathSum } from "./value/mathSum.js"; +import { registerValueMathSum } from "./value/mathSum.js"; +import { registerValueShadowShorthand } from "./value/shadow.js"; -export async function registerCalciteTransformers(sd: StyleDictionary): Promise { +export async function registerCalciteTransformers(sd: typeof StyleDictionary): Promise { + registerValueShadowShorthand(sd); registerNameRemoveTier(sd); registerNameRemoveColorMode(sd); registerNameIncludePlus(sd); registerNameIncludeMinus(sd); - registerMathSum(sd); + registerValueMathSum(sd); } From 30b9e4e67eb423e2f23603b6d830ff4d606721d0 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 17 Dec 2024 14:36:47 -0800 Subject: [PATCH 06/91] chore: clean up old design token files --- packages/calcite-design-tokens/src/$config.ts | 8 ++---- packages/calcite-design-tokens/src/index.ts | 7 ++---- .../utils/registerStyleDictionaryFunction.ts | 6 ++--- .../support/tests/index.spec.ts | 7 ++---- .../helpers/createCalciteTokenFiles.spec.ts | 7 ++---- .../helpers/getFiles.spec.ts | 7 ++---- .../registerCalciteTransformers.ts | 2 +- .../support/token-transformer/sd-run.ts | 9 ++++++- .../styleDictionary/filter/filterDark.ts | 2 +- .../styleDictionary/filter/filterLight.ts | 2 +- .../styleDictionary/filter/filterSource.ts | 6 ++--- .../styleDictionary/formatter/css.ts | 2 +- .../styleDictionary/formatter/docs.ts | 25 ++++++++----------- .../styleDictionary/formatter/javascript.ts | 2 +- .../styleDictionary/formatter/scss.ts | 2 +- .../styleDictionary/parser/calcite/index.ts | 2 +- .../transformer/name/nameCamelCase.ts | 2 +- .../transformer/name/nameJoinPath.ts | 2 +- .../transformer/name/nameKebabCase.ts | 2 +- .../transformer/name/nameSet.ts | 2 +- .../transformer/name/nameSpacePath.ts | 2 +- .../transformer/value/valueAssetToken.ts | 2 +- .../value/valueCheckEvaluateMath.ts | 2 +- .../transformer/value/valueColorCss.ts | 2 +- .../value/valueFontFamilyFallbacks.ts | 2 +- .../transformer/value/valueStringWrapper.ts | 2 +- .../transformer/value/valueToREM.ts | 2 +- .../transformer/value/valueToUnitless.ts | 2 +- .../support/transforms/name/includePlus.ts | 2 +- .../support/transforms/name/removeTier.ts | 2 +- 30 files changed, 55 insertions(+), 69 deletions(-) diff --git a/packages/calcite-design-tokens/src/$config.ts b/packages/calcite-design-tokens/src/$config.ts index b91778cd2ee..5869ffcc1e3 100644 --- a/packages/calcite-design-tokens/src/$config.ts +++ b/packages/calcite-design-tokens/src/$config.ts @@ -1,12 +1,8 @@ -import { dirname, resolve } from "path"; -import { fileURLToPath } from "url"; - +import { resolve } from "path"; import { CalciteTokenTransformConfig } from "../support/types/config.js"; import { Platform } from "../support/types/platform.js"; import { globalTokens, coreTokens } from "./index.js"; - -const __filename = fileURLToPath(import.meta.url); -const __dirname = dirname(__filename); +import { __dirname } from "../support/utils/node.js"; export const config: CalciteTokenTransformConfig = { files: [coreTokens, globalTokens], diff --git a/packages/calcite-design-tokens/src/index.ts b/packages/calcite-design-tokens/src/index.ts index ab520f2ce39..346ddec0e29 100644 --- a/packages/calcite-design-tokens/src/index.ts +++ b/packages/calcite-design-tokens/src/index.ts @@ -1,9 +1,6 @@ -import { dirname, resolve } from "path"; -import { fileURLToPath } from "url"; +import { resolve } from "path"; import { createCalciteTokenFiles } from "../support/token-transformer/helpers/createCalciteTokenFiles.js"; - -const __filename = fileURLToPath(import.meta.url); -const __dirname = dirname(__filename); +import { __dirname } from "../support/utils/node.js"; export const coreTokens = await createCalciteTokenFiles({ name: "core", diff --git a/packages/calcite-design-tokens/support/test/utils/registerStyleDictionaryFunction.ts b/packages/calcite-design-tokens/support/test/utils/registerStyleDictionaryFunction.ts index f96e9fad7f0..433a1f88d04 100644 --- a/packages/calcite-design-tokens/support/test/utils/registerStyleDictionaryFunction.ts +++ b/packages/calcite-design-tokens/support/test/utils/registerStyleDictionaryFunction.ts @@ -1,19 +1,19 @@ import { jest } from "@jest/globals"; import { Core as StyleDictionary } from "style-dictionary"; -export const registerStyleDictionaryTransform = (fn: (sd: StyleDictionary) => void): void => { +export const registerStyleDictionaryTransform = (fn: (sd: typeof StyleDictionary) => void): void => { const registerTransform = jest.fn(); fn({ registerTransform } as unknown as StyleDictionary); expect(registerTransform).toHaveBeenCalled(); }; -export const registerStyleDictionaryFilter = (fn: (sd: StyleDictionary) => void): void => { +export const registerStyleDictionaryFilter = (fn: (sd: typeof StyleDictionary) => void): void => { const registerFilter = jest.fn(); fn({ registerFilter } as unknown as StyleDictionary); expect(registerFilter).toHaveBeenCalled(); }; -export const registerStyleDictionaryParser = (fn: (sd: StyleDictionary) => void): void => { +export const registerStyleDictionaryParser = (fn: (sd: typeof StyleDictionary) => void): void => { const registerParser = jest.fn(); fn({ registerParser } as unknown as StyleDictionary); expect(registerParser).toHaveBeenCalled(); diff --git a/packages/calcite-design-tokens/support/tests/index.spec.ts b/packages/calcite-design-tokens/support/tests/index.spec.ts index 0b79f23a23e..8fd0faba201 100644 --- a/packages/calcite-design-tokens/support/tests/index.spec.ts +++ b/packages/calcite-design-tokens/support/tests/index.spec.ts @@ -1,9 +1,6 @@ -import { dirname, resolve } from "path"; -import { fileURLToPath } from "url"; +import { resolve } from "path"; import { readFileSync } from "fs"; - -const __filename = fileURLToPath(import.meta.url); -const __dirname = dirname(__filename); +import { __dirname } from "../utils/node.js"; describe("generated tokens", () => { describe("CSS", () => { diff --git a/packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.spec.ts b/packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.spec.ts index bfa2d6110b0..c834233315d 100644 --- a/packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.spec.ts +++ b/packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.spec.ts @@ -1,10 +1,7 @@ -import { dirname, resolve } from "path"; -import { fileURLToPath } from "url"; +import { resolve } from "path"; import { createCalciteTokenFiles } from "./createCalciteTokenFiles.js"; import { ConfigOptions } from "../../types/config.js"; - -const __filename = fileURLToPath(import.meta.url); -const __dirname = dirname(__filename); +import { __dirname } from "../../utils/node.js"; describe("Helper to create a Calcite Token Transformer configuration file", () => { it("should return a token file", async () => { diff --git a/packages/calcite-design-tokens/support/token-transformer/helpers/getFiles.spec.ts b/packages/calcite-design-tokens/support/token-transformer/helpers/getFiles.spec.ts index 2808dd2b9ba..e82bcd5ba7a 100644 --- a/packages/calcite-design-tokens/support/token-transformer/helpers/getFiles.spec.ts +++ b/packages/calcite-design-tokens/support/token-transformer/helpers/getFiles.spec.ts @@ -1,9 +1,6 @@ -import { dirname, resolve } from "path"; -import { fileURLToPath } from "url"; +import { resolve } from "path"; import { getFiles } from "./getFiles.js"; - -const __filename = fileURLToPath(import.meta.url); -const __dirname = dirname(__filename); +import { __dirname } from "../../utils/node.js"; describe("Helper to get files", () => { it("should accept a file path", async () => { diff --git a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts index e4814aa8abf..e6e7abfcbbe 100644 --- a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts +++ b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts @@ -21,7 +21,7 @@ import { registerValueFontFamilyWithFallbacks } from "./styleDictionary/transfor import { registerValueColorCSS } from "./styleDictionary/transformer/value/valueColorCss.js"; import { registerValueToUnitless } from "./styleDictionary/transformer/value/valueToUnitless.js"; -export async function registerCalciteTransformers(sd: StyleDictionary): Promise { +export async function registerCalciteTransformers(sd: typeof StyleDictionary): Promise { // Here we are registering the Transforms provided by Token Studio however, // we need to pass "expand: false" so that we can use our own custom JSON file parser. // any references to "ts/..." below are references to these Token Studio transformers 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 86d54b04378..ee736e728ff 100644 --- a/packages/calcite-design-tokens/support/token-transformer/sd-run.ts +++ b/packages/calcite-design-tokens/support/token-transformer/sd-run.ts @@ -2,6 +2,8 @@ import { default as StyleDictionary } from "style-dictionary"; import { registerCalciteTransformers } from "./registerCalciteTransformers.js"; import { filterSource } from "./styleDictionary/filter/filterSource.js"; +import { filterLight } from "./styleDictionary/filter/filterLight.js"; +import { filterDark } from "./styleDictionary/filter/filterDark.js"; import { fileExtension } from "../types/fileExtensions.js"; import { Platform, PlatformFormats, PlatformUnion, TypescriptPlatform } from "../types/platform.js"; @@ -28,10 +30,14 @@ const files = (platform: PlatformUnion, name: string, options?: Options): File[] switch (platform) { case Platform.JS: case Platform.ES6: + case Platform.ES6LIGHT: + case Platform.ES6DARK: f.push({ format: format(platform === Platform.JS ? TypescriptPlatform.TS : TypescriptPlatform.ES6TS), destination: destination(name, TypescriptPlatform.TS), - filter: filterSource, + filter: [filterSource].concat( + platform === Platform.ES6LIGHT ? [filterLight] : platform === Platform.ES6DARK ? [filterDark] : [], + ), options: { ...options, platform }, }); break; @@ -61,6 +67,7 @@ export const run = async ({ const platforms = output.platforms.reduce( (acc, platform) => { + debugger; const platformConfig: PlatformOptions = { options: { ...options, expandFiles, platforms: output.platforms }, transforms: transformations[platform], diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterDark.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterDark.ts index 712e797ed40..1e3f26d477e 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterDark.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterDark.ts @@ -4,7 +4,7 @@ export function filterDarkMatcher(token: TransformedToken): boolean { return token.path.includes("dark"); } -export function registerFilterDark(sd: StyleDictionary): void { +export function registerFilterDark(sd: typeof StyleDictionary): void { sd.registerFilter({ name: filterDark, filter: filterDarkMatcher, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterLight.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterLight.ts index 9f96de764d1..0a50743eca8 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterLight.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterLight.ts @@ -4,7 +4,7 @@ export function filterLightMatcher(token: TransformedToken): boolean { return token.path.includes("light"); } -export function registerFilterLight(sd: StyleDictionary): void { +export function registerFilterLight(sd: typeof StyleDictionary): void { sd.registerFilter({ name: filterLight, filter: filterLightMatcher, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterSource.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterSource.ts index 8b8ec5e32b6..2290683c195 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterSource.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterSource.ts @@ -1,13 +1,13 @@ -import { TransformedToken, Core as StyleDictionary } from "style-dictionary"; +import StyleDictionary, { TransformedToken } from "style-dictionary"; export function filterSourceMatcher(token: TransformedToken): boolean { return token.isSource; } -export function registerFilterSource(sd: StyleDictionary): void { +export function registerFilterSource(sd: typeof StyleDictionary): void { sd.registerFilter({ name: filterSource, - matcher: filterSourceMatcher, + filter: filterSourceMatcher, }); } diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts index 806db4adae0..821d0bb682a 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts @@ -17,7 +17,7 @@ export const formatCssPlatform: CalledFormatterFunction = (args) => { return prettierSync.format(header + (tokens ? `:root {${tokens.join(EOL)}}` : ""), { parser: "css" }); }; -export const registerFormatterCss = (sd: StyleDictionary): void => { +export const registerFormatterCss = (sd: typeof StyleDictionary): void => { const formatterConfig: FormatterConfig = { name: CalciteCss, formatter: formatCssPlatform, 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 index 34c61fc73cf..acb81e4d758 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts @@ -1,14 +1,11 @@ -import { Core as StyleDictionary } from "style-dictionary"; -import prettierSync from "@prettier/sync"; - -import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments"; -import { dirname, relative, resolve } from "path"; -import { fileURLToPath } from "url"; +import StyleDictionary from "style-dictionary"; +import type { FormatFn } from "style-dictionary/types"; -const __filename = fileURLToPath(import.meta.url); -const __dirname = dirname(__filename); +import prettierSync from "@prettier/sync"; +import { relative, resolve } from "path"; +import { __dirname } from "../../../utils/node.js"; -export const formatDocsPlatform: CalledFormatterFunction = (args) => { +export const formatDocsPlatform: FormatFn = (args) => { const output = { timestamp: Date.now(), tokens: args.dictionary.allTokens.map((token) => { @@ -22,13 +19,11 @@ export const formatDocsPlatform: CalledFormatterFunction = (args) => { return prettierSync.format(JSON.stringify(output, null, 2), { parser: "json" }); }; -export const registerFormatterDocs = (sd: StyleDictionary): void => { - const formatterConfig: FormatterConfig = { +export const registerFormatterDocs = (sd: typeof StyleDictionary): void => { + sd.registerFormat({ name: CalciteDocs, - formatter: formatDocsPlatform, - }; - - sd.registerFormat(formatterConfig); + format: formatDocsPlatform, + }); }; export const CalciteDocs = "calcite/format/docs"; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts index a300af9e4df..5fc2e17e52f 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts @@ -13,7 +13,7 @@ export const formatJsPlatform: CalledFormatterFunction = (args) => { ); }; -export const registerFormatterJs = (sd: StyleDictionary): void => { +export const registerFormatterJs = (sd: typeof StyleDictionary): void => { const formatterConfig: FormatterConfig = { name: CalciteJs, formatter: formatJsPlatform, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts index b930af93211..1b05a172975 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts @@ -19,7 +19,7 @@ export const formatScssPlatform: CalledFormatterFunction = (args) => { return prettierSync.format(header + (tokens ? tokens.join(EOL) : ""), { parser: "scss" }); }; -export const registerFormatterScss = (sd: StyleDictionary): void => { +export const registerFormatterScss = (sd: typeof StyleDictionary): void => { const formatterConfig: FormatterConfig = { name: CalciteScss, formatter: formatScssPlatform, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/calcite/index.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/calcite/index.ts index ecce3ec4c3b..4e84ee2cbc8 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/calcite/index.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/calcite/index.ts @@ -20,7 +20,7 @@ export function parse(options: ParserOptions): DeepKeyTokenMap { return expanded; } -export function registerCustomJSONParser(sd: StyleDictionary): void { +export function registerCustomJSONParser(sd: typeof StyleDictionary): void { sd.registerParser({ pattern: /\.json$/, parse, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameCamelCase.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameCamelCase.ts index a955fd0bb46..031217c9306 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameCamelCase.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameCamelCase.ts @@ -12,7 +12,7 @@ export const transformNamesCamelCase: CalledTransformerFunction = (token return tokenNameInParamCase; }; -export const registerNameCamelCase = (sd: StyleDictionary): void => { +export const registerNameCamelCase = (sd: typeof StyleDictionary): void => { const transformerConfig: TransformerConfig = { name: nameCamelCase, transformer: transformNamesCamelCase, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameJoinPath.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameJoinPath.ts index 3d74f37b7db..28f8106d481 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameJoinPath.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameJoinPath.ts @@ -8,7 +8,7 @@ export const transformNamesJoinPath: CalledTransformerFunction = (token, .join(".")}`; }; -export const registerNameJoinPath = (sd: StyleDictionary): void => { +export const registerNameJoinPath = (sd: typeof StyleDictionary): void => { const transformerConfig: TransformerConfig = { name: nameJoinPath, transformer: transformNamesJoinPath, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameKebabCase.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameKebabCase.ts index 75f7baeed1c..ed359b52535 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameKebabCase.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameKebabCase.ts @@ -11,7 +11,7 @@ export const transformNamesKebabCase: CalledTransformerFunction = (token return tokenNameInParamCase; }; -export const registerNameKebabCase = (sd: StyleDictionary): void => { +export const registerNameKebabCase = (sd: typeof StyleDictionary): void => { const transformerConfig: TransformerConfig = { name: nameKebabCase, transformer: transformNamesKebabCase, 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 243e04501d4..08e1fd1cc04 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 @@ -22,7 +22,7 @@ export const transformNamesSet: CalledTransformerFunction = (token, args : createTokenReference(t, args); }; -export const registerNameSet = (sd: StyleDictionary): void => { +export const registerNameSet = (sd: typeof StyleDictionary): void => { const transformerConfig: TransformerConfig = { name: nameSet, transformer: transformNamesSet, 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 index 65ec19872a6..5f08530bcc1 100644 --- 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 @@ -15,7 +15,7 @@ export const transformNamesSpacePath: CalledTransformerFunction = (token return name; }; -export const registerNameSpacePath = (sd: StyleDictionary): void => { +export const registerNameSpacePath = (sd: typeof StyleDictionary): void => { const transformerConfig: TransformerConfig = { name: nameSpacePath, transformer: transformNamesSpacePath, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueAssetToken.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueAssetToken.ts index 4691320c806..7a206146f13 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueAssetToken.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueAssetToken.ts @@ -13,7 +13,7 @@ export const transformValuesAssetToken: CalledTransformerFunction = (tok return char1IsQuote && char2IsQuote ? token.value : `"${token.value}"`; }; -export const registerValueAssetToken = (sd: StyleDictionary): void => { +export const registerValueAssetToken = (sd: typeof StyleDictionary): void => { const transformerConfig: TransformerConfig = { name: valueAssetToken, transformer: transformValuesAssetToken, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueCheckEvaluateMath.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueCheckEvaluateMath.ts index 631697feac1..f7dde85f6a0 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueCheckEvaluateMath.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueCheckEvaluateMath.ts @@ -24,7 +24,7 @@ export const transformValuesEvaluateMath: CalledTransformerFunction = (toke return evaluateMathInValue(token.value); }; -export const registerValueEvaluateMath = (sd: StyleDictionary): void => { +export const registerValueEvaluateMath = (sd: typeof StyleDictionary): void => { const transformerConfig: TransformerConfig = { name: transitiveValueEvaluateMath, transformer: transformValuesEvaluateMath, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueColorCss.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueColorCss.ts index 8dfb74146bd..d19879168c1 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueColorCss.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueColorCss.ts @@ -45,7 +45,7 @@ export const transformTransitiveValueColorCSS: CalledTransformerFunction return deeplyNestedColorValue(token.value); }; -export const registerValueColorCSS = (sd: StyleDictionary): void => { +export const registerValueColorCSS = (sd: typeof StyleDictionary): void => { const transformerConfig: TransformerConfig = { name: transitiveValueColorCSS, transformer: transformTransitiveValueColorCSS, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts index 4f6e9448829..a43347f978f 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts @@ -17,7 +17,7 @@ export const transformValuesFontFamilyWithFallbacks: CalledTransformerFunction { +export const registerValueFontFamilyWithFallbacks = (sd: typeof StyleDictionary): void => { const transformerConfig: TransformerConfig = { name: valueFontFamilyFallbacks, transformer: transformValuesFontFamilyWithFallbacks, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueStringWrapper.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueStringWrapper.ts index b28fce33172..91841264d64 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueStringWrapper.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueStringWrapper.ts @@ -10,7 +10,7 @@ export const transformValuesStringWrapper: CalledTransformerFunction = ( return `"${token.value}"`; }; -export const registerValueStringWrapper = (sd: StyleDictionary): void => { +export const registerValueStringWrapper = (sd: typeof StyleDictionary): void => { const transformerConfig: TransformerConfig = { name: valueStringWrapper, transformer: transformValuesStringWrapper, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts index 56edde28aa9..1cb913de0ba 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts @@ -27,7 +27,7 @@ export const transformToREM: CalledTransformerFunction = (token) => { return token.value; }; -export const registerValueToREM = (sd: StyleDictionary): void => { +export const registerValueToREM = (sd: typeof StyleDictionary): void => { const transformerConfig: TransformerConfig = { name: CalciteValueToREM, transformer: transformToREM, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToUnitless.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToUnitless.ts index 3ff11c9d98a..1c0414ce2db 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToUnitless.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToUnitless.ts @@ -26,7 +26,7 @@ export const transformToUnitless: CalledTransformerFunction = (token) => return token.value; }; -export const registerValueToUnitless = (sd: StyleDictionary): void => { +export const registerValueToUnitless = (sd: typeof StyleDictionary): void => { const transformerConfig: TransformerConfig = { name: CalciteValueToUnitless, transformer: transformToUnitless, diff --git a/packages/calcite-design-tokens/support/transforms/name/includePlus.ts b/packages/calcite-design-tokens/support/transforms/name/includePlus.ts index 2876b3724c7..a06eeded1c3 100644 --- a/packages/calcite-design-tokens/support/transforms/name/includePlus.ts +++ b/packages/calcite-design-tokens/support/transforms/name/includePlus.ts @@ -8,7 +8,7 @@ export function transformNameIncludePlus(token: TransformedToken): string { return token.name; } -export function registerNameIncludePlus(sd: StyleDictionary): void { +export function registerNameIncludePlus(sd: typeof StyleDictionary): void { sd.registerTransform({ name: nameIncludePlus, transform: transformNameIncludePlus, diff --git a/packages/calcite-design-tokens/support/transforms/name/removeTier.ts b/packages/calcite-design-tokens/support/transforms/name/removeTier.ts index 5cf21cee21f..6d35068a18b 100644 --- a/packages/calcite-design-tokens/support/transforms/name/removeTier.ts +++ b/packages/calcite-design-tokens/support/transforms/name/removeTier.ts @@ -4,7 +4,7 @@ export function transformNamesRemoveTier(token: TransformedToken): string { return token.name.replace(/(core|semantic)-/, ""); } -export function registerNameRemoveTier(sd: StyleDictionary): void { +export function registerNameRemoveTier(sd: typeof StyleDictionary): void { sd.registerTransform({ name: nameRemoveTier, transform: transformNamesRemoveTier, From d1cb55cdfcea82b7e3cc416b7c436438e9ea41ee Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 17 Dec 2024 14:42:25 -0800 Subject: [PATCH 07/91] feat: add design token filters --- .../support/filter/dark.ts | 4 +-- .../support/filter/global.ts | 25 +++++++++++++++++++ .../support/filter/light.ts | 4 +-- .../support/filter/registerFilters.ts | 10 ++++++++ 4 files changed, 39 insertions(+), 4 deletions(-) create mode 100644 packages/calcite-design-tokens/support/filter/global.ts create mode 100644 packages/calcite-design-tokens/support/filter/registerFilters.ts diff --git a/packages/calcite-design-tokens/support/filter/dark.ts b/packages/calcite-design-tokens/support/filter/dark.ts index e5065681707..11f08a4d3f3 100644 --- a/packages/calcite-design-tokens/support/filter/dark.ts +++ b/packages/calcite-design-tokens/support/filter/dark.ts @@ -1,10 +1,10 @@ import StyleDictionary, { TransformedToken } from "style-dictionary"; export function filterDarkColorTokens(token: TransformedToken): boolean { - return token.isSource && token.type === "color" && token.path[token.path.length - 1] === "dark"; + return token.isSource && token.original.type === "color" && token.path[token.path.length - 1] === "dark"; } -export function registerFilterDarkColorTokens(sd: StyleDictionary): void { +export function registerFilterDarkColorTokens(sd: typeof StyleDictionary): void { return sd.registerFilter({ name: FilterDarkColorTokens, filter: filterDarkColorTokens, diff --git a/packages/calcite-design-tokens/support/filter/global.ts b/packages/calcite-design-tokens/support/filter/global.ts new file mode 100644 index 00000000000..2611e717284 --- /dev/null +++ b/packages/calcite-design-tokens/support/filter/global.ts @@ -0,0 +1,25 @@ +import StyleDictionary, { TransformedToken } from "style-dictionary"; + +export function filterGlobalTokens(token: TransformedToken): boolean { + return ( + token.isSource && + !( + token.type === "color" || + token.type === "dark" || + token.type === "light" || + token.type === "breakpoint" || + token.type === "min" || + token.type === "max" || + token.type === "typography" + ) + ); +} + +export function registerFilterGlobalTokens(sd: typeof StyleDictionary): void { + return sd.registerFilter({ + name: FilterGlobalTokens, + filter: filterGlobalTokens, + }); +} + +export const FilterGlobalTokens = "filter/GlobalTokens"; diff --git a/packages/calcite-design-tokens/support/filter/light.ts b/packages/calcite-design-tokens/support/filter/light.ts index a61d3b4f4e8..2e41a2457fd 100644 --- a/packages/calcite-design-tokens/support/filter/light.ts +++ b/packages/calcite-design-tokens/support/filter/light.ts @@ -1,10 +1,10 @@ import StyleDictionary, { TransformedToken } from "style-dictionary"; export function filterLightColorTokens(token: TransformedToken): boolean { - return token.isSource && token.type === "color" && token.path[token.path.length - 1] === "light"; + return token.isSource && token.original.type === "color" && token.path[token.path.length - 1] === "light"; } -export function registerFilterLightColorTokens(sd: StyleDictionary): void { +export function registerFilterLightColorTokens(sd: typeof StyleDictionary): void { return sd.registerFilter({ name: FilterLightColorTokens, filter: filterLightColorTokens, diff --git a/packages/calcite-design-tokens/support/filter/registerFilters.ts b/packages/calcite-design-tokens/support/filter/registerFilters.ts new file mode 100644 index 00000000000..09a62695180 --- /dev/null +++ b/packages/calcite-design-tokens/support/filter/registerFilters.ts @@ -0,0 +1,10 @@ +import StyleDictionary from "style-dictionary"; +import { registerFilterGlobalTokens } from "./global.js"; +import { registerFilterLightColorTokens } from "./light.js"; +import { registerFilterDarkColorTokens } from "./dark.js"; + +export async function registerCalciteFilters(sd: typeof StyleDictionary): Promise { + await registerFilterGlobalTokens(sd); + await registerFilterLightColorTokens(sd); + await registerFilterDarkColorTokens(sd); +} From 8588a0988b7922d846453726fb57b0471801408b Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 17 Dec 2024 14:42:55 -0800 Subject: [PATCH 08/91] feat: add StyleDictionary actions --- .../support/actions/generateBreakpoints.ts | 92 +++++++++++++++++++ .../support/actions/generateTypography.ts | 0 .../support/actions/registerActions.ts | 7 +- .../actions/scss/generateBreakpoints.ts | 75 --------------- 4 files changed, 96 insertions(+), 78 deletions(-) create mode 100644 packages/calcite-design-tokens/support/actions/generateBreakpoints.ts create mode 100644 packages/calcite-design-tokens/support/actions/generateTypography.ts delete mode 100644 packages/calcite-design-tokens/support/actions/scss/generateBreakpoints.ts diff --git a/packages/calcite-design-tokens/support/actions/generateBreakpoints.ts b/packages/calcite-design-tokens/support/actions/generateBreakpoints.ts new file mode 100644 index 00000000000..2afc7ddf3c9 --- /dev/null +++ b/packages/calcite-design-tokens/support/actions/generateBreakpoints.ts @@ -0,0 +1,92 @@ +import { promises } from "fs"; +import StyleDictionary, { Dictionary, PlatformConfig, TransformedToken } from "style-dictionary"; +import { isObjectOfStringsOrNumbers, transformValueMathSum } from "../transforms/value/mathSum.js"; + +async function createFileIfNotExists(filePath, content) { + try { + const fileHandle = await promises.open(filePath, "wx"); + await fileHandle.writeFile(content); + await fileHandle.close(); + console.log(`File created: ${filePath}`); + } catch (err) { + if (err.code === "EEXIST") { + await promises.writeFile(filePath, content); + } else { + throw err; + } + } +} + +async function removeFile(filePath) { + try { + await promises.unlink(filePath); + console.log("File removed successfully:", filePath); + } catch (err) { + console.error("Error removing file:", err); + } +} + +const cleanBreakpoints = async function (dictionary: Dictionary, config: PlatformConfig) { + console.log("Cleaning assets directory"); + await removeFile(config.buildPath + "breakpoints.scss"); +}; + +const formatTokenOutput = ( + token: TransformedToken & { attributes?: TransformedToken["attributes"] & { nameSuffix?: string } }, + format: string, +): string => { + switch (format) { + case ".scss": + return `$${token.name}${token.attributes.nameSuffix ? `-${token.attributes.nameSuffix}` : ""}: ${token.value}px;`; + + default: + break; + } +}; + +const generateBreakpoints = async function (dictionary: Dictionary, config: PlatformConfig) { + const format = ".scss"; + const filePath = config.buildPath + "breakpoints" + format; + const fileHeader = await Promise.resolve( + typeof config.options.fileHeader === "function" ? config.options.fileHeader() : [config.options.fileHeader], + ); + const breakpointTokens: TransformedToken[] = dictionary.allTokens.reduce((acc, token) => { + if (token.isSource && token.type === "breakpoint") { + acc.push({ + ...token, + value: transformValueMathSum(token), + }); + } + return acc; + }, []); + if (breakpointTokens.length > 0) { + const breakpointArray: string[] = []; + const breakpointsString = breakpointTokens + .reduce((acc, token) => { + if (typeof token.value === "string" || typeof token.value === "number") { + acc.push(formatTokenOutput(token, format)); + } else if (isObjectOfStringsOrNumbers(token.value)) { + Object.entries(token.value).forEach(([nameSuffix, value]) => { + const attributes = { ...token.attributes, nameSuffix }; + acc.push(formatTokenOutput({ ...token, value, attributes }, format)); + }); + } + return acc; + }, breakpointArray) + .join("\n"); + + const content = [...fileHeader, breakpointsString].join("\n"); + + await createFileIfNotExists(filePath, content); + } + + return; +}; + +export const ActionGenerateBreakpoints = "calcite/action/generateBreakpoints"; +export const registerGenerateBreakpoints = (sd: typeof StyleDictionary): void => + sd.registerAction({ + name: ActionGenerateBreakpoints, + do: generateBreakpoints, + undo: cleanBreakpoints, + }); diff --git a/packages/calcite-design-tokens/support/actions/generateTypography.ts b/packages/calcite-design-tokens/support/actions/generateTypography.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/calcite-design-tokens/support/actions/registerActions.ts b/packages/calcite-design-tokens/support/actions/registerActions.ts index bd04ce5c141..588f22b55c6 100644 --- a/packages/calcite-design-tokens/support/actions/registerActions.ts +++ b/packages/calcite-design-tokens/support/actions/registerActions.ts @@ -1,5 +1,6 @@ -import { registerGenerateSCSSBreakpoints } from "./scss/generateBreakpoints.js"; +import StyleDictionary from "style-dictionary"; +import { registerGenerateBreakpoints } from "./generateBreakpoints.js"; -export async function registerCalciteActions(sd: StyleDictionary): Promise { - registerGenerateSCSSBreakpoints(sd); +export async function registerCalciteActions(sd: typeof StyleDictionary): Promise { + registerGenerateBreakpoints(sd); } diff --git a/packages/calcite-design-tokens/support/actions/scss/generateBreakpoints.ts b/packages/calcite-design-tokens/support/actions/scss/generateBreakpoints.ts deleted file mode 100644 index a943caea8a1..00000000000 --- a/packages/calcite-design-tokens/support/actions/scss/generateBreakpoints.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { promises } from "fs"; -import StyleDictionary, { Dictionary, PlatformConfig, TransformedToken } from "style-dictionary"; -import { isObjectOfStringsOrNumbers, transformMathSum } from "../../transforms/value/mathSum.js"; - -async function createFileIfNotExists(filePath, content) { - try { - const fileHandle = await promises.open(filePath, "wx"); - await fileHandle.writeFile(content); - await fileHandle.close(); - console.log(`File created: ${filePath}`); - } catch (err) { - if (err.code === "EEXIST") { - await promises.writeFile(filePath, content); - } else { - debugger; - throw err; - } - } -} - -async function removeFile(filePath) { - try { - await promises.unlink(filePath); - console.log("File removed successfully:", filePath); - } catch (err) { - console.error("Error removing file:", err); - } -} - -const cleanSCSSBreakpoints = async function (dictionary: Dictionary, config: PlatformConfig) { - console.log("Cleaning assets directory"); - await removeFile(config.buildPath + "breakpoints.scss"); -}; - -const generateSCSSBreakpoints = async function (dictionary: Dictionary, config: PlatformConfig) { - const breakpointTokens: TransformedToken[] = dictionary.allTokens.reduce((acc, token) => { - if (token.isSource && token.type === "breakpoint") { - acc.push({ - ...token, - value: transformMathSum(token), - }); - } - return acc; - }, []); - if (breakpointTokens.length > 0) { - const breakpointsString = breakpointTokens - .reduce((acc, token) => { - if (typeof token.value === "string" || typeof token.value === "number") { - acc.push(`$${token.name}: ${token.value};`); - } else if (isObjectOfStringsOrNumbers(token.value)) { - Object.entries(token.value).forEach(([key, value]) => { - acc.push(`$${token.name}-${key}: ${value}px;`); - }); - } - return acc; - }, []) - .join("\n"); - - const filePath = `${config.buildPath}breakpoints.scss`; - const content = [config.options.fileHeader, breakpointsString].join("\n\n"); - - await createFileIfNotExists(filePath, content); - debugger; - } - - return; -}; - -export const ActionGenerateSCSSBreakpoints = "calcite/action/scss/generateBreakpoints"; -export const registerGenerateSCSSBreakpoints = (sd: StyleDictionary): void => - sd.registerAction({ - name: ActionGenerateSCSSBreakpoints, - do: generateSCSSBreakpoints, - undo: cleanSCSSBreakpoints, - }); From b41dab9e6a7cbe8a46df14ad0430fca56b91e7ee Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 17 Dec 2024 14:43:48 -0800 Subject: [PATCH 09/91] chore: cleanup old transformers --- .../transformer/attributes/attributePlatformName.ts | 2 +- .../transformer/value/valueAlignFontWeightAndStyle.ts | 2 +- .../support/transforms/name/includeMinus.ts | 2 +- .../support/transforms/name/removeColorMode.ts | 9 ++++++--- 4 files changed, 9 insertions(+), 6 deletions(-) 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 361225daad0..74cf36eb582 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 @@ -23,7 +23,7 @@ export const transformAttributesNamesPerPlatform: CalledTransformerFunction<{ [k return { ...token.attributes, names: tokenNameOutputByPlatform }; }; -export const registerAttributePlatformNames = (sd: StyleDictionary): void => { +export const registerAttributePlatformNames = (sd: typeof StyleDictionary): void => { const transformerConfig: TransformerConfig = { name: attributePlatformNames, transformer: transformAttributesNamesPerPlatform, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueAlignFontWeightAndStyle.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueAlignFontWeightAndStyle.ts index ccd44a49c8a..ecb7d846fc0 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueAlignFontWeightAndStyle.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueAlignFontWeightAndStyle.ts @@ -37,7 +37,7 @@ export const transformValuesAlignFontWeightAndStyles: CalledTransformerFunction< return token.value; }; -export const registerValueAlignFontWeightAndStyles = (sd: StyleDictionary): void => { +export const registerValueAlignFontWeightAndStyles = (sd: typeof StyleDictionary): void => { const transformerConfig: TransformerConfig = { name: valueAlignFontWeightAndStyles, transformer: transformValuesAlignFontWeightAndStyles, diff --git a/packages/calcite-design-tokens/support/transforms/name/includeMinus.ts b/packages/calcite-design-tokens/support/transforms/name/includeMinus.ts index 829ecd4040b..b53f759af6f 100644 --- a/packages/calcite-design-tokens/support/transforms/name/includeMinus.ts +++ b/packages/calcite-design-tokens/support/transforms/name/includeMinus.ts @@ -10,7 +10,7 @@ export function transformNameIncludeMinus(token: TransformedToken): string { return token.name; } -export function registerNameIncludeMinus(sd: StyleDictionary): void { +export function registerNameIncludeMinus(sd: typeof StyleDictionary): void { sd.registerTransform({ name: nameIncludeMinus, transform: transformNameIncludeMinus, diff --git a/packages/calcite-design-tokens/support/transforms/name/removeColorMode.ts b/packages/calcite-design-tokens/support/transforms/name/removeColorMode.ts index 762bd94671d..4243214ee81 100644 --- a/packages/calcite-design-tokens/support/transforms/name/removeColorMode.ts +++ b/packages/calcite-design-tokens/support/transforms/name/removeColorMode.ts @@ -1,17 +1,20 @@ import StyleDictionary, { TransformedToken } from "style-dictionary"; export function transformNamesRemoveColorMode(token: TransformedToken): string { - if (token.type === "dark" || token.type === "light") { - return token.name.replace(/-(light|dark)$/, ""); + const colorModeRegex = /-(light|dark)$/; + if (colorModeRegex.test(token.name) || token.type === "dark" || token.type === "light") { + return token.name.replace(colorModeRegex, ""); } + return token.name; } -export function registerNameRemoveColorMode(sd: StyleDictionary): void { +export function registerNameRemoveColorMode(sd: typeof StyleDictionary): void { sd.registerTransform({ name: nameRemoveColorMode, transform: transformNamesRemoveColorMode, type: "name", + filter: (token) => token.original.type === "color", }); } From 9e7b4df2bca9aa977c69ab1bbbe7d8ca460136c4 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 17 Dec 2024 14:44:48 -0800 Subject: [PATCH 10/91] chore(container-size): type should be breakpoint --- .../src/core/container-size.json | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/calcite-design-tokens/src/core/container-size.json b/packages/calcite-design-tokens/src/core/container-size.json index f7e1f553fb4..39103fe2ddb 100644 --- a/packages/calcite-design-tokens/src/core/container-size.json +++ b/packages/calcite-design-tokens/src/core/container-size.json @@ -3,7 +3,7 @@ "container-size": { "0": { "value": 0, - "type": "sizing", + "type": "breakpoint", "attributes": { "calcite-schema": { "system": "calcite", @@ -27,7 +27,7 @@ }, "154": { "value": 154, - "type": "sizing", + "type": "breakpoint", "attributes": { "calcite-schema": { "system": "calcite", @@ -51,7 +51,7 @@ }, "320": { "value": 320, - "type": "sizing", + "type": "breakpoint", "attributes": { "calcite-schema": { "system": "calcite", @@ -75,7 +75,7 @@ }, "328": { "value": 328, - "type": "sizing", + "type": "breakpoint", "attributes": { "calcite-schema": { "system": "calcite", @@ -99,7 +99,7 @@ }, "476": { "value": 476, - "type": "sizing", + "type": "breakpoint", "attributes": { "calcite-schema": { "system": "calcite", @@ -123,7 +123,7 @@ }, "504": { "value": 504, - "type": "sizing", + "type": "breakpoint", "attributes": { "calcite-schema": { "system": "calcite", @@ -147,7 +147,7 @@ }, "678": { "value": 678, - "type": "sizing", + "type": "breakpoint", "attributes": { "calcite-schema": { "system": "calcite", @@ -171,7 +171,7 @@ }, "768": { "value": 768, - "type": "sizing", + "type": "breakpoint", "attributes": { "calcite-schema": { "system": "calcite", @@ -195,7 +195,7 @@ }, "854": { "value": 854, - "type": "sizing", + "type": "breakpoint", "attributes": { "calcite-schema": { "system": "calcite", @@ -219,7 +219,7 @@ }, "1152": { "value": 1152, - "type": "sizing", + "type": "breakpoint", "attributes": { "calcite-schema": { "system": "calcite", @@ -243,7 +243,7 @@ }, "1440": { "value": 1440, - "type": "sizing", + "type": "breakpoint", "attributes": { "calcite-schema": { "system": "calcite", From c05313cd055539b031b69e7ec1f6aafbbbb756f2 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 17 Dec 2024 14:45:24 -0800 Subject: [PATCH 11/91] feat: add StyleDictionary header for calcite --- .../calcite-design-tokens/support/header/calcite-default.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-design-tokens/support/header/calcite-default.ts b/packages/calcite-design-tokens/support/header/calcite-default.ts index 23830923490..68e8eaeba4a 100644 --- a/packages/calcite-design-tokens/support/header/calcite-default.ts +++ b/packages/calcite-design-tokens/support/header/calcite-default.ts @@ -4,7 +4,7 @@ export const headerCalciteDefault = (passedMessage = [""]): Promise | return ["// Calcite Design System", "// Do not edit directly, this file was auto-generated.", ...passedMessage]; }; -export const registerCalciteDefaultFileHeader = (sd: StyleDictionary): void => +export const registerCalciteDefaultFileHeader = (sd: typeof StyleDictionary): void => sd.registerFileHeader({ name: HeaderCalciteDefault, fileHeader: headerCalciteDefault, From 6eac9942d5b2eae3eef125610c686c0cf8d2ba7a Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 17 Dec 2024 14:45:48 -0800 Subject: [PATCH 12/91] chore: add light dark platforms for old files --- packages/calcite-design-tokens/support/types/platform.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/calcite-design-tokens/support/types/platform.ts b/packages/calcite-design-tokens/support/types/platform.ts index 4e0d8e82c49..f562c65e5b4 100644 --- a/packages/calcite-design-tokens/support/types/platform.ts +++ b/packages/calcite-design-tokens/support/types/platform.ts @@ -5,6 +5,8 @@ export const enum Platform { DOCS = "docs", JS = "js", ES6 = "es6", + ES6LIGHT = "es6light", + ES6DARK = "es6dark", } export const enum TypescriptPlatform { From 52b64eaad1be6f2d9749fb4bfd608d159674352e Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 17 Dec 2024 14:46:42 -0800 Subject: [PATCH 13/91] feat: build StyleDictionary4 design tokens for Calcite --- .../support/buildTokens.ts | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/packages/calcite-design-tokens/support/buildTokens.ts b/packages/calcite-design-tokens/support/buildTokens.ts index 6b91fd5a351..f44f17d091e 100644 --- a/packages/calcite-design-tokens/support/buildTokens.ts +++ b/packages/calcite-design-tokens/support/buildTokens.ts @@ -1,18 +1,23 @@ -import { resolve } from "path"; import StyleDictionary from "style-dictionary"; import { logBrokenReferenceLevels, logWarningLevels, logVerbosityLevels } from "style-dictionary/enums"; import { registerCalciteTransformers } from "./transforms/registerTransforms.js"; import { registerCalciteActions } from "./actions/registerActions.js"; import scss from "../src/config/scss.js"; import { registerCalciteDefaultFileHeader } from "./header/calcite-default.js"; -import { __dirname } from "./utils/node.js"; -import { registerFilterLightColorTokens } from "./filter/light.js"; -import { registerFilterDarkColorTokens } from "./filter/dark.js"; +import { expandTypesMap, register as registerTokenStudioTransformers } from "@tokens-studio/sd-transforms"; +import { registerCalciteFilters } from "./filter/registerFilters.js"; + +await registerTokenStudioTransformers(StyleDictionary); +await registerCalciteFilters(StyleDictionary); +await registerCalciteDefaultFileHeader(StyleDictionary); +await registerCalciteTransformers(StyleDictionary); +await registerCalciteActions(StyleDictionary); const sd = new StyleDictionary({ // configuration - source: [resolve(__dirname, "../src/semantic/*.json")], - include: [resolve(__dirname, "../src/core/*.json")], + source: ["src/semantic/*.json"], + include: ["src/core/*.json"], + preprocessors: ["tokens-studio"], platforms: { scss, }, @@ -24,21 +29,15 @@ const sd = new StyleDictionary({ }, }, expand: { - include: ["color", "boxShadow"], + include: ["color"], typesMap: { - color: "color", - boxShadow: "shadow", light: "color", dark: "color", min: "breakpoint", max: "breakpoint", + ...expandTypesMap, }, }, }); -await registerFilterLightColorTokens(sd); -await registerFilterDarkColorTokens(sd); -await registerCalciteDefaultFileHeader(sd); -await registerCalciteTransformers(sd); -await registerCalciteActions(sd); await sd.buildAllPlatforms(); From caed514e13b8375973a6489fb905725b9f170bb8 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 17 Dec 2024 14:48:26 -0800 Subject: [PATCH 14/91] fix: remove unused StyleDictionary value transformers --- .../support/transforms/registerTransforms.ts | 4 -- .../support/transforms/value/mathSum.ts | 69 ------------------- .../support/transforms/value/shadow.ts | 21 ------ 3 files changed, 94 deletions(-) delete mode 100644 packages/calcite-design-tokens/support/transforms/value/mathSum.ts delete mode 100644 packages/calcite-design-tokens/support/transforms/value/shadow.ts diff --git a/packages/calcite-design-tokens/support/transforms/registerTransforms.ts b/packages/calcite-design-tokens/support/transforms/registerTransforms.ts index b45c76a23ca..1abb41260a5 100644 --- a/packages/calcite-design-tokens/support/transforms/registerTransforms.ts +++ b/packages/calcite-design-tokens/support/transforms/registerTransforms.ts @@ -3,14 +3,10 @@ import { registerNameRemoveTier } from "./name/removeTier.js"; import { registerNameRemoveColorMode } from "./name/removeColorMode.js"; import { registerNameIncludePlus } from "./name/includePlus.js"; import { registerNameIncludeMinus } from "./name/includeMinus.js"; -import { registerValueMathSum } from "./value/mathSum.js"; -import { registerValueShadowShorthand } from "./value/shadow.js"; export async function registerCalciteTransformers(sd: typeof StyleDictionary): Promise { - registerValueShadowShorthand(sd); registerNameRemoveTier(sd); registerNameRemoveColorMode(sd); registerNameIncludePlus(sd); registerNameIncludeMinus(sd); - registerValueMathSum(sd); } diff --git a/packages/calcite-design-tokens/support/transforms/value/mathSum.ts b/packages/calcite-design-tokens/support/transforms/value/mathSum.ts deleted file mode 100644 index b4fb880bbfe..00000000000 --- a/packages/calcite-design-tokens/support/transforms/value/mathSum.ts +++ /dev/null @@ -1,69 +0,0 @@ -import StyleDictionary, { TransformedToken } from "style-dictionary"; - -const operatorRegex = new RegExp(/(\d+)\s*([\+\-\*x\/\%])\s*(\d+)/, "g"); - -function hasOperator(value: string): RegExpExecArray { - return operatorRegex.exec(value); -} - -function mathSum(value: string): string { - const operator = hasOperator(value); - - if (operator) { - switch (operator[2]) { - case "+": - return `${Number(operator[1]) + Number(operator[3])}`; - case "-": - return `${Number(operator[1]) - Number(operator[3])}`; - case "*": - case "x": - return `${Number(operator[1]) * Number(operator[3])}`; - case "/": - return `${Number(operator[1]) / Number(operator[3])}`; - case "%": - return `${Number(operator[1]) % Number(operator[3])}`; - default: - return value; - } - } - - return value; -} - -export function isObjectOfStringsOrNumbers(obj: any): obj is Record { - if (typeof obj !== "object" || obj === null) { - return false; - } - - for (const key in obj) { - if (typeof obj[key] !== "string" && typeof obj[key] !== "number") { - return false; - } - } - - return true; -} - -export function transformMathSum(token: TransformedToken): any { - if (typeof token.value === "string") { - return mathSum(token.value); - } else if (isObjectOfStringsOrNumbers(token.value)) { - return Object.entries(token.value).reduce((acc, [key, value]) => { - acc[key] = mathSum(value); - return acc; - }, {}); - } else { - return token.value; - } -} - -export function registerMathSum(sd: StyleDictionary): void { - sd.registerTransform({ - name: ValueMathSum, - transform: transformMathSum, - type: "value", - filter: (token) => !!Number(token.value) || !!hasOperator(token.value), - }); -} - -export const ValueMathSum = "calcite/value/mathSum"; diff --git a/packages/calcite-design-tokens/support/transforms/value/shadow.ts b/packages/calcite-design-tokens/support/transforms/value/shadow.ts deleted file mode 100644 index 9ed2ababa97..00000000000 --- a/packages/calcite-design-tokens/support/transforms/value/shadow.ts +++ /dev/null @@ -1,21 +0,0 @@ -import StyleDictionary from "style-dictionary"; - -export function transformValueShadowShorthand(token: any): any { - if (token.filePath.includes("shadow")) { - if (token.type === "boxShadow") { - return `${Object.values(token.value).join(" ")}`; - } - } - - return token.value; -} - -export function registerValueShadowShorthand(sd: typeof StyleDictionary): void { - sd.registerTransform({ - name: ValueShadowShorthand, - transform: transformValueShadowShorthand, - type: "value", - }); -} - -export const ValueShadowShorthand = "calcite/value/ShadowShorthand"; From f78d989faac452ad5b4d04dd56a5b7714de96dcd Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 17 Dec 2024 14:48:46 -0800 Subject: [PATCH 15/91] chore(scss): update platform config --- .../calcite-design-tokens/src/config/scss.ts | 34 +++++-------------- 1 file changed, 8 insertions(+), 26 deletions(-) diff --git a/packages/calcite-design-tokens/src/config/scss.ts b/packages/calcite-design-tokens/src/config/scss.ts index 5ca4d8611d4..e5b5e25080b 100644 --- a/packages/calcite-design-tokens/src/config/scss.ts +++ b/packages/calcite-design-tokens/src/config/scss.ts @@ -1,27 +1,19 @@ -import { TransformedToken } from "style-dictionary"; -import { formats, transformGroups, transforms } from "style-dictionary/enums"; +import { formats, transforms } from "style-dictionary/enums"; import { nameRemoveTier } from "../../support/transforms/name/removeTier.js"; import { nameRemoveColorMode } from "../../support/transforms/name/removeColorMode.js"; import { nameIncludePlus } from "../../support/transforms/name/includePlus.js"; import { nameIncludeMinus } from "../../support/transforms/name/includeMinus.js"; import { HeaderCalciteDefault } from "../../support/header/calcite-default.js"; -import { ValueMathSum } from "../../support/transforms/value/mathSum.js"; -import { ActionGenerateSCSSBreakpoints } from "../../support/actions/scss/generateBreakpoints.js"; +import { ActionGenerateBreakpoints } from "../../support/actions/generateBreakpoints.js"; import { FilterLightColorTokens } from "../../support/filter/light.js"; import { FilterDarkColorTokens } from "../../support/filter/dark.js"; +import { FilterGlobalTokens } from "../../support/filter/global.js"; export default { - actions: [ActionGenerateSCSSBreakpoints], - transformGroup: transformGroups.scss, - transforms: [ - ValueMathSum, - transforms.nameKebab, - nameRemoveTier, - nameRemoveColorMode, - nameIncludePlus, - nameIncludeMinus, - ], - buildPath: "dist/", + actions: [ActionGenerateBreakpoints], + transformGroup: "tokens-studio", + transforms: [transforms.nameKebab, nameRemoveTier, nameRemoveColorMode, nameIncludePlus, nameIncludeMinus], + buildPath: "dist/scss/", prefix: "calcite", files: [ { @@ -37,17 +29,7 @@ export default { { destination: "global.scss", format: formats.scssVariables, - filter: (token: TransformedToken): boolean => { - return ( - token.isSource && - token.type !== "dark" && - token.type !== "light" && - token.type !== "breakpoint" && - token.type !== "min" && - token.type !== "max" && - token.type !== "typography" - ); - }, + filter: FilterGlobalTokens, }, ], options: { From c6084b73f0a9d5e26d0d84e04c5f15d5e98ada88 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 17 Dec 2024 14:49:12 -0800 Subject: [PATCH 16/91] chore(package): update dependencies --- package-lock.json | 872 ++++++++++++-------- package.json | 4 +- packages/calcite-design-tokens/package.json | 5 +- 3 files changed, 515 insertions(+), 366 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9e345ef5db4..ea21ceef9cd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,7 +36,7 @@ "@storybook/preview-api": "8.4.7", "@storybook/storybook-deployer": "2.8.16", "@storybook/web-components-vite": "8.4.7", - "@tokens-studio/sd-transforms": "0.12.2", + "@tokens-studio/sd-transforms": "1.2.9", "@types/dedent": "0.7.2", "@types/eslint": "9.6.1", "@types/estree": "1.0.6", @@ -96,7 +96,7 @@ "shell-quote": "1.8.2", "storybook": "8.4.7", "storybook-addon-rtl": "1.0.1", - "style-dictionary": "3.9.2", + "style-dictionary": "4.3.0", "stylelint": "16.11.0", "stylelint-config-recommended-scss": "14.1.0", "stylelint-use-logical-spec": "5.0.1", @@ -845,6 +845,197 @@ "dev": true, "license": "(Apache-2.0 AND BSD-3-Clause)" }, + "node_modules/@bundled-es-modules/deepmerge": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/deepmerge/-/deepmerge-4.3.1.tgz", + "integrity": "sha512-Rk453EklPUPC3NRWc3VUNI/SSUjdBaFoaQvFRmNBNtMHVtOFD5AntiWg5kEE1hqcPqedYFDzxE3ZcMYPcA195w==", + "dev": true, + "license": "ISC", + "dependencies": { + "deepmerge": "^4.3.1" + } + }, + "node_modules/@bundled-es-modules/glob": { + "version": "10.4.2", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/glob/-/glob-10.4.2.tgz", + "integrity": "sha512-740y5ofkzydsFao5EXJrGilcIL6EFEw/cmPf2uhTw9J6G1YOhiIFjNFCHdpgEiiH5VlU3G0SARSjlFlimRRSMA==", + "dev": true, + "hasInstallScript": true, + "license": "ISC", + "dependencies": { + "buffer": "^6.0.3", + "events": "^3.3.0", + "glob": "^10.4.2", + "patch-package": "^8.0.0", + "path": "^0.12.7", + "stream": "^0.0.3", + "string_decoder": "^1.3.0", + "url": "^0.11.3" + } + }, + "node_modules/@bundled-es-modules/glob/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/@bundled-es-modules/glob/node_modules/buffer": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.2.1" + } + }, + "node_modules/@bundled-es-modules/glob/node_modules/glob": { + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "dev": true, + "license": "ISC", + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^3.1.2", + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^1.11.1" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@bundled-es-modules/glob/node_modules/jackspeak": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", + "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "@isaacs/cliui": "^8.0.2" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + }, + "optionalDependencies": { + "@pkgjs/parseargs": "^0.11.0" + } + }, + "node_modules/@bundled-es-modules/glob/node_modules/lru-cache": { + "version": "10.4.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", + "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", + "dev": true, + "license": "ISC" + }, + "node_modules/@bundled-es-modules/glob/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@bundled-es-modules/glob/node_modules/path-scurry": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", + "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "lru-cache": "^10.2.0", + "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" + }, + "engines": { + "node": ">=16 || 14 >=14.18" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@bundled-es-modules/memfs": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/memfs/-/memfs-4.9.4.tgz", + "integrity": "sha512-1XyYPUaIHwEOdF19wYVLBtHJRr42Do+3ctht17cZOHwHf67vkmRNPlYDGY2kJps4RgE5+c7nEZmEzxxvb1NZWA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "assert": "^2.0.0", + "buffer": "^6.0.3", + "events": "^3.3.0", + "memfs": "^4.9.3", + "path": "^0.12.7", + "stream": "^0.0.3", + "util": "^0.12.5" + } + }, + "node_modules/@bundled-es-modules/memfs/node_modules/buffer": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.2.1" + } + }, + "node_modules/@bundled-es-modules/postcss-calc-ast-parser": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.6.tgz", + "integrity": "sha512-y65TM5zF+uaxo9OeekJ3rxwTINlQvrkbZLogYvQYVoLtxm4xEiHfZ7e/MyiWbStYyWZVZkVqsaVU6F4SUK5XUA==", + "dev": true, + "license": "ISC", + "dependencies": { + "postcss-calc-ast-parser": "^0.1.4" + } + }, "node_modules/@commander-js/extra-typings": { "version": "11.1.0", "resolved": "https://registry.npmjs.org/@commander-js/extra-typings/-/extra-typings-11.1.0.tgz", @@ -3548,6 +3739,63 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@jsonjoy.com/base64": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/base64/-/base64-1.1.2.tgz", + "integrity": "sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/json-pack": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.1.1.tgz", + "integrity": "sha512-osjeBqMJ2lb/j/M8NCPjs1ylqWIcTRTycIhVB5pt6LgzgeRSb0YRZ7j9RfA8wIUrsr/medIuhVyonXRZWLyfdw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/base64": "^1.1.1", + "@jsonjoy.com/util": "^1.1.2", + "hyperdyperid": "^1.2.0", + "thingies": "^1.20.0" + }, + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/util": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-1.5.0.tgz", + "integrity": "sha512-ojoNsrIuPI9g6o8UxhraZQSyF2ByJanAY4cTFbc8Mf2AXEF4aQRGY1dJxyJpuyav8r9FGflEt/Ff3u5Nt6YMPA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, "node_modules/@lerna/create": { "version": "8.1.9", "resolved": "https://registry.npmjs.org/@lerna/create/-/create-8.1.9.tgz", @@ -7297,29 +7545,30 @@ "license": "MIT" }, "node_modules/@tokens-studio/sd-transforms": { - "version": "0.12.2", - "resolved": "https://registry.npmjs.org/@tokens-studio/sd-transforms/-/sd-transforms-0.12.2.tgz", - "integrity": "sha512-ugiAOuem35yQ9BZ87bSkG4zz0xUzrdZLOenSn6/gRrGwDW8x1sWJ8AZ1OZXqIxZIOEGyjmUofSBkhulgKE70JA==", + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@tokens-studio/sd-transforms/-/sd-transforms-1.2.9.tgz", + "integrity": "sha512-doRL3tjhwmSck/9fH0X1mlBA6derw+8wpmi5hbG2vhAmvc8F89MxIN6JCKSIbVIJNvaprDVlQqSzXLG7Ug7F9A==", "dev": true, "license": "MIT", "dependencies": { - "@tokens-studio/types": "^0.2.4", - "color2k": "^2.0.1", + "@bundled-es-modules/deepmerge": "^4.3.1", + "@bundled-es-modules/postcss-calc-ast-parser": "^0.1.6", + "@tokens-studio/types": "^0.5.1", "colorjs.io": "^0.4.3", - "deepmerge": "^4.3.1", - "expr-eval": "^2.0.2", - "is-mergeable-object": "^1.1.1", - "postcss-calc-ast-parser": "^0.1.4", - "style-dictionary": "^3.8.0" + "expr-eval-fork": "^2.0.2", + "is-mergeable-object": "^1.1.1" }, "engines": { - "node": ">=17.0.0" + "node": ">=18.0.0" + }, + "peerDependencies": { + "style-dictionary": "^4.1.4" } }, "node_modules/@tokens-studio/types": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/@tokens-studio/types/-/types-0.2.5.tgz", - "integrity": "sha512-pJ0zWxGnEjca4dznFIHC9/oXuovu3DKHUhLDNJVzTRZEVXhWkIRIUbjDwIRihxBr39c776W+3thYvWMgChT0Rw==", + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/@tokens-studio/types/-/types-0.5.1.tgz", + "integrity": "sha512-LdCF9ZH5ej4Gb6n58x5fTkhstxjXDZc1SWteMWY6EiddLQJVONMIgYOrWrf1extlkSLjagX8WS0B63bAqeltnA==", "dev": true, "license": "MIT" }, @@ -8493,6 +8742,18 @@ "dev": true, "license": "BSD-3-Clause" }, + "node_modules/@zip.js/zip.js": { + "version": "2.7.54", + "resolved": "https://registry.npmjs.org/@zip.js/zip.js/-/zip.js-2.7.54.tgz", + "integrity": "sha512-qMrJVg2hoEsZJjMJez9yI2+nZlBUxgYzGV3mqcb2B/6T1ihXp0fWBDYlVHlHquuorgNUQP5a8qSmX6HF5rFJNg==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "bun": ">=0.7.0", + "deno": ">=1.0.0", + "node": ">=16.5.0" + } + }, "node_modules/@zkochan/js-yaml": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/@zkochan/js-yaml/-/js-yaml-0.0.7.tgz", @@ -8993,6 +9254,20 @@ "node": ">=8" } }, + "node_modules/assert": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/assert/-/assert-2.1.0.tgz", + "integrity": "sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==", + "dev": true, + "license": "MIT", + "dependencies": { + "call-bind": "^1.0.2", + "is-nan": "^1.3.2", + "object-is": "^1.1.5", + "object.assign": "^4.1.4", + "util": "^0.12.5" + } + }, "node_modules/assertion-error": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz", @@ -10326,17 +10601,6 @@ "node": ">=6" } }, - "node_modules/camel-case": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", - "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", - "dev": true, - "license": "MIT", - "dependencies": { - "pascal-case": "^3.1.2", - "tslib": "^2.0.3" - } - }, "node_modules/camelcase": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", @@ -10396,18 +10660,6 @@ ], "license": "CC-BY-4.0" }, - "node_modules/capital-case": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", - "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", - "dev": true, - "license": "MIT", - "dependencies": { - "no-case": "^3.0.4", - "tslib": "^2.0.3", - "upper-case-first": "^2.0.2" - } - }, "node_modules/ccount": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz", @@ -11167,13 +11419,6 @@ "color-support": "bin.js" } }, - "node_modules/color2k": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/color2k/-/color2k-2.0.3.tgz", - "integrity": "sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==", - "dev": true, - "license": "MIT" - }, "node_modules/colord": { "version": "2.9.3", "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", @@ -11317,6 +11562,19 @@ "dev": true, "license": "MIT" }, + "node_modules/component-emitter": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-2.0.0.tgz", + "integrity": "sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/composed-offset-position": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/composed-offset-position/-/composed-offset-position-0.0.6.tgz", @@ -11575,18 +11833,6 @@ "dev": true, "license": "ISC" }, - "node_modules/constant-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", - "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "no-case": "^3.0.4", - "tslib": "^2.0.3", - "upper-case": "^2.0.2" - } - }, "node_modules/conventional-changelog-angular": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-7.0.0.tgz", @@ -13447,17 +13693,6 @@ "url": "https://github.com/fb55/domutils?sponsor=1" } }, - "node_modules/dot-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", - "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", - "dev": true, - "license": "MIT", - "dependencies": { - "no-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, "node_modules/dot-prop": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", @@ -14754,6 +14989,16 @@ "dev": true, "license": "MIT" }, + "node_modules/events": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz", + "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.8.x" + } + }, "node_modules/execa": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz", @@ -14834,10 +15079,10 @@ "dev": true, "license": "Apache-2.0" }, - "node_modules/expr-eval": { + "node_modules/expr-eval-fork": { "version": "2.0.2", - "resolved": "https://registry.npmjs.org/expr-eval/-/expr-eval-2.0.2.tgz", - "integrity": "sha512-4EMSHGOPSwAfBiibw3ndnP0AvjDWLsMvGOvWEZ2F96IGk0bIVdjQisOHxReSkE13mHcfbuCiXw+G4y0zv6N8Eg==", + "resolved": "https://registry.npmjs.org/expr-eval-fork/-/expr-eval-fork-2.0.2.tgz", + "integrity": "sha512-NaAnObPVwHEYrODd7Jzp3zzT9pgTAlUUL4MZiZu9XAYPDpx89cPsfyEImFb2XY0vQNbrqg2CG7CLiI+Rs3seaQ==", "dev": true, "license": "MIT" }, @@ -16584,17 +16829,6 @@ "he": "bin/he" } }, - "node_modules/header-case": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", - "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", - "dev": true, - "license": "MIT", - "dependencies": { - "capital-case": "^1.0.4", - "tslib": "^2.0.3" - } - }, "node_modules/highlight.js": { "version": "10.7.3", "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", @@ -16784,6 +17018,16 @@ "url": "https://github.com/sponsors/typicode" } }, + "node_modules/hyperdyperid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/hyperdyperid/-/hyperdyperid-1.2.0.tgz", + "integrity": "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10.18" + } + }, "node_modules/iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -17699,6 +17943,23 @@ "dev": true, "license": "MIT" }, + "node_modules/is-nan": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz", + "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==", + "dev": true, + "license": "MIT", + "dependencies": { + "call-bind": "^1.0.0", + "define-properties": "^1.1.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-negative-zero": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz", @@ -21578,16 +21839,6 @@ "dev": true, "license": "MIT" }, - "node_modules/lower-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", - "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", - "dev": true, - "license": "MIT", - "dependencies": { - "tslib": "^2.0.3" - } - }, "node_modules/lowlight": { "version": "1.20.0", "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz", @@ -22101,6 +22352,26 @@ "dev": true, "license": "MIT" }, + "node_modules/memfs": { + "version": "4.15.0", + "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.15.0.tgz", + "integrity": "sha512-q9MmZXd2rRWHS6GU3WEm3HyiXZyyoA1DqdOhEq0lxPBmKb5S7IAOwX0RgUCwJfqjelDCySa5h8ujOy24LqsWcw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/json-pack": "^1.0.3", + "@jsonjoy.com/util": "^1.3.0", + "tree-dump": "^1.0.1", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">= 4.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + } + }, "node_modules/meow": { "version": "12.1.1", "resolved": "https://registry.npmjs.org/meow/-/meow-12.1.1.tgz", @@ -23205,17 +23476,6 @@ "node": ">= 0.4.0" } }, - "node_modules/no-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", - "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", - "dev": true, - "license": "MIT", - "dependencies": { - "lower-case": "^2.0.2", - "tslib": "^2.0.3" - } - }, "node_modules/node-domexception": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz", @@ -23978,6 +24238,23 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/object-is": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz", + "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "call-bind": "^1.0.7", + "define-properties": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/object-keys": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", @@ -24574,17 +24851,6 @@ "dev": true, "license": "(MIT AND Zlib)" }, - "node_modules/param-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", - "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", - "dev": true, - "license": "MIT", - "dependencies": { - "dot-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, "node_modules/parent-module": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-2.0.0.tgz", @@ -24791,17 +25057,6 @@ "node": ">= 0.8" } }, - "node_modules/pascal-case": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", - "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", - "dev": true, - "license": "MIT", - "dependencies": { - "no-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, "node_modules/patch-package": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-8.0.0.tgz", @@ -24976,6 +25231,17 @@ "node": ">=0.6.0" } }, + "node_modules/path": { + "version": "0.12.7", + "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz", + "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "process": "^0.11.1", + "util": "^0.10.3" + } + }, "node_modules/path-browserify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", @@ -24983,17 +25249,6 @@ "dev": true, "license": "MIT" }, - "node_modules/path-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", - "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", - "dev": true, - "license": "MIT", - "dependencies": { - "dot-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -25068,6 +25323,30 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/path-unified": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/path-unified/-/path-unified-0.2.0.tgz", + "integrity": "sha512-MNKqvrKbbbb5p7XHXV6ZAsf/1f/yJQa13S/fcX0uua8ew58Tgc6jXV+16JyAbnR/clgCH+euKDxrF2STxMHdrg==", + "dev": true, + "license": "MIT" + }, + "node_modules/path/node_modules/inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==", + "dev": true, + "license": "ISC" + }, + "node_modules/path/node_modules/util": { + "version": "0.10.4", + "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", + "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==", + "dev": true, + "license": "MIT", + "dependencies": { + "inherits": "2.0.3" + } + }, "node_modules/pathe": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz", @@ -25850,6 +26129,22 @@ "teleport": ">=0.2.0" } }, + "node_modules/qs": { + "version": "6.13.1", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.1.tgz", + "integrity": "sha512-EJPeIn0CYrGu+hli1xilKAPXODtJ12T0sP63Ijx2/khC2JtuaN3JyNIpvmnkmaEtha9ocbG4A4cMcr+TvqvwQg==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "side-channel": "^1.0.6" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -27469,18 +27764,6 @@ "node": ">= 0.6" } }, - "node_modules/sentence-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", - "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", - "dev": true, - "license": "MIT", - "dependencies": { - "no-case": "^3.0.4", - "tslib": "^2.0.3", - "upper-case-first": "^2.0.2" - } - }, "node_modules/serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz", @@ -27876,17 +28159,6 @@ "url": "https://github.com/sponsors/cyyynthia" } }, - "node_modules/snake-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", - "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", - "dev": true, - "license": "MIT", - "dependencies": { - "dot-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, "node_modules/socket.io": { "version": "4.8.1", "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz", @@ -28251,6 +28523,16 @@ "@storybook/test": "^8.0.6" } }, + "node_modules/stream": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/stream/-/stream-0.0.3.tgz", + "integrity": "sha512-aMsbn7VKrl4A2T7QAQQbzgN7NVc70vgF5INQrBXqn4dCXN1zy3L9HGgLO5s7PExmdrzTJ8uR/27aviW8or8/+A==", + "dev": true, + "license": "MIT", + "dependencies": { + "component-emitter": "^2.0.0" + } + }, "node_modules/stream-throttle": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/stream-throttle/-/stream-throttle-0.1.3.tgz", @@ -28633,91 +28915,32 @@ } }, "node_modules/style-dictionary": { - "version": "3.9.2", - "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.9.2.tgz", - "integrity": "sha512-M2pcQ6hyRtqHOh+NyT6T05R3pD/gwNpuhREBKvxC1En0vyywx+9Wy9nXWT1SZ9ePzv1vAo65ItnpA16tT9ZUCg==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-4.3.0.tgz", + "integrity": "sha512-bwasoBSGzIUzeZKR9HKD+qaTFzcVc3SAx+ziD41DAbDZ8OGFnfXfU3Nb3xdZb8VhxNKT21MowR5jOFvdJE9ayQ==", "dev": true, + "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { - "chalk": "^4.0.0", - "change-case": "^4.1.2", + "@bundled-es-modules/deepmerge": "^4.3.1", + "@bundled-es-modules/glob": "^10.4.2", + "@bundled-es-modules/memfs": "^4.9.4", + "@zip.js/zip.js": "^2.7.44", + "chalk": "^5.3.0", + "change-case": "^5.3.0", "commander": "^8.3.0", - "fs-extra": "^10.0.0", - "glob": "^10.3.10", + "is-plain-obj": "^4.1.0", "json5": "^2.2.2", - "jsonc-parser": "^3.0.0", - "lodash": "^4.17.15", - "tinycolor2": "^1.4.1" + "patch-package": "^8.0.0", + "path-unified": "^0.2.0", + "prettier": "^3.3.3", + "tinycolor2": "^1.6.0" }, "bin": { - "style-dictionary": "bin/style-dictionary" - }, - "engines": { - "node": ">=12.0.0" - } - }, - "node_modules/style-dictionary/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "license": "MIT", - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/style-dictionary/node_modules/brace-expansion": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", - "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", - "dev": true, - "license": "MIT", - "dependencies": { - "balanced-match": "^1.0.0" - } - }, - "node_modules/style-dictionary/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" + "style-dictionary": "bin/style-dictionary.js" }, "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/style-dictionary/node_modules/change-case": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", - "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", - "dev": true, - "license": "MIT", - "dependencies": { - "camel-case": "^4.1.2", - "capital-case": "^1.0.4", - "constant-case": "^3.0.4", - "dot-case": "^3.0.4", - "header-case": "^2.0.4", - "no-case": "^3.0.4", - "param-case": "^3.0.4", - "pascal-case": "^3.1.2", - "path-case": "^3.0.4", - "sentence-case": "^3.0.4", - "snake-case": "^3.0.4", - "tslib": "^2.0.3" + "node": ">=18.0.0" } }, "node_modules/style-dictionary/node_modules/commander": { @@ -28730,111 +28953,6 @@ "node": ">= 12" } }, - "node_modules/style-dictionary/node_modules/fs-extra": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", - "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "graceful-fs": "^4.2.0", - "jsonfile": "^6.0.1", - "universalify": "^2.0.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/style-dictionary/node_modules/glob": { - "version": "10.4.5", - "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", - "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", - "dev": true, - "license": "ISC", - "dependencies": { - "foreground-child": "^3.1.0", - "jackspeak": "^3.1.2", - "minimatch": "^9.0.4", - "minipass": "^7.1.2", - "package-json-from-dist": "^1.0.0", - "path-scurry": "^1.11.1" - }, - "bin": { - "glob": "dist/esm/bin.mjs" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/style-dictionary/node_modules/jackspeak": { - "version": "3.4.3", - "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", - "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", - "dev": true, - "license": "BlueOak-1.0.0", - "dependencies": { - "@isaacs/cliui": "^8.0.2" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - }, - "optionalDependencies": { - "@pkgjs/parseargs": "^0.11.0" - } - }, - "node_modules/style-dictionary/node_modules/lru-cache": { - "version": "10.4.3", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", - "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", - "dev": true, - "license": "ISC" - }, - "node_modules/style-dictionary/node_modules/minimatch": { - "version": "9.0.5", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", - "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", - "dev": true, - "license": "ISC", - "dependencies": { - "brace-expansion": "^2.0.1" - }, - "engines": { - "node": ">=16 || 14 >=14.17" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/style-dictionary/node_modules/path-scurry": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", - "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", - "dev": true, - "license": "BlueOak-1.0.0", - "dependencies": { - "lru-cache": "^10.2.0", - "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" - }, - "engines": { - "node": ">=16 || 14 >=14.18" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/style-dictionary/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "license": "MIT", - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/stylelint": { "version": "16.11.0", "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.11.0.tgz", @@ -30465,6 +30583,19 @@ "node": ">=0.8" } }, + "node_modules/thingies": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.21.0.tgz", + "integrity": "sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==", + "dev": true, + "license": "Unlicense", + "engines": { + "node": ">=10.18" + }, + "peerDependencies": { + "tslib": "^2" + } + }, "node_modules/through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", @@ -30660,6 +30791,23 @@ "dev": true, "license": "MIT" }, + "node_modules/tree-dump": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.0.2.tgz", + "integrity": "sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, "node_modules/tree-kill": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz", @@ -31949,26 +32097,6 @@ "browserslist": ">= 4.21.0" } }, - "node_modules/upper-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", - "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", - "dev": true, - "license": "MIT", - "dependencies": { - "tslib": "^2.0.3" - } - }, - "node_modules/upper-case-first": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", - "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", - "dev": true, - "license": "MIT", - "dependencies": { - "tslib": "^2.0.3" - } - }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -31978,6 +32106,27 @@ "punycode": "^2.1.0" } }, + "node_modules/url": { + "version": "0.11.4", + "resolved": "https://registry.npmjs.org/url/-/url-0.11.4.tgz", + "integrity": "sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==", + "dev": true, + "license": "MIT", + "dependencies": { + "punycode": "^1.4.1", + "qs": "^6.12.3" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/url/node_modules/punycode": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", + "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==", + "dev": true, + "license": "MIT" + }, "node_modules/urlpattern-polyfill": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.0.0.tgz", @@ -33862,6 +34011,7 @@ "version": "3.0.0-next.2", "license": "SEE LICENSE.md", "devDependencies": { + "style-dictionary": "4.3.0", "ts-jest-resolver": "2.0.1", "ts-node": "10.9.2" } diff --git a/package.json b/package.json index cbf25f94156..9b5afd83d51 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "@storybook/preview-api": "8.4.7", "@storybook/storybook-deployer": "2.8.16", "@storybook/web-components-vite": "8.4.7", - "@tokens-studio/sd-transforms": "0.12.2", + "@tokens-studio/sd-transforms": "1.2.9", "@types/dedent": "0.7.2", "@types/eslint": "9.6.1", "@types/estree": "1.0.6", @@ -113,7 +113,7 @@ "shell-quote": "1.8.2", "storybook": "8.4.7", "storybook-addon-rtl": "1.0.1", - "style-dictionary": "3.9.2", + "style-dictionary": "4.3.0", "stylelint": "16.11.0", "stylelint-config-recommended-scss": "14.1.0", "stylelint-use-logical-spec": "5.0.1", diff --git a/packages/calcite-design-tokens/package.json b/packages/calcite-design-tokens/package.json index 5a97ad700d1..9ba6ee36e8f 100644 --- a/packages/calcite-design-tokens/package.json +++ b/packages/calcite-design-tokens/package.json @@ -27,7 +27,7 @@ }, "license": "SEE LICENSE.md", "scripts": { - "build": "tsx support/run.ts", + "build": "tsx support/buildTokens.ts", "clean": "rimraf dist", "lint:json": "prettier --write \"**/*.json\" >/dev/null", "lint:md": "prettier --write \"**/*.md\" >/dev/null && markdownlint \"**/*.md\" --fix --dot --ignore-path ../../.gitignore", @@ -37,8 +37,7 @@ "util:update-test-snapshots": "NODE_OPTIONS=\"--experimental-vm-modules\" jest --updateSnapshot" }, "devDependencies": { - "ts-jest-resolver": "2.0.1", - "ts-node": "10.9.2" + "ts-jest-resolver": "2.0.1" }, "volta": { "extends": "../../package.json" From e8dce39170b93604cd9b985a78b792936b34f904 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 17 Dec 2024 14:51:59 -0800 Subject: [PATCH 17/91] fix: remove old style dictionary 3 transformer files --- .../helpers/createCalciteTokenFiles.spec.ts | 80 ---------- .../helpers/createCalciteTokenFiles.ts | 18 --- .../helpers/getFiles.spec.ts | 21 --- .../token-transformer/helpers/getFiles.ts | 20 --- .../registerCalciteTransformers.ts | 52 ------- .../support/token-transformer/sd-run.ts | 101 ------------- .../styleDictionary/filter/filterDark.ts | 14 -- .../styleDictionary/filter/filterLight.ts | 14 -- .../styleDictionary/filter/filterSource.ts | 14 -- .../filter/finterSource.spec.ts | 27 ---- .../styleDictionary/formatter/css.ts | 29 ---- .../styleDictionary/formatter/docs.ts | 29 ---- .../styleDictionary/formatter/javascript.ts | 25 ---- .../styleDictionary/formatter/scss.ts | 31 ---- .../formatter/typography/scss.ts | 13 -- .../formatter/typography/utils.ts | 49 ------ .../styleDictionary/formatter/utils.ts | 57 ------- .../formatter/utils/createTokenReference.ts | 19 --- .../formatter/utils/formatExtraOutput.ts | 140 ------------------ .../formatter/utils/formatTokens.ts | 78 ---------- .../formatter/utils/getReferenceFromValue.ts | 47 ------ .../formatter/utils/handleBreakpoint.ts | 62 -------- .../formatter/utils/handleColor.ts | 38 ----- .../formatter/utils/handleStringValue.ts | 38 ----- .../formatter/utils/handleTypography.ts | 40 ----- .../formatter/utils/sortByReference.ts | 52 ------- .../styleDictionary/parser/calcite/index.ts | 28 ---- .../parser/utils/add-font-styles.ts | 34 ----- .../parser/utils/excludeParentKeys.ts | 21 --- .../parser/utils/expandComposites.ts | 109 -------------- .../parser/utils/resolveRelevance.ts | 50 ------- .../parser/utils/transformFontWeights.ts | 31 ---- .../attributes/attributePlatformName.ts | 36 ----- .../transformer/name/nameCamelCase.spec.ts | 21 --- .../transformer/name/nameCamelCase.ts | 25 ---- .../transformer/name/nameJoinPath.spec.ts | 21 --- .../transformer/name/nameJoinPath.ts | 21 --- .../transformer/name/nameKebabCase.spec.ts | 21 --- .../transformer/name/nameKebabCase.ts | 24 --- .../transformer/name/nameSet.spec.ts | 82 ---------- .../transformer/name/nameSet.ts | 35 ----- .../transformer/name/nameSpacePath.spec.ts | 21 --- .../transformer/name/nameSpacePath.ts | 28 ---- .../styleDictionary/transformer/utils.ts | 78 ---------- .../transformer/utils/hexToRGBA.ts | 10 -- .../transformer/utils/parseTokenPath.ts | 45 ------ .../utils/setTokenNameByPlatform.ts | 20 --- .../value/valueAlignFontWeightAndStyle.ts | 51 ------- .../transformer/value/valueAssetToken.ts | 27 ---- .../value/valueCheckEvaluateMath.ts | 38 ----- .../transformer/value/valueColorCss.ts | 61 -------- .../value/valueFontFamilyFallbacks.ts | 32 ---- .../transformer/value/valueStringWrapper.ts | 24 --- .../transformer/value/valueToREM.ts | 42 ------ .../transformer/value/valueToUnitless.ts | 41 ----- 55 files changed, 2185 deletions(-) delete mode 100644 packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.spec.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/helpers/getFiles.spec.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/helpers/getFiles.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/sd-run.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterDark.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterLight.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterSource.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/finterSource.spec.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/typography/scss.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/typography/utils.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/createTokenReference.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatTokens.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/getReferenceFromValue.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleBreakpoint.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleColor.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleStringValue.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleTypography.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/sortByReference.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/calcite/index.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/add-font-styles.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/excludeParentKeys.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/expandComposites.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/resolveRelevance.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/transformFontWeights.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/attributes/attributePlatformName.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameCamelCase.spec.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameCamelCase.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameJoinPath.spec.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameJoinPath.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameKebabCase.spec.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameKebabCase.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.spec.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.spec.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils/hexToRGBA.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils/parseTokenPath.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils/setTokenNameByPlatform.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueAlignFontWeightAndStyle.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueAssetToken.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueCheckEvaluateMath.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueColorCss.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueStringWrapper.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToUnitless.ts diff --git a/packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.spec.ts b/packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.spec.ts deleted file mode 100644 index c834233315d..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.spec.ts +++ /dev/null @@ -1,80 +0,0 @@ -import { resolve } from "path"; -import { createCalciteTokenFiles } from "./createCalciteTokenFiles.js"; -import { ConfigOptions } from "../../types/config.js"; -import { __dirname } from "../../utils/node.js"; - -describe("Helper to create a Calcite Token Transformer configuration file", () => { - it("should return a token file", async () => { - const args = { - name: "testName", - path: resolve(__dirname, "..", "..", "test", "mock", "src", "global.json"), - }; - const expected = { - name: "testName", - source: [resolve(__dirname, "..", "..", "test", "mock", "src", "global.json")], - }; - const tokenFile = await createCalciteTokenFiles(args); - expect(tokenFile).toMatchObject({ - name: expected.name, - source: expected.source, - }); - }); - - it("should add additional sources to the returned token file", async () => { - const args = { - name: "testName", - path: resolve(__dirname, "..", "..", "test", "mock", "src", "global.json"), - source: ["my-extra-source"], - }; - const expected = { - name: "testName", - source: [resolve(__dirname, "..", "..", "test", "mock", "src", "global.json"), "my-extra-source"], - }; - const tokenFile = await createCalciteTokenFiles(args); - expect(tokenFile).toMatchObject({ - name: expected.name, - source: expected.source, - }); - }); - - it("should add references to the returned token file", async () => { - const args = { - name: "testName", - path: resolve(__dirname, "..", "..", "test", "mock", "src", "global.json"), - references: ["my-extra-source"], - }; - const expected = { - name: "testName", - source: [resolve(__dirname, "..", "..", "test", "mock", "src", "global.json")], - references: ["my-extra-source"], - }; - const tokenFile = await createCalciteTokenFiles(args); - expect(tokenFile).toMatchObject({ - name: expected.name, - source: expected.source, - references: expected.references, - }); - }); - - it("should add options to the returned token file", async () => { - const options: ConfigOptions = { - prefix: "testPrefix", - }; - const args = { - name: "testName", - path: resolve(__dirname, "..", "..", "test", "mock", "src", "global.json"), - options, - }; - const expected = { - name: "testName", - source: [resolve(__dirname, "..", "..", "test", "mock", "src", "global.json")], - options, - }; - const tokenFile = await createCalciteTokenFiles(args); - expect(tokenFile).toMatchObject({ - name: expected.name, - source: expected.source, - options: expected.options, - }); - }); -}); diff --git a/packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.ts b/packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.ts deleted file mode 100644 index dcbc614f0fa..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { CalciteTokenFile, CalciteTokenFileArguments } from "../../types/config.js"; -import { getFiles } from "./getFiles.js"; - -export async function createCalciteTokenFiles(args: CalciteTokenFileArguments): Promise { - const sourceFiles = await Promise.all( - Array.isArray(args.path) ? args.path.map(getFiles) : [getFiles(args.path)], - ).then((files) => files.reduce((acc, file) => ({ ...acc, ...file }), {})); - const sourcePaths = Object.values(sourceFiles); - - const tokenFile = { - name: args.name, - source: args.source ? [...sourcePaths, ...args.source] : sourcePaths, - references: args.references, - options: args.options, - }; - - return tokenFile; -} diff --git a/packages/calcite-design-tokens/support/token-transformer/helpers/getFiles.spec.ts b/packages/calcite-design-tokens/support/token-transformer/helpers/getFiles.spec.ts deleted file mode 100644 index e82bcd5ba7a..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/helpers/getFiles.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { resolve } from "path"; -import { getFiles } from "./getFiles.js"; -import { __dirname } from "../../utils/node.js"; - -describe("Helper to get files", () => { - it("should accept a file path", async () => { - const globalPath = resolve(__dirname, "..", "..", "test", "mock", "src", "global.json"); - const files = await getFiles(globalPath); - expect(files).toMatchObject({ - global: globalPath, - }); - }); - - it("should accept a directory path", async () => { - const globalPath = resolve(__dirname, "..", "..", "test", "mock", "src"); - const files = await getFiles(globalPath); - expect(files).toMatchObject({ - global: resolve(__dirname, "..", "..", "test", "mock", "src", "global.json"), - }); - }); -}); diff --git a/packages/calcite-design-tokens/support/token-transformer/helpers/getFiles.ts b/packages/calcite-design-tokens/support/token-transformer/helpers/getFiles.ts deleted file mode 100644 index d3ff48bbf51..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/helpers/getFiles.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { readdir, stat } from "fs/promises"; -import { resolve } from "path"; - -export async function getFiles(path: string): Promise> { - const tokenFiles: Record = {}; - const pathStats = await stat(path); - - if (pathStats.isDirectory()) { - const directory = await readdir(path); - directory.forEach((fileName) => { - const name = fileName.slice(0, fileName.lastIndexOf(".")); - tokenFiles[name] = resolve(path, fileName); - }); - } else if (pathStats.isFile()) { - const name = path.slice(path.lastIndexOf("/") + 1, path.lastIndexOf(".")); - tokenFiles[name] = path; - } - - return tokenFiles; -} diff --git a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts deleted file mode 100644 index e6e7abfcbbe..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { Core as StyleDictionary } from "style-dictionary"; -import { registerTransforms } from "@tokens-studio/sd-transforms"; - -import { registerAttributePlatformNames } from "./styleDictionary/transformer/attributes/attributePlatformName.js"; -import { registerCustomJSONParser } from "./styleDictionary/parser/calcite/index.js"; -import { registerFilterSource } from "./styleDictionary/filter/filterSource.js"; -import { registerFormatterCss } from "./styleDictionary/formatter/css.js"; -import { registerFormatterScss } from "./styleDictionary/formatter/scss.js"; -import { registerFormatterJs } from "./styleDictionary/formatter/javascript.js"; -import { registerNameCamelCase } from "./styleDictionary/transformer/name/nameCamelCase.js"; -import { registerNameJoinPath } from "./styleDictionary/transformer/name/nameJoinPath.js"; -import { registerNameKebabCase } from "./styleDictionary/transformer/name/nameKebabCase.js"; -import { registerValueAlignFontWeightAndStyles } from "./styleDictionary/transformer/value/valueAlignFontWeightAndStyle.js"; -import { registerValueAssetToken } from "./styleDictionary/transformer/value/valueAssetToken.js"; -import { registerValueStringWrapper } from "./styleDictionary/transformer/value/valueStringWrapper.js"; -import { registerValueEvaluateMath } from "./styleDictionary/transformer/value/valueCheckEvaluateMath.js"; -import { registerNameSpacePath } from "./styleDictionary/transformer/name/nameSpacePath.js"; -import { registerFormatterDocs } from "./styleDictionary/formatter/docs.js"; -import { registerValueToREM } from "./styleDictionary/transformer/value/valueToREM.js"; -import { registerValueFontFamilyWithFallbacks } from "./styleDictionary/transformer/value/valueFontFamilyFallbacks.js"; -import { registerValueColorCSS } from "./styleDictionary/transformer/value/valueColorCss.js"; -import { registerValueToUnitless } from "./styleDictionary/transformer/value/valueToUnitless.js"; - -export async function registerCalciteTransformers(sd: typeof StyleDictionary): Promise { - // Here we are registering the Transforms provided by Token Studio however, - // we need to pass "expand: false" so that we can use our own custom JSON file parser. - // any references to "ts/..." below are references to these Token Studio transformers - // https://github.com/tokens-studio/sd-transforms - await registerTransforms(sd, { - expand: false, - }); - registerValueEvaluateMath(sd); - registerAttributePlatformNames(sd); - registerCustomJSONParser(sd); - registerFilterSource(sd); - registerFormatterCss(sd); - registerFormatterDocs(sd); - registerFormatterJs(sd); - registerFormatterScss(sd); - registerNameCamelCase(sd); - registerNameJoinPath(sd); - registerNameKebabCase(sd); - registerNameSpacePath(sd); - registerValueAlignFontWeightAndStyles(sd); - registerValueAssetToken(sd); - registerValueEvaluateMath(sd); - registerValueFontFamilyWithFallbacks(sd); - registerValueStringWrapper(sd); - registerValueToREM(sd); - registerValueToUnitless(sd); - registerValueColorCSS(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 deleted file mode 100644 index ee736e728ff..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/sd-run.ts +++ /dev/null @@ -1,101 +0,0 @@ -import { default as StyleDictionary } from "style-dictionary"; - -import { registerCalciteTransformers } from "./registerCalciteTransformers.js"; -import { filterSource } from "./styleDictionary/filter/filterSource.js"; -import { filterLight } from "./styleDictionary/filter/filterLight.js"; -import { filterDark } from "./styleDictionary/filter/filterDark.js"; -import { fileExtension } from "../types/fileExtensions.js"; -import { Platform, PlatformFormats, PlatformUnion, TypescriptPlatform } from "../types/platform.js"; - -import { CalciteConfigStyleDictionaryRunner } from "../types/config.js"; -import { Options } from "../types/styleDictionary/options.js"; -import { PlatformOptions } from "../types/styleDictionary/platform.js"; -import { File } from "../types/styleDictionary/file.js"; -import { transformations } from "./styleDictionary/transformer/utils.js"; -import { format } from "./styleDictionary/formatter/utils.js"; -import { normalize, sep } from "path"; - -const destination = (name: string, format: PlatformFormats) => `${name}${fileExtension[format]}`; - -const files = (platform: PlatformUnion, name: string, options?: Options): File[] => { - const f = []; - - f.push({ - format: format(platform), - destination: destination(name, platform), - filter: filterSource, - options: { ...options, platform }, - }); - - switch (platform) { - case Platform.JS: - case Platform.ES6: - case Platform.ES6LIGHT: - case Platform.ES6DARK: - f.push({ - format: format(platform === Platform.JS ? TypescriptPlatform.TS : TypescriptPlatform.ES6TS), - destination: destination(name, TypescriptPlatform.TS), - filter: [filterSource].concat( - platform === Platform.ES6LIGHT ? [filterLight] : platform === Platform.ES6DARK ? [filterDark] : [], - ), - options: { ...options, platform }, - }); - break; - - default: - break; - } - - return f; -}; - -/** - * Style Dictionary runner configuration overrides. - * - * @param {CalciteConfigStyleDictionaryRunner} config the style dictionary configuration - */ -export const run = async ({ - name, - source, - include, - options, - output, -}: CalciteConfigStyleDictionaryRunner): Promise => { - // To optimize performance of Calcite, we must generate additional files for certain platforms and for certain token tiers and contexts. - // We generate the tiered token files via the normal StyleDictionary output. Any additional compiled files are handled by the expandFiles. - const expandFiles = output.expandFiles || undefined; - - const platforms = output.platforms.reduce( - (acc, platform) => { - debugger; - const platformConfig: PlatformOptions = { - options: { ...options, expandFiles, platforms: output.platforms }, - transforms: transformations[platform], - buildPath: normalize(`${output.dir}/${platform}/`) + (sep === "\\" ? "/" : ""), // trailing `/` is a workaround for https://github.com/amzn/style-dictionary/issues/1144 - files: files(platform, name), - }; - acc[platform] = platformConfig; - return acc; - }, - {} as Partial>, - ); - - const config = { - source, - include, - platforms, - }; - - await registerCalciteTransformers(StyleDictionary); - - // We are programmatically creating the Style Dictionary configuration here - // https://amzn.github.io/style-dictionary/#/config - const sd = StyleDictionary.extend(config); - - try { - sd.cleanAllPlatforms(); - sd.buildAllPlatforms(); - } catch (error) { - console.error(error); - } -}; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterDark.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterDark.ts deleted file mode 100644 index 1e3f26d477e..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterDark.ts +++ /dev/null @@ -1,14 +0,0 @@ -import StyleDictionary, { TransformedToken } from "style-dictionary"; - -export function filterDarkMatcher(token: TransformedToken): boolean { - return token.path.includes("dark"); -} - -export function registerFilterDark(sd: typeof StyleDictionary): void { - sd.registerFilter({ - name: filterDark, - filter: filterDarkMatcher, - }); -} - -export const filterDark = "filter/dark"; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterLight.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterLight.ts deleted file mode 100644 index 0a50743eca8..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterLight.ts +++ /dev/null @@ -1,14 +0,0 @@ -import StyleDictionary, { TransformedToken } from "style-dictionary"; - -export function filterLightMatcher(token: TransformedToken): boolean { - return token.path.includes("light"); -} - -export function registerFilterLight(sd: typeof StyleDictionary): void { - sd.registerFilter({ - name: filterLight, - filter: filterLightMatcher, - }); -} - -export const filterLight = "filter/light"; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterSource.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterSource.ts deleted file mode 100644 index 2290683c195..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/filterSource.ts +++ /dev/null @@ -1,14 +0,0 @@ -import StyleDictionary, { TransformedToken } from "style-dictionary"; - -export function filterSourceMatcher(token: TransformedToken): boolean { - return token.isSource; -} - -export function registerFilterSource(sd: typeof StyleDictionary): void { - sd.registerFilter({ - name: filterSource, - filter: filterSourceMatcher, - }); -} - -export const filterSource = "filter/source"; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/finterSource.spec.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/finterSource.spec.ts deleted file mode 100644 index 74a0d5c976d..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/filter/finterSource.spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { registerStyleDictionaryFilter } from "../../../test/utils/registerStyleDictionaryFunction"; -import { TransformedToken } from "../../../types/styleDictionary/transformedToken"; -import { filterSourceMatcher, registerFilterSource } from "./filterSource"; - -describe("filter source", () => { - describe("register", () => { - it("should call StyleDictionary registerTransform", () => registerStyleDictionaryFilter(registerFilterSource)); - }); - - describe("filter", () => { - it("should return true", () => { - const token = { - isSource: true, - } as TransformedToken; - const match = filterSourceMatcher(token); - expect(match).toBe(true); - }); - - it("should return false", () => { - const token = { - isSource: false, - } as TransformedToken; - const match = filterSourceMatcher(token); - expect(match).toBe(false); - }); - }); -}); diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts deleted file mode 100644 index 821d0bb682a..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts +++ /dev/null @@ -1,29 +0,0 @@ -import sd, { Core as StyleDictionary } from "style-dictionary"; -import prettierSync from "@prettier/sync"; - -import { formatTokens } from "./utils/formatTokens.js"; -import { formatExtraOutput } from "./utils/formatExtraOutput.js"; -import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments.js"; -import { EOL } from "os"; - -export const formatCssPlatform: CalledFormatterFunction = (args) => { - const { file, dictionary } = args; - const { default: tokens, ...extraOutput } = formatTokens(dictionary, args); - const header = sd.formatHelpers.fileHeader({ file }); - - if (Object.keys(extraOutput).length > 0) { - formatExtraOutput(extraOutput, { ...args.options, header, buildPath: args.platform.buildPath }); - } - return prettierSync.format(header + (tokens ? `:root {${tokens.join(EOL)}}` : ""), { parser: "css" }); -}; - -export const registerFormatterCss = (sd: typeof StyleDictionary): void => { - const formatterConfig: FormatterConfig = { - name: CalciteCss, - formatter: formatCssPlatform, - }; - - sd.registerFormat(formatterConfig); -}; - -export const CalciteCss = "calcite/format/css"; 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 deleted file mode 100644 index acb81e4d758..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts +++ /dev/null @@ -1,29 +0,0 @@ -import StyleDictionary from "style-dictionary"; -import type { FormatFn } from "style-dictionary/types"; - -import prettierSync from "@prettier/sync"; -import { relative, resolve } from "path"; -import { __dirname } from "../../../utils/node.js"; - -export const formatDocsPlatform: FormatFn = (args) => { - const output = { - timestamp: Date.now(), - tokens: args.dictionary.allTokens.map((token) => { - token.value = typeof token.value !== "string" ? JSON.stringify(token.value) : token.value; - token.filePath = relative(resolve(__dirname, "..", "..", "..", "..", ""), token.filePath); - delete token.original; - return token; - }), - }; - - return prettierSync.format(JSON.stringify(output, null, 2), { parser: "json" }); -}; - -export const registerFormatterDocs = (sd: typeof StyleDictionary): void => { - sd.registerFormat({ - name: CalciteDocs, - format: formatDocsPlatform, - }); -}; - -export const CalciteDocs = "calcite/format/docs"; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts deleted file mode 100644 index 5fc2e17e52f..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts +++ /dev/null @@ -1,25 +0,0 @@ -import styleDictionary, { Core as StyleDictionary } from "style-dictionary"; -import prettierSync from "@prettier/sync"; - -import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments"; - -export const formatJsPlatform: CalledFormatterFunction = (args) => { - return prettierSync.format( - styleDictionary.formatHelpers.fileHeader({ file: args.file }) + - "export default " + - JSON.stringify(args.dictionary.properties, null, 2) + - ";", - { parser: "babel" }, - ); -}; - -export const registerFormatterJs = (sd: typeof StyleDictionary): void => { - const formatterConfig: FormatterConfig = { - name: CalciteJs, - formatter: formatJsPlatform, - }; - - sd.registerFormat(formatterConfig); -}; - -export const CalciteJs = "calcite/format/js"; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts deleted file mode 100644 index 1b05a172975..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts +++ /dev/null @@ -1,31 +0,0 @@ -import sd, { Core as StyleDictionary } from "style-dictionary"; - -import { formatTokens } from "./utils/formatTokens.js"; -import { formatExtraOutput } from "./utils/formatExtraOutput.js"; -import prettierSync from "@prettier/sync"; - -import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments.js"; -import { EOL } from "os"; - -export const formatScssPlatform: CalledFormatterFunction = (args) => { - const { file, dictionary } = args; - const { default: tokens, ...extraOutput } = formatTokens(dictionary, args); - const header = sd.formatHelpers.fileHeader({ file }); - - if (Object.keys(extraOutput).length > 0) { - formatExtraOutput(extraOutput, { ...args.options, header, buildPath: args.platform.buildPath }); - } - - return prettierSync.format(header + (tokens ? tokens.join(EOL) : ""), { parser: "scss" }); -}; - -export const registerFormatterScss = (sd: typeof StyleDictionary): void => { - const formatterConfig: FormatterConfig = { - name: CalciteScss, - formatter: formatScssPlatform, - }; - - sd.registerFormat(formatterConfig); -}; - -export const CalciteScss = "calcite/format/scss"; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/typography/scss.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/typography/scss.ts deleted file mode 100644 index 14c600c2cff..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/typography/scss.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { MappedFormatterArguments } from "../../../../types/styleDictionary/formatterArguments.js"; -import { createTokenReference } from "../utils/createTokenReference.js"; - -export function addSCSSImportByRef(refs: any, args: MappedFormatterArguments, refStrings: string[]): string[] { - if (args.dictionary.usesReference(refs)) { - args.dictionary.getReferences(refs).forEach((ref) => { - const tokenReference = createTokenReference(ref, args.platform); - refStrings.push(`@include ${tokenReference};`); - }); - } - - return refStrings; -} diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/typography/utils.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/typography/utils.ts deleted file mode 100644 index 72302f33d95..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/typography/utils.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { EOL } from "os"; -import { Platform } from "../../../../types/platform.js"; -import { MappedFormatterArguments } from "../../../../types/styleDictionary/formatterArguments.js"; -import { FormattingRules } from "../utils.js"; -import { createTokenReference } from "../utils/createTokenReference.js"; - -export function getTypographyReferences( - propName: string, - value: string | Record, - originalValue: string | Record, - args: MappedFormatterArguments, -): string { - if (args.dictionary.usesReference(originalValue)) { - const refs = args.dictionary.getReferences(originalValue); - const typeReferences = {}; - const typeArgs = { - ...args.platform, - options: { ...args.options, platform: Platform.CSS }, - formatting: FormattingRules[Platform.CSS], - }; - let typeValue = `${value}`; - - refs.forEach((ref) => { - if (ref.isSource || args.options.outputReferences) { - if (ref.value && ref.name) { - if (typeof ref.value === "string" || typeof ref.value === "number") { - typeValue = `${typeValue}`.replace(`${ref.value}`, () => createTokenReference(ref, typeArgs)); - } else { - switch (args.options.platform) { - case "scss": - case "sass": - typeReferences[ref.name] = `@include ${ref.name};`; - break; - default: - typeValue = `${typeValue}`.replace(ref.value, () => createTokenReference(ref, typeArgs)); - break; - } - } - } - } - }); - - const typeRefs = Object.values(typeReferences); - - return typeRefs.length > 0 ? typeRefs.join(EOL) : `${propName}: ${typeValue};`; - } - - return `${value}`; -} 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 deleted file mode 100644 index 38dfb94fe28..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { PlatformFormats, PlatformUnion } from "../../../types/platform.js"; -import { FormatterRules, MappedFormatterArguments } from "../../../types/styleDictionary/formatterArguments.js"; -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, - docs: CalciteDocs, - js: CalciteJs, - es6: "javascript/es6", - ts: "typescript/module-declarations", - es6Ts: "typescript/es6-declarations", -} as const; - -export const format = (t: T): (typeof formatters)[T] => { - return formatters[t]; -}; - -export declare function calledFormatterFunction(args: MappedFormatterArguments): string; - -export const FormattingRules: Partial> = { - default: { - prefix: "", - commentStyle: "long", - indentation: "", - separator: " =", - suffix: ";", - }, - css: { - prefix: "--", - commentStyle: "long", - indentation: " ", - separator: ":", - join: "", - suffix: ";", - }, - sass: { - prefix: "$", - commentStyle: "short", - indentation: "", - separator: ":", - join: "", - suffix: ";", - }, - scss: { - prefix: "$", - commentStyle: "short", - indentation: "", - separator: ":", - join: "", - suffix: ";", - }, -}; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/createTokenReference.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/createTokenReference.ts deleted file mode 100644 index 9a0b299ca51..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/createTokenReference.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { TransformedToken } from "style-dictionary/types/TransformedToken.js"; -import { PlatformOptions } from "../../../../types/styleDictionary/platform.js"; -import { FormattingRules } from "../utils.js"; - -export function createTokenReference(token: TransformedToken, args: PlatformOptions): string { - const formatting = FormattingRules[args.options.platform] || FormattingRules.default; - - switch (args.options.platform) { - case "css": - return args.options.outputReferenceFallbacks - ? `var(${formatting.prefix}${token.name}, ${token.value})` - : `var(${formatting.prefix}${token.name})`; - case "sass": - case "scss": - return `${formatting.prefix}${token.name}`; - default: - return `${token.name}`; - } -} 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 deleted file mode 100644 index 497d58b970e..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts +++ /dev/null @@ -1,140 +0,0 @@ -import { writeFileSync } from "fs"; -import { resolve } from "path"; -import prettierSync from "@prettier/sync"; - -import { Platform } from "../../../../types/platform.js"; -import { Options } from "../../../../types/styleDictionary/options.js"; -import { DeepKeyTokenMap } from "../../../../types/tokenStudio/designTokenTypes.js"; - -export function formatExtraOutput( - outputObject: Record)[]> | DeepKeyTokenMap, - args: Options & { header: string; buildPath: string }, -): void { - if (Object.keys(outputObject).length > 0) { - const { index } = args.expandFiles[args.platform]; - const outputFiles: Record = {}; - const ensureIfArray = (x: any) => (Array.isArray(x) ? x : x); - - if (index) { - let parser; - // Set output - switch (args.platform) { - case "css": - case "scss": - case "sass": - const imports = index.import - ? index.import.map((imp) => - typeof imp === "string" - ? `@import ${imp.includes(".css") ? `url("${imp}")` : `"${imp}"`};` - : `@import ${imp[0].includes(".css") ? `url("${imp[0]}")` : `"${imp[0]}"`} ${imp - .slice(1) - .join(" ")};`, - ) - : []; - const forwards = index.forward ? index.forward.map((fwd) => `@forwards "${fwd}";`) : []; - const classes = index.class - ? index.class.map((cls) => { - const c = ensureIfArray(outputObject[`${cls[1]}.${args.platform}`]); - return cls && Array.isArray(c) ? `.${cls[0]} {${c.join("")}}` : ""; - }) - : []; - const mixins = index.mixin - ? index.mixin.map(([mixinName, output]) => { - const m = ensureIfArray(outputObject[`${output}.${args.platform}`]); - return Array.isArray(m) - ? `@mixin ${mixinName} {${m.map((o) => `${o}`.replaceAll("$", "--")).join("")}}` - : ""; - }) - : []; - const medias = index.media - ? index.media.map(([mediaSchemed, output]) => { - const m = ensureIfArray(outputObject[`${output}.${args.platform}`]); - const cssProps = m.map((o) => `${o}`.replaceAll("$", "--")); - return Array.isArray(m) - ? `${ - output === "light" ? `:root {${cssProps.join("")}}` : "" - }@media (${mediaSchemed}) {.calcite-mode-auto {${cssProps.join("")}}}` - : ""; - }) - : []; - - outputFiles[index.name] = [ - ...(imports || []), - ...(forwards || []), - ...(medias || []), - ...(classes || []), - ...(mixins || []), - ].filter((t) => t); - break; - case "docs": - case "js": - case "es6": - const exports = index.export?.map((exp) => - typeof exp === "string" ? `export * from "${exp}";` : `export * as ${exp[1]} from "${exp[0]}";`, - ); - outputFiles[index.name] = [...exports].filter((t) => t); - break; - default: - break; - } - - // Set Parser - switch (args.platform) { - case "css": - case "scss": - parser = args.platform; - break; - case "sass": - parser = "scss"; - case "es6": - case "js": - parser = "babel"; - break; - case "docs": - parser = "json"; - default: - break; - } - - writeFileSync( - resolve(args.buildPath, index.name), - prettierSync.format(`${args.header}${outputFiles[index.name].join(" ")}`, { parser }), - ); - } - - Object.entries(outputObject).forEach(([fileName, outputList]) => { - const absoluteFilePath = resolve(args.buildPath, fileName); - let format; - let parser; - - switch (args.platform) { - case Platform.CSS: - parser = "css"; - format = - typeof outputList[0] === "string" && outputList[0].slice(0, 2) === "--" - ? `${args.header}:root{${outputList.join("")}}` - : `${args.header}${outputList.join("")}`; - break; - case Platform.SCSS: - case Platform.SASS: - parser = "scss"; - format = `${args.header}${outputList.join("")}`; - break; - case Platform.JS: - parser = "babel"; - format = args.header + "export default " + outputList[0] + ""; - break; - case Platform.DOCS: - parser = "json"; - format = outputList[0].join(""); - break; - default: - break; - } - - if (parser && format) { - writeFileSync(absoluteFilePath, prettierSync.format(format, { parser })); - } - }); - } -} diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatTokens.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatTokens.ts deleted file mode 100644 index f40517472b7..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatTokens.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { Dictionary } from "../../../../types/styleDictionary/dictionary.js"; -import { handleColor } from "./handleColor.js"; -import { handleStringValueTokens } from "./handleStringValue.js"; -import { handleTypography } from "./handleTypography.js"; -import { sortByReference } from "./sortByReference.js"; -import { ExpandableTokenTypes } from "../../../../types/tokenStudio/designTokenTypes.js"; -import { handleBreakpoint } from "./handleBreakpoint.js"; -import { MappedFormatterArguments } from "../../../../types/styleDictionary/formatterArguments.js"; - -export type FormattedTokens = Record)[]>; - -export function formatTokens(dictionary: Dictionary, args: MappedFormatterArguments): FormattedTokens { - const allTokens = [...dictionary.allTokens].sort(sortByReference(dictionary)); - const returnFiles: FormattedTokens = {}; - return allTokens.reduce((acc, token) => { - let group = "default"; - let formattedToken; - - switch (token.type) { - case ExpandableTokenTypes.BREAKPOINT: - formattedToken = handleBreakpoint(token, dictionary, args); - - break; - case ExpandableTokenTypes.TYPOGRAPHY: - formattedToken = handleTypography(token, args); - break; - case ExpandableTokenTypes.COLORSCHEME: - case "color": - formattedToken = handleColor(token, dictionary, args); - token.type = typeof formattedToken === "string" ? token.type : "colorScheme"; - - break; - default: - formattedToken = handleStringValueTokens(token, dictionary, args); - break; - } - - if (formattedToken) { - if (typeof formattedToken === "string") { - group = - args.options.expandFiles[args.options.platform][token.type]?.name || - args.options.expandFiles[args.options.platform][token.type] || - "default"; - - if (!acc[group]) { - acc[group] = []; - } - - acc[group].push(formattedToken); - } else { - Object.entries(formattedToken).forEach(([tokenSecondaryName, tokenValue]) => { - group = - args.options.expandFiles[args.options.platform][token.type][tokenSecondaryName]?.name || - args.options.expandFiles[args.options.platform][token.type][tokenSecondaryName] || - args.options.expandFiles[args.options.platform][token.type] || - "default"; - - if (!acc[group]) { - acc[group] = []; - } - - if (args.options.expandFiles[args.options.platform][token.type][tokenSecondaryName]) { - acc[group].push(`${tokenValue}`); - } else { - const idx = acc[group].length - 1; - - if (!acc[group][idx]) { - acc[group][idx] = {}; - } - - acc[group][idx][tokenSecondaryName] = tokenValue; - } - }); - } - } - return acc; - }, returnFiles); -} diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/getReferenceFromValue.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/getReferenceFromValue.ts deleted file mode 100644 index a0294f945c3..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/getReferenceFromValue.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { Dictionary } from "style-dictionary/types/Dictionary.js"; -import { PlatformOptions } from "../../../../types/styleDictionary/platform.js"; -import { createTokenReference } from "./createTokenReference.js"; -import { hexToRgb } from "../../transformer/utils/hexToRGBA.js"; - -export function getReferencesFromValue( - originalValue: string, - value: string, - dictionary: Dictionary, - args: PlatformOptions, -): string { - if (dictionary.usesReference(originalValue)) { - const refs = dictionary.getReferences(originalValue); - refs.forEach((ref) => { - if (ref.isSource || args.options.outputReferences) { - if (ref.value && ref.name) { - const tokenRef = createTokenReference(ref, { - ...args, - options: { - ...args.options, - platform: args.options.platform.match(/(css|sass|scss)/) ? "css" : args.options.platform, - }, - }); - - if (ref.type === "color" && !value.includes(ref.value) && value.includes("rgb")) { - // We prefer HEX but sometimes we need to check for rgba - const rgbRef = hexToRgb(ref.value); - const rgba = value.match(/rgba?\(/); - value = - rgbRef && rgba - ? value.replace(`${rgba[0]}${Object.values(rgbRef).join(", ")}`, `${rgba[0]}${tokenRef}`) - : value.replace(ref.value, tokenRef); - } else { - const rgba = value.search(/rgba?\((\d,\s*)+/); - - value = - ref.type === "opacity" && rgba - ? value.replace(rgba + ref.value, rgba + tokenRef) - : value.replace(ref.value, tokenRef); - } - } - } - }); - } - - return value; -} diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleBreakpoint.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleBreakpoint.ts deleted file mode 100644 index 2776f4503fb..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleBreakpoint.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms"; - -import { Dictionary } from "../../../../types/styleDictionary/dictionary.js"; -import { TransformedToken } from "../../../../types/styleDictionary/transformedToken.js"; -import { TokenBreakpointContextUnion } from "../../../../types/tokenTypes/breakpointContext.js"; -import { handleStringValueTokens } from "./handleStringValue.js"; -import { Platform } from "../../../../types/platform.js"; -import { transformNamesKebabCase } from "../../transformer/name/nameKebabCase.js"; -import { MappedFormatterArguments } from "../../../../types/styleDictionary/formatterArguments.js"; -import { EOL } from "os"; - -export function handleBreakpoint( - token: TransformedToken, - dictionary: Dictionary, - args: MappedFormatterArguments, -): string | { [key in TokenBreakpointContextUnion]: string } { - if (typeof token.value === "string") { - return handleStringValueTokens(token, dictionary, args); - } - - const returnObject = Object.entries(token.value).reduce( - (acc, [minMaxKey, breakpointValue]) => { - let alteredToken = { - ...token, - value: checkAndEvaluateMath(`${breakpointValue}`), - original: { - ...token.original, - value: token.original.value[minMaxKey], - }, - }; - switch (args.options.platform) { - case "css": - case "scss": - case "sass": - alteredToken = { - ...alteredToken, - path: [...alteredToken.path, minMaxKey], - }; - acc[minMaxKey] = handleStringValueTokens( - { ...alteredToken, name: transformNamesKebabCase(alteredToken, args) }, - dictionary, - args, - ); - break; - case "es6": - acc[minMaxKey] = handleStringValueTokens(alteredToken, dictionary, args); - break; - default: - break; - } - - return acc; - }, - {} as { [key in TokenBreakpointContextUnion]: string }, - ); - - return args.options.platform === Platform.SCSS || args.options.platform === Platform.SASS - ? Object.values(returnObject).join(`${EOL}${EOL}`) - : args.options.platform === Platform.CSS - ? Object.values(returnObject).join(`${EOL}\t`) - : returnObject; -} diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleColor.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleColor.ts deleted file mode 100644 index 601f16bebfa..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleColor.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { Dictionary } from "../../../../types/styleDictionary/dictionary.js"; -import { MappedFormatterArguments } from "../../../../types/styleDictionary/formatterArguments.js"; -import { TransformedToken } from "../../../../types/styleDictionary/transformedToken.js"; -import { TokenColorSchemeUnion } from "../../../../types/tokenTypes/colorScheme.js"; -import { handleStringValueTokens } from "./handleStringValue.js"; - -export function handleColor( - token: TransformedToken, - dictionary: Dictionary, - args: MappedFormatterArguments, -): string | { [key in TokenColorSchemeUnion]: string } { - return typeof token.value === "string" - ? handleStringValueTokens(token, dictionary, args) - : Object.entries(token.value).reduce( - (acc, [contextKey, colorValue]) => { - const alteredToken = { - ...token, - value: colorValue, - original: { - ...token.original, - value: token.original.value[contextKey], - }, - }; - switch (args.options.platform) { - case "css": - case "scss": - case "sass": - case "es6": - acc[contextKey] = handleStringValueTokens(alteredToken, dictionary, args); - default: - break; - } - - return acc; - }, - {} as { [key in TokenColorSchemeUnion]: string }, - ); -} diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleStringValue.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleStringValue.ts deleted file mode 100644 index cb05f15a4ae..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleStringValue.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { TransformedToken } from "style-dictionary/types/TransformedToken.js"; -import { Dictionary } from "style-dictionary/types/Dictionary.js"; -import { getReferencesFromValue } from "./getReferenceFromValue.js"; -import { MappedFormatterArguments } from "../../../../types/styleDictionary/formatterArguments.js"; -import { FormattingRules } from "../utils.js"; - -export function handleStringValueTokens( - token: TransformedToken, - dictionary: Dictionary, - args: MappedFormatterArguments, - value?: string, -): string | undefined { - const stringValue = value || token.value; - const formatting = FormattingRules[args.options.platform] || FormattingRules.default; - const formattedName = `${formatting.indentation}${formatting.prefix}${token.name}${formatting.separator}`; - const formattedValue = getReferencesFromValue(token.original.value, stringValue, dictionary, { - options: args.options, - }); - // the key comes from Token Studio, which is why we have to keep the misspelling - // eslint-disable-next-line @cspell/spellchecker - const themeAble = ["sass", "scss"].includes(args.options.platform) && !!token["themeable"] ? "!default" : false; - const comment = !token.comment - ? undefined - : formatting.commentStyle === "short" - ? `// ${token.comment}` - : `/* ${token.comment} */`; - const stringifiedProp = [formattedName, formattedValue, themeAble, formatting.suffix, comment] - .filter((s) => s) - .join(" ") - .replace(" ;", ";") - .trim(); - - if (typeof formattedValue === "string") { - return stringifiedProp; - } - - return undefined; -} diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleTypography.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleTypography.ts deleted file mode 100644 index bf9e1bdd7c7..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleTypography.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { kebabCase } from "change-case"; - -import { TransformedToken } from "../../../../types/styleDictionary/transformedToken.js"; -import { getTypographyReferences } from "../typography/utils.js"; -import { addSCSSImportByRef } from "../typography/scss.js"; -import { Platform } from "../../../../types/platform.js"; -import { MappedFormatterArguments } from "../../../../types/styleDictionary/formatterArguments.js"; -import { EOL } from "os"; - -export function handleTypography(token: TransformedToken, args: MappedFormatterArguments): string { - const strObj = Object.keys(token.value).reduce((acc, typeKey) => { - const propName = kebabCase(typeKey); - const value = typeof token.value === "string" ? token.value : token.value[typeKey]; - const originalValue = - typeof token.original.value === "string" ? token.original.value : token.original.value[typeKey]; - const newValue = getTypographyReferences(propName, value, originalValue, args); - // Quick way to ensure unique token references - acc[newValue] = true; - return acc; - }, {}); - - switch (args.options.platform) { - case Platform.CSS: - return `.${token.name} {${EOL}\t${Object.keys(strObj).join(`${EOL}\t`)}${EOL}}`; - - case Platform.SCSS: - case Platform.SASS: - const tokenSchemeExtensionExtendToken = (token.original.extensions && - token.original.extensions["calcite.extends"]) as string | undefined; - const extraIncludes = - tokenSchemeExtensionExtendToken && args.dictionary.usesReference(tokenSchemeExtensionExtendToken) - ? addSCSSImportByRef(tokenSchemeExtensionExtendToken, args, []) - : undefined; - const mixinLines = [].concat(extraIncludes || [], Object.keys(strObj)); - - return `@mixin ${token.name} {${EOL}\t${mixinLines.join(`${EOL}\t`)}${EOL}}`; - default: - return; - } -} diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/sortByReference.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/sortByReference.ts deleted file mode 100644 index ced18c77183..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/sortByReference.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { Dictionary } from "../../../../types/styleDictionary/dictionary.js"; - -export function sortByReference(dictionary: Dictionary): (a, b) => 1 | -1 { - // The sorter function is recursive to account for multiple levels of nesting - function sorter(a, b) { - const aComesFirst = -1; - const bComesFirst = 1; - - // return early if a or b ar undefined - if (typeof a === "undefined") { - return aComesFirst; - } else if (typeof b === "undefined") { - return bComesFirst; - } - - // If token a uses a reference and token b doesn't, b might come before a - // read on.. - if (a.original && dictionary.usesReference(a.original.value)) { - if (b.original && dictionary.usesReference(b.original.value)) { - // Both a and b have references, we need to see if the reference each other - const aRefs = dictionary.getReferences(a.original.value); - const bRefs = dictionary.getReferences(b.original.value); - - aRefs.forEach((aRef) => { - // A references B, so we want B to come first - if (aRef.name === b.name) { - return bComesFirst; - } - }); - - bRefs.forEach((bRef) => { - // Otherwise B references A, so A should come first - if (bRef.name === a.name) { - return aComesFirst; - } - }); - - // both A and B have references and don't reference each other - // we go further down the rabbit hole (reference chain) - return sorter(aRefs[0], bRefs[0]); - } else { - // A has a reference and B does not: - return bComesFirst; - } - } else { - // A does not have a reference it should come first regardless if b has one - return aComesFirst; - } - } - - return sorter; -} diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/calcite/index.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/calcite/index.ts deleted file mode 100644 index 4e84ee2cbc8..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/calcite/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { Core as StyleDictionary } from "style-dictionary"; -import { ParserOptions } from "style-dictionary/types/Parser.js"; - -import { addFontStyles } from "../utils/add-font-styles.js"; -import { expandComposites } from "../utils/expandComposites.js"; -import { expand } from "../../../../types/tokenStudio/expandOptions.js"; -import { TransformOptions } from "../../../../types/styleDictionary/transformOptions.js"; -import { DeepKeyTokenMap } from "../../../../types/tokenStudio/designTokenTypes.js"; -import { excludeParentKeys } from "../utils/excludeParentKeys.js"; - -export function parse(options: ParserOptions): DeepKeyTokenMap { - const obj = JSON.parse(options.contents); - const parseOptions: TransformOptions = { - expand: expand || false, - excludeParentKeys: false, - }; - const excluded = excludeParentKeys(obj, parseOptions); - const withFontStyles = addFontStyles(excluded, parseOptions); - const expanded = expandComposites(withFontStyles, options.filePath, parseOptions); - return expanded; -} - -export function registerCustomJSONParser(sd: typeof StyleDictionary): void { - sd.registerParser({ - pattern: /\.json$/, - parse, - }); -} diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/add-font-styles.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/add-font-styles.ts deleted file mode 100644 index 2974dcbad95..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/add-font-styles.ts +++ /dev/null @@ -1,34 +0,0 @@ -// This is a copy/extension of sd-transforms/src/parsers/add-font-styles.ts with better types - -import { TransformOptions } from "../../../../types/styleDictionary/transformOptions.js"; -import { DeepKeyTokenMap, SingleToken } from "../../../../types/tokenStudio/designTokenTypes.js"; - -function recurse( - slice: SingleToken | DeepKeyTokenMap, - copy: DeepKeyTokenMap, - alwaysAddFontStyle = false, -): void { - for (const key in slice) { - const token = slice[key]; - if (typeof token !== "object" || token === null) { - continue; - } - const { type, value } = token; - if (type === "typography") { - if (typeof value !== "object" || value.fontWeight === undefined) { - continue; - } - } else if (typeof token === "object") { - recurse(token, copy, alwaysAddFontStyle); - } - } -} - -export function addFontStyles( - dictionary: DeepKeyTokenMap, - transformOpts?: TransformOptions, -): DeepKeyTokenMap { - const copy = { ...dictionary }; - recurse(copy, copy, transformOpts?.alwaysAddFontStyle); - return copy; -} diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/excludeParentKeys.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/excludeParentKeys.ts deleted file mode 100644 index 030072268d1..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/excludeParentKeys.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * This is a copy of @tokens-studio/sd-transforms/dist/parsers/exclude-parent-key.js because it is not provided in the exports and we need to update the types. - */ -import { DeepKeyTokenMap } from "../../../../types/tokenStudio/designTokenTypes.js"; -import { TransformOptions } from "../../../../types/styleDictionary/transformOptions.js"; - -export function excludeParentKeys( - dictionary: DeepKeyTokenMap, - transformOpts?: TransformOptions, -): DeepKeyTokenMap { - if (!transformOpts?.excludeParentKeys) { - return dictionary; - } - const copy = {}; - Object.values(dictionary).forEach((set) => { - Object.entries(set).forEach(([key, tokenGroup]) => { - copy[key] = tokenGroup; - }); - }); - return copy; -} diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/expandComposites.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/expandComposites.ts deleted file mode 100644 index 00bb4cf2a50..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/expandComposites.ts +++ /dev/null @@ -1,109 +0,0 @@ -/** - * This is a copy/extension of @tokens-studio/sd-transforms/dist/parsers/expand-composites.js but now with better types! - */ - -import { resolveReference } from "./resolveRelevance.js"; -import { typeMap } from "../../../../types/tokenTypes/typeMaps.js"; -import { TransformOptions } from "../../../../types/styleDictionary/transformOptions.js"; -import { - DeepKeyTokenMap, - ExpandableTokenTypes, - SingleExpandableToken, - SingleToken, -} from "../../../../types/tokenStudio/designTokenTypes.js"; -import { ExpandFilter } from "../../../../types/tokenStudio/expandOptions.js"; - -export function expandToken(compToken: SingleToken, isShadow = false): SingleToken { - if (typeof compToken.value !== "object") { - return compToken; - } - const expandedObj = {} as SingleExpandableToken; - - const getType = (key: string) => typeMap[compToken.type][key] ?? key; - - // multi-shadow - if (isShadow && Array.isArray(compToken.value)) { - compToken.value.forEach((shadow, index) => { - expandedObj[index + 1] = {}; - Object.entries(shadow).forEach(([key, value]) => { - expandedObj[index + 1][key] = { - value: `${value}`, - type: getType(key), - }; - }); - }); - } else { - Object.entries(compToken.value).forEach(([key, value]) => { - expandedObj[key] = { - value: `${value}`, - type: getType(key), - }; - }); - } - - return expandedObj; -} - -function shouldExpand( - token: T, - condition: boolean | ExpandFilter, - filePath: string, -): boolean { - if (typeof condition === "function") { - return condition(token, filePath); - } - return condition; -} - -function recurse( - slice: SingleToken | DeepKeyTokenMap, - copy: DeepKeyTokenMap, - filePath: string, - transformOpts: TransformOptions = {}, -) { - const opts = { - ...transformOpts, - expand: { - composition: true, - typography: false, - border: false, - shadow: false, - colorScheme: false, - }, - }; - - for (const key in slice) { - const token = slice[key] as SingleToken | DeepKeyTokenMap; - if (token.value && token.type) { - if (typeof token.type === "string" && ExpandableTokenTypes[token.type.toUpperCase()]) { - const expandType = token.type === "boxShadow" ? ExpandableTokenTypes.SHADOW : token.type; - const expand = shouldExpand( - token as SingleExpandableToken, - opts.expand[expandType], - filePath, - ); - if (expand) { - // if token uses a reference, resolve it - token.value = resolveReference(token.value, copy); - slice[key] = expandToken(token, expandType === "shadow"); - } - } else { - new Error(`Error: Malformed token. ${token}`); - } - } else if (typeof token === "object") { - recurse(token, copy, filePath, transformOpts); - } else { - new Error(`Error unexpected${token}`); - } - } -} - -export function expandComposites( - dictionary: DeepKeyTokenMap, - filePath: string, - transformOpts?: TransformOptions, -): DeepKeyTokenMap { - const copy = { ...dictionary }; - recurse(copy, copy, filePath, transformOpts); - return copy; -} diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/resolveRelevance.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/resolveRelevance.ts deleted file mode 100644 index 9f46ec94519..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/resolveRelevance.ts +++ /dev/null @@ -1,50 +0,0 @@ -/** - * This is a copy/extension of sd-transforms/src/parsers/resolveReference.ts but now with better types! - */ -import { TokenBoxshadowValue as TokenBoxShadowValue } from "@tokens-studio/types"; -import { default as usesReference } from "style-dictionary/lib/utils/references/usesReference.js"; -import { default as getReferences } from "style-dictionary/lib/utils/references/getReferences.js"; -import { DeepKeyTokenMap, SingleToken } from "../../../../types/tokenStudio/designTokenTypes.js"; - -// Type function to determine whether the obj is `tokenValue` or `{ value: tokenValue }` -function isReferenceValue( - obj: SingleToken["value"] | { value: SingleToken["value"] }, -): obj is { value: SingleToken["value"] } { - return Object.prototype.hasOwnProperty.call(obj, "value"); -} - -function flattenValues["value"]>(val: T): T { - return Object.fromEntries(Object.entries(val).map(([k, v]) => [k, v.value])) as T; -} - -// first in normal situation, second if it's another nested reference -type boundGetRef = (ref: string) => Array["value"]> | Array<{ value: SingleToken["value"] }>; - -export function resolveReference["value"]>( - tokenValue: T, - copy: DeepKeyTokenMap, -): T { - const boundGetRef = getReferences.bind({ properties: copy }) as boundGetRef; - - let ref = tokenValue; - while (ref && typeof ref === "string" && usesReference(ref)) { - try { - const getRefResult = boundGetRef(ref)[0]; - - // If every key of the result is a number, the ref value is a multi-value, which means TokenBoxShadowValue[] - if (Object.keys(getRefResult).every((key) => !isNaN(Number(key)))) { - ref = Object.values(getRefResult).map((refPart: TokenBoxShadowValue) => flattenValues(refPart)) as T; - } else if (isReferenceValue(getRefResult)) { - // this means it spit back a reference { value: '{deepRef}' } - // and we'll continue the while loop - ref = getRefResult.value as T; - } else { - ref = flattenValues(getRefResult) as T; - } - } catch { - console.warn(`Warning: could not resolve reference ${ref}`); - return ref; - } - } - return ref; -} diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/transformFontWeights.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/transformFontWeights.ts deleted file mode 100644 index 54e3a06d409..00000000000 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/transformFontWeights.ts +++ /dev/null @@ -1,31 +0,0 @@ -// This is a copy/extension of sd-transforms/src/transformFontWeights.ts -// eslint-disable-next-line @cspell/spellchecker -// "demi" was added to align with our design terminology. This was added to utils because these named exports are not available from the node module dependency. - -import { FontWeight } from "../../../../types/tokenStudio/fontWeight.js"; - -export const fontStyles = ["italic", "oblique", "normal"]; -export const fontWeightReg = new RegExp(`(?.+?)\\s?(?