xmlui 0.7.34 → 0.8.1

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

@@ -42,27 +42,27 @@ exports.SwitchMd = (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-${COMP}`]: "$color-surface-400",
-            [`color-border-${COMP}`]: "$color-surface-400",
-            [`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-${COMP}`]: "$color-surface-400",
+            [`borderColor-${COMP}`]: "$color-surface-400",
+            [`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-${COMP}`]: "$color-surface-500",
-            [`color-border-${COMP}`]: "$color-surface-500",
-            [`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-${COMP}`]: "$color-surface-500",
+            [`borderColor-${COMP}`]: "$color-surface-500",
+            [`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/Table/Table.js

@@ -102,7 +102,7 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
         [`paddingHorizontal-cell-first-${COMP}`]: "$space-5",
         [`paddingHorizontal-cell-last-${COMP}`]: "$space-5",
         [`paddingVertical-cell-${COMP}`]: "$space-2",
-        [`border-cell-${COMP}`]: "1px solid $color-border",
+        [`border-cell-${COMP}`]: "1px solid $borderColor",
         [`outlineWidth-heading-${COMP}--focus`]: "$outlineWidth--focus",
         [`outlineStyle-heading-${COMP}--focus`]: "$outlineStyle--focus",
         [`outlineOffset-heading-${COMP}--focus`]: "$outlineOffset--focus",
@@ -110,26 +110,26 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
         [`fontWeight-heading-${COMP}`]: "$fontWeight-bold",
         [`textTransform-heading-${COMP}`]: "uppercase",
         [`fontSize-row-${COMP}`]: "$fontSize-small",
-        [`color-bg-${COMP}`]: "$color-bg",
-        [`color-bg-row-${COMP}`]: "inherit",
-        [`color-bg-selected-${COMP}--hover`]: `$color-bg-row-${COMP}--hover`,
-        [`color-bg-pagination-${COMP}`]: `$color-bg-${COMP}`,
+        [`backgroundColor-${COMP}`]: "$backgroundColor",
+        [`backgroundColor-row-${COMP}`]: "inherit",
+        [`backgroundColor-selected-${COMP}--hover`]: `$backgroundColor-row-${COMP}--hover`,
+        [`backgroundColor-pagination-${COMP}`]: `$backgroundColor-${COMP}`,
         [`outlineColor-heading-${COMP}--focus`]: "$outlineColor--focus",
-        [`color-text-pagination-${COMP}`]: "$color-secondary",
+        [`color-pagination-${COMP}`]: "$color-secondary",
         light: {
-            [`color-bg-row-${COMP}--hover`]: "$color-primary-50",
-            [`color-bg-selected-${COMP}`]: "$color-primary-100",
-            [`color-bg-heading-${COMP}--hover`]: "$color-surface-200",
-            [`color-bg-heading-${COMP}--active`]: "$color-surface-300",
-            [`color-bg-heading-${COMP}`]: "$color-surface-100",
-            [`color-text-heading-${COMP}`]: "$color-surface-500",
+            [`backgroundColor-row-${COMP}--hover`]: "$color-primary-50",
+            [`backgroundColor-selected-${COMP}`]: "$color-primary-100",
+            [`backgroundColor-heading-${COMP}--hover`]: "$color-surface-200",
+            [`backgroundColor-heading-${COMP}--active`]: "$color-surface-300",
+            [`backgroundColor-heading-${COMP}`]: "$color-surface-100",
+            [`color-heading-${COMP}`]: "$color-surface-500",
         },
         dark: {
-            [`color-bg-row-${COMP}--hover`]: "$color-primary-900",
-            [`color-bg-selected-${COMP}`]: "$color-primary-800",
-            [`color-bg-heading-${COMP}--hover`]: "$color-surface-800",
-            [`color-bg-heading-${COMP}`]: "$color-surface-950",
-            [`color-bg-heading-${COMP}--active`]: "$color-surface-700",
+            [`backgroundColor-row-${COMP}--hover`]: "$color-primary-900",
+            [`backgroundColor-selected-${COMP}`]: "$color-primary-800",
+            [`backgroundColor-heading-${COMP}--hover`]: "$color-surface-800",
+            [`backgroundColor-heading-${COMP}`]: "$color-surface-950",
+            [`backgroundColor-heading-${COMP}--active`]: "$color-surface-700",
         },
     },
 });

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

