Swift and SwiftUI

// Package.swift
dependencies: [
    .package(url: "https://github.com/maxgrits/makr-labs-design-system.git", from: "1.1.0"),
],
targets: [
    .target(name: "YourApp", dependencies: [
        .product(name: "MakrTokens", package: "makr-labs-design-system"),
    ]),
],

import MakrTokens
import SwiftUI

/// A project card on the app's paper: Bone in light mode, Night in dark mode, one step firmer when the reader turns
/// on Increase Contrast.
struct ProjectCard: View {
    @Environment(\.colorScheme) private var scheme
    @Environment(\.colorSchemeContrast) private var contrast

    private var look: MakrTokens.Look {
        MakrTokens.Look(
            theme: scheme == .dark ? .night : .bone,
            contrast: contrast == .increased ? .more : .normal
        )
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("Pebblepath")
                .foregroundStyle(Color.makr(.text, in: look))
            Text("Hand-thrown cups, shipped weekly")
                .foregroundStyle(Color.makr(.text2, in: look))
            Text("Get a quote")
                .padding(.horizontal, 16)
                .padding(.vertical, 12)
                .foregroundStyle(Color.makr(.onAction, in: look))
                .background(Color.makr(.action, in: look))
        }
        .padding(16)
        .background(Color.makr(.surfaceRaised, in: look))
    }
}

import MakrTokens
import SwiftUI

extension Font {
    /// A text role in its family at the phone size, scaling with Dynamic Type like body text. The family's font files
    /// ship with the app (MakrTokens names them; it does not bundle them).
    static func makr(_ role: MakrTokens.TextRole) -> Font {
        .custom(role.family.rawValue, size: role.size.compact, relativeTo: .body)
    }
}

struct CaseStudyIntro: View {
    var body: some View {
        let lede = MakrTokens.Text.lede
        Text("Fernlight sells plants by the window they suit.")
            .font(.makr(lede))
            .tracking(lede.tracking * lede.size.compact)
            .lineSpacing((lede.leading - 1) * lede.size.compact)
    }
}

import MakrTokens
import SwiftUI

extension MakrTokens.Length {
    /// A fluid length's phone value in compact width and its wide value in regular width.
    func value(in sizeClass: UserInterfaceSizeClass?) -> Double {
        switch self {
        case let .fixed(points):
            return points
        case let .fluid(min, max):
            return sizeClass == .regular ? max : min
        }
    }
}

struct Plate: View {
    @Environment(\.horizontalSizeClass) private var sizeClass
    let look = MakrTokens.Look.standard

    var body: some View {
        VStack(alignment: .leading, spacing: MakrTokens.Space.gapStack.value(in: sizeClass)) {
            Text("Jordan Reyes")
            Text("Booked a call for Thursday")
        }
        .padding(MakrTokens.Space.space6.compact)
        .background(Color.makr(.surfaceRaised, in: look))
        .clipShape(RoundedRectangle(cornerRadius: MakrTokens.Radius.plate))
        .overlay(
            RoundedRectangle(cornerRadius: MakrTokens.Radius.plate)
                .stroke(Color.makr(.rule, in: look), lineWidth: MakrTokens.Border.standard)
        )
        .padding(.horizontal, MakrTokens.Space.margin.value(in: sizeClass))
    }
}

import MakrTokens
import SwiftUI

/// A "Sent" stamp that lands with the stamp curve and the stamp duration at the look's volume. Under Reduce Motion
/// the duration is the reduced one (0 ms for a stamp), so it simply appears.
struct SentStamp: View {
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @State private var landed = false
    let look = MakrTokens.Look.standard

    var body: some View {
        let curve = MakrTokens.Eases.stamp
        let ms = MakrTokens.Durations.stamp.at(look.volume, reduceMotion: reduceMotion)
        Text("Sent")
            .scaleEffect(landed ? 1 : 1.4)
            .opacity(landed ? 1 : 0)
            .animation(
                .timingCurve(curve.x1, curve.y1, curve.x2, curve.y2, duration: ms / 1000),
                value: landed
            )
            .onAppear { landed = true }
    }
}