feat(sprint-3): apply Survey Teal field UI

This commit is contained in:
Brent Perteet
2026-08-20 22:00:31 -05:00
parent f9fb9f59f4
commit 5e87d81bb6
16 changed files with 954 additions and 562 deletions

View File

@@ -1,45 +1,11 @@
<?xml version="1.0" encoding="UTF-8" ?>
<?xml version="1.0" encoding="UTF-8" ?>
<?xaml-comp compile="true" ?>
<ResourceDictionary
<ResourceDictionary
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<!-- Note: For Android please see also Platforms\Android\Resources\values\colors.xml -->
<Color x:Key="Primary">#512BD4</Color>
<Color x:Key="PrimaryDark">#ac99ea</Color>
<Color x:Key="PrimaryDarkText">#242424</Color>
<Color x:Key="Secondary">#DFD8F7</Color>
<Color x:Key="SecondaryDarkText">#9880e5</Color>
<Color x:Key="Tertiary">#2B0B98</Color>
<Color x:Key="White">White</Color>
<Color x:Key="Black">Black</Color>
<Color x:Key="Magenta">#D600AA</Color>
<Color x:Key="MidnightBlue">#190649</Color>
<Color x:Key="OffBlack">#1f1f1f</Color>
<Color x:Key="Gray100">#E1E1E1</Color>
<Color x:Key="Gray200">#C8C8C8</Color>
<Color x:Key="Gray300">#ACACAC</Color>
<Color x:Key="Gray400">#919191</Color>
<Color x:Key="Gray500">#6E6E6E</Color>
<Color x:Key="Gray600">#404040</Color>
<Color x:Key="Gray900">#212121</Color>
<Color x:Key="Gray950">#141414</Color>
<SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource Primary}"/>
<SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource Secondary}"/>
<SolidColorBrush x:Key="TertiaryBrush" Color="{StaticResource Tertiary}"/>
<SolidColorBrush x:Key="WhiteBrush" Color="{StaticResource White}"/>
<SolidColorBrush x:Key="BlackBrush" Color="{StaticResource Black}"/>
<SolidColorBrush x:Key="Gray100Brush" Color="{StaticResource Gray100}"/>
<SolidColorBrush x:Key="Gray200Brush" Color="{StaticResource Gray200}"/>
<SolidColorBrush x:Key="Gray300Brush" Color="{StaticResource Gray300}"/>
<SolidColorBrush x:Key="Gray400Brush" Color="{StaticResource Gray400}"/>
<SolidColorBrush x:Key="Gray500Brush" Color="{StaticResource Gray500}"/>
<SolidColorBrush x:Key="Gray600Brush" Color="{StaticResource Gray600}"/>
<SolidColorBrush x:Key="Gray900Brush" Color="{StaticResource Gray900}"/>
<SolidColorBrush x:Key="Gray950Brush" Color="{StaticResource Gray950}"/>
</ResourceDictionary>
<!--
Color values and legacy aliases are generated into GeneratedTokens.xaml from
meta/contracts/design-tokens.json. Keep palette literals out of this file.
-->
</ResourceDictionary>

View File

