@json-to-office/core-docx 2.4.0 → 2.5.0

package/dist/components/highcharts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"highcharts.d.ts","sourceRoot":"","sources":["../../src/components/highcharts.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAMxC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAItE,YAAY,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAEnE;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AA6GD;;;;;;;;GAQG;AACH,wBAAsB,uBAAuB,CAC3C,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,WAAW,EAClB,cAAc,CAAC,EAAE,uBAAuB,GACvC,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAalC"}
+{"version":3,"file":"highcharts.d.ts","sourceRoot":"","sources":["../../src/components/highcharts.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAMxC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAGtE,YAAY,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAEnE;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AA2GD;;;;;;;;GAQG;AACH,wBAAsB,uBAAuB,CAC3C,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,WAAW,EAClB,cAAc,CAAC,EAAE,uBAAuB,GACvC,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAalC"}

package/dist/core/generationContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generationContext.d.ts","sourceRoot":"","sources":["../../src/core/generationContext.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EACV,eAAe,EACf,iBAAiB,EAClB,MAAM,wBAAwB,CAAC;AAKhC,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,CAAA;KAAE,CAAC;IAC9C,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC/B;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,CAClB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,iBAAiB,EAAE,GAAG,SAAS,EACzC,QAAQ,EAAE,OAAO,KACd,WAAW,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,2EAA2E;IAC3E,QAAQ,EAAE,yBAAyB,CAAC;IACpC,KAAK,EAAE,WAAW,CAAC;IACnB,+DAA+D;IAC/D,SAAS,EAAE,MAAM,CAAC;CACnB;AAoBD,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,yBAAyB,EACrC,OAAO,GAAE,mBAAwB,GAChC,sBAAsB,CA6DxB"}
+{"version":3,"file":"generationContext.d.ts","sourceRoot":"","sources":["../../src/core/generationContext.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EACV,eAAe,EACf,iBAAiB,EAClB,MAAM,wBAAwB,CAAC;AAMhC,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,CAAA;KAAE,CAAC;IAC9C,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC/B;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,CAClB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,iBAAiB,EAAE,GAAG,SAAS,EACzC,QAAQ,EAAE,OAAO,KACd,WAAW,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,2EAA2E;IAC3E,QAAQ,EAAE,yBAAyB,CAAC;IACpC,KAAK,EAAE,WAAW,CAAC;IACnB,+DAA+D;IAC/D,SAAS,EAAE,MAAM,CAAC;CACnB;AAoBD,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,yBAAyB,EACrC,OAAO,GAAE,mBAAwB,GAChC,sBAAsB,CA8DxB"}

package/dist/index.js

@@ -15,6 +15,7 @@ var __export = (target, all) => {
 };
 
 // src/themes/defaults.ts
+import { designColors } from "@json-to-office/shared";
 function ensureThemeDefaults(theme) {
   return {
     ...theme,
@@ -47,10 +48,13 @@ function ensureThemeDefaults(theme) {
   };
 }
 function getThemeColors(theme) {
-  return {
-    ...DEFAULT_COLORS,
-    ...theme.colors || {}
-  };
+  return designColors(
+    {
+      ...DEFAULT_COLORS,
+      ...theme.colors || {}
+    },
+    theme.palette
+  );
 }
 function getThemeFonts(theme) {
   return {
@@ -188,6 +192,10 @@ var init_defaults = __esm({
 });
 
 // src/styles/utils/colorUtils.ts
+import {
+  DEFAULT_CHART_THEME_COLORS,
+  resolveDesignColor
+} from "@json-to-office/shared";
 function resolveColor(colorValue, theme) {
   if (colorValue.startsWith("#")) {
     const hexValue = colorValue.slice(1);
@@ -201,7 +209,11 @@ function resolveColor(colorValue, theme) {
   const colors = getThemeColors(theme);
   const resolvedColor = colors[colorValue];
   if (typeof resolvedColor === "string") {
-    return resolveColor(resolvedColor, theme);
+    const hex = resolveDesignColor(colorValue, colors);
+    if (hex) return hex.toUpperCase();
+    throw new Error(
+      `Unresolvable theme color: "${colorValue}" (missing reference or cycle).`
+    );
   }
   if (/^[0-9A-Fa-f]{6}$/.test(colorValue)) {
     return colorValue.toUpperCase();
@@ -210,6 +222,15 @@ function resolveColor(colorValue, theme) {
     `Invalid color value: "${colorValue}". Must be a hex color with # prefix (e.g., "#000000") or a valid theme color name.`
   );
 }
+function chartPaletteValues(theme) {
+  const explicit = theme.palette?.chart;
+  if (explicit) return [...explicit];
+  const colors = getThemeColors(theme);
+  return DEFAULT_CHART_THEME_COLORS.flatMap((token) => {
+    const value = colors[token];
+    return typeof value === "string" && value.length > 0 ? [value] : [];
+  });
+}
 var init_colorUtils = __esm({
   "src/styles/utils/colorUtils.ts"() {
     "use strict";
@@ -990,6 +1011,8 @@ function resolveFontProperties(theme, fontRef) {
     size: fontDef.size,
     color: fontDef.color,
     bold: fontDef.bold,
+    fontWeight: fontDef.fontWeight,
+    case: fontDef.case,
     italic: fontDef.italic,
     underline: fontDef.underline,
     alignment: fontDef.alignment,
@@ -2072,6 +2095,9 @@ function runOptions(formatting) {
     options.underline = formatting.underline ? { type: formatting.underline.type } : void 0;
   }
   if (formatting.strike !== void 0) options.strike = formatting.strike;
+  if (formatting.allCaps !== void 0) options.allCaps = formatting.allCaps;
+  if (formatting.smallCaps !== void 0)
+    options.smallCaps = formatting.smallCaps;
   if (formatting.scalePercent !== void 0) {
     options.scale = formatting.scalePercent;
   }
@@ -2762,6 +2788,44 @@ var init_styles2 = __esm({
   }
 });
 
+// src/utils/normalizeTextCase.ts
+function normalizeTextCase(zip) {
+  let changed = false;
+  for (const entry of zip.getEntries()) {
+    if (!WORD_XML.test(entry.entryName)) continue;
+    const xml = entry.getData().toString("utf8");
+    if (!ANY_CASE_FLAG.test(xml)) continue;
+    const normalized = xml.replace(RUN_PROPERTIES, completeCaseFlags);
+    if (normalized === xml) continue;
+    zip.updateFile(entry, Buffer.from(normalized, "utf8"));
+    changed = true;
+  }
+  return changed;
+}
+function completeCaseFlags(runProperties3) {
+  const flag = CASE_FLAG.exec(runProperties3);
+  if (!flag) return runProperties3;
+  const isCaps = flag[1] === "caps";
+  const opposite = `<w:${isCaps ? "smallCaps" : "caps"} w:val="false"/>`;
+  if (runProperties3.includes(`<w:${isCaps ? "smallCaps" : "caps"}`)) {
+    return runProperties3;
+  }
+  return runProperties3.replace(
+    flag[0],
+    isCaps ? `${flag[0]}${opposite}` : `${opposite}${flag[0]}`
+  );
+}
+var WORD_XML, ANY_CASE_FLAG, RUN_PROPERTIES, CASE_FLAG;
+var init_normalizeTextCase = __esm({
+  "src/utils/normalizeTextCase.ts"() {
+    "use strict";
+    WORD_XML = /^word\/.*\.xml$/;
+    ANY_CASE_FLAG = /<w:(?:caps|smallCaps)\b/;
+    RUN_PROPERTIES = /<w:rPr\b[^>]*>[\s\S]*?<\/w:rPr>/g;
+    CASE_FLAG = /<w:(caps|smallCaps)\b[^>]*(?:\/>|>[\s\S]*?<\/w:\1>)/;
+  }
+});
+
 // src/utils/packageDocument.ts
 import AdmZip from "adm-zip";
 function resolveGenerationDate(options) {
@@ -2830,6 +2894,7 @@ function canonicalizeRelationshipIds(zip) {
 }
 function canonicalizeDocxBuffer(buffer, generatedAt = DEFAULT_GENERATION_DATE) {
   const zip = new AdmZip(buffer);
+  normalizeTextCase(zip);
   canonicalizeRelationshipIds(zip);
   const isoTimestamp = generatedAt.toISOString();
   const coreProperties3 = zip.getEntry("docProps/core.xml");
@@ -2846,10 +2911,15 @@ function canonicalizeDocxBuffer(buffer, generatedAt = DEFAULT_GENERATION_DATE) {
   }
   return zip.toBuffer();
 }
+function normalizeDocxCaseBuffer(buffer) {
+  const zip = new AdmZip(buffer);
+  return normalizeTextCase(zip) ? zip.toBuffer() : buffer;
+}
 var DEFAULT_GENERATION_DATE, STABLE_RELATIONSHIP_ID;
 var init_packageDocument = __esm({
   "src/utils/packageDocument.ts"() {
     "use strict";
+    init_normalizeTextCase();
     DEFAULT_GENERATION_DATE = /* @__PURE__ */ new Date("2000-01-01T00:00:00.000Z");
     STABLE_RELATIONSHIP_ID = /^rId\d+$/;
   }
@@ -2908,7 +2978,8 @@ function createDocxJsRenderer() {
       const document = buildDocument(ir, resources);
       const packed = await Packer.toBuffer(document);
       const fixed = fixFloatingImageIdsInBuffer(packed);
-      if (renderOptions?.deterministic === false) return new Uint8Array(fixed);
+      if (renderOptions?.deterministic === false)
+        return new Uint8Array(normalizeDocxCaseBuffer(fixed));
       return new Uint8Array(
         canonicalizeDocxBuffer(
           fixed,
@@ -4187,7 +4258,8 @@ async function createOfficeOpenDocxRenderer() {
         spliceChartParts(zip, charts);
         raw = zip.toBuffer();
       }
-      if (options?.deterministic === false) return new Uint8Array(raw);
+      if (options?.deterministic === false)
+        return new Uint8Array(normalizeDocxCaseBuffer(raw));
       return new Uint8Array(
         canonicalizeDocxBuffer(
           raw,
@@ -5045,7 +5117,6 @@ import {
 
 // src/components/highcharts.ts
 init_colorUtils();
-import { DEFAULT_CHART_THEME_COLORS } from "@json-to-office/shared";
 var DEFAULT_EXPORT_SERVER_URL = "http://localhost:7801";
 async function generateChart(config, servicesConfig) {
   if (!isNodeEnvironment()) {
@@ -5099,11 +5170,10 @@ function toChartColor(value, theme) {
 function withThemeColors(config, theme) {
   const options = config.options;
   if (!options || options.colors || !theme?.colors) return config;
-  const themeColors = theme.colors;
-  const palette = DEFAULT_CHART_THEME_COLORS.map((token) => {
-    const value = themeColors[token];
-    return typeof value === "string" && value.length > 0 ? toChartColor(value, theme) : void 0;
-  }).filter((c) => c !== void 0);
+  const palette = chartPaletteValues(theme).flatMap((value) => {
+    const color = toChartColor(value, theme);
+    return color ? [color] : [];
+  });
   if (palette.length === 0) return config;
   return {
     ...config,
@@ -5349,10 +5419,7 @@ init_colorUtils();
 import {
   FeatureRequirementCollector
 } from "@json-to-office/shared/rendering";
-import {
-  synthesizeFamilyName,
-  DEFAULT_CHART_THEME_COLORS as DEFAULT_CHART_THEME_COLORS2
-} from "@json-to-office/shared";
+import { capsFormatting as capsFormatting2, synthesizeFamilyName as synthesizeFamilyName2 } from "@json-to-office/shared";
 import {
   isNativeVisualProps as isNativeVisualProps4
 } from "@json-to-office/shared-docx";
@@ -5868,6 +5935,7 @@ function resolveColors(entries, at, deps) {
 init_themes();
 init_colorUtils();
 init_styleHelpers();
+import { capsFormatting, synthesizeFamilyName } from "@json-to-office/shared";
 var RIGHT_MARGIN_TAB_TWIPS = 9026 * 2;
 var STATISTIC_NUMBER_STYLE_ID = "StatisticNumber";
 var STATISTIC_DESCRIPTION_STYLE_ID = "StatisticDescription";
@@ -5876,25 +5944,8 @@ var STATISTIC_SIZE_POINTS = {
   medium: 28,
   large: 40
 };
-function isValidStyleName(name) {
-  return [
-    "normal",
-    "heading1",
-    "heading2",
-    "heading3",
-    "heading4",
-    "heading5",
-    "heading6",
-    "title",
-    "subtitle"
-  ].includes(name);
-}
 function getStyleSafe(theme, styleName) {
-  if (!isValidStyleName(styleName)) {
-    console.warn(`Invalid style name: ${styleName}`);
-    return void 0;
-  }
-  return theme.styles?.[styleName];
+  return theme.styles && Object.hasOwn(theme.styles, styleName) ? theme.styles[styleName] : void 0;
 }
 function resolveStyleWithBaseStyle(theme, styleName, visited = /* @__PURE__ */ new Set()) {
   if (visited.has(styleName)) {
@@ -5951,9 +6002,17 @@ function resolveSpacing(spacing) {
     ...spacing?.after ? { afterTwips: pointsToTwips(spacing.after) } : {}
   };
 }
+function weightedFamily(props) {
+  return props.fontWeight === void 0 ? void 0 : synthesizeFamilyName(
+    props.family || "Arial",
+    props.fontWeight,
+    props.italic === true
+  );
+}
 function convertRunProperties(merged, theme, defaultColor, defaultSize) {
+  const weighted = weightedFamily(merged);
   return {
-    fontFamily: merged.family || "Arial",
+    fontFamily: weighted?.family ?? merged.family ?? "Arial",
     sizeHalfPoints: (merged.size || defaultSize || 11) * 2,
     color: {
       hex: resolveColor(
@@ -5963,6 +6022,8 @@ function convertRunProperties(merged, theme, defaultColor, defaultSize) {
     },
     ...merged.bold !== void 0 && { bold: merged.bold },
     ...merged.italic !== void 0 && { italic: merged.italic },
+    ...weighted && { bold: weighted.bold, italic: weighted.italic },
+    ...merged.case !== void 0 && capsFormatting(merged.case),
     ...merged.underline !== void 0 && merged.underline && { underline: { type: "single" } },
     ...merged.characterSpacing && {
       characterSpacingTwentieths: merged.characterSpacing.type === "condensed" ? -merged.characterSpacing.value : merged.characterSpacing.value
@@ -6035,12 +6096,15 @@ function convertBorders(borders3, theme) {
   return Object.keys(converted).length > 0 ? converted : void 0;
 }
 function fallbackRun(fontProps, theme, defaultColor, defaultSize) {
+  const weighted = weightedFamily(fontProps);
   return {
-    fontFamily: fontProps.family || "Arial",
+    fontFamily: weighted?.family ?? fontProps.family ?? "Arial",
     sizeHalfPoints: (fontProps.size || defaultSize) * 2,
     color: { hex: resolveColor(fontProps.color || defaultColor, theme) },
     ...fontProps.bold !== void 0 && { bold: fontProps.bold },
     ...fontProps.italic !== void 0 && { italic: fontProps.italic },
+    ...weighted && { bold: weighted.bold, italic: weighted.italic },
+    ...fontProps.case !== void 0 && capsFormatting(fontProps.case),
     ...fontProps.underline !== void 0 && fontProps.underline && { underline: { type: "single" } }
   };
 }
@@ -6070,6 +6134,8 @@ function createDocumentStyles(themeNameOrObject = "minimal", language) {
           size: normalStyle?.size,
           color: normalStyle?.color,
           bold: normalStyle?.bold,
+          fontWeight: normalStyle?.fontWeight,
+          case: normalStyle?.case,
           italic: normalStyle?.italic,
           underline: normalStyle?.underline,
           characterSpacing: normalStyle?.characterSpacing,
@@ -6109,6 +6175,8 @@ function createDocumentStyles(themeNameOrObject = "minimal", language) {
             size: headingStyle.size,
             color: headingStyle.color,
             bold: headingStyle.bold,
+            fontWeight: headingStyle.fontWeight,
+            case: headingStyle.case,
             italic: headingStyle.italic,
             underline: headingStyle.underline,
             characterSpacing: headingStyle.characterSpacing,
@@ -6169,6 +6237,8 @@ function createDocumentStyles(themeNameOrObject = "minimal", language) {
             size: headingStyle.size,
             color: headingStyle.color,
             bold: headingStyle.bold,
+            fontWeight: headingStyle.fontWeight,
+            case: headingStyle.case,
             italic: headingStyle.italic,
             underline: headingStyle.underline,
             characterSpacing: headingStyle.characterSpacing,
@@ -6230,6 +6300,8 @@ function createDocumentStyles(themeNameOrObject = "minimal", language) {
           size: titleStyle.size,
           color: titleStyle.color,
           bold: titleStyle.bold,
+          fontWeight: titleStyle.fontWeight,
+          case: titleStyle.case,
           italic: titleStyle.italic,
           underline: titleStyle.underline,
           characterSpacing: titleStyle.characterSpacing,
@@ -6285,6 +6357,8 @@ function createDocumentStyles(themeNameOrObject = "minimal", language) {
           size: subtitleStyle.size,
           color: subtitleStyle.color,
           bold: subtitleStyle.bold,
+          fontWeight: subtitleStyle.fontWeight,
+          case: subtitleStyle.case,
           italic: subtitleStyle.italic,
           underline: subtitleStyle.underline,
           characterSpacing: subtitleStyle.characterSpacing,
@@ -6407,6 +6481,8 @@ function createDocumentStyles(themeNameOrObject = "minimal", language) {
             size: customStyle.size,
             color: customStyle.color,
             bold: customStyle.bold,
+            fontWeight: customStyle.fontWeight,
+            case: customStyle.case,
             italic: customStyle.italic,
             underline: customStyle.underline,
             characterSpacing: customStyle.characterSpacing,
@@ -8282,6 +8358,7 @@ function compileChromeParagraph(component, scope) {
       italic: font.italic ?? false,
       ...font.underline !== void 0 ? { underline: font.underline } : {},
       ...font.fontWeight !== void 0 ? { fontWeight: font.fontWeight } : {},
+      ...font.case !== void 0 ? { case: font.case } : {},
       ...font.lineSpacing !== void 0 ? { lineSpacing: font.lineSpacing } : {}
     }
   };
@@ -9585,7 +9662,11 @@ function isoDateTime(date) {
 }
 function runFormatting3(font, props, ctx) {
   const hasWeightRequest = font.fontWeight != null || font.bold === true;
-  const effectiveFamily = font.family ?? (hasWeightRequest ? resolveBodyFamily(ctx.theme) : void 0);
+  const roleName = props.themeStyle;
+  const role = roleName ? ctx.theme.typography?.roles?.[roleName] : void 0;
+  const roleStyles = ctx.theme.styles;
+  const roleFamily = role && roleName ? resolveFontFamily(ctx.theme, roleStyles?.[roleName]?.font ?? role.face) : void 0;
+  const effectiveFamily = font.family ?? (hasWeightRequest ? roleFamily ?? resolveBodyFamily(ctx.theme) : void 0);
   const weighted = applyFontWeightAlias({
     fontFamily: effectiveFamily,
     bold: font.bold,
@@ -9593,7 +9674,7 @@ function runFormatting3(font, props, ctx) {
     fontWeight: font.fontWeight
   });
   const formatting = {};
-  if (font.family || weighted.font && weighted.font !== effectiveFamily) {
+  if (font.family || hasWeightRequest && roleFamily || weighted.font && weighted.font !== effectiveFamily) {
     formatting.fontFamily = weighted.font;
   }
   if (font.size) formatting.sizeHalfPoints = pointsToHalfPoints(font.size);
@@ -9605,6 +9686,8 @@ function runFormatting3(font, props, ctx) {
     formatting.underline = font.underline ? { type: "single" } : void 0;
   }
   if (font.scale) formatting.scalePercent = font.scale;
+  if (font.case !== void 0)
+    Object.assign(formatting, capsFormatting2(font.case));
   if (font.characterSpacing) {
     const { type, value } = font.characterSpacing;
     formatting.characterSpacingTwentieths = type === "condensed" ? -value : value;
@@ -9618,7 +9701,7 @@ function applyFontWeightAlias(opts) {
     return { bold: opts.bold, italic: opts.italic };
   }
   const weight = opts.fontWeight ?? (opts.bold === true ? 700 : void 0);
-  const synth = synthesizeFamilyName(
+  const synth = synthesizeFamilyName2(
     opts.fontFamily,
     weight,
     opts.italic === true
@@ -9957,15 +10040,13 @@ function compileChart(component, scope) {
   }
   const colors = Array.isArray(props.chartColors) ? props.chartColors.map(
     (color) => resolveColor(String(color), ctx.theme)
-  ) : DEFAULT_CHART_THEME_COLORS2.map((token) => {
-    const value = ctx.theme?.colors?.[token];
-    if (typeof value !== "string" || value.length === 0) return void 0;
+  ) : chartPaletteValues(ctx.theme).flatMap((value) => {
     try {
-      return resolveColor(token, ctx.theme);
+      return [resolveColor(value, ctx.theme)];
     } catch {
-      return void 0;
+      return [];
     }
-  }).filter((color) => color !== void 0);
+  });
   const page = getPageSetup(ctx.theme);
   const contentWidthInches = (page.size.width - page.margin.left - page.margin.right) / 1440;
   const widthInches = typeof props.width === "number" ? props.width : contentWidthInches;
@@ -11310,6 +11391,7 @@ import {
   normalizeHighchartsChart
 } from "@json-to-office/quality";
 import { DEFAULT_DOCX_RENDERER_ID as DEFAULT_DOCX_RENDERER_ID2 } from "@json-to-office/shared-docx";
+import { designColors as designColors2, resolveDesignColor as resolveDesignColor2 } from "@json-to-office/shared";
 
 // src/core/generationContext.ts
 import { applyExportMode } from "@json-to-office/shared";
@@ -11333,6 +11415,7 @@ function resolveBuiltInTheme(themeName, options = {}) {
 }
 
 // src/themes/overrides.ts
+import { mergeWithDefaults as mergeWithDefaults3 } from "@json-to-office/shared";
 function applyThemeOverrides(theme, overrides) {
   if (!overrides) return theme;
   const fonts = { ...theme.fonts };
@@ -11346,12 +11429,87 @@ function applyThemeOverrides(theme, overrides) {
   }
   return {
     ...theme,
+    ...Object.fromEntries(
+      ["palette", "typography", "spacing", "chrome", "motif"].flatMap(
+        (name) => {
+          const key = name;
+          return overrides[key] === void 0 ? [] : [[key, mergeWithDefaults3(overrides[key], theme[key] ?? {})]];
+        }
+      )
+    ),
     colors: { ...theme.colors, ...overrides.colors ?? {} },
     fonts,
     ...Object.keys(styles).length > 0 && { styles }
   };
 }
 
+// src/themes/design-system.ts
+init_defaults();
+import {
+  designCanvas,
+  resolveTypeRoles,
+  validateDesignColors
+} from "@json-to-office/shared";
+function resolveDocxDesignSystem(theme) {
+  validateDesignColors(theme, getThemeColors(theme));
+  if (!theme.typography && !theme.spacing) return theme;
+  const canvas = designCanvas("docx", theme.page.size);
+  const roles = resolveTypeRoles(theme, canvas, theme.fonts.body.size ?? 11);
+  const styles = { ...theme.styles };
+  for (const [name, role] of Object.entries(roles)) {
+    const spacing = {
+      ...role.spaceBefore !== void 0 && { before: role.spaceBefore },
+      ...role.spaceAfter !== void 0 && { after: role.spaceAfter }
+    };
+    styles[name] = {
+      font: role.face ?? "body",
+      size: role.size,
+      ...role.weight !== void 0 && { fontWeight: role.weight },
+      ...role.color !== void 0 && { color: role.color },
+      ...role.case !== void 0 && { case: role.case },
+      ...role.lineHeight !== void 0 && {
+        lineSpacing: { type: "multiple", value: role.lineHeight }
+      },
+      ...role.tracking !== void 0 && {
+        characterSpacing: {
+          type: role.tracking < 0 ? "condensed" : "expanded",
+          value: Math.abs(role.tracking) * role.size / 5
+        }
+      },
+      ...Object.keys(spacing).length && { spacing },
+      ...styles[name]
+    };
+  }
+  const gap = theme.spacing?.blockGap?.normal ?? theme.spacing?.basePt;
+  const scale = theme.typography?.scale?.[canvas];
+  if (scale || gap !== void 0) {
+    styles.normal = {
+      ...scale && { size: scale.base },
+      ...gap !== void 0 && { spacing: { after: gap } },
+      ...styles.normal
+    };
+  }
+  const space = theme.spacing?.canvas?.[canvas];
+  const safe = space?.safeAreaIn;
+  return {
+    ...theme,
+    styles,
+    page: {
+      ...theme.page,
+      margins: {
+        ...theme.page.margins,
+        ...safe !== void 0 && {
+          top: safe * 1440,
+          bottom: safe * 1440,
+          left: safe * 1440,
+          right: safe * 1440
+        },
+        ...space?.gutterIn !== void 0 && { gutter: space.gutterIn * 1440 }
+      }
+    }
+  };
+}
+
 // src/core/generationContext.ts
 function defaultNamedThemeLookup(themeName, customThemes, warnings) {
   if (customThemes) {
@@ -11384,6 +11542,7 @@ function resolveThemeContext(documentIn, options = {}) {
   if (themeOverrides) {
     theme = applyThemeOverrides(theme, themeOverrides);
   }
+  theme = resolveDocxDesignSystem(theme);
   const mode = applyExportMode({ doc: document, theme, fonts });
   for (const w of mode.warnings) {
     if (warnings) {
@@ -11934,16 +12093,27 @@ function prepareDocxQualityDocument(document, options = {}) {
     };
   };
   const paletteHexes = {};
-  for (const [token, value] of Object.entries(
-    resolved.theme.colors ?? {}
-  )) {
+  const visualColors = designColors2(
+    resolved.theme.colors,
+    resolved.theme.palette
+  );
+  const entries = {
+    ...visualColors,
+    ...Object.fromEntries(
+      (resolved.theme.palette?.chart ?? []).map((value) => {
+        const hex = resolveDesignColor2(value, visualColors);
+        return [hex ? `#${hex}` : value, value];
+      })
+    )
+  };
+  for (const [token, value] of Object.entries(entries)) {
     if (typeof value !== "string") continue;
-    const hex = normalizeHex(value);
+    const hex = normalizeHex(resolveDesignColor2(value, visualColors) ?? value);
     if (hex) paletteHexes[token] = hex;
   }
-  const paletteTokens = SERIES_COLOR_TOKENS.filter(
-    (token) => paletteHexes[token] !== void 0
-  );
+  const paletteTokens = resolved.theme.palette?.chart?.map(
+    (value) => `#${resolveDesignColor2(value, visualColors)}`
+  ) ?? SERIES_COLOR_TOKENS.filter((token) => paletteHexes[token] !== void 0);
   const authoredPropsAt = (pointer) => asRecord(asRecord(nodeAtPointer(context.document, pointer))?.props);
   addFact({
     id: "docx:theme",