Theme panel
Some of the values can be used as part of other values. For example, a color value can be part of a shadow style value.
You can edit, remove and add new theme values. To edit or remove a value, mouse over it and click on the desired button. To add a new value, click on the “+” icon next to the desired category.  The categories are:
When creating a custom design, it’s better to apply a limited number of text styles, colors, fonts, shadows and so on. In the Quarkly Theme panel, you will find categorized values for various purposes.
Text styles
Text style is a set of the following properties:
  • Family, font family.
  • Size, text size.
  • Line height, line spacing.
  • Weight, boldness of the font.
  • Style, font outline (normal, italic, oblique).
  • Variant, lowercase character variants.
To add a text style to the theme, click on the “+” icon in front of the category.
To apply the text style from the theme to an element, go to the Typography section on the Styles panel, click on the 
 icon next to the Font property and select the desired text style.
Configuring the code
font=’--base’
Color styles
To add a color style to the theme, click on the “+” icon next to the category. 
The color value in the theme can be any of those available in CSS. A color from the theme can be set as a font color, block background color, border color, etc.
For example, to change the theme, go to the Typography section on the Styles panel, click on the 
 icon next to the Color property and select the desired color.
Configuring the code
color=’--color-primary’
Background styles
Backgrounds are used a lot in design. In addition to a plain color, you may want to a gradient, tile or an image. Element properties allow you to create a complex background consisting of several simpler overlapping ones. A background style is a set of the following properties:
  • Color, a background color is displayed when no other types are set;
  • Type, background type (image, linear-, radial- and conic-gradient);
  • Position, background position relative to the container;
  • Size, background size relative to the container;
  • Repeat, background repetition;
  • Attachment, background scrolling;
  • Clip, background/border ratio.
To add a background style to the theme, click on the “+” icon next to the category.
To add a background style from the theme to an element, go to the Styles panel, click on the 
 icon next to the Background property and select the desired color.
Configuring the code
background=’--primaryGradient’
Shadows
Shadows make the interface vivid and design more expressive. Shadow style is a set of the following properties:
  • Offset X
  • Offset Y
  • Blur radius
  • Spread radius
  • Color
To add a shadow style to the theme, click on the “+” icon next to the category.
To add shadow from the theme to an element, go to the Effects section, click on the
 icon next to the Box shadow property and select the desired shadow style.
Configuring the code
box-shadow=’--xl’
Transitions
Transitions can be used when styles of an element are changed in response to some actions. For example, when you mouse over an element, it changes its color. Transitions make this change smoother, otherwise, it would be instant. Transition values contain the following set of properties:
  • Property, smooth change of a property;
  • Timing function, curve of transition dynamics;
  • Duration, transition duration;
  • Delay, delay before the transition.
To add a transition to the theme, click on the “+” icon next to the category.
To add a transition from the theme to an element, go to the Effects section, click on the
 icon next to the Transition property and select the desired value.
Configuring the code
transition=’--opacityOut’
Transforms
Transforms allow you to rotate, zoom or move an element and even more. Transform values contain the following set of properties:
  • Type, transform type.
  • Arguments, value.
To add a transform to the theme, click on the “+” icon next to the category. 
To add a transform from the theme to an element, go to the Effects section, click on the 
 icon next to the Transform property and select the desired value.
Configuring the code
transform=’--rotate90’
Filters
Filter contains styles with visual effects similar to those in Adobe Photoshop. Filters can be used if you need, for example, to change color shades, to make an element brighter or blur it.
Filter values contain the following set of properties:
  • Type
  • Arguments
To add a filter to the theme, click on the “+” icon next to the category.
To add a filter from the theme, go to the Effect section on the Styles panel, click on the 
 icon next to the Filter property and select the desired value.
Configuring the code
filter=’--blur’
Breakpoints
Breakpoints (control points) are conditions under which additional design options appear on your page. Breakpoint values contain the following set of properties:
  • Type, breakpoint type with max-width before the specified value and min-width after the specified value.
  • Value, breakpoint values in pixels.
The breakpoints specified in the theme are applied to all pages. To add a breakpoint to the theme, click on the “+” icon next to the category.
Configuring the code
sm-width=’100%’