xmlui 0.7.14 → 0.7.15

package/dist/scripts/src/components-core/theming/ThemeProvider.js

@@ -0,0 +1,335 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.builtInThemes = void 0;
+exports.useCompiledTheme = useCompiledTheme;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const abstractions_1 = require("./abstractions");
+const react_1 = require("react");
+const transformThemeVars_1 = require("./transformThemeVars");
+const misc_1 = require("@components-core/utils/misc");
+const hvar_1 = require("@components-core/theming/hvar");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const themeVars_1 = __importStar(require("@components-core/theming/themeVars"));
+const constants_1 = require("@components-core/constants");
+const extendThemeUtils_1 = require("@components-core/theming/extendThemeUtils");
+const ComponentRegistryContext_1 = require("@components/ComponentRegistryContext");
+const xmlui_1 = require("@components-core/theming/themes/xmlui");
+const solid_1 = require("@components-core/theming/themes/solid");
+const hooks_1 = require("@components-core/utils/hooks");
+function useCompiledTheme(activeTheme, activeTone, themes = constants_1.EMPTY_ARRAY, resources = constants_1.EMPTY_OBJECT, resourceMap = constants_1.EMPTY_OBJECT) {
+    const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
+    const { componentThemeVars, componentDefaultThemeVars } = componentRegistry;
+    const themeDefChain = (0, react_1.useMemo)(() => {
+        if (activeTheme) {
+            return (0, extendThemeUtils_1.collectThemeChainByExtends)(activeTheme, themes, componentDefaultThemeVars);
+        }
+        return undefined;
+    }, [activeTheme, componentDefaultThemeVars, themes]);
+    const allResources = (0, react_1.useMemo)(() => {
+        let mergedResources = {};
+        themeDefChain === null || themeDefChain === void 0 ? void 0 : themeDefChain.forEach((theme) => {
+            var _a, _b;
+            mergedResources = Object.assign(Object.assign(Object.assign({}, mergedResources), theme.resources), (_b = (_a = theme.tones) === null || _a === void 0 ? void 0 : _a[activeTone]) === null || _b === void 0 ? void 0 : _b.resources);
+        });
+        return Object.assign(Object.assign({}, resources), mergedResources);
+    }, [themeDefChain, resources, activeTone]);
+    const allFonts = (0, react_1.useMemo)(() => {
+        const ret = [];
+        Object.entries(allResources).forEach(([key, value]) => {
+            if (key.startsWith("font.")) {
+                ret === null || ret === void 0 ? void 0 : ret.push(value);
+            }
+        });
+        return ret;
+    }, [allResources]);
+    const getResourceUrl = (0, react_1.useCallback)((resourceString) => {
+        let resourceUrl = resourceString;
+        if (resourceString === null || resourceString === void 0 ? void 0 : resourceString.startsWith("resource:")) {
+            const resourceName = resourceString === null || resourceString === void 0 ? void 0 : resourceString.replace("resource:", "");
+            resourceUrl = allResources[resourceName];
+        }
+        if (!resourceUrl) {
+            return resourceUrl;
+        }
+        if (resourceMap[resourceUrl]) {
+            return resourceMap[resourceUrl];
+        }
+        if (resourceUrl.startsWith("/") &&
+            resourceMap[resourceUrl.substring(1)]) {
+            return resourceMap[resourceUrl.substring(1)];
+        }
+        return (0, misc_1.normalizePath)(resourceUrl);
+    }, [allResources, resourceMap]);
+    const fontLinks = (0, react_1.useMemo)(() => {
+        return ((allFonts === null || allFonts === void 0 ? void 0 : allFonts.filter((theme) => typeof theme === "string")) ||
+            []);
+    }, [allFonts]);
+    const themeDefChainVars = (0, react_1.useMemo)(() => {
+        var _a, _b, _c;
+        if (!(themeDefChain === null || themeDefChain === void 0 ? void 0 : themeDefChain.length)) {
+            return [];
+        }
+        let mergedThemeVars = {};
+        themeDefChain === null || themeDefChain === void 0 ? void 0 : themeDefChain.forEach((theme) => {
+            var _a, _b, _c;
+            mergedThemeVars = Object.assign(Object.assign(Object.assign(Object.assign({}, mergedThemeVars), theme.themeVars), (_a = theme.themeVars) === null || _a === void 0 ? void 0 : _a[activeTone]), (_c = (_b = theme.tones) === null || _b === void 0 ? void 0 : _b[activeTone]) === null || _c === void 0 ? void 0 : _c.themeVars);
+        });
+        //we put the generated theme vars before the last item in the chain
+        return [
+            ...themeDefChain
+                .map((themeDef) => {
+                var _a, _b, _c;
+                return (Object.assign(Object.assign(Object.assign({}, themeDef.themeVars), (_a = themeDef.themeVars) === null || _a === void 0 ? void 0 : _a[activeTone]), (_c = (_b = themeDef.tones) === null || _b === void 0 ? void 0 : _b[activeTone]) === null || _c === void 0 ? void 0 : _c.themeVars));
+            })
+                .slice(0, themeDefChain.length - 1),
+            Object.assign(Object.assign(Object.assign(Object.assign({}, (0, transformThemeVars_1.generateBaseSpacings)(mergedThemeVars)), (0, transformThemeVars_1.generateBaseFontSizes)(mergedThemeVars)), (0, transformThemeVars_1.generateBaseTones)(mergedThemeVars)), (0, transformThemeVars_1.generateButtonTones)(mergedThemeVars)),
+            Object.assign({}, (0, extendThemeUtils_1.expandTheme)(Object.assign(Object.assign(Object.assign({}, themeDefChain[themeDefChain.length - 1].themeVars), (_a = themeDefChain[themeDefChain.length - 1].themeVars) === null || _a === void 0 ? void 0 : _a[activeTone]), (_c = (_b = themeDefChain[themeDefChain.length - 1].tones) === null || _b === void 0 ? void 0 : _b[activeTone]) === null || _c === void 0 ? void 0 : _c.themeVars))),
+        ];
+    }, [activeTone, themeDefChain]);
+    const allThemeVarsWithResolvedHierarchicalVars = (0, react_1.useMemo)(() => {
+        let mergedThemeVars = {};
+        themeDefChainVars === null || themeDefChainVars === void 0 ? void 0 : themeDefChainVars.forEach((theme) => {
+            mergedThemeVars = Object.assign(Object.assign({}, mergedThemeVars), theme);
+        });
+        const resolvedThemeVarsFromChains = {};
+        new Set([
+            ...Object.keys(themeVars_1.default.themeVars),
+            ...componentThemeVars,
+        ]).forEach((themeVar) => {
+            const result = (0, hvar_1.matchThemeVar)(themeVar, themeDefChainVars);
+            if (result &&
+                result.forValue &&
+                result.matchedValue &&
+                result.forValue !== result.matchedValue) {
+                resolvedThemeVarsFromChains[result.forValue] = `$${result.matchedValue}`;
+            }
+        });
+        return resolveThemeVarsWithCssVars(Object.assign(Object.assign({}, mergedThemeVars), resolvedThemeVarsFromChains));
+    }, [componentThemeVars, themeDefChainVars]);
+    const themeCssVars = (0, react_1.useMemo)(() => {
+        const ret = {};
+        Object.entries(allThemeVarsWithResolvedHierarchicalVars).forEach(([key, value]) => {
+            const themeKey = `--${themeVars_1.default.keyPrefix}-${key}`;
+            if (value) {
+                ret[themeKey] = value;
+            }
+        });
+        return ret;
+    }, [allThemeVarsWithResolvedHierarchicalVars]);
+    const getThemeVar = (0, react_1.useCallback)((varName) => {
+        return (0, transformThemeVars_1.resolveThemeVar)(varName, allThemeVarsWithResolvedHierarchicalVars);
+    }, [allThemeVarsWithResolvedHierarchicalVars]);
+    (0, react_1.useEffect)(() => {
+        allFonts.forEach((font) => __awaiter(this, void 0, void 0, function* () {
+            if (typeof font !== "string") {
+                const resolvedSrc = getResourceUrl(font.src);
+                let src = `url(${resolvedSrc})`;
+                if (font.format) {
+                    src = `${src} format('${font.format}')`;
+                }
+                const ff = new FontFace(font.fontFamily, src, {
+                    weight: font.fontWeight,
+                    style: font.fontStyle,
+                    display: font.fontDisplay,
+                });
+                try {
+                    const loadedFontFace = yield ff.load();
+                    document.fonts.add(loadedFontFace);
+                }
+                catch (e) {
+                    console.error("loading fonts failed", e);
+                }
+            }
+        }));
+    }, [themeDefChain, getResourceUrl, allFonts]);
+    return {
+        getResourceUrl,
+        fontLinks,
+        allThemeVarsWithResolvedHierarchicalVars,
+        themeCssVars,
+        getThemeVar,
+    };
+}
+exports.builtInThemes = [
+    xmlui_1.XmlUiThemeDefinition,
+    xmlui_1.XmlUiGreenThemeDefinition,
+    xmlui_1.XmlUiGrayThemeDefinition,
+    xmlui_1.XmlUiOrangeThemeDefinition,
+    xmlui_1.XmlUiPurpleThemeDefinition,
+    xmlui_1.XmlUiCyanThemeDefinition,
+    xmlui_1.XmlUiRedThemeDefinition,
+    solid_1.SolidThemeDefinition,
+];
+// theme-overriding properties change.
+function ThemeProvider({ children, themes: custThemes = constants_1.EMPTY_ARRAY, defaultTheme = "xmlui", defaultTone = "light", resources = constants_1.EMPTY_OBJECT, resourceMap = constants_1.EMPTY_OBJECT, }) {
+    const [activeThemeTone, setActiveThemeTone] = (0, react_1.useState)(() => {
+        if (!defaultTone) {
+            return abstractions_1.ThemeToneKeys[0];
+        }
+        return defaultTone;
+    });
+    const themes = (0, react_1.useMemo)(() => {
+        return [...custThemes, ...exports.builtInThemes];
+    }, [custThemes]);
+    const availableThemeIds = (0, react_1.useMemo)(() => {
+        return [...new Set(themes.map((theme) => theme.id))];
+    }, [themes]);
+    const [activeThemeId, setActiveThemeId] = (0, react_1.useState)(() => {
+        if (!defaultTheme) {
+            return availableThemeIds[0];
+        }
+        return defaultTheme;
+    });
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        //we sync the activeThemeId with the default theme (mostly for HMR)
+        if (defaultTheme && availableThemeIds.includes(defaultTheme)) {
+            setActiveThemeId(defaultTheme);
+        }
+        else {
+            setActiveThemeId(availableThemeIds[0]);
+        }
+    }, [availableThemeIds, defaultTheme]);
+    const activeTheme = (0, react_1.useMemo)(() => {
+        let foundTheme;
+        if (activeThemeId) {
+            foundTheme = themes.find((theme) => theme.id === activeThemeId);
+        }
+        if (!foundTheme) {
+            throw new Error(`Theme ${activeThemeId} not found, available themes: ${availableThemeIds}`);
+        }
+        return foundTheme;
+    }, [activeThemeId, availableThemeIds, themes]);
+    const { allThemeVarsWithResolvedHierarchicalVars, themeCssVars, getResourceUrl, getThemeVar, } = useCompiledTheme(activeTheme, activeThemeTone, themes, resources, resourceMap);
+    const [root, setRoot] = (0, react_1.useState)(typeof document === "undefined" ? undefined : document.body);
+    const themeValue = (0, react_1.useMemo)(() => {
+        const themeVal = {
+            root,
+            setRoot,
+            themes,
+            resources,
+            resourceMap,
+            activeThemeId,
+            activeThemeTone,
+            setActiveThemeId,
+            setActiveThemeTone,
+            availableThemeIds,
+            activeTheme,
+            toggleThemeTone: () => setActiveThemeTone(activeThemeTone === "light" ? "dark" : "light")
+        };
+        return themeVal;
+    }, [
+        activeTheme,
+        activeThemeId,
+        activeThemeTone,
+        availableThemeIds,
+        resourceMap,
+        resources,
+        root,
+        themes,
+    ]);
+    const currentThemeContextValue = (0, react_1.useMemo)(() => {
+        const themeVal = {
+            root,
+            activeThemeId,
+            activeThemeTone: activeThemeTone,
+            activeTheme,
+            themeStyles: themeCssVars,
+            themeVars: allThemeVarsWithResolvedHierarchicalVars,
+            getResourceUrl,
+            getThemeVar,
+        };
+        return themeVal;
+    }, [
+        activeTheme,
+        activeThemeId,
+        activeThemeTone,
+        allThemeVarsWithResolvedHierarchicalVars,
+        getResourceUrl,
+        getThemeVar,
+        root,
+        themeCssVars,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(ThemeContext_1.ThemesContext.Provider, { value: themeValue, children: (0, jsx_runtime_1.jsx)(ThemeContext_1.ThemeContext.Provider, { value: currentThemeContextValue, children: children }) }));
+}
+function resolveThemeVarsWithCssVars(theme) {
+    if (!theme) {
+        return {};
+    }
+    const ret = {};
+    Object.keys(theme).forEach((key) => {
+        ret[key] = resolveThemeVarToCssVars(key, theme);
+    });
+    return ret;
+    function resolveThemeVarToCssVars(varName, theme) {
+        const value = theme[varName];
+        if (typeof value === "string" && value.includes("$")) {
+            return replaceThemeVar(value);
+        }
+        return value;
+    }
+    function replaceThemeVar(input) {
+        const regex = /\$([a-zA-Z0-9_-]+)/gi;
+        const matches = input.matchAll(regex);
+        //we go from 1, because result[1] is the whole stuff
+        if (matches) {
+            let ret = input;
+            for (const match of matches) {
+                const varName = match[1];
+                if (varName) {
+                    ret = ret.replace(match[0], `var(${(0, themeVars_1.getVarKey)(varName)})`);
+                }
+            }
+            return ret;
+        }
+        // for (let i = 1; i < (result?.length || 0); i++) {
+        //   const varName = result?.[i];
+        //   if(varName){
+        //     return input.replace(regex, `var(${getVarKey(varName)})`);
+        //   }
+        // }
+        return input;
+    }
+}
+exports.default = ThemeProvider;

