[WW-3544] Make button compatible with generated CSS

AI.json

@@ -14,7 +14,7 @@
             "Disabled state",
             "Focus, blur, keydown, keyup events",
             "Form integration with submit type",
-            "Custom background color"
+            "Custom button background through element styles"
         ],
         "inherit": [
             "ww-text"
@@ -96,10 +96,11 @@
     "variables": [],
     "specifications": [
         "Inherits text properties from ww-text element",
+        "The text background content property does not exist. Never set content.backgroundColor; use the element style backgroundColor to style the whole button.",
         "Submit type buttons should be used inside a ww-form-container",
         "For form submission workflows, trigger them on the form container, not the submit button",
         "You need to set margin values in icons to create spacing between the icon and text",
         "Never forget the 'text' prop in the contents. The button will not display without it!"
     ],
     "examples": []
-}
+}

src/wwElement.vue

@@ -1,5 +1,5 @@
 <template>
-    <component :is="tag" class="ww-button" :class="{ button: tag, '-link': hasLink && !isEditing, active: isActive }"
+    <component :is="tag" class="ww-button" :class="{ button: tag, '-link': hasLink && !isEditing }"
         :type="buttonType" :style="buttonStyle" :data-ww-flag="'btn-' + content.buttonType" :disabled="content.disabled"
         v-bind="properties" @focus="isReallyFocused = true" @blur="onBlur($event)" @mousedown="onMouseActivate"
         @mouseup="onMouseDeactivate" @mouseleave="onMouseDeactivate" @touchstart="onTouchActivate"
@@ -34,8 +34,6 @@ export default {
         'update:content:effect',
         'change-menu-visibility',
         'change-borders-style',
-        'add-state',
-        'remove-state',
         'trigger-event',
     ],
     setup(props) {
@@ -68,7 +66,7 @@ export default {
     computed: {
         buttonStyle() {
             return {
-                justifyContent: TEXT_ALIGN_TO_JUSTIFY[this.content['_ww-text_textAlign']] || 'center',
+                '--ww-button-justify-content': TEXT_ALIGN_TO_JUSTIFY[this.content['_ww-text_textAlign']] || 'center',
             };
         },
         isEditing() {
@@ -104,22 +102,6 @@ export default {
         text() {
             return this.wwElementState.props.text;
         },
-        isFocused() {
-            /* wwEditor:start */
-            if (this.wwEditorState.isSelected) {
-                return this.wwElementState.states.includes('focus');
-            }
-            /* wwEditor:end */
-            return this.isReallyFocused;
-        },
-        isActive() {
-            /* wwEditor:start */
-            if (this.wwEditorState.isSelected) {
-                return this.wwElementState.states.includes('active');
-            }
-            /* wwEditor:end */
-            return this.isReallyActive;
-        },
     },
     watch: {
         /* wwEditor:start */
@@ -156,43 +138,13 @@ export default {
             },
         },
         /* wwEditor:end */
-        'content.disabled': {
-            immediate: true,
-            handler(value) {
-                if (value) {
-                    this.$emit('add-state', 'disabled');
-                } else {
-                    this.$emit('remove-state', 'disabled');
-                }
-            },
-        },
         isReallyFocused(isFocused, wasFocused) {
             if (isFocused && !wasFocused) {
                 this.$emit('trigger-event', { name: 'focus' });
             } else if (!isFocused && wasFocused) {
                 this.$emit('trigger-event', { name: 'blur' });
             }
         },
-        isFocused: {
-            immediate: true,
-            handler(value) {
-                if (value) {
-                    this.$emit('add-state', 'focus');
-                } else {
-                    this.$emit('remove-state', 'focus');
-                }
-            },
-        },
-        isActive: {
-            immediate: true,
-            handler(value) {
-                if (value) {
-                    this.$emit('add-state', 'active');
-                } else {
-                    this.$emit('remove-state', 'active');
-                }
-            },
-        },
     },
     methods: {
         /* wwEditor:start */
@@ -255,15 +207,11 @@ export default {
 
 <style lang="scss" scoped>
 .ww-button {
-    justify-content: center;
+    justify-content: var(--ww-button-justify-content, center);
     align-items: center;
 
     &.button {
-        outline: none;
-        border: none;
-        background: none;
-        font-family: inherit;
-        font-size: inherit;
+        appearance: none;
     }
 
     &.-link {

ww-config.js

@@ -55,35 +55,18 @@ export default {
             };
         },
     },
-    states: ['focus', 'disabled', 'active'],
+    states: [
+        { label: 'focus', selector: '&:focus-within' },
+        { label: 'disabled', selectors: ['&:disabled', '&[disabled]'] },
+        { label: 'active', selector: '&:active' },
+    ],
     triggerEvents: [
         { name: 'focus', label: { en: 'On focus' }, event: null },
         { name: 'blur', label: { en: 'On blur' }, event: null },
         { name: 'keydown', label: { en: 'On key down' }, event: null },
         { name: 'keyup', label: { en: 'On key up' }, event: null },
     ],
     properties: {
-        backgroundColor: {
-            label: {
-                en: 'Text Background',
-                fr: 'Background du Texte',
-            },
-            type: 'Color',
-            options: {
-                nullable: true,
-            },
-            bindable: true,
-            responsive: true,
-            states: true,
-            classes: true,
-            /* wwEditor:start */
-            bindingValidation: {
-                cssSupports: 'color',
-                type: 'string',
-                tooltip: 'A string that represents a color code: `"rebeccapurple" | "#00ff00" | "rgb(214, 122, 127)"`',
-            },
-            /* wwEditor:end */
-        },
         buttonType: {
             label: {
                 en: 'Type',