---
tags: theming
---

# Theming: tokens v-team

## Team members

Design
**Spencer Hurd** - design
**Angela Allison** - design

Devs
**Travis Spooner** - dev
**Levi Thomason** - dev
**David Zearing** - dev

## Outcomes

* Framework agnostic css theming
* Clear documentation on how to use tokens
* What a tokens is
* Style dictionary output to
* Exports json or css or typescript
* Shared React Provider
* Theme json
* Components which are using css variables
* Static styling
* Base {Brand} theme(s) that can
*
* Builder - generic, iframe rendering, editor
*

Common provider (does this take in json)

# Questions

What is the granularity of a token?
How does a designer?
Travis - style dictionary?

## Links

[Excel spreadsheet of tokens][tokens]
[Figma design][figma]
[Web prototype to prove out tokens across N components][proto]
[Prototype for theming interop between Fabric and Stardust][themeinterop]

TODO: link teams base theme css variables pr

## Goals

* Understand how tokens will be defined in a standard JSON schema
* Transform JSON schema into web css
* Later transform into other platform (or, we add more people here)
* Understand how web controls will use the css to apply styling
* Use these components to prove out the system
* Buttons
* Checkbox
* Toggle
* Input
* Radio
* Link
* Slider

These investigations should ultimately produce a plan for designers and developers to understand how to leverage the Fluent UI theming system.

## Current projects

| Project | Assigned to |
|-|-|
| Theme interop between Fabric and Stardust | Marija |
| Icon theming solution | Marija |
| Integrate styled dictionary into prototype | Travis |
| Define json input for styled dictionary input | Spencer |
| Web: Slider, RadioGroup | David |
| Create developer guide for component styling |
| Create developer guide for theme usage |
| Integrate token system into production components | |

[tokens]: https://microsoft-my.sharepoint-df.com/:x:/r/personal/jknudsen_microsoft_com/Documents/TokensList.xlsx?d=we1c0877530a641e09dcf44c0363b9a96&csf=1&e=GjlUUm
[proto]: https://codesandbox.io/s/token-fun-o2gh8
[figma]: https://www.figma.com/file/fBEvmvicrdjkB5ljK5nAaF/Tokens-(Working)?node-id=268%3A202&viewport=-5145%2C-9958%2C1.0322225093841553
[themeinterop]: https://codesandbox.io/s/teams-fabric-interop-shared-w4te8

## Open issues/questions

Challenge: Change the button font weight

Approaches:

0. Define one-off

2. Redefine mappings in the button to map to new token sets

2. Change the definition of the token set

3. Change the global definition of the font weight

How: Defining variants for buttons

* Buttons can have flag modifiers
* The modifiers will have a mapping to token sets.
* Mappings (from button modifier to token set) are defined as part of a theme.

How we make 2 icons which use different styles?

// accentFill has an opinion about icon colors
<Button primary>  

// A default icon uses "iconColor" token for the color by default.
<FooIcon />

// We can add modifiers which tweak alt tokens to use:
<FooIcon glyph /> 


================== hardcoding danger zone =========
// Use the class name to have an alt opinion
<FooIcon className="fancy-fill" />

// We could allow the user to override manually :(
<FooIcon color="red" />

</Button>

How do we make icons grow with container size? Especially in Button size scenarios?