# Colors

Colors in aragonUI are managed by its theming system. An aragonUI theme is a set of colors assigned to a predefined palette. All aragonUI components use colors from this palette, making it possible to swap the theme for another one dynamically. aragonUI includes two themes by default, *light* and *dark*, but any other can be provided.

## Usage <a href="#usage" id="usage"></a>

The theme palette can be obtained in a component by using the `useTheme()` hook:

```jsx
function App() {
  const theme = useTheme()
  return (
    <Main>
      <p
        css={`
          color: ${theme.negative};
        `}
      >
        Negative content
      </p>
    </Main>
  )
}
```

## Notes <a href="#notes" id="notes"></a>

Colors meant to be applied on text are indicated using the *Content* suffix. The reason why it is not using *Text* is because these also apply to other outline content like icons.

When a color like *foo* is followed by a color named *fooContent*, it generally means that *foo* should be used as a background color for *fooContent*.

Gradients are defined using the *Start* and *End* suffixes.

Colors don’t include opacity. When using aragonUI’s `useTheme()`, the `.alpha(0.5)` method can be used on any color. It will apply the desired opacity and return the result as a CSS color using the `rgba()` syntax.

## Palette groups <a href="#palette-groups" id="palette-groups"></a>

This section describes the palette colors and how they should be used. The groups are created based on how they relate to each other.

### Base <a href="#base" id="base"></a>

The colors defined in this group are either used by default (border, content, overlay), or on the base layer (background).

#### ***background***

The base layer on which apps are being rendered.

#### ***border***

The border color used everywhere by default, except in specific cases like *controlBorder*.

#### ***overlay***

The color used for overlays. Some components using an overlay color are SidePanel or Modal.

#### ***content***

The base color for text and outline content. To be used over *background*.

#### ***contentSecondary***

Secondary color for text and outline content. To be used over *background*.

#### ***link***

Used as a base color for links.

#### ***focus***

The color for focus rings.

#### ***accent***

The *accent* color can be used to put an emphasis on a component or a certain part of a component, without any specific semantic.

#### ***accentContent***

To be used for text and outline content over *accent*.

#### ***accentStart***\*\* / **\_**&#x61;ccentEnd\*\*\_

This is the gradient equivalent of *accent*.

### Surface <a href="#surface" id="surface"></a>

The main surface as defined by aragonDS and its different states. This group of colors is used by components providing surfaces: Box, DataView, the default Button, the Slider handle, and many more.

#### ***surface***

The background color used for surfaces.

#### ***surfaceContent***

The primary color used for text and outline content over *surface*.

#### ***surfaceContentSecondary***

The secondary color used for text and outline content over *surface*.

#### ***surfaceIcon***

This color is generally used for icons over *surface*. Note: in some cases, icons over *surface* are also using *surfaceContent* or *surfaceContentSecondary*.

#### ***surfaceUnder***

This is used as a background base for surfaces that appear to be at a lower level than the parent *surface* itself. For instance, the DataView component is using this color for its entry expansion, which opens underneath the primary surface provided by DataView.

#### ***surfaceOpened***

Communicates that a *surface* is being “opened”, generally revealing a surface using *surfaceUnder* underneath. The DataView component is using this color for the side border of its entry expansion.

#### ***surfaceSelected***

Indicates that a *surface*, or a part of it, is being selected. This is the color DataView is using to indicate that an entire row is selected.

#### ***surfaceHighlight***

Indicates that a *surface*, or a part of it, is being highlighted. This color could be used to reflect a hover or focused state.

#### ***surfacePressed***

Indicates that a *surface*, or a part of it, is being pressed − either by a pointer or a touch event.

### Info <a href="#info" id="info"></a>

Used to indicate informative content in general.

#### ***info***

This info color is generally stronger than *infoSurface*. It should be used for icons, borders, etc.

#### ***infoSurface***

The surface info color, generally softer than *info*. It should be used for background colors.

#### ***infoSurfaceContent***

To be used for text and outline content over *infoSurface*.

### Feedback <a href="#feedback" id="feedback"></a>

Used to signal feedback, in the broad sense. For instance, this set of colors is used to show the status of a transaction in the signing panel.

#### ***feedbackSurface***

Use this color as a background color for feedback.

#### ***feedbackSurfaceContent***

The primary color to be used for text and outline content over *feedbackSurface*.

#### ***feedbackSurfaceContentSecondary***

The secondary color to be used for text and outline content over *feedbackSurface*.

### Warning <a href="#warning" id="warning"></a>

Used to indicate warnings.

#### ***warning***

This warning color is generally stronger than *warningSurface*. It should be used for icons, borders, etc.

#### ***warningSurface***

The surface warning color, generally softer than *warning*. It should be used for background colors.

#### ***warningSurfaceContent***

