PoC: widgetAccentable prop + light-dark() color support (Track 1)#166
Draft
burczu wants to merge 2 commits into
Draft
PoC: widgetAccentable prop + light-dark() color support (Track 1)#166burczu wants to merge 2 commits into
burczu wants to merge 2 commits into
Conversation
…rt (iOS) Adds two building blocks for widget UI reactivity without server round-trips: - `widgetAccentable` boolean prop on all components; serialised as short name `wa`; applied via `.widgetAccentable()` SwiftUI modifier in VoltraElementView so elements receive the system accent tint in accented/Liquid Glass rendering mode - `light-dark(<light>, <dark>)` CSS Color Level 4 syntax in JSColorParser; resolved to an adaptive UIColor that responds to UITraitCollection at render time - Full XCTest suite for JSColorParser (light-dark paths + existing smoke tests) - IosWeatherWidget updated with two PoC verification badges for manual testing
…und ShapeStyle The UIColor(dynamicProvider:) approach does not produce adaptive colors in WidgetKit. Replace with LightDarkForeground: ShapeStyle whose resolve(in: EnvironmentValues) is called by SwiftUI's rendering engine at draw time with the correct dark/light context. - JSColorParser: add parseLightDarkComponents() returning both Color values as a pair; parseLightDark() private fallback (UIColor) kept for non-text contexts (borders, backgrounds); remove findTopLevelComma() in favour of splitLightDark() - TextStyle: add lightDarkColors field; add LightDarkForeground: ShapeStyle - StyleConverter.parseText: route light-dark() strings to lightDarkColors instead of the flat color field - VoltraText: switch from foregroundColor to foregroundStyle(LightDarkForeground(...)) when lightDarkColors is set
0b4fc42 to
56b60ce
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #165
Summary
Standalone rendering improvements for Voltra widgets on iOS. Adds two building blocks that enable
native SwiftUI environment adaptation without touching the server or the AppIntent pipeline:
widgetAccentableprop — a new boolean prop on all Voltra components, serialised as theshort name
wa. Applied via.widgetAccentable()inVoltraElementViewso elements receivethe system accent tint in accented / Liquid Glass rendering modes automatically.
light-dark()color support — CSS Color Level 4light-dark(<light>, <dark>)syntaxaccepted anywhere a color string is used. Parsed in
JSColorParserand stored as a(light: Color, dark: Color)pair; rendered viaLightDarkForeground: ShapeStylewhoseresolve(in: EnvironmentValues)is called by SwiftUI's rendering engine at draw time with thecorrect dark/light context.
Neither feature requires Swift from the developer. Both are purely additive — no existing widget
behaviour changes.
Developer experience
What was built
widgetAccentableproppackages/ios/src/jsx/baseProps.tsx,packages/core/src/payload/short-names.tswashort name; applies.widgetAccentable()SwiftUI modifierJSColorParser.parseLightDarkComponents()packages/voltra/ios/ui/Style/JSColorParser.swiftlight-dark(…)into(light: Color, dark: Color)pairLightDarkForeground: ShapeStylepackages/voltra/ios/ui/Style/TextStyle.swiftresolve(in:)picks correct Color at draw timeStyleConverterupdatepackages/voltra/ios/ui/Style/StyleConverter.swiftlight-dark()strings tolightDarkColorsfieldVoltraTextupdatepackages/voltra/ios/ui/Views/VoltraText.swiftforegroundStyle(LightDarkForeground(…))whenlightDarkColorsis setpackages/voltra/ios/Tests/JSColorParserTests.swiftexample/widgets/ios/IosWeatherWidget.tsxExit criterion
widgetAccentableprop serialised aswashort name and.widgetAccentable()applied in renderer — implementation complete; visual effect requires real device verification (StandBy dimmed/night view triggers vibrant/accented rendering; simulator cannot replicate this)light-dark()parsing implemented; adaptiveLightDarkForeground: ShapeStylewired intoVoltraText— implementation complete; visual adaptation requires real device verification (iOS simulator does not re-render widgets on appearance toggle — confirmed with native Calendar widget as baseline)Test plan
BUILD SUCCEEDEDwidgetAccentableelements receive accent tintlight-dark()text color adapts