Skip to main content

​
Variables

Customize your booking engine colors and styling with CSS variables. For most cases, you only need to define one color variable and everything else is generated automatically.
⚡ Quick setup: Define --corporative-color and you’re done. All other colors adapt automatically.

​
Quick Start

1

Create CSS file

Create linkage-variables.css with your brand color
2

Include before script

Add the CSS file before the Linkage Direct script

​
Basic Example

/* linkage-variables.css */
:root {   
  --corporative-color: #BF993F; /* Your brand's primary color */
}

<!-- Include in your HTML -->
<link rel="stylesheet" href="path/to/linkage-variables.css" type="text/css" />

​
Main Variables

​
Corporate Color

--corporative-color

Type: Color hex value | Default: #2574A9The core customization variable. Set this and the entire color palette adapts automatically.
When you set --corporative-color, these colors are automatically generated:
Generated VariablePurposeExample
--mirai-ui-accentAccent color (same as corporate)#2574A9
--mirai-ui-accent-darkDarker shade for hover states#174868
--mirai-ui-accent-lightLighter shade for backgrounds#669EC3
--mirai-ui-accent-borderBorder color variations#A8C7DD
--mirai-ui-accent-backgroundBackground tint variations#EDF3F8
If you define --corporative-color, the generated palette values cannot be modified individually. This ensures visual consistency and accessibility.

​
Component Styling

​
Primary Buttons

VariablePurposeDefault
--mirai-ui-button-backgroundButton background#2574A9
--mirai-ui-button-background-activeBackground on hover#174868
--mirai-ui-button-colorButton text color#FFFFFF
--mirai-ui-button-color-activeText color on hover#FFFFFF

​
Secondary Buttons

VariablePurposeDefault
--mirai-ui-button-secondary-background-activeBackground on hover/active#EDF3F8
--mirai-ui-button-secondary-colorButton text color#2574A9
--mirai-ui-button-secondary-color-activeText color on hover/active#174868

​
Complete Example

/* linkage-variables.css */
:root {
  /* Primary Brand Color */
  --corporative-color: #BF993F;
  
  /* Primary Button Customization */
  --mirai-ui-button-background: #BF993F;
  --mirai-ui-button-background-active: #174868;
  --mirai-ui-button-color: #FFFFFF;
  --mirai-ui-button-color-active: #FFFFFF;
  
  /* Secondary Button Customization */
  --mirai-ui-button-secondary-color: #BF993F;
  --mirai-ui-button-secondary-color-active: #174868;
  --mirai-ui-button-secondary-background-active: #EDF3F8;
  
  /* Finder Component */
  --mirai-finder-background: #FFFFFF;
  --mirai-finder-border: #DDDDDD;
  --mirai-finder-border-radius: 4px;
  --mirai-finder-padding: 8px;
  --mirai-finder-gap: 8px;
  
  /* Finder Button */
  --mirai-finder-button-background: #BF993F;
  --mirai-finder-button-background-active: #174868;
  --mirai-finder-button-color: #FFFFFF;
  --mirai-finder-button-color-active: #FFFFFF;
  --mirai-finder-button-border-radius: 4px;
  --mirai-finder-button-font-family: "Arial", sans-serif;
  --mirai-finder-button-font-weight: 500;
  --mirai-finder-button-font-size: 14px;
  
  /* Finder Fields */
  --mirai-finder-field-height: 52px;
  --mirai-finder-field-border-color: #DDDDDD;
  --mirai-finder-field-border-style: solid;
  --mirai-finder-field-border-width: 0px;
  --mirai-finder-field-border-radius: 4px;
  --mirai-finder-field-border-active: #BF993F;
  --mirai-finder-field-separator-color: #DDDDDD;
  --mirai-finder-field-icon-color: #333333;
  
  /* Session Component */
  --mirai-session-color: #333333;
  --mirai-session-icon-color: #BF993F;
  --mirai-session-color-active: #BF993F;
  --mirai-session-icon-color-active: #174868;
  
  /* General UI */
  --mirai-ui-border-radius: 4px;
  --mirai-ui-modal-layer: 10000;
}

​
Additional Variables

VariablePurposeDefault
--mirai-ui-border-radiusBorder radius for UI elements4px
--mirai-ui-modal-layerZ-index for modal windows10000
💬 Need help with styling? Contact us at [email protected]