Theme Variables

Accordion

Following variables are available for customization:

Variable	Default value	Description
$ace-lib-accordion-border-on-focus	1px solid #6200ee	Sets the border property for accordion in focus mode.
$ace-lib-accordion-header-background-color	transparent	Sets the background color of header of accordion.
$ace-lib-accordion-header-background-on-expansion	transparent	Sets the background color of header of accordionin expanded mode.

Each of the above variable can be assigned with different values as follows:

html
$ace-lib-accordion-border-on-focus: 2px dashed red
$ace-lib-accordion-header-background-on-expansion: #acacac;

Autocomplete

Following variables are available for customization:

Variable	Default value	Description
$ace-lib-autocomplete-border-color	#dee2e6	Sets the border color for autocomplete.
$ace-lib-autocomplete-box-shadow	0 0.5rem 1rem rgba($black, 0.15)	Sets the box shadow for autocomplete.
$ace-lib-autocomplete-background-color	#fff	Sets the background color for autocomplete.
$ace-lib-autocomplete-option-color	#6200ee	Sets the color of each option in autocomplete.
$ace-lib-autocomplete-option-background-color	#6200ee	Sets the background color of each option in autocomplete.
$ace-lib-autocomplete-option-user-image-background	#6c757d	Sets the user image background of each option for autocomplete.
$ace-lib-autocomplete-active-user-image-background	transparent	Sets the user image background of each option for autocomplete in active mode.

You can assign different values to each of the above variables as follows:

html
$ace-lib-autocomplete-background-color : #acacac;

$ace-lib-autocomplete-border-color: #fff;

Buttons

It is essential to apply the .ace-btn css class to all buttons that are to be styled using the ace-lib-theme.

Following variables are available for buttons:

Variable	Default value	Description
$ace-lib-btn-padding	0.5rem 0.75rem	padding for the button. The value should be valid as per the css standards (`top right bottom left` pattern).
$ace-lib-btn-white-space	null	White space definition for the button. Set to `nowrap` to prevent text wrapping.
$ace-lib-btn-line-height	1.5	line-height property value.
$ace-lib-btn-border-width	1px	Border width property for the button.
$ace-lib-btn-disabled-opacity	0.65	Opacity factor applied to the disabled button.
$ace-lib-btn-border-radius	0	Allows for customizing the radius of the button independently from global border radius.

Note: The button variant classes are available for only those elements which has the `.ace-btn` class attached to it. Darker shade of the assigned color variant is used for the hover and focused states. The text color is calculated in contrast with the assigned background color. If the `$theme-colors` variable contains more number of custom color maps, corresponding utility css classes are generated.

Button variants

Following button variants are available for buttons:

1. Base variants: Creates a simple button.

class	Default value	Description
.ace-primary	#6200ee	The button base variant with the primary color.
.ace-secondary	#03dac6	The button base variant with the secondary color.
.ace-error	#b00020	The button base variant with the error color.
.ace-light	#f8f9fa	The button base variant with the light color. Note: This variant color is visible only on a dark background.
.ace-dark	#343a40	The button base variant with the dark color. Note: This variant color is visible only on a light background.

Sample usage

html
    <button class="ace-btn ace-primary">click me </button>

    <!-- If the '$theme-colors' map contains a color map named, "purple"-->
    <button class="ace-btn ace-purple">click me </button> 

    

2. Outline variants: Creates a button with an outline.

class	Default value	Description
.ace-outline-primary	#6200ee	Outline variant with the primary color.
.ace-outline-secondary	#03dac6	Outline variant with the secondary color.
.ace-outline-error	#b00020	Outline variant with the error color.
.ace-outline-light	#f8f9fa	Outline variant with the light color. Note: This variant color is visible only on a dark background.
.ace-outline-dark	#343a40	Outline variant with the dark color. Note: This variant color is visible only on a light background.

Sample usage

html
    <button class="ace-btn ace-outline-primary">click me </button>

    <!-- If the '$theme-colors' map contains a color map named, "purple"-->
    <button class="ace-btn ace-outline-purple">click me </button> 
    

Checkbox

Following variables are available for customization:

Variable	Default value	Description
$ace-lib-checkbox-border-width	1px	Sets the border thickness for check box.
$ace-lib-checkbox-color	#03dac6	Sets the color property for the check box. By default the secondary color from the `$theme-colors` variable is used.

You can assign different values to each of the above variables as follows:

html
$ace-lib-checkbox-border-width: 2px;

$ace-lib-checkbox-color: #fff;

Chip

Following variables are available for customization:

