@designid/tokens 0.4.6 → 1.0.0

package/types/files.d.ts

@@ -3,14 +3,48 @@ import type {
   TFont,
   TTokenReference,
 } from "./index.ts";
+import type {
+  TokenReference,
+  JsonPointerReference,
+  CompositeStringValue,
+  ValueOrReference,
+  FontFaceValue,
+  FontFaceCollectionValue,
+  TokenType,
+  ModeExtension,
+  GeneratorsExtension,
+  BreakpointsExtension,
+  EnhancedExtensionData
+} from "../src/types/design-tokens.ts";
 
 type TThemeKey = string;
+
+/**
+ * Enhanced font configuration supporting W3C FontFace specification
+ * Maintains backward compatibility while adding new W3C features
+ */
+export type TEnhancedFont = FontFaceValue | TFont;
+
+/**
+ * Collection of enhanced fonts supporting both legacy and W3C formats
+ */
+export type TEnhancedFontCollection = TEnhancedFont[] | FontFaceCollectionValue;
+
+/**
+ * Enhanced token reference supporting W3C specifications
+ */
+export type TEnhancedTokenReference = 
+  | TTokenReference 
+  | TokenReference 
+  | JsonPointerReference 
+  | CompositeStringValue;
+
 export type TConfigMetaDataIcons = {
   objectPath: string;
   size?: number;
   style?: {
     type: "mono" | "animated";
-    fill: TTokenReference | string;
+    fill: TEnhancedTokenReference | string;
   };
 };
 
@@ -35,13 +69,51 @@ export type TConfigFile = {
     };
   };
   $modes: Record<TThemeKey, TTheme>;
-  $fonts?: TFont[];
+  $fonts?: TEnhancedFontCollection;
+  /**
+   * Enhanced extensions configuration supporting W3C design tokens specification
+   */
+  $extensions?: {
+    /**
+     * Default mode configuration for tokens
+     */
+    mode?: ModeExtension;
+    /**
+     * Global generator configuration
+     */
+    generators?: GeneratorsExtension;
+    /**
+     * Global breakpoint configuration
+     */
+    breakpoints?: BreakpointsExtension;
+    /**
+     * Additional vendor-specific extensions
+     */
+    [vendorKey: `$${string}`]: EnhancedExtensionData | unknown;
+  };
   $metaData: {
     tokenNamespace: string;
     dsNamespace?: string;
     fontNamespace?: `${string}-${string}-${string}` | string;
     icons?: TConfigMetaDataIcons;
     tokens?: {
+      /**
+       * W3C Design Tokens specification compliance level
+       */
+      w3cCompliance?: {
+        /**
+         * Enforce strict W3C token type validation
+         */
+        strictTypes?: boolean;
+        /**
+         * Support for W3C extensions (modes, generators, breakpoints)
+         */
+        enableExtensions?: boolean;
+        /**
+         * Validate token references using W3C format
+         */
+        validateReferences?: boolean;
+      };
       css?: {
         mediaQuery?: {
           match?: 
@@ -64,7 +136,26 @@ export type TConfigFile = {
             }[];
           }
         }
-      }
+      };
+      /**
+       * Token validation configuration
+       */
+      validation?: {
+        /**
+         * Enable token reference validation
+         */
+        enableReferenceValidation?: boolean;
+        /**
+         * Supported token types for validation
+         */
+        supportedTypes?: TokenType[];
+        /**
+         * Custom validation rules
+         */
+        customRules?: {
+          [ruleName: string]: (token: unknown) => boolean | string;
+        };
+      };
     };
     colorspace:
     | "hex" // Default colorspace
@@ -117,8 +208,30 @@ export type TCSSFileWrapperOptions = {
   filter?: {
     namespace?: string[];
     isInclusion?: boolean;
+    /**
+     * Filter by W3C token types
+     */
+    tokenTypes?: TokenType[];
   },
   transformValue?: (value: string) => string;
+  customFilter?: (token: any) => boolean;
+  /**
+   * W3C Design Tokens specific options
+   */
+  w3cOptions?: {
+    /**
+     * Include W3C metadata in output
+     */
+    includeMetadata?: boolean;
+    /**
+     * Process token references according to W3C spec
+     */
+    processReferences?: boolean;
+    /**
+     * Handle composite string values
+     */
+    processCompositeStrings?: boolean;
+  };
 }
 
 export default TConfigFile;

