Redesign CSS properties to make them more swifty

[JoshSweaterGuy]

As follows is the current solution and the new proposed solution.

Current Solution

Properties like background color are called like follows.

// background color
CSS.backgroundColor(.red) // Unit.Color
CSS.backgroundColor(.unset) // Unit.Global

// background shorthand
CSS.background( .red, .left) // set shorthand background 
CSS.background( .unset) // global parameters on background shorthand

As shown above all properties have at least 2 initializers. One is the global initializer to initialize background color to a global property. And any other initializer is to set a color.

All body elements of the properties are unnamed

Issues

Initializer issues

1. It's a little unclear what value is being set and which initializer is being used.
2. with properties with multiple values / initializers confusing with unnammed params
3. having unnamed parameters are a bit un-"swifty"

Unit Issues

there is a issue with overlapping properties in units

for example Currently Length unit has length properties and LengthProperties have the same properties + Percent. When creating state values you won't be able to use Length types within LengthPercents initialzers which is a little confusing.

@State var length: Length = .px(100)
...
CSS.width(length) // error: width is a length percentage
CSS.width(.px(100)) 
CSS.width(.percent(100)) 

New Solution

Initializer Solution

Properties with short-hands should be initialized using one method and the var name being a named func param.

// background color
CSS.background(color: .red) // Unit.Color
CSS.background(color: .unset) // Unit.Global

// background shorthand
CSS.background(color: .red,  position: .left) // set shorthand background 
CSS.background( .unset) // global parameters on background shorthand

Unit Solution

note this may not be worth doing because maybe Units should not be used as state properties.

instead of inheriting Unit cases in Shipwright, prefer dependency injection-like syntax. only issue is its a bit more verbose now.

@State var length: Length = .px(100)
@State var lengthPercentage: LengthPercentage = .length(.px(100))

...
CSS.width(.length(length)) 
CSS.width(.length(.px(100))) 
CSS.width(.percent(100))
CSS.width(lengthPercentage)

Possible ideas

Possibly to make this even more concise this could be considered but it's a bit confusing. Create a Unit for each css that takes either any of its inherited types with a enum case or the actual inherited types.

@State var length: Length = .px(100)
@State var lengthPercentage: LengthPercentage = .length(.px(100))
@State var widthValue: Unit.Width = .length(.px(100))

...
CSS.width(.length(length)) 
CSS.width(.px(100))  // no longer need .length(...)
CSS.width(.percent(100))
CSS.width(lengthPercentage) // error: CSS.width is no longer Unit.LengthPercent but Unit.Width
CSS.width(widthValue) // works but state only works with other width properties