CSS Variables

AdapTable uses CSS Variables in order to allow you to build your own custom themes.

There are a huge number of css variables that are available.

important

For easy identification purposes every CSS Variable starts with either --ab- or --ab__

In this page we provide some of the most commonly-used variables, together with their default value.

Base Variables

These are the 'root' CSS Variables, which are generally all that is required if providing a Custom Theme

:root {
/* Spacing */
--ab-space-0: 0px;
--ab-space-1: 4px;
--ab-space-2: 8px;
--ab-space-3: 16px;
--ab-space-4: 32px;
--ab-space-5: 64px;
--ab-space-6: 128px;
--ab-space-7: 256px;
/* Font Sizes */
--ab-font-size-0: 0.5rem; //8px for 1rem=16px
--ab-font-size-1: 0.625rem; //10px for 1rem=16px
--ab-font-size-2: 0.75rem; //12px for 1rem=16px
--ab-font-size-3: 0.875rem; //14px for 1rem=16px
--ab-font-size-4: 1rem;
--ab-font-size-5: 1.25rem; //20px for 1rem=16px
--ab-font-size-6: 1.5rem; //24px for 1rem=16px
--ab-font-size-7: 2.25rem; //36px for 1rem=16px
/* Font Family - inherit by default */
--ab__font-family: inherit;
/* Border Radius */
--ab__border-radius: var(--ab-space-1);
/* Colour Variables */
--ab-color-inputborder: var(--ab-color-primarydark);
--ab-color-inputcolor: var(--ab-color-text-on-primary);
--ab-color-error: #dc3545;
--ab-color-errorlight: #ffd3d2;
--ab-color-warn: #eb9316;
--ab-color-info: #17a2b8;
--ab-color-success: #419641;
--ab-color-accent: #07c;
--ab-color-accentlight: #dbf0ff;
--ab-color-text-on-success: white;
--ab-color-text-on-error: white;
--ab-color-text-on-info: white;
--ab-color-text-on-warn: white;
--ab-color-action-add: #2966A8;
--ab-color-action-edit: #17a2b8;
--ab-color-action-share: #eb9316;
--ab-color-action-delete: #dc3545;
--ab-color-action-clone: #419641;
--ab-color-text-on-add: white;
--ab-color-text-on-edit: white;
--ab-color-text-on-share: white;
--ab-color-text-on-delete: white;
--ab-color-text-on-clone: white;
--ab-color-defaultbackground: white;
--ab-color-text-on-defaultbackground: var(--ab-color-text-on-primary);
--ab-color-primary: #e9e9e9;
--ab-color-primarydark: #b7b7b7;
--ab-color-primarylight: #f5f5f5;
--ab-color-text-on-primary: #656565;
--ab-color-text-on-primarydark: var(--ab-color-text-on-primary);
--ab-color-secondary: #2966A8;
--ab-color-secondarydark: #015a9a;
--ab-color-secondarylight: #a9ddff;
--ab-color-text-on-secondary: #E2E2E2;
--ab-color-text-on-secondarylight: #000000;
--ab-color-blue: #419641;
--ab-color-focus: var(--ab-color-accent);
--ab-gridheader--filtered__background: var(--ab-color-primary);
/* Focus-related */
--ab-focus__box-shadow: 0 0 5px 1px var(--ab-color-accent);
--ab-focus-within__box-shadow: 0 0 5px 1px var(--ab-color-text-on-primary);
--ab-focus__outline: none;
/* Miscellaneous */
--ab-icon-fill: currentColor;
--ab-custom-scrollbar-size: 10px;
/* size of rows in virtualized list */
--ab-grid-row-height: 40px;
/* required for checking styles have been loaded - do not remove! */
--ab-loaded: 777;
}

Dashboard

Perhaps the most commonly custom-styled area of AdapTable is the Dashboard placed above the Grid.

tip

All CSS variables for the Dashboard start with --ab-dashboard

The available variables - with current defaults - are:

:root {
--ab-dashboard__background: var(--ab-color-primary);
--ab-dashboard-wrap: nowrap;
--ab-dashboard-gap-size: 3px;
--ab-dashboard-gap__background: var(--ab-color-primarylight);
--ab-dashboard__color: var(--ab-color-text-on-primary);
--ab-dashboard__border: var(--ab-color-primarydark);
--ab-dashboard-header__background: var(--ab-color-secondary);
--ab-dashboard-header__color: var(--ab-color-text-on-secondary);
--ab-dashboard-tab-drop-target__background: skyblue;
--ab-dashboard-toolbar-drag__background: lightgreen;
}

ToolPanel

The Adaptable ToolPanel is an alternative to the Dashboard generally situated at the right hand side of the grid.

The available variables - with current defaults - are:

:root {
--ab-cmp-toolpanel__width: 199px;
--ab-cmp-toolpanel-header__background: var(--ab-dashboard-header__background);
--ab-cmp-toolpanel-header__color: var(--ab-dashboard-header__color);
--ab-cmp-toolpanel-header__grid-gap: 3px;
}

