Simplify the codebase
Refactor the codebase to make it easier to apply color, color shades, background, and border. Expected API
- Idea i) Could leverage computed function names. It would be very restrictive like when someone wants to create a theme with two different purple shades. What color to abuse? Turn blue into a 2nd purple shade?
markup.block {
red_border(light_10)
yellow_background
gray_text(dark_10, 50%)
}
- Idea ii) Could merge colors with style into a color function. Would also be very restrictive for Polis forks when they want to add the 2nd shade of any color.
markup.block {
red('border', '+10')
yellow('background')
gray('text', '-10', 50%)
}
- Idea iii) Could re-create the CSS syntax to a certain extend. Colors are just values and would allow injecting a 2nd color shade. This approach comes with the downside that CSS-named colors clash with defined colors. How to distinguish between a global 'red' color value and the red CSS color?
markup.block {
border(p_red, p_light(10) )
background(p_yellow)
color(p_gray, p_dark(10), 50%)
}
- Idea iv) Could remove Polis functions entirely. Most freedom.
markup.block {
border: lighter(f00)
background: 0ff
color: rgba(darker(aaa), 50%)
}
Remove redundant colors (this will be a lot of work as Stylus can't know what values Nova supports and Nova only shows in the style debugger by many styles a token is affected).
The ultimate goal of this issue must be to not grow the generated CSS file twice as large as the Nova CSS template.
- CSS template is 5kb in size
- Or 301 lines of code
Edited by fibric