@@ -45,7 +45,7 @@ exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
         [`border-width-${COMP}Item--active`]: "$space-0_5",
         [`border-style-${COMP}Item--active`]: "solid",
         [`fontWeight-${COMP}Item--active`]: "$fontWeight-bold",
-        [`color-bg-${COMP}`]: "transparent",
+        [`backgroundColor-${COMP}`]: "transparent",
         [`paddingHorizontal-${COMP}`]: "$space-8",
         [`paddingVertical-${COMP}`]: "$space-4",
         [`paddingHorizontal-${COMP}Item`]: "$space-2",
@@ -63,19 +63,19 @@ exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
         [`border-color-${COMP}`]: "transparent",
         [`border-style-${COMP}`]: "solid",
         [`textTransform-${COMP}Item`]: "none",
-        [`align-vertical-${COMP}Item`]: "baseline",
+        [`verticalAlign-${COMP}Item`]: "baseline",
         [`letterSpacing-${COMP}Item`]: "0",
         light: {
-            [`color-${COMP}Item`]: "$color-text-primary",
-            [`border-color-${COMP}Item`]: "$color-border",
+            [`color-${COMP}Item`]: "$textColor-primary",
+            [`border-color-${COMP}Item`]: "$borderColor",
             [`border-color-${COMP}Item--active`]: "$color-primary-500",
             [`color-${COMP}Item--active`]: "$color-primary-500",
         },
         dark: {
-            [`color-${COMP}Item`]: "$color-text-primary",
-            [`border-color-${COMP}Item`]: "$color-border",
+            [`color-${COMP}Item`]: "$textColor-primary",
+            [`border-color-${COMP}Item`]: "$borderColor",
             [`border-color-${COMP}Item--active`]: "$color-primary-500",
-            [`color-${COMP}Item--active`]: "$color-text-secondary",
+            [`color-${COMP}Item--active`]: "$textColor-secondary",
         },
     },
 });

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

@@ -34,21 +34,21 @@ exports.TabsMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Tabs_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`color-bg-${COMP}`]: "$color-bg-primary",
-        [`style-border-${COMP}`]: "solid",
-        [`color-border-${COMP}`]: "$color-border",
-        [`color-border-active-${COMP}`]: "$color-primary",
-        [`thickness-border-${COMP}`]: "2px",
-        [`color-bg-trigger-${COMP}`]: "$color-bg-primary",
+        [`backgroundColor-${COMP}`]: "$backgroundColor-primary",
+        [`borderStyle-${COMP}`]: "solid",
+        [`borderColor-${COMP}`]: "$borderColor",
+        [`borderColor-active-${COMP}`]: "$color-primary",
+        [`borderWidth-${COMP}`]: "2px",
+        [`backgroundColor-trigger-${COMP}`]: "$backgroundColor-primary",
         light: {
-            [`color-bg-trigger-${COMP}--hover`]: "$color-primary-50",
-            [`color-bg-list-${COMP}`]: "$color-primary-50",
-            [`color-text-trigge-r${COMP}`]: "$color-primary-100",
+            [`backgroundColor-trigger-${COMP}--hover`]: "$color-primary-50",
+            [`backgroundColor-list-${COMP}`]: "$color-primary-50",
+            [`color-trigge-r${COMP}`]: "$color-primary-100",
         },
         dark: {
-            [`color-bg-trigger-${COMP}--hover`]: "$color-primary-800",
-            [`color-bg-list-${COMP}`]: "$color-primary-800",
-            [`color-text-trigge-r${COMP}`]: "$color-primary-100",
+            [`backgroundColor-trigger-${COMP}--hover`]: "$color-primary-800",
+            [`backgroundColor-list-${COMP}`]: "$color-primary-800",
+            [`color-trigge-r${COMP}`]: "$color-primary-100",
         },
     },
 });

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

