feat(tokens): ManaTheme + 8 Web-Theme-Variants (v1.6.0)
Acht Web-Themes aus @mana/themes (mana, forest, paper, neutral, lume, twilight, skylight, monochrome) sind jetzt als Swift verfuegbar. Generiert aus den CSS-Quellen via `pnpm --filter @mana/themes gen:swift`, hand-geschriebene API-Schicht oben drauf. Hintergrund: Cards, Viadocu, Nutriphi hatten je ~90 LOC forest-HSL- Apparat lokal nachgebaut. Mit v1.6.0 sind diese App-lokalen Files durch `ManaTheme.<variant>` ersetzbar (Audit 2026-05-17 V1). Neu: - `ManaTheme` (public enum) — 8 Cases, CaseIterable, Sendable - `ManaThemeColors` (public struct, Sendable) — 12 Tokens als Color - `ManaTheme.colors` + Convenience-Accessoren (`.background` etc.) - `View.manaTheme(_:)` + `@Environment(\.manaTheme)` (Default `.mana`) - Generator: `mana/packages/themes/scripts/gen-swift-themes.mjs` Geaendert: nichts breaking. `ManaColor.*` und `ManaBrand.*` unveraendert. Tests: 7 neue Tests in ThemeTests.swift; 12/12 ManaTokens grün, 76/76 gesamt grün auf macOS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
a70f7fa5e8
commit
20c30fc321
6 changed files with 462 additions and 0 deletions
143
Sources/ManaTokens/Themes/GeneratedThemes.swift
Normal file
143
Sources/ManaTokens/Themes/GeneratedThemes.swift
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
// ============================================================
|
||||
// AUTOGENERIERT — NICHT MANUELL EDITIEREN.
|
||||
//
|
||||
// Quelle: mana/packages/themes/src/variants/*.css
|
||||
// Generator: mana/packages/themes/scripts/gen-swift-themes.mjs
|
||||
// Aufruf: pnpm --filter @mana/themes gen:swift
|
||||
//
|
||||
// Drift-Check: nach jedem Generator-Lauf `git diff --exit-code`
|
||||
// in CI sicherstellen.
|
||||
// ============================================================
|
||||
|
||||
import SwiftUI
|
||||
|
||||
public extension ManaThemeColors {
|
||||
|
||||
/// forest-Variant aus `mana/packages/themes/src/variants/forest.css`.
|
||||
static let forest = ManaThemeColors(
|
||||
background: Color.manaToken(light: (0, 0, 100), dark: (142, 30, 8)),
|
||||
foreground: Color.manaToken(light: (142, 30, 12), dark: (142, 15, 95)),
|
||||
surface: Color.manaToken(light: (142, 25, 98), dark: (142, 25, 12)),
|
||||
surfaceHover: Color.manaToken(light: (142, 20, 95), dark: (142, 20, 16)),
|
||||
muted: Color.manaToken(light: (142, 15, 93), dark: (142, 18, 18)),
|
||||
mutedForeground: Color.manaToken(light: (142, 10, 42), dark: (142, 12, 65)),
|
||||
border: Color.manaToken(light: (142, 15, 88), dark: (142, 18, 22)),
|
||||
primary: Color.manaToken(light: (142, 76, 28), dark: (142, 71, 45)),
|
||||
primaryForeground: Color.manaToken(light: (0, 0, 100), dark: (142, 30, 8)),
|
||||
error: Color.manaToken(light: (0, 84, 60), dark: (0, 63, 55)),
|
||||
success: Color.manaToken(light: (142, 71, 45), dark: (142, 71, 45)),
|
||||
warning: Color.manaToken(light: (38, 92, 50), dark: (48, 96, 53))
|
||||
)
|
||||
|
||||
/// lume-Variant aus `mana/packages/themes/src/variants/lume.css`.
|
||||
static let lume = ManaThemeColors(
|
||||
background: Color.manaToken(light: (0, 0, 100), dark: (0, 0, 6)),
|
||||
foreground: Color.manaToken(light: (0, 0, 17), dark: (0, 0, 100)),
|
||||
surface: Color.manaToken(light: (0, 0, 99), dark: (0, 0, 12)),
|
||||
surfaceHover: Color.manaToken(light: (51, 40, 95), dark: (51, 30, 18)),
|
||||
muted: Color.manaToken(light: (0, 0, 92), dark: (0, 0, 17)),
|
||||
mutedForeground: Color.manaToken(light: (0, 0, 42), dark: (0, 0, 65)),
|
||||
border: Color.manaToken(light: (0, 0, 86), dark: (0, 0, 26)),
|
||||
primary: Color.manaToken(light: (51, 95, 58), dark: (51, 95, 58)),
|
||||
primaryForeground: Color.manaToken(light: (0, 0, 13), dark: (0, 0, 6)),
|
||||
error: Color.manaToken(light: (5, 78, 55), dark: (5, 78, 60)),
|
||||
success: Color.manaToken(light: (142, 71, 45), dark: (142, 71, 50)),
|
||||
warning: Color.manaToken(light: (38, 92, 50), dark: (48, 96, 55))
|
||||
)
|
||||
|
||||
/// mana-Variant aus `mana/packages/themes/src/variants/mana.css`.
|
||||
static let mana = ManaThemeColors(
|
||||
background: Color.manaToken(light: (0, 0, 100), dark: (220, 20, 9)),
|
||||
foreground: Color.manaToken(light: (220, 15, 12), dark: (25, 15, 95)),
|
||||
surface: Color.manaToken(light: (0, 0, 99), dark: (220, 18, 13)),
|
||||
surfaceHover: Color.manaToken(light: (25, 30, 95), dark: (25, 20, 18)),
|
||||
muted: Color.manaToken(light: (25, 20, 93), dark: (220, 18, 18)),
|
||||
mutedForeground: Color.manaToken(light: (220, 10, 42), dark: (220, 10, 65)),
|
||||
border: Color.manaToken(light: (25, 15, 88), dark: (220, 15, 22)),
|
||||
primary: Color.manaToken(light: (25, 100, 50), dark: (25, 100, 58)),
|
||||
primaryForeground: Color.manaToken(light: (0, 0, 10), dark: (220, 20, 9)),
|
||||
error: Color.manaToken(light: (0, 84, 60), dark: (0, 63, 55)),
|
||||
success: Color.manaToken(light: (142, 71, 45), dark: (142, 71, 45)),
|
||||
warning: Color.manaToken(light: (38, 92, 50), dark: (48, 96, 53))
|
||||
)
|
||||
|
||||
/// monochrome-Variant aus `mana/packages/themes/src/variants/monochrome.css`.
|
||||
static let monochrome = ManaThemeColors(
|
||||
background: Color.manaToken(light: (0, 0, 100), dark: (0, 0, 5)),
|
||||
foreground: Color.manaToken(light: (0, 0, 10), dark: (0, 0, 95)),
|
||||
surface: Color.manaToken(light: (0, 0, 99), dark: (0, 0, 10)),
|
||||
surfaceHover: Color.manaToken(light: (0, 0, 95), dark: (0, 0, 15)),
|
||||
muted: Color.manaToken(light: (0, 0, 93), dark: (0, 0, 17)),
|
||||
mutedForeground: Color.manaToken(light: (0, 0, 40), dark: (0, 0, 65)),
|
||||
border: Color.manaToken(light: (0, 0, 85), dark: (0, 0, 22)),
|
||||
primary: Color.manaToken(light: (0, 0, 25), dark: (0, 0, 80)),
|
||||
primaryForeground: Color.manaToken(light: (0, 0, 100), dark: (0, 0, 5)),
|
||||
error: Color.manaToken(light: (0, 70, 45), dark: (0, 65, 55)),
|
||||
success: Color.manaToken(light: (142, 60, 35), dark: (142, 60, 50)),
|
||||
warning: Color.manaToken(light: (38, 90, 45), dark: (48, 90, 55))
|
||||
)
|
||||
|
||||
/// neutral-Variant aus `mana/packages/themes/src/variants/neutral.css`.
|
||||
static let neutral = ManaThemeColors(
|
||||
background: Color.manaToken(light: (0, 0, 99), dark: (0, 0, 8)),
|
||||
foreground: Color.manaToken(light: (0, 0, 13), dark: (0, 0, 95)),
|
||||
surface: Color.manaToken(light: (0, 0, 100), dark: (0, 0, 12)),
|
||||
surfaceHover: Color.manaToken(light: (0, 0, 96), dark: (0, 0, 17)),
|
||||
muted: Color.manaToken(light: (0, 0, 94), dark: (0, 0, 18)),
|
||||
mutedForeground: Color.manaToken(light: (0, 0, 45), dark: (0, 0, 65)),
|
||||
border: Color.manaToken(light: (0, 0, 88), dark: (0, 0, 22)),
|
||||
primary: Color.manaToken(light: (215, 60, 40), dark: (215, 70, 60)),
|
||||
primaryForeground: Color.manaToken(light: (0, 0, 100), dark: (0, 0, 8)),
|
||||
error: Color.manaToken(light: (0, 65, 45), dark: (0, 63, 55)),
|
||||
success: Color.manaToken(light: (135, 35, 35), dark: (135, 35, 55)),
|
||||
warning: Color.manaToken(light: (38, 92, 45), dark: (48, 96, 53))
|
||||
)
|
||||
|
||||
/// paper-Variant aus `mana/packages/themes/src/variants/paper.css`.
|
||||
static let paper = ManaThemeColors(
|
||||
background: Color.manaToken(light: (38, 28, 95), dark: (24, 14, 9)),
|
||||
foreground: Color.manaToken(light: (20, 14, 16), dark: (38, 24, 88)),
|
||||
surface: Color.manaToken(light: (0, 0, 100), dark: (24, 12, 13)),
|
||||
surfaceHover: Color.manaToken(light: (38, 24, 92), dark: (24, 14, 17)),
|
||||
muted: Color.manaToken(light: (38, 20, 90), dark: (24, 12, 18)),
|
||||
mutedForeground: Color.manaToken(light: (20, 14, 50), dark: (38, 12, 60)),
|
||||
border: Color.manaToken(light: (38, 18, 80), dark: (24, 10, 25)),
|
||||
primary: Color.manaToken(light: (18, 50, 38), dark: (24, 60, 65)),
|
||||
primaryForeground: Color.manaToken(light: (0, 0, 100), dark: (24, 14, 9)),
|
||||
error: Color.manaToken(light: (0, 65, 45), dark: (0, 60, 55)),
|
||||
success: Color.manaToken(light: (135, 35, 35), dark: (135, 35, 55)),
|
||||
warning: Color.manaToken(light: (38, 80, 40), dark: (38, 70, 55))
|
||||
)
|
||||
|
||||
/// skylight-Variant aus `mana/packages/themes/src/variants/skylight.css`.
|
||||
static let skylight = ManaThemeColors(
|
||||
background: Color.manaToken(light: (205, 50, 99), dark: (215, 40, 9)),
|
||||
foreground: Color.manaToken(light: (215, 30, 15), dark: (205, 25, 95)),
|
||||
surface: Color.manaToken(light: (0, 0, 100), dark: (215, 35, 13)),
|
||||
surfaceHover: Color.manaToken(light: (205, 40, 95), dark: (215, 30, 18)),
|
||||
muted: Color.manaToken(light: (205, 30, 93), dark: (215, 30, 19)),
|
||||
mutedForeground: Color.manaToken(light: (215, 15, 45), dark: (205, 18, 65)),
|
||||
border: Color.manaToken(light: (205, 25, 88), dark: (215, 25, 24)),
|
||||
primary: Color.manaToken(light: (205, 90, 40), dark: (205, 90, 60)),
|
||||
primaryForeground: Color.manaToken(light: (0, 0, 100), dark: (215, 40, 9)),
|
||||
error: Color.manaToken(light: (0, 80, 50), dark: (0, 70, 60)),
|
||||
success: Color.manaToken(light: (142, 65, 40), dark: (142, 65, 50)),
|
||||
warning: Color.manaToken(light: (38, 92, 50), dark: (48, 95, 55))
|
||||
)
|
||||
|
||||
/// twilight-Variant aus `mana/packages/themes/src/variants/twilight.css`.
|
||||
static let twilight = ManaThemeColors(
|
||||
background: Color.manaToken(light: (250, 30, 97), dark: (260, 35, 8)),
|
||||
foreground: Color.manaToken(light: (260, 25, 15), dark: (250, 20, 92)),
|
||||
surface: Color.manaToken(light: (250, 40, 99), dark: (260, 30, 12)),
|
||||
surfaceHover: Color.manaToken(light: (260, 30, 94), dark: (260, 28, 17)),
|
||||
muted: Color.manaToken(light: (260, 25, 92), dark: (260, 25, 19)),
|
||||
mutedForeground: Color.manaToken(light: (260, 15, 45), dark: (250, 15, 65)),
|
||||
border: Color.manaToken(light: (260, 20, 87), dark: (260, 20, 25)),
|
||||
primary: Color.manaToken(light: (260, 70, 55), dark: (260, 75, 70)),
|
||||
primaryForeground: Color.manaToken(light: (0, 0, 100), dark: (260, 35, 10)),
|
||||
error: Color.manaToken(light: (0, 75, 55), dark: (0, 65, 60)),
|
||||
success: Color.manaToken(light: (142, 60, 45), dark: (142, 60, 55)),
|
||||
warning: Color.manaToken(light: (38, 90, 55), dark: (48, 90, 55))
|
||||
)
|
||||
}
|
||||
54
Sources/ManaTokens/Themes/ManaTheme.swift
Normal file
54
Sources/ManaTokens/Themes/ManaTheme.swift
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import SwiftUI
|
||||
|
||||
/// Eine der acht Verein-Theme-Variants aus `mana/packages/themes`.
|
||||
///
|
||||
/// Die Werte-Schicht (``ManaThemeColors``) wird per `colors`-Accessor
|
||||
/// geliefert. Convenience-Properties (`background`, `foreground`, …)
|
||||
/// erlauben Apps, ohne `.colors`-Indirektion zu schreiben:
|
||||
///
|
||||
/// ```swift
|
||||
/// ManaTheme.forest.foreground // Convenience
|
||||
/// ManaTheme.forest.colors.foreground // explizit
|
||||
/// ```
|
||||
///
|
||||
/// Für User-Theme-Switching nutze ``SwiftUICore/View/manaTheme(_:)``
|
||||
/// und lese im View per `@Environment(\.manaTheme)`.
|
||||
public enum ManaTheme: String, CaseIterable, Sendable {
|
||||
case mana
|
||||
case forest
|
||||
case paper
|
||||
case neutral
|
||||
case lume
|
||||
case twilight
|
||||
case skylight
|
||||
case monochrome
|
||||
|
||||
/// Konkrete Token-Werte für diese Variant.
|
||||
public var colors: ManaThemeColors {
|
||||
switch self {
|
||||
case .mana: return .mana
|
||||
case .forest: return .forest
|
||||
case .paper: return .paper
|
||||
case .neutral: return .neutral
|
||||
case .lume: return .lume
|
||||
case .twilight: return .twilight
|
||||
case .skylight: return .skylight
|
||||
case .monochrome: return .monochrome
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: Convenience-Accessors
|
||||
|
||||
public var background: Color { colors.background }
|
||||
public var foreground: Color { colors.foreground }
|
||||
public var surface: Color { colors.surface }
|
||||
public var surfaceHover: Color { colors.surfaceHover }
|
||||
public var muted: Color { colors.muted }
|
||||
public var mutedForeground: Color { colors.mutedForeground }
|
||||
public var border: Color { colors.border }
|
||||
public var primary: Color { colors.primary }
|
||||
public var primaryForeground: Color { colors.primaryForeground }
|
||||
public var error: Color { colors.error }
|
||||
public var success: Color { colors.success }
|
||||
public var warning: Color { colors.warning }
|
||||
}
|
||||
76
Sources/ManaTokens/Themes/ManaThemeColors.swift
Normal file
76
Sources/ManaTokens/Themes/ManaThemeColors.swift
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import SwiftUI
|
||||
|
||||
/// Die 12 Vereins-Tokens als konkrete Color-Werte für eine bestimmte
|
||||
/// Theme-Variant. Wird heute per-Variant von ``ManaTheme/colors``
|
||||
/// geliefert; die statischen Variants (``ManaThemeColors/mana``,
|
||||
/// ``ManaThemeColors/forest`` etc.) leben im generierten File
|
||||
/// `GeneratedThemes.swift`.
|
||||
///
|
||||
/// **Verwendung:**
|
||||
///
|
||||
/// ```swift
|
||||
/// // Direkt:
|
||||
/// Text("Hi").foregroundColor(ManaTheme.forest.foreground)
|
||||
///
|
||||
/// // Via Environment (für Apps, die User-Theme-Switching anbieten):
|
||||
/// @Environment(\.manaTheme) var theme
|
||||
/// Text("Hi").foregroundColor(theme.foreground)
|
||||
/// ```
|
||||
///
|
||||
/// Beide Werte (`light:`, `dark:`) sind CSS-HSL-Tripel `(hue 0–360,
|
||||
/// saturation 0–100, lightness 0–100)`. Quelle:
|
||||
/// `mana/packages/themes/src/variants/*.css`.
|
||||
public struct ManaThemeColors: Sendable {
|
||||
/// Token 1 — `--color-background`. Page-Hintergrund.
|
||||
public let background: Color
|
||||
/// Token 2 — `--color-foreground`. Standard-Text.
|
||||
public let foreground: Color
|
||||
/// Token 3 — `--color-surface`. Card, Panel, Modal, Popover.
|
||||
public let surface: Color
|
||||
/// Token 4 — `--color-surface-hover`. Hover-State auf Surface.
|
||||
public let surfaceHover: Color
|
||||
/// Token 5 — `--color-muted`. Disabled-Felder, Skeleton.
|
||||
public let muted: Color
|
||||
/// Token 6 — `--color-muted-foreground`. Sekundär-Text, Placeholder.
|
||||
public let mutedForeground: Color
|
||||
/// Token 7 — `--color-border`. Rahmen, Trennlinien.
|
||||
public let border: Color
|
||||
/// Token 8 — `--color-primary`. App-Akzent.
|
||||
public let primary: Color
|
||||
/// Token 9 — `--color-primary-foreground`. Text auf Primary-Flächen.
|
||||
public let primaryForeground: Color
|
||||
/// Token 10 — `--color-error`. Fehler, Lösch-Aktion.
|
||||
public let error: Color
|
||||
/// Token 11 — `--color-success`. Erfolg, Bestätigung.
|
||||
public let success: Color
|
||||
/// Token 12 — `--color-warning`. Warnung, Aufmerksamkeit.
|
||||
public let warning: Color
|
||||
|
||||
public init(
|
||||
background: Color,
|
||||
foreground: Color,
|
||||
surface: Color,
|
||||
surfaceHover: Color,
|
||||
muted: Color,
|
||||
mutedForeground: Color,
|
||||
border: Color,
|
||||
primary: Color,
|
||||
primaryForeground: Color,
|
||||
error: Color,
|
||||
success: Color,
|
||||
warning: Color
|
||||
) {
|
||||
self.background = background
|
||||
self.foreground = foreground
|
||||
self.surface = surface
|
||||
self.surfaceHover = surfaceHover
|
||||
self.muted = muted
|
||||
self.mutedForeground = mutedForeground
|
||||
self.border = border
|
||||
self.primary = primary
|
||||
self.primaryForeground = primaryForeground
|
||||
self.error = error
|
||||
self.success = success
|
||||
self.warning = warning
|
||||
}
|
||||
}
|
||||
37
Sources/ManaTokens/Themes/View+ManaTheme.swift
Normal file
37
Sources/ManaTokens/Themes/View+ManaTheme.swift
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import SwiftUI
|
||||
|
||||
private struct ManaThemeEnvironmentKey: EnvironmentKey {
|
||||
static let defaultValue: ManaTheme = .mana
|
||||
}
|
||||
|
||||
public extension EnvironmentValues {
|
||||
/// Aktuell aktive Theme-Variant. Default: ``ManaTheme/mana``.
|
||||
var manaTheme: ManaTheme {
|
||||
get { self[ManaThemeEnvironmentKey.self] }
|
||||
set { self[ManaThemeEnvironmentKey.self] = newValue }
|
||||
}
|
||||
}
|
||||
|
||||
public extension View {
|
||||
/// Setzt die aktive Theme-Variant für diesen View-Subtree.
|
||||
///
|
||||
/// Apps mit fixer Identität setzen das an der App-Root:
|
||||
///
|
||||
/// ```swift
|
||||
/// @main
|
||||
/// struct CardsApp: App {
|
||||
/// var body: some Scene {
|
||||
/// WindowGroup {
|
||||
/// ContentView()
|
||||
/// .manaTheme(.forest)
|
||||
/// }
|
||||
/// }
|
||||
/// }
|
||||
/// ```
|
||||
///
|
||||
/// Apps mit User-Theme-Switching binden den Wert an `@AppStorage`
|
||||
/// oder eine Settings-Source und re-rendern bei Wechsel automatisch.
|
||||
func manaTheme(_ theme: ManaTheme) -> some View {
|
||||
environment(\.manaTheme, theme)
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue