Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

Design Options - Tornado UI

Design Options Init

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.. });

Colors Options

this a list from design options of all colors used across Tornado Ui Components and Elements that you can change easly 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
},
});

Font Options

this a list from design options of all font properties used across Tornado Ui Components and Elements that you can change easly 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:[email protected],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:[email protected];600;700'], //===> Fonts CSS Urls
//===> Font Weights <===//
normalWeight : '400', //===> Normal Font Weight
mediumWeight : '600', //===> Medium Font Weight
strongWeight : '700', //===> Bold Font Weight
}
},
});

Form Design Options

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
},
});

Table Design Options

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
}
});

Components Design

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
},
});

Default Options

this a list of all default design options available in the method.

//====> Design Options Demo <====//
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
},
//====> 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:[email protected],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:[email protected];600;700'], //===> Fonts CSS Urls
//===> Font Weights <===//
normalWeight : '400', //===> Normal Font Weight
mediumWeight : '600', //===> Medium Font Weight
strongWeight : '700', //===> Bold Font Weight
}
},
//====> 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)',
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
},
//====> 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
},
//====> 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
},
});

Theme Switcher

theme switcher is Tornado Typescript method that use the design options to create multiple themes for the user to switch between and it uses cookies to store the user choice to keep the user theme runing every time he visits the website and it works simply by creating a switching buttons with attribute data-theme and the theme object name as value look at the code below to know how method takes the theme for design options.

<div class="themes-btns">
<a href="#" class="theme-switcher" data-theme="default">Default Theme</a>
<a href="#" class="theme-switcher" data-theme="dark">Dark Theme</a>
</div>
//====> Theme Switcher <====//
Tornado.themeSwitcher('.theme-switcher', {
//====> Default Theme <====//
"default" : {
//====> 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
},
//====> 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)',
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
},
//====> 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
},
//====> 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
},
},
//====> Dark Theme <====//
"dark" : {
//====> Colors Options <====//
colors : {
//====> Body Background <====//
background : '#000410',
//====> Primary Color <====//
primary : '#4D76F2',
primaryHover : '#5F6FFE',
primaryReverse : '#FFFFFF',
//====> Secondary Color <====//
secondary : '#FA9443',
secondaryHover : '#FE892D',
secondaryReverse : '#FFFFFF',
//====> Assets Colors <====//
success : '#50C46B',
danger : '#F05151',
warning : '#F4BB0E',
info : '#50CADD',
gray : '#4B5674',
dark : '#0C1120',
disable : '#252844',
//====> Assets Light <====//
successLight : '#C1EECC',
dangerLight : '#FBBBBB',
warningLight : '#FFDD75',
infoLight : '#A6EAF5',
grayLight : '#454F6B',
darkLight : '#1D2746',
//====> Typography Colors <====//
headlines : '#556184', //===> Heads Text Color
typography : '#838DB0', //===> Text Color
lightReverse : '#000000', //===> Text Color for Light Backgrounds
darkReverse : '#FFFFFF', //===> Text Color for Colorful Backgrounds
},
//====> Form Controls Options <====//
forms : {
background : '#0F172E', //====> Background Color
darkerBG : '#182240', //====> Darker Background Color
typography : '#FFFFFF', //====> Text Color
alertColor : '#0F172E', //====> Alert Box Default BG
edgeRadius : '5px', //====> Border Radius
border : '1px solid #323D5F', //====> Controls Border
shadow : 'inset 0 0 5px rgba(0,0,0, 0.03)',
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
},
//====> Tables Options <====//
tables : {
background : '#0F172E', //===> Default Background
padding : '15px', //===> Padding for TD/TH
headBG : '#182240', //===> tHead Background
stripedBG : '#171F39', //===> Striped Row Background
border : '1px solid #323D5F', //===> Table Border
},
//====> Other Components <====//
components : {
background : '#0F172E', //===> Background
darkerBg : '#182240', //===> Darker Background
edgeRadius : '5px', //===> Edges Radius
padding : '15px', //===> Elements Padding
shadow : 'none', //===> Components Shadow
color : 'var(--gray-color)', //===> Text Color
activeBg : 'var(--primary-color)', //===> Active Background
activeColor: 'var(--primary-reverse)', //===> Active Color
border : '1px solid #323D5F', //===> Border
},
}
});

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.