@gooddata/sdk-ui-theme-provider 11.63.0-alpha.1 → 11.63.0-alpha.2

package/esm/cssProperties.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cssProperties.d.ts","sourceRoot":"","sources":["../src/cssProperties.ts"],"names":[],"mappings":"AAIA,OAAO,EACH,KAAK,MAAM,EAGX,KAAK,aAAa,EAErB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,kBAAkB,CAAC;AAsEpE,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMjD;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,EAAE,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;CACpG,CAAC;AAsBF;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAEzD;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAK7D;AAyGD;;GAEG;AACH,wBAAgB,yBAAyB,CACrC,MAAM,EAAE,MAAM,EACd,eAAe,GAAE,cAAc,EAAO,EACtC,UAAU,SAAS,EACnB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,WAAW,EACrB,OAAO,CAAC,EAAE,MAAM,GACjB,WAAW,EAAE,CA2Bf;AAeD,eAAO,MAAM,mBAAmB,YAAa,aAAa,eAAe,OAAO,KAAG,WAAW,EAa7F,CAAC;AAEF,eAAO,MAAM,kBAAkB,cAAe,OAAO,YAAY,WAAW,YAAY,MAAM,KAAG,IAyBhG,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAC5B,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,OAAO,EACpB,QAAQ,GAAE,OAAe,EACzB,OAAO,CAAC,EAAE,WAAW,EACrB,OAAO,CAAC,EAAE,MAAM,GACjB,IAAI,CA0DN"}
+{"version":3,"file":"cssProperties.d.ts","sourceRoot":"","sources":["../src/cssProperties.ts"],"names":[],"mappings":"AAIA,OAAO,EACH,KAAK,MAAM,EAGX,KAAK,aAAa,EAErB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,kBAAkB,CAAC;AAuEpE,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMjD;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,EAAE,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;CACpG,CAAC;AAsBF;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAEzD;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAK7D;AA0GD;;GAEG;AACH,wBAAgB,yBAAyB,CACrC,MAAM,EAAE,MAAM,EACd,eAAe,GAAE,cAAc,EAAO,EACtC,UAAU,SAAS,EACnB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,WAAW,EACrB,OAAO,CAAC,EAAE,MAAM,GACjB,WAAW,EAAE,CA2Bf;AAeD,eAAO,MAAM,mBAAmB,YAAa,aAAa,eAAe,OAAO,KAAG,WAAW,EAa7F,CAAC;AAEF,eAAO,MAAM,kBAAkB,cAAe,OAAO,YAAY,WAAW,YAAY,MAAM,KAAG,IAyBhG,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAC5B,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,OAAO,EACpB,QAAQ,GAAE,OAAe,EACzB,OAAO,CAAC,EAAE,WAAW,EACrB,OAAO,CAAC,EAAE,MAAM,GACjB,IAAI,CA0DN"}

package/esm/cssProperties.js

@@ -2,6 +2,7 @@
 import { transparentize } from "polished";
 import { getCssProperty } from "./cssProperty.js";
 import { generateDerivedColors } from "./derivedColors.js";
+import { documentsThemeCssValues } from "./documentsTheme.js";
 import { themeDefinedCssVariables } from "./variablesSpec/allThemeCssVariables.js";
 import { inconsistentVariables } from "./variablesSpec/inconsistent/inconsistent.js";
 // keep it in sync with SCSS:$gd-color-text-light
@@ -179,6 +180,7 @@ const customParserFunctions = [
     { key: "--gd-reports-textStyle-typography-fonts", fn: () => "" },
     // Inline colors become indexed variables; a palette reference is resolved by the application.
     { key: "--gd-reports-visualizationPalette", fn: (value) => (Array.isArray(value) ? value : "") },
+    { key: "--gd-documents", fn: documentsThemeCssValues },
     ...reportLengthParserFunctions,
 ];
 /**

package/esm/documentsTheme.d.ts

@@ -0,0 +1,14 @@
+import { type ITheme } from "@gooddata/sdk-model";
+/**
+ * The theme's documents section as the values of its CSS variables.
+ *
+ * @internal
+ */
+export declare function documentsThemeCssValues(documents: unknown): object | "";
+/**
+ * The paths in the documents section where a length is written with a unit, which documents ignore.
+ *
+ * @internal
+ */
+export declare function findDocumentLengthsWithUnits(theme: ITheme | undefined): string[];
+//# sourceMappingURL=documentsTheme.d.ts.map