package/types/index.d.ts

@@ -4,3 +4,82 @@ export type * from './icons.d.ts';
 export type * from './token.d.ts';
 export type * from './typography.d.ts';
 export type * from './utils.d.ts';
+
+// Re-export W3C Design Tokens types for convenience
+export type {
+  // Core W3C Types
+  DesignTokensFile,
+  DesignToken,
+  TokenGroup,
+  AnyToken,
+  TokenType,
+  TokenReference,
+  JsonPointerReference,
+  CompositeStringValue,
+  ValueOrReference,
+  
+  // Basic Token Types
+  ColorToken,
+  DimensionToken,
+  FontFamilyToken,
+  FontWeightToken,
+  FontFaceToken,
+  FontFaceCollectionToken,
+  DurationToken,
+  CubicBezierToken,
+  NumberToken,
+  StringToken,
+  
+  // Composite Token Types
+  StrokeStyleToken,
+  BorderToken,
+  TransitionToken,
+  ShadowToken,
+  GradientToken,
+  TypographyToken,
+  
+  // Value Types
+  ColorValue,
+  ExtendedColorValue,
+  DimensionValue,
+  FontFamilyValue,
+  FontWeightValue,
+  FontFaceValue,
+  FontFaceCollectionValue,
+  DurationValue,
+  CubicBezierValue,
+  NumberValue,
+  StringValue,
+  StrokeStyleValue,
+  BorderValue,
+  TransitionValue,
+  ShadowValue,
+  GradientValue,
+  TypographyValue,
+  
+  // Extension Types
+  ModeExtension,
+  GeneratorsExtension,
+  BreakpointsExtension,
+  EnhancedExtensionData,
+  
+  // Utility Types
+  ValidationError,
+  ValidationResult,
+  ResolutionContext,
+  ResolutionResult,
+  
+  // Type Guards and Utilities
+  isTokenReference,
+  isJsonPointerReference,
+  isCompositeStringValue,
+  isDesignToken,
+  isTokenGroup,
+  hasModeExtension,
+  hasGeneratorExtension,
+  hasBreakpointExtension,
+  
+  // Constants
+  DESIGN_TOKENS_MEDIA_TYPE,
+  DESIGN_TOKENS_EXTENSIONS
+} from '../src/types/design-tokens.ts';

package/types/token.d.ts

@@ -1,10 +1,41 @@
+import type {
+  TokenReference,
+  JsonPointerReference,
+  CompositeStringValue,
+  ValueOrReference,
+  TokenType,
+  AnyToken
+} from "../src/types/design-tokens.ts";
+
 export type TTokenValueOptions = {
   isIncludedOriginalValue?: boolean;
   fallbackValue?: string | number | boolean | null;
 };
 
+/**
+ * Legacy token reference format (maintained for backward compatibility)
+ */
 export type TTokenReference = `{${string}}`;
 
