feat(tokens): add XAML token output files by matgalla · Pull Request #14272 · Esri/calcite-design-system

matgalla · 2026-04-16T04:59:33Z

Related Issue: #14103

Summary

creates XAML versions of design token output files (manually for now)

Copilot

Pull request overview

Adds initial XAML ResourceDictionary files intended to expose Calcite design tokens (core primitives plus light/dark semantic brushes) for XAML consumers (e.g., ArcGIS Pro).

Changes:

Added core.xaml containing core token resources (colors plus other token categories).
Added light.xaml and dark.xaml theme dictionaries that merge core.xaml and define semantic SolidColorBrush keys.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File	Description
packages/design-tokens/xaml/core.xaml	New core XAML `ResourceDictionary` defining primitive resources (notably color brushes) used by theme dictionaries.
packages/design-tokens/xaml/light.xaml	New light-theme semantic brush dictionary that merges `core.xaml`.
packages/design-tokens/xaml/dark.xaml	New dark-theme semantic brush dictionary that merges `core.xaml`.

Copilot · 2026-04-16T05:04:39Z

+  <SolidColorBrush
+    x:Key="calcite-color-background-none"
+    Color="{Binding Source={StaticResource calcite-color-neutral-blk-000}, Path=Color}"
+    Opacity="{StaticResource calcite-opacity-0}"


Opacity is set via {StaticResource calcite-opacity-0} but the calcite-opacity-* resources in core.xaml are x:String. That will likely cause a XAML load/parse failure when this dictionary is merged. Make the opacity resources numeric (or otherwise ensure the resource type matches the Opacity property type).

Suggested change

Opacity="{StaticResource calcite-opacity-0}"

Opacity="0"

Copilot · 2026-04-16T05:04:40Z

+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Calcite Design System
+-->
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <SolidColorBrush
+    x:Key="calcite-color-neutral-blk-000"
+    Color="#FFFFFFFF"


These XAML dictionaries are being added under packages/design-tokens/xaml/, but the published package currently only includes ./dist/**/* (per packages/design-tokens/package.json). As-is, consumers won’t receive these files when installing @esri/calcite-design-tokens. Consider generating/copying them into dist/xaml/ during the build (and/or updating the package files list) so this feature is actually shipped.

Copilot · 2026-04-16T05:04:40Z

+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <SolidColorBrush
+    x:Key="calcite-color-neutral-blk-000"
+    Color="#FFFFFFFF"


