xmlui 0.7.33 → 0.8.0

package/dist/scripts/src/abstractions/ComponentDefs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createMetadata = createMetadata;
 exports.d = d;
-function createMetadata({ description, shortDescription, specializedFrom, status, props, events, contextVars, apis, nonVisual, opaque, themeVars, defaultThemeVars, toneSpecificThemeVars, allowArbitraryProps, docFolder, isHtmlTag, }) {
+function createMetadata({ description, shortDescription, specializedFrom, status, props, events, contextVars, apis, nonVisual, opaque, themeVars, themeVarDescriptions, defaultThemeVars, toneSpecificThemeVars, allowArbitraryProps, docFolder, isHtmlTag, }) {
     return {
         description,
         shortDescription,
@@ -16,6 +16,7 @@ function createMetadata({ description, shortDescription, specializedFrom, status
         opaque,
         themeVars,
         defaultThemeVars,
+        themeVarDescriptions,
         toneSpecificThemeVars,
         allowArbitraryProps,
         docFolder,

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

@@ -61,29 +61,29 @@ exports.AccordionMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Accordion_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`padding-horizontal-header-${COMP}`]: "$space-3",
-        [`padding-vertical-header-${COMP}`]: "$space-3",
+        [`paddingHorizontal-header-${COMP}`]: "$space-3",
+        [`paddingVertical-header-${COMP}`]: "$space-3",
         [`align-vertical-header-${COMP}`]: "center",
-        [`font-size-header-${COMP}`]: "$font-size-normal",
-        [`font-weight-header-${COMP}`]: "$font-weight-normal",
-        [`font-family-header-${COMP}`]: "$font-family",
-        [`border-${COMP}`]: "0px solid $color-border",
+        [`fontSize-header-${COMP}`]: "$fontSize-normal",
+        [`fontWeight-header-${COMP}`]: "$fontWeight-normal",
+        [`fontFamily-header-${COMP}`]: "$fontFamily",
+        [`border-${COMP}`]: "0px solid $borderColor",
         [`width-icon-${COMP}`]: "",
         [`height-icon-${COMP}`]: "",
         light: {
-            [`color-bg-header-${COMP}`]: "$color-primary-500",
-            [`color-bg-header-${COMP}-hover`]: "$color-primary-400",
+            [`backgroundColor-header-${COMP}`]: "$color-primary-500",
+            [`backgroundColor-header-${COMP}-hover`]: "$color-primary-400",
             [`color-header-${COMP}`]: "$color-surface-50",
-            [`color-content-${COMP}`]: "$color-text-primary",
-            [`color-bg-content-${COMP}`]: "transparent",
+            [`color-content-${COMP}`]: "$textColor-primary",
+            [`backgroundColor-content-${COMP}`]: "transparent",
             [`color-icon-${COMP}`]: "$color-surface-50",
         },
         dark: {
-            [`color-bg-header-${COMP}`]: "$color-primary-500",
-            [`color-bg-header-${COMP}-hover`]: "$color-primary-600",
+            [`backgroundColor-header-${COMP}`]: "$color-primary-500",
+            [`backgroundColor-header-${COMP}-hover`]: "$color-primary-600",
             [`color-header-${COMP}`]: "$color-surface-50",
-            [`color-content-${COMP}`]: "$color-text-primary",
-            [`color-bg-content-${COMP}`]: "transparent",
+            [`color-content-${COMP}`]: "$textColor-primary",
+            [`backgroundColor-content-${COMP}`]: "transparent",
             [`color-icon-${COMP}`]: "$color-surface-50",
         },
     },

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

@@ -75,9 +75,9 @@ exports.AppMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(App_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`width-navPanel-${COMP}`]: "$space-64",
-        [`max-content-width-${COMP}`]: "$max-content-width",
-        [`shadow-header-${COMP}`]: "$shadow-spread",
-        [`shadow-pages-${COMP}`]: "$shadow-spread",
+        [`maxWidth-content-${COMP}`]: "$maxWidth-content",
+        [`boxShadow-header-${COMP}`]: "$boxShadow-spread",
+        [`boxShadow-pages-${COMP}`]: "$boxShadow-spread",
         [`scroll-padding-block-Pages`]: "$space-4",
         light: {
         // --- No light-specific theme vars

package/dist/scripts/src/components/App/AppNative.js

@@ -97,7 +97,7 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
             "--footer-height": !scrollWholePage ? 0 : footerHeight + "px",
             "--header-abs-height": headerHeight + "px",
             "--footer-abs-height": footerHeight + "px",
-            "--scrollbar-width": noScrollbarGutters ? 0 : (scrollbarWidth + "px"),
+            "--scrollbar-width": noScrollbarGutters ? 0 : scrollbarWidth + "px",
         };
     }, [footerHeight, headerHeight, noScrollbarGutters, scrollWholePage, scrollbarWidth]);
     const [drawerVisible, setDrawerVisible] = (0, react_1.useState)(false);
@@ -105,7 +105,7 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
     const toggleDrawer = (0, react_1.useCallback)(() => {
         setDrawerVisible((prev) => !prev);
     }, []);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         var _a;
         (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
             top: 0,

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

@@ -34,10 +34,13 @@ exports.AppHeaderMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
     themeVars: (0, themeVars_1.parseScssVar)(AppHeader_module_scss_1.default.themeVars),
-    defaultThemeVars: Object.assign(Object.assign(Object.assign({ "height-AppHeader": "$space-14", "max-content-width-AppHeader": "$max-content-width-App", "border-bottom-AppHeader": "1px solid $color-border" }, (0, base_utils_1.paddingSubject)("logo-AppHeader", { horizontal: "$space-0", vertical: "$space-4" })), (0, base_utils_1.paddingSubject)("AppHeader", { horizontal: "$space-4", vertical: "$space-0" })), { "radius-AppHeader": "0px", light: {
-            "color-bg-AppHeader": "white",
+    themeVarDescriptions: {
+        [`width-logo-${COMP}`]: "Sets the width of the displayed logo",
+    },
+    defaultThemeVars: Object.assign(Object.assign(Object.assign({ [`height-${COMP}`]: "$space-14", [`maxWidth-content-${COMP}`]: "$maxWidth-content-App", [`borderBottom-${COMP}`]: "1px solid $borderColor" }, (0, base_utils_1.paddingSubject)(`logo-${COMP}`, { horizontal: "$space-0", vertical: "$space-4" })), (0, base_utils_1.paddingSubject)(COMP, { horizontal: "$space-4", vertical: "$space-0" })), { [`borderRadius-${COMP}`]: "0px", light: {
+            [`backgroundColor-${COMP}`]: "white",
         }, dark: {
-            "color-bg-AppHeader": "$color-surface-900",
+            [`backgroundColor-${COMP}`]: "$color-surface-900",
         } }),
 });
 exports.appHeaderComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppHeaderMd, ({ node, renderChild, layoutCss, layoutContext, extractValue }) => {

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

@@ -49,28 +49,28 @@ exports.AutoCompleteMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(AutoComplete_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`color-bg-menu-${COMP}`]: "$color-bg-primary",
-        [`shadow-menu-${COMP}`]: "$shadow-md",
-        [`radius-menu-${COMP}`]: "$radius",
-        [`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",
-        [`min-height-Input`]: "39px",
-        [`color-bg-${COMP}-badge`]: "$color-primary-500",
-        [`font-size-${COMP}-badge`]: "$font-size-small",
-        [`padding-horizontal-${COMP}-badge`]: "$space-1",
-        [`padding-vertical-${COMP}-badge`]: "$space-1",
+        [`backgroundColor-menu-${COMP}`]: "$backgroundColor-primary",
+        [`boxShadow-menu-${COMP}`]: "$boxShadow-md",
+        [`borderRadius-menu-${COMP}`]: "$borderRadius",
+        [`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",
+        [`backgroundColor-${COMP}-badge`]: "$color-primary-500",
+        [`fontSize-${COMP}-badge`]: "$fontSize-small",
+        [`paddingHorizontal-${COMP}-badge`]: "$space-1",
+        [`paddingVertical-${COMP}-badge`]: "$space-1",
         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/Avatar/Avatar.js

@@ -35,18 +35,18 @@ exports.AvatarMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Avatar_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`radius-${COMP}`]: "4px",
-        [`shadow-${COMP}`]: "inset 0 0 0 1px rgba(4,32,69,0.1)",
-        [`color-text-${COMP}`]: "$color-text-secondary",
-        [`font-weight-${COMP}`]: "$font-weight-bold",
+        [`borderRadius-${COMP}`]: "4px",
+        [`boxShadow-${COMP}`]: "inset 0 0 0 1px rgba(4,32,69,0.1)",
+        [`color-${COMP}`]: "$textColor-secondary",
+        [`fontWeight-${COMP}`]: "$fontWeight-bold",
         light: {
             [`border-${COMP}`]: "0px solid $color-surface-400A80",
-            [`color-bg-${COMP}`]: "$color-surface-100",
+            [`backgroundColor-${COMP}`]: "$color-surface-100",
         },
         dark: {
             [`border-${COMP}`]: "0px solid $color-surface-700",
-            [`color-bg-${COMP}`]: "$color-surface-800",
-            [`color-border-${COMP}`]: "$color-surface-700",
+            [`backgroundColor-${COMP}`]: "$color-surface-800",
+            [`borderColor-${COMP}`]: "$color-surface-700",
         },
     },
 });

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

@@ -44,18 +44,18 @@ exports.BadgeMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(Badge_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`padding-${COMP}`]: `$space-0_5 $space-2`,
-        [`border-${COMP}`]: `0px solid $color-border`,
+        [`border-${COMP}`]: `0px solid $borderColor`,
         [`padding-${COMP}-pill`]: `$space-0_5 $space-2`,
-        [`radius-${COMP}`]: "4px",
-        [`font-size-${COMP}`]: "0.8em",
-        [`font-size-${COMP}-pill`]: "0.8em",
+        [`borderRadius-${COMP}`]: "4px",
+        [`fontSize-${COMP}`]: "0.8em",
+        [`fontSize-${COMP}-pill`]: "0.8em",
         light: {
-            [`color-bg-${COMP}`]: "rgba($color-secondary-500-rgb, .6)",
-            [`color-text-${COMP}`]: "white",
+            [`backgroundColor-${COMP}`]: "rgba($color-secondary-500-rgb, .6)",
+            [`color-${COMP}`]: "white",
         },
         dark: {
-            [`color-bg-${COMP}`]: "rgba($color-secondary-500-rgb, .6)",
-            [`color-text-${COMP}`]: "$color-surface-50",
+            [`backgroundColor-${COMP}`]: "rgba($color-secondary-500-rgb, .6)",
+            [`color-${COMP}`]: "$color-surface-50",
         },
     },
 });

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

