Development

Configuration

Configuration for setup Legion to your development

Multi-Theme

Legion uses multi-theming with the help of ThemeProvider from Theme UI, 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 loaded from a package, 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, usually using 3 words of the given squad

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	Tribe / Squad Code	Tribe / Squad Description
Theme Agree	`agl`, `agr`, `aqf`	Agree Livestock, Agree Culture, Agree Fisheries
Theme Logee	`lgd`, `lgt`	Logee Distribution, Logee Transporation
Theme EDU	`pjb`, `pjm`	Pijar Belajar, Pijar Mahir
Theme ENT	`ptn`, `oss`	Squad Pertamina, Squad OSS
Theme EWZ	`mcr`, `mcn`, `mtn`	MyCarrier, mysooltan, MyTEnS
Theme FIN	`qip`, `lpe`	Squad QIP, Squad Loyality Point Exchange
Theme SMB	`pdm`, `lkp`	Squad PaDi, Squad LKPP
Theme VPL	`pli`	Peduli Lindungi

Installing Fonts Theme

Latest steps you can install the fonts for your selected theme with embeded the font link innside your <head></head> tag

Theme Agree

Heading : Montserrat, Body : Open Sans

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans" />

Theme Logee

Heading : Ubuntu, Body : Lato

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Lato" />

Theme EDU

Pijar Belajar | Heading & Body : Nunito

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito" />

Pijar Mahir | Heading & Body : Inter

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter" />

Theme ENT

Squad : PTN | Heading : Poppins, Body : Roboto

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins|Roboto" />

Squad : OSS | Heading : Poppins, Body : Poppins

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins" />

Theme FIN

Heading : Plus Jakarta Sans, Body : Inter

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans|Inter" />

Theme VPL

Heading : Roboto, Body : Roboto

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />

Usage Themes

Below is the usage using Logee Transportation’s squad theme.

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { lgt } from '@legion-theme/logee';
import { ThemeProvider } from 'legion-ui';

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.

Do you have feedback?

Please let us know to make it better

Send Feedback