+/**
+ * Enhanced token reference supporting W3C specifications
+ */
+export type TEnhancedTokenReference = 
+  | TTokenReference 
+  | TokenReference 
+  | JsonPointerReference 
+  | CompositeStringValue;
+
+/**
+ * W3C compliant token types
+ */
+export type TW3CTokenType = TokenType;
+
+/**
+ * W3C compliant value or reference type
+ */
+export type TW3CValueOrReference<T> = ValueOrReference<T>;
+
 export type TTokenBreakpointOptions = {
   target: TTokenBreakpointTarget;
   dimension: "width" | "height";

package/types/typography.d.ts

@@ -1,6 +1,15 @@
 import type { TTokenBreakpointKey } from "./token.ts";
 import type { TToken } from "./utils.ts";
+import type { 
+  FontFaceValue, 
+  FontFaceFormatValue, 
+  FontFaceStyleValue, 
+  FontWeightValue 
+} from "../src/types/design-tokens.ts";
 
+/**
+ * Legacy font configuration (maintained for backward compatibility)
+ */
 type TBaseFont = {
   family: string;
   style: string;
@@ -10,8 +19,50 @@ type TBaseFont = {
   format: string;
 }
 
+/**
+ * Legacy TFont type (maintained for backward compatibility)
+ */
 export type TFont =
   | (TBaseFont & { linkHref: string; src?: never })
   | (TBaseFont & { src: string; linkHref?: never });
 
+/**
+ * Enhanced font configuration supporting W3C FontFace specification
+ * Provides better type safety and validation
+ */
+export type TEnhancedFont = FontFaceValue & {
+  /**
+   * Additional metadata for enhanced processing
+   */
+  metadata?: {
+    /**
+     * Font display strategy
+     */
+    display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+    /**
+     * Font loading priority
+     */
+    loading?: 'eager' | 'lazy';
+    /**
+     * Unicode range support
+     */
+    unicodeRange?: string;
+  };
+};
+
+/**
+ * W3C compliant font weight type
+ */
+export type TW3CFontWeight = FontWeightValue;
+
+/**
+ * W3C compliant font style type
+ */
+export type TW3CFontStyle = FontFaceStyleValue;
+
+/**
+ * W3C compliant font format type
+ */
+export type TW3CFontFormat = FontFaceFormatValue;
+
 export type TTypographyBreakpointMap = Record<TTokenBreakpointKey, TToken>;

package/types/utils.d.ts

@@ -40,6 +40,55 @@ export type TToken =
     };
   });
 
+/**
+ * Enhanced token type supporting W3C design tokens specification
+ * Maintains backward compatibility while adding W3C features
+ */
+export type TEnhancedToken = TToken & {
+  /**
+   * W3C compliant extensions
+   */
+  $extensions?: {
+    /**
+     * Legacy mode support (backward compatibility)
+     */
+    mode?: Record<TTheme, string>;
+    /**
+     * Legacy generators support (backward compatibility)  
+     */
+    generators?: {
+      type: string;
+      value: Record<string, string | number>;
+    }[];
+    /**
+     * Legacy sort support (backward compatibility)
+     */
+    sort?: keyof Token['$value'][] | string[];
+    /**
+     * Legacy breakpoint support (backward compatibility)
+     */
+    breakpoint?: {
+      [key: string]: Token['$value'];
+    };
+    /**
+     * W3C mode extension support
+     */
+    $mode?: import("../src/types/design-tokens.ts").ModeExtension;
+    /**
+     * W3C generators extension support
+     */
+    $generators?: import("../src/types/design-tokens.ts").GeneratorsExtension;
+    /**
+     * W3C breakpoints extension support
+     */
+    $breakpoints?: import("../src/types/design-tokens.ts").BreakpointsExtension;
+    /**
+     * Additional vendor-specific extensions
+     */
+    [vendorKey: `$${string}`]: unknown;
+  };
+};
+
 export type TCreateModeDictionaryResponse = (TransformedToken & {
   value: TToken["$value"]
 })[];

package/bin/build-icons.js

