About
Themes
Foundations
Components
Utilities
CSS Variables
List of css variables used in our css

Color variables

colors     variables
Primary color
color of your theme		 page
header
footer		 --TOKEN_COLOR1
--HEADERTOKEN_COLOR1
--FOOTERTOKEN_COLOR1
Primary darker 5% page
header
footer		 --TOKEN_COLOR1-DARK-5
--HEADERTOKEN_COLOR1-DARK-5
--FOOTERTOKEN_COLOR1-DARK-5
Primary darker 9% page
header
footer		 --TOKEN_COLOR1-DARK-9
--HEADERTOKEN_COLOR1-DARK-9
--FOOTERTOKEN_COLOR1-DARK-9
Primary darker 10% page
header
footer		 --TOKEN_COLOR1-DARK-10
--HEADERTOKEN_COLOR1-DARK-10
--FOOTERTOKEN_COLOR1-DARK-10
Primary darker 15% page
header
footer		 --TOKEN_COLOR1-DARK-15
--HEADERTOKEN_COLOR1-DARK-15
--FOOTERTOKEN_COLOR1-DARK-15
Primary darker 16% page
header
footer		 --TOKEN_COLOR1-DARK-16
--HEADERTOKEN_COLOR1-DARK-16
--FOOTERTOKEN_COLOR1-DARK-16
Primary darker 20% page
header
footer		 --TOKEN_COLOR1-DARK-20
--HEADERTOKEN_COLOR1-DARK-20
--FOOTERTOKEN_COLOR1-DARK-20
Primary darker 26% page
header
footer		 --TOKEN_COLOR1-DARK-26
--HEADERTOKEN_COLOR1-DARK-26
--FOOTERTOKEN_COLOR1-DARK-26
Primary darker 34% page
header
footer		 --TOKEN_COLOR1-DARK-34
--HEADERTOKEN_COLOR1-DARK-34
--FOOTERTOKEN_COLOR1-DARK-34
Primary darker 40% page
header
footer		 --TOKEN_COLOR1-DARK-40
--HEADERTOKEN_COLOR1-DARK-40
--FOOTERTOKEN_COLOR1-DARK-40
Primary darker 43% page
header
footer		 --TOKEN_COLOR1-DARK-43
--HEADERTOKEN_COLOR1-DARK-43
--FOOTERTOKEN_COLOR1-DARK-43
Primary lighten 5% page
header
footer		 --TOKEN_COLOR1-LIGHT-5
--HEADERTOKEN_COLOR1-LIGHT-5
--FOOTERTOKEN_COLOR1-LIGHT-5
Primary lighten 9% page
header
footer		 --TOKEN_COLOR1-LIGHT-9
--HEADERTOKEN_COLOR1-LIGHT-9
--FOOTERTOKEN_COLOR1-LIGHT-9
Primary lighten 10% page
header
footer		 --TOKEN_COLOR1-LIGHT-10
--HEADERTOKEN_COLOR1-LIGHT-10
--FOOTERTOKEN_COLOR1-LIGHT-10
Primary lighten 15% page
header
footer		 --TOKEN_COLOR1-LIGHT-15
--HEADERTOKEN_COLOR1-LIGHT-15
--FOOTERTOKEN_COLOR1-LIGHT-15
Primary lighten 16% page
header
footer		 --TOKEN_COLOR1-LIGHT-16
--HEADERTOKEN_COLOR1-LIGHT-16
--FOOTERTOKEN_COLOR1-LIGHT-16
Primary lighten 20% page
header
footer		 --TOKEN_COLOR1-LIGHT-20
--HEADERTOKEN_COLOR1-LIGHT-20
--FOOTERTOKEN_COLOR1-LIGHT-20
Primary lighten 26% page
header
footer		 --TOKEN_COLOR1-LIGHT-26
--HEADERTOKEN_COLOR1-LIGHT-26
--FOOTERTOKEN_COLOR1-LIGHT-26
Primary lighten 34% page
header
footer		 --TOKEN_COLOR1-LIGHT-34
--HEADERTOKEN_COLOR1-LIGHT-34
--FOOTERTOKEN_COLOR1-LIGHT-34
Primary lighten 40% page
header
footer		 --TOKEN_COLOR1-LIGHT-40
--HEADERTOKEN_COLOR1-LIGHT-40
--FOOTERTOKEN_COLOR1-LIGHT-40
Primary lighten 43% page
header
footer		 --TOKEN_COLOR1-LIGHT-43
--HEADERTOKEN_COLOR1-LIGHT-43
--FOOTERTOKEN_COLOR1-LIGHT-43
Primary color RGB text 0, 189, 214 page
header
footer		 --TOKEN_COLOR1_RGB
--HEADERTOKEN_COLOR1_RGB
--FOOTERTOKEN_COLOR1_RGB

