capy-ui / capy

💻Build one codebase and get native UI on Windows, Linux and Web
https://capy-ui.org
Mozilla Public License 2.0
1.61k stars 60 forks source link

Support styling #12

Open frmdstryr opened 2 years ago

frmdstryr commented 2 years ago

Are there any plans to support styles? Like background colors and the label font size.

zenith391 commented 2 years ago

Yes, although I'm still planning the architecture of how will it be done, like should it be something similar to CSS (albeit with the bad and confusing parts due to backward-compatibility replaced), and how to apply it to native widgets consistently on all platforms. But it's coming soon:tm:.

Losiel commented 2 years ago

(Sorry for replying to an old issue) but what about something like DataWrapper but StyleWrapper?

const importantButton = capy.StyleWrapper(
  .{
     .backgroundColor = capy.rgb(255, 0, 0)
   }
)

and then for creating a button let's say

.button(.{.label = "DELETE YOUR ENTIRE OS"}).style(importantButton)

(maybe not limit buttons to only one style?. styles added first have less priority) and if you do something like importantButton.backgroundColor.blue = 255 will update every component using the style. or even let styles use DataWrappers, but maybe that's too complex

This is just an idea I had and I don't know how cross platform would that be. However I think it's better than something like CSS because you don't have to parse and that would help linters (?)

mgord9518 commented 1 year ago

@zenith391 it should be possible to style a button using a bitmap for pretty much any conceivable UI kit, although it may have performance implications.

Maybe the theme engine could support basic drawing like lines, fill, alignment and gradients, then anything that somehow doesn't support drawing them on the fly could fall back on a pre-rendered bitmap? If this route is chosen, then a TinyVG (Zig-native vector image) Kvantum-like theme format could be used.