xmlui 0.10.10 → 0.10.11

package/dist/scripts/src/components-core/markup-check.js

@@ -0,0 +1,279 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkXmlUiMarkup = checkXmlUiMarkup;
+exports.visitComponent = visitComponent;
+const ParameterParser_1 = require("./script-runner/ParameterParser");
+const Parser_1 = require("../parsers/scripting/Parser");
+const descriptorHelper_1 = require("./descriptorHelper");
+const abstractions_1 = require("../components/abstractions");
+/**
+ * This function checks the XMLUI markup for potential issues. It retrieves
+ * a list of errors and warnings.
+ * @param rootDef Root component definition
+ * @param components Components referenced in the XMLUI markup
+ * @param devMode Indicates if the check is performed in development mode
+ * @returns List of errors and warnings
+ */
+function checkXmlUiMarkup(rootDef, components, metadataHandler, devMode) {
+    const errorsCollected = [];
+    // --- Initialize the check
+    const continuation = {};
+    const componentIdsCollected = new Set();
+    const compoundIdsCollected = new Set();
+    // --- Visit the root component
+    if (rootDef) {
+        visitComponent(rootDef, null, componentDefVisitor, continuation, metadataHandler);
+    }
+    // --- Visit the compound components
+    if (!continuation.abort) {
+        for (const component of components) {
+            // --- Rule: Compound component name must be a valid JavaScript identifier
+            if (!isValidIdentifier(component.name)) {
+                reportError("M007", "Component", component.name);
+            }
+            // --- Rule: Compound component name cannot be 'Component'
+            if (component.name === "Component") {
+                reportError("M008", "Component", component.name);
+            }
+            // --- Rule: Compound component must not have the name of a registered component
+            if (metadataHandler.componentRegistered(component.name)) {
+                reportError("M009", "Component", component.name);
+            }
+            // --- Rule: Compound component name must be unique
+            if (compoundIdsCollected.has(component.name)) {
+                reportError("M010", "Component", component.name);
+            }
+            else {
+                compoundIdsCollected.add(component.name);
+            }
+            // --- Reset component ID scope
+            componentIdsCollected.clear();
+            // --- Visit the compount component's definition
+            visitComponent(component.component, null, componentDefVisitor, continuation, metadataHandler);
+        }
+    }
+    // --- Done.
+    return errorsCollected;
+    // --- This visitor checks the rules for a particular component
+    function componentDefVisitor(def, parent, before, continuation) {
+        var _a, _b, _c, _d, _e;
+        // --- This is the visitor function to check a ComponentDef markup
+        if (!before) {
+            // --- Do not visit the component definition after its children have been visited
+            return;
+        }
+        // --- Rule: Component name must be registered
+        if (!metadataHandler.componentRegistered(def.type)) {
+            reportError("M001", (_a = parent === null || parent === void 0 ? void 0 : parent.type) !== null && _a !== void 0 ? _a : "Root", def.type);
+            // continuation.cancel = true;
+            return;
+        }
+        // --- Rule: an ID must be a valid JavaScript identifier
+        if (def.uid) {
+            if (!isValidIdentifier(def.uid)) {
+                reportError("M002", def.type, def.type, def.uid);
+            }
+            else if (componentIdsCollected.has(def.uid)) {
+                reportError("M003", def.type, def.uid);
+            }
+            else {
+                componentIdsCollected.add(def.uid);
+            }
+        }
+        // --- Check all props of the component
+        const propDescriptors = (_b = metadataHandler.getComponentProps(def.type)) !== null && _b !== void 0 ? _b : {};
+        const currentProps = (_c = def.props) !== null && _c !== void 0 ? _c : {};
+        for (const propName of Object.keys(currentProps)) {
+            const propDescriptor = propDescriptors[propName];
+            // --- Rule: The property must be defined in the component descriptor or be a layout option
+            // --- or the component must accept arbitrary properties
+            if (propDescriptor) {
+                // --- The property has a descriptor, so it is allowed.
+                // --- Rule: The property value must be parseable
+                const propValue = currentProps[propName];
+                if (typeof propValue === "string") {
+                    try {
+                        (0, ParameterParser_1.parseParameterString)(propValue);
+                    }
+                    catch (error) {
+                        reportError("M006", def.type, propName, error.message);
+                    }
+                }
+            }
+            else {
+                // --- The property has no descriptor.
+                const propParts = propName.split("-");
+                // --- Check for a layout property
+                const validProp = 
+                // --- Layout property
+                (propParts.length === 1 && descriptorHelper_1.layoutOptionKeys.includes(propName)) ||
+                    // --- Layout property with viewport size
+                    (propParts.length === 2 &&
+                        descriptorHelper_1.layoutOptionKeys.includes(propParts[0]) &&
+                        abstractions_1.viewportSizeNames.includes(propParts[1])) ||
+                    // --- Arbitrary property is allowed
+                    metadataHandler.acceptArbitraryProps(def.type);
+                if (!validProp) {
+                    // --- The component does not accept arbitrary properties and
+                    // --- the property is not a layout option
+                    reportError("M005", def.type, def.type, propName);
+                }
+            }
+        }
+        // --- Check all events of the component
+        const eventDescriptors = (_d = metadataHandler.getComponentEvents(def.type)) !== null && _d !== void 0 ? _d : {};
+        const currentEvents = (_e = def.events) !== null && _e !== void 0 ? _e : {};
+        for (const eventName of Object.keys(currentEvents)) {
+            const eventDescriptor = eventDescriptors[eventName];
+            // --- Rule: The event must be defined in the component descriptor
+            if (eventDescriptor) {
+                // --- The event has a descriptor, so it is allowed.
+                const eventValue = currentEvents[eventName];
+                if (typeof eventValue === "string") {
+                    // --- Rule: The event value must be parseable
+                    const parser = new Parser_1.Parser(eventValue);
+                    try {
+                        parser.parseStatements();
+                        if (parser.errors.length > 0) {
+                            reportError("M012", def.type, eventName, parser.errors[0].text);
+                        }
+                    }
+                    catch (error) {
+                        reportError("M012", def.type, eventName, error.message);
+                    }
+                }
+            }
+            else {
+                reportError("M011", def.type, def.type, eventName);
+            }
+        }
+        // --- Check the component validator
+        const componentValidator = metadataHandler.getComponentValidator(def.type);
+        if (componentValidator) {
+            const validationErrors = componentValidator(def, devMode);
+            if (validationErrors) {
+                if (Array.isArray(validationErrors)) {
+                    for (const error of validationErrors) {
+                        reportError("M013", def.type, error);
+                    }
+                }
+                else {
+                    reportError("M013", def.type, validationErrors);
+                }
+            }
+        }
+    }
+    /**
+     * Checks if a string is a valid JavaScript identifier.
+     * @param identifier The string to check.
+     * @returns True if the string is a valid identifier, false otherwise.
+     */
+    function isValidIdentifier(identifier) {
+        const identifierRegex = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+        return identifierRegex.test(identifier);
+    }
+    function reportError(code, name, ...args) {
+        _reportError(code, name, false, ...args);
+    }
+    function reportWarning(code, name, ...args) {
+        _reportError(code, name, true, ...args);
+    }
+    function _reportError(code, name, isWarning, ...args) {
+        var _a;
+        let errorText = (_a = errorMessages[code]) !== null && _a !== void 0 ? _a : "Unkonwn error";
+        if (args) {
+            args.forEach((a, idx) => (errorText = replace(errorText, `{${idx}}`, args[idx].toString())));
+        }
+        errorsCollected.push({ name, code, message: errorText, isWarning, args });
+        function replace(input, placeholder, replacement) {
+            do {
+                input = input.replace(placeholder, replacement);
+            } while (input.includes(placeholder));
+            return input;
+        }
+    }
+}
+// --- This function visits a component, its nested components and children
+function visitComponent(def, parent, visitor, continuation = {}, metadataHandler) {
+    var _a, _b, _c, _d;
+    // --- Visit the component (before)
+    visitor(def, parent, true, continuation);
+    if (continuation.abort || continuation.cancel) {
+        // --- Stop the visit
+        return;
+    }
+    // --- Visit the properties with "ComponentDef" value
+    const propDescriptors = (_a = metadataHandler.getComponentProps(def.type)) !== null && _a !== void 0 ? _a : {};
+    const currentProps = (_b = def.props) !== null && _b !== void 0 ? _b : {};
+    for (const propName of Object.keys(currentProps)) {
+        const propDescriptor = propDescriptors[propName];
+        if (!propDescriptor) {
+            // --- No descriptor for the property, skip it
+            continue;
+        }
+        const propValue = currentProps[propName];
+        if (propDescriptor.type === "ComponentDef" && propValue.type) {
+            // --- This property holds a nested component, visit it
+            visitComponent(propValue, def, visitor, continuation, metadataHandler);
+            if (continuation.abort || continuation.cancel) {
+                // --- Stop the visit
+                return;
+            }
+        }
+    }
+    // --- Visit events with nested components
+    const eventDescriptors = (_c = metadataHandler.getComponentEvents(def.type)) !== null && _c !== void 0 ? _c : {};
+    const currentEvents = (_d = def.events) !== null && _d !== void 0 ? _d : {};
+    for (const eventName of Object.keys(currentEvents)) {
+        const eventDescriptor = eventDescriptors[eventName];
+        if (!eventDescriptor) {
+            // --- No descriptor for the events, skip it
+            continue;
+        }
+        const eventValue = currentEvents[eventName];
+        if (typeof eventValue === "object" && eventValue.type) {
+            // --- This event holds a nested component, visit it
+            visitComponent(eventValue, def, visitor, continuation, metadataHandler);
+            if (continuation.abort) {
+                // --- Stop visiting this component
+                return;
+            }
+            if (continuation.cancel) {
+                // --- Skip the remaining items
+                break;
+            }
+        }
+    }
+    // --- Visit the component children
+    if (def.children) {
+        for (const child of def.children) {
+            visitComponent(child, def, visitor, continuation, metadataHandler);
+            if (continuation.abort) {
+                // --- Stop visiting this component
+                return;
+            }
+            if (continuation.cancel) {
+                // --- Skip the remaining items
+                break;
+            }
+        }
+    }
+    // --- Visit the component (after)
+    visitor(def, undefined, false, continuation);
+}
+// --- The error messages of error codes
+const errorMessages = {
+    M001: "The component '{0}' is not registered",
+    M002: "The '{0}' element has an invalid id: '{1}'",
+    M003: "Invalid component identifier: '{0}'",
+    M004: "Duplicated component identifier: '{0}'",
+    M005: "The '{0}' element has an invalid property: '{1}'",
+    M006: "Parsing property value of '{0}' failed: {1}",
+    M007: "The name of a reusable component is invalid: '{0}'",
+    M008: "The name of a reusable component must not be '{0}', as it is a reserved name",
+    M009: "A reusable component cannot have the name of a registered component: '{0}'",
+    M010: "Duplicated reusable component name: '{0}'",
+    M011: "The '{0}' element has an invalid event: '{1}'",
+    M012: "Parsing event value of '{0}' failed: {1}",
+    M013: "Component validation failed: '{0}'",
+};