Variable	Default value	Description
$ace-lib-chip-background-color	#6200ee	Sets the background color of chip.
$ace-lib-chip-border-width	0 0 0 0	Sets the border thickness of a chip.
$ace-lib-chip-border-color	#dee2e6	Sets the border color of a chip.
$ace-lib-chip-border-radius	16px	Sets the border radius property of a chip.
$ace-lib-chip-hover-focus-background-color	#6200ee	Sets the background color of chip in hover mode.
$ace-lib-chip-hover-focus-color	#6200ee	Sets the color of chip in hover mode.

You can assign different values to each of the above variables as follows:

html
$ace-lib-chip-background-color: map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map.

$ace-lib-chip-border-radius: 15%;

Colors

Following color variables are available:

$theme-colors

It is a colormaps. For every color mentioned in this map, corresponding utility css color classes are generated.

The default map contains the following color Map:

html
$theme-colors: (
    "primary": #6200ee,
    "secondary": #03dac6,
    "error": #b00020,
    "light": #f8f9fa,
    "dark": #343a40
  );

The default $theme-colors variable contains only 5 colors, but you can add more number of such colors to this map. See the following example:

html
$theme-colors: (
    "primary": #6200ee,
    "secondary": #03dac6,
    "error": #b00020,
    "light": #f8f9fa,
    "dark": #343a40,
    "blue-gray":#607D8B,
    "blue-color":#03A9F4,
    "purple":#9C27B0
  );

You can access the `$theme-colors` map values as shown here:

html
map-get($theme-colors, "purple");

Utility color classes for $theme-colors map

Separate color utility classes are generated for every single color map present in the `$theme-colors` variable.

Following color utility classes are available:

1. Background colors: The background color utility classes are prefixed with ace-bg-. You can use this to style any elements in the page.

   Following background utility colors are available by default:

class	Default value	Description
.ace-bg-primary	#6200ee	Use this to highlight the background of any element with the primary color.
.ace-bg-secondary	#03dac6	Use this to highlight the background of any element with the secondary color.
.ace-bg-error	#b00020	Use this to highlight the background of any element with the error color.
.ace-bg-light	#f8f9fa	Use this to highlight the background of any element with the light color.
.ace-bg-dark	#343a40	Use this to highlight the background of any element with the dark color.

Note: Any colors added to the $theme-colors variable have a corresponding background color class.

Sample usage:

html
        <div class="ace-bg-primary">.ace-bg-primary</div>
    

2. Text colors: The text color utility classes are prefixed with ace-text-.

   Following text utility colors are available by default:

class	Default value	Description
.ace-text-primary	#6200ee	Use this to highlight the text content with the primary color.
.ace-text-secondary	#03dac6	Use this to highlight the text content with the secondary color.
.ace-text-error	#b00020	Use this to highlight the text content with the error color.
.ace-text-light	#f8f9fa	Use this to highlightthe text content with the light color.
.ace-text-dark	#343a40	Use this to highlight the text content with the dark color.

Note: Any colors you add to the $theme-colors variable will have a corresponding text color class.

Sample usage:

html
        <p class="ace-text-primary">.ace-text-primary</p>
    

Datepicker

Following variables are available for customization:

Variable	Default value	Description
$ace-lib-datepicker-background-color	#fff	Sets the background color for date-picker.
$ace-lib-datepicker-border-width	1px	Sets the border thickness for datepicker.
$ace-lib-datepicker-border-color	#dee2e6	Sets the border color for datepicker.
$ace-lib-datepicker-control-btn-background-color	#fff	Sets the background-color for the datepicker.
$ace-lib-datepicker-btn-outline-style	1px auto #6200ee	Sets the outline property for the datepicker.
$ace-lib-datepicker-control-btn-border-radius	0	Sets the border radius of control button for the datepicker.
$ace-lib-datepicker-table-cell-radius	0	Sets the cell radius property for the datepicker.
$ace-lib-datepicker-table-header-color	#212529	Sets the header color property for the datepicker.
$ace-lib-datepicker-table-header-font-weight	400	Sets the font weight property of header for the datepicker.
$ace-lib-datepicker-date-focus-background-color	#343a40	Sets the focused cell background color for the datepicker.
$ace-lib-datepicker-date-selected-background-color	#6200ee	Sets the selected cell background color for the datepicker.

You can assign different values to each of the above variables as follows:

html
$ace-lib-datepicker-date-focus-background-color : map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map.

$ace-lib-datepicker-border-width: 2px;

Dialog

Following variables are available for customization:

