Tornado provide a nice theming method you can use it from Tornado typescript object like this Tornado.design({..options..}); this method let you change the complete design system easly you can change colors / fonts / sizes / dimensions / radius and more
//======> Import Tornado UI Methods <=======//
import Tornado from './Base/Tornado';
//======> Typescript and Global Usage <=======//
Tornado.design({ ..options.. });
this a list from design options of all colors used across Tornado UI Components and Elements that you can change easily from the Design Options Method look at the code below.
//======> Activate Design Options <=======//
Tornado.design({
//====> Colors Options <====//
colors : {
//====> Body Background <====//
background : '#fcfcfc',
//====> Primary Color <====//
primary : '#4166d6',
primaryHover : '#2e4dc9',
primaryReverse : '#FFF',
//====> Secondary Color <====//
secondary : '#FA9443',
secondaryHover : '#FE892D',
secondaryReverse : '#FFFFFF',
//====> Assets Colors <====//
success : '#22b544',
danger : '#de3131',
warning : '#f4bb0e',
info : '#17c0db',
gray : '#868e96',
dark : '#343a40',
disable : '#ebebeb',
//====> Assets Light <====//
successLight : '#c1eecc',
dangerLight : '#fbbbbb',
warningLight : '#ffdd75',
infoLight : '#a6eaf5',
grayLight : '#d9dde1',
darkLight : '#585C5F',
//====> Typography Colors <====//
headlines : '#1c1c1c', //===> Heads Text Color
typography : '#555', //===> Text Color
lightReverse : '#000', //===> Text Color for Light Backgrounds
darkReverse : '#FFF', //===> Text Color for Colorful Backgrounds
},
});
this a list from design options of all font properties used across Tornado Ui Components and Elements that you can change easily from the Design Options Method look at the code below.
//======> Activate Design Options <=======//
Tornado.design({
//====> Font Options <====//
font : {
//===> Font Sizes <===//
size : '16px', //===> Font Size in Large Screens
sizeMedium : '15px', //===> Font Size in Medium Screens
sizeSmall : '14px', //===> Font Size in Small Screens
lineHeight : '1.625', //===> Default Line Height
//===> Font Weights <===//
normalWeight : '400', //===> Normal Font Weight
mediumWeight : '500', //===> Medium Font Weight
strongWeight : '600', //===> Bold Font Weight
//===> Fonts Families <===//
primary : `'Roboto'`, //===> Headlines Font Family
secondary : `'Roboto'`, //===> Normal Text Font Family
include : ['<https://fonts.googleapis.com/css?family=Roboto:wght@400,500,600>'], //===> Fonts CSS Urls
icons : `"tornado-icons"`,
//===> RTL Fonts <===//
rtl : {
//===> Fonts Families <===//
primary : `'Montserrat'`,
secondary : `'Montserrat'`,
include : ['<https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700>'], //===> Fonts CSS Urls
//===> Font Weights <===//
normalWeight : '400', //===> Normal Font Weight
mediumWeight : '600', //===> Medium Font Weight
strongWeight : '700', //===> Bold Font Weight
}
},
});
this a list from design options of all properties that related to style and theme form controls and used across the Form Components and Elements that you can change easly from the Design Options Method look at the code below.
//======> Activate Design Options <=======//
Tornado.design({
//====> Form Controls Options <====//
forms : {
background : '#FFFFFF', //====> Background Color
darkerBG : '#ebebeb', //====> Darker Background Color
typography : '#555555', //====> Text Color
alertColor : '#c2c8cd', //====> Alert Box Default BG
edgeRadius : '5px', //====> Border Radius
border : '1px solid rgba(0,0,0, 0.1)', //====> Controls Border
shadow : 'inset 0 0 5px rgba(0,0,0, 0.03)', //====> Boxshadow for Controls
btnShadow : 'none', //====> Buttons Shadow Without Color
height : '2.5rem', //====> Normal Height
heightS : '2.25rem', //====> Small Height
heightL : '3rem', //====> Large Height
textArea : '6.25rem', //====> Textarea Height
padding : '0.9375rem', //====> Normal Padding
paddingL : '1.25rem', //====> Large Padding
gutter : '1.25rem', //====> Space Between Controls
},
});
this a list from design options of all properties that related to style and theme tables and used across the Table Component that you can change easly from the Design Options Method look at the code below.
//======> Activate Design Options <=======//
Tornado.design({
//====> Tables Options <====//
tables : {
background : '#FFFFFF', //===> Default Background
padding : '15px', //===> Padding for TD/TH
headBG : '#f4f4f4', //===> tHead Background
stripedBG : '#f4f4f4', //===> Striped Row Background
border : '1px solid rgba(0,0,0, 0.1)', //===> Table Border
}
});
this list of options is not for one specific component but many components share it as design pattern like tabs and accordion, menus, popups and many other.
//======> Activate Design Options <=======//
Tornado.design({
//====> Other Components <====//
components : {
background : '#FFFFFF', //===> Background
darkerBg : '#f8f8f8', //===> Darker Background
edgeRadius : '5px', //===> Edges Radius
padding : '15px', //===> Elements Padding
shadow : 'none', //===> Components Shadow
color : 'var(--dark-color)', //===> Text Color
activeBg : 'var(--primary-color)', //===> Active Background
activeColor: 'var(--primary-reverse)', //===> Active Color
border : '1px solid rgba(0,0,0,.10)', //===> Border
},
});
this a list of all default design options available in the method.