package/dist/scripts/src/components-core/theming/abstractions.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INITIAL_THEME_TONE = exports.ThemeToneKeys = void 0;
+/**
+ * Each theme can have a light or a dark tone.
+ */
+exports.ThemeToneKeys = ["light", "dark"];
+/**
+ * Initial theme tone value. Easier to modify if needed
+ */
+exports.INITIAL_THEME_TONE = "light";

package/dist/scripts/src/components-core/theming/extendThemeUtils.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collectThemeChainByExtends = collectThemeChainByExtends;
+exports.expandTheme = expandTheme;
+const lodash_es_1 = require("lodash-es");
+const root_1 = require("@components-core/theming/themes/root");
+function collectExtends(cTheme, allThemes) {
+    if (!cTheme) {
+        return [];
+    }
+    if (!cTheme.extends) {
+        return [];
+    }
+    const arrayExtends = typeof cTheme.extends === "string" ? [cTheme.extends] : cTheme.extends;
+    const ret = [];
+    arrayExtends.forEach((ext) => {
+        const parentTheme = allThemes.find((theme) => theme.id === ext);
+        if (parentTheme) {
+            ret.push(...collectExtends(parentTheme, allThemes));
+            ret.push(parentTheme);
+        }
+    });
+    return ret;
+}
+function collectThemeChainByExtends(customTheme, allThemes, componentDefaultThemeVars) {
+    const rootThemeVars = (0, lodash_es_1.cloneDeep)(root_1.RootThemeDefinition.themeVars) || {};
+    const rootTones = (0, lodash_es_1.cloneDeep)(root_1.RootThemeDefinition.tones) || {};
+    Object.entries(componentDefaultThemeVars).forEach(([key, value]) => {
+        if (typeof value === "string") {
+            rootThemeVars[key] = value;
+        }
+        else {
+            Object.entries(value).forEach(([themeVarKey, themeVarVal]) => {
+                if (!rootTones[key]) {
+                    rootTones[key] = { themeVars: {} };
+                }
+                rootTones[key].themeVars = Object.assign(Object.assign({}, rootTones[key].themeVars), { [themeVarKey]: themeVarVal });
+            });
+        }
+    });
+    const root = {
+        id: "root",
+        themeVars: rootThemeVars,
+        resources: {},
+        tones: rootTones,
+    };
+    return [root, ...collectExtends(customTheme, allThemes), customTheme];
+}
+// --- Extends an existing theme with expanding theme variables
+function expandTheme(newTheme) {
+    const result = {};
+    if (!newTheme) {
+        return result;
+    }
+    // --- Iterate through new theme variables
+    Object.keys(newTheme).forEach((key) => {
+        // --- Set the theme variable
+        result[key] = newTheme[key];
+        // --- Check for variables to extend
+        Object.keys(themeVariableExpansion).forEach((keyToCheck) => {
+            if (!key.startsWith(keyToCheck + "-"))
+                return;
+            // --- Candidate for extension
+            const varPart = key.substring(keyToCheck.length);
+            const keysToExtend = themeVariableExpansion[keyToCheck];
+            if (keysToExtend.some((kte) => key.startsWith(kte + "-")))
+                return;
+            keysToExtend.forEach((keyToExtend) => {
+                const fullKey = keyToExtend + varPart;
+                result[fullKey] = newTheme[key];
+            });
+        });
+    });
+    // --- Done.
+    return Object.assign(Object.assign({}, result), newTheme);
+}
+const themeVariableExpansion = {
+    padding: ["padding-horizontal", "padding-vertical", "padding-top", "padding-right", "padding-bottom", "padding-left"],
+    "padding-horizontal": ["padding-left", "padding-right"],
+    "padding-vertical": ["padding-top", "padding-bottom"],
+    border: ["border-horizontal", "border-vertical", "border-top", "border-right", "border-bottom", "border-left"],
+    "border-horizontal": ["border-left", "border-right"],
+    "border-vertical": ["border-top", "border-bottom"],
+    "color-border": [
+        "color-border-horizontal",
+        "color-border-vertical",
+        "color-border-top",
+        "color-border-right",
+        "color-border-bottom",
+        "color-border-left",
+    ],
+    "color-border-horizontal": ["color-border-left", "color-border-right"],
+    "color-border-vertical": ["color-border-top", "color-border-bottom"],
+    "thickness-border": [
+        "thickness-border-horizontal",
+        "thickness-border-vertical",
+        "thickness-border-top",
+        "thickness-border-right",
+        "thickness-border-bottom",
+        "thickness-border-left",
+    ],
+    "thickness-border-horizontal": ["thickness-border-left", "thickness-border-right"],
+    "thickness-border-vertical": ["thickness-border-top", "thickness-border-bottom"],
+    "style-border": [
+        "style-border-horizontal",
+        "style-border-vertical",
+        "style-border-top",
+        "style-border-right",
+        "style-border-bottom",
+        "style-border-left",
+    ],
+    "style-border-horizontal": ["style-border-left", "style-border-right"],
+    "style-border-vertical": ["style-border-top", "style-border-bottom"],
+};

