Styling and Stylekit documentation is unintuitive

[FlorianJacta]

Description
Styling and Stylekit documentation is unintuitive. Users have reported that this sections could be greatly imroved.

• How do you style your whole application?
• How do you style visual elements?
• How do you customize the Stylekit?
• Where is the class referenced in the Stylekit? And how to use them?
• How do I change the color of a text?

Everything was very confusing for users. We should have more example, a better explanation to enable them to achieve what they want.

[FlorianJacta]

We're receiving increasing complaints from users about the documentation. They’re struggling to perform even the most basic UI changes, as they’ve mentioned.

It's clear that the documentation needs improvement, particularly in guiding users through the process of modifying visual elements.

For instance, a common question has been, 'How do I make an input field longer?' This indicates that the current instructions are too unclear for users.

Restructuring the doc could help #1085

[FlorianJacta]

We should put the Styling doc just below User Interface:

• A sub-section should present how to style an application,
• A sub-section should present how to style controls (putting text in red, adding margin, padding, and more).

This should refer to a Stylekit page that shows every class of the Stylekit.

[FlorianJacta]

@FredLL-Avaiga answered another question on Styling to tell a user how to not capitalize the navbar:

.taipy-navbar .MuiButtonBase-root {
  text-transform: unset;
}

@FabienLelaquais @jrobinAV What do you think about having in each visual element page to add in the styling sections the relevant CSS selectors:

For example, navbar:

.taipy-navbar .MuiButtonBase-root {
  text-transform: unset;
}

/*add more*/

Selector:

.taipy-selector{
    margin:0px !important;
}

/* inside of selector */
.taipy-selector .MuiInputBase-root{
    background-color: #572c5f38;
    color: #221025;
    border-radius: 0px;
    height: 50px;
}

/* label of selector */
.taipy-selector .MuiFormLabel-root{
    color: #572c5f;
}

Input:

/* inside of input */
.taipy-input .MuiInputBase-root{
    background-color: #572c5f38;
    color: #221025;
    border-radius: 0px;
    height: 50px;
}

/* label of input */
.taipy-input .MuiFormLabel-root{
    color: #ce0707;
}

Table:

/* Table Head (apply to every child) */
.taipy-table .MuiTableHead-root .MuiTableRow-root>* {
    background-color: #b49cb9;
    color: #221025 !important;
    width: max-content;
}

/* Table Body - rows (apply to every child) */
.taipy-table .MuiTable-root {
    background-color: #572c5f0b;
    color: #221025;
}

/* Table Pagination/Footer  */
.taipy-table .MuiTablePagination-root{
    background-color: #572c5f38 !important;
    color: #221025 !important;
}

My opinion is that it could help a lot, but I am afraid this will require a lot of maintenance.

[FlorianJacta]

Created issue to encapsulate the comment above: #1113