Начало работы: SwiftUI

Нативный Swift-пакет KitUI для iOS 17+ и macOS 14+: темы Vercel и Liquid Glass в SwiftUI, токены сгенерированы из тех же CSS-тем

1. Подключите пакет

Пакет лежит в папке swift/ репозитория, продукт — KitUI (не путать с UIKit). Пока он не опубликован, подключайте его по локальному пути: в Xcode — File → Add Package Dependencies… → Add Local…, в Package.swift — как ниже (имя пакета у зависимости по пути — имя папки, swift). Git-URL в примере — заглушка: для подключения по URL Package.swift должен лежать в корне репозитория, поэтому понадобится отдельный репозиторий (или зеркало) с содержимым swift/.

dependencies: [
  .package(path: "../valyro-ui/swift"),
  // PLACEHOLDER: once the separate repository is published
  // .package(url: "https://github.com/<org>/kitui-swift.git", from: "0.1.0"),
],
targets: [
  .target(name: "MyApp", dependencies: [.product(name: "KitUI", package: "swift")]),
]

2. Тема

kitTheme(_:mode:) кладёт токены в environment: .vercel или .glass, режим .light, .dark или .system. Increase Contrast и Reduce Transparency переключают варианты токенов сами — те же, что CSS даёт для prefers-contrast: more и prefers-reduced-transparency: reduce; при Reduce Motion анимации выключаются, размер текста следует Dynamic Type. В Glass на iOS 26 / macOS 26 поверхности — нативный glassEffect, на более ранних системах — .ultraThinMaterial с бликом по краю из --ui-highlight.

import KitUI
import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
        .kitPageBackground()
        .kitTheme(.glass, mode: .system)
    }
  }
}

3. Компоненты

Где можно, компоненты — стили SwiftUI (.buttonStyle(.kit(.secondary)), .toggleStyle(.kitSwitch), .textFieldStyle(.kit), .progressViewStyle(.kit)), остальное — вью с префиксом Kit. Токены доступны через @Environment(\.kitTokens).

import KitUI
import SwiftUI

struct ContentView: View {
  @State private var email = ""
  @State private var notify = true
  @State private var toasts = KitToastCenter()
  @Environment(\.kitTokens) private var t

  var body: some View {
    VStack(alignment: .leading, spacing: t.space4) {
      KitCard {
        KitCardHeader("Production", description: "Deployed 2 minutes ago")
        TextField("Email", text: $email).textFieldStyle(.kit(systemImage: "envelope"))
        Toggle("Email me", isOn: $notify).toggleStyle(.kitSwitch)
        HStack {
          Button("Cancel") {}.buttonStyle(.kit(.secondary))
          KitButton("Deploy", systemImage: "arrow.up.circle") {
            toasts.show("Deployed", status: .success)
          }
        }
      }
      ProgressView(value: 0.6).progressViewStyle(.kit)
    }
    .padding()
    .kitToasts(toasts)
  }
}

4. Шрифт Geist (Vercel)

Geist в пакет не входит. Добавьте файлы Geist и Geist Mono (лицензия OFL) в таргет приложения и зарегистрируйте их до первого экрана — через UIAppFonts (iOS) / ATSApplicationFontsPath (macOS) в Info.plist или кодом. KitUI берёт первое установленное семейство из --ui-font-sans / --ui-font-mono; без Geist — SF Pro и SF Mono.

import CoreText

// In your App's init():
for url in Bundle.main.urls(forResourcesWithExtension: "otf", subdirectory: "Fonts") ?? [] {
  CTFontManagerRegisterFontsForURL(url as CFURL, .process, nil)
}

5. Токены из CSS

Цвета, радиусы, отступы, размеры и веса шрифтов, тени по слоям, длительности и кривые, параметры стекла не переписываются вручную: npm run tokens:export загружает src/lib/styles/themes/*.css в headless Chromium, читает вычисленные значения для каждой темы, режима и варианта доступности и пишет tokens/tokens.json (формат в духе DTCG) и swift/Sources/KitUI/Generated/Tokens.swift. Новый файл темы после экспорта становится новым case в KitTheme.

npm run tokens:export

6. Каталог и тесты

swift run KitUICatalog открывает на macOS окно со всеми компонентами и переключателями темы и режима. Тесты сверяют токены с CSS и рисуют каждый компонент во всех темах и режимах в PNG ($KITUI_SNAPSHOT_DIR). С Xcode хватает swift test; если стоят только Command Line Tools, запускайте npm run swift:test — обычный swift test там не находит Swift Testing и молча пропускает тесты.

cd swift
swift build
swift run KitUICatalog
cd .. && npm run swift:test

7. Ограничения

Сборка под iOS, запуск в симуляторе и на устройстве требуют Xcode; без него пакет собран и протестирован на macOS, а код KitUI проверен компилятором под iOS 17 через Mac Catalyst. Нативно есть Button, IconButton, Badge, Avatar и AvatarGroup, Card, стиль TextField/SecureField, Toggle (switch и checkbox), SegmentedControl, Slider, ProgressBar, Spinner, Skeleton, Alert, Toast, оформление Sheet, Tabs, FloatingTabBar, ListRow, StatsCard со Sparkline, EmptyState, ChatMessage и PromptComposer; остальное (таблицы, графики, командная палитра, редакторы и пр.) есть только в веб-версии. Компонентные CSS-токены попадают в KitTokens, но используют их только перечисленные компоненты.

Другие фреймворки