package/dist/scripts/src/components-core/theming/hvar.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseHVar = parseHVar;
+exports.matchThemeVar = matchThemeVar;
+const parsedHVarCache = {};
+//extremely dummy solution, will come back later
+function parseHVar(input) {
+    if (parsedHVarCache[input] !== undefined) {
+        return parsedHVarCache[input];
+    }
+    // Split the input string into parts using regex
+    const parts = input.split(/-[A-Z]+/);
+    if (parts.length !== 2) {
+        parsedHVarCache[input] = null;
+        return parsedHVarCache[input];
+    }
+    const firstPart = parts[0];
+    const classessParts = firstPart.split(":");
+    const attribute = classessParts[classessParts.length - 1];
+    const classes = classessParts.length > 1 ? classessParts.slice(0, classessParts.length - 1) : [];
+    const secondPart = input.substring(firstPart.length + 1);
+    const [compName, ...rest] = secondPart.split("-");
+    const traitsAndStates = secondPart.substring(compName.length).split("--");
+    const states = [];
+    const traits = [];
+    traitsAndStates.forEach((part) => {
+        if (!part.includes("-") && part) {
+            states.push(part);
+        }
+        else {
+            part.split("-").forEach((trait) => {
+                if (trait) {
+                    traits.push(trait);
+                }
+            });
+        }
+    });
+    parsedHVarCache[input] = {
+        classes: classes,
+        attribute: attribute,
+        component: compName,
+        traits: traits,
+        states: states,
+    };
+    return parsedHVarCache[input];
+}
+function createCombinations(arr = []) {
+    const stateCombinations = [];
+    for (let i = 1; i <= arr.length; i++) {
+        for (let j = 0; j <= arr.length - i; j++) {
+            stateCombinations.push(arr.slice(j, j + i));
+        }
+    }
+    return stateCombinations.sort((a, b) => b.length - a.length);
+}
+function matchThemeVar(themeVar, availableThemeVars = []) {
+    const hvar = parseHVar(themeVar);
+    if (!hvar) {
+        return;
+    }
+    const stateCombinations = createCombinations(hvar.states);
+    const traitCombinations = createCombinations(hvar.traits);
+    const sortedTraitCombinations = [];
+    traitCombinations.forEach((traitComb) => {
+        let result = "";
+        traitComb.forEach((t) => {
+            result = `${result}-${t}`;
+        });
+        sortedTraitCombinations.push(result);
+    });
+    sortedTraitCombinations.push("");
+    const sortedStateCombinations = [];
+    stateCombinations.forEach((stateComb) => {
+        let result = "";
+        stateComb.forEach((s) => {
+            result = `${result}--${s}`;
+        });
+        sortedStateCombinations.push(result);
+    });
+    sortedStateCombinations.push("");
+    const componentParts = [hvar.component, ...hvar.classes];
+    const from = [];
+    sortedStateCombinations.forEach((stateComb) => {
+        sortedTraitCombinations.forEach((traitComb) => {
+            componentParts.forEach((componentPart) => {
+                from.push(`${hvar.attribute}-${componentPart}${traitComb}${stateComb}`);
+            });
+        });
+    });
+    let matchedValue;
+    for (let i = availableThemeVars.length - 1; i >= 0; i--) {
+        const themeVars = availableThemeVars[i];
+        let foundValue = from.find((themeVar) => themeVars[themeVar] !== undefined);
+        if (foundValue) {
+            matchedValue = foundValue;
+            break;
+        }
+    }
+    const forValue = from[0];
+    return {
+        forValue: forValue,
+        matchedValue: matchedValue,
+        from: from,
+    };
+}