Button variables

To simplify button customization, you can use the following variables to easily modify your themes.


Button radius

  size variables
big --TOKEN-BIG-BUTTON-BORDER-RADIUS
medium --TOKEN-MEDIUM-BUTTON-BORDER-RADIUS


Big button primary


properties states variables
color


normal
hover
active		 --TOKEN-BIG-BUTTON-PRIMARY-COLOR
--TOKEN-BIG-BUTTON-PRIMARY-HOVER-COLOR
--TOKEN-BIG-BUTTON-PRIMARY-ACTIVE-COLOR
border


normal
hover
active		 --TOKEN-BIG-BUTTON-PRIMARY-BORDER
--TOKEN-BIG-BUTTON-PRIMARY-HOVER-BORDER
--TOKEN-BIG-BUTTON-PRIMARY-ACTIVE-BORDER
background


normal
hover
active		 --TOKEN-BIG-BUTTON-PRIMARY-BACKGROUND
--TOKEN-BIG-BUTTON-PRIMARY-HOVER-BACKGROUND
--TOKEN-BIG-BUTTON-PRIMARY-ACTIVE-BACKGROUND


Big button ghost


properties states variables
color


normal
hover
active		 --TOKEN-BIG-BUTTON-OUTLINE-COLOR
--TOKEN-BIG-BUTTON-OUTLINE-HOVER-COLOR
--TOKEN-BIG-BUTTON-OUTLINE-ACTIVE-COLOR
border


normal
hover
active		 --TOKEN-BIG-BUTTON-OUTLINE-BORDER
--TOKEN-BIG-BUTTON-OUTLINE-HOVER-BORDER
--TOKEN-BIG-BUTTON-OUTLINE-ACTIVE-BORDER
background


normal
hover
active		 --TOKEN-BIG-BUTTON-OUTLINE-BACKGROUND
--TOKEN-BIG-BUTTON-OUTLINE-HOVER-BACKGROUND
--TOKEN-BIG-BUTTON-OUTLINE-ACTIVE-BACKGROUND


Big button outline iverse


properties states variables
color


normal
hover
active		 --TOKEN-BIG-BUTTON-OUTLINE-INVERSE-COLOR
--TOKEN-BIG-BUTTON-OUTLINE-INVERSE-HOVER-COLOR
--TOKEN-BIG-BUTTON-OUTLINE-INVERSE-ACTIVE-COLOR
border


normal
hover
active		 --TOKEN-BIG-BUTTON-OUTLINE-INVERSE-BORDER
--TOKEN-BIG-BUTTON-OUTLINE-INVERSE-HOVER-BORDER
--TOKEN-BIG-BUTTON-OUTLINE-INVERSE-ACTIVE-BORDER
background


normal
hover
active		 --TOKEN-BIG-BUTTON-OUTLINE-INVERSE-BACKGROUND
--TOKEN-BIG-BUTTON-OUTLINE-INVERSE-HOVER-BACKGROUND
--TOKEN-BIG-BUTTON-OUTLINE-INVERSE-ACTIVE-BACKGROUND


