Change CSS class naming convention to PascalCase to align with MUI

[brionmario]

Is your suggestion related to an experience? Please describe.

We are currently using kebab-case CSS classes for our wrapped components. ex (oxygen-text-field). But MUI uses pascal case for their components. This results in inconsistent naming conventions across our styles, making it harder to maintain and creating potential conflicts between different design systems.

Ex:

.oxygen-text-field {
    .MuiOutlinedInput-root {
        border-radius: 8px;
        font-family: Gilmer;
    }
}

Currently MUI supports an experimental ClassName generator but this has some caveats that make it harder to transform the classnames right now.

Describe the improvement

Adopt a pascal case CSS class naming convention to align with MUI. (.Oxygen<COMPONENT_NAME>-<VARIANT>)

Ex:

- .oxygen-text-field {
+ .OxygenTextField-root {
    .MuiOutlinedInput-root {
        border-radius: 8px;
        font-family: Gilmer;
    }
}

Additional context
N/A