@@ -53,33 +53,33 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(Text_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`borderRadius-${COMP}`]: "$borderRadius",
-        [`style-border-${COMP}`]: "solid",
+        [`borderStyle-${COMP}`]: "solid",
         [`fontSize-${COMP}`]: "$fontSize-small",
-        [`thickness-border-${COMP}`]: "$space-0",
+        [`borderWidth-${COMP}`]: "$space-0",
         [`fontWeight-${COMP}-abbr`]: "$fontWeight-bold",
         [`textTransform-${COMP}-abbr`]: "uppercase",
         [`fontSize-${COMP}-secondary`]: "$fontSize-small",
         [`font-style-${COMP}-cite`]: "italic",
-        [`color-${COMP}`]: "$color-text-primary",
+        [`color-${COMP}`]: "$textColor-primary",
         [`fontFamily-${COMP}`]: "$fontFamily",
         [`fontWeight-${COMP}`]: "$fontWeight-normal",
         [`fontFamily-${COMP}-code`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-code`]: "$fontSize-small",
-        [`thickness-border-${COMP}-code`]: "1px",
+        [`borderWidth-${COMP}-code`]: "1px",
         [`paddingHorizontal-${COMP}-code`]: "$space-1",
         [`textDecorationLine-${COMP}-deleted`]: "line-through",
         [`textDecorationLine-${COMP}-inserted`]: "underline",
         [`fontFamily-${COMP}-keyboard`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-keyboard`]: "$fontSize-small",
         [`fontWeight-${COMP}-keyboard`]: "$fontWeight-bold",
-        [`thickness-border-${COMP}-keyboard`]: "1px",
+        [`borderWidth-${COMP}-keyboard`]: "1px",
         [`paddingHorizontal-${COMP}-keyboard`]: "$space-1",
         [`fontFamily-${COMP}-sample`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-sample`]: "$fontSize-small",
         [`fontSize-${COMP}-sup`]: "$fontSize-smaller",
-        [`align-vertical-${COMP}-sup`]: "super",
+        [`verticalAlign-${COMP}-sup`]: "super",
         [`fontSize-${COMP}-sub`]: "$fontSize-smaller",
-        [`align-vertical-${COMP}-sub`]: "sub",
+        [`verticalAlign-${COMP}-sub`]: "sub",
         [`font-style-${COMP}-var`]: "italic",
         [`fontFamily-${COMP}-mono`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-title`]: "$fontSize-large",
