Colors, weights and alignment

Tessel has four small built-in enums for styling: Color, Weight, Alignment and Appearance. Like any enum, you usually write a case with a leading dot where the type is known, as in .color(.red), and you can use the types in your own code:

view Badge(label: String, tint: Color = .blue, align: Alignment = .center) {
    Text(label)
        .color(.white)
        .padding(horizontal: 8, vertical: 2)
        .background(tint, radius: 8)
        .frame(width: 120, alignment: align)
}

(Another built-in enum, IconName, is listed on the Icons page.)

Color

Used by .color, .background, .border and .hoverBackground.

Case			Notes
`primary`	`#1d1d1f`	`#f5f5f7`	The default text color.
`secondary`	`#6e6e73`	`#98989d`	Less important text.
`gray`	`#8e8e93`	`#8e8e93`
`red`	`#ff3b30`	`#ff453a`
`orange`	`#ff9500`	`#ff9f0a`
`yellow`	`#ffcc00`	`#ffd60a`
`green`	`#34c759`	`#30d158`	Also the color of a toggle that’s on.
`blue`	`#007aff`	`#0a84ff`	Also the accent color: button labels, the text caret, the selected tab.
`purple`	`#af52de`	`#bf5af2`
`pink`	`#ff2d55`	`#ff375f`
`white`	`#ffffff`	`#ffffff`	The same in both appearances.
`black`	`#000000`	`#000000`	The same in both appearances.
`clear`	transparent	transparent	Draws nothing.
`lightGray`	`#e5e5ea`	`#3a3a3c`	Subtle backgrounds, hover highlights.
`sidebar`	`#f3f3f6`	`#252527`	Side panels; also the tab bar of a `TabView`.
`highlight`	`#d6e4fc`	`#223e68`	A selected row.
`separator`	`#d8d8de`	`#3e3e42`	Thin lines; also the color of a `Divider`.
`background`	`#ffffff`	`#1c1c1e`	The window’s background.
`rgb(red, green, blue)`	yours	yours	A color of your own. Each value is an `Int` from 0 to 255.
`rgba(red, green, blue, opacity)`	yours	yours	The same, see-through: `opacity` is a `Float` from 0 (invisible) to 1 (solid).

Each named color has a value for the light and for the dark appearance, and the app uses the one for how it’s showing (see Light and dark). white, black and the colors you make with rgb and rgba are the same in both.

let brand: Color = .rgb(255, 136, 0)
Text("Sale").background(brand, radius: 6)
Text("Note").background(.rgba(255, 136, 0, 0.2), radius: 6)

rgb and rgba take their values without labels. Values outside their range are brought into it: .rgb(300, -5, 0) is .rgb(255, 0, 0).
The named colors are fully opaque except clear. Besides rgba, .opacity fades a whole view.
Printing a color gives its case’s name: red, or rgb for one of your own.

A typical sidebar row, using several of them:

HStack {
    Icon(.fileText).color(.secondary)
    Text("main.tsl")
    Spacer()
}
.padding(horizontal: 8, vertical: 4)
.background(.highlight, radius: 4)

Weight

Used by .font(weight:).

Case	Font weight
`regular`	400, the default
`medium`	500
`semibold`	600
`bold`	700

Text("Heading").font(size: 20, weight: .semibold)

Alignment

Used by the alignment: of VStack, HStack, ZStack and .frame, and by .textAlignment.

An alignment names a position in a box: a horizontal part (leading, center or trailing) and a vertical part (top, center or bottom). “Leading” is the left side and “trailing” the right side.

Case	Horizontal	Vertical
`topLeading`	leading	top
`top`	center	top
`topTrailing`	trailing	top
`leading`	leading	center
`center`	center	center
`trailing`	trailing	center
`bottomLeading`	leading	bottom
`bottom`	center	bottom
`bottomTrailing`	trailing	bottom

Where it’s used decides which parts count:

Used in	Default	What counts
`ZStack(alignment:)`	`.center`	Both parts: where each layer sits in the stack.
`.frame(alignment:)`	see frame	Both parts: where the content sits in a larger frame.
`VStack(alignment:)`	`.center`	Only the horizontal part: how the views line up across the stack. `.topLeading` acts like `.leading`, and `.top` and `.bottom` like `.center`.
`HStack(alignment:)`	`.center`	Only the vertical part: `.topLeading` acts like `.top`, `.bottomTrailing` like `.bottom`. `.leading` and `.trailing` act like `.top` and `.bottom`.
`.textAlignment(…)`	`.leading`	Only the horizontal part: how the lines of a text line up.

VStack(alignment: .leading) {
    Text("Name").font(weight: .bold)
    Text("Ada Lovelace")
}
ZStack(alignment: .bottomTrailing) {
    Text("Photo").frame(width: 120, height: 80).background(.lightGray)
    Text("new").font(size: 10).padding(4)
}

See Alignment for a guided tour with pictures.

Appearance

Used by the appearance: of app.

Case	The app looks…
`system`	light or dark as the system does, and changes with it. The default.
`light`	always light.
`dark`	always dark.

app Player(appearance: .dark) {
    Text("Now playing")
}

isDarkMode() tells which one the app is showing in.