Medium button primary


properties states variables
color


normal
hover
active		 --TOKEN-MEDIUM-BUTTON-PRIMARY-COLOR
--TOKEN-MEDIUM-BUTTON-PRIMARY-HOVER-COLOR
--TOKEN-MEDIUM-BUTTON-PRIMARY-ACTIVE-COLOR
border


normal
hover
active		 --TOKEN-MEDIUM-BUTTON-PRIMARY-BORDER
--TOKEN-MEDIUM-BUTTON-PRIMARY-HOVER-BORDER
--TOKEN-MEDIUM-BUTTON-PRIMARY-ACTIVE-BORDER
background


normal
hover
active		 --TOKEN-MEDIUM-BUTTON-PRIMARY-BACKGROUND
--TOKEN-MEDIUM-BUTTON-PRIMARY-HOVER-BACKGROUND
--TOKEN-MEDIUM-BUTTON-PRIMARY-ACTIVE-BACKGROUND


Medium button ghost


properties states variables
color


normal
hover
active		 --TOKEN-MEDIUM-BUTTON-GHOST-COLOR
--TOKEN-MEDIUM-BUTTON-GHOST-HOVER-COLOR
--TOKEN-MEDIUM-BUTTON-GHOST-ACTIVE-COLOR
border


normal
hover
active		 --TOKEN-MEDIUM-BUTTON-GHOST-BORDER
--TOKEN-MEDIUM-BUTTON-GHOST-HOVER-BORDER
--TOKEN-MEDIUM-BUTTON-GHOST-ACTIVE-BORDER
background


normal
hover
active		 --TOKEN-MEDIUM-BUTTON-GHOST-BACKGROUND
--TOKEN-MEDIUM-BUTTON-GHOST-HOVER-BACKGROUND
--TOKEN-MEDIUM-BUTTON-GHOST-ACTIVE-BACKGROUND


Medium button outline iverse


properties states variables
color


normal
hover
active		 --TOKEN-MEDIUM-BUTTON-OUTLINE-INVERSE-COLOR
--TOKEN-MEDIUM-BUTTON-OUTLINE-INVERSE-HOVER-COLOR
--TOKEN-MEDIUM-BUTTON-OUTLINE-INVERSE-ACTIVE-COLOR
border


normal
hover
active		 --TOKEN-MEDIUM-BUTTON-OUTLINE-INVERSE-BORDER
--TOKEN-MEDIUM-BUTTON-OUTLINE-INVERSE-HOVER-BORDER
--TOKEN-MEDIUM-BUTTON-OUTLINE-INVERSE-ACTIVE-BORDER
background


normal
hover
active		 --TOKEN-MEDIUM-BUTTON-OUTLINE-INVERSE-BACKGROUND
--TOKEN-MEDIUM-BUTTON-OUTLINE-INVERSE-HOVER-BACKGROUND
--TOKEN-MEDIUM-BUTTON-OUTLINE-INVERSE-ACTIVE-BACKGROUND

Webparts variables

You can use the following variables to change the border radius and box shadow of your webparts and cards.

Look, from now, you can easily manage your apps in Orion!
Communication Paris
07/17/2020
Look, from now, you can easily manage your apps in Orion!
We've added a new feature to pin your apps as favorites. Let's discover how it works!
MOD Administrator
0
Look, from now, you can easily manage your apps in Orion!
Communication Paris
07/17/2020
Look, from now, you can easily manage your apps in Orion!
We've added a new feature to pin your apps as favorites. Let's discover how it works!
MOD Administrator
0


properties class variables
border-radius .pow-webpart-border-radius --TOKEN-WEBPART-BORDER-RADIUS
box-shadow .pow-webpart-box-shadow --TOKEN-WEBPART-BOX-SHADOW

Inputs varialbes

The following variables can be used to modify the border radius of form elements

  variables
border-radius --TOKEN-INPUT-BORDER-RADIUS