Rework styling engine - Githubissues

So far, we just have a massive object with duplicated styles. While defining the default styles, we copy over some of the base colors to all the components that need it. This means if that application developer wanted to overhaul the colors (like for dark mode or whatever) they would have to make sure to update the colors for all components. We should take a page out of the book of CSS and use cascading styles. Essentially, we have base styles that filter down to all the components if those styles are not defined.

Here's the system I'm proposing: We should segregate base styles and component styles into different naming conventions. Base styles will start with a lower case character, while component styles start with an upper case style. Consider this:

{
    color: 'white',
    Button: {
        color: 'green',
    }
}

Here, we are defining a base color for all components. We know this is a base style and not for a specific component because it's lowercase. But we also define a Button component style, where we then override the default that was specified above with a different color. This color will apply to all the different button styles. Let's say we wanted to be more specific with the button?

{
    color: 'white',
    Button: {
        Contained: {
            color: 'green',
        }
    }
}

Now, we define a button style that only applies to the contained variant. The color white will continue to be used for all other button styles and all other components.

We should also define some more nomenclature around what the different colors mean. Primory/secondary doesn't make a lot of sense to me, nobody is really sure that those colors actually mean. We should instead have these names: color, accentColor, selectColor, backgroundColor we should try to keep CSS names for styles wherever we can.

torrinworx / destamatic-ui

Rework styling engine #6