@@ -101,28 +101,28 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`paddingHorizontal-${COMP}-tableheading`]: "$space-1",
         [`fontWeight-${COMP}-tableheading`]: "$fontWeight-bold",
         light: {
-            [`color-bg-${COMP}-code`]: "$color-surface-100",
-            [`color-border-${COMP}-code`]: "$color-surface-200",
-            [`color-bg-${COMP}-keyboard`]: "$color-surface-200",
-            [`color-border-${COMP}-keyboard`]: "$color-surface-300",
-            [`color-bg-${COMP}-marked`]: "yellow",
+            [`backgroundColor-${COMP}-code`]: "$color-surface-100",
+            [`borderColor-${COMP}-code`]: "$color-surface-200",
+            [`backgroundColor-${COMP}-keyboard`]: "$color-surface-200",
+            [`borderColor-${COMP}-keyboard`]: "$color-surface-300",
+            [`backgroundColor-${COMP}-marked`]: "yellow",
             [`color-${COMP}-placeholder`]: "$color-surface-500",
-            [`color-bg-${COMP}-codefence`]: "$color-primary-100",
+            [`backgroundColor-${COMP}-codefence`]: "$color-primary-100",
             [`color-${COMP}-codefence`]: "$color-surface-900",
-            [`color-${COMP}-subheading`]: "$color-text-secondary",
-            [`color-${COMP}-secondary`]: "$color-text-secondary",
+            [`color-${COMP}-subheading`]: "$textColor-secondary",
+            [`color-${COMP}-secondary`]: "$textColor-secondary",
         },
         dark: {
-            [`color-bg-${COMP}-code`]: "$color-surface-800",
-            [`color-border-${COMP}-code`]: "$color-surface-700",
-            [`color-bg-${COMP}-keyboard`]: "$color-surface-800",
-            [`color-border-${COMP}-keyboard`]: "$color-surface-700",
-            [`color-bg-${COMP}-marked`]: "orange",
+            [`backgroundColor-${COMP}-code`]: "$color-surface-800",
+            [`borderColor-${COMP}-code`]: "$color-surface-700",
+            [`backgroundColor-${COMP}-keyboard`]: "$color-surface-800",
+            [`borderColor-${COMP}-keyboard`]: "$color-surface-700",
+            [`backgroundColor-${COMP}-marked`]: "orange",
             [`color-${COMP}-placeholder`]: "$color-surface-500",
-            [`color-bg-${COMP}-codefence`]: "$color-primary-800",
+            [`backgroundColor-${COMP}-codefence`]: "$color-primary-800",
             [`color-${COMP}-codefence`]: "$color-surface-200",
-            [`color-${COMP}-subheading`]: "$color-text-secondary",
-            [`color-${COMP}-secondary`]: "$color-text-secondary",
+            [`color-${COMP}-subheading`]: "$textColor-secondary",
+            [`color-${COMP}-secondary`]: "$textColor-secondary",
         },
     },
 });

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

@@ -47,19 +47,19 @@ exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         // TODO: When FormItem is themed, move these defaults there
         "borderRadius-Input": "$borderRadius",
-        "color-text-Input": "$color-text-primary",
-        "color-bg-Input--disabled": "$color-bg--disabled",
-        "thickness-border-Input": "1px",
+        "color-Input": "$textColor-primary",
+        "backgroundColor-Input--disabled": "$backgroundColor--disabled",
+        "borderWidth-Input": "1px",
         "minHeight-Input": "39px",
         "padding-Input": "$space-2",
-        "style-border-Input": "solid",
-        "color-border-Input--disabled": "$color-border--disabled",
-        "color-text-Input--disabled": "$color-text--disabled",
-        "color-border-Input-error": "$color-border-Input-default--error",
-        "color-border-Input-warning": "$color-border-Input-default--warning",
-        "color-border-Input-success": "$color-border-Input-default--success",
-        "color-placeholder-Input": "$color-text-subtitle",
-        "color-adornment-Input": "$color-text-subtitle",
+        "borderStyle-Input": "solid",
+        "borderColor-Input--disabled": "$borderColor--disabled",
+        "color-Input--disabled": "$textColor--disabled",
+        "borderColor-Input-error": "$borderColor-Input-default--error",
+        "borderColor-Input-warning": "$borderColor-Input-default--warning",
+        "borderColor-Input-success": "$borderColor-Input-default--success",
+        "color-placeholder-Input": "$textColor-subtitle",
+        "color-adornment-Input": "$textColor-subtitle",
         "outlineColor-Input--focus": "$outlineColor--focus",
         "outlineWidth-Input--focus": "$outlineWidth--focus",
         "outlineStyle-Input--focus": "$outlineStyle--focus",

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

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

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

