# May convergence success criteria

These steps should be validated by end of May:

## 1. Install bits

npx create-react-app test-app --template typescript
npm install `react-next`

## 2. Create a base set of themes using tokens:

This is TBD, and may not make May.

import { createTheme, baseTheme } from '@fluentui/react-next';
import { chartingTheme } from '@fluentui/react-charting';

const lightTheme = createTheme(
  baseTheme({ mode: 'light', accent: 'red' }), // spits out tokens
  chartingTheme({})
});

const darkTheme = createTheme(
  { tokens: { n: 'v' }} // "--n: v"
  { tokens: { n: { n2: 'Segoe UI West' }}} // --n-n2: 'v'
  { stylesheets: [
    '@fontface': ...,
    { src: 'some.css' }
    'keyframes'
  ] }
  baseTheme({ mode: 'dark', accent: 'red' })
);

const hcLightTheme = createTheme(lightTheme, {
  tokens: {}
})

const hcDarkTheme = createTheme(darkTheme, {
  tokens: {}
});

## 3. Render each of the composed components using the `ThemeProvider` and appropriate theme:

import { ThemeProvider, Slider, Checkbox, Toggle, Button, Avatar, Pivot } from '@fluentui/react-next';

const lightTheme = // see above.

const ComponentExamples = () => (
  // ... all examples
);

export const App = () => {
  return (
    <Pivot>
      <PivotItem header="Light theme">
        <ThemeProvider theme={lightTheme}>
          <ComponentExamples />  
        </ThemeProvider>
      </PivotItem>
      <PivotItem header="Dark theme">
        <ThemeProvider theme={darkTheme}>
          <ComponentExamples />  
        </ThemeProvider>
      </PivotItem>
    </Pivot>
  )
};

## 4. It should work with IE 11 polyfill:

Edit static/index.html and add polyfill script to head:

  <script>
    if (window.MSInputMethodContext && document.documentMode) {
      document.write(
        '<script src="./ie11CustomProperties.js"><\x2fscript>'
      );
    }
  </script>

Compare results in browser!

## 5. Backwards compatibility still works with Customizer/loadTheme

## 6. Performance validation - runtime

## 7. Performance validation - bundle size

# Next steps

## Teams integration of Button

## Teams integration of Avatar