This document provides an overview of CSS variables mapped by the Theme engine. These variables allow for dynamic theming of your application by utilizing the provided color palette settings. Each variable includes a fallback default value when applicable.
Usage
To use these variables in your CSS, reference them as follows:
color: var(--textHeading, #26201a);
Here is the key-value mapping for the color variables:
General Colors
| CSS Variable | Source | Description |
|---|---|---|
--primaryColor | generalColor.button.button_primary | Primary button color. |
--secondaryColor | generalColor.text.text_heading | Heading text color. |
--accentColor | generalColor.theme.theme_accent | Accent color for the theme. |
--linkColor | generalColor.button.button_link | Color for links. |
--bgColor | generalColor.theme.page_background | Background color for pages (default: #f8f8f8). |
--pageBackground | generalColor.theme.page_background | Page background color. |
--themeAccent | generalColor.theme.theme_accent | Accent color for the theme. |
--textHeading | generalColor.text.text_heading | Color for headings. |
--textBody | generalColor.text.text_body | Body text color. |
--textLabel | generalColor.text.text_label | Label text color. |
--textSecondary | generalColor.text.text_secondary | Secondary text color. |
--buttonPrimary | generalColor.button.button_primary | Primary button color. |
--buttonSecondary | generalColor.button.button_secondary | Secondary button color. |
--buttonLink | generalColor.button.button_link | Link button color. |
Sale Discount Colors
| CSS Variable | Source | Description |
|---|---|---|
--saleBadgeBackground | generalColor.sale_discount.sale_badge_background | Background color for sale badges. |
--saleBadgeText | generalColor.sale_discount.sale_badge_text | Text color for sale badges. |
--saleDiscountText | generalColor.sale_discount.sale_discount_text | Text color for sale discounts. |
--saleTimer | generalColor.sale_discount.sale_timer | Color for sale timer elements. |
Header and Footer Colors
| CSS Variable | Source | Description |
|---|---|---|
--headerBackground | generalColor.header.header_background | Background color for the header. |
--headerNav | generalColor.header.header_nav | Navigation text color in the header. |
--headerIcon | generalColor.header.header_icon | Icon color in the header. |
--footerBackground | generalColor.footer.footer_background | Background color for the footer. |
--footerBottomBackground | generalColor.footer.footer_bottom_background | Bottom section background of the footer. |
--footerHeadingText | generalColor.footer.footer_heading_text | Heading text color in the footer. |
--footerBodyText | generalColor.footer.footer_body_text | Body text color in the footer. |
--footerIcon | generalColor.footer.footer_icon | Icon color in the footer. |
Advanced Colors
| CSS Variable | Source | Description |
|---|---|---|
--dialogBackground | advanceColor.overlay_popup.dialog_backgroung | Background color for dialogs. |
--overlay | advanceColor.overlay_popup.overlay | Overlay color for popups. |
--dividerStokes | advanceColor.divider_stroke_highlight.divider_strokes | Divider stroke highlight color. |
--highlightColor | advanceColor.overlay_popup.overlay | Highlight color for overlays. |
--successBackground | advanceColor.user_alerts.success_background | Background color for success alerts. |
--successText | advanceColor.user_alerts.success_text | Text color for success alerts. |
--errorBackground | advanceColor.user_alerts.error_background | Background color for error alerts. |
--errorText | advanceColor.user_alerts.error_text | Text color for error alerts. |
--informationBackground | advanceColor.user_alerts.info_background | Background color for information alerts. |
--informationText | advanceColor.user_alerts.info_text | Text color for information alerts. |
Default Fallbacks
When using these variables, you can specify a fallback value to ensure consistent rendering in case the variable is undefined. For example:
background-color: var(--bgColor, #ffffff);