@@ -110,16 +110,16 @@ exports.RootThemeDefinition = {
         "fontWeight-bold": "600",
         "fontWeight-extra-bold": "900",
         // --- Default text colors (component use these values as their defaults)
-        "color-text-primary": "$color-surface-950",
-        "color-text-attention": "$color-danger-600",
-        "color-text-subtitle": "$color-surface-500",
-        "color-text--disabled": "$color-surface-400",
+        "textColor-primary": "$color-surface-950",
+        "textColor-attention": "$color-danger-600",
+        "textColor-subtitle": "$color-surface-500",
+        "textColor--disabled": "$color-surface-400",
         // --- Default background colors (component use these values as their defaults)
-        "color-bg-primary": "$color-surface-50",
-        "color-bg-secondary": "$color-surface-50",
-        "color-bg-attention": "$color-attention",
-        "color-bg--disabled": "$color-surface-50",
-        "color-bg--selected": "$color-primary-50",
+        "backgroundColor-primary": "$color-surface-50",
+        "backgroundColor-secondary": "$color-surface-50",
+        "backgroundColor-attention": "$color-attention",
+        "backgroundColor--disabled": "$color-surface-50",
+        "backgroundColor--selected": "$color-primary-50",
         // --- Various default colors
         "color-info": "$color-info-500",
         "color-valid": "$color-success-600",
@@ -138,11 +138,11 @@ exports.RootThemeDefinition = {
         "fontFamily-monospace": "Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace",
         "font-feature-settings": "'cv03', 'cv04', 'cv11'",
         // --- Some media breakpoints (review them)
-        "media-maxWidth-phone": "576px",
-        "media-maxWidth-landscape-phone": "768px",
-        "media-maxWidth-tablet": "992px",
-        "media-maxWidth-desktop": "1200px",
-        "media-maxWidth-large-desktop": "1400px",
+        "maxWidth-phone": "576px",
+        "maxWidth-landscape-phone": "768px",
+        "maxWidth-tablet": "992px",
+        "maxWidth-desktop": "1200px",
+        "maxWidth-large-desktop": "1400px",
         // --- The app's default radius value
         borderRadius: "4px",
         "outlineColor--focus": "rgba($color-primary-500-rgb, .5)",
@@ -179,108 +179,95 @@ exports.RootThemeDefinition = {
         // --- Font used for body
         "fontWeight": "$fontWeight-normal",
         // --- Various default values (review them)
-        "color-border-dropdown-item": "$color-border",
+        "borderColor-dropdown-item": "$borderColor",
         // --- Various predefined shadow values
-        shadow: "0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)",
-        "shadow-md": "0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)",
-        "shadow-xl": "0 16px 24px 2px rgba(0, 0, 0, 0.07), 0 6px 30px 5px rgba(0, 0, 0, 0.06), 0 8px 10px -5px rgba(0, 0, 0, 0.1)",
-        "shadow-xxl": "0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19)",
-        "shadow-spread": "0px 0px 30px rgba(0, 0, 0, 0.1)",
-        "shadow-spread-2": "-6px -4px 40px 10px rgba(0, 0, 0, 0.1)",
-        "shadow-spread-2-xl": "-6px -4px 40px 18px rgba(0, 0, 0, 0.1)",
+        boxShadow: "0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)",
+        "boxShadow-md": "0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)",
+        "boxShadow-xl": "0 16px 24px 2px rgba(0, 0, 0, 0.07), 0 6px 30px 5px rgba(0, 0, 0, 0.06), 0 8px 10px -5px rgba(0, 0, 0, 0.1)",
+        "boxShadow-xxl": "0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19)",
+        "boxShadow-spread": "0px 0px 30px rgba(0, 0, 0, 0.1)",
+        "boxShadow-spread-2": "-6px -4px 40px 10px rgba(0, 0, 0, 0.1)",
+        "boxShadow-spread-2-xl": "-6px -4px 40px 18px rgba(0, 0, 0, 0.1)",
         // --- The default maximum content width
-        "max-content-width": "1320px",
-        "size-Icon": "1.25em",
-        "boxShadow-Avatar": "inset 0 0 0 1px rgba(4, 32, 69, 0.1)",
-        "border-size-Avatar": "0px",
-        "borderRadius-Avatar": "4px",
-        "boxShadow-header-App": "none",
-        // "height-AppHeader": "3.5rem",
-        "paddingHorizontal-NavPanel-horizontal": "1rem",
-        "paddingVertical-HeaderLogo": "0.7rem",
-        "padding-TableCell": ".75rem",
-        "padding-TableHeading": ".5rem .75rem .5rem .75rem",
-        "color-bg-TableRow--hover": "transparent",
-        "boxShadow-NavPanel-vertical": "none",
-        "width-NavPanel-vertical": "15rem",
+        "maxWidth-content": "1320px",
     },
     tones: {
         light: {
             themeVars: {
                 // --- Background colors
-                "color-bg": $colorSurface50,
-                "color-bg-primary": $colorSurface50,
-                "color-bg-secondary": $colorSurface50,
-                "color-bg--disabled": $colorSurface50,
-                "color-bg--selected": $colorPrimary50,
-                "color-bg-overlay": "rgba(0, 0, 0, 0.2)",
-                "color-bg-dropdown-item--hover": $colorSurface100,
-                "color-bg-dropdown-item--active": $colorSurface100,
-                "color-bg-dropdown-item--active-hover": $colorSurface50,
-                "color-bg-tree-row--selected--before": $colorPrimary50,
+                "backgroundColor": $colorSurface50,
+                "backgroundColor-primary": $colorSurface50,
+                "backgroundColor-secondary": $colorSurface50,
+                "backgroundColor--disabled": $colorSurface50,
+                "backgroundColor--selected": $colorPrimary50,
+                "backgroundColor-overlay": "rgba(0, 0, 0, 0.2)",
+                "backgroundColor-dropdown-item--hover": $colorSurface100,
+                "backgroundColor-dropdown-item--active": $colorSurface100,
+                "backgroundColor-dropdown-item--active-hover": $colorSurface50,
+                "backgroundColor-tree-row--selected--before": $colorPrimary50,
                 // --- Various default colors
                 "color-info": "$color-info-800",
                 "color-valid": $colorSuccess600,
                 "color-warning": $colorWarn700,
                 "color-error": $colorDanger700,
                 // --- Border colors
-                "color-border": $colorSurface200,
-                "color-border--disabled": $colorSurface200,
-                "color-border-dropdown-item": $colorSurface200,
+                "borderColor": $colorSurface200,
+                "borderColor--disabled": $colorSurface200,
+                "borderColor-dropdown-item": $colorSurface200,
                 // --- Text colors
-                "color-text-primary": $colorSurface950,
-                "color-text-secondary": $colorSurface600,
-                "color-text-attention": $colorDanger600,
-                "color-text-subtitle": $colorSurface500,
-                "color-text--disabled": $colorSurface400,
+                "textColor-primary": $colorSurface950,
+                "textColor-secondary": $colorSurface600,
+                "textColor-attention": $colorDanger600,
+                "textColor-subtitle": $colorSurface500,
+                "textColor--disabled": $colorSurface400,
                 // --- Input is an abstract component, so we define its default theme variables here
-                "color-bg-Input-default": "white",
-                "color-border-Input-default": $colorSurface200,
-                "color-border-Input-default--hover": $colorSurface600,
-                "color-border-Input-default--focus": $colorSurface600,
-                "color-border-Input-default--success": $colorSuccess600,
-                "color-border-Input-default--warning": $colorWarn700,
-                "color-border-Input-default--error": $colorDanger600,
+                "backgroundColor-Input-default": "white",
+                "borderColor-Input-default": $colorSurface200,
+                "borderColor-Input-default--hover": $colorSurface600,
+                "borderColor-Input-default--focus": $colorSurface600,
+                "borderColor-Input-default--success": $colorSuccess600,
+                "borderColor-Input-default--warning": $colorWarn700,
+                "borderColor-Input-default--error": $colorDanger600,
                 // --- InputLabel is a React component, so we define its default theme variables here
-                "color-text-InputLabel-required": $colorDanger600,
+                "color-InputLabel-required": $colorDanger600,
             },
         },
         dark: {
             themeVars: {
                 // --- Background colors
-                "color-bg": $colorSurface950,
-                "color-bg-primary": $colorSurface900,
-                "color-bg-secondary": $colorSurface800,
-                "color-bg--disabled": $colorSurface800,
-                "color-bg--selected": $colorSurface700,
-                "color-bg-overlay": "rgba(0, 0, 0, 0.4)",
-                "color-bg-dropdown-item--hover": $colorSurface500A60,
-                "color-bg-dropdown-item--active": $colorSurface500A80,
-                "color-bg-tree-row--selected--before": $colorPrimary950,
+                "backgroundColor": $colorSurface950,
+                "backgroundColor-primary": $colorSurface900,
+                "backgroundColor-secondary": $colorSurface800,
+                "backgroundColor--disabled": $colorSurface800,
+                "backgroundColor--selected": $colorSurface700,
+                "backgroundColor-overlay": "rgba(0, 0, 0, 0.4)",
+                "backgroundColor-dropdown-item--hover": $colorSurface500A60,
+                "backgroundColor-dropdown-item--active": $colorSurface500A80,
+                "backgroundColor-tree-row--selected--before": $colorPrimary950,
                 // --- Various default colors
                 "color-info": $colorInfo600,
                 "color-valid": $colorSuccess600,
                 "color-warning": $colorWarn700,
                 "color-error": $colorDanger700,
                 // --- Border colors
-                "color-border": $colorSurface800,
-                "color-border--disabled": $colorSurface700,
-                "color-border-dropdown-item": $colorSurface300,
+                "borderColor": $colorSurface800,
+                "borderColor--disabled": $colorSurface700,
+                "borderColor-dropdown-item": $colorSurface300,
                 // --- Text colors
-                "color-text-primary": $colorSurface100,
-                "color-text-secondary": $colorSurface400,
-                "color-text-attention": $colorDanger400,
-                "color-text-subtitle": $colorSurface500,
-                "color-text--disabled": $colorSurface500,
+                "textColor-primary": $colorSurface100,
+                "textColor-secondary": $colorSurface400,
+                "textColor-attention": $colorDanger400,
+                "textColor-subtitle": $colorSurface500,
+                "textColor--disabled": $colorSurface500,
                 // --- Input is an abstract component, so we define its default theme variables here
-                "color-border-Input-default": $colorSurface800,
-                "color-border-Input-default--hover": $colorSurface500,
-                "color-border-Input-default--focus": $colorSurface500,
-                "color-border-Input-default--success": $colorSuccess600,
-                "color-border-Input-default--warning": $colorWarn700,
-                "color-border-Input-default--error": $colorDanger500,
+                "borderColor-Input-default": $colorSurface800,
+                "borderColor-Input-default--hover": $colorSurface500,
+                "borderColor-Input-default--focus": $colorSurface500,
+                "borderColor-Input-default--success": $colorSuccess600,
+                "borderColor-Input-default--warning": $colorWarn700,
+                "borderColor-Input-default--error": $colorDanger500,
                 // --- InputLabel is a React component, so we define its default theme variables here
-                "color-text-InputLabel-required": $colorDanger400,
+                "color-InputLabel-required": $colorDanger400,
             },
         },
     },

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

@@ -8,7 +8,7 @@ exports.SolidThemeDefinition = {
         "color-secondary": "#98a9bc",
         "color-surface": "hsl(0,0%,49%)",
         "color-success": "#45a249",
-        "max-content-width": "100%",
+        "maxWidth-content": "100%",
         borderRadius: "0",
         "fontSize": "$fontSize-normal",
         "size-Icon": "1rem",

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

@@ -10,13 +10,13 @@ exports.XmlUiThemeDefinition = {
     themeVars: {
         "boxShadow-header-App": "none",
         "font-size": "15px",
-        "boxShadow-Input": "$shadow-sm",
+        "boxShadow-Input": "$boxShadow-sm",
     },
     tones: {
         light: {
             themeVars: {
-                "color-bg-ModalDialog": "white",
-                "color-bg-checked-RadioGroupOption": "$color-primary-400",
+                "backgroundColor-ModalDialog": "white",
+                "backgroundColor-checked-RadioGroupOption": "$color-primary-400",
             }
         },
         dark: {