Configuration

Configuration for setup Legion to your development

Multi-Theme

Legion uses multi-theming with the help of ThemeProvider from Emotion, this means you can switch themes quickly and see what you need with as easy as props parsing to the ThemeProvider. With each theme from each tribe being fetched from an API endpoint, you are guaranteed to be updated as long as both designer and developer cooperated with any incoming updates to your application.

ThemeProvider

In this example we are going to use what’s generated from the Create React App command, but the principal stays the same across entire application. You are going to edit your main root file of your React Js whether it’s App.js or Index.js or Main.js, and wrap the entire Main Component / Main App with the ThemeProvider such as follows with the props description:

Props

Name	Type	Description
theme	object	The generated object from designer’s Figma pushed to the given repository. Fetched first before passed to the `ThemeProvider` as props.

Available Themes

Not all squad are also provided like tribe, some are ready for use some aren’t since needs will differ across platforms too. Here are the squads that are ready to use by order:

Theme Name	API Endpoint
Theme Pijar Sekolah	`https://api.github.com/repos/telkom-design/theme/contents/pjs.json`
Theme Logee Trans	`https://api.github.com/repos/telkom-design/theme/contents/lgt.json`
Theme Agree Culture	`https://api.github.com/repos/telkom-design/theme/contents/agr.json`
Theme GovMart	`https://api.github.com/repos/telkom-design/theme/contents/gtp.json`
Theme BigBox	`https://api.github.com/repos/telkom-design/theme/contents/bbx.json`
Theme TKP	`https://api.github.com/repos/telkom-design/theme/contents/tkp.json`
Theme DigiTern	`https://api.github.com/repos/telkom-design/theme/contents/int.json`
Theme OSS	`https://api.github.com/repos/telkom-design/theme/contents/oss.json`
Theme PadiUMKM	`https://api.github.com/repos/telkom-design/theme/contents/pdm.json`
Theme MyTens	`https://api.github.com/repos/telkom-design/theme/contents/mtn.json`
Theme BPOM	`https://api.github.com/repos/telkom-design/theme/contents/bpm.json`

Usage Themes

Below is the usage example using Pijar’s squad theme.

import { ThemeProvider } from '@emotion/react'
import { createTokens } from '@legion-ui/core'

const TokensPijar = createTokens({
  apiUrl: 'https://api.github.com/repos/telkom-design/theme/contents/pjs.json',
  apiHeaders: { Accept: 'application/vnd.github.v3.raw' },
  tokensName: 'pijarTokens'
})

After you wrap the main App component inside the ThemeProvider, you’re all set and ready to go you can use any available components provided.