Decide on a good way to organize styles in a theme

[rafaeltab]

Draft

Scales

Navigation

• Main
• Primary
• Secondary
• Text

Core

• Main: GradientA, GradientB
• Primary
• Secondary
• Text

Status

• Danger
• Warning
• Info
• Success

Labels

Only specify Saturation and Lightness. Can be provided a color scale, it will automatically interpolate between the colors based on the hue. The scale should have a strictly decreasing hue value.

Method of retrieval

Use a function + the kind for core and navigation

const style = {
    searchBackground: primary(CoreScale),
    navigationBackground: main(NavigationScale),
    mainBackgroundA: gradient(main(CoreScale)).A, // if a gradient is possible use gradient function
    mainBackgroundB: gradient(main(CoreScale)).B, // if a gradient is possible use gradient function
}

When using the gradient function, but the desired color is not a gradient, put the same color in A and B.

Use a function for the status colors

const style = {
    danger: danger(),
    warning: warn(),
    info: info(),
    success: success()
}

Labels use a function with hue inside

const style = {
   redLabel: label(Hues.red),
   blueLabel: label(Hues.blue)
}

NOTE: Create a material UI application and look at their method for theming