@@ -0,0 +1,183 @@
<?xml version="1.0" encoding="UTF-8" ?>
<?xaml-comp compile="true" ?>
<ResourceDictionary
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<!-- GENERATED FILE — DO NOT EDIT.
Source: meta/contracts/design-tokens.json v3.0.0
Run: node meta/scripts/generate-design-tokens.mjs -->
<x:String x:Key="UlTokenVersion">3.0.0</x:String>
<!-- Named mode values. Runtime theme switching replaces the unqualified semantic colors below. -->
<Color x:Key="UlDefaultColorCanvas">#EEF3F2</Color>
<Color x:Key="UlDefaultColorSurface">#FCFEFD</Color>
<Color x:Key="UlDefaultColorSurfaceRaised">#FFFFFF</Color>
<Color x:Key="UlDefaultColorSurfaceStrong">#14252A</Color>
<Color x:Key="UlDefaultColorText">#14252A</Color>
<Color x:Key="UlDefaultColorTextMuted">#5D6B6E</Color>
<Color x:Key="UlDefaultColorPrimary">#0B7774</Color>
<Color x:Key="UlDefaultColorPrimaryPressed">#075F5D</Color>
<Color x:Key="UlDefaultColorAccent">#B82D46</Color>
<Color x:Key="UlDefaultColorBorder">#C7D2D0</Color>
<Color x:Key="UlDefaultColorFocus">#B82D46</Color>
<Color x:Key="UlDefaultColorMap">#DCE9E7</Color>
<Color x:Key="UlDefaultColorSuccess">#347A55</Color>
<Color x:Key="UlDefaultColorWarning">#A85C00</Color>
<Color x:Key="UlDefaultColorError">#B42318</Color>
<Color x:Key="UlDefaultColorNeutral">#40565B</Color>
<Color x:Key="UlDefaultColorDisabled">#819092</Color>
<Color x:Key="UlDefaultColorOnStrong">#FFFFFF</Color>
<Color x:Key="UlDefaultColorOnPrimary">#FFFFFF</Color>
<Color x:Key="UlDefaultColorOnAccent">#FFFFFF</Color>
<Color x:Key="UlSunlightColorCanvas">#FFFFFF</Color>
<Color x:Key="UlSunlightColorSurface">#FFFFFF</Color>
<Color x:Key="UlSunlightColorSurfaceRaised">#FFFFFF</Color>
<Color x:Key="UlSunlightColorSurfaceStrong">#000000</Color>
<Color x:Key="UlSunlightColorText">#000000</Color>
<Color x:Key="UlSunlightColorTextMuted">#344448</Color>
<Color x:Key="UlSunlightColorPrimary">#075F5D</Color>
<Color x:Key="UlSunlightColorPrimaryPressed">#14252A</Color>
<Color x:Key="UlSunlightColorAccent">#982138</Color>
<Color x:Key="UlSunlightColorBorder">#5D6B6E</Color>
<Color x:Key="UlSunlightColorFocus">#982138</Color>
<Color x:Key="UlSunlightColorMap">#E8F0EF</Color>
<Color x:Key="UlSunlightColorSuccess">#245F40</Color>
<Color x:Key="UlSunlightColorWarning">#754000</Color>
<Color x:Key="UlSunlightColorError">#871A12</Color>
<Color x:Key="UlSunlightColorNeutral">#14252A</Color>
<Color x:Key="UlSunlightColorDisabled">#344448</Color>
<Color x:Key="UlSunlightColorOnStrong">#FFFFFF</Color>
<Color x:Key="UlSunlightColorOnPrimary">#FFFFFF</Color>
<Color x:Key="UlSunlightColorOnAccent">#FFFFFF</Color>
<!-- Active values start in default mode. All handwritten styles consume only these keys. -->
<Color x:Key="UlColorCanvas">#EEF3F2</Color>
<SolidColorBrush x:Key="UlBrushCanvas" Color="{StaticResource UlColorCanvas}" />
<Color x:Key="UlColorSurface">#FCFEFD</Color>
<SolidColorBrush x:Key="UlBrushSurface" Color="{StaticResource UlColorSurface}" />
<Color x:Key="UlColorSurfaceRaised">#FFFFFF</Color>
<SolidColorBrush x:Key="UlBrushSurfaceRaised" Color="{StaticResource UlColorSurfaceRaised}" />
<Color x:Key="UlColorSurfaceStrong">#14252A</Color>
<SolidColorBrush x:Key="UlBrushSurfaceStrong" Color="{StaticResource UlColorSurfaceStrong}" />
<Color x:Key="UlColorText">#14252A</Color>
<SolidColorBrush x:Key="UlBrushText" Color="{StaticResource UlColorText}" />
<Color x:Key="UlColorTextMuted">#5D6B6E</Color>
<SolidColorBrush x:Key="UlBrushTextMuted" Color="{StaticResource UlColorTextMuted}" />
<Color x:Key="UlColorPrimary">#0B7774</Color>
<SolidColorBrush x:Key="UlBrushPrimary" Color="{StaticResource UlColorPrimary}" />
<Color x:Key="UlColorPrimaryPressed">#075F5D</Color>
<SolidColorBrush x:Key="UlBrushPrimaryPressed" Color="{StaticResource UlColorPrimaryPressed}" />
<Color x:Key="UlColorAccent">#B82D46</Color>
<SolidColorBrush x:Key="UlBrushAccent" Color="{StaticResource UlColorAccent}" />
<Color x:Key="UlColorBorder">#C7D2D0</Color>
<SolidColorBrush x:Key="UlBrushBorder" Color="{StaticResource UlColorBorder}" />
<Color x:Key="UlColorFocus">#B82D46</Color>
<SolidColorBrush x:Key="UlBrushFocus" Color="{StaticResource UlColorFocus}" />
<Color x:Key="UlColorMap">#DCE9E7</Color>
<SolidColorBrush x:Key="UlBrushMap" Color="{StaticResource UlColorMap}" />
<Color x:Key="UlColorSuccess">#347A55</Color>
<SolidColorBrush x:Key="UlBrushSuccess" Color="{StaticResource UlColorSuccess}" />
<Color x:Key="UlColorWarning">#A85C00</Color>
<SolidColorBrush x:Key="UlBrushWarning" Color="{StaticResource UlColorWarning}" />
<Color x:Key="UlColorError">#B42318</Color>
<SolidColorBrush x:Key="UlBrushError" Color="{StaticResource UlColorError}" />
<Color x:Key="UlColorNeutral">#40565B</Color>
<SolidColorBrush x:Key="UlBrushNeutral" Color="{StaticResource UlColorNeutral}" />
<Color x:Key="UlColorDisabled">#819092</Color>
<SolidColorBrush x:Key="UlBrushDisabled" Color="{StaticResource UlColorDisabled}" />
<Color x:Key="UlColorOnStrong">#FFFFFF</Color>
<SolidColorBrush x:Key="UlBrushOnStrong" Color="{StaticResource UlColorOnStrong}" />
<Color x:Key="UlColorOnPrimary">#FFFFFF</Color>
<SolidColorBrush x:Key="UlBrushOnPrimary" Color="{StaticResource UlColorOnPrimary}" />
<Color x:Key="UlColorOnAccent">#FFFFFF</Color>
<SolidColorBrush x:Key="UlBrushOnAccent" Color="{StaticResource UlColorOnAccent}" />
<!-- Temporary aliases keep unmigrated MAUI screens compatible without a second color source. -->
<Color x:Key="Primary">#0B7774</Color>
<SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource Primary}" />
<Color x:Key="PrimaryDark">#075F5D</Color>
<SolidColorBrush x:Key="PrimaryDarkBrush" Color="{StaticResource PrimaryDark}" />
<Color x:Key="PrimaryDarkText">#14252A</Color>
<SolidColorBrush x:Key="PrimaryDarkTextBrush" Color="{StaticResource PrimaryDarkText}" />
<Color x:Key="Secondary">#DCE9E7</Color>
<SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource Secondary}" />
<Color x:Key="SecondaryDarkText">#5D6B6E</Color>
<SolidColorBrush x:Key="SecondaryDarkTextBrush" Color="{StaticResource SecondaryDarkText}" />
<Color x:Key="Tertiary">#B82D46</Color>
<SolidColorBrush x:Key="TertiaryBrush" Color="{StaticResource Tertiary}" />
<Color x:Key="White">#FFFFFF</Color>
<SolidColorBrush x:Key="WhiteBrush" Color="{StaticResource White}" />
<Color x:Key="Black">#14252A</Color>
<SolidColorBrush x:Key="BlackBrush" Color="{StaticResource Black}" />
<Color x:Key="Magenta">#B82D46</Color>
<SolidColorBrush x:Key="MagentaBrush" Color="{StaticResource Magenta}" />
<Color x:Key="MidnightBlue">#14252A</Color>
<SolidColorBrush x:Key="MidnightBlueBrush" Color="{StaticResource MidnightBlue}" />
<Color x:Key="OffBlack">#14252A</Color>
<SolidColorBrush x:Key="OffBlackBrush" Color="{StaticResource OffBlack}" />
<Color x:Key="Gray100">#EEF3F2</Color>
<SolidColorBrush x:Key="Gray100Brush" Color="{StaticResource Gray100}" />
<Color x:Key="Gray200">#C7D2D0</Color>
<SolidColorBrush x:Key="Gray200Brush" Color="{StaticResource Gray200}" />
<Color x:Key="Gray300">#819092</Color>
<SolidColorBrush x:Key="Gray300Brush" Color="{StaticResource Gray300}" />
<Color x:Key="Gray400">#5D6B6E</Color>
<SolidColorBrush x:Key="Gray400Brush" Color="{StaticResource Gray400}" />
<Color x:Key="Gray500">#5D6B6E</Color>
<SolidColorBrush x:Key="Gray500Brush" Color="{StaticResource Gray500}" />
<Color x:Key="Gray600">#40565B</Color>
<SolidColorBrush x:Key="Gray600Brush" Color="{StaticResource Gray600}" />
<Color x:Key="Gray900">#14252A</Color>
<SolidColorBrush x:Key="Gray900Brush" Color="{StaticResource Gray900}" />
<Color x:Key="Gray950">#14252A</Color>
<SolidColorBrush x:Key="Gray950Brush" Color="{StaticResource Gray950}" />
<!-- Cross-platform dimensions are dp in MAUI and generated as px on the web. -->
<x:Double x:Key="UlSpace2xs">4</x:Double>
<x:Double x:Key="UlSpaceXs">8</x:Double>
<x:Double x:Key="UlSpaceSm">12</x:Double>
<x:Double x:Key="UlSpaceMd">16</x:Double>
<x:Double x:Key="UlSpaceLg">24</x:Double>
<x:Double x:Key="UlSpaceXl">32</x:Double>
<x:Double x:Key="UlSpace2xl">48</x:Double>
<x:Double x:Key="UlRadiusSm">8</x:Double>
<x:Double x:Key="UlRadiusMd">12</x:Double>
<x:Double x:Key="UlRadiusLg">20</x:Double>
<x:Double x:Key="UlRadiusPill">999</x:Double>
<x:Double x:Key="UlTouchMinimum">48</x:Double>
<x:Double x:Key="UlTouchComfortable">56</x:Double>
<x:Double x:Key="UlTouchPrimary">64</x:Double>
<!-- IBM Plex is the target family. Checked-in Open Sans/system mono are offline-safe fallbacks until licensed Plex assets land. -->
<x:String x:Key="UlTypeFamilySans">OpenSansRegular</x:String>
<x:String x:Key="UlTypeFamilySansStrong">OpenSansSemibold</x:String>
<x:String x:Key="UlTypeFamilyMono">monospace</x:String>
<x:Double x:Key="UlTypeDisplaySize">40</x:Double>
<x:Double x:Key="UlTypeDisplayLineHeight">48</x:Double>
<x:Int32 x:Key="UlTypeDisplayWeight">700</x:Int32>
<x:Double x:Key="UlTypePageSize">28</x:Double>
<x:Double x:Key="UlTypePageLineHeight">34</x:Double>
<x:Int32 x:Key="UlTypePageWeight">700</x:Int32>
<x:Double x:Key="UlTypeSectionSize">22</x:Double>
<x:Double x:Key="UlTypeSectionLineHeight">28</x:Double>
<x:Int32 x:Key="UlTypeSectionWeight">600</x:Int32>
<x:Double x:Key="UlTypeBodySize">16</x:Double>
<x:Double x:Key="UlTypeBodyLineHeight">24</x:Double>
<x:Int32 x:Key="UlTypeBodyWeight">400</x:Int32>
<x:Double x:Key="UlTypeBodySmSize">14</x:Double>
<x:Double x:Key="UlTypeBodySmLineHeight">20</x:Double>
<x:Int32 x:Key="UlTypeBodySmWeight">400</x:Int32>
<x:Double x:Key="UlTypeLabelSize">14</x:Double>
<x:Double x:Key="UlTypeLabelLineHeight">20</x:Double>
<x:Int32 x:Key="UlTypeLabelWeight">600</x:Int32>
<x:Double x:Key="UlTypeMonoSize">16</x:Double>
<x:Double x:Key="UlTypeMonoLineHeight">22</x:Double>
<x:Int32 x:Key="UlTypeMonoWeight">500</x:Int32>
<x:UInt32 x:Key="UlMotionFast">120</x:UInt32>
<x:UInt32 x:Key="UlMotionBase">200</x:UInt32>
<x:Double x:Key="UlBreakpointCompact">600</x:Double>
<x:Double x:Key="UlBreakpointMedium">900</x:Double>
<x:Double x:Key="UlBreakpointWide">1200</x:Double>
</ResourceDictionary>