package/dist/scripts/src/components-core/theming/themeVars.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseScssVar = parseScssVar;
+exports.getVarKey = getVarKey;
+/**
+ * The sole purpose of this module is to provide an object with the available keys of theme SCSS variables and the
+ * prefix of the theme.
+ */
+const themeVars_module_scss_1 = __importDefault(require("./themeVars.module.scss"));
+/**
+ * This function extracts CSS variables from the specified SCSS input. It uses a hack to convert the CSS input to JSON
+ * and then calls a JSON parser to create the desired object.
+ * @param scssStr The scss input
+ */
+function parseScssVar(scssStr) {
+    if (!scssStr || typeof scssStr !== typeof "") {
+        return scssStr;
+    }
+    // Lists and maps are surrounded by single quotes, e.g. "'[ \"string in list\", 5, \"5px\" ]'"
+    // Remove them if they exist so they can be parsed correctly.
+    let jsValue = scssStr.replace(/(^['"])|(['"]$)/g, "");
+    try {
+        // JSON-formatted string from within SCSS file
+        return JSON.parse(jsValue);
+    }
+    catch (errorParsingJsonGeneratedInUtilScssFile) {
+        try {
+            // Value was likely an SCSS literal string; attempt parsing it manually.
+            // Example: inspect($my-map) => '(num: 10, numWithUnits: 5px, str: hello, color: #fff, "keyAsStr": false, other: null)'
+            return JSON.parse(scssStr
+                .replace("(", "{")
+                .replace(")", "}")
+                // JSON values: convert any collection of word characters followed by a comma or bracket to a string
+                .replace(/: ?([^,}]+)([,}])/g, ': "$1"$2')
+                // JSON keys: space/bracket/comma as first character, not already a string, anything not colon or
+                // space (rules out JSON values), ended by colon
+                .replace(/([\s{,])(?!")([^:\s]+)+:/g, '$1"$2":'));
+        }
+        catch (errorParsingScssStringLiteral) {
+            return jsValue;
+        }
+    }
+}
+let keyPrefix = parseScssVar(themeVars_module_scss_1.default.keyPrefix) || "";
+let vars = parseScssVar(themeVars_module_scss_1.default.themeVars);
+/**
+ * Export the desired SCSS variables and prefix
+ */
+const theme = {
+    keyPrefix: keyPrefix,
+    themeVars: vars,
+};
+function getVarKey(varName) {
+    if (keyPrefix) {
+        return `--${keyPrefix}-${varName}`;
+    }
+    return `--${varName}`;
+}
+exports.default = theme;

package/dist/scripts/src/components-core/theming/themes/base-utils.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.paddingSubject = paddingSubject;
+exports.borderSubject = borderSubject;
+function paddingSubject(name, valueSpec) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return {
+        [`padding-left-${name}`]: (_a = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.left) !== null && _a !== void 0 ? _a : `$padding-horizontal-${name}`,
+        [`padding-right-${name}`]: (_b = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.right) !== null && _b !== void 0 ? _b : `$padding-horizontal-${name}`,
+        [`padding-top-${name}`]: (_c = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.top) !== null && _c !== void 0 ? _c : `$padding-vertical-${name}`,
+        [`padding-bottom-${name}`]: (_d = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.bottom) !== null && _d !== void 0 ? _d : `$padding-vertical-${name}`,
+        [`padding-horizontal-${name}`]: (_e = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.horizontal) !== null && _e !== void 0 ? _e : "",
+        [`padding-vertical-${name}`]: (_f = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.vertical) !== null && _f !== void 0 ? _f : "",
+        [`padding-${name}`]: (_g = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.all) !== null && _g !== void 0 ? _g : `$padding-top-${name} $padding-right-${name} $padding-bottom-${name} $padding-left-${name}`,
+    };
+}
+function borderSubject(name, valueSpec) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ [`radius-${name}`]: "$radius" }, borderEdgeSubject("left", (_b = (_a = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.left) !== null && _a !== void 0 ? _a : valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.horizontal) !== null && _b !== void 0 ? _b : valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.all)), borderEdgeSubject("right", (_d = (_c = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.right) !== null && _c !== void 0 ? _c : valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.horizontal) !== null && _d !== void 0 ? _d : valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.all)), borderEdgeSubject("top", (_f = (_e = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.top) !== null && _e !== void 0 ? _e : valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.vertical) !== null && _f !== void 0 ? _f : valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.all)), borderEdgeSubject("bottom", (_h = (_g = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.bottom) !== null && _g !== void 0 ? _g : valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.vertical) !== null && _h !== void 0 ? _h : valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.all)), borderEdgeSubject("horizontal", (_j = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.horizontal) !== null && _j !== void 0 ? _j : valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.all)), borderEdgeSubject("vertical", (_k = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.vertical) !== null && _k !== void 0 ? _k : valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.all)), { [`color-border-${name}`]: (_m = (_l = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.all) === null || _l === void 0 ? void 0 : _l.color) !== null && _m !== void 0 ? _m : "", [`thickness-border-${name}`]: (_p = (_o = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.all) === null || _o === void 0 ? void 0 : _o.thickness) !== null && _p !== void 0 ? _p : "", [`style-border-${name}`]: (_r = (_q = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.all) === null || _q === void 0 ? void 0 : _q.style) !== null && _r !== void 0 ? _r : "", [`border-${name}`]: `${(_t = (_s = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.all) === null || _s === void 0 ? void 0 : _s.thickness) !== null && _t !== void 0 ? _t : `$thickness-border-${name}`} ` +
+            `${(_v = (_u = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.all) === null || _u === void 0 ? void 0 : _u.style) !== null && _v !== void 0 ? _v : `$style-border-${name}`} ` +
+            `${(_x = (_w = valueSpec === null || valueSpec === void 0 ? void 0 : valueSpec.all) === null || _w === void 0 ? void 0 : _w.color) !== null && _x !== void 0 ? _x : `$color-border-${name}`} ` });
+    function borderEdgeSubject(edge, edgeSpec) {
+        var _a, _b, _c, _d;
+        return {
+            [`color-border-${edge}-${name}`]: (_a = edgeSpec === null || edgeSpec === void 0 ? void 0 : edgeSpec.color) !== null && _a !== void 0 ? _a : "",
+            [`thickness-border-${edge}-${name}`]: (_b = edgeSpec === null || edgeSpec === void 0 ? void 0 : edgeSpec.thickness) !== null && _b !== void 0 ? _b : "",
+            [`style-border-${edge}-${name}`]: (_c = edgeSpec === null || edgeSpec === void 0 ? void 0 : edgeSpec.style) !== null && _c !== void 0 ? _c : "",
+            [`border-${edge}-${name}`]: (_d = edgeSpec === null || edgeSpec === void 0 ? void 0 : edgeSpec.all) !== null && _d !== void 0 ? _d : `$thickness-border-${edge}-${name} $style-border-${edge}-${name} $color-border-${edge}-${name}`,
+        };
+    }
+}