connectWithStyles.js

// Uses Context and transforms string values ('tiny' => 4px)
connectToStyles(({ padding }) => {
	table: {
		...padding({ left: ‘tiny’ })
	}
))

// Uses Context and passes values for use explicitly 
connectToStyles(({ padding, sizes }) => {
	table: {
		...padding({ left: sizes.tiny })
	}
))

// No Context
Import { sizes } from './const'
Import { padding } from '@styles/helpers' 

connectToStyles({
	tabel: {
		...padding({ left: sizes.tiny })
	}
})
	
	
	
// Combine Vars, External Helpers
import { padding } from '@styles/helpers' 

connectToStyles(({ sizes }) => {
	tabel: {
		...padding({ left: sizes.tiny })
	}
})

index.js

import { StyleProvider, combineConfigs } from '@styles/react'
import { styles as companyConfig } from '@company/configs'
import { projectConfig } from './styleConfig' 

ReactDOM.render(
  <Provider>
    <StyleProvider config={ combineConfigs(companyConfig, projectConfig) }>
      <App />
    </StyleProvider>
  </Provider>
)