package/dist/scripts/src/components-core/rendering/ComponentAdapter.js

@@ -70,6 +70,7 @@ const InvalidComponent_1 = __importDefault(require("./InvalidComponent"));
 const layout_resolver_1 = require("../theming/layout-resolver");
 const TooltipNative_1 = require("../../components/Tooltip/TooltipNative");
 const StyleContext_1 = require("../theming/StyleContext");
+const AnimationNative_1 = require("../../components/Animation/AnimationNative");
 /**
  * This component's primary responsibility is to transform a particular component definition
  * into its React representation using the current rendering context.
@@ -147,12 +148,17 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
     // --- Set up the mouse event handlers for the component
     const mouseEventHandlers = (0, event_handlers_1.useMouseEventHandlers)(memoedLookupEventHandler, (descriptor === null || descriptor === void 0 ? void 0 : descriptor.nonVisual) || isApiBound);
     // --- Use the current theme to obtain resources and collect theme variables
-    const { getResourceUrl, themeVars } = (0, ThemeContext_1.useTheme)();
+    const { getResourceUrl } = (0, ThemeContext_1.useTheme)();
     // --- Obtain a function that can extract a resource URL from a logical URL
     const extractResourceUrl = (0, react_1.useCallback)((url) => {
         const extractedUrl = valueExtractor(url);
+        if (typeof extractedUrl !== "string" || extractedUrl.trim() === "") {
+            console.warn(`Component '${safeNode.type}': ` +
+                `the extracted resource URL is not a valid string: value ${extractedUrl}, type ${typeof extractedUrl}`);
+            return undefined;
+        }
         return getResourceUrl(extractedUrl);
-    }, [getResourceUrl, valueExtractor]);
+    }, [getResourceUrl, valueExtractor, safeNode.type]);
     // --- Collect and compile the layout property values
     const { cssProps } = (0, react_1.useMemo)(() => {
         const resolvedLayoutProps = {};
@@ -170,6 +176,13 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
         // });
     }, [appContext.mediaSize, layoutContextRef, safeNode.props, valueExtractor]);
     // const className = useComponentStyle(cssProps);
+    // --- Check if the component has a tooltip property
+    const tooltipText = (0, react_1.useMemo)(() => { var _a; return valueExtractor((_a = safeNode.props) === null || _a === void 0 ? void 0 : _a.tooltip, true); }, [safeNode.props, valueExtractor]);
+    // --- Check if the component has a tooltip property
+    const tooltipMarkdown = (0, react_1.useMemo)(() => { var _a; return valueExtractor((_a = safeNode.props) === null || _a === void 0 ? void 0 : _a.tooltipMarkdown, true); }, [safeNode.props, valueExtractor]);
+    const tooltipOptions = (0, react_1.useMemo)(() => { var _a; return valueExtractor((_a = safeNode.props) === null || _a === void 0 ? void 0 : _a.tooltipOptions, true); }, [safeNode.props, valueExtractor]);
+    const animation = (0, react_1.useMemo)(() => { var _a; return valueExtractor((_a = safeNode.props) === null || _a === void 0 ? void 0 : _a.animation, true); }, [safeNode.props, valueExtractor]);
+    const animationOptions = (0, react_1.useMemo)(() => { var _a; return valueExtractor((_a = safeNode.props) === null || _a === void 0 ? void 0 : _a.animationOptions, true); }, [safeNode.props, valueExtractor]);
     // --- As compileLayout generates new cssProps and nonCssProps objects every time, we need to
     // --- memoize them using shallow comparison to avoid unnecessary re-renders.
     const stableLayoutCss = (0, hooks_1.useShallowCompareMemoize)(cssProps);
@@ -267,20 +280,27 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
                 ? (0, react_1.cloneElement)(renderedNode, null, children)
                 : renderedNode;
     }
-    // --- Check if the component has a tooltip property
-    const tooltipText = (0, react_1.useMemo)(() => { var _a; return valueExtractor((_a = safeNode.props) === null || _a === void 0 ? void 0 : _a.tooltip, true); }, [safeNode.props, valueExtractor]);
-    // --- Check if the component has a tooltip property
-    const tooltipMarkdown = (0, react_1.useMemo)(() => { var _a; return valueExtractor((_a = safeNode.props) === null || _a === void 0 ? void 0 : _a.tooltipMarkdown, true); }, [safeNode.props, valueExtractor]);
-    // --- Check if the component has a tooltipOptions property
-    const tooltipOptions = (0, react_1.useMemo)(() => { var _a; return valueExtractor((_a = safeNode.props) === null || _a === void 0 ? void 0 : _a.tooltipOptions, true); }, [safeNode.props, valueExtractor]);
-    // --- Handle tooltips
-    if (tooltipMarkdown || tooltipText) {
-        // --- Obtain options
-        const parsedOptions = (0, TooltipNative_1.parseTooltipOptions)(tooltipOptions);
-        return ((0, jsx_runtime_1.jsx)(TooltipNative_1.Tooltip, Object.assign({ text: tooltipText, markdown: tooltipMarkdown }, parsedOptions, { children: nodeToRender })));
-    }
-    // --- Done
-    return nodeToRender;
+    const applyWrappers = (node) => {
+        // --- Handle animations and tooltips together
+        if (animation && (tooltipMarkdown || tooltipText)) {
+            const parsedOptions = (0, TooltipNative_1.parseTooltipOptions)(tooltipOptions);
+            const parsedAnimationOptions = (0, AnimationNative_1.parseAnimationOptions)(animationOptions);
+            return ((0, jsx_runtime_1.jsx)(TooltipNative_1.Tooltip, Object.assign({ text: tooltipText, markdown: tooltipMarkdown }, parsedOptions, { children: (0, jsx_runtime_1.jsx)(AnimationNative_1.Animation, Object.assign({ animation: (0, AnimationNative_1.parseAnimation)(animation) }, parsedAnimationOptions, { children: node })) })));
+        }
+        // --- Handle animation
+        if (animation) {
+            const parsedAnimationOptions = (0, AnimationNative_1.parseAnimationOptions)(animationOptions);
+            return ((0, jsx_runtime_1.jsx)(AnimationNative_1.Animation, Object.assign({ animation: (0, AnimationNative_1.parseAnimation)(animation) }, parsedAnimationOptions, { children: node })));
+        }
+        // --- Handle tooltip
+        if (tooltipMarkdown || tooltipText) {
+            const parsedOptions = (0, TooltipNative_1.parseTooltipOptions)(tooltipOptions);
+            return ((0, jsx_runtime_1.jsx)(TooltipNative_1.Tooltip, Object.assign({ text: tooltipText, markdown: tooltipMarkdown }, parsedOptions, { children: node })));
+        }
+        // --- No wrappers needed
+        return node;
+    };
+    return applyWrappers(nodeToRender);
 });
 /**
  * This function renders the content of a slot. If the slot is named, it looks for a template

package/dist/scripts/src/components-core/script-runner/eval-tree-async.js

@@ -601,7 +601,10 @@ function evalTemplateLiteralAsync(evaluator, thisStack, expr, evalContext, threa
             const evaledValue = yield completeExprValue(expr.segments[i], thread);
             segmentValues[i] = evaledValue;
         }
-        return (0, eval_tree_common_1.evalTemplateLiteralCore)(segmentValues);
+        const value = (0, eval_tree_common_1.evalTemplateLiteralCore)(segmentValues);
+        (0, eval_tree_common_1.setExprValue)(expr, { value }, thread);
+        thisStack.push(value);
+        return value;
     });
 }
 function completeExprValue(expr, thread) {

package/dist/scripts/src/components-core/script-runner/eval-tree-sync.js

@@ -134,7 +134,10 @@ function evalTemplateLiteral(evaluator, thisStack, expr, evalContext, thread) {
         thisStack.pop();
         return evaledValue;
     });
-    return (0, eval_tree_common_1.evalTemplateLiteralCore)(segmentValues);
+    const value = (0, eval_tree_common_1.evalTemplateLiteralCore)(segmentValues);
+    (0, eval_tree_common_1.setExprValue)(expr, { value }, thread);
+    thisStack.push(value);
+    return value;
 }
 function evalMemberAccess(evaluator, thisStack, expr, evalContext, thread) {
     evaluator(thisStack, expr.obj, evalContext, thread);

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

@@ -127,13 +127,6 @@ exports.RootThemeDefinition = {
         "color-valid": "$color-success-600",
         "color-warning": "$color-warn-700",
         "color-error": "$color-danger-500",
-        // --- Default line height values (relative to the base unit, "space-base")
-        "lineHeight-none": "1",
-        "lineHeight-tight": "1.25",
-        "lineHeight-snug": "1.375",
-        "lineHeight-normal": "1.5",
-        "lineHeight-relaxed": "1.625",
-        "lineHeight-loose": "2",
         // --- The sans-serif font set
         "fontFamily-sans-serif": "'Inter', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif",
         // --- The monospace font set
@@ -154,18 +147,38 @@ exports.RootThemeDefinition = {
         // --- The app's default font family
         "fontFamily": "$fontFamily-sans-serif",
         // --- Various font sizes (relative to the current context)
-        "fontSize-gigantic": "3rem",
-        "fontSize-larger": "2.15rem",
-        "fontSize-large": "1.5rem",
-        "fontSize-medium": "1.25rem",
-        "fontSize-semimedium": "1.125rem",
-        "fontSize-normal": "1rem",
-        "fontSize-small": "0.875rem",
-        "fontSize-code": "0.85rem",
-        "fontSize-smaller": "0.75rem",
         "fontSize-tiny": "0.625rem",
+        "fontSize-xs": "0.75rem",
+        "fontSize-code": "0.85rem",
+        "fontSize-sm": "0.875rem",
+        "fontSize-base": "1rem",
+        "fontSize-lg": "1.125rem",
+        "fontSize-xl": "1.25rem",
+        "fontSize-2xl": "1.5rem",
+        "fontSize-3xl": "1.875rem",
+        "fontSize-4xl": "2.25rem",
+        "fontSize-5xl": "3rem",
+        "fontSize-6xl": "3.75rem",
+        "fontSize-7xl": "4.5rem",
+        "fontSize-8xl": "6rem",
+        "fontSize-9xl": "8rem",
+        // --- Various line height values
+        "lineHeight-tiny": "calc(0.85 / 0.625)", // 1.36
+        "lineHeight-xs": "calc(1 / 0.75)", // 1.33
+        "lineHeight-sm": "calc(1.25 / 0.875)", // 1.43
+        "lineHeight-base": "calc(1.5 / 1)", // 1.5
+        "lineHeight-lg": "calc(1.75 / 1.125)", // 1.56
+        "lineHeight-xl": "calc(1.75 / 1.25)", // 1.4
+        "lineHeight-2xl": "calc(2 / 1.5)", // 1.33
+        "lineHeight-3xl": "calc(2.25 / 1.875)", // 1.2
+        "lineHeight-4xl": "calc(2.5 / 2.25)", // 1.11
+        "lineHeight-5xl": "1",
+        "lineHeight-6xl": "1",
+        "lineHeight-7xl": "1",
+        "lineHeight-8xl": "1",
+        "lineHeight-9xl": "1",
         // --- The default font size
-        "fontSize": "$fontSize-normal",
+        "fontSize": "$fontSize-base",
         // --- Predefined gap sizes
         "gap-none": "$space-0",
         "gap-tight": "$space-2",

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

@@ -88,14 +88,21 @@ function generateBaseFontSizes(theme) {
         return {};
     }
     const ret = {};
-    ret[`fontSize-large`] = `${1.5 * baseNum}${baseUnit}`;
-    ret[`fontSize-medium`] = `${1.25 * baseNum}${baseUnit}`;
-    ret[`fontSize-semimedium`] = `${1.125 * baseNum}${baseUnit}`;
-    ret[`fontSize-normal`] = base;
-    ret[`fontSize-small`] = `${0.875 * baseNum}${baseUnit}`;
-    ret[`fontSize-code`] = `${0.85 * baseNum}${baseUnit}`;
-    ret[`fontSize-smaller`] = `${0.75 * baseNum}${baseUnit}`;
     ret[`fontSize-tiny`] = `${0.625 * baseNum}${baseUnit}`;
+    ret[`fontSize-xs`] = `${0.75 * baseNum}${baseUnit}`;
+    ret[`fontSize-code`] = `${0.85 * baseNum}${baseUnit}`;
+    ret[`fontSize-sm`] = `${0.875 * baseNum}${baseUnit}`;
+    ret[`fontSize-base`] = base;
+    ret[`fontSize-lg`] = `${1.125 * baseNum}${baseUnit}`;
+    ret[`fontSize-xl`] = `${1.25 * baseNum}${baseUnit}`;
+    ret[`fontSize-2xl`] = `${1.5 * baseNum}${baseUnit}`;
+    ret[`fontSize-3xl`] = `${1.875 * baseNum}${baseUnit}`;
+    ret[`fontSize-4xl`] = `${2.25 * baseNum}${baseUnit}`;
+    ret[`fontSize-5xl`] = `${3 * baseNum}${baseUnit}`;
+    ret[`fontSize-6xl`] = `${3.75 * baseNum}${baseUnit}`;
+    ret[`fontSize-7xl`] = `${4.5 * baseNum}${baseUnit}`;
+    ret[`fontSize-8xl`] = `${6 * baseNum}${baseUnit}`;
+    ret[`fontSize-9xl`] = `${8 * baseNum}${baseUnit}`;
     return ret;
 }
 function generateTextFontSizes(theme) {