Variable	Default value	Description
$ace-lib-dialog-title-font-size	1.5rem	Sets the font size property for the title in a dialog.
$ace-lib-dialog-title-line-height	1.5	Sets the line height for the title in a dialog.
$ace-lib-dialog-title-close-button-color	#212529	Sets the text color of close button.
$ace-lib-dialog-title-close-button-color-focus	#6200ee	Sets the text color of close button in focus mode.
$ace-lib-dialog-actions-border-width	1px	Sets the border thickness of dialog action section.
$ace-lib-dialog-actions-border-radius	0	Sets the border radius of the dialog action section.
$ace-lib-dialog-actions-primary-color	#6200ee	Sets the primary color property for the action section.
$ace-lib-dialog-actions-primary-color-hover	#6211ee	Sets the primary color property in hover mode for the action section.
$ace-lib-dialog-actions-secondary-color	#6211ee	Sets the secondary color property for the action section.
$ace-lib-dialog-actions-cancel-color	#343a40	Sets the text color for the cancel button.

You can assign different values to each of the above variables as follows:

html
$ace-lib-dialog-title-close-button-color: map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map.

$ace-lib-dialog-actions-border-width: 5px;

Divider

Following variable is available for customization:

Variable	Default value	Description
$ace-lib-divider-color	#dee2e6	Sets the color of divider.

You can assign different values to each of the above variables as follows:

html
$ace-lib-divider-color: map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map.

Global variables

Following variables are available for customization:

Variable	Default value	Description
$body-bg	#fff	Sets the background color for the page.
$body-color	#212529	Sets the text color for the page.
$link-color	#6200ee	Sets the text color for all the links in the page.
$link-decoration	none	Sets the 'text-decorarion' property value for the link.
$link-hover-color	#6211ee	Sets the hover color for all the links in a page.
$link-hover-decoration	underline	Sets the 'text-decoration' value for the links in the hover state.

You can assign different values to each of the above variables as follows:

html
$body-bg : #ababab;

$body-color: #fff;

Input

Following date picker variables are available for customization:

Variable	Default value	Description
$ace-lib-input-label-font-weight	400	Sets the label font weight for the input field.
$ace-lib-input-field-border-width	1px	Sets the border thickness for the input field.
$ace-lib-input-field-border-color	#dee2e6	Sets the border color for the input field.
$ace-lib-input-field-background-color	#fff	Sets the background-color property for the input field.
$ace-lib-input-field-text-color	#212529	Sets the text-color property for the input field.
$ace-lib-input-field-disabled-background-color	#f8f9fa	Sets the background-color property for the input field in disabled state.
$ace-lib-input-field-background-color-focus	#f8f9fa	Sets the background-color property for the input field in focus state.
$ace-lib-input-field-border-color-focus	#6200ee	Sets the focused border color property for the input field.
$ace-lib-input-field-border-radius	0	Sets the border radius property for the input field.
$ace-lib-input-field-placeholder-color	#212529	Sets the placeholder text color for the input field.
$ace-lib-input-field-error-border-color	#b00020	Sets the border color for the input field in the error state.
$ace-lib-input-field-error-text-color	#b00020	Sets the text color for the input field in the error state.
$ace-lib-input-field-error-font-size	85%	Sets the font size property for the input field in the error state.

You can assign different values to each of the above variables as follows:

html
$ace-lib-input-field-border-color : map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map.

$ace-lib-input-field-error-font-size: 18px;

Menu

Following variables are available for customization:

