# Native Theming Discussion

Notes from a quick followup discussion on native theming, what is done, what is missing, what needs to change.

## Native Modules

## Themes and Theme Providers

- how to attach custom info to our themes
- how to make it easy to convert - maybe our theme is a transport for your theme

// Layers this onto existing stuff
createRegistry(LPCThemeModule, 'LPC', invalidate)

LPC: { ... }

Questions:
- Do people actually create multiple themes
- Can we unify with fluent

const myTheme = createTheme / loadTheme

<ThemeProvider theme={myTheme}>

.. ThemingModuleHelper.getPlatformThemeDefinition();

<ThemeProvider registry={...} theme={...} />

Proposal: Themes as recipes

All themes are produced by
1. get parent theme
2. get partial via direct, or function, or native module invocation
3. merge parent & partial => full theme
4. repeat 1-3 indefinitely at any step

Make theme transformations arrays

registry.setTheme(name: string, ...defs: ()[])

-- Theme chaining

type ThemeRef = {
  child: (creationStuff)
  inner: Theme
}

const myTheme = createNativeTheme('TaskBar').child(doLPCMods())

const myTheme = createTheme(something).child(
  // load native module stuff
).child(
  // do some more
);

## Global Tokens, Alias Tokens, Component Tokens

## CSS Variable Approach

### Codemod - turn theme into keys

colors: {
 buttonBackground: string 
};
typography: {
}

type Keys = 'colors.buttonBackground' | `colors.buttonText` ...

### Reference theme values by key

Goal to write tokens like:

const Button = compose({
  tokens: [
    {
      backgroundColor: Var('componentValues.buttonBackground', Var('colors.neutral3', 'gray'))
    }
  ]
})

in enable css var mode

backgroundColor: `var(--componentValues-buttonBackground, var(--colors.neutral3, gray))`

in native or non-css mode

function Var(key: ThemeKeys, fallback): (theme: ITheme) => {
  
}

A theme might look like:

interface ITheme = {
  // these get specified
  colors: {
    neutral
    ...
  },
  // these are only specified for customization
  otherStuff: {
    buttonBackground?: 
  }
}

Theme                   Theme          ??
buttonRootFillRest -> NeutralFill -> Gray80 -> #F3f3f3
stable... ?             ?????