@@ -95,88 +95,88 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`width-${COMP}`]: "fit-content",
         [`height-${COMP}`]: "fit-content",
-        [`radius-${COMP}`]: "$radius",
-        [`font-size-${COMP}`]: "$font-size-small",
-        [`font-weight-${COMP}`]: "$font-weight-medium",
-        [`color-bg-${COMP}-primary`]: "$color-primary-500",
-        [`color-bg-${COMP}-attention`]: "$color-bg-attention",
-        [`color-border-${COMP}-attention`]: "$color-attention",
-        [`color-bg-${COMP}--disabled`]: "$color-bg--disabled",
-        [`color-border-${COMP}--disabled`]: "$color-border--disabled",
-        [`style-border-${COMP}`]: "solid",
-        [`color-text-${COMP}--disabled`]: "$color-text--disabled",
-        [`color-outline-${COMP}--focus`]: "$color-outline--focus",
-        [`thickness-border-${COMP}`]: "1px",
-        [`thickness-outline-${COMP}--focus`]: "$thickness-outline--focus",
-        [`style-outline-${COMP}--focus`]: "$style-outline--focus",
-        [`offset-outline-${COMP}--focus`]: "$offset-outline--focus",
-        [`padding-horizontal-${COMP}-xs`]: "$space-1",
-        [`padding-vertical-${COMP}-xs`]: "$space-0_5",
-        [`padding-horizontal-${COMP}-sm`]: "$space-4",
-        [`padding-vertical-${COMP}-sm`]: "$space-2",
-        [`padding-horizontal-${COMP}-md`]: "$space-4",
-        [`padding-vertical-${COMP}-md`]: "$space-3",
-        [`padding-horizontal-${COMP}-lg`]: "$space-5",
-        [`padding-vertical-${COMP}-lg`]: "$space-4",
+        [`borderRadius-${COMP}`]: "$borderRadius",
+        [`fontSize-${COMP}`]: "$fontSize-small",
+        [`fontWeight-${COMP}`]: "$fontWeight-medium",
+        [`backgroundColor-${COMP}-primary`]: "$color-primary-500",
+        [`backgroundColor-${COMP}-attention`]: "$backgroundColor-attention",
+        [`borderColor-${COMP}-attention`]: "$color-attention",
+        [`backgroundColor-${COMP}--disabled`]: "$backgroundColor--disabled",
+        [`borderColor-${COMP}--disabled`]: "$borderColor--disabled",
+        [`borderStyle-${COMP}`]: "solid",
+        [`color-${COMP}--disabled`]: "$textColor--disabled",
+        [`outlineColor-${COMP}--focus`]: "$outlineColor--focus",
+        [`borderWidth-${COMP}`]: "1px",
+        [`outlineWidth-${COMP}--focus`]: "$outlineWidth--focus",
+        [`outlineStyle-${COMP}--focus`]: "$outlineStyle--focus",
+        [`outlineOffset-${COMP}--focus`]: "$outlineOffset--focus",
+        [`paddingHorizontal-${COMP}-xs`]: "$space-1",
+        [`paddingVertical-${COMP}-xs`]: "$space-0_5",
+        [`paddingHorizontal-${COMP}-sm`]: "$space-4",
+        [`paddingVertical-${COMP}-sm`]: "$space-2",
+        [`paddingHorizontal-${COMP}-md`]: "$space-4",
+        [`paddingVertical-${COMP}-md`]: "$space-3",
+        [`paddingHorizontal-${COMP}-lg`]: "$space-5",
+        [`paddingVertical-${COMP}-lg`]: "$space-4",
         light: {
-            [`color-text-${COMP}`]: "$color-surface-950",
-            [`color-text-${COMP}-solid`]: "$color-surface-50",
-            [`color-border-${COMP}-primary`]: "$color-primary-500",
-            [`color-bg-${COMP}-primary--hover`]: "$color-primary-400",
-            [`color-bg-${COMP}-primary--active`]: "$color-primary-500",
-            [`color-bg-${COMP}-primary-outlined--hover`]: "$color-primary-50",
-            [`color-bg-${COMP}-primary-outlined--active`]: "$color-primary-100",
-            [`color-border-${COMP}-primary-outlined`]: "$color-primary-600",
-            [`color-border-${COMP}-primary-outlined--hover`]: "$color-primary-500",
-            [`color-text-${COMP}-primary-outlined`]: "$color-primary-900",
-            [`color-text-${COMP}-primary-outlined--hover`]: "$color-primary-950",
-            [`color-text-${COMP}-primary-outlined--active`]: "$color-primary-900",
-            [`color-bg-${COMP}-primary-ghost--hover`]: "$color-primary-50",
-            [`color-bg-${COMP}-primary-ghost--active`]: "$color-primary-100",
-            [`color-border-${COMP}-secondary`]: "$color-secondary-100",
-            [`color-bg-${COMP}-secondary`]: "$color-secondary-500",
-            [`color-bg-${COMP}-secondary--hover`]: "$color-secondary-400",
-            [`color-bg-${COMP}-secondary--active`]: "$color-secondary-500",
-            [`color-bg-${COMP}-secondary-outlined--hover`]: "$color-secondary-50",
-            [`color-bg-${COMP}-secondary-outlined--active`]: "$color-secondary-100",
-            [`color-bg-${COMP}-secondary-ghost--hover`]: "$color-secondary-100",
-            [`color-bg-${COMP}-secondary-ghost--active`]: "$color-secondary-100",
-            [`color-bg-${COMP}-attention--hover`]: "$color-danger-400",
-            [`color-bg-${COMP}-attention--active`]: "$color-danger-500",
-            [`color-bg-${COMP}-attention-outlined--hover`]: "$color-danger-50",
-            [`color-bg-${COMP}-attention-outlined--active`]: "$color-danger-100",
-            [`color-bg-${COMP}-attention-ghost--hover`]: "$color-danger-50",
-            [`color-bg-${COMP}-attention-ghost--active`]: "$color-danger-100",
+            [`color-${COMP}`]: "$color-surface-950",
+            [`color-${COMP}-solid`]: "$color-surface-50",
+            [`borderColor-${COMP}-primary`]: "$color-primary-500",
+            [`backgroundColor-${COMP}-primary--hover`]: "$color-primary-400",
+            [`backgroundColor-${COMP}-primary--active`]: "$color-primary-500",
+            [`backgroundColor-${COMP}-primary-outlined--hover`]: "$color-primary-50",
+            [`backgroundColor-${COMP}-primary-outlined--active`]: "$color-primary-100",
+            [`borderColor-${COMP}-primary-outlined`]: "$color-primary-600",
+            [`borderColor-${COMP}-primary-outlined--hover`]: "$color-primary-500",
+            [`color-${COMP}-primary-outlined`]: "$color-primary-900",
+            [`color-${COMP}-primary-outlined--hover`]: "$color-primary-950",
+            [`color-${COMP}-primary-outlined--active`]: "$color-primary-900",
+            [`backgroundColor-${COMP}-primary-ghost--hover`]: "$color-primary-50",
+            [`backgroundColor-${COMP}-primary-ghost--active`]: "$color-primary-100",
+            [`borderColor-${COMP}-secondary`]: "$color-secondary-100",
+            [`backgroundColor-${COMP}-secondary`]: "$color-secondary-500",
+            [`backgroundColor-${COMP}-secondary--hover`]: "$color-secondary-400",
+            [`backgroundColor-${COMP}-secondary--active`]: "$color-secondary-500",
+            [`backgroundColor-${COMP}-secondary-outlined--hover`]: "$color-secondary-50",
+            [`backgroundColor-${COMP}-secondary-outlined--active`]: "$color-secondary-100",
+            [`backgroundColor-${COMP}-secondary-ghost--hover`]: "$color-secondary-100",
+            [`backgroundColor-${COMP}-secondary-ghost--active`]: "$color-secondary-100",
+            [`backgroundColor-${COMP}-attention--hover`]: "$color-danger-400",
+            [`backgroundColor-${COMP}-attention--active`]: "$color-danger-500",
+            [`backgroundColor-${COMP}-attention-outlined--hover`]: "$color-danger-50",
+            [`backgroundColor-${COMP}-attention-outlined--active`]: "$color-danger-100",
+            [`backgroundColor-${COMP}-attention-ghost--hover`]: "$color-danger-50",
+            [`backgroundColor-${COMP}-attention-ghost--active`]: "$color-danger-100",
         },
         dark: {
-            [`color-text-${COMP}`]: "$color-surface-50",
-            [`color-text-${COMP}-solid`]: "$color-surface-50",
-            [`color-border-${COMP}-primary`]: "$color-primary-500",
-            [`color-bg-${COMP}-primary--hover`]: "$color-primary-600",
-            [`color-bg-${COMP}-primary--active`]: "$color-primary-500",
-            [`color-bg-${COMP}-primary-outlined--hover`]: "$color-primary-900",
-            [`color-bg-${COMP}-primary-outlined--active`]: "$color-primary-950",
-            [`color-border-${COMP}-primary-outlined`]: "$color-primary-600",
-            [`color-border-${COMP}-primary-outlined--hover`]: "$color-primary-500",
-            [`color-text-${COMP}-primary-outlined`]: "$color-primary-100",
-            [`color-text-${COMP}-primary-outlined--hover`]: "$color-primary-50",
-            [`color-text-${COMP}-primary-outlined--active`]: "$color-primary-100",
-            [`color-bg-${COMP}-primary-ghost--hover`]: "$color-primary-900",
-            [`color-bg-${COMP}-primary-ghost--active`]: "$color-primary-950",
-            [`color-border-${COMP}-secondary`]: "$color-secondary-500",
-            [`color-bg-${COMP}-secondary`]: "$color-secondary-500",
-            [`color-bg-${COMP}-secondary--hover`]: "$color-secondary-400",
-            [`color-bg-${COMP}-secondary--active`]: "$color-secondary-500",
-            [`color-bg-${COMP}-secondary-outlined--hover`]: "$color-secondary-600",
-            [`color-bg-${COMP}-secondary-outlined--active`]: "$color-secondary-500",
-            [`color-bg-${COMP}-secondary-ghost--hover`]: "$color-secondary-900",
-            [`color-bg-${COMP}-secondary-ghost--active`]: "$color-secondary-950",
-            [`color-bg-${COMP}-attention--hover`]: "$color-danger-400",
-            [`color-bg-${COMP}-attention--active`]: "$color-danger-500",
-            [`color-bg-${COMP}-attention-outlined--hover`]: "$color-danger-900",
-            [`color-bg-${COMP}-attention-outlined--active`]: "$color-danger-950",
-            [`color-bg-${COMP}-attention-ghost--hover`]: "$color-danger-900",
-            [`color-bg-${COMP}-attention-ghost--active`]: "$color-danger-950",
+            [`color-${COMP}`]: "$color-surface-50",
+            [`color-${COMP}-solid`]: "$color-surface-50",
+            [`borderColor-${COMP}-primary`]: "$color-primary-500",
+            [`backgroundColor-${COMP}-primary--hover`]: "$color-primary-600",
+            [`backgroundColor-${COMP}-primary--active`]: "$color-primary-500",
+            [`backgroundColor-${COMP}-primary-outlined--hover`]: "$color-primary-900",
+            [`backgroundColor-${COMP}-primary-outlined--active`]: "$color-primary-950",
+            [`borderColor-${COMP}-primary-outlined`]: "$color-primary-600",
+            [`borderColor-${COMP}-primary-outlined--hover`]: "$color-primary-500",
+            [`color-${COMP}-primary-outlined`]: "$color-primary-100",
+            [`color-${COMP}-primary-outlined--hover`]: "$color-primary-50",
+            [`color-${COMP}-primary-outlined--active`]: "$color-primary-100",
+            [`backgroundColor-${COMP}-primary-ghost--hover`]: "$color-primary-900",
+            [`backgroundColor-${COMP}-primary-ghost--active`]: "$color-primary-950",
+            [`borderColor-${COMP}-secondary`]: "$color-secondary-500",
+            [`backgroundColor-${COMP}-secondary`]: "$color-secondary-500",
+            [`backgroundColor-${COMP}-secondary--hover`]: "$color-secondary-400",
+            [`backgroundColor-${COMP}-secondary--active`]: "$color-secondary-500",
+            [`backgroundColor-${COMP}-secondary-outlined--hover`]: "$color-secondary-600",
+            [`backgroundColor-${COMP}-secondary-outlined--active`]: "$color-secondary-500",
+            [`backgroundColor-${COMP}-secondary-ghost--hover`]: "$color-secondary-900",
+            [`backgroundColor-${COMP}-secondary-ghost--active`]: "$color-secondary-950",
+            [`backgroundColor-${COMP}-attention--hover`]: "$color-danger-400",
+            [`backgroundColor-${COMP}-attention--active`]: "$color-danger-500",
+            [`backgroundColor-${COMP}-attention-outlined--hover`]: "$color-danger-900",
+            [`backgroundColor-${COMP}-attention-outlined--active`]: "$color-danger-950",
+            [`backgroundColor-${COMP}-attention-ghost--hover`]: "$color-danger-900",
+            [`backgroundColor-${COMP}-attention-ghost--active`]: "$color-danger-950",
         },
     },
 });

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

