@digdir/designsystemet 0.1.0-next.22 → 0.1.0-next.24

package/dist/bin/designsystemet.js

@@ -1,18 +1,44 @@
 #!/usr/bin/env node
-import { Argument, Command, program } from "@commander-js/extra-typings";
+import { Argument, createCommand, program } from "@commander-js/extra-typings";
 import chalk from "chalk";
-import { makeInitCommand } from "../src/init/index.js";
+import { convertToHex } from "../src/colors";
+import { createTokensPackage } from "../src/init/createTokensPackage.js";
 import migrations from "../src/migrations/index.js";
-import { run } from "../src/tokens/build.js";
-program.name("Designsystemet").description("CLI for working with Designsystemet");
-program.command("tokens").showHelpAfterError().description("run Designsystemet token builder").option("-t, --tokens [string]", `Path to ${chalk.blue("design-tokens")}`, "./design-tokens").option("-o, --out [string]", `Output directory for built ${chalk.blue("design-tokens")}`, "./dist/tokens").option("-p, --preview", "Generate preview token.ts files", false).action((opts) => {
-  const tokens = typeof opts.tokens === "string" ? opts.tokens : "./design-tokens";
-  const out = typeof opts.out === "string" ? opts.out : "./dist/tokens";
-  const preview = opts.preview;
-  console.log(`Bulding tokens in ${chalk.green(tokens)}`);
-  return run({ tokens, out, preview });
-});
-program.command("migrate").showHelpAfterError().description("run a Designsystemet migration").addArgument(new Argument("[migration]", "Available migrations").choices(Object.keys(migrations))).option("-l --list", "List available migrations").option("-g --glob <glob>", "Glob for files upon which to apply the migration", "./**/*.(tsx|css)").action((migrationKey, opts) => {
+import { buildTokens } from "../src/tokens/build/index.js";
+import { createTokens } from "../src/tokens/create//index.js";
+program.name("Designsystemet").description("CLI for working with Designsystemet").showHelpAfterError();
+function makeTokenCommands() {
+  const tokenCmd = createCommand("tokens");
+  tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk.blue("design-tokens")}`, "./design-tokens").option("-o, --out <string>", `Output directory for built ${chalk.blue("design-tokens")}`, "./dist/tokens").option("-p, --preview", "Generate preview token.ts files", false).action((opts) => {
+    const tokens = typeof opts.tokens === "string" ? opts.tokens : "./design-tokens";
+    const out = typeof opts.out === "string" ? opts.out : "./dist/tokens";
+    const preview = opts.preview;
+    console.log(`Bulding tokens in ${chalk.green(tokens)}`);
+    return buildTokens({ tokens, out, preview });
+  });
+  tokenCmd.command("create").description("Create Designsystemet tokens").option("-w, --write [string]", `Output directory for created ${chalk.blue("design-tokens")}`, "./design-tokens").option("-a, --accent <number>", `Accent hex color`).option("-n, --neutral <number>", `Neutral hex color`).option("-b1, --brand1 <number>", `Brand1 hex color`).option("-b2, --brand2 <number>", `Brand2 hex color`).option("-b3, --brand3 <number>", `Brand3 hex color`).option("-f, --font-family <string>", `Font family`).action(async (opts) => {
+    console.log(`Creating tokens with options ${chalk.green(JSON.stringify(opts))}`);
+    const outPath = typeof opts.write === "string" ? opts.write : "./design-tokens";
+    const family = typeof opts.fontFamily === "string" ? opts.fontFamily : "Inter";
+    const props = {
+      colors: {
+        accent: convertToHex(opts.accent),
+        neutral: convertToHex(opts.neutral),
+        brand1: convertToHex(opts.brand1),
+        brand2: convertToHex(opts.brand2),
+        brand3: convertToHex(opts.brand3)
+      },
+      typography: {
+        family
+      },
+      outPath
+    };
+    await createTokens(props);
+  });
+  return tokenCmd;
+}
+program.addCommand(makeTokenCommands());
+program.command("migrate").description("run a Designsystemet migration").addArgument(new Argument("[migration]", "Available migrations").choices(Object.keys(migrations))).option("-l --list", "List available migrations").option("-g --glob <glob>", "Glob for files upon which to apply the migration", "./**/*.(tsx|css)").action((migrationKey, opts) => {
   const { glob, list } = opts;
   if (list) {
     for (const key of Object.keys(migrations)) {
@@ -30,5 +56,7 @@ program.command("migrate").showHelpAfterError().description("run a Designsysteme
     console.log("Migrate: please specify a migration name or --list");
   }
 });
-program.addCommand(makeInitCommand(new Command("init")));
+program.command("init").description("create an initial token structure for Designsystemet").addArgument(new Argument("<targetDir>", "Target directory for the generated code")).action(async (targetDir) => {
+  await createTokensPackage(targetDir);
+});
 await program.parseAsync(process.argv);

package/dist/src/colors/index.js

@@ -1,3 +1,3 @@
-export * from "./colorUtils";
-export * from "./themeUtils";
+export * from "./utils";
+export * from "./theme";
 export * from "./types";

package/dist/src/colors/{themeUtils.js → theme.js}

@@ -1,12 +1,14 @@
 import { BackgroundColor, Color, Theme } from "@adobe/leonardo-contrast-colors";
 import { Hsluv } from "hsluv";
-import { getContrastFromHex, getContrastFromLightness, getLightnessFromHex } from "./colorUtils";
-const blueBaseColor = "#0A71C0";
-const greenBaseColor = "#078D19";
-const orangeBaseColor = "#CA5C21";
-const purpleBaseColor = "#663299";
-const redBaseColor = "#C01B1B";
-const yellowBaseColor = "#EABF28";
+import { getContrastFromHex, getContrastFromLightness, getLightnessFromHex } from "./utils";
+const baseColors = {
+  blue: "#0A71C0",
+  green: "#078D19",
+  orange: "#CA5C21",
+  purple: "#663299",
+  red: "#C01B1B",
+  yellow: "#EABF28"
+};
 const generateThemeColor = (color, mode, contrastMode = "aa") => {
   const leoBackgroundColor = new BackgroundColor({
     name: "backgroundColor",
@@ -103,12 +105,12 @@ const generateThemeForColor = (color, contrastMode = "aa") => {
   };
 };
 const generateGlobalColors = ({ contrastMode = "aa" }) => {
-  const blueTheme = generateThemeForColor(blueBaseColor, contrastMode);
-  const greenTheme = generateThemeForColor(greenBaseColor, contrastMode);
-  const orangeTheme = generateThemeForColor(orangeBaseColor, contrastMode);
-  const purpleTheme = generateThemeForColor(purpleBaseColor, contrastMode);
-  const redTheme = generateThemeForColor(redBaseColor, contrastMode);
-  const yellowTheme = generateThemeForColor(yellowBaseColor, contrastMode);
+  const blueTheme = generateThemeForColor(baseColors.blue, contrastMode);
+  const greenTheme = generateThemeForColor(baseColors.green, contrastMode);
+  const orangeTheme = generateThemeForColor(baseColors.orange, contrastMode);
+  const purpleTheme = generateThemeForColor(baseColors.purple, contrastMode);
+  const redTheme = generateThemeForColor(baseColors.red, contrastMode);
+  const yellowTheme = generateThemeForColor(baseColors.yellow, contrastMode);
   return {
     blue: blueTheme,
     green: greenTheme,
@@ -230,6 +232,7 @@ const getCssVariable = (colorType, colorNumber) => {
   return `--ds-${colorType}-${getColorNameFromNumber(colorNumber).toLowerCase().replace(/\s/g, "-")}`;
 };
 export {
+  baseColors,
   calculateContrastOneColor,
   calculateContrastTwoColor,
   canTextBeUsedOnColors,

package/dist/src/colors/{colorUtils.js → utils.js}

@@ -20,7 +20,7 @@ const hexToCssHsl = (hex, valuesOnly = false) => {
   let h = 0;
   let s = 0;
   let l = (max + min) / 2;
-  if (max == min) {
+  if (max === min) {
     h = s = 0;
   } else {
     const d = max - min;
@@ -48,11 +48,11 @@ const hexToHSL = (H) => {
   let r = 0;
   let g = 0;
   let b = 0;
-  if (H.length == 4) {
+  if (H.length === 4) {
     r = parseInt("0x" + H[1] + H[1]);
     g = parseInt("0x" + H[2] + H[2]);
     b = parseInt("0x" + H[3] + H[3]);
-  } else if (H.length == 7) {
+  } else if (H.length === 7) {
     r = parseInt("0x" + H[1] + H[2]);
     g = parseInt("0x" + H[3] + H[4]);
     b = parseInt("0x" + H[5] + H[6]);
@@ -66,14 +66,14 @@ const hexToHSL = (H) => {
   const cmin = Math.min(r, g, b);
   const cmax = Math.max(r, g, b);
   const delta = cmax - cmin;
-  if (delta == 0) h = 0;
-  else if (cmax == r) h = (g - b) / delta % 6;
-  else if (cmax == g) h = (b - r) / delta + 2;
+  if (delta === 0) h = 0;
+  else if (cmax === r) h = (g - b) / delta % 6;
+  else if (cmax === g) h = (b - r) / delta + 2;
   else h = (r - g) / delta + 4;
   h = Math.round(h * 60);
   if (h < 0) h += 360;
   l = (cmax + cmin) / 2;
-  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
   s = +(s * 100).toFixed(1);
   l = +(l * 100).toFixed(1);
   return [h, s, l];
@@ -124,9 +124,9 @@ const HSLToHex = (h, s, l) => {
   r = parseInt(Math.round((r + m) * 255).toString(16), 16);
   g = parseInt(Math.round((g + m) * 255).toString(16), 16);
   b = parseInt(Math.round((b + m) * 255).toString(16), 16);
-  if (r.toString().length == 1) r = parseInt("0" + r.toString(), 10);
-  if (g.toString().length == 1) g = parseInt("0" + g.toString(), 10);
-  if (b.toString().length == 1) b = parseInt("0" + b.toString(), 10);
+  if (r.toString().length === 1) r = parseInt("0" + r.toString(), 10);
+  if (g.toString().length === 1) g = parseInt("0" + g.toString(), 10);
+  if (b.toString().length === 1) b = parseInt("0" + b.toString(), 10);
   return "#" + r + g + b;
 };
 const hexToRgb = (hex) => {
@@ -221,9 +221,19 @@ const getApcaContrastLc = (textColor, backgroundColor) => {
 const isHexColor = (hex) => {
   return typeof hex === "string" && hex.length === 6 && !Number.isNaN(Number("0x" + hex));
 };
+const convertToHex = (color) => {
+  if (!color) {
+    return "#000000";
+  }
+  if (color.startsWith("#")) {
+    return color;
+  }
+  return chroma(color).hex();
+};
 export {
   HSLToHex,
   areColorsContrasting,
+  convertToHex,
   getApcaContrastLc,
   getContrastFromHex,
   getContrastFromLightness,

package/dist/src/init/createTokensPackage.js

@@ -176,20 +176,43 @@ Will now create the following:
     await fs.mkdir(path.join(TOKENS_TARGET_DIR, "themes"));
   } catch {
   }
+  try {
+    await fs.mkdir(path.join(TOKENS_TARGET_DIR, "themes"));
+  } catch {
+  }
+  try {
+    await fs.mkdir(path.join(TOKENS_TARGET_DIR, "primitives/modes/typography/primary"), { recursive: true });
+    await fs.mkdir(path.join(TOKENS_TARGET_DIR, "primitives/modes/typography/secondary"), { recursive: true });
+  } catch {
+  }
   for (const theme of themes.map(normalizeTokenSetName)) {
     for (const mode of modes.map(normalizeTokenSetName)) {
       await fs.cp(
-        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/colors/${mode}/global.json`),
-        path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/global.json`),
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/colors/${mode}/global.json`),
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/colors/${mode}/global.json`),
         { recursive: true }
       );
       const template2 = await fs.readFile(
-        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/colors/${mode}/theme-template.json`)
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/colors/${mode}/theme-template.json`)
       );
       await fs.writeFile(
-        path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/${theme}.json`),
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/colors/${mode}/${theme}.json`),
         template2.toString("utf-8").replaceAll("<theme>", theme)
       );
+      const templatePrimaryTypo = await fs.readFile(
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/typography/primary/theme-template.json`)
+      );
+      await fs.writeFile(
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/typography/primary/${theme}.json`),
+        templatePrimaryTypo.toString("utf-8").replaceAll("<theme>", theme)
+      );
+      const templateSecondaryTypo = await fs.readFile(
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/typography/secondary/theme-template.json`)
+      );
+      await fs.writeFile(
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/typography/secondary/${theme}.json`),
+        templateSecondaryTypo.toString("utf-8").replaceAll("<theme>", theme)
+      );
     }
     const template = await fs.readFile(path.join(TOKEN_TEMPLATE_FILES_PATH, `themes/theme-template.json`));
     await fs.writeFile(

package/dist/src/init/generateMetadataJson.js

@@ -2,15 +2,20 @@ import { normalizeTokenSetName } from "./utils.js";
 function generateMetadataJson(modes, themes) {
   return {
     tokenSetOrder: [
-      "primitives/globals",
-      "primitives/typography/default",
+      "primitives/modes/globals",
+      "primitives/size/default",
+      "primitives/modes/typography/primary/theme",
+      "primitives/modes/typography/secondary/theme",
       ...modes.flatMap((mode) => [
-        `primitives/colors/${normalizeTokenSetName(mode)}/global`,
-        ...themes.map((theme) => `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`)
+        `primitives/modes/colors/${normalizeTokenSetName(mode)}/global`,
+        ...themes.map(
+          (theme) => `primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`
+        )
       ]),
       ...themes.map((theme) => `themes/${normalizeTokenSetName(theme)}`),
       "semantic/color",
-      "semantic/style"
+      "semantic/style",
+      "Figma/components"
     ]
   };
 }

package/dist/src/init/generateThemesJson.js

@@ -2,7 +2,33 @@ import { randomUUID } from "node:crypto";
 import { TokenSetStatus } from "@tokens-studio/types";
 import { normalizeTokenSetName } from "./utils.js";
 function generateThemesJson(modes, themes) {
-  return [...generateModesGroup(modes, themes), ...generateThemesGroup(themes), generateSemanticGroup()];
+  return [
+    ...generateSizeGroup(),
+    ...generateThemesGroup(themes),
+    ...generateTypographyGroup(themes),
+    ...generateModesGroup(modes, themes),
+    generateSemanticGroup()
+  ];
+}
+function generateSizeGroup() {
+  return [
+    {
+      id: randomUUID(),
+      name: "default",
+      selectedTokenSets: {
+        "primitives/size/default": TokenSetStatus.ENABLED
+      },
+      group: "Size"
+    }
+    // {
+    //   id: randomUUID(),
+    //   name: 'compact',
+    //   selectedTokenSets: {
+    //     'primitives/size/compact': TokenSetStatus.ENABLED,
+    //   },
+    //   group: 'Size',
+    // },
+  ];
 }
 function generateModesGroup(modes, themes) {
   return modes.map(
@@ -10,10 +36,10 @@ function generateModesGroup(modes, themes) {
       id: randomUUID(),
       name: mode,
       selectedTokenSets: Object.fromEntries([
-        [`primitives/colors/${normalizeTokenSetName(mode)}/global`, TokenSetStatus.ENABLED],
+        [`primitives/modes/colors/${normalizeTokenSetName(mode)}/global`, TokenSetStatus.ENABLED],
         ...themes.map(
           (theme) => [
-            `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
+            `primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
             TokenSetStatus.ENABLED
           ]
         )
@@ -41,12 +67,37 @@ function generateSemanticGroup() {
     selectedTokenSets: {
       "semantic/style": TokenSetStatus.ENABLED,
       "semantic/color": TokenSetStatus.ENABLED,
-      "primitives/globals": TokenSetStatus.SOURCE,
-      "primitives/typography/default": TokenSetStatus.SOURCE
+      "primitives/globals": TokenSetStatus.SOURCE
     },
     group: "Semantic"
   };
 }
+function generateTypographyGroup(themes) {
+  return [
+    {
+      id: randomUUID(),
+      name: "primary",
+      selectedTokenSets: Object.fromEntries(
+        themes.map((theme) => [
+          `primitives/modes/typography/primary/${normalizeTokenSetName(theme)}`,
+          TokenSetStatus.ENABLED
+        ])
+      ),
+      group: "Typography"
+    },
+    {
+      id: randomUUID(),
+      name: "secondary",
+      selectedTokenSets: Object.fromEntries(
+        themes.map((theme) => [
+          `primitives/modes/typography/secondary/${normalizeTokenSetName(theme)}`,
+          TokenSetStatus.ENABLED
+        ])
+      ),
+      group: "Typography"
+    }
+  ];
+}
 export {
   generateThemesJson as default
 };

package/dist/src/init/nextStepsMarkdown.js

@@ -23,8 +23,8 @@ function nextStepsMarkdown(themes, modes, tokensTargetDir, packageName) {
 1. Go to https://theme.designsystemet.no and set up a color theme
 2. Press "Kopier tema"
 3. Under "Json til Figma", copy the contents under ${modes.join(" / ")} to
-   the corresponding file under \`${tokensTargetDir}\`:  
-${themeModeCombinations.map(([theme, mode]) => `     **${theme}, ${mode}**: \`primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\`  `).join("\n")}
+   the corresponding file under \`${tokensTargetDir}\`:
+${themeModeCombinations.map(([theme, mode]) => `     **${theme}, ${mode}**: \`primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\`  `).join("\n")}
    This can also be done in Tokens Studio for Figma.
 4. **IMPORTANT!** In the JSON data you copied, replace \`theme\` on line 2
    with the correct theme identifier, depending on the theme you're customizing.

package/dist/src/init/template/default-files/design-tokens/Figma/components.json

@@ -0,0 +1,22 @@
+{
+  "switch": {
+    "circle": {
+      "small": {
+        "$type": "sizing",
+        "$value": "{sizing.5} - {switch.border}"
+      },
+      "medium": {
+        "$type": "sizing",
+        "$value": "{sizing.6} - {switch.border}"
+      },
+      "large": {
+        "$type": "sizing",
+        "$value": "{sizing.7} - {switch.border}"
+      }
+    },
+    "border": {
+      "$type": "sizing",
+      "$value": "4"
+    }
+  }
+}

package/dist/src/init/template/default-files/design-tokens/primitives/globals.json

@@ -1,21 +1,20 @@
 {
   "border-width": {
     "1": {
-      "type": "borderWidth",
-      "value": "1px"
+      "$type": "borderWidth",
+      "$value": "1px"
     },
     "2": {
-      "type": "borderWidth",
-      "value": "2px"
+      "$type": "borderWidth",
+      "$value": "2px"
     }
   },
   "shadow": {
     "100": {
-      "type": "boxShadow",
-      "value": [
+      "$type": "boxShadow",
+      "$value": [
         {
           "color": "rgba(0,0,0,0.16)",
-          "type": "dropShadow",
           "x": "0",
           "y": "0",
           "blur": "1",
@@ -26,17 +25,15 @@
           "y": "1",
           "blur": "2",
           "spread": "0",
-          "color": "rgba(0,0,0,0.12)",
-          "type": "dropShadow"
+          "color": "rgba(0,0,0,0.12)"
         }
       ]
     },
     "200": {
-      "type": "boxShadow",
-      "value": [
+      "$type": "boxShadow",
+      "$value": [
         {
           "color": "rgba(0,0,0,0.15)",
-          "type": "dropShadow",
           "x": "0",
           "y": "0",
           "blur": "1",
@@ -44,7 +41,6 @@
         },
         {
           "color": "rgba(0,0,0,0.12)",
-          "type": "dropShadow",
           "x": "0",
           "y": "1",
           "blur": "2",
@@ -55,17 +51,15 @@
           "y": "2",
           "blur": "4",
           "spread": "0",
-          "color": "rgba(0,0,0,0.1)",
-          "type": "dropShadow"
+          "color": "rgba(0,0,0,0.1)"
         }
       ]
     },
     "300": {
-      "type": "boxShadow",
-      "value": [
+      "$type": "boxShadow",
+      "$value": [
         {
           "color": "rgba(0,0,0,0.14)",
-          "type": "dropShadow",
           "x": "0",
           "y": "0",
           "blur": "1",
@@ -73,7 +67,6 @@
         },
         {
           "color": "rgba(0,0,0,0.12)",
-          "type": "dropShadow",
           "x": "0",
           "y": "2",
           "blur": "4",
@@ -84,17 +77,15 @@
           "y": "4",
           "blur": "8",
           "spread": "0",
-          "color": "rgba(0,0,0,0.12)",
-          "type": "dropShadow"
+          "color": "rgba(0,0,0,0.12)"
         }
       ]
     },
     "400": {
-      "type": "boxShadow",
-      "value": [
+      "$type": "boxShadow",
+      "$value": [
         {
           "color": "rgba(0,0,0,0.13)",
-          "type": "dropShadow",
           "x": "0",
           "y": "0",
           "blur": "1",
@@ -102,7 +93,6 @@
         },
         {
           "color": "rgba(0,0,0,0.13)",
-          "type": "dropShadow",
           "x": "0",
           "y": "3",
           "blur": "5",
@@ -113,17 +103,15 @@
           "y": "6",
           "blur": "12",
           "spread": "0",
-          "color": "rgba(0,0,0,0.14)",
-          "type": "dropShadow"
+          "color": "rgba(0,0,0,0.14)"
         }
       ]
     },
     "500": {
-      "type": "boxShadow",
-      "value": [
+      "$type": "boxShadow",
+      "$value": [
         {
           "color": "rgba(0,0,0,0.12)",
-          "type": "dropShadow",
           "x": "0",
           "y": "0",
           "blur": "1",
@@ -131,7 +119,6 @@
         },
         {
           "color": "rgba(0,0,0,0.16)",
-          "type": "dropShadow",
           "x": "0",
           "y": "4",
           "blur": "8",
@@ -142,56 +129,33 @@
           "y": "12",
           "blur": "24",
           "spread": "0",
-          "color": "rgba(0,0,0,0.16)",
-          "type": "dropShadow"
+          "color": "rgba(0,0,0,0.16)"
         }
       ]
     }
   },
   "border-radius": {
-    "2": {
-      "type": "borderRadius",
-      "value": "2"
-    },
-    "4": {
-      "type": "borderRadius",
-      "value": "4"
-    },
-    "8": {
-      "type": "borderRadius",
-      "value": "8"
-    },
-    "12": {
-      "type": "borderRadius",
-      "value": "12"
-    },
-    "16": {
-      "type": "borderRadius",
-      "value": "16"
-    },
-    "24": {
-      "type": "borderRadius",
-      "value": "24"
-    },
-    "32": {
-      "type": "borderRadius",
-      "value": "32"
-    },
-    "9999": {
-      "type": "borderRadius",
-      "value": "9999"
+    "base": {
+      "$type": "borderRadius",
+      "$value": "4"
     }
   },
   "opacity": {
     "30": {
-      "type": "opacity",
-      "value": "30%"
+      "$type": "opacity",
+      "$value": "30%"
     }
   },
   "sizing": {
     "base": {
-      "type": "sizing",
-      "value": "4"
+      "$type": "sizing",
+      "$value": "4"
+    }
+  },
+  "spacing": {
+    "base": {
+      "$type": "spacing",
+      "$value": "4"
     }
   }
 }