CSS Variables

Overview

You can use these CSS variables, instead of hard-coded values, in your custom CSS definitions.

Color Variables

Component variables are generic variables that are used across the Universal Theme as the base styles, and can be used by plugin developers to hook into theme roller.

Color Palette Variables

Variable	Variable Contrast	Contrast Preview
--u-color-1	--u-color-1-contrast	Abc
--u-color-2	--u-color-2-contrast	Abc
--u-color-3	--u-color-3-contrast	Abc
--u-color-4	--u-color-4-contrast	Abc
--u-color-5	--u-color-5-contrast	Abc
--u-color-6	--u-color-6-contrast	Abc
--u-color-7	--u-color-7-contrast	Abc
--u-color-8	--u-color-8-contrast	Abc
--u-color-9	--u-color-9-contrast	Abc
--u-color-10	--u-color-10-contrast	Abc
--u-color-11	--u-color-11-contrast	Abc
--u-color-12	--u-color-12-contrast	Abc
--u-color-13	--u-color-13-contrast	Abc
--u-color-14	--u-color-14-contrast	Abc
--u-color-15	--u-color-15-contrast	Abc
--u-color-16	--u-color-16-contrast	Abc
--u-color-17	--u-color-17-contrast	Abc
--u-color-18	--u-color-18-contrast	Abc
--u-color-19	--u-color-19-contrast	Abc
--u-color-20	--u-color-20-contrast	Abc
--u-color-21	--u-color-21-contrast	Abc
--u-color-22	--u-color-22-contrast	Abc
--u-color-23	--u-color-23-contrast	Abc
--u-color-24	--u-color-24-contrast	Abc
--u-color-25	--u-color-25-contrast	Abc
--u-color-26	--u-color-26-contrast	Abc
--u-color-27	--u-color-27-contrast	Abc
--u-color-28	--u-color-28-contrast	Abc
--u-color-29	--u-color-29-contrast	Abc
--u-color-30	--u-color-30-contrast	Abc
--u-color-31	--u-color-31-contrast	Abc
--u-color-32	--u-color-32-contrast	Abc
--u-color-33	--u-color-33-contrast	Abc
--u-color-34	--u-color-34-contrast	Abc
--u-color-35	--u-color-35-contrast	Abc
--u-color-36	--u-color-36-contrast	Abc
--u-color-37	--u-color-37-contrast	Abc
--u-color-38	--u-color-38-contrast	Abc
--u-color-39	--u-color-39-contrast	Abc
--u-color-40	--u-color-40-contrast	Abc
--u-color-41	--u-color-41-contrast	Abc
--u-color-42	--u-color-42-contrast	Abc
--u-color-43	--u-color-43-contrast	Abc
--u-color-44	--u-color-44-contrast	Abc
--u-color-45	--u-color-45-contrast	Abc

1 - 45

Stateful Color Variables

Status	Block	Text	Background	Border
Normal	u-normal	u-normal-text	u-normal-bg	u-normal-border
Hot	u-hot	u-hot-text	u-hot-bg	u-hot-border
Warning	u-warning	u-warning-text	u-warning-bg	u-warning-border
Danger	u-danger	u-danger-text	u-danger-bg	u-danger-border
Info	u-info	u-info-text	u-info-bg	u-info-border
Success	u-success	u-success-text	u-success-bg	u-success-border

1 - 6

Component Variables

Variable	Preview	Description	Default Value (Vita)
--ut-component-background-color		Component Background Color	#fff
--ut-component-border-color		Component Border Color	rgba(0,0,0,.1)
--ut-component-border-width		Component Border Width	1px
--ut-component-border-radius		Component Border Radius	2px
--ut-component-box-shadow		Component Shadow	var(--ut-shadow-lg)
--ut-component-highlight-background-color		Component Highlight Background Color (example: hover state)	rgba(0, 0, 0, .025)
--ut-component-toolbar-background-color		Component Toolbar Background Color	rgba(0, 0, 0, .025)
--ut-component-inner-border-width		Component Inner Border Width	1px
--ut-component-inner-border-color		Component Inner Border Color	rgba(0, 0, 0, 0.05)
--ut-component-text-default-color	Abc	Component Default Text Color	#000
--ut-component-text-title-color	Abc	Component Default Title Color	#000
--ut-component-text-subtitle-color	Abc	Component Default Subtitle Color	rgba(0, 0, 0, .85)
--ut-component-text-muted-color	Abc	Component Default Muted Color (example: description text)	rgba(0, 0, 0, .65)
--ut-component-icon-background-color		Component Icon Background Color	var(--ut-palette-primary)
--ut-component-icon-color		Component Icon Color	var(--ut-palette-primary-contrast)
--ut-component-badge-background-color		Component Badge Background Color	rgba(0, 0, 0, .05)
--ut-component-badge-text-color	Abc	Component Badge Text Color	var(--ut-component-text-default-color)
--ut-component-badge-border-radius		Component Badge Border Radius	2px

Shadow Variables

Variable	Description	Default Value (Vita)
--ut-shadow-sm	Shadow Small	0 2px 4px -2px rgba(0, 0, 0, 0.1)
--ut-shadow-md	Shadow Medium	0 12px 24px -12px rgba(0, 0, 0, 0.3)
--ut-shadow-lg	Shadow Large	0 24px 48px -24px rgba(0, 0, 0, 0.3)

Sample Component Preview

Example Title

Example Subtitle

This is just an example of a component's body text.

Example Muted Text


.exampleCard {
  border-width: var(--ut-component-border-width);
  border-style: solid;
  border-color: var(--ut-component-border-color);
  border-radius: var(--ut-component-border-radius);
  box-shadow: var(--ut-component-box-shadow);
  background-color: var(--ut-component-background-color);
  color: var(--ut-component-text-default-color);
  padding: 20px;
  margin: auto;
  max-width: 320px;
}

.exampleCard-icon {
  background-color: var(--ut-component-icon-background-color);
  color: var(--ut-component-icon-color);
  inline-size: 48px;
  block-size: 48px;
  font-size: 24px;
  border-radius: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block-end: 12px;
}

.exampleCard-title {
  color: var(--ut-component-text-title-color);
  margin: 0;
}

.exampleCard-subtitle {
  color: var(--ut-component-text-subtitle-color);
  margin-block-start: 0;
  margin-block-end: 12px;
}

.exampleCard-misc {
  color: var(--ut-component-text-muted-color);
  font-size: 12px;
  margin-block-start: 12px;
  margin-block-end: 0;
}