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 color [map](https://sass-lang.com/documentation/values/maps). 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>