Editing CSS Variables

uStore NG uses CSS variables to control the look of recurring UI elements, such as buttons.
The theme editor, which is a WYSIWYG editor, lets you edit the commonly-used variables only.
However, you can set a value for all other variables via the "Variables CSS" panel in the theme editor.
Note that any variable declared in the "Variables CSS" panel overrides the value set in the theme editor.

The following is a list of the available variables:

Header variables
--header-height-desktop – The height of the header on desktop breakpoints
--header-height-mobile - The height of the header on mobile breakpoints
--header-padding-desktop – The padding of the header div on desktop breakpoints
--header-padding-mobile – The padding of the header div on mobile breakpoints
--header-background-color – The background color of the header
--text-color-header – The color of text and icons in the header
--logo-image – The URL of the logo image on desktop breakpoints
--logo-image-mobile - The URL of the logo image on mobile breakpoints.

Mobile hamburger menu variables
--submenu-background-color – The background color of the heading (top row) of a submenu when drilling in on mobile
--text-color-submenu - The text color of the heading (top row) of a submenu when drilling in on mobile

Homepage banner variables
--carousel-height-desktop – The height of the banner on desktop breakpoints
--carousel-height-mobile – The height of the banner on mobile breakpoints
--text-color-carousel - The color of the heading text

Footer variables
--footer-background-color – The background color of the footer
--footer-text-color – The text color of the footer

Button variables
A primary button is the main call to action on a page.
A secondary button is any other button on the page.
--button-primary-background-color – The background color of a primary button
--button-primary-border-color – The border color of a primary button
--button-primary-text-color - The text color of a primary button
--button-secondary-background-color - The background color of a secondary button
--button-secondary-border-color – The border color of a secondary button
--button-secondary-text-color – The text color of a secondary button
--button-border-radius – The radius of the button corners

Image box variables
Image boxes are the boxes that contain product images.
--image-box-height – The height of an image box
--image-box-background-color – The background color of an image box
--image-box-border-width – The border width of an image box
--image-box-border-color – The border color of an image box
--image-box-padding – The padding of the div which contains the image

Product image variables
These variables affect the images of a static product in a single page mode (in the future more products). Applicable from v13.
--image-border-width - the width of the border around the image. e.g. 1px
--image-border-color - the color of the border around the image. e.g. #d6d6d6

Text variables
A few variables control the color of texts. They vary from darker tones to lighter ones.
--text-color-heading - The color of text in headings (e.g. H1, H2) in the body of the site (not in the header)
--text-color-ultra-dark – The color of the darkest text
--text-color-dark – The color of the dark text
--text-color-medium – The color of the light text
--text-color-disabled – The color of disabled text
--color-error – The color of error text
--color-warning – The color of warning text
--color-success: The color of success text
--color-line – The color of lines, e.g. divider lines, search bar border
--color-highlight: The main color of the theme, usually used for highlighted elements, e.g. links, total price, table header background, menu hover color
--color-fill – The background color of non-white regions (defaults to grey), e.g. image box background, All Category menu
--text-color-on-highlight-bg – The text color which overlays the highlight color (-–color-highlight) when the highlight color is used in the background, e.g. column headings in a table
--text-size-h1
--text-size-h2
--text-size-h3
--text-size-h4
--text-size-label - The text size of labels
--text-size-regular - The size of running text (usually used for descriptions)
--text-size-fineprint – The size of small text

More variables
--favicon-url (v12.2 and up) - Sets the favicon (the icon that is displayed on the browser's tab and bookmark). Upload a png image (32px X 32px is recommended) via the theme editor's assets tab and point to it, e.g. --favicon-url:"assets/icon.png"
--category-image-height – The height of the div containing the category image
--form-input-border-radius – The corner radius of form input controls, e.g. textbox, dropdown
--table-scrollbar-color
--default-font-weight
--text-color-dropdown-menu – The color of the text and icons in the dropdown menu of uStore Connect Enterprise store lists on mobile