Dialog

:root {
--ab-cmp-dialog__background: var(--ab-color-defaultbackground, white);
--ab-cmp-dialog__color: var(--ab-color-text-on-defaultbackground, white);
--ab-cmp-dialog-close-button__color: var(--ab-color-text-on-primary);
--ab-cmp-dialog__border-radius: var(--ab__border-radius);
--ab-cmp-dialog__min-height: 60vh;
}

Date Picker

See Date Picker for full instructions on how to style this very useful UI component.

:root {
--ab-cmp-datepicker__background: var(--ab-color-defaultbackground);
--ab-cmp-datepicker__selected-color: var(--ab-color-primarydark);
--ab-cmp-datepicker__selected-text-color: var(--ab-color-text-on-primarydark);
--ab-cmp-datepicker__selected-border-radius: 50%;
--ab-cmp-datepicker__hover-color: var(--ab-color-primarylight);
--ab-cmp-datepicker__border: 1px solid var(--ab-color-primarydark);
--ab-cmp-datepicker__font-size: var(--ab-font-size-2);
--ab-cmp-datepicker__font-family: var(--ab__font-family);
--ab-cmp-datepicker__cell-size: 30px;
}

Panel

Panels are used in AdapTable in multiple places.

:root {
--ab-cmp-panel_header__background: var(--ab-color-primary);
--ab-cmp-panel_header__font-size: var(--ab-font-size-2);
--ab-cmp-panel__font-size: var(--ab-font-size-3);
--ab-cmp-panel__border-radius: var(--ab__border-radius);
--ab-cmp-panel__padding: var(--ab-space-2);
--ab-cmp-panel__max-height: 80vh;
--ab-cmp-panel__border: 1px solid var(--ab-color-inputborder);
--ab-cmp-panel-icon__fill: var(--ab-icon-fill);
--ab-cmp-panel_body__background: var(--ab-color-defaultbackground);
--ab-cmp-panel_body__color: inherit;
--ab-cmp-panel_header__padding: var(--ab-space-2);
--ab-cmp-panel_header__color: var(--ab-color-text-on-primary);
--ab-cmp-panel_header--variant-primary__background: var(--ab-color-secondary);
--ab-cmp-panel_header--variant-primary__color: var(--ab-color-text-on-secondary);
--ab-cmp-panel_header--variant-modern__background: var(--ab-color-primary);
--ab-cmp-panel_header--variant-modern__color: var(--ab-color-text-on-primary);
--ab-cmp-panel_body--variant-modern__background: var(--ab-color-primarylight);
}

UI Blocks

AdapTable provides a few UI 'Blocks' for different use cases and scenarios.

Help Block

Help Blocks are used to provide text instructions or help, e.g. in Wizards

:root {
--ab-cmp-help-block__padding: var(--ab-space-2);
--ab-cmp-help-block__border-radius: var(--ab__border-radius);
--ab-cmp-help-block__color: var(--ab-color-text-on-primary);
--ab-cmp-help-block__background: var(--ab-color-primarylight);
}

Error Block

The Error Block is displayed when there is an input error, e.g. in the Layout Wizard when no Layout Name is provided.

:root {
--ab-cmp-error-box__padding: var(--ab-space-3);
--ab-cmp-error-box__border-radius: var(--ab__border-radius);
--ab-cmp-error-box__color: var(--ab-color-text-on-error);
--ab-cmp-error-box__background: var(--ab-color-error);
}

Code Block

The Code Block is used for displaying code in the Adaptable UI

:root {
--ab-cmp-code-block__padding: var(--ab-space-1);
--ab-cmp-code-block__border-radius: var(--ab__border-radius);
--ab-cmp-code-block__color: var(--ab-color-text-on-primary);
--ab-cmp-code-block__background: var(--ab-color-primary);
}

UI Controls

AdapTable provides a number of hand-crafted controls which are fully stylable.

Simple Button

The Simple Button is used to create Adaptable Buttons

:root {
--ab-cmp-simple-button__padding: var(--ab-space-1) var(--ab-space-1);
--ab-cmp-simple-button__border-radius: var(--ab__border-radius);
--ab-cmp-simple-button--outlined__background: var(--ab-color-defaultbackground);
--ab-cmp-simple-button--outlined__border: 1px solid var(--ab-color-inputborder);
--ab-cmp-simple-button__font-size: var(--ab-font-size-2);
--ab-cmp-simple-button__font-family: var(--ab__font-family);
--ab-cmp-simple-button__height: 20px;
--ab-cmp-simple-button__width: 20px;
}

Dropdown Button

The Dropdown Button is used in many places in AdapTable where a dropdown is required

note

It is used in preference to the standard dropdown control as its fully stylable

