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 */,
};