To be used for text and outline content over *warningSurface*.

### Help <a href="#help" id="help"></a>

Used for elements related to helping the user.

#### ***help***

This help color is generally stronger than *helpSurface* and should be used for icons, borders, etc.

#### ***helpContent***

To be used for text and outline content over *help*.

#### ***helpSurface***

This help color is generally softer than *help* and should be used for background colors.

#### ***helpSurfaceContent***

To be used for text and outline content over *helpSurface*.

### Positive <a href="#positive" id="positive"></a>

Used to communicate something positive. It can be used for successful operations, but also for other things like voting “Yes”.

#### ***positive***

Use this color to communicate positive information (e.g. success, an action to vote yes).

#### ***positiveContent***

To be used for text and outline content over *positive*.

#### ***positiveSurface***

A softer *positive*, to be used when a large amount of information needs to be communicated.

#### ***positiveSurfaceContent***

To be used for text and outline content over *positiveSurface*.

### Negative <a href="#negative" id="negative"></a>

Used to communicate something negative. It can be used for errors, but also for other things like voting “No”.

#### ***negative***

Use this color to communicate negative information (e.g. error, an action to vote no).

#### ***negativeContent***

To be used for text and outline content over *negative*.

#### ***negativeSurface***

A softer *negative*, to be used when a large amount of information needs to be communicated. For instance, the Info component uses it as a background color in error mode.

#### ***negativeSurfaceContent***

To be used for text and outline content over *negativeSurfaceContent*.

### Tag <a href="#tag" id="tag"></a>

This set of colors is used by the Tag component and its different modes.

#### ***tagIdentifier***

Used to identify or label a subject.

#### ***tagIdentifierContent***

To be used for text and outline content over *tagIdentifier*.

#### ***tagNew***

Used to indicate that a subject is new, or updated.

#### ***tagNewContent***

To be used for text and outline content over *tagNew*.

#### ***tagIndicator***

Used for indicators in the general sense.

#### ***tagIndicatorContent***

To be used for text and outline content over *tagIndicator*.

#### ***tagActivity***

Used to represent some activity that happened, like a number of notifications.

#### ***tagActivityContent***

To be used for text and outline content over *tagActivity*

### Badge <a href="#badge" id="badge"></a>

This colors are used for badge-like components: IdentityBadge, AppBadge, etc.

#### *badge* <a href="#badge-2" id="badge-2"></a>

The background color of badge-like components.

#### *badgeContent* <a href="#badgecontent" id="badgecontent"></a>

To be used for text and outline content over *badge*.

#### *badgePressed* <a href="#badgepressed" id="badgepressed"></a>

The pressed state of *badge*.

### Floating <a href="#floating" id="floating"></a>

Floating elements, like tooltips.

#### *floating* <a href="#floating-2" id="floating-2"></a>

The background color of a floating element.

#### *floatingContent* <a href="#floatingcontent" id="floatingcontent"></a>

To be used for text and outline content over *floating*.

### Controls <a href="#controls" id="controls"></a>

Colors related to controls, that could be used in forms or elsewhere.

#### ***hint***

Used for hints (or placeholders) inside of text input or similar components.

#### ***selected***

Indicates a selection in the broad sense.

#### ***selectedContent***

To be used for text and outline content over *selected*.

#### ***selectedDisabled***

Indicates a selection in the broad sense, when disabled (non-interactive).

#### ***disabled***

The background color of disabled components like Button.

#### ***disabledContent***

The text or outline content to be used over *disabled*.

#### ***disabledIcon***

This color is generally used for icons over *disabled*. Note: icons over *disabled* could also be using *disabledContent*.

#### ***control***

Used as a background color for some control components like Checkbox, Radio or Switch.

#### ***controlBorder***

Used as a border color for some control components like Checkbox, Radio or Switch.

#### ***controlBorderPressed***

Used as a border color for the pressed state of some control components like Checkbox, Radio or Switch.

#### ***controlDisabled***

The background color for the disabled state of some control components like Checkbox, Radio or Switch.

#### ***controlSurface***

This is used as a surface color for elements of control components that appear at an upper level. For instance, the Switch component is using this color for its handle.

#### ***controlUnder***

This is used as a background base for elements of control components that appear to be at a lower level. For instance, the Switch component is using this color for its inner base.

### Colors <a href="#colors" id="colors"></a>

These colors can be used when a color is needed for its semantics. An example could be a chart using a red and a blue curve. Even if their theme is different, two users should still be able to refer to these by using the terms “red” or “blue”.

Themes are free to implement their own variation of these colors, but they should respect the naming (e.g. *green* can vary, but should use a color that is commonly accepted to be “green”).

Available color names:

* *green*
* *yellow*
* *red*
* *blue*
* *brown*
* *purple*