CrabUI
Loading...
Searching...
No Matches
Styles, Palettes

How would you define how components should look?

Componenets have graphical props, you can just set them and change the appearance of the component

But there's couple of problems with this approach:

  • It's hard to stick to some palette when hardcoding those values
  • If you decide to change them you'll have to manually replace every hardcoded value throughout the codebase
  • It's hard to swap values on e.g. all components of some type at runtime
  • there's no way to change only the values inherited from parent at runtime because they are already combined on creation

Styles and Palettes are designed to address that

Style

Every CUIComponent has a personal Style

Style is an observable Dictionary<string, string> containing mapping { "Prop name", "Value" }

Value can be either a string that can be parsed to that prop, or a path to some prop in CUIPalette
"Prop name" can be any prop of any type with a setter

Also every component type has a DefaultStyle, so you don't need to set all the values every time

Default styles are defined in "CSharp\Client\CrabUI\CUIAssets\Default Styles.xml", you can add more there or just set them in type metadata

Default styles are auto combined for derived types

Both default style and personal style overwrite the props, personal style takes presidence over default style

Props < parent default style < child default style < child personal style

All this stuff is observable so any change to any style will trigger recalculation of affected props

changing default style will recombine them and affect all component of that and derived types

Swapping the palette will affect anything that references it

Palettes

CUIPalette object contains Values, it's just a Dictionary<string, string> of {"some random name", "parsable value"}

CUIPalette class has 4 static palettes: Primary, Secondary, Tertiary, Quaternary

Palettes are not observable, but setting static var will trigger recalculation

You can reference them in a style like this: "CUIPalette.[name of the value]"
Which palette to use is controlled by a separate prop CUIComponent.Palette of a type PaletteOrder
So you could swap component order without changing the style

I've made a method for creating palettes from 2 colors, testing them and packing them in a sets

You can use them with commands: cuicreatepalette cuicreatepaletteset cuipalettedemo cuipalette

palettes are serializable to xml and nested values can be accessed by . like this button.background

I've premade some here "CSharp\Client\CrabUI\CUIAssets\Palettes" there are values for key components + values for layout stuff like Header Nav Main, hope that's enough