Theo Manager
Theo Manager is an implementation of Theo for Jota Web.
Installation
yarn add theo-manager
Basic Help
yarn theo-manger --help
CLI
First of all, start the project with yarn theo-manager init
. This command generates a default config file. If you want to create your own config file, try yarn theo-manager init --create
. You can also use the --force
flag to change configurations.
Link Fonts ( React Native )
Before linking, you will have to set up the react-native.config.js to link fonts properly. If you already have it set up you can skip this step.
To link the fonts, run yarn theo-manager link-fonts|link
.
Note: I highly recommend you to use Google Fonts links
Convert Tokens
This part is pretty straightforward. Just run yarn theo-manager convert-tokens|convert
and it will convert all modules. If you want to convert a specific module just use --module <name>
API Usage ( React Native )
Since React Native has a limited support to external fonts, I created this simple function.
Note: Mainly on Android, the output of the function has to be the same as the file name
const renderNativeFont = const styles = foo: ... /* output: { fontFamily: Roboto-SemiBold-Italic, fontWeight: '600', fontStyle: 'italic'; } */
Default Configuration File
// react-native-theo.config.jsmoduleexports = // * You must declare more than zero if you are going to use 'theo-native convert-tokens' // * The key of the objects must be one of // https://github.com/salesforce-ux/theo#value-transforms // or // 'native' native: tokens: dir: "./tokens/" output: dir: "./src/" extension: "js" // https://github.com/salesforce-ux/theo#formats format: "module.js" // You can declare both files and urls, but you cannot declare // 'fonts: {}' if you are going to use 'theo-native link-fonts' fonts: files: "./tokens/brand-01/typography/index.yml" urls: "https://fonts.googleapis.com/css2?family=Roboto" "https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,900;1,700" ;
React Native Configuration
// react-native.config.jsmoduleexports = assets: "./assets/fonts/" /* you will need to add this line */;