@@ -54,14 +54,14 @@ exports.CardMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(Card_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`padding-${COMP}`]: "$space-4",
-        [`border-${COMP}`]: "1px solid $color-border",
-        [`radius-${COMP}`]: "$radius",
-        [`shadow-${COMP}`]: "none",
+        [`border-${COMP}`]: "1px solid $borderColor",
+        [`borderRadius-${COMP}`]: "$borderRadius",
+        [`boxShadow-${COMP}`]: "none",
         light: {
-            [`color-bg-${COMP}`]: "white",
+            [`backgroundColor-${COMP}`]: "white",
         },
         dark: {
-            [`color-bg-${COMP}`]: "$color-surface-900",
+            [`backgroundColor-${COMP}`]: "$color-surface-900",
         },
     },
 });

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

@@ -90,26 +90,29 @@ exports.CarouselMd = (0, ComponentDefs_1.createMetadata)({
         scrollNext: (0, ComponentDefs_1.d)("This method scrolls the carousel to the next slide."),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Carousel_module_scss_1.default.themeVars),
+    themeVarDescriptions: {
+        [`width-indicator-${COMP}`]: "Sets the width of the indicator.",
+    },
     defaultThemeVars: {
-        [`color-bg-control-${COMP}`]: "$color-primary",
-        [`color-text-control-${COMP}`]: "$color-text",
-        [`color-bg-control-hover-${COMP}`]: "$color-primary",
-        [`color-text-control-hover-${COMP}`]: "$color-text",
-        [`color-bg-control-active-${COMP}`]: "$color-primary",
-        [`color-bg-control-disabled-${COMP}`]: "$color-surface-200",
-        [`color-text-control-disabled-${COMP}`]: "$color-text-disabled",
-        [`color-text-control-active-${COMP}`]: "$color-primary",
-        [`color-bg-indicator-${COMP}`]: "$color-surface-200",
-        [`color-bg-indicator-active-${COMP}`]: "$color-primary",
-        [`color-text-indicator-${COMP}`]: "$color-primary",
-        [`color-text-indicator-active-${COMP}`]: "$color-primary",
-        [`color-bg-indicator-hover-${COMP}`]: "$color-surface-200",
-        [`color-text-indicator-hover-${COMP}`]: "$color-primary",
+        [`backgroundColor-control-${COMP}`]: "$color-primary",
+        [`color-control-${COMP}`]: "$textColor",
+        [`backgroundColor-control-hover-${COMP}`]: "$color-primary",
+        [`color-control-hover-${COMP}`]: "$textColor",
+        [`backgroundColor-control-active-${COMP}`]: "$color-primary",
+        [`backgroundColor-control-disabled-${COMP}`]: "$color-surface-200",
+        [`color-control-disabled-${COMP}`]: "$textColor-disabled",
+        [`color-control-active-${COMP}`]: "$color-primary",
+        [`backgroundColor-indicator-${COMP}`]: "$color-surface-200",
+        [`backgroundColor-indicator-active-${COMP}`]: "$color-primary",
+        [`color-indicator-${COMP}`]: "$color-primary",
+        [`color-indicator-active-${COMP}`]: "$color-primary",
+        [`backgroundColor-indicator-hover-${COMP}`]: "$color-surface-200",
+        [`color-indicator-hover-${COMP}`]: "$color-primary",
         [`width-indicator-${COMP}`]: "25px",
         [`height-indicator-${COMP}`]: "6px",
         [`height-control-${COMP}`]: "36px",
         [`width-control-${COMP}`]: "36px",
-        [`radius-control-${COMP}`]: "50%",
+        [`borderRadius-control-${COMP}`]: "50%",
         [`height-${COMP}`]: "100%",
         [`width-${COMP}`]: "100%",
     },

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

@@ -46,23 +46,23 @@ exports.CheckboxMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Toggle_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`color-border-checked-${COMP}-error`]: `$color-border-${COMP}-error`,
-        [`color-bg-checked-${COMP}-error`]: `$color-border-${COMP}-error`,
-        [`color-border-checked-${COMP}-warning`]: `$color-border-${COMP}-warning`,
-        [`color-bg-checked-${COMP}-warning`]: `$color-border-${COMP}-warning`,
-        [`color-border-checked-${COMP}-success`]: `$color-border-${COMP}-success`,
-        [`color-bg-checked-${COMP}-success`]: `$color-border-${COMP}-success`,
+        [`borderColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,
+        [`backgroundColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,
+        [`borderColor-checked-${COMP}-warning`]: `$borderColor-${COMP}-warning`,
+        [`backgroundColor-checked-${COMP}-warning`]: `$borderColor-${COMP}-warning`,
+        [`borderColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
+        [`backgroundColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
         light: {
-            [`color-bg-indicator-${COMP}`]: "$color-bg-primary",
-            [`color-border-checked-${COMP}`]: "$color-primary-500",
-            [`color-bg-checked-${COMP}`]: "$color-primary-500",
-            [`color-bg-${COMP}--disabled`]: "$color-surface-200",
+            [`backgroundColor-indicator-${COMP}`]: "$backgroundColor-primary",
+            [`borderColor-checked-${COMP}`]: "$color-primary-500",
+            [`backgroundColor-checked-${COMP}`]: "$color-primary-500",
+            [`backgroundColor-${COMP}--disabled`]: "$color-surface-200",
         },
         dark: {
-            [`color-bg-indicator-${COMP}`]: "$color-bg-primary",
-            [`color-border-checked-${COMP}`]: "$color-primary-400",
-            [`color-bg-checked-${COMP}`]: "$color-primary-400",
-            [`color-bg-${COMP}--disabled`]: "$color-surface-800",
+            [`backgroundColor-indicator-${COMP}`]: "$backgroundColor-primary",
+            [`borderColor-checked-${COMP}`]: "$color-primary-400",
+            [`backgroundColor-checked-${COMP}`]: "$color-primary-400",
+            [`backgroundColor-${COMP}--disabled`]: "$color-surface-800",
         },
     },
 });

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

@@ -141,7 +141,8 @@ class ComponentRegistry {
         // --- The pool of available loader renderers
         this.loaders = new Map();
         this.extensionRegistered = (extension) => {
-            extension.components.forEach((c) => {
+            var _a;
+            (_a = extension.components) === null || _a === void 0 ? void 0 : _a.forEach((c) => {
                 if ("type" in c) {
                     //we handle just the js components for now
                     this.registerComponentRenderer(c, extension.namespace);

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

@@ -31,7 +31,7 @@ exports.ContentSeparatorMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(ContentSeparator_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`color-bg-${COMP}`]: "$color-border",
+        [`backgroundColor-${COMP}`]: "$borderColor",
         [`size-${COMP}`]: "1px",
         light: {
         // --- No light-specific theme vars

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

@@ -108,18 +108,18 @@ exports.DatePickerMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(DatePicker_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`shadow-menu-${COMP}`]: "$shadow-md",
-        [`radius-menu-${COMP}`]: "$radius",
-        [`color-text-value-${COMP}`]: "$color-text-primary",
+        [`boxShadow-menu-${COMP}`]: "$boxShadow-md",
+        [`borderRadius-menu-${COMP}`]: "$borderRadius",
+        [`color-value-${COMP}`]: "$textColor-primary",
         light: {
-            [`color-bg-menu-${COMP}`]: "$color-surface-50",
-            [`color-bg-item-${COMP}--hover`]: "$color-surface-100",
-            [`color-bg-item-${COMP}--active`]: "$color-surface-200",
+            [`backgroundColor-menu-${COMP}`]: "$color-surface-50",
+            [`backgroundColor-item-${COMP}--hover`]: "$color-surface-100",
+            [`backgroundColor-item-${COMP}--active`]: "$color-surface-200",
         },
         dark: {
-            [`color-bg-menu-${COMP}`]: "$color-surface-950",
-            [`color-bg-item-${COMP}--hover`]: "$color-surface-600",
-            [`color-bg-item-${COMP}--active`]: "$color-surface-700",
+            [`backgroundColor-menu-${COMP}`]: "$color-surface-950",
+            [`backgroundColor-item-${COMP}--hover`]: "$color-surface-600",
+            [`backgroundColor-item-${COMP}--active`]: "$color-surface-700",
         },
     },
 });

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

@@ -62,11 +62,11 @@ exports.DropdownMenuMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`color-bg-${DDMCOMP}`]: "$color-bg-primary",
-        [`min-width-${DDMCOMP}`]: "160px",
-        [`shadow-${DDMCOMP}`]: "$shadow-xl",
-        [`style-border-${DDMCOMP}-content`]: "solid",
-        [`radius-${DDMCOMP}`]: "$radius",
+        [`backgroundColor-${DDMCOMP}`]: "$backgroundColor-primary",
+        [`minWidth-${DDMCOMP}`]: "160px",
+        [`boxShadow-${DDMCOMP}`]: "$boxShadow-xl",
+        [`borderStyle-${DDMCOMP}-content`]: "solid",
+        [`borderRadius-${DDMCOMP}`]: "$borderRadius",
     },
 });
 exports.dropdownMenuComponentRenderer = (0, renderers_1.createComponentRenderer)(DDMCOMP, exports.DropdownMenuMd, ({ node, extractValue, renderChild, registerComponentApi, layoutCss, lookupEventHandler }) => {
@@ -105,17 +105,17 @@ exports.MenuItemMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`color-bg-${MICOMP}`]: "$color-bg-dropdown-item",
-        [`color-${MICOMP}`]: "$color-text-primary",
-        [`font-family-${MICOMP}`]: "$font-family",
-        [`font-size-${MICOMP}`]: "$font-size-small",
-        [`padding-vertical-${MICOMP}`]: "$space-2",
-        [`padding-horizontal-${MICOMP}`]: "$space-3",
-        [`color-bg-${MICOMP}--hover`]: "$color-bg-dropdown-item--hover",
+        [`backgroundColor-${MICOMP}`]: "$backgroundColor-dropdown-item",
+        [`color-${MICOMP}`]: "$textColor-primary",
+        [`fontFamily-${MICOMP}`]: "$fontFamily",
+        [`fontSize-${MICOMP}`]: "$fontSize-small",
+        [`paddingVertical-${MICOMP}`]: "$space-2",
+        [`paddingHorizontal-${MICOMP}`]: "$space-3",
+        [`backgroundColor-${MICOMP}--hover`]: "$backgroundColor-dropdown-item--hover",
         [`color-${MICOMP}--hover`]: "inherit",
         [`gap-${MICOMP}`]: "$space-2",
         [`color-${MICOMP}--active`]: "$color-primary",
-        [`color-bg-${MICOMP}--active`]: "$color-bg-dropdown-item--active",
+        [`backgroundColor-${MICOMP}--active`]: "$backgroundColor-dropdown-item--active",
         light: {},
         dark: {},
     },
@@ -152,12 +152,12 @@ exports.MenuSeparatorMd = (0, ComponentDefs_1.createMetadata)({
     docFolder: DDMCOMP,
     themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`margin-top-${MSEP}`]: "$space-1",
-        [`margin-bottom-${MSEP}`]: "$space-1",
+        [`marginTop-${MSEP}`]: "$space-1",
+        [`marginBottom-${MSEP}`]: "$space-1",
         [`width-${MSEP}`]: "100%",
         [`height-${MSEP}`]: "1px",
-        [`color-${MSEP}`]: "$color-border-dropdown-item",
-        [`margin-horizontal-${MSEP}`]: "12px",
+        [`color-${MSEP}`]: "$borderColor-dropdown-item",
+        [`marginHorizontal-${MSEP}`]: "12px",
     },
 });
 exports.menuSeparatorRenderer = (0, renderers_1.createComponentRenderer)(MSEP, exports.MenuSeparatorMd, () => {