feat: generate Swift design tokens from tokens.json and add SstUI base
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5.5
@@ -0,0 +1,316 @@
|
||||
// GENERATED by Design/build_tokens.py from Design/tokens.json. Do not edit by hand.
|
||||
import SwiftUI
|
||||
|
||||
public enum Palette {
|
||||
/// Venster-achtergrond; het 'huis' van het apparaat
|
||||
public static let surfaceChassis = Color.dynamic(light: 0xCBC8C0, dark: 0x1C1B19)
|
||||
/// Geborsteld metaal, bovenkant van de verloop
|
||||
public static let surfaceMetalHigh = Color.dynamic(light: 0xE3E1DB, dark: 0x3B3A36)
|
||||
/// Geborsteld metaal, onderkant van de verloop
|
||||
public static let surfaceMetalLow = Color.dynamic(light: 0xBDBAB2, dark: 0x262522)
|
||||
/// Frontplaat van mat plastic; zijbalk en bedieningspanelen
|
||||
public static let surfacePanel = Color.dynamic(light: 0xE2DFD5, dark: 0x2B2A27)
|
||||
/// Verzonken vlak: invoervelden, display-vensters
|
||||
public static let surfaceWell = Color.dynamic(light: 0xB4B1A8, dark: 0x131211)
|
||||
/// Cassette-label crème: lijsten met transcripties en woordenboek
|
||||
public static let surfacePaper = Color.dynamic(light: 0xEEE9D9, dark: 0x232220)
|
||||
/// Toetsdop, bovenkant
|
||||
public static let surfaceKeyHigh = Color.dynamic(light: 0xE6E3DA, dark: 0x44433F)
|
||||
/// Toetsdop, onderkant
|
||||
public static let surfaceKeyLow = Color.dynamic(light: 0xCBC8BF, dark: 0x33322F)
|
||||
/// Ingedrukte toets
|
||||
public static let surfaceKeyPressed = Color.dynamic(light: 0xBEBBB2, dark: 0x2A2927)
|
||||
/// Wijzerplaat van de VU-meter (blijft crème in beide afwerkingen)
|
||||
public static let surfaceMeterFace = Color.dynamic(light: 0xEFE6C8, dark: 0xD8CEA6)
|
||||
/// Geselecteerde rij in een lijst
|
||||
public static let surfaceSelection = Color.dynamic(light: 0xD4CDB2, dark: 0x3A3828)
|
||||
/// Displayglas van de teller; donker in beide afwerkingen
|
||||
public static let surfaceDisplay = Color.dynamic(light: 0x1B1A18, dark: 0x0E0D0C)
|
||||
/// Gedoofd segment op het displayglas
|
||||
public static let displaySegmentUnlit = Color.dynamic(light: 0x3A3320, dark: 0x2A2415)
|
||||
/// Hoofdtekst en wijzer
|
||||
public static let inkPrimary = Color.dynamic(light: 0x1E1D1B, dark: 0xECE8DC)
|
||||
/// Secundaire tekst
|
||||
public static let inkSecondary = Color.dynamic(light: 0x403D38, dark: 0xC4BFB2)
|
||||
/// Zeefdruk-labels en hulptekst
|
||||
public static let inkTertiary = Color.dynamic(light: 0x4D4A44, dark: 0xABA79B)
|
||||
/// Uitgeschakeld; nooit voor essentiële tekst
|
||||
public static let inkDisabled = Color.dynamic(light: 0x8F8B82, dark: 0x6B685F)
|
||||
/// Tekst op rode of donkere vulling; crème in beide afwerkingen
|
||||
public static let inkInverse = Color.dynamic(light: 0xF4EFE3, dark: 0xF4EFE3)
|
||||
/// Schaal, cijfers en wijzer op de wijzerplaat; vast donker in beide afwerkingen
|
||||
public static let inkOnMeter = Color.dynamic(light: 0x1E1D1B, dark: 0x1E1D1B)
|
||||
/// ENIGE accent: opnamelampje, REC-toets, piek-LED. Nooit voor lopende tekst
|
||||
public static let accentRecord = Color.dynamic(light: 0xC8281E, dark: 0xCC2A20)
|
||||
/// Lampje uit
|
||||
public static let accentRecordUnlit = Color.dynamic(light: 0x7A2E28, dark: 0x4A1F1B)
|
||||
/// Niveau-segment, brandend
|
||||
public static let levelGreen = Color.dynamic(light: 0x5E9E48, dark: 0x6DB556)
|
||||
/// Niveau-segment, waarschuwing, gecorrigeerd woord
|
||||
public static let levelAmber = Color.dynamic(light: 0xD9A023, dark: 0xE5B032)
|
||||
/// Groen segment, uit
|
||||
public static let levelGreenUnlit = Color.dynamic(light: 0xA8B79C, dark: 0x26331F)
|
||||
/// Amber segment, uit
|
||||
public static let levelAmberUnlit = Color.dynamic(light: 0xCDBA8A, dark: 0x3D3418)
|
||||
/// Naad tussen panelen, donkere helft
|
||||
public static let lineSeamDark = Color.dynamic(light: 0x8C8981, dark: 0x0A0A09)
|
||||
/// Naad tussen panelen, lichte helft
|
||||
public static let lineSeamLight = Color.dynamic(light: 0xF3F1EB, dark: 0x45433F)
|
||||
/// Fijne scheidingslijn, zeefdruk-kader
|
||||
public static let lineHairline = Color.dynamic(light: 0xA9A69D, dark: 0x3A3834)
|
||||
/// Toetsenbord-focus
|
||||
public static let lineFocus = Color.dynamic(light: 0x1E1D1B, dark: 0xECE8DC)
|
||||
}
|
||||
|
||||
public enum Opacity {
|
||||
/// Amber markering achter een gecorrigeerd woord
|
||||
public static let mark: Double = 0.3
|
||||
/// Uitgeschakelde bediening
|
||||
public static let disabled: Double = 0.45
|
||||
/// Gedoofde lampjes gebruiken eigen 'unlit'-kleuren, geen transparantie
|
||||
public static let unlit: Double = 1.0
|
||||
/// Ingedrukte REC-toets: het rood dooft licht
|
||||
public static let pressedRecord: Double = 0.85
|
||||
/// Lichtvlekje op een brandend lampje
|
||||
public static let specularOn: Double = 0.6
|
||||
/// Lichtvlekje op een gedoofd lampje
|
||||
public static let specularOff: Double = 0.3
|
||||
/// Kleine opschriften op de wijzerplaat
|
||||
public static let caption: Double = 0.75
|
||||
}
|
||||
|
||||
public enum FontFamily: String {
|
||||
case chrome = "Helvetica Neue"
|
||||
case text = "SF Pro Text"
|
||||
case mono = "SF Mono"
|
||||
}
|
||||
|
||||
public enum Typography {
|
||||
/// Zeefdruk-label
|
||||
public static let label = TextStyle(family: .chrome, size: 10, weight: 500, tracking: 0.09, line: 12, caps: true, tabular: false)
|
||||
/// Schaalmarkeringen en eenheden
|
||||
public static let labelSmall = TextStyle(family: .chrome, size: 9, weight: 500, tracking: 0.1, line: 11, caps: true, tabular: false)
|
||||
/// Opschrift op toetsen
|
||||
public static let control = TextStyle(family: .chrome, size: 11, weight: 500, tracking: 0.06, line: 14, caps: true, tabular: false)
|
||||
/// Paneelkop
|
||||
public static let heading = TextStyle(family: .chrome, size: 12, weight: 500, tracking: 0.12, line: 16, caps: true, tabular: false)
|
||||
/// Standaardtekst
|
||||
public static let body = TextStyle(family: .text, size: 13, weight: 400, tracking: 0, line: 18, caps: false, tabular: false)
|
||||
/// Transcript
|
||||
public static let reading = TextStyle(family: .text, size: 15, weight: 400, tracking: 0, line: 22, caps: false, tabular: false)
|
||||
/// Bijschriften
|
||||
public static let meta = TextStyle(family: .text, size: 11, weight: 400, tracking: 0, line: 14, caps: false, tabular: false)
|
||||
/// Teller
|
||||
public static let counter = TextStyle(family: .mono, size: 22, weight: 500, tracking: 0, line: 26, caps: false, tabular: true)
|
||||
/// Tijdstip in een rij
|
||||
public static let counterSmall = TextStyle(family: .mono, size: 12, weight: 500, tracking: 0, line: 16, caps: false, tabular: true)
|
||||
/// Woordenboekregels
|
||||
public static let code = TextStyle(family: .mono, size: 12, weight: 400, tracking: 0, line: 18, caps: false, tabular: false)
|
||||
}
|
||||
|
||||
public enum Segment {
|
||||
/// Hoogte van een getekend segmentcijfer
|
||||
public static let digitHeight: CGFloat = 36
|
||||
/// Breedte van een segmentcijfer
|
||||
public static let digitWidth: CGFloat = 20
|
||||
/// Dikte van één segment
|
||||
public static let thickness: CGFloat = 4
|
||||
/// Ruimte tussen segmenten
|
||||
public static let gap: CGFloat = 1
|
||||
/// Schuinte in graden; 0 = rechtop
|
||||
public static let slant: CGFloat = 0
|
||||
/// Afstand van cijfer tot cijfer
|
||||
public static let advance: CGFloat = 26
|
||||
/// Breedte van een dubbele punt of punt
|
||||
public static let colonWidth: CGFloat = 10
|
||||
}
|
||||
|
||||
public enum Space {
|
||||
public static let s0: CGFloat = 0
|
||||
public static let s1: CGFloat = 2
|
||||
public static let s2: CGFloat = 4
|
||||
public static let s3: CGFloat = 8
|
||||
public static let s4: CGFloat = 12
|
||||
public static let s5: CGFloat = 16
|
||||
public static let s6: CGFloat = 24
|
||||
public static let s7: CGFloat = 32
|
||||
public static let s8: CGFloat = 48
|
||||
}
|
||||
|
||||
public enum Layout {
|
||||
/// Minimale vensterbreedte
|
||||
public static let windowMinWidth: CGFloat = 800
|
||||
/// Minimale vensterhoogte
|
||||
public static let windowMinHeight: CGFloat = 560
|
||||
/// Standaard vensterbreedte
|
||||
public static let windowDefaultWidth: CGFloat = 1080
|
||||
/// Standaard vensterhoogte
|
||||
public static let windowDefaultHeight: CGFloat = 700
|
||||
/// Breedte zijbalk
|
||||
public static let sidebarWidth: CGFloat = 232
|
||||
/// Breedte instellingenvenster
|
||||
public static let settingsWidth: CGFloat = 560
|
||||
/// Binnenmarge van een paneel (= space.5)
|
||||
public static let panelPadding: CGFloat = 16
|
||||
/// Afstand tussen panelen (= space.4)
|
||||
public static let panelGap: CGFloat = 12
|
||||
}
|
||||
|
||||
public enum Size {
|
||||
/// Standaardhoogte van toets of veld
|
||||
public static let controlHeight: CGFloat = 28
|
||||
/// Minimale breedte van een toets
|
||||
public static let keyMinWidth: CGFloat = 56
|
||||
/// REC-toets, breedte
|
||||
public static let keyRecWidth: CGFloat = 64
|
||||
/// REC-toets, hoogte
|
||||
public static let keyRecHeight: CGFloat = 44
|
||||
/// Standaard lampje
|
||||
public static let lampDiameter: CGFloat = 10
|
||||
/// Opnamelampje
|
||||
public static let lampLarge: CGFloat = 14
|
||||
/// Tuimelschakelaar, breedte
|
||||
public static let switchWidth: CGFloat = 40
|
||||
/// Tuimelschakelaar, hoogte
|
||||
public static let switchHeight: CGFloat = 22
|
||||
/// Rij in transcriptielijst
|
||||
public static let rowHeight: CGFloat = 40
|
||||
/// Klein pictogram
|
||||
public static let iconSmall: CGFloat = 16
|
||||
/// Normaal pictogram
|
||||
public static let iconMedium: CGFloat = 20
|
||||
/// Minimaal klikdoel
|
||||
public static let hitMin: CGFloat = 24
|
||||
}
|
||||
|
||||
public enum Radius {
|
||||
/// Panelen en velden: scherpe randen
|
||||
public static let none: CGFloat = 0
|
||||
/// Toetsranden: bijna scherp
|
||||
public static let sharp: CGFloat = 1
|
||||
/// Toetsen, velden
|
||||
public static let sm: CGFloat = 2
|
||||
/// Grote panelen
|
||||
public static let md: CGFloat = 4
|
||||
/// Rand van de VU-meter
|
||||
public static let bezel: CGFloat = 6
|
||||
/// Lampjes: rond
|
||||
public static let lamp: CGFloat = 999
|
||||
}
|
||||
|
||||
public enum Border {
|
||||
/// Fijne lijn
|
||||
public static let hairline: CGFloat = 1
|
||||
/// Naad: 1 donkere lijn boven, 1 lichte lijn eronder, leest als gegraveerde groef
|
||||
public static let seam: CGFloat = 2
|
||||
/// Rand om de VU-meter
|
||||
public static let bezel: CGFloat = 3
|
||||
/// Focusring, 2 pt offset
|
||||
public static let focus: CGFloat = 2
|
||||
}
|
||||
|
||||
public enum Shadows {
|
||||
/// Toets in rust: lichtvang boven, donkere onderrand, valschaduw
|
||||
public static let keyRaised: [ShadowLayer] = [
|
||||
ShadowLayer(inset: true, x: 0, y: 1, blur: 0, spread: 0, hex: 0xFFFFFF, alphaLight: 0.65, alphaDark: 0.1),
|
||||
ShadowLayer(inset: true, x: 0, y: -1, blur: 0, spread: 0, hex: 0x000000, alphaLight: 0.25, alphaDark: 0.55),
|
||||
ShadowLayer(inset: false, x: 0, y: 2, blur: 2, spread: 0, hex: 0x000000, alphaLight: 0.35, alphaDark: 0.6),
|
||||
]
|
||||
/// Ingedrukte toets: dop 1 pt omlaag, geen valschaduw
|
||||
public static let keyPressed: [ShadowLayer] = [
|
||||
ShadowLayer(inset: true, x: 0, y: 2, blur: 4, spread: 0, hex: 0x000000, alphaLight: 0.5, alphaDark: 0.7),
|
||||
ShadowLayer(inset: true, x: 0, y: 0, blur: 0, spread: 1, hex: 0x000000, alphaLight: 0.35, alphaDark: 0.6),
|
||||
]
|
||||
public static let keyPressedOffset: CGFloat = 1
|
||||
/// Verzonken vlak met lichtvang op de onderlip
|
||||
public static let well: [ShadowLayer] = [
|
||||
ShadowLayer(inset: true, x: 0, y: 1, blur: 3, spread: 0, hex: 0x000000, alphaLight: 0.4, alphaDark: 0.7),
|
||||
ShadowLayer(inset: false, x: 0, y: 1, blur: 0, spread: 0, hex: 0xFFFFFF, alphaLight: 0.55, alphaDark: 0.07),
|
||||
]
|
||||
/// Frontplaat boven het chassis
|
||||
public static let panel: [ShadowLayer] = [
|
||||
ShadowLayer(inset: true, x: 0, y: 1, blur: 0, spread: 0, hex: 0xFFFFFF, alphaLight: 0.6, alphaDark: 0.08),
|
||||
ShadowLayer(inset: false, x: 0, y: 3, blur: 8, spread: 0, hex: 0x000000, alphaLight: 0.22, alphaDark: 0.55),
|
||||
]
|
||||
/// Brandend lampje: kleine gloed, alleen voor lampjes en nooit voor tekst
|
||||
public static let lampOn: [ShadowLayer] = [
|
||||
ShadowLayer(inset: false, x: 0, y: 0, blur: 6, spread: 1, hex: 0xCC2A20, alphaLight: 0.45, alphaDark: 0.55),
|
||||
ShadowLayer(inset: true, x: 0, y: -1, blur: 1, spread: 0, hex: 0x000000, alphaLight: 0.35, alphaDark: 0.45),
|
||||
]
|
||||
}
|
||||
|
||||
public enum Texture {
|
||||
public static let brushedGrainLight: Double = 0.035
|
||||
public static let brushedGrainDark: Double = 0.05
|
||||
}
|
||||
|
||||
public enum MeterTokens {
|
||||
/// 0 VU = -20 dBFS (RMS)
|
||||
public static let vuReferenceDbfs: Double = -20
|
||||
/// Onderkant van de schaal in VU
|
||||
public static let vuMin: Double = -20
|
||||
/// Bovenkant van de schaal in VU; vanaf 0 VU rood
|
||||
public static let vuMax: Double = 3
|
||||
/// Hoek tussen minimale en maximale stand
|
||||
public static let vuArcDegrees: Double = 90
|
||||
/// Breedte van de meter
|
||||
public static let vuWidth: Double = 260
|
||||
/// Hoogte van de meter
|
||||
public static let vuHeight: Double = 150
|
||||
/// Dikte van de wijzer
|
||||
public static let vuNeedleWidth: Double = 1.5
|
||||
/// Genummerde schaalmarkeringen
|
||||
public static let vuTicks: [Int] = [-20, -10, -7, -5, -3, 0, 3]
|
||||
/// Draaipunt van de wijzer, onder de onderrand van de wijzerplaat
|
||||
public static let vuPivotOffset: Double = 22
|
||||
/// Straal van de schaalboog vanaf het draaipunt
|
||||
public static let vuScaleRadius: Double = 142
|
||||
/// Lengte van de wijzer
|
||||
public static let vuNeedleLength: Double = 146
|
||||
/// Lengte van een genummerde streep
|
||||
public static let vuTickMajor: Double = 11
|
||||
/// Lengte van een gewone streep
|
||||
public static let vuTickMinor: Double = 6
|
||||
/// Afstand van de schaalboog tot de cijfers
|
||||
public static let vuLabelInset: Double = 24
|
||||
/// Dikte van de rode band vanaf 0 VU
|
||||
public static let vuRedBandWidth: Double = 5
|
||||
/// Aantal segmenten: 8 groen, 3 amber, 1 rood
|
||||
public static let ledSegments: Int = 12
|
||||
/// Segment in pt (breedte x hoogte)
|
||||
public static let ledSegmentWidth: CGFloat = 6
|
||||
public static let ledSegmentHeight: CGFloat = 14
|
||||
/// Ruimte tussen segmenten
|
||||
public static let ledGap: Double = 2
|
||||
/// Piek-LED blijft zo lang branden
|
||||
public static let peakHoldSeconds: Double = 1.0
|
||||
}
|
||||
|
||||
public enum Motion {
|
||||
/// Geen overgang
|
||||
public static let durationInstant: Double = 0.0
|
||||
/// Toets in/uit
|
||||
public static let durationFast: Double = 0.06
|
||||
/// Standaardovergang
|
||||
public static let durationBase: Double = 0.12
|
||||
/// Paneel of venster
|
||||
public static let durationSlow: Double = 0.22
|
||||
/// Toetsen: direct, zonder veer
|
||||
public static let easingMechanical: (Double, Double, Double, Double) = (0.2, 0, 0, 1)
|
||||
/// Overige overgangen
|
||||
public static let easingStandard: (Double, Double, Double, Double) = (0.4, 0, 0.2, 1)
|
||||
/// Toets indrukken
|
||||
public static let keyPress: Double = 0.05
|
||||
/// Toets loslaten
|
||||
public static let keyRelease: Double = 0.09
|
||||
/// Lampje aan
|
||||
public static let lampOn: Double = 0.03
|
||||
/// Lampje uit: dooft langzaam, als een gloeidraad
|
||||
public static let lampOff: Double = 0.2
|
||||
/// VU-ballistiek: 300 ms om de stand te bereiken
|
||||
public static let needleResponse: Double = 0.3
|
||||
/// Veerdemping; geeft ongeveer 1,5 % overschot
|
||||
public static let needleDamping: Double = 0.8
|
||||
/// Verversing van de wijzer
|
||||
public static let needleUpdateHz: Double = 60
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import AppKit
|
||||
import SwiftUI
|
||||
|
||||
extension NSColor {
|
||||
convenience init(hex: UInt32) {
|
||||
self.init(
|
||||
srgbRed: CGFloat((hex >> 16) & 0xFF) / 255,
|
||||
green: CGFloat((hex >> 8) & 0xFF) / 255,
|
||||
blue: CGFloat(hex & 0xFF) / 255,
|
||||
alpha: 1)
|
||||
}
|
||||
}
|
||||
|
||||
extension Color {
|
||||
/// A colour that switches between the Aluminium (light) and Graphite (dark) value with the appearance.
|
||||
static func dynamic(light: UInt32, dark: UInt32) -> Color {
|
||||
Color(nsColor: NSColor(name: nil) { appearance in
|
||||
appearance.bestMatch(from: [.darkAqua, .aqua]) == .darkAqua ? NSColor(hex: dark) : NSColor(hex: light)
|
||||
})
|
||||
}
|
||||
|
||||
/// The same colour in both finishes (shadow bases).
|
||||
static func fixed(hex: UInt32) -> Color {
|
||||
Color(nsColor: NSColor(hex: hex))
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import SwiftUI
|
||||
|
||||
public struct TextStyle: Equatable {
|
||||
public let family: FontFamily
|
||||
public let size: CGFloat
|
||||
public let weight: Int
|
||||
/// In em.
|
||||
public let tracking: CGFloat
|
||||
public let line: CGFloat
|
||||
public let caps: Bool
|
||||
public let tabular: Bool
|
||||
|
||||
public init(family: FontFamily, size: CGFloat, weight: Int, tracking: CGFloat, line: CGFloat, caps: Bool, tabular: Bool) {
|
||||
self.family = family
|
||||
self.size = size
|
||||
self.weight = weight
|
||||
self.tracking = tracking
|
||||
self.line = line
|
||||
self.caps = caps
|
||||
self.tabular = tabular
|
||||
}
|
||||
|
||||
var fontWeight: Font.Weight {
|
||||
switch weight {
|
||||
case ..<450: .regular
|
||||
case 450..<550: .medium
|
||||
case 550..<650: .semibold
|
||||
default: .bold
|
||||
}
|
||||
}
|
||||
|
||||
public var font: Font {
|
||||
let base: Font
|
||||
switch family {
|
||||
case .mono: base = .system(size: size, weight: fontWeight, design: .monospaced)
|
||||
case .text: base = .system(size: size, weight: fontWeight)
|
||||
case .chrome: base = .custom(family.rawValue, size: size).weight(fontWeight)
|
||||
}
|
||||
return tabular ? base.monospacedDigit() : base
|
||||
}
|
||||
}
|
||||
|
||||
public extension View {
|
||||
/// Font, tracking, line spacing and capitalisation from a token text style.
|
||||
func textStyle(_ style: TextStyle) -> some View {
|
||||
self.font(style.font)
|
||||
.tracking(style.tracking * style.size)
|
||||
.lineSpacing(max(0, style.line - style.size * 1.2))
|
||||
.textCase(style.caps ? .uppercase : nil)
|
||||
}
|
||||
}
|
||||
|
||||
/// One layer of a layered shadow token. Inset layers are drawn inside the shape.
|
||||
public struct ShadowLayer: Equatable {
|
||||
public let inset: Bool
|
||||
public let x: CGFloat
|
||||
public let y: CGFloat
|
||||
public let blur: CGFloat
|
||||
public let spread: CGFloat
|
||||
public let hex: UInt32
|
||||
public let alphaLight: Double
|
||||
public let alphaDark: Double
|
||||
|
||||
public init(inset: Bool, x: CGFloat, y: CGFloat, blur: CGFloat, spread: CGFloat, hex: UInt32, alphaLight: Double, alphaDark: Double) {
|
||||
self.inset = inset
|
||||
self.x = x
|
||||
self.y = y
|
||||
self.blur = blur
|
||||
self.spread = spread
|
||||
self.hex = hex
|
||||
self.alphaLight = alphaLight
|
||||
self.alphaDark = alphaDark
|
||||
}
|
||||
|
||||
public func color(_ scheme: ColorScheme) -> Color {
|
||||
Color.fixed(hex: hex).opacity(scheme == .dark ? alphaDark : alphaLight)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user