These XAML outputs are hand-maintained and aren’t produced by the existing Style Dictionary build/tests (the packages/design-tokens/tests/spec suite snapshots dist/* outputs). To avoid drift and to match the repo’s token-output workflow, it would be better to add a xaml platform to the build and snapshot-test the generated dist/xaml/*.xaml files.

Copilot · 2026-04-16T05:04:40Z

+  <x:String x:Key="calcite-font-family-andale-mono">'Andale Mono'</x:String> <!-- Fallback for Monaco -->
+  <x:String x:Key="calcite-font-family-avenir-next-pro">'Avenir Next LT Pro'</x:String>
+  <x:String x:Key="calcite-font-family-avenir-next-world">'Avenir Next World'</x:String>
+  <x:String x:Key="calcite-font-family-avenir-next">'Avenir Next'</x:String> <!-- Primary font family -->
+  <x:String x:Key="calcite-font-family-avenir">Avenir</x:String> <!-- Fallback for Avenir Next -->
+  <x:String x:Key="calcite-font-family-consolas">Consolas</x:String> <!-- Fallback for Monaco -->
+  <x:String x:Key="calcite-font-family-helvetica-neue">'Helvetica Neue'</x:String> <!-- Fallback for Avenir Next -->
+  <x:String x:Key="calcite-font-family-lucida-console">'Lucida Console'</x:String> <!-- Fallback for Monaco -->


The calcite-font-family-* resources include surrounding quotes (e.g., 'Avenir Next'). In XAML, FontFamily parsing typically expects the raw family name (without embedded quotes), so consumers using FontFamily="{StaticResource calcite-font-family-...}" may not resolve the font correctly. Consider emitting XAML-friendly values for font families (and similarly reviewing other non-color tokens like font-weight/size that currently look CSS-oriented).

Suggested change

<x:String x:Key="calcite-font-family-andale-mono">'Andale Mono'</x:String> 

<x:String x:Key="calcite-font-family-avenir-next-pro">'Avenir Next LT Pro'</x:String>

<x:String x:Key="calcite-font-family-avenir-next-world">'Avenir Next World'</x:String>

<x:String x:Key="calcite-font-family-avenir-next">'Avenir Next'</x:String> 

<x:String x:Key="calcite-font-family-avenir">Avenir</x:String> 

<x:String x:Key="calcite-font-family-consolas">Consolas</x:String> 

<x:String x:Key="calcite-font-family-helvetica-neue">'Helvetica Neue'</x:String> 

<x:String x:Key="calcite-font-family-lucida-console">'Lucida Console'</x:String> 

<x:String x:Key="calcite-font-family-andale-mono">Andale Mono</x:String> 

<x:String x:Key="calcite-font-family-avenir-next-pro">Avenir Next LT Pro</x:String>

<x:String x:Key="calcite-font-family-avenir-next-world">Avenir Next World</x:String>

<x:String x:Key="calcite-font-family-avenir-next">Avenir Next</x:String> 

<x:String x:Key="calcite-font-family-avenir">Avenir</x:String> 

<x:String x:Key="calcite-font-family-consolas">Consolas</x:String> 

<x:String x:Key="calcite-font-family-helvetica-neue">Helvetica Neue</x:String> 

<x:String x:Key="calcite-font-family-lucida-console">Lucida Console</x:String>

Copilot · 2026-04-16T05:04:41Z

+  <x:String x:Key="calcite-opacity-0">0</x:String>
+  <x:String x:Key="calcite-opacity-4">0.04</x:String>
+  <x:String x:Key="calcite-opacity-8">0.08</x:String>
+  <x:String x:Key="calcite-opacity-10">0.1</x:String>
+  <x:String x:Key="calcite-opacity-12">0.12</x:String>
+  <x:String x:Key="calcite-opacity-16">0.16</x:String>
+  <x:String x:Key="calcite-opacity-20">0.2</x:String>
+  <x:String x:Key="calcite-opacity-30">0.3</x:String>
+  <x:String x:Key="calcite-opacity-40">0.4</x:String>
+  <x:String x:Key="calcite-opacity-50">0.5</x:String>
+  <x:String x:Key="calcite-opacity-60">0.6</x:String>
+  <x:String x:Key="calcite-opacity-70">0.7</x:String>
+  <x:String x:Key="calcite-opacity-80">0.8</x:String>
+  <x:String x:Key="calcite-opacity-85">0.85</x:String>
+  <x:String x:Key="calcite-opacity-90">0.9</x:String>
+  <x:String x:Key="calcite-opacity-92">0.92</x:String>
+  <x:String x:Key="calcite-opacity-96">0.96</x:String>
+  <x:String x:Key="calcite-opacity-100">1</x:String>


calcite-opacity-* resources are defined as x:String, but in light.xaml/dark.xaml they’re used to set SolidColorBrush.Opacity (a double). In WPF/WinUI this typically fails to load because {StaticResource ...} returns a string that can’t be assigned to a numeric DP. Define opacity tokens as a numeric resource type (e.g., sys:Double) so Opacity can be resolved without a runtime XAML parse error.

Copilot · 2026-04-16T05:04:41Z

+  <SolidColorBrush
+    x:Key="calcite-color-background-none"
+    Color="{Binding Source={StaticResource calcite-color-neutral-blk-000}, Path=Color}"
+    Opacity="{StaticResource calcite-opacity-0}"


Opacity is set via {StaticResource calcite-opacity-0} but the calcite-opacity-* resources in core.xaml are x:String. That will likely cause a XAML load/parse failure when this dictionary is merged. Make the opacity resources numeric (or otherwise ensure the resource type matches the Opacity property type).

Suggested change

Opacity="{StaticResource calcite-opacity-0}"

Opacity="0"

matgalla added 5 commits April 15, 2026 18:36

add light.xaml

adfea7b

add core.xaml

a04723e

update light.xaml to reference core tokens directly

c5dcc64

add dark.xaml

16beb72

add comments and adjust formatting

704be6a

matgalla requested a review from Copilot April 16, 2026 04:59

matgalla self-assigned this Apr 16, 2026

github-actions bot added the enhancement Issues tied to a new feature or request. label Apr 16, 2026

Copilot started reviewing on behalf of matgalla April 16, 2026 04:59 View session

matgalla added the skip visual snapshots Pull requests that do not need visual regression testing. label Apr 16, 2026

Copilot AI reviewed Apr 16, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tokens): add XAML token output files#14272

feat(tokens): add XAML token output files#14272
matgalla wants to merge 5 commits intodevfrom
matgalla/14103-add-xaml-token-output-manually

matgalla commented Apr 16, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

matgalla commented Apr 16, 2026

Summary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants