Update the components

[mattesmohr]

This PR includes new symbols, some API changes and a new, but familiar approach for configuring styles.

New symbols

Symbol(system: .bell)
Symbol(system: .chevron(.up))
Symbol(system: .chevron(.down))
Symbol(system: .chevron(.left))
Symbol(system: .chevron(.right))
Symbol(system: .ellipsis(.horizontal))
Symbol(system: .ellipsis(.vertical))
Symbol(system: .eye)
Symbol(system: .filter)
Symbol(system: .flask)
Symbol(system: .key)
Symbol(system: .lightbulb)
Symbol(system: .pencil)
Symbol(system: .refresh)
Symbol(system: .trash)

API changes

Symbol(system: .folder)

// Previously
Symbol(system: "folder")

VStack(spacing: .small) {}

// Previously
VStack {}.contentSpace(.small);

Grid(spacing: .small) {}

// You can also now differentiate between horizontal and vertical spacing
Grid(horizontalSpacing: .small, verticalSpacing: .small) {}

Grid {}.contentSpace(.small)

Text(alignment: .center) {}

Text {}.foregroundColor(.accent)

// Previously
Text {}.foregroundColor(.primary)

// Sets the frame height to max-content
VStack {}.frame(height: .maximum)

// Sets the frame height to auto
VStack {}.frame(height: .minimum)

Group appearance

Grouping buttons or images alters the appearance of its content, e. g. individual images become an avatar group.

Grouping {
  Button(role: .button) {
     "Left"
  }
  Button(role: .button) {
     "Right"
  }
}

Style configuration

You can now define a style once and apply it to multiple components.

struct CustomStyle: TextConfiguration {

    var fontFamily: Tokens.FontFamily? = nil
    var fontSize: Tokens.FontSize? = .small
    var fontWeight: Tokens.FontWeight? = .bold
    var foregroundColor: Tokens.ForegroundColor? = .accent
    var textCase: Tokens.TextCase? = .uppercase
}

Text {
  "Hello World!"
}
.textStyle(CustomStyle())

Text {
  "Are you there?"
}
.textStyle(CustomStyle())