View File

@@ -1,444 +1,293 @@
<?xml version="1.0" encoding="UTF-8" ?>
<?xml version="1.0" encoding="UTF-8" ?>
<?xaml-comp compile="true" ?>
<ResourceDictionary
<ResourceDictionary
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<!-- Survey Teal shared component foundation. DynamicResource colors allow sunlight switching. -->
<Style TargetType="Page" ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorCanvas}" />
</Style>
<Style TargetType="ActivityIndicator">
<Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
<Setter Property="Color" Value="{DynamicResource UlColorPrimary}" />
</Style>
<Style TargetType="IndicatorView">
<Setter Property="IndicatorColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}"/>
<Setter Property="SelectedIndicatorColor" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray100}}"/>
</Style>
<Style TargetType="Border">
<Setter Property="Stroke" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
<Setter Property="StrokeShape" Value="Rectangle"/>
<Setter Property="StrokeThickness" Value="1"/>
</Style>
<Style TargetType="BoxView">
<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorSurface}" />
<Setter Property="Stroke" Value="{DynamicResource UlColorBorder}" />
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="StrokeShape" Value="RoundRectangle 12" />
</Style>
<Style TargetType="Button">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource PrimaryDarkText}}" />
<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" />
<Setter Property="FontFamily" Value="OpenSansRegular"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="BorderWidth" Value="0"/>
<Setter Property="CornerRadius" Value="8"/>
<Setter Property="Padding" Value="14,10"/>
<Setter Property="MinimumHeightRequest" Value="44"/>
<Setter Property="MinimumWidthRequest" Value="44"/>
<Setter Property="TextColor" Value="{DynamicResource UlColorOnPrimary}" />
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorPrimary}" />
<Setter Property="FontFamily" Value="{StaticResource UlTypeFamilySansStrong}" />
<Setter Property="FontSize" Value="{StaticResource UlTypeLabelSize}" />
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="BorderColor" Value="Transparent" />
<Setter Property="BorderWidth" Value="0" />
<Setter Property="CornerRadius" Value="12" />
<Setter Property="Padding" Value="16,12" />
<Setter Property="MinimumHeightRequest" Value="{StaticResource UlTouchMinimum}" />
<Setter Property="MinimumWidthRequest" Value="{StaticResource UlTouchMinimum}" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray600}}" />
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorPrimaryPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver" />
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style TargetType="CheckBox">
<Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
<Setter Property="MinimumHeightRequest" Value="44"/>
<Setter Property="MinimumWidthRequest" Value="44"/>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
<Setter Property="TextColor" Value="{DynamicResource UlColorSurfaceStrong}" />
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorDisabled}" />
<Setter Property="Opacity" Value="0.7" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused" />
<VisualState x:Name="Focused">
<VisualState.Setters>
<Setter Property="BorderColor" Value="{DynamicResource UlColorFocus}" />
<Setter Property="BorderWidth" Value="3" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style TargetType="DatePicker">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter Property="FontFamily" Value="OpenSansRegular"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="MinimumHeightRequest" Value="44"/>
<Setter Property="MinimumWidthRequest" Value="44"/>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
<Style x:Key="UlButtonPrimary" TargetType="Button" />
<Style x:Key="UlButtonSecondary" TargetType="Button">
<Setter Property="TextColor" Value="{DynamicResource UlColorPrimary}" />
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorSurface}" />
<Setter Property="BorderColor" Value="{DynamicResource UlColorPrimary}" />
<Setter Property="BorderWidth" Value="2" />
</Style>
<Style TargetType="Editor">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter Property="FontFamily" Value="OpenSansRegular"/>
<Setter Property="FontSize" Value="14" />
<Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
<Setter Property="MinimumHeightRequest" Value="44"/>
<Setter Property="MinimumWidthRequest" Value="44"/>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
<Style x:Key="UlButtonAccent" TargetType="Button">
<Setter Property="TextColor" Value="{DynamicResource UlColorOnAccent}" />
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorAccent}" />
</Style>
<Style TargetType="Entry">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter Property="FontFamily" Value="OpenSansRegular"/>
<Setter Property="FontSize" Value="14" />
<Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
<Setter Property="MinimumHeightRequest" Value="44"/>
<Setter Property="MinimumWidthRequest" Value="44"/>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
<Style x:Key="UlButtonPrimaryField" TargetType="Button">
<Setter Property="MinimumHeightRequest" Value="{StaticResource UlTouchPrimary}" />
<Setter Property="FontSize" Value="{StaticResource UlTypeBodySize}" />
<Setter Property="CornerRadius" Value="20" />
<Setter Property="Padding" Value="24,16" />
</Style>
<Style TargetType="ImageButton">
<Setter Property="Opacity" Value="1" />
<Setter Property="BorderColor" Value="Transparent"/>
<Setter Property="BorderWidth" Value="0"/>
<Setter Property="CornerRadius" Value="0"/>
<Setter Property="MinimumHeightRequest" Value="44"/>
<Setter Property="MinimumWidthRequest" Value="44"/>
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter Property="BorderColor" Value="Transparent" />
<Setter Property="BorderWidth" Value="0" />
<Setter Property="CornerRadius" Value="12" />
<Setter Property="MinimumHeightRequest" Value="{StaticResource UlTouchMinimum}" />
<Setter Property="MinimumWidthRequest" Value="{StaticResource UlTouchMinimum}" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="Opacity" Value="0.5" />
</VisualState.Setters>
<VisualState x:Name="Pressed">
<VisualState.Setters><Setter Property="Opacity" Value="0.72" /></VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters><Setter Property="Opacity" Value="0.45" /></VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver" />
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style x:Key="UlIconButton" TargetType="ImageButton">
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorSurface}" />
<Setter Property="BorderColor" Value="{DynamicResource UlColorBorder}" />
<Setter Property="BorderWidth" Value="1" />
</Style>
<Style TargetType="Label">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
<Setter Property="TextColor" Value="{DynamicResource UlColorText}" />
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter Property="FontFamily" Value="OpenSansRegular" />
<Setter Property="FontSize" Value="14" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
<Setter Property="FontFamily" Value="{StaticResource UlTypeFamilySans}" />
<Setter Property="FontSize" Value="{StaticResource UlTypeBodySize}" />
</Style>
<Style TargetType="Span">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
<Setter Property="TextColor" Value="{DynamicResource UlColorText}" />
<Setter Property="FontFamily" Value="{StaticResource UlTypeFamilySans}" />
</Style>
<Style TargetType="Label" x:Key="Headline">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource MidnightBlue}, Dark={StaticResource White}}" />
<Setter Property="FontSize" Value="32" />
<Style x:Key="UlPageTitle" TargetType="Label">
<Setter Property="FontFamily" Value="{StaticResource UlTypeFamilySansStrong}" />
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="FontSize" Value="{StaticResource UlTypePageSize}" />
</Style>
<Style x:Key="UlSectionTitle" TargetType="Label">
<Setter Property="FontFamily" Value="{StaticResource UlTypeFamilySansStrong}" />
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="FontSize" Value="{StaticResource UlTypeSectionSize}" />
</Style>
<Style x:Key="UlBodyMuted" TargetType="Label">
<Setter Property="TextColor" Value="{DynamicResource UlColorTextMuted}" />
</Style>
<Style x:Key="UlTechnicalValue" TargetType="Label">
<Setter Property="FontFamily" Value="{StaticResource UlTypeFamilyMono}" />
<Setter Property="FontSize" Value="{StaticResource UlTypeMonoSize}" />
</Style>
<Style x:Key="Headline" TargetType="Label" BasedOn="{StaticResource UlPageTitle}">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>
<Style x:Key="SubHeadline" TargetType="Label" BasedOn="{StaticResource UlSectionTitle}">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>
<Style TargetType="Label" x:Key="SubHeadline">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource MidnightBlue}, Dark={StaticResource White}}" />
<Setter Property="FontSize" Value="24" />
<Setter Property="HorizontalOptions" Value="Center" />
<Style x:Key="UlCard" TargetType="Border">
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorSurfaceRaised}" />
<Setter Property="Stroke" Value="{DynamicResource UlColorBorder}" />
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="StrokeShape" Value="RoundRectangle 12" />
<Setter Property="Padding" Value="16" />
<Setter Property="Margin" Value="0,0,0,12" />
</Style>
<Style x:Key="UlJobRow" TargetType="Border">
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorSurface}" />
<Setter Property="Stroke" Value="{DynamicResource UlColorBorder}" />
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="Padding" Value="16,12" />
<Setter Property="MinimumHeightRequest" Value="{StaticResource UlTouchComfortable}" />
</Style>
<Style x:Key="UlStatusBadge" TargetType="Border">
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorSurface}" />
<Setter Property="Stroke" Value="{DynamicResource UlColorNeutral}" />
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="StrokeShape" Value="RoundRectangle 999" />
<Setter Property="Padding" Value="8,4" />
<!-- Consumers must supply visible status text and an icon; color is supplemental. -->
</Style>
<Style x:Key="UlDeviceChip" TargetType="Border" BasedOn="{StaticResource UlStatusBadge}">
<Setter Property="MinimumHeightRequest" Value="{StaticResource UlTouchMinimum}" />
<Setter Property="Padding" Value="12,8" />
</Style>
<Style x:Key="UlMetricValue" TargetType="Label">
<Setter Property="FontFamily" Value="{StaticResource UlTypeFamilyMono}" />
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="FontSize" Value="{StaticResource UlTypeDisplaySize}" />
</Style>
<Style x:Key="UlEmptyStateTitle" TargetType="Label" BasedOn="{StaticResource UlSectionTitle}">
<Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>
<Style x:Key="UlEmptyStateBody" TargetType="Label" BasedOn="{StaticResource UlBodyMuted}">
<Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>
<Style TargetType="ListView">
<Setter Property="SeparatorColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
<Setter Property="RefreshControlColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />
<Style TargetType="Entry">
<Setter Property="TextColor" Value="{DynamicResource UlColorText}" />
<Setter Property="PlaceholderColor" Value="{DynamicResource UlColorTextMuted}" />
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorSurface}" />
<Setter Property="FontFamily" Value="{StaticResource UlTypeFamilySans}" />
<Setter Property="FontSize" Value="{StaticResource UlTypeBodySize}" />
<Setter Property="MinimumHeightRequest" Value="{StaticResource UlTouchMinimum}" />
<Setter Property="MinimumWidthRequest" Value="{StaticResource UlTouchMinimum}" />
</Style>
<Style x:Key="UlInput" TargetType="Entry" />
<Style TargetType="Editor">
<Setter Property="TextColor" Value="{DynamicResource UlColorText}" />
<Setter Property="PlaceholderColor" Value="{DynamicResource UlColorTextMuted}" />
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorSurface}" />
<Setter Property="FontFamily" Value="{StaticResource UlTypeFamilySans}" />
<Setter Property="FontSize" Value="{StaticResource UlTypeBodySize}" />
<Setter Property="MinimumHeightRequest" Value="{StaticResource UlTouchComfortable}" />
<Setter Property="MinimumWidthRequest" Value="{StaticResource UlTouchMinimum}" />
</Style>
<Style TargetType="Picker">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
<Setter Property="TitleColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter Property="FontFamily" Value="OpenSansRegular"/>
<Setter Property="FontSize" Value="14" />
<Setter Property="MinimumHeightRequest" Value="44"/>
<Setter Property="MinimumWidthRequest" Value="44"/>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
<Setter Property="TitleColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
<Setter Property="TextColor" Value="{DynamicResource UlColorText}" />
<Setter Property="TitleColor" Value="{DynamicResource UlColorTextMuted}" />
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorSurface}" />
<Setter Property="FontFamily" Value="{StaticResource UlTypeFamilySans}" />
<Setter Property="FontSize" Value="{StaticResource UlTypeBodySize}" />
<Setter Property="MinimumHeightRequest" Value="{StaticResource UlTouchMinimum}" />
<Setter Property="MinimumWidthRequest" Value="{StaticResource UlTouchMinimum}" />
</Style>
<Style TargetType="ProgressBar">
<Setter Property="ProgressColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="ProgressColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
<Style TargetType="DatePicker">
<Setter Property="TextColor" Value="{DynamicResource UlColorText}" />
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorSurface}" />
<Setter Property="FontFamily" Value="{StaticResource UlTypeFamilySans}" />
<Setter Property="FontSize" Value="{StaticResource UlTypeBodySize}" />
<Setter Property="MinimumHeightRequest" Value="{StaticResource UlTouchMinimum}" />
<Setter Property="MinimumWidthRequest" Value="{StaticResource UlTouchMinimum}" />
</Style>
<Style TargetType="RadioButton">
<Setter Property="BackgroundColor" Value="Transparent"/>
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
<Setter Property="FontFamily" Value="OpenSansRegular"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="MinimumHeightRequest" Value="44"/>
<Setter Property="MinimumWidthRequest" Value="44"/>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style TargetType="RefreshView">
<Setter Property="RefreshColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />
</Style>
<Style TargetType="SearchBar">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
<Setter Property="PlaceholderColor" Value="{StaticResource Gray500}" />
<Setter Property="CancelButtonColor" Value="{StaticResource Gray500}" />
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter Property="FontFamily" Value="OpenSansRegular" />
<Setter Property="FontSize" Value="14" />
<Setter Property="MinimumHeightRequest" Value="44"/>
<Setter Property="MinimumWidthRequest" Value="44"/>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
<Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style TargetType="SearchHandler">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
<Setter Property="PlaceholderColor" Value="{StaticResource Gray500}" />
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter Property="FontFamily" Value="OpenSansRegular" />
<Setter Property="FontSize" Value="14" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
<Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style TargetType="Shadow">
<Setter Property="Radius" Value="15" />
<Setter Property="Opacity" Value="0.5" />
<Setter Property="Brush" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource White}}" />
<Setter Property="Offset" Value="10,10" />
</Style>
<Style TargetType="Slider">
<Setter Property="MinimumTrackColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
<Setter Property="MaximumTrackColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray600}}" />
<Setter Property="ThumbColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="MinimumTrackColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}"/>
<Setter Property="MaximumTrackColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}"/>
<Setter Property="ThumbColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style TargetType="SwipeItem">
<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
</Style>
<Style TargetType="Switch">
<Setter Property="OnColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
<Setter Property="ThumbColor" Value="{StaticResource White}" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="OnColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
<Setter Property="ThumbColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="On">
<VisualState.Setters>
<Setter Property="OnColor" Value="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Gray200}}" />
<Setter Property="ThumbColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Off">
<VisualState.Setters>
<Setter Property="ThumbColor" Value="{AppThemeBinding Light={StaticResource Gray400}, Dark={StaticResource Gray500}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style TargetType="TimePicker">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
<Setter Property="BackgroundColor" Value="Transparent"/>
<Setter Property="FontFamily" Value="OpenSansRegular"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="MinimumHeightRequest" Value="44"/>
<Setter Property="MinimumWidthRequest" Value="44"/>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
<Setter Property="TextColor" Value="{DynamicResource UlColorText}" />
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorSurface}" />
<Setter Property="FontFamily" Value="{StaticResource UlTypeFamilySans}" />
<Setter Property="FontSize" Value="{StaticResource UlTypeBodySize}" />
<Setter Property="MinimumHeightRequest" Value="{StaticResource UlTouchMinimum}" />
<Setter Property="MinimumWidthRequest" Value="{StaticResource UlTouchMinimum}" />
</Style>
<!--
<Style TargetType="TitleBar">
<Setter Property="MinimumHeightRequest" Value="32"/>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="TitleActiveStates">
<VisualState x:Name="TitleBarTitleActive">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter Property="ForegroundColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="TitleBarTitleInactive">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
<Setter Property="ForegroundColor" Value="{AppThemeBinding Light={StaticResource Gray400}, Dark={StaticResource Gray500}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
<Style TargetType="SearchBar">
<Setter Property="TextColor" Value="{DynamicResource UlColorText}" />
<Setter Property="PlaceholderColor" Value="{DynamicResource UlColorTextMuted}" />
<Setter Property="CancelButtonColor" Value="{DynamicResource UlColorPrimary}" />
<Setter Property="BackgroundColor" Value="{DynamicResource UlColorSurface}" />
<Setter Property="FontFamily" Value="{StaticResource UlTypeFamilySans}" />
<Setter Property="FontSize" Value="{StaticResource UlTypeBodySize}" />
<Setter Property="MinimumHeightRequest" Value="{StaticResource UlTouchMinimum}" />
</Style>
-->
<Style TargetType="Page" ApplyToDerivedTypes="True">
<Setter Property="Padding" Value="0"/>
<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource OffBlack}}" />
<Style TargetType="CheckBox">
<Setter Property="Color" Value="{DynamicResource UlColorPrimary}" />
<Setter Property="MinimumHeightRequest" Value="{StaticResource UlTouchMinimum}" />
<Setter Property="MinimumWidthRequest" Value="{StaticResource UlTouchMinimum}" />
</Style>
<Style TargetType="RadioButton">
<Setter Property="TextColor" Value="{DynamicResource UlColorText}" />
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter Property="FontFamily" Value="{StaticResource UlTypeFamilySans}" />
<Setter Property="FontSize" Value="{StaticResource UlTypeBodySize}" />
<Setter Property="MinimumHeightRequest" Value="{StaticResource UlTouchMinimum}" />
<Setter Property="MinimumWidthRequest" Value="{StaticResource UlTouchMinimum}" />
</Style>
<Style TargetType="Switch">
<Setter Property="OnColor" Value="{DynamicResource UlColorPrimary}" />
<Setter Property="ThumbColor" Value="{DynamicResource UlColorSurface}" />
<Setter Property="MinimumHeightRequest" Value="{StaticResource UlTouchMinimum}" />
<Setter Property="MinimumWidthRequest" Value="{StaticResource UlTouchMinimum}" />
</Style>
<Style TargetType="Slider">
<Setter Property="MinimumTrackColor" Value="{DynamicResource UlColorPrimary}" />
<Setter Property="MaximumTrackColor" Value="{DynamicResource UlColorBorder}" />
<Setter Property="ThumbColor" Value="{DynamicResource UlColorPrimary}" />
<Setter Property="MinimumHeightRequest" Value="{StaticResource UlTouchMinimum}" />
</Style>
<Style TargetType="ProgressBar">
<Setter Property="ProgressColor" Value="{DynamicResource UlColorPrimary}" />
</Style>
<Style TargetType="RefreshView">
<Setter Property="RefreshColor" Value="{DynamicResource UlColorPrimary}" />
</Style>
<Style TargetType="ListView">
<Setter Property="SeparatorColor" Value="{DynamicResource UlColorBorder}" />
<Setter Property="RefreshControlColor" Value="{DynamicResource UlColorPrimary}" />
</Style>
<Style TargetType="Shell" ApplyToDerivedTypes="True">
<Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource OffBlack}}" />
<Setter Property="Shell.ForegroundColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource SecondaryDarkText}}" />
<Setter Property="Shell.TitleColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource SecondaryDarkText}}" />
<Setter Property="Shell.DisabledColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray950}}" />
<Setter Property="Shell.UnselectedColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray200}}" />
<Setter Property="Shell.BackgroundColor" Value="{DynamicResource UlColorSurfaceStrong}" />
<Setter Property="Shell.ForegroundColor" Value="{DynamicResource UlColorOnStrong}" />
<Setter Property="Shell.TitleColor" Value="{DynamicResource UlColorOnStrong}" />
<Setter Property="Shell.DisabledColor" Value="{DynamicResource UlColorDisabled}" />
<Setter Property="Shell.UnselectedColor" Value="{DynamicResource UlColorBorder}" />
<Setter Property="Shell.NavBarHasShadow" Value="False" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
<Setter Property="Shell.TabBarForegroundColor" Value="{AppThemeBinding Light={StaticResource Magenta}, Dark={StaticResource White}}" />
<Setter Property="Shell.TabBarTitleColor" Value="{AppThemeBinding Light={StaticResource Magenta}, Dark={StaticResource White}}" />
<Setter Property="Shell.TabBarUnselectedColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{DynamicResource UlColorSurfaceStrong}" />
<Setter Property="Shell.TabBarForegroundColor" Value="{DynamicResource UlColorOnStrong}" />
<Setter Property="Shell.TabBarTitleColor" Value="{DynamicResource UlColorOnStrong}" />
<Setter Property="Shell.TabBarUnselectedColor" Value="{DynamicResource UlColorBorder}" />
</Style>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource OffBlack}}" />
<Setter Property="BarTextColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource White}}" />
<Setter Property="IconColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource White}}" />
<Setter Property="BarBackgroundColor" Value="{DynamicResource UlColorSurfaceStrong}" />
<Setter Property="BarTextColor" Value="{DynamicResource UlColorOnStrong}" />
<Setter Property="IconColor" Value="{DynamicResource UlColorOnStrong}" />
</Style>
<Style TargetType="TabbedPage">
<Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Gray950}}" />
<Setter Property="BarTextColor" Value="{AppThemeBinding Light={StaticResource Magenta}, Dark={StaticResource White}}" />
<Setter Property="UnselectedTabColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray950}}" />
<Setter Property="SelectedTabColor" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
<Setter Property="BarBackgroundColor" Value="{DynamicResource UlColorSurfaceStrong}" />
<Setter Property="BarTextColor" Value="{DynamicResource UlColorOnStrong}" />
<Setter Property="UnselectedTabColor" Value="{DynamicResource UlColorBorder}" />
<Setter Property="SelectedTabColor" Value="{DynamicResource UlColorOnStrong}" />
</Style>
</ResourceDictionary>

View File

@@ -0,0 +1,38 @@
namespace FieldLogger.Resources.Styles;
public enum UlThemeMode
{
Default,
Sunlight,
}
/// <summary>Applies generated semantic colors. Call on the UI thread after app resources initialize.</summary>
public static class ThemeManager
{
private static readonly string[] SemanticColors =
[
"Canvas", "Surface", "SurfaceRaised", "SurfaceStrong", "Text", "TextMuted",
"Primary", "PrimaryPressed", "Accent", "Border", "Focus", "Map", "Success",
"Warning", "Error", "Neutral", "Disabled", "OnStrong", "OnPrimary", "OnAccent",
];
public static UlThemeMode Current { get; private set; } = UlThemeMode.Default;
public static void Apply(UlThemeMode mode)
{
var resources = Application.Current?.Resources
?? throw new InvalidOperationException("Application resources are not initialized.");
var prefix = mode == UlThemeMode.Sunlight ? "UlSunlightColor" : "UlDefaultColor";
foreach (var name in SemanticColors)
{
if (!resources.TryGetValue($"{prefix}{name}", out var value) || value is not Color color)
{
throw new InvalidOperationException($"Generated theme token {prefix}{name} is missing.");
}
resources[$"UlColor{name}"] = color;
resources[$"UlBrush{name}"] = new SolidColorBrush(color);
}
Current = mode;
}
}