---
url: /docs/foundations/css-classes/text-color.md
---
> Typography

# Text Color

Utilities for controlling the text color of an element.

::: tip s-prefix
The `s-` (semantic) prefix signals that the color value of these will change with the brand css.
:::

## Quick reference

| Class | Color | Description |
|-------|-------|-------------|
| text-transparent | Text | color: transparent |
| text-current | Text | color: currentColor |
| s-text | Text | color: var(--w-s-color-text) |
| s-text-subtle | Text | color: var(--w-s-color-text-subtle) |
| s-text-placeholder | Text | color: var(--w-s-color-text-placeholder) |
| s-text-link | Text | color: var(--w-s-color-text-link) |
| s-text-disabled | Text | color: var(--w-s-color-text-disabled) |
| s-text-negative | Text | color: var(--w-s-color-text-negative) |
| s-text-positive | Text | color: var(--w-s-color-text-positive) |
| ~~s-text-notification~~ || Replaced by `s-text-inverted-static` in v2 |

### Static and inverted static variants

All of the classes in the quick reference have two additional variants to cater for areas of the page that should not change between light and dark mode.

* The `static` suffix.
* The `inverted` modifier.

The format is always `s-text(-inverted)-<name>(-static)` where `<name>` is what comes after `s-icon` in the quick reference.

For example, to get a link that stays in its light mode form even in dark mode, use this class:

```css
.s-text-link-static
```

To always get its `inverted` (dark mode) form, use the `inverted` modifier.

```css
.s-text-inverted-link-static
```

To get its inverted form in light mode but have it change to its light mode counterpart in dark mode then only use the `inverted` modifier:

```css
.s-text-inverted-link
```

## Basic usage

### Setting the text color

Control the text color of an element using the `text-{transparent|current}` or `s-text-{semantic color}` utilities specified in the table above.

```html
<p class="s-text">The quick smart warp scientist</p>
<p class="s-text-static">The quick smart warp scientist</p>
<p class="s-text-subtle">The quick smart warp scientist</p>
<p class="s-text-placeholder">The quick smart warp scientist</p>
<p class="s-text-inverted ...">The quick smart warp scientist</p>
<p class="s-text-inverted-static ...">The quick smart warp scientist</p>
<p class="s-text-inverted-subtle ...">The quick smart warp scientist</p>
<p class="s-text-link">The quick smart warp scientist</p>
<p class="s-text-link-disabled">The quick smart warp scientist</p>
<p class="s-text-positive">The quick smart warp scientist</p>
<p class="s-text-negative">The quick smart warp scientist</p>
```

### Arbitrary values

If you need to use a one-off `text-{color}` value, use square brackets to generate a property on the fly using any arbitrary value. However, we recommend only using our semantic color tokens.

```html
<p class="text-[--w-s-color-border]"></p>
```

### Opacity

It is possible to control the opacity of the text color by adding an optional alpha modifier.
The modifier accepts any integer percentage value between 0 and 100.
This works for both semantic and arbitrary classes with any primitive `--w-{color}` or semantic `--w-s-color-{name}` css variable.

::: warning Warning
Please be advised that by using primitive variables you will lose theming possibilities, therefore we highly recommend only using semantic classes and tokens.

The examples below are inaccessible and purely for technical reference.
Always make sure any text has sufficient contrast to its background.
:::

```html
<div class="s-text/60 hover:s-text/100 ...">Warp</div>
<div class="s-text-link/50 hover:s-text-link/100 ...">Warp</div>
<div class="text-[--w-s-color-text-positive/60] hover:text-[--w-s-color-text-positive/100] ...">Warp</div>
<div class="text-[var(--w-black)/50] hover:text-[var(--w-black)/100] ...">Warp</div>
```

## Applying conditionally

### Hover, focus, and other states

You can conditionally apply utility classes in different states using variant modifiers.
For example, use `hover:s-text-positive` to only apply the `s-text-positive` utility on hover.

```html
<p class="s-text hover:s-text-positive">The quick smart warp scientist</p>
```

### Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:s-text-positive` to apply the `s-text-positive` utility at only medium screen sizes and above.

```html
<p class="s-text md:s-text-positive">The quick smart warp scientist</p>
```