:root {
--ab-cmp-dropdownbutton-list__border: none;
--ab-cmp-dropdownbutton-list__background: var(--ab-color-primarylight);
--ab-cmp-dropdownbutton-list-item__padding: var(--ab-space-2);
--ab-cmp-dropdownbutton-list-item-hover__background: var(--ab-color-primary);
--ab-cmp-dropdownbutton-list-item-hover__color: var(--ab-color-text-on-primary);
--ab-cmp-dropdownbutton-list-item__color: var(--ab-color-text-on-primary);
--ab-cmp-dropdownbutton-list__z-index: 1000;
--ab-cmp-dropdownbutton-list__border-radius: var(--ab__border-radius);
--ab-cmp-dropdownbutton-list__box-shadow: 4px 5px 11px -5px rgba(0, 0, 0, .2), -4px 6px 5px 0 rgba(0, 0, 0, .14), 5px 3px 5px 0 rgba(0, 0, 0, .12);
--ab-cmp-dropdownbutton-list-separator__border: 1px solid var(--ab-color-primarydark);
}

Toggle Button

The Toggle Button is used in AdapTable for setting true / false alternatives, e.g. when setting IsSuspended

:root {
--ab-cmp-toggle-button__background: #ccc;
--ab-cmp-toggle-button--active__background: var(--ab-color-success);
}

Input

These are the styles used by AdapTable when creating an input control

:root {
--ab-cmp-input__padding: var(--ab-space-2);
--ab-cmp-input__color: var(--ab-color-inputcolor);
--ab-cmp-input__background: var(--ab-color-defaultbackground);
--ab-cmp-input__border-radius: var(--ab__border-radius);
--ab-cmp-input__border: 1px solid var(--ab-color-inputborder);
--ab-cmp-input--disabled__background: var(--ab-color-primarylight);
--ab-cmp-input__font-size: var(--ab-font-size-2);
--ab-cmp-input--placeholder__color: var(--ab-color-text-on-defaultbackground);
--ab-cmp-input__font-family: var(--ab__font-family);
--ab-cmp-input--placeholder__opacity: 0.6;
}

Checkbox

AdapTable provides a custom, styleable CheckBox

:root {
--ab-cmp-checkbox__border-color: var(--ab-color-inputborder);
--ab-cmp-checkbox__background: var(--ab-cmp-input__background);
--ab-cmp-checkbox--checked__background: var(--ab-color-focus);
--ab-cmp-checkbox--check-size: 16px;
--ab-cmp-checkbox--check__color: white;
--ab-cmp-checkbox--check-indeterminate__color: var(--ab-color-focus);
--ab-cmp-checkbox--check-indeterminate-radius: 2px;
}

Tooltip

Tooltips are applied in a few places in Adaptable and use these styles:

:root {
--ab-cmp-tooltip__opacity: 0.96;
--ab-cmp-tooltip__background: var(--ab-color-primary);
--ab-cmp-tooltip__color: var(--ab-color-text-on-primary);
--ab-cmp-tooltip__border: solid 1px var(--ab-color-inputborder);
--ab-cmp-tooltip__font-size: var(--ab-font-size-2);
}

Tabs

Tabs are used in AdapTable in multiple places

:root {
--ab-cmp-tabs__padding: var(--ab-space-2);
--ab-cmp-tabs-strip__background: var(--ab-color-defaultbackground);
--ab-cmp-tabs-active__background: var(--ab-color-primarylight);
}

File Droppable

The File Droppable control is used when files need to be selected (e.g. in the No Code Plugin)

:root {
--ab-cmp-file-droppable__padding: var(--ab-space-5);
--ab-cmp-file-droppable__margin: var(--ab-space-1);
--ab-cmp-file-droppable__background: var(--ab-color-primary);
--ab-cmp-file-droppable__color: var(--ab-color-text-on-primary);
--ab-cmp-file-droppable__outline: 2px dashed var(--ab-cmp-file-droppable__color);
--ab-cmp-file-droppable__outline-offset: -10px;
--ab-cmp-file-droppable--drag-over__background: var(--ab-color-secondary);
--ab-cmp-file-droppable--drag-over__color: var(--ab-color-text-on-secondary);
--ab-cmp-file-droppable--drag-over__outline-offset: -20px;
--ab-cmp-file-droppable--drag-over__outline: 2px dashed var(--ab-cmp-file-droppable--drag-over__color);
}

Field Wrap

:root {
--ab-cmp-field-wrap__background: var(--ab-color-defaultbackground);
--ab-cmp-field-wrap__fill: var(--ab-color-inputcolor);
--ab-cmp-field-wrap__border-radius: var(--ab-cmp-input__border-radius);
}

Using SASS

When using sass, in order to use sass variables as values for css properties, you have to use interpolation:

$theme-color: #fea7ff;
html.ab--theme-light {
--ab-cmp-dashboardpanel_header__background: #{$theme-color}; /* use interpolation ! */
}

More Information