xmlui 0.7.34 → 0.8.0

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

@@ -105,36 +105,36 @@ function generateButtonTones(theme) {
     variants.forEach((variant) => {
         const solidTones = mapTones(findClosest(resolvedTheme, `color-Button-${variant}-solid`), (tones) => {
             return {
-                [`color-bg-Button-${variant}-solid`]: tones.base,
-                [`color-bg-Button-${variant}-solid--hover`]: tones.tone1,
-                [`color-bg-Button-${variant}-solid--active`]: tones.tone2,
-                [`color-border-Button-${variant}-solid`]: tones.base,
-                [`color-border-Button-${variant}-solid--hover`]: tones.base,
-                [`color-border-Button-${variant}-solid--active`]: tones.base,
-                [`color-text-Button-${variant}-solid`]: tones.tone3,
-                [`color-text-Button-${variant}-solid--hover`]: tones.tone3,
-                [`color-text-Button-${variant}-solid--active`]: tones.tone3,
+                [`backgroundColor-Button-${variant}-solid`]: tones.base,
+                [`backgroundColor-Button-${variant}-solid--hover`]: tones.tone1,
+                [`backgroundColor-Button-${variant}-solid--active`]: tones.tone2,
+                [`borderColor-Button-${variant}-solid`]: tones.base,
+                [`borderColor-Button-${variant}-solid--hover`]: tones.base,
+                [`borderColor-Button-${variant}-solid--active`]: tones.base,
+                [`color-Button-${variant}-solid`]: tones.tone3,
+                [`color-Button-${variant}-solid--hover`]: tones.tone3,
+                [`color-Button-${variant}-solid--active`]: tones.tone3,
             };
         });
         const outlinedTones = mapTones(findClosest(resolvedTheme, `color-Button-${variant}-outlined`), (tones) => {
             return {
-                [`color-bg-Button-${variant}-outlined--hover`]: tones.alpha1,
-                [`color-bg-Button-${variant}-outlined--active`]: tones.alpha2,
-                [`color-border-Button-${variant}-outlined`]: tones.base,
-                [`color-border-Button-${variant}-outlined--hover`]: tones.tone1,
-                [`color-border-Button-${variant}-outlined--active`]: tones.tone2,
-                [`color-text-Button-${variant}-outlined`]: tones.base,
-                [`color-text-Button-${variant}-outlined--hover`]: tones.tone1,
-                [`color-text-Button-${variant}-outlined--active`]: tones.tone2,
+                [`backgroundColor-Button-${variant}-outlined--hover`]: tones.alpha1,
+                [`backgroundColor-Button-${variant}-outlined--active`]: tones.alpha2,
+                [`borderColor-Button-${variant}-outlined`]: tones.base,
+                [`borderColor-Button-${variant}-outlined--hover`]: tones.tone1,
+                [`borderColor-Button-${variant}-outlined--active`]: tones.tone2,
+                [`color-Button-${variant}-outlined`]: tones.base,
+                [`color-Button-${variant}-outlined--hover`]: tones.tone1,
+                [`color-Button-${variant}-outlined--active`]: tones.tone2,
             };
         });
         const ghostTones = mapTones(findClosest(resolvedTheme, `color-Button-${variant}-ghost`), (tones) => {
             return {
-                [`color-bg-Button-${variant}-ghost--active`]: tones.alpha2,
-                [`color-bg-Button-${variant}-ghost--hover`]: tones.alpha1,
-                [`color-text-Button-${variant}-ghost`]: tones.base,
-                [`color-text-Button-${variant}-ghost--hover`]: tones.tone1,
-                [`color-text-Button-${variant}-ghost--active`]: tones.tone2,
+                [`backgroundColor-Button-${variant}-ghost--active`]: tones.alpha2,
+                [`backgroundColor-Button-${variant}-ghost--hover`]: tones.alpha1,
+                [`color-Button-${variant}-ghost`]: tones.base,
+                [`color-Button-${variant}-ghost--hover`]: tones.tone1,
+                [`color-Button-${variant}-ghost--active`]: tones.tone2,
             };
         });
         ret = Object.assign(Object.assign(Object.assign(Object.assign({}, ret), solidTones), outlinedTones), ghostTones);
@@ -214,22 +214,22 @@ function generatePaddingSegments(theme) {
     // --- Done
     return result;
 }
-const borderRegEx = /^border-(?!(?:horizontal|vertical|left|right|top|bottom)-)(.+)$/;
-const thicknessBorderRegEx = /^thickness-border-(?!(?:horizontal|vertical|left|right|top|bottom)-)(.+)$/;
-const thicknessBorderHorizontalRegEx = /^thickness-border-(horizontal)-(.+)$/;
-const thicknessBorderVerticalRegEx = /^thickness-border-(vertical)-(.+)$/;
-const styleBorderRegEx = /^style-border-(?!(?:horizontal|vertical|left|right|top|bottom)-)(.+)$/;
-const styleBorderHorizontalRegEx = /^style-border-(horizontal)-(.+)$/;
-const styleBorderVerticalRegEx = /^style-border-(vertical)-(.+)$/;
-const borderLeftRegEx = /^border-(left)-(.+)$/;
-const borderRightRegEx = /^border-(right)-(.+)$/;
-const borderTopRegEx = /^border-(top)-(.+)$/;
-const borderBottomRegEx = /^border-(bottom)-(.+)$/;
-const borderHorizontalRegEx = /^border-(horizontal)-(.+)$/;
-const borderVerticalRegEx = /^border-(vertical)-(.+)$/;
-const colorBorderRegEx = /^color-border-(?!(?:horizontal|vertical|left|right|top|bottom)-)(.+)$/;
-const colorBorderHorizontalRegEx = /^color-border-(horizontal)-(.+)$/;
-const colorBorderVerticalRegEx = /^color-border-(vertical)-(.+)$/;
+const borderRegEx = /^border-(.+)$/;
+const thicknessBorderRegEx = /^borderWidth-(.+)$/;
+const thicknessBorderHorizontalRegEx = /^borderHorizontalWidth-(.+)$/;
+const thicknessBorderVerticalRegEx = /^borderVerticalWidth-(.+)$/;
+const styleBorderRegEx = /^borderStyle-(.+)$/;
+const styleBorderHorizontalRegEx = /^borderHorizontalStyle-(.+)$/;
+const styleBorderVerticalRegEx = /^borderVerticalStyle-(.+)$/;
+const borderLeftRegEx = /^borderLeft-(.+)$/;
+const borderRightRegEx = /^borderRight-(.+)$/;
+const borderTopRegEx = /^borderTop-(.+)$/;
+const borderBottomRegEx = /^borderBottom-(.+)$/;
+const borderHorizontalRegEx = /^borderHorizontal-(.+)$/;
+const borderVerticalRegEx = /^borderVertical-(.+)$/;
+const colorBorderRegEx = /^borderColor-(.+)$/;
+const colorBorderHorizontalRegEx = /^borderHorizontalColor-(.+)$/;
+const colorBorderVerticalRegEx = /^borderVerticalColor-(.+)$/;
 /**
  * Segment the border values to provide consistency
  */
@@ -247,201 +247,201 @@ function generateBorderSegments(theme) {
         if (match) {
             const remainder = match[1];
             // --- Flow down the border value
-            result[`border-left-${remainder}`] = value;
-            result[`border-right-${remainder}`] = value;
-            result[`border-top-${remainder}`] = value;
-            result[`border-bottom-${remainder}`] = value;
+            result[`borderLeft-${remainder}`] = value;
+            result[`borderRight-${remainder}`] = value;
+            result[`borderTop-${remainder}`] = value;
+            result[`borderBottom-${remainder}`] = value;
             // --- We have a border value to segment
             const border = getBorderSegments(value);
-            result[`thickness-border-${remainder}`] = border.thickness;
-            (_a = result[_c = `style-border-${remainder}`]) !== null && _a !== void 0 ? _a : (result[_c] = border.style);
-            (_b = result[_d = `color-border-${remainder}`]) !== null && _b !== void 0 ? _b : (result[_d] = border.color);
+            result[`borderWidth-${remainder}`] = border.thickness;
+            (_a = result[_c = `borderStyle-${remainder}`]) !== null && _a !== void 0 ? _a : (result[_c] = border.style);
+            (_b = result[_d = `borderColor-${remainder}`]) !== null && _b !== void 0 ? _b : (result[_d] = border.color);
         }
-        // --- Check "border-horizontal" theme variables
+        // --- Check "borderWidth-" theme variables
+        match = thicknessBorderRegEx.exec(key);
+        if (match) {
+            // --- We have a borderWidth value to flow down
+            const remainder = match[1];
+            result[`borderLeftWidth-${remainder}`] = value;
+            result[`borderRightWidth-${remainder}`] = value;
+            result[`borderTopWidth-${remainder}`] = value;
+            result[`borderBottomWidth-${remainder}`] = value;
+        }
+        // --- Check "borderStyle-" theme variables
+        match = styleBorderRegEx.exec(key);
+        if (match) {
+            // --- We have a borderStyle value to flow down
+            const remainder = match[1];
+            result[`borderLeftStyle-${remainder}`] = value;
+            result[`borderRightStyle-${remainder}`] = value;
+            result[`borderTopStyle-${remainder}`] = value;
+            result[`borderBottomStyle-${remainder}`] = value;
+        }
+        // --- Check "borderColor-" theme variables
+        match = colorBorderRegEx.exec(key);
+        if (match) {
+            // --- We have a borderColor value to flow down
+            const remainder = match[1];
+            result[`borderLeftColor-${remainder}`] = value;
+            result[`borderRightColor-${remainder}`] = value;
+            result[`borderTopColor-${remainder}`] = value;
+            result[`borderBottomColor-${remainder}`] = value;
+        }
+        // --- Check "borderHorizontal" theme variables
         match = borderHorizontalRegEx.exec(key);
         if (match) {
-            // --- We have a border-horizontal value to segment
-            const remainder = match[2];
+            // --- We have a borderHorizontal value to segment
+            const remainder = match[1];
             // --- Flow down the border value
-            result[`border-left-${remainder}`] = value;
-            result[`border-right-${remainder}`] = value;
+            result[`borderLeft-${remainder}`] = value;
+            result[`borderRight-${remainder}`] = value;
             const border = getBorderSegments(value);
             if (border.thickness) {
-                result[`thickness-border-left-${remainder}`] = border.thickness;
-                result[`thickness-border-right-${remainder}`] = border.thickness;
+                result[`borderLeftWidth-${remainder}`] = border.thickness;
+                result[`borderRightWidth-${remainder}`] = border.thickness;
             }
             if (border.style) {
-                result[`style-border-left-${remainder}`] = border.style;
-                result[`style-border-right-${remainder}`] = border.style;
+                result[`borderLeftStyle-${remainder}`] = border.style;
+                result[`borderRightStyle-${remainder}`] = border.style;
             }
             if (border.color) {
-                result[`color-border-left-${remainder}`] = border.color;
-                result[`color-border-right-${remainder}`] = border.color;
+                result[`borderLeftColor-${remainder}`] = border.color;
+                result[`borderRightColor-${remainder}`] = border.color;
             }
         }
-        // --- Check "border-vertical" theme variables
+        // --- Check "borderVertical" theme variables
         match = borderVerticalRegEx.exec(key);
         if (match) {
-            // --- We have a border-vertical value to segment
-            const remainder = match[2];
+            // --- We have a borderVertical value to segment
+            const remainder = match[1];
             // --- Flow down the border value
-            result[`border-top-${remainder}`] = value;
-            result[`border-bottom-${remainder}`] = value;
+            result[`borderTop-${remainder}`] = value;
+            result[`borderBottom-${remainder}`] = value;
             const border = getBorderSegments(value);
             if (border.thickness) {
-                result[`thickness-border-top-${remainder}`] = border.thickness;
-                result[`thickness-border-bottom-${remainder}`] = border.thickness;
+                result[`borderTopWidth-${remainder}`] = border.thickness;
+                result[`borderBottomWidth-${remainder}`] = border.thickness;
             }
             if (border.style) {
-                result[`style-border-top-${remainder}`] = border.style;
-                result[`style-border-bottom-${remainder}`] = border.style;
+                result[`borderTopStyle-${remainder}`] = border.style;
+                result[`borderBottomStyle-${remainder}`] = border.style;
             }
             if (border.color) {
-                result[`color-border-top-${remainder}`] = border.color;
-                result[`color-border-bottom-${remainder}`] = border.color;
+                result[`borderTopColor-${remainder}`] = border.color;
+                result[`borderBottomColor-${remainder}`] = border.color;
             }
         }
-        // --- Check "border-left" theme variables
+        // --- Check "borderLeft" theme variables
         match = borderLeftRegEx.exec(key);
         if (match) {
-            // --- We have a border-left value to segment
-            const remainder = match[2];
+            // --- We have a borderLeft value to segment
+            const remainder = match[1];
             const border = getBorderSegments(value);
-            if (border.thickness && !theme[`thickness-border-left-${remainder}`]) {
-                result[`thickness-border-left-${remainder}`] = border.thickness;
+            if (border.thickness && !theme[`borderLeftWidth-${remainder}`]) {
+                result[`borderLeftWidth-${remainder}`] = border.thickness;
             }
-            if (border.style && !theme[`style-border-left-${remainder}`]) {
-                result[`style-border-left-${remainder}`] = border.style;
+            if (border.style && !theme[`borderLeftStyle-${remainder}`]) {
+                result[`borderLeftStyle-${remainder}`] = border.style;
             }
-            if (border.color && !theme[`color-border-left-${remainder}`]) {
-                result[`color-border-left-${remainder}`] = border.color;
+            if (border.color && !theme[`borderLeftColor-${remainder}`]) {
+                result[`borderLeftColor-${remainder}`] = border.color;
             }
         }
-        // --- Check "border-right" theme variables
+        // --- Check "borderRight" theme variables
         match = borderRightRegEx.exec(key);
         if (match) {
-            // --- We have a border-right value to segment
-            const remainder = match[2];
+            // --- We have a borderRight value to segment
+            const remainder = match[1];
             const border = getBorderSegments(value);
             if (border.thickness) {
-                result[`thickness-border-right-${remainder}`] = border.thickness;
+                result[`borderRightWidth-${remainder}`] = border.thickness;
             }
             if (border.style) {
-                result[`style-border-right-${remainder}`] = border.style;
+                result[`borderRightStyle-${remainder}`] = border.style;
             }
             if (border.color) {
-                result[`color-border-right-${remainder}`] = border.color;
+                result[`borderRightColor-${remainder}`] = border.color;
             }
         }
-        // --- Check "border-top" theme variables
+        // --- Check "borderTop" theme variables
         match = borderTopRegEx.exec(key);
         if (match) {
-            // --- We have a border-top value to segment
-            const remainder = match[2];
+            // --- We have a borderTop value to segment
+            const remainder = match[1];
             const border = getBorderSegments(value);
             if (border.thickness) {
-                result[`thickness-border-top-${remainder}`] = border.thickness;
+                result[`borderTopWidth-${remainder}`] = border.thickness;
             }
             if (border.style) {
-                result[`style-border-top-${remainder}`] = border.style;
+                result[`borderTopStyle-${remainder}`] = border.style;
             }
             if (border.color) {
-                result[`color-border-top-${remainder}`] = border.color;
+                result[`borderTopColor-${remainder}`] = border.color;
             }
         }
-        // --- Check "border-bottom" theme variables
+        // --- Check "borderBottom" theme variables
         match = borderBottomRegEx.exec(key);
         if (match) {
-            // --- We have a border-bottom value to segment
-            const remainder = match[2];
+            // --- We have a borderBottom value to segment
+            const remainder = match[1];
             const border = getBorderSegments(value);
             if (border.thickness) {
-                result[`thickness-border-bottom-${remainder}`] = border.thickness;
+                result[`borderBottomWidth-${remainder}`] = border.thickness;
             }
             if (border.style) {
-                result[`style-border-bottom-${remainder}`] = border.style;
+                result[`borderBottomStyle-${remainder}`] = border.style;
             }
             if (border.color) {
-                result[`color-border-bottom-${remainder}`] = border.color;
+                result[`borderBottomColor-${remainder}`] = border.color;
             }
         }
-        // --- Check "thickness-border-" theme variables
-        match = thicknessBorderRegEx.exec(key);
-        if (match) {
-            // --- We have a thickness-border value to flow down
-            const remainder = match[1];
-            result[`thickness-border-left-${remainder}`] = value;
-            result[`thickness-border-right-${remainder}`] = value;
-            result[`thickness-border-top-${remainder}`] = value;
-            result[`thickness-border-bottom-${remainder}`] = value;
-        }
-        // --- Check "thickness-border-horizontal" theme variables
+        // --- Check "borderHorizontalWidth" theme variables
         match = thicknessBorderHorizontalRegEx.exec(key);
         if (match) {
-            // --- We have a thickness-border-horizontal value to flow down
-            const remainder = match[2];
-            result[`thickness-border-left-${remainder}`] = value;
-            result[`thickness-border-right-${remainder}`] = value;
+            // --- We have a borderHorizontalWidth value to flow down
+            const remainder = match[1];
+            result[`borderLeftWidth-${remainder}`] = value;
+            result[`borderRightWidth-${remainder}`] = value;
         }
-        // --- Check "thickness-border-vertical" theme variables
+        // --- Check "borderVerticalWidth" theme variables
         match = thicknessBorderVerticalRegEx.exec(key);
         if (match) {
-            // --- We have a thickness-border-vertical value to flow down
-            const remainder = match[2];
-            result[`thickness-border-top-${remainder}`] = value;
-            result[`thickness-border-bottom-${remainder}`] = value;
-        }
-        // --- Check "style-border-" theme variables
-        match = styleBorderRegEx.exec(key);
-        if (match) {
-            // --- We have a style-border value to flow down
+            // --- We have a borderVerticalWidth value to flow down
             const remainder = match[1];
-            result[`style-border-left-${remainder}`] = value;
-            result[`style-border-right-${remainder}`] = value;
-            result[`style-border-top-${remainder}`] = value;
-            result[`style-border-bottom-${remainder}`] = value;
+            result[`borderTopWidth-${remainder}`] = value;
+            result[`borderBottomWidth-${remainder}`] = value;
         }
-        // --- Check "style-border-horizontal" theme variables
+        // --- Check "borderHorizontalStyle" theme variables
         match = styleBorderHorizontalRegEx.exec(key);
         if (match) {
-            // --- We have a style-border-horizontal value to flow down
-            const remainder = match[2];
-            result[`style-border-left-${remainder}`] = value;
-            result[`style-border-right-${remainder}`] = value;
+            // --- We have a borderHorizontalStyle value to flow down
+            const remainder = match[1];
+            result[`borderLeftStyle-${remainder}`] = value;
+            result[`borderRightStyle-${remainder}`] = value;
         }
-        // --- Check "style-border-vertical" theme variables
+        // --- Check "borderVerticalStyle" theme variables
         match = styleBorderVerticalRegEx.exec(key);
         if (match) {
-            // --- We have a style-border-vertical value to flow down
-            const remainder = match[2];
-            result[`style-border-top-${remainder}`] = value;
-            result[`style-border-bottom-${remainder}`] = value;
-        }
-        // --- Check "color-border-" theme variables
-        match = colorBorderRegEx.exec(key);
-        if (match) {
-            // --- We have a color-border value to flow down
+            // --- We have a borderVerticalStyle value to flow down
             const remainder = match[1];
-            result[`color-border-left-${remainder}`] = value;
-            result[`color-border-right-${remainder}`] = value;
-            result[`color-border-top-${remainder}`] = value;
-            result[`color-border-bottom-${remainder}`] = value;
+            result[`borderTopStyle-${remainder}`] = value;
+            result[`borderBottomStyle-${remainder}`] = value;
         }
-        // --- Check "color-border-horizontal" theme variables
+        // --- Check "borderHorizontalColor" theme variables
         match = colorBorderHorizontalRegEx.exec(key);
         if (match) {
-            // --- We have a color-border-horizontal value to flow down
-            const remainder = match[2];
-            result[`color-border-left-${remainder}`] = value;
-            result[`color-border-right-${remainder}`] = value;
+            // --- We have a borderHorizontalColor value to flow down
+            const remainder = match[1];
+            result[`borderLeftColor-${remainder}`] = value;
+            result[`borderRightColor-${remainder}`] = value;
         }
-        // --- Check "color-border-vertical" theme variables
+        // --- Check "borderVerticalColor" theme variables
         match = colorBorderVerticalRegEx.exec(key);
         if (match) {
-            // --- We have a color-border-vertical value to flow down
-            const remainder = match[2];
-            result[`color-border-top-${remainder}`] = value;
-            result[`color-border-bottom-${remainder}`] = value;
+            // --- We have a borderVerticalColor value to flow down
+            const remainder = match[1];
+            result[`borderTopColor-${remainder}`] = value;
+            result[`borderBottomColor-${remainder}`] = value;
         }
     });
     // --- Done

package/dist/scripts/src/parsers/scripting/Parser.js

@@ -2708,12 +2708,12 @@ class Parser {
             if (Array.isArray(prop)) {
             }
             else {
-                reportError("W018");
+                this.reportError("W018");
                 return null;
             }
             const [propKey, propValue] = prop;
             if (propKey.type !== "IdE") {
-                reportError("W018");
+                this.reportError("W018");
                 return null;
             }
             let objD;