xmlui 0.7.34 → 0.8.0

package/dist/scripts/src/components/HtmlTags/HtmlTags.js

@@ -1155,8 +1155,8 @@ exports.HtmlTableMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(HtmlTags_module_scss_1.default.themeVarsTable),
     defaultThemeVars: {
-        "color-bg-HtmlTable": "$color-bg",
-        "border-HtmlTable": "1px solid $color-border",
+        "backgroundColor-HtmlTable": "$backgroundColor",
+        "border-HtmlTable": "1px solid $borderColor",
         "marginBottom-HtmlTable": "$space-4",
         "marginTop-HtmlTable": "$space-4",
     },
@@ -1195,7 +1195,7 @@ exports.HtmlTdMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(HtmlTags_module_scss_1.default.themeVarsTd),
     defaultThemeVars: {
         "padding-HtmlTd": "$space-2",
-        "border-bottom-HtmlTd": "1px solid $color-border",
+        "borderBottom-HtmlTd": "1px solid $borderColor",
     },
 });
 exports.htmlTdTagRenderer = (0, renderers_1.createComponentRenderer)("td", exports.HtmlTdMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
@@ -1270,10 +1270,10 @@ exports.HtmlThMd = (0, ComponentDefs_1.createMetadata)({
         "fontSize-HtmlTh": "$fontSize-tiny",
         "fontWeight-HtmlTh": "$fontWeight-bold",
         light: {
-            "color-bg-HtmlTh--hover": "$color-surface-200",
+            "backgroundColor-HtmlTh--hover": "$color-surface-200",
         },
         dark: {
-            "color-bg-HtmlTh--hover": "$color-surface-800",
+            "backgroundColor-HtmlTh--hover": "$color-surface-800",
         },
     },
 });
@@ -1290,11 +1290,11 @@ exports.HtmlTheadMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         "textTransform-HtmlThead": "uppercase",
         light: {
-            "color-bg-HtmlThead": "$color-surface-100",
-            "color-text-HtmlThead": "$color-surface-500",
+            "backgroundColor-HtmlThead": "$color-surface-100",
+            "color-HtmlThead": "$color-surface-500",
         },
         dark: {
-            "color-bg-HtmlThead": "$color-surface-950",
+            "backgroundColor-HtmlThead": "$color-surface-950",
         },
     },
 });
@@ -1323,12 +1323,12 @@ exports.HtmlTrMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(HtmlTags_module_scss_1.default.themeVarsTr),
     defaultThemeVars: {
         "fontSize-HtmlTr": "$fontSize-small",
-        "color-bg-row-HtmlTr": "inherit",
+        "backgroundColor-row-HtmlTr": "inherit",
         light: {
-            "color-bg-HtmlTr--hover": "$color-primary-50",
+            "backgroundColor-HtmlTr--hover": "$color-primary-50",
         },
         dark: {
-            "color-bg-HtmlTr--hover": "$color-primary-900",
+            "backgroundColor-HtmlTr--hover": "$color-primary-900",
         },
     },
 });

package/dist/scripts/src/components/Link/Link.js

@@ -39,8 +39,8 @@ exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
         [`gap-icon-${COMP}`]: "This property defines the size of the gap between the icon and the label.",
     },
     defaultThemeVars: {
-        [`border-${COMP}`]: "0px solid $color-border",
-        [`color-text-${COMP}--hover--active`]: `$color-text-${COMP}--active`,
+        [`border-${COMP}`]: "0px solid $borderColor",
+        [`color-${COMP}--hover--active`]: `$color-${COMP}--active`,
         [`textDecorationColor-${COMP}--hover`]: "$color-surface-400A80",
         [`textDecorationColor-${COMP}--active`]: "$color-surface200",
         [`fontWeight-${COMP}--active`]: "$fontWeight-bold",
@@ -57,12 +57,12 @@ exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
         [`gap-icon-${COMP}`]: "$gap-tight",
         [`padding-icon-${COMP}`]: "$space-0_5",
         light: {
-            [`color-text-${COMP}`]: "$color-primary-500",
-            [`color-text-${COMP}--active`]: "$color-primary-500",
+            [`color-${COMP}`]: "$color-primary-500",
+            [`color-${COMP}--active`]: "$color-primary-500",
         },
         dark: {
-            [`color-text-${COMP}`]: "$color-primary-500",
-            [`color-text-${COMP}--active`]: "$color-primary-500",
+            [`color-${COMP}`]: "$color-primary-500",
+            [`color-${COMP}--active`]: "$color-primary-500",
         },
     },
 });

package/dist/scripts/src/components/List/ListNative.js