package/esm/documentsTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"documentsTheme.d.ts","sourceRoot":"","sources":["../src/documentsTheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,MAAM,EAAoC,MAAM,qBAAqB,CAAC;AAoJpF;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM,GAAG,EAAE,CA6BvE;AAED;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,EAAE,CAmBhF"}

package/esm/documentsTheme.js

@@ -0,0 +1,180 @@
+// (C) 2026 GoodData Corporation
+import { getPublisherThemeReferencePathV2 } from "@gooddata/sdk-model";
+// Document lengths are px on the page canvas, emitted bare for the renderer to scale. A value that
+// starts like a number without being one carries a unit, which documents do not accept.
+const NUMBER = /^[+-]?(\d+(\.\d+)?|\.\d+)$/;
+const NUMBER_START = /^[+-]?\.?\d/;
+// Keys and color ids become parts of variable names; the grammar is the v2 validator's theme name.
+const NAME = /^[A-Za-z0-9_-]+$/;
+// Only values of these shapes are emitted: anything else could end the declaration, or the rule holding
+// every theme variable. Theme references and font families are checked on their own.
+const HEX_COLOR = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+const RGB_COLOR = /^rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(?:,\s*(?:\d+(?:\.\d+)?|\.\d+)\s*)?\)$/;
+const KEYWORD = /^[a-zA-Z][a-zA-Z0-9-]*$/;
+const PLAIN_VALUES = [NUMBER, HEX_COLOR, RGB_COLOR, KEYWORD];
+// A quoted name holds no backslash or line break, so each quote closes where it appears to.
+const FONT_FAMILY_NAME = String.raw `(?:"[^"\\\n\r\f]*"|'[^'\\\n\r\f]*'|[\p{L}\p{N}_ -]+)`;
+const FONT_FAMILY = new RegExp(String.raw `^${FONT_FAMILY_NAME}(?:\s*,\s*${FONT_FAMILY_NAME})*$`, "u");
+const COLOR_LISTS = ["backgrounds", "texts", "lines"];
+// The renderer resolves these even when the theme leaves them out.
+const BUILT_IN_COLOR_IDS = {
+    backgrounds: ["default", "surface", "inverse", "accent"],
+    texts: ["default", "muted", "inverse", "accent"],
+    lines: ["default", "accent"],
+};
+const PALETTE_NAMES = ["primary", "success", "error", "warning"];
+const SPACING_KINDS = ["gap", "padding"];
+const SPACING_STEPS = ["compact", "normal", "spacious"];
+// `full` is built in: the renderer resolves it and the theme never sets it.
+const CORNER_STEPS = ["small", "medium", "large", "full"];
+// Images are resolved by the application from the theme object, like the font files.
+const IMAGE_KEYS = ["backgroundImage"];
+// Never lengths: ids, palette references and font faces would only raise false warnings.
+const NOT_LENGTH_KEYS = ["id", "visualizationPalette", "fonts", ...IMAGE_KEYS];
+function isObject(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isColorList(value) {
+    return COLOR_LISTS.includes(value);
+}
+function isLengthWithUnit(value) {
+    return NUMBER_START.test(value) && !NUMBER.test(value);
+}
+function themeColorIds(documents, list) {
+    const colors = isObject(documents["colors"]) ? documents["colors"][list] : undefined;
+    if (!Array.isArray(colors)) {
+        return [];
+    }
+    return colors.flatMap((entry) => isObject(entry) && typeof entry["id"] === "string" && NAME.test(entry["id"]) ? [entry["id"]] : []);
+}
+// A reference becomes the variable of the value it names, and only when that variable exists.
+function themeReferenceCss(value, documents) {
+    const [group, name, step, ...rest] = getPublisherThemeReferencePathV2(value) ?? [];
+    if (rest.length > 0 || name === undefined) {
+        return "";
+    }
+    if (group === "palette" && step === undefined && PALETTE_NAMES.includes(name)) {
+        return `var(--gd-palette-${name}-base)`;
+    }
+    if (group === "colors" &&
+        isColorList(name) &&
+        step !== undefined &&
+        (BUILT_IN_COLOR_IDS[name].includes(step) || themeColorIds(documents, name).includes(step))) {
+        return `var(--gd-documents-colors-${name}-${step})`;
+    }
+    if (group === "spacing" &&
+        SPACING_KINDS.includes(name) &&
+        step !== undefined &&
+        SPACING_STEPS.includes(step)) {
+        return `var(--gd-documents-spacing-${name}-${step})`;
+    }
+    if (group === "corners" && step === undefined && CORNER_STEPS.includes(name)) {
+        return `var(--gd-documents-corners-${name})`;
+    }
+    return "";
+}
+function cssValue(value, documents) {
+    if (typeof value === "number") {
+        return Number.isFinite(value) ? `${value}` : "";
+    }
+    if (typeof value !== "string") {
+        return "";
+    }
+    const trimmed = value.trim();
+    if (trimmed.startsWith("{")) {
+        return themeReferenceCss(trimmed, documents);
+    }
+    return PLAIN_VALUES.some((pattern) => pattern.test(trimmed)) ? trimmed : "";
+}
+function fontFamilyCss(value) {
+    if (typeof value !== "string") {
+        return "";
+    }
+    const trimmed = value.trim();
+    return FONT_FAMILY.test(trimmed) ? trimmed : "";
+}
+function cssValues(value, documents) {
+    if (!isObject(value)) {
+        return cssValue(value, documents);
+    }
+    return Object.fromEntries(Object.entries(value)
+        .filter(([key]) => NAME.test(key) && !IMAGE_KEYS.includes(key))
+        .map(([key, item]) => [key, cssValues(item, documents)]));
+}
+// Content refers to a color by its id, so each list is emitted by id; the first entry of an id wins.
+function colorsById(list, documents) {
+    const byId = {};
+    if (!Array.isArray(list)) {
+        return byId;
+    }
+    for (const entry of list) {
+        if (!isObject(entry)) {
+            continue;
+        }
+        const id = entry["id"];
+        if (typeof id === "string" && NAME.test(id) && !Object.prototype.hasOwnProperty.call(byId, id)) {
+            byId[id] = cssValue(entry["color"], documents);
+        }
+    }
+    return byId;
+}
+/**
+ * The theme's documents section as the values of its CSS variables.
+ *
+ * @internal
+ */
+export function documentsThemeCssValues(documents) {
+    if (!isObject(documents)) {
+        return "";
+    }
+    const { colors, textStyle, ...rest } = documents;
+    const { typography, ...textLevels } = isObject(textStyle) ? textStyle : {};
+    const palette = isObject(colors) ? colors["visualizationPalette"] : undefined;
+    return {
+        ...cssValues(rest, documents),
+        colors: {
+            ...Object.fromEntries(COLOR_LISTS.map((list) => [
+                list,
+                colorsById(isObject(colors) ? colors[list] : undefined, documents),
+            ])),
+            // Inline colors become indexed variables; a palette reference is resolved by the application.
+            visualizationPalette: Array.isArray(palette)
+                ? palette.map((color) => cssValue(color, documents))
+                : "",
+        },
+        textStyle: {
+            ...cssValues(textLevels, documents),
+            // Font files are registered by the application.
+            typography: {
+                fontFamily: isObject(typography) ? fontFamilyCss(typography["fontFamily"]) : "",
+            },
+        },
+    };
+}
+/**
+ * The paths in the documents section where a length is written with a unit, which documents ignore.
+ *
+ * @internal
+ */
+export function findDocumentLengthsWithUnits(theme) {
+    const paths = [];
+    const visit = (value, path) => {
+        if (typeof value === "string") {
+            if (isLengthWithUnit(value.trim())) {
+                paths.push(path);
+            }
+        }
+        else if (Array.isArray(value)) {
+            value.forEach((item, index) => visit(item, `${path}.${index}`));
+        }
+        else if (isObject(value)) {
+            for (const [key, item] of Object.entries(value)) {
+                if (!NOT_LENGTH_KEYS.includes(key)) {
+                    visit(item, `${path}.${key}`);
+                }
+            }
+        }
+    };
+    visit(theme?.documents, "documents");
+    return paths;
+}

package/esm/index.d.ts

@@ -15,4 +15,5 @@ export { ConditionalScopedThemeProvider } from "./ThemeProvider/ConditionalScope
 export { isDarkTheme } from "./ThemeProvider/isDarkTheme.js";
 export { withTheme, useTheme, useReferenceTheme, useThemeIsLoading, useIsScopeThemed, useThemeStatus, useIsDarkTheme, ThemeContextProvider, type IThemeContextProviderProps, type ThemeStatus, } from "./ThemeProvider/Context.js";
 export { isValidThemeColor, findInvalidThemeColors, findMissingRequiredThemeColors, type IInvalidThemeColor, } from "./colorValidation.js";
+export { findDocumentLengthsWithUnits } from "./documentsTheme.js";
 //# sourceMappingURL=index.d.ts.map

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AACH,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EACH,aAAa,EACb,KAAK,mBAAmB,EACxB,KAAK,aAAa,GACrB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,KAAK,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AAC7G,OAAO,EAAE,8BAA8B,EAAE,MAAM,mDAAmD,CAAC;AACnG,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EACH,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,KAAK,0BAA0B,EAC/B,KAAK,WAAW,GACnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACH,iBAAiB,EACjB,sBAAsB,EACtB,8BAA8B,EAC9B,KAAK,kBAAkB,GAC1B,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AACH,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EACH,aAAa,EACb,KAAK,mBAAmB,EACxB,KAAK,aAAa,GACrB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,KAAK,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AAC7G,OAAO,EAAE,8BAA8B,EAAE,MAAM,mDAAmD,CAAC;AACnG,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EACH,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,KAAK,0BAA0B,EAC/B,KAAK,WAAW,GACnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACH,iBAAiB,EACjB,sBAAsB,EACtB,8BAA8B,EAC9B,KAAK,kBAAkB,GAC1B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,4BAA4B,EAAE,MAAM,qBAAqB,CAAC"}

package/esm/index.js

@@ -17,3 +17,4 @@ export { ConditionalScopedThemeProvider } from "./ThemeProvider/ConditionalScope
 export { isDarkTheme } from "./ThemeProvider/isDarkTheme.js";
 export { withTheme, useTheme, useReferenceTheme, useThemeIsLoading, useIsScopeThemed, useThemeStatus, useIsDarkTheme, ThemeContextProvider, } from "./ThemeProvider/Context.js";
 export { isValidThemeColor, findInvalidThemeColors, findMissingRequiredThemeColors, } from "./colorValidation.js";
+export { findDocumentLengthsWithUnits } from "./documentsTheme.js";

package/esm/sdk-ui-theme-provider.d.ts

@@ -37,6 +37,13 @@ export declare function ConditionalScopedThemeProvider({ children }: {
  */
 export declare const defaultHeaderTheme: IThemeHeader;
 
+/**
+ * The paths in the documents section where a length is written with a unit, which documents ignore.
+ *
+ * @internal
+ */
+export declare function findDocumentLengthsWithUnits(theme: ITheme | undefined): string[];
+
 /**
  * Walks the theme palette and returns the colors that cannot be parsed, each with its location.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-theme-provider",
-  "version": "11.63.0-alpha.1",
+  "version": "11.63.0-alpha.2",
   "description": "GoodData SDK - Theme provider",
   "license": "MIT",
   "author": "GoodData Corporation",
@@ -32,10 +32,10 @@
     "postcss-value-parser": "4.2.0",
     "ts-invariant": "0.10.3",
     "tslib": "2.8.1",
-    "@gooddata/sdk-backend-spi": "11.63.0-alpha.1",
-    "@gooddata/sdk-model": "11.63.0-alpha.1",
-    "@gooddata/sdk-ui": "11.63.0-alpha.1",
-    "@gooddata/util": "11.63.0-alpha.1"
+    "@gooddata/sdk-backend-spi": "11.63.0-alpha.2",
+    "@gooddata/sdk-model": "11.63.0-alpha.2",
+    "@gooddata/util": "11.63.0-alpha.2",
+    "@gooddata/sdk-ui": "11.63.0-alpha.2"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "7.30.16",
@@ -69,10 +69,10 @@
     "react-dom": "19.1.1",
     "typescript": "7.0.2",
     "vitest": "5.0.4",
-    "@gooddata/eslint-config": "11.63.0-alpha.1",
-    "@gooddata/oxlint-config": "11.63.0-alpha.1",
-    "@gooddata/reference-workspace": "11.63.0-alpha.1",
-    "@gooddata/sdk-backend-mockingbird": "11.63.0-alpha.1"
+    "@gooddata/eslint-config": "11.63.0-alpha.2",
+    "@gooddata/oxlint-config": "11.63.0-alpha.2",
+    "@gooddata/reference-workspace": "11.63.0-alpha.2",
+    "@gooddata/sdk-backend-mockingbird": "11.63.0-alpha.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",