Difference between revisions of "Theme Variables"

From AgileApps Support Wiki
Line 371: Line 371:


$body-color: #fff;
$body-color: #fff;
</pre>
==Input==
Following date picker variables are available for customization:
:{| border="1" cellpadding="5" cellspacing="1"|
|- align="center"
! 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:
<pre>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;
</pre>
</pre>

Revision as of 06:14, 20 October 2023

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.

Notepad.png

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.

Notepad.png

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.

Notepad.png

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.
#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;