@@ -1,2 +0,0 @@
-#!/usr/bin/env node
-import{readFileSync as F$,mkdirSync as _$}from"fs";import{writeFile as w$,readdir as C$,mkdir as M$}from"fs/promises";import{resolve as N$,relative as W$,join as h,dirname as R$}from"path";import g$ from"lodash";import h$ from"colorjs.io";var{colorspace:m$}=await Y();var Y$=await K(),j=Y$.default,{tokens:l$}=await Y();import{spawnSync as q$}from"child_process";import{existsSync as E,mkdirSync as X$,readFileSync as Z$,unlinkSync as Q$,writeFileSync as o$}from"fs";import{resolve as e$,join as q,basename as $w,normalize as ww,relative as Ww,sep as Gw,dirname as K$}from"path";var I=process.cwd(),{baseDir:Uw,distDir:Jw}=await Q(),{tokenNamespace:i,dsNamespace:Lw,tokens:Yw}=await Y(),z$=`${i}.icons`;async function E$($){let J=q($,"designid.config.ts");if(console.log("Compiling designid.config.ts with bun...",$),E(q($,"designid.config.js")))console.log("Removing existing designid.config.js file..."),Q$(q($,"designid.config.js"));if(E(J)){let W=q$("bun",["build",J,"--outfile ./designid.config.js","--minify","--target","node","--packages","external"],{stdio:"inherit",cwd:".",shell:!0});if(W.status!==0)console.error("Failed to compile designid.config.js with bun."),process.exit(W.status??1);if(W.status===0)return new Promise((G)=>{setTimeout(()=>{console.log("designid.config.js compiled successfully."),G(!0)},1000)})}}function D($="json"){return`${i}-design-system.tokens.svg${$==="d.ts"||$==="js"?".config":""}.${$}`}function l($){if(!E($))X$($,{recursive:!0})}async function p($,w=!1){let J=f(),W;if(J.endsWith(".json"))W=JSON.parse(Z$(J,"utf8").trim()??"{}");else{$=$??K$(J)+"/";let G=a($);if(G&&(w||!E(G)))await E$($);if(W=await import(G),W.default)W=W.default}return W}async function B(){let{baseDir:$}=await Q(),w=process.cwd(),W=q(w,$),{buildDir:G,distDir:z}=await Q();try{l(q(W,G)),l(q(W,z))}catch(L){console.error("Error creating directories:",L)}return W}function a($){return $?q($,"designid.config.js"):I?q(I,"designid.config.js"):q(process.cwd(),"designid.config.js")}function f(){let $=process.argv.find((H)=>H.startsWith("--config=")),[,w]=$?.split("=")??[];if(w)return w;let J=process.cwd(),W=a(I),G=q(J,"designid.config.ts"),z=E(W),L=E(G);if(z)return W;else if(L)return G;throw console.error("Config file not found"),new Error("Config file not found")}async function Q($=!1){let w=f(),W=(await p(I,$)).$paths;if(!W)throw console.error("Project paths not found"),new Error("Project paths not found");return{configFile:w,...W}}async function Y(){let w=(await p(I)).$metaData;if(!w)throw console.error("Project metaData not found"),new Error("Project metaData not found");if(!w.colorspace)w.colorspace="hex";if(!w.fontNamespace)w.fontNamespace=`${w.dsNamespace}.font`;if(!w?.tokens?.css?.mediaQuery?.match)w={...w??{},tokens:{...w.tokens??{},css:{...w.tokens?.css??{},mediaQuery:{...w.tokens?.css?.mediaQuery??{},match:"[data-theme]"}}}};if(w?.tokens?.css?.mediaQuery&&typeof w.tokens.css.mediaQuery.separateThemeFiles!=="boolean")w.tokens.css.mediaQuery.separateThemeFiles=!1;if(!w.dsNamespace)w.dsNamespace=w.tokenNamespace;return{...w,icons:w.icons??{objectPath:z$},dsNamespace:w.dsNamespace}}async function K(){return(await p(I)).$modes??{default:"light"}}var Zw=await K();var{icons:_}=await Y();function T($){$=$.replace(/<\?xml[^>]*\?>\s*/,""),$=$.replace(/<!DOCTYPE [^>]*>\s*/,"");let w=$.match(/<svg[^>]*>/),J=$.match(/viewBox="([\d\s.]+)"/),[W]=w??[],G=W;if(W&&G){let L=_?.style?.fill,H=/id="[^"]*"/.test(W);if(!G.includes("xmlns="))G=G.replace("<svg",'<svg xmlns="http://www.w3.org/2000/svg"');if(!H&&L)G=G.replace("<svg",`<svg id="${L}"`);else if(H&&L)G=G.replace(/id="[^"]*"/,`id="${L}"`)}if(J&&W&&G){let L=J[1].split(" ").map(Number),H=L[2],U=L[3],X=_?.size??24,Z=H/U*X;$=$.replace(/height="[\d.]+px?"/,`height="${X}px"`),$=$.replace(/width="[\d.]+px?"/,`width="${Z}px"`);let S=/width="[\d.]+(px)?"/.test(W),N=/height="[\d.]+(px)?"/.test(W);if(!S)G=G.replace("<svg",`<svg width="${Z}px"`);else G=G.replace(/width="[\d.]+(px)?"/,`width="${Z}px"`);if(!N)G=G.replace("<svg",`<svg height="${X}px"`);else G=G.replace(/height="[\d.]+(px)?"/,`height="${X}px"`);$=$.replace(W,G)}if(!$?.match(/data-style="([^"]*)"/)&&_?.style?.type)$=$.replace("<svg ",`<svg data-style="${_.style.type}" `);return $}var Bw=await K();import{join as x}from"path";var{baseDir:Fw,distDir:$$,assets:C}=await Q(),{fontNamespace:_w}=await Y(),M=await B(),Cw=x(M,$$,"css"),Mw=C?.fonts?.sourceDir?x(M,C.fonts.sourceDir):null,V=x("assets","fonts"),e=C?.fonts?.distDir??V,Nw=e===V?x(M,$$,C?.fonts?.distDir??V):x(M,e);var{set:v,get:P$}=g$,{assets:u,buildDir:j$}=await Q(!0),{tokenNamespace:b$,icons:D$}=await Y(),m=await B(),y=h(m,u?.icons?.sourceDir??"icons"),p$="build",f$=u?.icons?.distDir??p$,T$=h(m,f$),V$=h(m,j$,"icons");async function G$($){let w=await C$($,{withFileTypes:!0}),J=await Promise.all(w.map((W)=>{let G=N$($,W.name);return W.isDirectory()?G$(G):G}));return Array.prototype.concat(...J)}async function v$(){if(!u?.icons?.sourceDir){console.error("Skipping icon build: iconsDir is not defined in the project paths.");return}let J=(await G$(y)).filter((H)=>H.endsWith(".svg")).map((H)=>{let U=F$(H,"utf8").replace(/(\s+(?=(?:[^"]*"[^"]*")*[^"]*$))/g," ").trim()??"";U=T(U);let X=W$(y,H).split("/").pop(),Z=(U.match(/name="(.*?)"/)??[])[1]??X?.replace(".svg",""),S=(U.match(/data-style="(.*?)"/)??[])[1],N=(U.match(/description="(.*?)"/)??[])[1],[d]=U.match(/<svg[^>]*>/)??[],[,H$]=d?.match(/width="([\d.]+)(px)?"/)??[],[,U$]=d?.match(/height="([\d.]+)(px)?"/)??[];if(S!=="animated"&&S!=="custom")return{path:H,folder:W$(y,H).split("/").slice(0,-1).concat(Z),file:X,style:S,content:U,name:Z,dimensions:{width:Number(H$),height:Number(U$)},description:N??""};return}).filter((H)=>H!==void 0).reduce((H,U)=>{if(U?.style!=="animated"&&U?.style!=="custom"&&U)v(H,U.folder.join("."),{$type:"icon",$name:U.name,$description:U.description,$style:U.style,$value:U.content,$dimensions:U.dimensions,...P$(H,U.folder.join("."))});return H},{}),W=D$?.objectPath??`${b$}.icons`;Object.keys(J).forEach(async(H)=>{let U=`${V$}/${H}`,X=`${U}/svg.${H}.tokens.json`;await M$(U,{recursive:!0});let Z=v({},`${W}${W?".":""}${H}`,J[H]);await w$(X,JSON.stringify(Z,null,2),{flag:"w",encoding:"utf-8"})});let G=`${T$}/tokens/${D("json")}`,z=R$(G);_$(z,{recursive:!0});let L=v({},W,J);await w$(G,JSON.stringify(L,null,2),{flag:"w",encoding:"utf-8"})}var KW=v$().catch(($)=>{console.error($),process.exit(1)});export{KW as default,v$ as buildIcons};

package/example/tokens/border/composition.tokens.json

@@ -1,31 +0,0 @@
-{
-  "io": {
-    "border": {
-      "thin": {
-        "$description": "Thin (default) border composition",
-        "default": {
-          "$type": "composition",
-          "$value": {
-            "width": {
-              "$type": "dimension",
-              "value": "1px"
-            },
-            "style": {
-              "$type": "string",
-              "value": "solid"
-            },
-            "color": {
-              "$type": "color",
-              "value": "{io.color.brand.primary.n1}",
-              "$extensions": {
-                "mode": {
-                  "dark": "red"
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/example/tokens/colors/brand/primary.tokens.json

@@ -1,44 +0,0 @@
-{
-  "io": {
-    "color": {
-      "a": {
-        "$type": "color",
-        "$value": "white",
-        "$extensions": {
-          "mode": {
-            "dark": "purple"
-          }
-        }
-      },
-      "brand": {
-        "primary": {
-          "nDefault": {
-            "$description": "Basic example with an hex color value.",
-            "$type": "color",
-            "$value": "purple",
-            "$extensions": {
-              "mode": {
-                "dark": "green"
-              }
-            }
-          },
-          "n0": {
-            "$description": "Basic example with an hex color value.",
-            "$type": "color",
-            "$value": "green"
-          },
-          "n1": {
-            "$description": "Basic example with an hex color value.",
-            "$type": "color",
-            "$value": "#1a73e8",
-            "$extensions": {
-              "mode": {
-                "dark": "blue"
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/example/tokens/colors/icon/mono.tokens.json

@@ -1,15 +0,0 @@
-{
-  "io": {
-    "color": {
-      "icon": {
-        "mono": {
-          "default": {
-            "$description": "Basic example with an hex color value.",
-            "$type": "color",
-            "$value": "{io.color.brand.primary.n1}"
-          }
-        }
-      }
-    }
-  }
-}

package/example/tokens/effect/shadow.tokens.json

@@ -1,41 +0,0 @@
-{
-  "io": {
-    "effect": {
-      "shadow": {
-        "layer-1": {
-          "$description": "Shadow for layer 1 elements.",
-          "xs": {
-            "$type": "composition",
-            "$value": {
-              "offsetX": {
-                "$type": "dimension",
-                "value": "0px"
-              },
-              "offsetY": {
-                "$type": "dimension",
-                "value": "1px"
-              },
-              "blur": {
-                "$type": "dimension",
-                "value": "2px"
-              },
-              "spread": {
-                "$type": "dimension",
-                "value": "0px"
-              },
-              "color": {
-                "$type": "color",
-                "value": "{io.color.brand.primary.n1}",
-                "$extensions": {
-                  "mode": {
-                    "dark": "{io.color.brand.primary.n0}"
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/example/tokens/font/family.tokens.json

@@ -1,110 +0,0 @@
-{
-  "io": {
-    "font": {
-      "family": {
-        "primary": {
-          "main": {
-            "$type": "string",
-            "$value": "Inter"
-          },
-          "fallback": {
-            "$type": "string",
-            "$value": "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
-          }
-        }
-      },
-      "weight": {
-        "primary": {
-          "regular": {
-            "$type": "number",
-            "$value": 400
-          },
-          "bold": {
-            "$type": "number",
-            "$value": 700
-          }
-        }
-      },
-      "size": {
-        "xs": {
-          "$type": "number",
-          "$value": "0.75rem"
-        },
-        "sm": {
-          "$type": "number",
-          "$value": "1rem"
-        },
-        "md": {
-          "$type": "number",
-          "$value": "1.25rem"
-        },
-        "base": {
-          "$type": "dimension",
-          "$value": "{io.dimensions.tshirt.base}"
-        },
-        "lg": {
-          "$type": "number",
-          "$value": "1.5rem"
-        },
-        "xl": {
-          "$type": "number",
-          "$value": "1.75rem"
-        },
-        "2xl": {
-          "$type": "number",
-          "$value": "2rem"
-        },
-        "3xl": {
-          "$type": "number",
-          "$value": "2.25rem"
-        },
-        "4xl": {
-          "$type": "number",
-          "$value": "2.5rem"
-        },
-        "5xl": {
-          "$type": "number",
-          "$value": "3rem"
-        }
-      },
-      "lineHeight": {
-        "xs": {
-          "$type": "number",
-          "$value": "1.25rem"
-        },
-        "sm": {
-          "$type": "number",
-          "$value": "1.5rem"
-        },
-        "md": {
-          "$type": "number",
-          "$value": "1.75rem"
-        },
-        "base": {
-          "$type": "dimension",
-          "$value": "{io.dimensions.tshirt.base}"
-        },
-        "lg": {
-          "$type": "number",
-          "$value": "2rem"
-        },
-        "xl": {
-          "$type": "number",
-          "$value": "2.25rem"
-        },
-        "2xl": {
-          "$type": "number",
-          "$value": "2.5rem"
-        },
-        "3xl": {
-          "$type": "number",
-          "$value": "3rem"
-        },
-        "4xl": {
-          "$type": "number",
-          "$value": "3.5rem"
-        }
-      }
-    }
-  }
-}