refactor(src-tokens): convert syntax to W3C DTCG format

packages/design-tokens/src/build/filter/core.ts

@@ -4,7 +4,7 @@ import type { RegisterFn } from "../../types/interfaces.d.ts";
 import { isLightOrDarkColorToken } from "./light-or-dark.ts";
 
 export const filterCoreTokens: Filter["filter"] = (token, config) =>
-  !token.isSource && token.type !== "typography" && !isLightOrDarkColorToken(token, config);
+  !token.isSource && token.$type !== "typography" && !isLightOrDarkColorToken(token, config);
 
 export const registerFilterCoreTokens: RegisterFn = () =>
   StyleDictionary.registerFilter({

packages/design-tokens/src/build/filter/global.ts

@@ -8,7 +8,7 @@ import { isLightOrDarkColorToken } from "./light-or-dark.ts";
 export const filterGlobalTokens: Filter["filter"] = (token, config) => {
   return (
     state.sameValueThemeTokens.has(token.key) ||
-    (token.isSource && !(token.type === "typography" || isBreakpoint(token) || isLightOrDarkColorToken(token, config)))
+    (token.isSource && !(token.$type === "typography" || isBreakpoint(token) || isLightOrDarkColorToken(token, config)))
   );
 };
 

packages/design-tokens/src/build/filter/semantic.ts

@@ -4,7 +4,7 @@ import type { RegisterFn } from "../../types/interfaces.d.ts";
 import { isBreakpoint } from "../utils/token-types.ts";
 
 export const filterSemanticTokens: Filter["filter"] = (token) =>
-  token.isSource && !(token.type === "color" || token.type === "typography" || isBreakpoint(token));
+  token.isSource && !(token.$type === "color" || token.$type === "typography" || isBreakpoint(token));
 
 export const registerFilterSemanticTokens: RegisterFn = () =>
   StyleDictionary.registerFilter({

packages/design-tokens/src/build/format/docs.ts

@@ -8,7 +8,7 @@ export const formatDocsPlatform: FormatFn = async ({ dictionary }) => {
   const output = {
     timestamp: Date.now(),
     tokens: dictionary.allTokens.map((token) => {
-      token.value = typeof token.value !== "string" ? JSON.stringify(token.value) : token.value;
+      token.$value = typeof token.$value !== "string" ? JSON.stringify(token.$value) : token.$value;
 
       delete (token as Partial<Pick<TransformedToken, "original">>).original;
       cleanAttributes(token);

packages/design-tokens/src/build/format/typography.ts

@@ -15,7 +15,7 @@ function getValue(value: string, dictionary: Dictionary, outputRef = true): stri
 
   // heuristic: typography tokens only have a single reference
   const [mappedToken] = getReferences(value, dictionary.unfilteredTokens);
-  return outputRef ? `var(--${mappedToken.name});` : mappedToken.value;
+  return outputRef ? `var(--${mappedToken.name});` : mappedToken.$value;
 }
 
 function outputComment(comment: string, format: Stylesheet): string {
@@ -50,8 +50,8 @@ function getContent(args: FormatFnArguments, format: Stylesheet): string {
   dictionary.allTokens.forEach((token: FlattenedTransformedToken) => {
     const preprocessedToken = get(state.postMergeDictionary, token.path.join("."));
 
-    if (typeof preprocessedToken.value === "string" && preprocessedToken.value.startsWith("{typography")) {
-      const referencedExtensionToken = dictionary.tokenMap.get(preprocessedToken.value);
+    if (typeof preprocessedToken.$value === "string" && preprocessedToken.$value.startsWith("{typography")) {
+      const referencedExtensionToken = dictionary.tokenMap.get(preprocessedToken.$value);
       if (referencedExtensionToken) {
         selfReferencingTokens.set(token.key, referencedExtensionToken);
       }
@@ -61,7 +61,7 @@ function getContent(args: FormatFnArguments, format: Stylesheet): string {
   const groupToDeclarations = new Map<string, string[]>();
 
   dictionary.allTokens.forEach((token: FlattenedTransformedToken) => {
-    const originalValue = token.original.value;
+    const originalValue = token.original.$value;
     const extendedToken = selfReferencingTokens.get(token.key) || extendedTokenReferences.get(token.key);
     const include = format === "scss" && extendedToken ? `@include ${extendedToken.name}` : "";
     const outputRefs = format === "scss" ? !!extendedToken : !selfReferencingTokens.has(token.key);
@@ -71,7 +71,7 @@ function getContent(args: FormatFnArguments, format: Stylesheet): string {
       (typeof originalValue === "object"
         ? originalValue
         : // we use original token to get unresolved values (resolved below)
-          getReferences(originalValue, dictionary.tokens)[0].original.value) as Record<string, string>,
+          getReferences(originalValue, dictionary.tokens)[0].original.$value) as Record<string, string>,
     ).map(([key, value]) => {
       return `${kebabCase(key)}: ${getValue(value, dictionary, outputRefs)} ${outputComment(token.comment, format)}`;
     });

packages/design-tokens/src/build/overrides/index.ts

@@ -31,7 +31,7 @@ export function applyBuiltInOverrides(sds: StyleDictionary[]): void {
         const shouldSkip = !isStylesheet;
 
         if (shouldSkip) {
-          return token.value;
+          return token.$value;
         }
 
         return ogTransform.transform(token, config, options);
@@ -45,7 +45,7 @@ export function applyBuiltInOverrides(sds: StyleDictionary[]): void {
         const shouldSkip = !isStylesheet;
 
         if (shouldSkip) {
-          return token.value;
+          return token.$value;
         }
 
         return ogTransform.transform(token, config, options);
@@ -82,23 +82,23 @@ function overrideTokenStudioTransforms(): void {
       options: Config;
     },
   ): void {
-    context.token.value.color = context.token.value[theme];
+    context.token.$value.color = context.token.$value[theme];
     target[theme] = (
       context.transform.transform(context.token, context.config, context.options) as {
         color: string;
       }
     ).color;
-    delete context.token.value.color;
+    delete context.token.$value.color;
   }
 
   const sd = StyleDictionary;
 
   overrideTransform("ts/color/css/hexrgba", sd, (ogTransform) => ({
     transform: (token, config, options) => {
-      const isLegacyThemeToken = typeof token.value === "object" && "light" in token.value;
+      const isLegacyThemeToken = typeof token.$value === "object" && "light" in token.$value;
       if (isLegacyThemeToken) {
-        const ogType = token.type;
-        token.type = "shadow"; // force the transform to process object structure
+        const ogType = token.$type;
+        token.$type = "shadow"; // force the transform to process object structure
         const transformed = {};
         const context = {
           token,
@@ -108,7 +108,7 @@ function overrideTokenStudioTransforms(): void {
         } as const;
         transformThemeColor("light", transformed, context);
         transformThemeColor("dark", transformed, context);
-        token.type = ogType;
+        token.$type = ogType;
 
         return transformed;
       }
@@ -126,20 +126,20 @@ function overrideTokenStudioTransforms(): void {
 
   overrideTransform("ts/resolveMath", sd, (ogTransform) => ({
     transform: (token, config, options) => {
-      if (isBreakpoint(token) && typeof token.value === "object") {
-        const ogType = token.type;
-        token.type = "border"; // force the transform to process object structure
+      if (isBreakpoint(token) && typeof token.$value === "object") {
+        const ogType = token.$type;
+        token.$type = "border"; // force the transform to process object structure
         const transformed: any = {};
-        Object.keys(token.value).forEach(
+        Object.keys(token.$value).forEach(
           (key) =>
             (transformed[key] = ogTransform.transform(
               // fake token transforms each prop and ensures type
-              { ...token, value: `${token.value[key]}`, type: "dimension" },
+              { ...token, $value: `${token.$value[key]}`, $type: "dimension" },
               config,
               options,
             )),
         );
-        token.type = ogType;
+        token.$type = ogType;
 
         return transformed;
       }
@@ -155,7 +155,7 @@ function overrideTokenStudioTransforms(): void {
       if (shouldSkip) {
         const { platform } = config.options as PlatformConfig;
         const isStylesheet = platform === "scss" || platform === "css";
-        return isStylesheet ? `"${token.value}"` : token.value;
+        return isStylesheet ? `"${token.$value}"` : token.$value;
       }
 
       return ogTransform.transform(token, config, options);

packages/design-tokens/src/build/preprocessors/store-same-value-theme-tokens.ts

@@ -18,7 +18,7 @@ export function registerPreprocessorStoreSameValueThemeTokens(): void {
       light.allTokens.forEach((token, index) => {
         if (
           isThemed(token) &&
-          token.value === dark.allTokens[index].value &&
+          token.$value === dark.allTokens[index].$value &&
           token.key &&
           mergeInclusions.includes(token.key)
         ) {

packages/design-tokens/src/build/transforms/name/include-plus-minus.ts

@@ -41,7 +41,7 @@ export const transformNamePlusMinus: NameTransform["transform"] = (token) => {
 
 function filterByPlusMinusInPath(token: TransformedToken): boolean {
   return (
-    token.type !== "color" &&
+    token.$type !== "color" &&
     !token.path.includes("container-size") &&
     token.path.some((path) => path.includes("+") || path.includes("-"))
   );

packages/design-tokens/src/build/transforms/value/correct-posttransform-value.ts

@@ -3,15 +3,15 @@ import StyleDictionary from "style-dictionary";
 import type { RegisterFn } from "../../../types/interfaces.d.ts";
 
 const correctedValueTypes = ["fontFamily"] as const;
-const filterTypes: Filter["filter"] = (token) => correctedValueTypes.includes(token.type);
+const filterTypes: Filter["filter"] = (token) => correctedValueTypes.includes(token.$type);
 
 const transformValueCorrectPostprocessValue: ValueTransform["transform"] = async (token) => {
-  if (token.type === "fontFamily" && token.value.includes(",")) {
+  if (token.$type === "fontFamily" && token.$value.includes(",")) {
     // used to preserve the value type – should be removed at a breaking change release when font family type can change to string
-    return token.value.split(",");
+    return token.$value.split(",");
   }
 
-  return token.value;
+  return token.$value;
 };
 
 export const registerValueCorrectPostprocessValue: RegisterFn = () => {

packages/design-tokens/src/build/transforms/value/correct-pretransform-value.ts

@@ -3,16 +3,16 @@ import StyleDictionary from "style-dictionary";
 import type { RegisterFn } from "../../../types/interfaces.d.ts";
 
 const correctedValueTypes = ["fontWeight"] as const;
-const filterTypes: Filter["filter"] = (token) => correctedValueTypes.includes(token.type);
+const filterTypes: Filter["filter"] = (token) => correctedValueTypes.includes(token.$type);
 
 const transformValueCorrectPreprocessValue: ValueTransform["transform"] = async (token) => {
-  if (token.type === "fontWeight") {
-    if (token.value.toLowerCase() === "demi") {
+  if (token.$type === "fontWeight") {
+    if (token.$value.toLowerCase() === "demi") {
       return "DemiBold";
     }
   }
 
-  return token.value;
+  return token.$value;
 };
 
 export const registerValueCorrectPreprocessValue: RegisterFn = () => {

packages/design-tokens/src/build/transforms/value/correct-prop-name.ts

@@ -4,25 +4,28 @@ import type { RegisterFn } from "../../../types/interfaces.d.ts";
 
 const correctedValueTypes = ["shadow"] as const;
 const filterTypes: Filter["filter"] = (token) =>
-  correctedValueTypes.includes(token.type) && typeof token.value === "object";
+  correctedValueTypes.includes(token.$type) && typeof token.$value === "object";
 
 function fixableShadowToken(
   token: TransformedToken,
-): token is TransformedToken & { value: { offsetX: number; offsetY: number } } {
+): token is TransformedToken & { $value: { offsetX: number; offsetY: number } } {
   return (
-    token.type === "shadow" && typeof token.value === "object" && "offsetX" in token.value && "offsetY" in token.value
+    token.$type === "shadow" &&
+    typeof token.$value === "object" &&
+    "offsetX" in token.$value &&
+    "offsetY" in token.$value
   );
 }
 
 const transformValueCorrectPropName: ValueTransform["transform"] = (token) => {
   if (fixableShadowToken(token)) {
-    token.value["x"] = token.value.offsetX;
-    delete token.value.offsetX;
-    token.value["y"] = token.value.offsetY;
-    delete token.value.offsetY;
+    token.$value["x"] = token.$value.offsetX;
+    delete token.$value.offsetX;
+    token.$value["y"] = token.$value.offsetY;
+    delete token.$value.offsetY;
   }
 
-  return token.value;
+  return token.$value;
 };
 
 export const registerValueCorrectPropName: RegisterFn = () => {

packages/design-tokens/src/build/transforms/value/ensure-type.ts

@@ -6,10 +6,10 @@ import { isBreakpoint } from "../../utils/token-types.ts";
 
 const stringValueTokenTypes = ["fontWeight", "dimension", "lineHeight", "opacity", "z-index"] as const;
 const filterTypes: Filter["filter"] = (token) =>
-  stringValueTokenTypes.includes(token.type as ArrayValues<typeof stringValueTokenTypes>) && !isBreakpoint(token);
+  stringValueTokenTypes.includes(token.$type as ArrayValues<typeof stringValueTokenTypes>) && !isBreakpoint(token);
 
 const transformValueEnsureType: ValueTransform["transform"] = async (token) => {
-  return `${token.value}`;
+  return `${token.$value}`;
 };
 
 export const registerValueEnsureType: RegisterFn = () => {

packages/design-tokens/src/build/transforms/value/merge-value.ts

@@ -37,12 +37,12 @@ const transformValueMergeValues: ValueTransform["transform"] = async (token, con
 
   if (tokenIndex > -1 && lightToken.key && !state.sameValueThemeTokens.has(lightToken.key)) {
     return {
-      light: lightToken.value,
-      dark: darkToken.value,
+      light: lightToken.$value,
+      dark: darkToken.$value,
     };
   }
 
-  return token.value;
+  return token.$value;
 };
 
 export const registerValueMergeValues: RegisterFn = () => {

packages/design-tokens/src/build/transforms/value/px-to-rem.ts

@@ -1,5 +1,4 @@
-import type { Config } from "style-dictionary";
-import type { PlatformConfig, TransformedToken, ValueTransform } from "style-dictionary/types";
+import type { Filter, PlatformConfig, TransformedToken, ValueTransform } from "style-dictionary/types";
 import StyleDictionary from "style-dictionary";
 import type { RegisterFn } from "../../../types/interfaces.d.ts";
 import { isBreakpoint, isBreakpointRelated, isCornerRadius, isFontRelated } from "../../utils/token-types.ts";
@@ -8,8 +7,8 @@ function getBasePxFontSize(config: PlatformConfig) {
   return (config && config.basePxFontSize) || 16;
 }
 
-function isDimension(token: TransformedToken, options: Config) {
-  return (options.usesDtcg ? token.$type : token.type) === "dimension";
+function isDimension(token: TransformedToken) {
+  return token.$type === "dimension";
 }
 
 function isSource(token: TransformedToken) {
@@ -18,14 +17,10 @@ function isSource(token: TransformedToken) {
 
 function isPxUnit(token: TransformedToken) {
   const matcher = /(?<number>[\d.]+)(?<unit>[a-z%]*)/g.exec(
-    token.value || token.value.value || token.original.value || token.original.value.value,
+    token.$value || token.$value.value || token.original.$value || token.original.$value.value,
   );
 
-  if (!matcher || !matcher.groups || !matcher.groups.unit || ["", "rem", "%"].includes(matcher.groups.unit)) {
-    return false;
-  }
-
-  return true;
+  return !!matcher?.groups?.unit && !["", "rem", "%"].includes(matcher.groups.unit);
 }
 
 function throwSizeError(name: string, value: string, unitType: string) {
@@ -36,21 +31,18 @@ function isStaticPx(token: TransformedToken) {
   return !token.path.some((path) => ["base", "border", "fixed", "px"].includes(path));
 }
 
-function filter(token: TransformedToken, options: Config) {
-  return (
-    isSource(token) &&
-    !isBreakpoint(token) &&
-    isStaticPx(token) &&
-    isDimension(token, options) &&
-    !isFontRelated(token) &&
-    !isCornerRadius(token) &&
-    !isBreakpointRelated(token) &&
-    isPxUnit(token)
-  );
-}
+const filter: Filter["filter"] = (token) =>
+  isSource(token) &&
+  !isBreakpoint(token) &&
+  isStaticPx(token) &&
+  isDimension(token) &&
+  !isFontRelated(token) &&
+  !isCornerRadius(token) &&
+  !isBreakpointRelated(token) &&
+  isPxUnit(token);
 
-const transformValueSizePxToRem: ValueTransform["transform"] = (token, config, options) => {
-  const value = options.usesDtcg ? token.$value : token.value;
+const transformValueSizePxToRem: ValueTransform["transform"] = (token, config) => {
+  const value = token.$value;
   const parsedVal = parseFloat(value);
   const baseFont = getBasePxFontSize(config);
 

packages/design-tokens/src/build/utils/get-number-and-unit.ts

@@ -2,6 +2,6 @@ import type { TransformedToken } from "style-dictionary/types";
 
 export function getNumberAndUnit(token: TransformedToken): RegExpExecArray | null {
   return /^(?<number>[\d.]+)(?<unit>[a-z%]*)/g.exec(
-    token.value || token.value.value || token.original.value || token.original.value.value,
+    token.$value || token.$value.value || token.original.$value || token.original.$value.value,
   );
 }

packages/design-tokens/src/build/utils/output-references.ts

@@ -1,5 +1,5 @@
 import type { OutputReferences } from "style-dictionary/types";
 
 export const primitiveValueOutputReferences: Exclude<OutputReferences, boolean> = (token) => {
-  return !!(token.type === "color" && token.path.includes("focus"));
+  return !!(token.$type === "color" && token.path.includes("focus"));
 };

packages/design-tokens/src/build/utils/token-types.ts

@@ -38,7 +38,7 @@ export function isLetterSpacing(token: TransformedToken): boolean {
 }
 
 export function isDimension(token: TransformedToken): boolean {
-  return token.type === "dimension";
+  return token.$type === "dimension";
 }
 
 export function isTypography(token: TransformedToken): boolean {
@@ -54,7 +54,7 @@ export function isThemed(token: DesignToken, options?: IsThemedOptions): boolean
   const targetProp = token.filePath;
 
   return (
-    token.type === "color" &&
+    token.$type === "color" &&
     (theme ? targetProp.includes(theme) : targetProp.includes("light") || targetProp.includes("dark"))
   );
 }