theo-manager v0.2.3
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 } = require('react-native-theo')
const styles = {
foo: {
...renderNativeFont({
fontFamily: 'Roboto';
fontWeight: '600';
italic: true;
}) /*
output: {
fontFamily: Roboto-SemiBold-Italic,
fontWeight: '600',
fontStyle: 'italic';
}
*/
}
}
Default Configuration File
// react-native-theo.config.js
module.exports = {
// * 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.js
module.exports = {
assets: ["./assets/fonts/"] /* you will need to add this line */,
};
3 years ago