Variable	Default value	Description
$ace-lib-menu-border-color	#dee2e6	Sets the border color of menu list item.
$ace-lib-menu-box-shadow	0 0.5rem 1rem rgba(#000, 0.15)	Sets the box shadow property of menu list item.
$ace-lib-menu-background-color	#fff	Sets the background color of menu item.
$ace-lib-menu-hover-background-color	#6200ee	Sets the background color of menu item in the hover mode.
$ace-lib-menu-hover-color	#6200ee	Sets the color of menu item in the hover mode.

You can assign different values to each of the above variables as follows:

html
$ace-lib-menu-border-color: map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map.

$ace-lib-menu-hover-color: #00ff00;

Paginator

Following variables are available for customization:

Variable	Default value	Description
$ace-lib-paginator-button-color	#6200ee	Sets the button color for paginator.
$ace-lib-paginator-button-color-hover	#6211ee	Sets the button color in the hover mode for paginator.
$ace-lib-paginator-button-disabled-opacity	0.65	Sets the disabled-opacity property for the paginator.

You can assign different values to each of the above variables as follows:

html
$ace-lib-paginator-button-color : map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map.

$ace-lib-paginator-button-disabled-opacity: 0.5;

Progressbar

Following variables are available for customization:

Variable	Default value	Description
$ace-lib-progressbar-complete-color	#6200ee	Sets the color for the completed part of the progressbar.
$ace-lib-progressbar-buffer-color	#6211ee	Sets the color for the buffered part of the progressbar.

You can assign different values to each of the above variables as follows:

html
$ace-lib-progressbar-complete-color: map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map.

$ace-lib-progressbar-buffer-color: #00ff00;

Radio Button

Following variables are available for customization:

Variable	Default value	Description
$ace-lib-radio-button-border-width	1px	Sets the border thickness for the radio button.
$ace-lib-radio-button-color	#03dac6	Sets the color property for the radio button.

You can assign different values to each of the above variables as follows:

html
$ace-lib-radio-button-border-width : 2px;

$ace-lib-radio-button-color: #fff;

Tables

Following variables are available for customization:

Variable	Default value	Description
$ace-lib-table-cell-padding	0.25rem	Tabel cell padding.
$ace-lib-table-select-cell-width	0	Select column width. This is applicable only for the column with check boxes.
$ace-lib-table-color	#212529	The text color inside the table.
$ace-lib-table-bg	null	Background color for the table.
$ace-lib-table-accent-bg	rgba(#000, 0.05)	Background color for the stripped rows. Applicable only on `.ace-table-striped` applied table.
$ace-lib-table-hover-color	#212529	Text color for the hovered row. Applicable only for `.ace-table-hover` applied table.
$ace-lib-table-hover-bg	rgba(#000, 0.075)	Background color for the stripped rows. Applicable only for `.ace-table-hover` applied table.
$ace-lib-table-border-width	1px	Border width for the table cells. Applicable only for `.ace-table-bordered` applied table.
$ace-lib-table-border-color	#dee2e6	Border color for the table. Applicable only for `.ace-table-bordered` applied table.
$ace-lib-table-head-bg	#e9ecef	Table header background color.
$ace-lib-table-head-color	#495057	Table header text color.
$ace-lib-table-striped-order	odd	The row order selector config for `.ace-table-striped` applied table.

You can assign different values to each of the above variables as follows:

html
$ace-lib-table-head-bg : map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map.

$ace-lib-table-border-width: 2px;

Table utility classes

Classes	Description
.ace-table-bordered	Adds borders all around the table and between all the columns.
.ace-table-borderless	Removes borders all around the table and between all the columns.
.ace-table-striped	Applies Zebra-striping effect.
.ace-table-hover	Placed here since it has to come after the potential zebra striping.

Tablist

Following variables are available for customization:

Variable	Default Value	Description
$ace-lib-tablist-header-border-width	0 0 1px 0	Defines the border thickness of the tab header.
$ace-lib-tablist-header-border-color	transparent transparent #dee2e6 transparent	Defines the border color tabs header.
$ace-lib-tablist-header-tab-foucsed-color	#212529	Defines the color of tab header in focused mode.
$ace-lib-tablist-header-tab-active-link-bar-color	#03dac6	Defines the link bar color of the active tab.
$ace-lib-tablist-content-border-width	0 0 0 0	Defines the border thickness of the tab content.
$ace-lib-tablist-content-border-color	#212529	Defines the border color of the tab content.
$ace-lib-tablist-content-padding	0 0 0 0	Defines the padding property of the tab content.

You can assign different values to each of the above variables as follows:

html
$ace-lib-tablist-header-border-color: map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map.

$ace-lib-tablist-content-padding: 2px;

Tooltip

Following variables are available for customization:

Variable	Default Value	Description
$ace-lib-tooltip-background-color	#343a40	Sets the background color of tooltip.
$ace-lib-tooltip-text-color	#f8f9fa	Sets the text color of tooltip.
$ace-lib-tooltip-font-size	80%	Sets the font size of tooltip.
$ace-lib-tooltip-max-width	100%	Sets the max width for tooltip.
$ace-lib-tooltip-margin	0 0 0 0	Sets the margin property of tooltip.

You can assign different values to each of the above variables as follows:

html
$ace-lib-tooltip-background-color: map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map.

$ace-lib-tooltip-max-width: 5px;

Typography

You can modify the typographic settings using the following variables:

1. $font-family-base Define the base font family for the theme. If you have to import any external web fonts, use the @import statement before this variable. The default base font familiy is "`Arial, Helvetica, sans-serif`"

Following SCSS code imports the "Open Sans" font and specifies the base font as 'Open Sans':

html
//import font
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

// set the base font family
$font-family-base: 'Open Sans';

2. $font-size-base You can assign the base font size to the '$font-size-base' variable as follows. Default value is "1 rem"

html
$font-size-base: .62 rem;

3. Heading levels (h1 - h6) The heading levels are configured to be relative to the base font size. See the following table for details. Each of these variables can be overridden:

Levels	Default Value
$h1-font-size	$font-size-base * 2.5
$h2-font-size	$font-size-base * 2
$h3-font-size	$font-size-base * 1.75
$h4-font-size	$font-size-base * 1.5
$h5-font-size	$font-size-base * 1.25
$h6-font-size	$font-size-base

You can modify cach of these variables as per the requirement:

html
$h2-font-size : $font-size-base * 1.8;
$h3-font-size : $font-size-base * 1.25;