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;