@@ -49,12 +49,12 @@ exports.ListNative = exports.ListContext = void 0;
 exports.useListData = useListData;
 exports.MemoizedSection = MemoizedSection;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = __importStar(require("react"));
+const react_1 = __importStar(require("react"));
 const lodash_es_1 = require("lodash-es");
 const constants_1 = require("../../components-core/constants");
 const CardNative_1 = require("../Card/CardNative");
 const virtua_1 = require("virtua");
+const hooks_1 = require("../../components-core/utils/hooks");
 const ScrollContext_1 = require("../../components-core/ScrollContext");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const List_module_scss_1 = __importDefault(require("./List.module.scss"));
@@ -63,7 +63,7 @@ const misc_1 = require("../../components-core/utils/misc");
 const SpinnerNative_1 = require("../Spinner/SpinnerNative");
 const TextNative_1 = require("../Text/TextNative");
 const container_helpers_1 = require("../container-helpers");
-exports.ListContext = react_2.default.createContext({
+exports.ListContext = react_1.default.createContext({
     isExpanded: (id) => false,
     toggleExpanded: (id, isExpanded) => { },
 });
@@ -74,7 +74,7 @@ var RowType;
     RowType["ITEM"] = "ITEM";
 })(RowType || (RowType = {}));
 function useListData({ groupsInitiallyExpanded = true, expanded = constants_1.EMPTY_OBJECT, items, limit, groupBy, orderBy, availableGroups, defaultGroups = constants_1.EMPTY_ARRAY, }) {
-    const sortedItems = (0, react_2.useMemo)(() => {
+    const sortedItems = (0, react_1.useMemo)(() => {
         if (!orderBy) {
             return items;
         }
@@ -90,19 +90,19 @@ function useListData({ groupsInitiallyExpanded = true, expanded = constants_1.EM
         const fieldDirectionsToOrderBy = arrayOrderBy.map((ob) => ob.direction);
         return (0, lodash_es_1.orderBy)(items, fieldSelectorsToOrderBy, fieldDirectionsToOrderBy);
     }, [items, orderBy]);
-    const cappedItems = (0, react_2.useMemo)(() => {
+    const cappedItems = (0, react_1.useMemo)(() => {
         if (!limit) {
             return sortedItems;
         }
         return sortedItems.slice(0, limit - 1);
     }, [sortedItems, limit]);
-    const sectionedItems = (0, react_2.useMemo)(() => {
+    const sectionedItems = (0, react_1.useMemo)(() => {
         if (groupBy === undefined) {
             return constants_1.EMPTY_OBJECT;
         }
         return (0, lodash_es_1.groupBy)(cappedItems, (item) => item[groupBy]);
     }, [cappedItems, groupBy]);
-    const sections = (0, react_2.useMemo)(() => {
+    const sections = (0, react_1.useMemo)(() => {
         if (groupBy === undefined) {
             return constants_1.EMPTY_ARRAY;
         }
@@ -114,7 +114,7 @@ function useListData({ groupsInitiallyExpanded = true, expanded = constants_1.EM
         }
         return foundSectionKeys;
     }, [groupBy, sectionedItems, defaultGroups, availableGroups]);
-    const rows = (0, react_2.useMemo)(() => {
+    const rows = (0, react_1.useMemo)(() => {
         if (groupBy === undefined) {
             return cappedItems;
         }
@@ -171,8 +171,8 @@ const defaultItemRenderer = (item, id) => {
     return (0, jsx_runtime_1.jsx)(CardNative_1.Card, { title: title, subtitle: subtitle });
 };
 // eslint-disable-next-line react/display-name
-const Item = (0, react_2.forwardRef)(({ children, style, index }, forwardedRef) => {
-    const getItemType = (0, react_2.useContext)(ListItemTypeContext);
+const Item = (0, react_1.forwardRef)(({ children, style, index }, forwardedRef) => {
+    const getItemType = (0, react_1.useContext)(ListItemTypeContext);
     const itemType = getItemType(index) || RowType.ITEM;
     return ((0, jsx_runtime_1.jsx)("div", { style: style, ref: forwardedRef, className: (0, classnames_1.default)({
             [List_module_scss_1.default.row]: itemType === RowType.ITEM,
@@ -180,7 +180,7 @@ const Item = (0, react_2.forwardRef)(({ children, style, index }, forwardedRef)
             [List_module_scss_1.default.sectionFooter]: itemType === RowType.SECTION_FOOTER,
         }), "data-list-item-type": itemType, "data-index": index, children: children }));
 });
-const ListItemTypeContext = (0, react_2.createContext)((index) => RowType.ITEM);
+const ListItemTypeContext = (0, react_1.createContext)((index) => RowType.ITEM);
 /**
  * Virtua's `shift` prop helps maintain scroll position when prepending items (like message history).
  * Unfortunately it's finicky and must only be `true` when the beginning of the list changes, otherwise
@@ -195,8 +195,8 @@ const ListItemTypeContext = (0, react_2.createContext)((index) => RowType.ITEM);
  */
 const useShift = (listData, idKey) => {
     var _a, _b, _c;
-    const previousListData = (0, react_2.useRef)();
-    const shouldShift = (0, react_2.useRef)();
+    const previousListData = (0, react_1.useRef)();
+    const shouldShift = (0, react_1.useRef)();
     if (listData !== previousListData.current) {
         if (((_a = listData === null || listData === void 0 ? void 0 : listData[0]) === null || _a === void 0 ? void 0 : _a[idKey]) !== ((_c = (_b = previousListData.current) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c[idKey])) {
             shouldShift.current = true;
@@ -208,23 +208,26 @@ const useShift = (listData, idKey) => {
     }
     return shouldShift.current;
 };
-exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items = constants_1.EMPTY_ARRAY, itemRenderer = defaultItemRenderer, sectionRenderer, sectionFooterRenderer, loading, limit, groupBy, orderBy, availableGroups, scrollAnchor = "top", requestFetchPrevPage = lodash_es_1.noop, requestFetchNextPage = lodash_es_1.noop, pageInfo, idKey = "id", style, emptyListPlaceholder, groupsInitiallyExpanded = true, defaultGroups = constants_1.EMPTY_ARRAY, registerComponentApi, borderCollapse = true, }, ref) {
-    var _a, _b;
-    const virtualizerRef = (0, react_2.useRef)(null);
-    const scrollRef = (0, react_2.useContext)(ScrollContext_1.ScrollContext);
-    const parentRef = (0, react_2.useRef)(null);
+exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList({ items = constants_1.EMPTY_ARRAY, itemRenderer = defaultItemRenderer, sectionRenderer, sectionFooterRenderer, loading, limit, groupBy, orderBy, availableGroups, scrollAnchor = "top", requestFetchPrevPage = lodash_es_1.noop, requestFetchNextPage = lodash_es_1.noop, pageInfo, idKey = "id", style, emptyListPlaceholder, groupsInitiallyExpanded = true, defaultGroups = constants_1.EMPTY_ARRAY, registerComponentApi, borderCollapse = true, }, ref) {
+    var _a;
+    const virtualizerRef = (0, react_1.useRef)(null);
+    const scrollRef = (0, react_1.useContext)(ScrollContext_1.ScrollContext);
+    const parentRef = (0, react_1.useRef)(null);
     const rootRef = ref ? (0, react_compose_refs_1.composeRefs)(parentRef, ref) : parentRef;
+    const offsetsRef = (0, react_1.useRef)({
+        offsetTop: 0,
+    });
     const hasOutsideScroll = scrollRef &&
         (style === null || style === void 0 ? void 0 : style.maxHeight) === undefined &&
         (style === null || style === void 0 ? void 0 : style.height) === undefined &&
         (style === null || style === void 0 ? void 0 : style.flex) === undefined;
     const scrollElementRef = hasOutsideScroll ? scrollRef : parentRef;
-    const shouldStickToBottom = (0, react_2.useRef)(scrollAnchor === "bottom");
-    const [expanded, setExpanded] = (0, react_2.useState)(constants_1.EMPTY_OBJECT);
-    const toggleExpanded = (0, react_2.useCallback)((id, isExpanded) => {
+    const shouldStickToBottom = (0, react_1.useRef)(scrollAnchor === "bottom");
+    const [expanded, setExpanded] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
+    const toggleExpanded = (0, react_1.useCallback)((id, isExpanded) => {
         setExpanded((prev) => (Object.assign(Object.assign({}, prev), { [id]: isExpanded })));
     }, []);
-    const expandContextValue = (0, react_2.useMemo)(() => {
+    const expandContextValue = (0, react_1.useMemo)(() => {
         return {
             isExpanded: (id) => expanded[id] || (expanded[id] === undefined && groupsInitiallyExpanded),
             toggleExpanded,
@@ -241,8 +244,8 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
         availableGroups,
     });
     const shift = useShift(rows, idKey);
-    const initiallyScrolledToBottom = (0, react_2.useRef)(false);
-    (0, react_2.useEffect)(() => {
+    const initiallyScrolledToBottom = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
         if (rows.length && scrollAnchor === "bottom" && !initiallyScrolledToBottom.current) {
             initiallyScrolledToBottom.current = true;
             requestAnimationFrame(() => {
@@ -253,7 +256,7 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
             });
         }
     }, [rows.length, scrollAnchor]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (!virtualizerRef.current)
             return;
         if (!shouldStickToBottom.current)
@@ -265,8 +268,8 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
             });
         });
     }, [rows]);
-    const isFetchingPrevPage = (0, react_2.useRef)(false);
-    const tryToFetchPrevPage = (0, react_2.useCallback)(() => {
+    const isFetchingPrevPage = (0, react_1.useRef)(false);
+    const tryToFetchPrevPage = (0, react_1.useCallback)(() => {
         if (virtualizerRef.current &&
             virtualizerRef.current.findStartIndex() < 10 &&
             pageInfo &&
@@ -286,8 +289,8 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
             })();
         }
     }, [pageInfo, requestFetchPrevPage]);
-    const isFetchingNextPage = (0, react_2.useRef)(false);
-    const tryToFetchNextPage = (0, react_2.useCallback)(() => {
+    const isFetchingNextPage = (0, react_1.useRef)(false);
+    const tryToFetchNextPage = (0, react_1.useCallback)(() => {
         if (virtualizerRef.current &&
             virtualizerRef.current.findEndIndex() + 10 > rows.length &&
             pageInfo &&
@@ -307,14 +310,14 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
             })();
         }
     }, [rows.length, pageInfo, requestFetchNextPage]);
-    const initiallyFetchedExtraPages = (0, react_2.useRef)(false);
-    (0, react_2.useEffect)(() => {
+    const initiallyFetchedExtraPages = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
         if (rows.length && !initiallyFetchedExtraPages.current) {
             initiallyFetchedExtraPages.current = true;
             tryToFetchPrevPage();
         }
     }, [rows.length, tryToFetchNextPage, tryToFetchPrevPage]);
-    const onScroll = (0, react_2.useCallback)((offset) => {
+    const onScroll = (0, react_1.useCallback)((offset) => {
         if (!virtualizerRef.current)
             return;
         if (scrollAnchor === "bottom") {
@@ -335,13 +338,17 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
     });
     const scrollToTop = (0, misc_1.useEvent)(() => {
         var _a;
+        const scrollPaddingTop = parseInt(getComputedStyle(scrollRef.current).scrollPaddingTop, 10) || 0;
         if (rows.length) {
-            (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(0);
+            (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(0, { align: "start", offset: -scrollPaddingTop });
         }
     });
     const scrollToIndex = (0, misc_1.useEvent)((index) => {
         var _a;
-        (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(index);
+        const scrollPaddingTop = parseInt(getComputedStyle(scrollRef.current).scrollPaddingTop, 10) || 0;
+        (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(index, {
+            offset: -scrollPaddingTop,
+        });
     });
     const scrollToId = (0, misc_1.useEvent)((id) => {
         const index = rows === null || rows === void 0 ? void 0 : rows.findIndex((row) => row[idKey] === id);
@@ -349,7 +356,14 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
             scrollToIndex(index);
         }
     });
-    (0, react_2.useLayoutEffect)(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (parentRef.current && hasOutsideScroll && scrollRef.current) {
+            offsetsRef.current.offsetTop =
+                parentRef.current.getBoundingClientRect().top -
+                    scrollRef.current.getBoundingClientRect().top;
+        }
+    }, [hasOutsideScroll]);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             scrollToBottom,
             scrollToTop,
@@ -357,7 +371,7 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
             scrollToId,
         });
     }, [registerComponentApi, scrollToBottom, scrollToId, scrollToIndex, scrollToTop]);
-    const rowTypeContextValue = (0, react_2.useCallback)((index) => rows[index]._row_type, [rows]);
+    const rowTypeContextValue = (0, react_1.useCallback)((index) => rows[index]._row_type, [rows]);
     return ((0, jsx_runtime_1.jsx)(ListItemTypeContext.Provider, { value: rowTypeContextValue, children: (0, jsx_runtime_1.jsx)(exports.ListContext.Provider, { value: expandContextValue, children: (0, jsx_runtime_1.jsxs)("div", { ref: rootRef, style: style, className: (0, classnames_1.default)(List_module_scss_1.default.outerWrapper, {
                     [List_module_scss_1.default.hasOutsideScroll]: hasOutsideScroll,
                 }), children: [loading && rows.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: List_module_scss_1.default.loadingWrapper, children: (0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, {}) })), !loading &&
@@ -366,7 +380,7 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
                             [List_module_scss_1.default.reverse]: scrollAnchor === "bottom",
                             [List_module_scss_1.default.borderCollapse]: borderCollapse,
                             [List_module_scss_1.default.sectioned]: groupBy !== undefined,
-                        }), "data-list-container": true, children: (0, jsx_runtime_1.jsx)(virtua_1.Virtualizer, { ref: virtualizerRef, scrollRef: scrollElementRef, shift: shift, onScroll: onScroll, startMargin: !hasOutsideScroll ? 0 : ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) || 0, item: Item, count: (_b = rows.length) !== null && _b !== void 0 ? _b : 0, children: (rowIndex) => {
+                        }), "data-list-container": true, children: (0, jsx_runtime_1.jsx)(virtua_1.Virtualizer, { ref: virtualizerRef, scrollRef: scrollElementRef, shift: shift, onScroll: onScroll, startMargin: offsetsRef.current.offsetTop, item: Item, count: (_a = rows.length) !== null && _a !== void 0 ? _a : 0, children: (rowIndex) => {
                                 const row = rows[rowIndex];
                                 const key = row[idKey];
                                 switch (row._row_type) {
@@ -381,10 +395,10 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
 });
 // --- Helper function for List item rendering
 function MemoizedSection({ node, renderChild, item, }) {
-    const { isExpanded, toggleExpanded } = (0, react_2.useContext)(exports.ListContext);
+    const { isExpanded, toggleExpanded } = (0, react_1.useContext)(exports.ListContext);
     const id = item.id;
     const expanded = isExpanded(id);
-    const sectionContext = (0, react_2.useMemo)(() => {
+    const sectionContext = (0, react_1.useMemo)(() => {
         return {
             isExpanded: expanded,
             toggle: () => {

package/dist/scripts/src/components/Markdown/Markdown.js

@@ -26,9 +26,9 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
     defaultThemeVars: {
-        "color-border-HorizontalRule": "$color-border",
-        "thickness-border-HorizontalRule": "1px",
-        "style-border-HorizontalRule": "solid",
+        "borderColor-HorizontalRule": "$borderColor",
+        "borderWidth-HorizontalRule": "1px",
+        "borderStyle-HorizontalRule": "solid",
         "accent-Blockquote": "$color-primary",
         "padding-Blockquote": "$space-2 $space-6",
         "margin-Blockquote": "$space-2",

package/dist/scripts/src/components/ModalDialog/ModalDialog.js

@@ -51,8 +51,8 @@ exports.ModalDialogMd = (0, ComponentDefs_1.createMetadata)({
             "second (and so on) parameters. \`$param\` is the same as \`$params[0]\`."),
     },
     themeVars: (0, themeVars_1.parseScssVar)(ModalDialog_module_scss_1.default.themeVars),
-    defaultThemeVars: Object.assign(Object.assign({}, (0, base_utils_1.paddingSubject)(COMP, { all: "$space-7" })), { [`color-bg-${COMP}`]: "$color-bg-primary", [`color-bg-overlay-${COMP}`]: "$color-bg-overlay", [`color-text-${COMP}`]: "$color-text-primary", [`borderRadius-${COMP}`]: "$borderRadius", [`fontFamily-${COMP}`]: "$fontFamily", [`maxWidth-${COMP}`]: "450px", [`marginBottom-title-${COMP}`]: "0", dark: {
-            [`color-bg-${COMP}`]: "$color-bg-primary",
+    defaultThemeVars: Object.assign(Object.assign({}, (0, base_utils_1.paddingSubject)(COMP, { all: "$space-7" })), { [`backgroundColor-${COMP}`]: "$backgroundColor-primary", [`backgroundColor-overlay-${COMP}`]: "$backgroundColor-overlay", [`color-${COMP}`]: "$textColor-primary", [`borderRadius-${COMP}`]: "$borderRadius", [`fontFamily-${COMP}`]: "$fontFamily", [`maxWidth-${COMP}`]: "450px", [`marginBottom-title-${COMP}`]: "0", dark: {
+            [`backgroundColor-${COMP}`]: "$backgroundColor-primary",
         } }),
 });
 exports.modalViewComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ModalDialogMd, ({ node, extractValue, layoutCss, renderChild, lookupEventHandler, registerComponentApi, layoutContext, }) => {

package/dist/scripts/src/components/NavGroup/NavGroup.js

@@ -24,9 +24,9 @@ exports.NavGroupMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(NavGroup_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`color-bg-dropdown-${COMP}`]: "$color-bg-primary",
+        [`backgroundColor-dropdown-${COMP}`]: "$backgroundColor-primary",
         [`borderRadius-dropdown-${COMP}`]: "$borderRadius",
-        [`boxShadow-dropdown-${COMP}`]: "$shadow-spread",
+        [`boxShadow-dropdown-${COMP}`]: "$boxShadow-spread",
     },
 });
 exports.navGroupComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavGroupMd, ({ node, extractValue, renderChild }) => {

package/dist/scripts/src/components/NavLink/NavLink.js

@@ -57,15 +57,15 @@ exports.NavLinkMd = (0, ComponentDefs_1.createMetadata)({
         [`color-indicator-${COMP}`]: "Provides the following states: `--hover`, `--active`, `--pressed`",
     },
     defaultThemeVars: {
-        [`border-${COMP}`]: "0px solid $color-border",
+        [`border-${COMP}`]: "0px solid $borderColor",
         [`borderRadius-${COMP}`]: "$borderRadius",
-        [`color-bg-${COMP}`]: "transparent",
+        [`backgroundColor-${COMP}`]: "transparent",
         [`paddingHorizontal-${COMP}`]: "$space-4",
         [`paddingVertical-${COMP}`]: "$space-2",
         [`fontSize-${COMP}`]: "$fontSize-small",
         [`fontWeight-${COMP}`]: "$fontWeight-normal",
         [`fontFamily-${COMP}`]: "$fontFamily",
-        [`color-text-${COMP}`]: "$color-text-primary",
+        [`color-${COMP}`]: "$textColor-primary",
         [`fontWeight-${COMP}--pressed`]: "$fontWeight-normal",
         [`thickness-indicator-${COMP}`]: "$space-0_5",
         [`outlineColor-${COMP}--focus`]: "$outlineColor--focus",

package/dist/scripts/src/components/NavPanel/NavPanel.js

@@ -20,8 +20,8 @@ exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(NavPanel_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`color-bg-${COMP}`]: "transparent",
-        [`border-${COMP}`]: '0px solid $color-border',
+        [`backgroundColor-${COMP}`]: "transparent",
+        [`border-${COMP}`]: '0px solid $borderColor',
         [`paddingHorizontal-${COMP}`]: "$space-4",
         [`paddingVertical-logo-${COMP}`]: "$space-4",
         [`paddingHorizontal-logo-${COMP}`]: "$space-4",

package/dist/scripts/src/components/NoResult/NoResult.js

@@ -26,7 +26,7 @@ exports.NoResultMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(NoResult_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`border-${COMP}`]: "0px solid $color-border",
+        [`border-${COMP}`]: "0px solid $borderColor",
         [`paddingVertical-${COMP}`]: "$space-2",
         [`gap-icon-${COMP}`]: "$space-2",
         [`size-icon-${COMP}`]: "$space-8",

package/dist/scripts/src/components/OffCanvas/OffCanvas.js

@@ -45,7 +45,7 @@ exports.OffCanvasMd = (0, ComponentDefs_1.createMetadata)({
         "padding-OffCanvas": "$padding-tight",
         "paddingVertical-OffCanvas": "$padding-tight",
         "paddingHorizontal-OffCanvas": "$padding-normal",
-        "color-bg-OffCanvas": "$color-bg",
+        "backgroundColor-OffCanvas": "$backgroundColor",
         "boxShadow-horizontal-OffCanvas": "0 2px 10px rgba(0, 0, 0, 0.2)",
         "boxShadow-vertical-OffCanvas": "0 2px 10px rgba(0, 0, 0, 0.2)",
         light: {},

package/dist/scripts/src/components/ProgressBar/ProgressBar.js

@@ -26,11 +26,11 @@ exports.ProgressBarMd = (0, ComponentDefs_1.createMetadata)({
         [`borderRadius-indicator-${COMP}`]: "0px",
         [`thickness-${COMP}`]: "$space-2",
         light: {
-            [`color-bg-${COMP}`]: "$color-surface-200",
+            [`backgroundColor-${COMP}`]: "$color-surface-200",
             [`color-indicator-${COMP}`]: "$color-primary-500",
         },
         dark: {
-            [`color-bg-${COMP}`]: "$color-surface-700",
+            [`backgroundColor-${COMP}`]: "$color-surface-700",
             [`color-indicator-${COMP}`]: "$color-primary-500",
         },
     },

package/dist/scripts/src/components/RadioGroup/RadioGroup.js

@@ -39,27 +39,27 @@ exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(RadioGroup_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`gap-${RGOption}`]: "$space-1_5",
-        [`thickness-border-${RGOption}`]: "2px",
-        [`color-bg-checked-${RGOption}--disabled]`]: `$color-border-${RGOption}--disabled`,
-        [`color-bg-checked-${RGOption}-error`]: `$color-border-${RGOption}-error`,
-        [`color-bg-checked-${RGOption}-warning`]: `$color-border-${RGOption}-warning`,
-        [`color-bg-checked-${RGOption}-success`]: `$color-border-${RGOption}-success`,
+        [`borderWidth-${RGOption}`]: "2px",
+        [`backgroundColor-checked-${RGOption}--disabled]`]: `$borderColor-${RGOption}--disabled`,
+        [`backgroundColor-checked-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
+        [`backgroundColor-checked-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,
+        [`backgroundColor-checked-${RGOption}-success`]: `$borderColor-${RGOption}-success`,
         [`fontSize-${RGOption}`]: "$fontSize-small",
         [`fontWeight-${RGOption}`]: "$fontWeight-bold",
-        [`color-text-${RGOption}-error`]: `$color-border-${RGOption}-error`,
-        [`color-text-${RGOption}-warning`]: `$color-border-${RGOption}-warning`,
-        [`color-text-${RGOption}-success`]: `$color-border-${RGOption}-success`,
+        [`color-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
+        [`color-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,
+        [`color-${RGOption}-success`]: `$borderColor-${RGOption}-success`,
         light: {
-            [`color-bg-checked-${RGOption}-default`]: "$color-primary-500",
-            [`color-border-${RGOption}-default`]: "$color-surface-500",
-            [`color-border-${RGOption}-default--hover`]: "$color-surface-700",
-            [`color-border-${RGOption}-default--active`]: "$color-primary-500",
+            [`backgroundColor-checked-${RGOption}-default`]: "$color-primary-500",
+            [`borderColor-${RGOption}-default`]: "$color-surface-500",
+            [`borderColor-${RGOption}-default--hover`]: "$color-surface-700",
+            [`borderColor-${RGOption}-default--active`]: "$color-primary-500",
         },
         dark: {
-            [`color-bg-checked-${RGOption}-default`]: "$color-primary-500",
-            [`color-border-${RGOption}-default`]: "$color-surface-500",
-            [`color-border-${RGOption}-default--hover`]: "$color-surface-300",
-            [`color-border-${RGOption}-default--active`]: "$color-primary-400",
+            [`backgroundColor-checked-${RGOption}-default`]: "$color-primary-500",
+            [`borderColor-${RGOption}-default`]: "$color-surface-500",
+            [`borderColor-${RGOption}-default--hover`]: "$color-surface-300",
+            [`borderColor-${RGOption}-default--active`]: "$color-primary-400",
         },
     },
 });

package/dist/scripts/src/components/Select/Select.js

@@ -54,32 +54,32 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Select_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`color-bg-menu-${COMP}`]: "$color-bg-primary",
-        [`boxShadow-menu-${COMP}`]: "$shadow-md",
+        [`backgroundColor-menu-${COMP}`]: "$backgroundColor-primary",
+        [`boxShadow-menu-${COMP}`]: "$boxShadow-md",
         [`borderRadius-menu-${COMP}`]: "$borderRadius",
-        [`thickness-border-menu-${COMP}`]: "1px",
-        [`color-border-menu-${COMP}`]: "$color-border",
-        [`color-bg-item-${COMP}`]: "$color-bg-dropdown-item",
-        [`color-bg-item-${COMP}--hover`]: "$color-bg-dropdown-item--active",
-        [`color-bg-item-${COMP}--active`]: "$color-bg-dropdown-item--active",
+        [`borderWidth-menu-${COMP}`]: "1px",
+        [`borderColor-menu-${COMP}`]: "$borderColor",
+        [`backgroundColor-item-${COMP}`]: "$backgroundColor-dropdown-item",
+        [`backgroundColor-item-${COMP}--hover`]: "$backgroundColor-dropdown-item--active",
+        [`backgroundColor-item-${COMP}--active`]: "$backgroundColor-dropdown-item--active",
         [`minHeight-Input`]: "39px",
-        [`color-bg-${COMP}-badge`]: "$color-primary-500",
+        [`backgroundColor-${COMP}-badge`]: "$color-primary-500",
         [`fontSize-${COMP}-badge`]: "$fontSize-small",
         [`paddingHorizontal-${COMP}-badge`]: "$space-1",
         [`paddingVertical-${COMP}-badge`]: "$space-1",
         [`opacity-text-item-${COMP}--disabled`]: "0.5",
         [`opacity-${COMP}--disabled`]: "0.5",
         light: {
-            [`color-bg-${COMP}-badge--hover`]: "$color-primary-400",
-            [`color-bg-${COMP}-badge--active`]: "$color-primary-500",
-            [`color-text-item-${COMP}--disabled`]: "$color-surface-200",
-            [`color-text-${COMP}-badge`]: "$color-surface-50",
+            [`backgroundColor-${COMP}-badge--hover`]: "$color-primary-400",
+            [`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
+            [`color-item-${COMP}--disabled`]: "$color-surface-200",
+            [`color-${COMP}-badge`]: "$color-surface-50",
         },
         dark: {
-            [`color-bg-${COMP}-badge--hover`]: "$color-primary-600",
-            [`color-bg-${COMP}-badge--active`]: "$color-primary-500",
-            [`color-text-${COMP}-badge`]: "$color-surface-50",
-            [`color-text-item-${COMP}--disabled`]: "$color-surface-800",
+            [`backgroundColor-${COMP}-badge--hover`]: "$color-primary-600",
+            [`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
+            [`color-${COMP}-badge`]: "$color-surface-50",
+            [`color-item-${COMP}--disabled`]: "$color-surface-800",
         },
     },
 });

package/dist/scripts/src/components/Slider/Slider.js

@@ -46,20 +46,20 @@ exports.SliderMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Slider_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`color-bg-track-${COMP}`]: "$color-surface-200",
-        [`color-bg-range-${COMP}`]: "$color-primary",
-        [`thickness-border-thumb-${COMP}`]: "2px",
-        [`style-border-thumb-${COMP}`]: "solid",
-        [`color-border-thumb-${COMP}`]: "$color-surface-50",
-        [`color-bg-thumb-${COMP}`]: "$color-primary",
-        [`boxShadow-thumb-${COMP}`]: "$shadow-md",
+        [`backgroundColor-track-${COMP}`]: "$color-surface-200",
+        [`backgroundColor-range-${COMP}`]: "$color-primary",
+        [`borderWidth-thumb-${COMP}`]: "2px",
+        [`borderStyle-thumb-${COMP}`]: "solid",
+        [`borderColor-thumb-${COMP}`]: "$color-surface-50",
+        [`backgroundColor-thumb-${COMP}`]: "$color-primary",
+        [`boxShadow-thumb-${COMP}`]: "$boxShadow-md",
         light: {
-            [`color-bg-track-${COMP}--disabled`]: "$color-surface-300",
-            [`color-bg-range-${COMP}--disabled`]: "$color-surface-400",
+            [`backgroundColor-track-${COMP}--disabled`]: "$color-surface-300",
+            [`backgroundColor-range-${COMP}--disabled`]: "$color-surface-400",
         },
         dark: {
-            [`color-bg-track-${COMP}--disabled`]: "$color-surface-600",
-            [`color-bg-range-${COMP}--disabled`]: "$color-surface-800",
+            [`backgroundColor-track-${COMP}--disabled`]: "$color-surface-600",
+            [`backgroundColor-range-${COMP}--disabled`]: "$color-surface-800",
         },
     },
 });

package/dist/scripts/src/components/Spinner/Spinner.js

@@ -32,10 +32,10 @@ exports.SpinnerMd = (0, ComponentDefs_1.createMetadata)({
         [`size-${COMP}`]: "$space-10",
         [`thickness-${COMP}`]: "$space-0_5",
         light: {
-            [`color-border-${COMP}`]: "$color-surface-400",
+            [`borderColor-${COMP}`]: "$color-surface-400",
         },
         dark: {
-            [`color-border-${COMP}`]: "$color-surface-600",
+            [`borderColor-${COMP}`]: "$color-surface-600",
         },
     },
 });

package/dist/scripts/src/components/Splitter/Splitter.js

@@ -63,7 +63,7 @@ const baseSplitterMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Splitter_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`color-bg-resizer-${COMP}`]: "$color-bg-Card",
+        [`backgroundColor-resizer-${COMP}`]: "$backgroundColor-Card",
         [`thickness-resizer-${COMP}`]: "5px",
         [`cursor-resizer-horizontal-${COMP}`]: "ew-resize",
         [`cursor-resizer-vertical-${COMP}`]: "ns-resize",

package/dist/scripts/src/components/StickyBox/StickyBox.js

@@ -26,7 +26,7 @@ exports.StickyBoxMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(StickyBox_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`color-bg-${COMP}`]: "$color-bg",
+        [`backgroundColor-${COMP}`]: "$backgroundColor",
     },
 });
 exports.stickyBoxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.StickyBoxMd, ({ node, renderChild, extractValue, layoutCss }) => {