Colours
Colour utilities set background-color, color and border-color. Every class outputs a --nu-* token, so colours follow the active theme: a bg-surface card is white in the light theme and dark grey in the dark theme without a second class.
How colours work
Section titled “How colours work”NuvoUI has four kinds of colour name. Each works with the bg-, text- and border- prefixes.
| Kind | Names | Meaning | Changes with the theme |
|---|---|---|---|
| Roles | brand, danger, warning, success, info, and error (same as danger) |
What the colour means | Yes |
| Theme words | surface, muted, regular and the others below |
The part of the interface | Yes |
| Palette | gray, red, blue, green, yellow, purple, pink, each with shades 50 to 950 |
A plain colour with no meaning | Shades no; hue roles yes |
| Basic | black, white, transparent |
Fixed colours | No |
Use roles and theme words for interface colour, so it adapts to dark mode and to a change of brand. Use palette colours for decoration that has no meaning, such as category tags and charts.
Theme words
Section titled “Theme words”Theme words name a part of the interface. Each prefix has its own set.
| Prefix | Words |
|---|---|
bg- |
base (the page), surface (cards, drawers), alternate (table headers, sidebars), raised (menus, popovers, toasts), hover, selected, disabled |
text- |
regular, muted, subtle, inverted, link, link-hover |
border- |
regular, strong, control (form control edges), control-hover |
bg-surface card
text-muted secondary text
text-subtle hint
bg-alternate
bg-raised
bg-selected
<div class="bg-base p-4 rounded border space-y-3"> <div class="bg-surface border rounded p-3"> <div class="text-regular font-semibold">bg-surface card</div> <div class="text-muted text-sm">text-muted secondary text</div> <div class="text-subtle text-sm">text-subtle hint</div> </div> <div class="flex gap-2"> <div class="bg-alternate rounded p-2">bg-alternate</div> <div class="bg-raised shadow-md rounded p-2">bg-raised</div> <div class="bg-selected text-brand rounded p-2">bg-selected</div> </div></div>.card { @include apply(bg(surface), text-color(regular), border(1), rounded(lg));}.card__meta { @include apply(text-color(muted), font-size(sm));}text-inverted is the text colour for a surface of the opposite lightness, such as a dark tooltip in the light theme. For a whole section in the opposite theme, use data-theme="inverse" instead.
A role names what a colour means. Every role has the same set of classes and tokens.
| Class | Token | Use |
|---|---|---|
bg-{role} |
--nu-{role} |
Solid fill: buttons, badges |
bg-{role}-subtle |
--nu-{role}-subtle |
Tinted background: alerts, selected rows |
border-{role} |
--nu-{role} |
Border in the fill colour |
text-{role} |
--nu-text-{role} |
Role-coloured text on a normal page |
text-on-{role} |
--nu-text-on-{role} |
Text placed on the bg-{role} fill |
brand
success
danger
warning
info
bg-danger-subtle text-danger border-danger: payment failed
bg-success-subtle text-success: changes saved
<div class="space-y-3"> <div class="flex wrap gap-2"> <span class="bg-brand text-on-brand px-3 py-1 rounded">brand</span> <span class="bg-success text-on-success px-3 py-1 rounded">success</span> <span class="bg-danger text-on-danger px-3 py-1 rounded">danger</span> <span class="bg-warning text-on-warning px-3 py-1 rounded">warning</span> <span class="bg-info text-on-info px-3 py-1 rounded">info</span> </div> <div class="bg-danger-subtle text-danger border border-danger rounded p-3">bg-danger-subtle text-danger border-danger: payment failed</div> <div class="bg-success-subtle text-success rounded p-3">bg-success-subtle text-success: changes saved</div></div>.button { @include apply(bg(brand), text-color(on-brand), bg(brand-hover) hover, bg(brand-active) active);}.alert--danger { @include apply(bg(danger-subtle), text-color(danger), border(1, solid, danger-border));}text-{role} and text-on-{role}
Section titled “text-{role} and text-on-{role}”The two text classes answer different questions:
text-{role}is coloured text on a normal page: an error message intext-danger, a brand-coloured link intext-brand.text-on-{role}is text on the role’s solid fill: the label of abg-brandbutton istext-on-brand.
text-on-{role} is computed for contrast. Core picks whichever of --nu-text-regular and --nu-text-inverted has the higher WCAG contrast against the fill, so text-on-warning is dark on the yellow fill while text-on-danger is light. The dark theme computes it the same way from its own {role} fill; with the default lighter dark fills, text-on-{role} turns dark.
Only roles have built-in text-on-* tokens. There is no text-on-red; for text on a palette fill use the text-on-color() mixin, which computes a fixed colour at compile time.
Role states
Section titled “Role states”Each role also has -hover, -active and -border tokens. They have no utility class; use them through mixins or token().
.button--danger { @include apply(bg(danger), text-color(on-danger), bg(danger-hover) hover, bg(danger-active) active);}.callout { border-inline-start: token(border-width-4) solid token(info-border);}error is a second name for danger. bg-error, bg-error-subtle, border-error, text-error and text-on-error exist, and every error token points at the matching danger token (--nu-error is var(--nu-danger), --nu-error-subtle is var(--nu-danger-subtle)). Error tokens cannot be set in a theme map; change danger-* instead.
Palette
Section titled “Palette”Seven palette hues, plus every role, have a scale of eleven shades: 50, 100 to 900 in steps of 100, and 950. Shade 500 is the configured colour itself; the others are generated from it in the OKLCH colour space with the same hue, lighter below 500 and darker above.
50
100
200
300
400
500
600
700
800
900
950
<div class="grid cols-11 gap-1 text-xs text-center"> <div class="bg-blue-50 p-2 rounded">50</div> <div class="bg-blue-100 p-2 rounded">100</div> <div class="bg-blue-200 p-2 rounded">200</div> <div class="bg-blue-300 p-2 rounded">300</div> <div class="bg-blue-400 p-2 rounded">400</div> <div class="bg-blue-500 text-white p-2 rounded">500</div> <div class="bg-blue-600 text-white p-2 rounded">600</div> <div class="bg-blue-700 text-white p-2 rounded">700</div> <div class="bg-blue-800 text-white p-2 rounded">800</div> <div class="bg-blue-900 text-white p-2 rounded">900</div> <div class="bg-blue-950 text-white p-2 rounded">950</div></div>.chip { @include apply(bg(blue, 100), text-color(blue, 800));}| Class | Token |
|---|---|
bg-{name}-{stop} |
--nu-{name}-{stop} |
text-{name}-{stop} |
--nu-{name}-{stop} |
border-{name}-{stop} |
--nu-{name}-{stop} |
{name} is a palette hue or a role (bg-brand-100, text-danger-700). Palette shades are fixed: --nu-blue-100 has the same value in every theme. Only stops 50, 100 to 900 and 950 exist; bg(red, 450) is an error.
Hue classes and hue roles
Section titled “Hue classes and hue roles”The bare hue name has a fixed background and border, but flipping text and a flipping subtle background:
| Class | Token | Changes with the theme |
|---|---|---|
bg-{hue}, border-{hue} |
--nu-{hue}-500 |
No |
text-{hue} |
--nu-text-{hue} |
Yes |
bg-{hue}-subtle |
--nu-{hue}-subtle |
Yes |
The flipping tokens are hue roles: decorative roles with no meaning, so components such as tags adapt to dark mode without their own rules. Each hue has --nu-{hue}-subtle, --nu-{hue}-border and --nu-text-{hue}. --nu-{hue}-border has no class; use border-color({hue}-border).
purple
green
pink
yellow
gray
<div class="flex wrap gap-2"> <span class="bg-purple-subtle text-purple px-2 py-1 rounded-full text-sm">purple</span> <span class="bg-green-subtle text-green px-2 py-1 rounded-full text-sm">green</span> <span class="bg-pink-subtle text-pink px-2 py-1 rounded-full text-sm">pink</span> <span class="bg-yellow-subtle text-yellow px-2 py-1 rounded-full text-sm">yellow</span> <span class="bg-gray-subtle text-gray px-2 py-1 rounded-full text-sm">gray</span></div>.tag--purple { @include apply(inline-flex, px(2), rounded(full), bg(purple-subtle), text-color(purple), border(1, solid, purple-border));}Basic colours
Section titled “Basic colours”bg-black, bg-white, bg-transparent, and the same names with text- and border-, output --nu-black, --nu-white and --nu-transparent. They never change with the theme. Prefer bg-surface over bg-white for cards, so they turn dark in the dark theme.
State variants
Section titled “State variants”Every bg-, text- and border- class above has hover: and group-hover: forms. Border colour classes also have active: and focus:. The role text-on-{role} classes have no state forms; a custom text-on-* theme token does (see Custom theme tokens).
hover:bg-brand-subtle
group-hover:text-brand
<div class="flex wrap gap-3"> <div class="bg-alternate hover:bg-brand-subtle hover:text-brand p-3 rounded transition-colors cursor-pointer">hover:bg-brand-subtle</div> <input type="text" class="border-regular focus:border-brand" placeholder="focus:border-brand" /> <div class="group border rounded p-3 cursor-pointer"> <span class="text-muted group-hover:text-brand transition-colors">group-hover:text-brand</span> </div></div>Colour classes have no responsive variants. Change a colour at a breakpoint with a mixin: @include apply(bg(surface), bg(alternate) md);.
The colour mixins take the same words as the classes, without repeating the prefix.
| Class | Mixin |
|---|---|
bg-surface |
bg(surface) |
bg-brand |
bg(brand) |
bg-danger-subtle |
bg(danger-subtle) |
bg-blue-100 |
bg(blue, 100) |
text-muted |
text-color(muted) |
text-danger |
text-color(danger) |
text-on-brand |
text-color(on-brand) or text-on-color(brand) |
border-regular |
border-color(regular) |
| (no class) | bg(brand-hover), border-color(danger-border) |
@use "@nuvoui/core" as *;
.row--selected { @include apply(bg(selected), text-color(brand), border-color(brand-border));}.row--selected { background-color: var(--nu-bg-selected); color: var(--nu-text-brand); border-color: var(--nu-brand-border);}The mixins also accept a colour value or var(), written as passed. A raw colour does not follow the theme, and a CSS named colour that is also a palette name (red, blue) means the palette colour.
| Mixin | Accepts |
|---|---|
bg($color, $shade: null) |
A role, role state, palette hue, theme word, basic colour, colour value or var(); a shade for a role or hue |
text-color($color, $shade: null) |
The same with text theme words, plus on-{role}, inherit and currentcolor |
border-color($color, $shade: null) |
The same with border theme words |
text-on-color($color, $shade: null) |
A role gives var(--nu-text-on-{role}); a palette hue, a role with a shade or a colour value gives a compile-time colour |
Compile-time colours
Section titled “Compile-time colours”get-color() returns a real colour for Sass maths, not a token. It does not follow the theme.
@use "sass:color";@use "@nuvoui/core" as *;
.email-button { background-color: get-color(brand, 700); border-color: color.adjust(get-color(brand, 700), $lightness: -10%);}See Tokens for when to use token(), get-color() or var().
Configuration
Section titled “Configuration”Set the role colours and the palette when loading core. Each value becomes shade 500 of its scale; the other shades are generated.
@use "@nuvoui/core" with ( $generate-utility-classes: true, $brand: #4361ee, $danger: #d92d20);| Variable | Default |
|---|---|
$brand |
#007bff |
$success |
#28a745 |
$danger |
#dc3545 |
$warning |
#ffc107 |
$info |
#17a2b8 |
$color-primitives |
gray, red, blue, green, yellow, purple, pink |
$basic-colors |
black, white, transparent |
$color-primitives replaces the default palette; it is not merged. A hue name must not repeat a role name, and error and names that would create an existing token (such as link) raise an error. Which stop each role and theme word uses in each theme is set in the theme maps; see Theming.
The colour classes belong to the theme feature flag. With theme off, no tokens are emitted, and a colour word in a mixin (bg(brand), bg(red, 600), text-color(muted)) raises an error that says the theme flag is off. black, white and transparent still compile, as plain CSS colours, and so do colour values.
Errors
Section titled “Errors”| Input | Error |
|---|---|
bg(primary) |
bg(primary): unknown colour. Use a role (brand, success, danger, warning, info), a palette name (gray, red, blue, green, yellow, purple, pink), a theme word (base, surface, alternate, raised, hover, selected, disabled), a hex colour, a CSS colour name, a colour function (rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(), color-mix(), light-dark()), a keyword (currentcolor, inherit, initial, unset, revert, revert-layer) or var(). |
bg(bg-surface) |
The same message: write bg(surface). |
text-color(nope) |
text-color(nope): unknown colour. Use a role (...), a palette name (...), a theme word (regular, muted, subtle, inverted, link, link-hover), a hex colour, a CSS colour name, a colour function (...), a keyword (...) or var(). |
bg(red, 450) |
bg(red, 450): invalid shade. Valid shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. |
bg(var(--x), 100) |
bg(var(--x), 100): a CSS variable has no shades. |
bg(brand-default) |
bg(brand-default): renamed in 2.0, use bg(brand). border-color(), text-color() and text-on-color() give the same message with their own name; gradient() reports it as bg(). |
text-on-color(error-default) |
text-on-color(error-default): renamed in 2.0, use text-on-color(danger). |
primary and secondary are not colours in core 2.x. The main role is brand; take a second colour from the palette.
CSS variables
Section titled “CSS variables”Generated from the compiled core build with the default configuration. The full list of colour and other tokens is on the Tokens page.
Theme words
| Token | Light | Dark |
|---|---|---|
--nu-bg-base | #fbfafc | #1a1a1a |
--nu-bg-surface | #fff | #2e2e2e |
--nu-bg-alternate | var(--nu-gray-100) | #242424 |
--nu-bg-raised | #fff | #3a3a3a |
--nu-bg-hover | var(--nu-gray-100) | #3a3a3a |
--nu-bg-selected | var(--nu-brand-50) | var(--nu-brand-950) |
--nu-bg-disabled | var(--nu-gray-100) | #333 |
--nu-text-regular | #1a1a1a | #f1f1f1 |
--nu-text-muted | #666 | #a8a8a8 |
--nu-text-subtle | #949494 | #6e6e6e |
--nu-text-inverted | #f1f1f1 | #1a1a1a |
--nu-text-link | var(--nu-brand-700) | var(--nu-brand-300) |
--nu-text-link-hover | var(--nu-brand-800) | var(--nu-brand-200) |
--nu-border-regular | #d3d5d9 | #474747 |
--nu-border-strong | var(--nu-gray-400) | var(--nu-gray-500) |
--nu-border-control | var(--nu-gray-500) | var(--nu-gray-400) |
--nu-border-control-hover | var(--nu-gray-600) | var(--nu-gray-300) |
Roles
| Token | Light | Dark |
|---|---|---|
--nu-brand | var(--nu-brand-700) | var(--nu-brand-400) |
--nu-brand-hover | var(--nu-brand-800) | var(--nu-brand-300) |
--nu-brand-active | var(--nu-brand-900) | var(--nu-brand-200) |
--nu-brand-subtle | var(--nu-brand-50) | var(--nu-brand-950) |
--nu-brand-border | var(--nu-brand-200) | var(--nu-brand-800) |
--nu-text-brand | var(--nu-brand-700) | var(--nu-brand-300) |
--nu-success | var(--nu-success-700) | var(--nu-success-400) |
--nu-success-hover | var(--nu-success-800) | var(--nu-success-300) |
--nu-success-active | var(--nu-success-900) | var(--nu-success-200) |
--nu-success-subtle | var(--nu-success-50) | var(--nu-success-950) |
--nu-success-border | var(--nu-success-200) | var(--nu-success-800) |
--nu-text-success | var(--nu-success-800) | var(--nu-success-300) |
--nu-danger | var(--nu-danger-700) | var(--nu-danger-400) |
--nu-danger-hover | var(--nu-danger-800) | var(--nu-danger-300) |
--nu-danger-active | var(--nu-danger-900) | var(--nu-danger-200) |
--nu-danger-subtle | var(--nu-danger-50) | var(--nu-danger-950) |
--nu-danger-border | var(--nu-danger-200) | var(--nu-danger-800) |
--nu-text-danger | var(--nu-danger-700) | var(--nu-danger-300) |
--nu-warning | var(--nu-warning-500) | var(--nu-warning-400) |
--nu-warning-hover | var(--nu-warning-600) | var(--nu-warning-300) |
--nu-warning-active | var(--nu-warning-700) | var(--nu-warning-200) |
--nu-warning-subtle | var(--nu-warning-50) | var(--nu-warning-950) |
--nu-warning-border | var(--nu-warning-200) | var(--nu-warning-800) |
--nu-text-warning | var(--nu-warning-800) | var(--nu-warning-300) |
--nu-info | var(--nu-info-700) | var(--nu-info-400) |
--nu-info-hover | var(--nu-info-800) | var(--nu-info-300) |
--nu-info-active | var(--nu-info-900) | var(--nu-info-200) |
--nu-info-subtle | var(--nu-info-50) | var(--nu-info-950) |
--nu-info-border | var(--nu-info-200) | var(--nu-info-800) |
--nu-text-info | var(--nu-info-800) | var(--nu-info-300) |
--nu-text-on-brand | #f1f1f1 | #1a1a1a |
--nu-text-on-success | #f1f1f1 | #1a1a1a |
--nu-text-on-danger | #f1f1f1 | #1a1a1a |
--nu-text-on-warning | #1a1a1a | #1a1a1a |
--nu-text-on-info | #f1f1f1 | #1a1a1a |
--nu-error | var(--nu-danger) | var(--nu-danger) |
--nu-error-hover | var(--nu-danger-hover) | var(--nu-danger-hover) |
--nu-error-active | var(--nu-danger-active) | var(--nu-danger-active) |
--nu-error-subtle | var(--nu-danger-subtle) | var(--nu-danger-subtle) |
--nu-error-border | var(--nu-danger-border) | var(--nu-danger-border) |
--nu-text-error | var(--nu-text-danger) | var(--nu-text-danger) |
--nu-text-on-error | var(--nu-text-on-danger) | var(--nu-text-on-danger) |
Hue roles
| Token | Light | Dark |
|---|---|---|
--nu-gray-subtle | var(--nu-gray-50) | var(--nu-gray-950) |
--nu-gray-border | var(--nu-gray-200) | var(--nu-gray-800) |
--nu-text-gray | var(--nu-gray-700) | var(--nu-gray-300) |
--nu-red-subtle | var(--nu-red-50) | var(--nu-red-950) |
--nu-red-border | var(--nu-red-200) | var(--nu-red-800) |
--nu-text-red | var(--nu-red-700) | var(--nu-red-300) |
--nu-blue-subtle | var(--nu-blue-50) | var(--nu-blue-950) |
--nu-blue-border | var(--nu-blue-200) | var(--nu-blue-800) |
--nu-text-blue | var(--nu-blue-700) | var(--nu-blue-300) |
--nu-green-subtle | var(--nu-green-50) | var(--nu-green-950) |
--nu-green-border | var(--nu-green-200) | var(--nu-green-800) |
--nu-text-green | var(--nu-green-800) | var(--nu-green-300) |
--nu-yellow-subtle | var(--nu-yellow-50) | var(--nu-yellow-950) |
--nu-yellow-border | var(--nu-yellow-200) | var(--nu-yellow-800) |
--nu-text-yellow | var(--nu-yellow-800) | var(--nu-yellow-300) |
--nu-purple-subtle | var(--nu-purple-50) | var(--nu-purple-950) |
--nu-purple-border | var(--nu-purple-200) | var(--nu-purple-800) |
--nu-text-purple | var(--nu-purple-700) | var(--nu-purple-300) |
--nu-pink-subtle | var(--nu-pink-50) | var(--nu-pink-950) |
--nu-pink-border | var(--nu-pink-200) | var(--nu-pink-800) |
--nu-text-pink | var(--nu-pink-700) | var(--nu-pink-300) |
Class reference
Section titled “Class reference”Generated from the compiled core build. Each rule lists the class and its state forms.
Background: theme words, roles, hues, basic (36 rules)
| Selector | Declarations | Default value |
|---|---|---|
.bg-brand,
.hover:bg-brand:hover,
.group:hover .group-hover:bg-brand | background-color: var(--nu-brand) | var(--nu-brand-700) |
.bg-brand-subtle,
.hover:bg-brand-subtle:hover,
.group:hover .group-hover:bg-brand-subtle | background-color: var(--nu-brand-subtle) | var(--nu-brand-50) |
.bg-success,
.hover:bg-success:hover,
.group:hover .group-hover:bg-success | background-color: var(--nu-success) | var(--nu-success-700) |
.bg-success-subtle,
.hover:bg-success-subtle:hover,
.group:hover .group-hover:bg-success-subtle | background-color: var(--nu-success-subtle) | var(--nu-success-50) |
.bg-danger,
.hover:bg-danger:hover,
.group:hover .group-hover:bg-danger | background-color: var(--nu-danger) | var(--nu-danger-700) |
.bg-danger-subtle,
.hover:bg-danger-subtle:hover,
.group:hover .group-hover:bg-danger-subtle | background-color: var(--nu-danger-subtle) | var(--nu-danger-50) |
.bg-warning,
.hover:bg-warning:hover,
.group:hover .group-hover:bg-warning | background-color: var(--nu-warning) | var(--nu-warning-500) |
.bg-warning-subtle,
.hover:bg-warning-subtle:hover,
.group:hover .group-hover:bg-warning-subtle | background-color: var(--nu-warning-subtle) | var(--nu-warning-50) |
.bg-info,
.hover:bg-info:hover,
.group:hover .group-hover:bg-info | background-color: var(--nu-info) | var(--nu-info-700) |
.bg-info-subtle,
.hover:bg-info-subtle:hover,
.group:hover .group-hover:bg-info-subtle | background-color: var(--nu-info-subtle) | var(--nu-info-50) |
.bg-gray,
.hover:bg-gray:hover,
.group:hover .group-hover:bg-gray | background-color: var(--nu-gray-500) | #6b7280 |
.bg-gray-subtle,
.hover:bg-gray-subtle:hover,
.group:hover .group-hover:bg-gray-subtle | background-color: var(--nu-gray-subtle) | var(--nu-gray-50) |
.bg-red,
.hover:bg-red:hover,
.group:hover .group-hover:bg-red | background-color: var(--nu-red-500) | #ef4444 |
.bg-red-subtle,
.hover:bg-red-subtle:hover,
.group:hover .group-hover:bg-red-subtle | background-color: var(--nu-red-subtle) | var(--nu-red-50) |
.bg-blue,
.hover:bg-blue:hover,
.group:hover .group-hover:bg-blue | background-color: var(--nu-blue-500) | #3b82f6 |
.bg-blue-subtle,
.hover:bg-blue-subtle:hover,
.group:hover .group-hover:bg-blue-subtle | background-color: var(--nu-blue-subtle) | var(--nu-blue-50) |
.bg-green,
.hover:bg-green:hover,
.group:hover .group-hover:bg-green | background-color: var(--nu-green-500) | #22c55e |
.bg-green-subtle,
.hover:bg-green-subtle:hover,
.group:hover .group-hover:bg-green-subtle | background-color: var(--nu-green-subtle) | var(--nu-green-50) |
.bg-yellow,
.hover:bg-yellow:hover,
.group:hover .group-hover:bg-yellow | background-color: var(--nu-yellow-500) | #eab308 |
.bg-yellow-subtle,
.hover:bg-yellow-subtle:hover,
.group:hover .group-hover:bg-yellow-subtle | background-color: var(--nu-yellow-subtle) | var(--nu-yellow-50) |
.bg-purple,
.hover:bg-purple:hover,
.group:hover .group-hover:bg-purple | background-color: var(--nu-purple-500) | #a855f7 |
.bg-purple-subtle,
.hover:bg-purple-subtle:hover,
.group:hover .group-hover:bg-purple-subtle | background-color: var(--nu-purple-subtle) | var(--nu-purple-50) |
.bg-pink,
.hover:bg-pink:hover,
.group:hover .group-hover:bg-pink | background-color: var(--nu-pink-500) | #ec4899 |
.bg-pink-subtle,
.hover:bg-pink-subtle:hover,
.group:hover .group-hover:bg-pink-subtle | background-color: var(--nu-pink-subtle) | var(--nu-pink-50) |
.bg-error,
.hover:bg-error:hover,
.group:hover .group-hover:bg-error | background-color: var(--nu-error) | var(--nu-danger) |
.bg-error-subtle,
.hover:bg-error-subtle:hover,
.group:hover .group-hover:bg-error-subtle | background-color: var(--nu-error-subtle) | var(--nu-danger-subtle) |
.bg-black,
.hover:bg-black:hover,
.group:hover .group-hover:bg-black | background-color: var(--nu-black) | #000 |
.bg-white,
.hover:bg-white:hover,
.group:hover .group-hover:bg-white | background-color: var(--nu-white) | #fff |
.bg-transparent,
.hover:bg-transparent:hover,
.group:hover .group-hover:bg-transparent | background-color: var(--nu-transparent) | transparent |
.bg-base,
.hover:bg-base:hover,
.group:hover .group-hover:bg-base | background-color: var(--nu-bg-base) | #fbfafc |
.bg-surface,
.hover:bg-surface:hover,
.group:hover .group-hover:bg-surface | background-color: var(--nu-bg-surface) | #fff |
.bg-alternate,
.hover:bg-alternate:hover,
.group:hover .group-hover:bg-alternate | background-color: var(--nu-bg-alternate) | var(--nu-gray-100) |
.bg-raised,
.hover:bg-raised:hover,
.group:hover .group-hover:bg-raised | background-color: var(--nu-bg-raised) | #fff |
.bg-hover,
.hover:bg-hover:hover,
.group:hover .group-hover:bg-hover | background-color: var(--nu-bg-hover) | var(--nu-gray-100) |
.bg-selected,
.hover:bg-selected:hover,
.group:hover .group-hover:bg-selected | background-color: var(--nu-bg-selected) | var(--nu-brand-50) |
.bg-disabled,
.hover:bg-disabled:hover,
.group:hover .group-hover:bg-disabled | background-color: var(--nu-bg-disabled) | var(--nu-gray-100) |
Background shades (132 rules)
| Selector | Declarations | Default value |
|---|---|---|
.bg-brand-50,
.hover:bg-brand-50:hover,
.group:hover .group-hover:bg-brand-50 | background-color: var(--nu-brand-50) | #ebf3ff |
.bg-brand-100,
.hover:bg-brand-100:hover,
.group:hover .group-hover:bg-brand-100 | background-color: var(--nu-brand-100) | #dbeaff |
.bg-brand-200,
.hover:bg-brand-200:hover,
.group:hover .group-hover:bg-brand-200 | background-color: var(--nu-brand-200) | #bad7ff |
.bg-brand-300,
.hover:bg-brand-300:hover,
.group:hover .group-hover:bg-brand-300 | background-color: var(--nu-brand-300) | #91beff |
.bg-brand-400,
.hover:bg-brand-400:hover,
.group:hover .group-hover:bg-brand-400 | background-color: var(--nu-brand-400) | #5ca0ff |
.bg-brand-500,
.hover:bg-brand-500:hover,
.group:hover .group-hover:bg-brand-500 | background-color: var(--nu-brand-500) | #007bff |
.bg-brand-600,
.hover:bg-brand-600:hover,
.group:hover .group-hover:bg-brand-600 | background-color: var(--nu-brand-600) | #006be0 |
.bg-brand-700,
.hover:bg-brand-700:hover,
.group:hover .group-hover:bg-brand-700 | background-color: var(--nu-brand-700) | #0058bb |
.bg-brand-800,
.hover:bg-brand-800:hover,
.group:hover .group-hover:bg-brand-800 | background-color: var(--nu-brand-800) | #004494 |
.bg-brand-900,
.hover:bg-brand-900:hover,
.group:hover .group-hover:bg-brand-900 | background-color: var(--nu-brand-900) | #003270 |
.bg-brand-950,
.hover:bg-brand-950:hover,
.group:hover .group-hover:bg-brand-950 | background-color: var(--nu-brand-950) | #002352 |
.bg-success-50,
.hover:bg-success-50:hover,
.group:hover .group-hover:bg-success-50 | background-color: var(--nu-success-50) | #e5fae6 |
.bg-success-100,
.hover:bg-success-100:hover,
.group:hover .group-hover:bg-success-100 | background-color: var(--nu-success-100) | #cef7d1 |
.bg-success-200,
.hover:bg-success-200:hover,
.group:hover .group-hover:bg-success-200 | background-color: var(--nu-success-200) | #a8ecae |
.bg-success-300,
.hover:bg-success-300:hover,
.group:hover .group-hover:bg-success-300 | background-color: var(--nu-success-300) | #7fdb89 |
.bg-success-400,
.hover:bg-success-400:hover,
.group:hover .group-hover:bg-success-400 | background-color: var(--nu-success-400) | #54c365 |
.bg-success-500,
.hover:bg-success-500:hover,
.group:hover .group-hover:bg-success-500 | background-color: var(--nu-success-500) | #28a745 |
.bg-success-600,
.hover:bg-success-600:hover,
.group:hover .group-hover:bg-success-600 | background-color: var(--nu-success-600) | #059333 |
.bg-success-700,
.hover:bg-success-700:hover,
.group:hover .group-hover:bg-success-700 | background-color: var(--nu-success-700) | #007a28 |
.bg-success-800,
.hover:bg-success-800:hover,
.group:hover .group-hover:bg-success-800 | background-color: var(--nu-success-800) | #005e1d |
.bg-success-900,
.hover:bg-success-900:hover,
.group:hover .group-hover:bg-success-900 | background-color: var(--nu-success-900) | #004513 |
.bg-success-950,
.hover:bg-success-950:hover,
.group:hover .group-hover:bg-success-950 | background-color: var(--nu-success-950) | #00300b |
.bg-danger-50,
.hover:bg-danger-50:hover,
.group:hover .group-hover:bg-danger-50 | background-color: var(--nu-danger-50) | #ffeeed |
.bg-danger-100,
.hover:bg-danger-100:hover,
.group:hover .group-hover:bg-danger-100 | background-color: var(--nu-danger-100) | #ffdfde |
.bg-danger-200,
.hover:bg-danger-200:hover,
.group:hover .group-hover:bg-danger-200 | background-color: var(--nu-danger-200) | #ffc1bf |
.bg-danger-300,
.hover:bg-danger-300:hover,
.group:hover .group-hover:bg-danger-300 | background-color: var(--nu-danger-300) | #ff9997 |
.bg-danger-400,
.hover:bg-danger-400:hover,
.group:hover .group-hover:bg-danger-400 | background-color: var(--nu-danger-400) | #fd6066 |
.bg-danger-500,
.hover:bg-danger-500:hover,
.group:hover .group-hover:bg-danger-500 | background-color: var(--nu-danger-500) | #dc3545 |
.bg-danger-600,
.hover:bg-danger-600:hover,
.group:hover .group-hover:bg-danger-600 | background-color: var(--nu-danger-600) | #c72037 |
.bg-danger-700,
.hover:bg-danger-700:hover,
.group:hover .group-hover:bg-danger-700 | background-color: var(--nu-danger-700) | #ab0728 |
.bg-danger-800,
.hover:bg-danger-800:hover,
.group:hover .group-hover:bg-danger-800 | background-color: var(--nu-danger-800) | #88001c |
.bg-danger-900,
.hover:bg-danger-900:hover,
.group:hover .group-hover:bg-danger-900 | background-color: var(--nu-danger-900) | #670013 |
.bg-danger-950,
.hover:bg-danger-950:hover,
.group:hover .group-hover:bg-danger-950 | background-color: var(--nu-danger-950) | #4c000b |
.bg-warning-50,
.hover:bg-warning-50:hover,
.group:hover .group-hover:bg-warning-50 | background-color: var(--nu-warning-50) | #fff6e5 |
.bg-warning-100,
.hover:bg-warning-100:hover,
.group:hover .group-hover:bg-warning-100 | background-color: var(--nu-warning-100) | #fff2d8 |
.bg-warning-200,
.hover:bg-warning-200:hover,
.group:hover .group-hover:bg-warning-200 | background-color: var(--nu-warning-200) | #ffeabe |
.bg-warning-300,
.hover:bg-warning-300:hover,
.group:hover .group-hover:bg-warning-300 | background-color: var(--nu-warning-300) | #ffdf9c |
.bg-warning-400,
.hover:bg-warning-400:hover,
.group:hover .group-hover:bg-warning-400 | background-color: var(--nu-warning-400) | #ffd16c |
.bg-warning-500,
.hover:bg-warning-500:hover,
.group:hover .group-hover:bg-warning-500 | background-color: var(--nu-warning-500) | #ffc107 |
.bg-warning-600,
.hover:bg-warning-600:hover,
.group:hover .group-hover:bg-warning-600 | background-color: var(--nu-warning-600) | #dca600 |
.bg-warning-700,
.hover:bg-warning-700:hover,
.group:hover .group-hover:bg-warning-700 | background-color: var(--nu-warning-700) | #b28600 |
.bg-warning-800,
.hover:bg-warning-800:hover,
.group:hover .group-hover:bg-warning-800 | background-color: var(--nu-warning-800) | #866300 |
.bg-warning-900,
.hover:bg-warning-900:hover,
.group:hover .group-hover:bg-warning-900 | background-color: var(--nu-warning-900) | #5e4500 |
.bg-warning-950,
.hover:bg-warning-950:hover,
.group:hover .group-hover:bg-warning-950 | background-color: var(--nu-warning-950) | #3d2b00 |
.bg-info-50,
.hover:bg-info-50:hover,
.group:hover .group-hover:bg-info-50 | background-color: var(--nu-info-50) | #e4f8fc |
.bg-info-100,
.hover:bg-info-100:hover,
.group:hover .group-hover:bg-info-100 | background-color: var(--nu-info-100) | #ccf3fb |
.bg-info-200,
.hover:bg-info-200:hover,
.group:hover .group-hover:bg-info-200 | background-color: var(--nu-info-200) | #a4e6f4 |
.bg-info-300,
.hover:bg-info-300:hover,
.group:hover .group-hover:bg-info-300 | background-color: var(--nu-info-300) | #79d4e6 |
.bg-info-400,
.hover:bg-info-400:hover,
.group:hover .group-hover:bg-info-400 | background-color: var(--nu-info-400) | #4cbdd2 |
.bg-info-500,
.hover:bg-info-500:hover,
.group:hover .group-hover:bg-info-500 | background-color: var(--nu-info-500) | #17a2b8 |
.bg-info-600,
.hover:bg-info-600:hover,
.group:hover .group-hover:bg-info-600 | background-color: var(--nu-info-600) | #008da1 |
.bg-info-700,
.hover:bg-info-700:hover,
.group:hover .group-hover:bg-info-700 | background-color: var(--nu-info-700) | #007485 |
.bg-info-800,
.hover:bg-info-800:hover,
.group:hover .group-hover:bg-info-800 | background-color: var(--nu-info-800) | #005a67 |
.bg-info-900,
.hover:bg-info-900:hover,
.group:hover .group-hover:bg-info-900 | background-color: var(--nu-info-900) | #00414c |
.bg-info-950,
.hover:bg-info-950:hover,
.group:hover .group-hover:bg-info-950 | background-color: var(--nu-info-950) | #002d35 |
.bg-gray-50,
.hover:bg-gray-50:hover,
.group:hover .group-hover:bg-gray-50 | background-color: var(--nu-gray-50) | #f0f1f5 |
.bg-gray-100,
.hover:bg-gray-100:hover,
.group:hover .group-hover:bg-gray-100 | background-color: var(--nu-gray-100) | #e3e6ec |
.bg-gray-200,
.hover:bg-gray-200:hover,
.group:hover .group-hover:bg-gray-200 | background-color: var(--nu-gray-200) | #cacfd9 |
.bg-gray-300,
.hover:bg-gray-300:hover,
.group:hover .group-hover:bg-gray-300 | background-color: var(--nu-gray-300) | #adb4c0 |
.bg-gray-400,
.hover:bg-gray-400:hover,
.group:hover .group-hover:bg-gray-400 | background-color: var(--nu-gray-400) | #8d94a1 |
.bg-gray-500,
.hover:bg-gray-500:hover,
.group:hover .group-hover:bg-gray-500 | background-color: var(--nu-gray-500) | #6b7280 |
.bg-gray-600,
.hover:bg-gray-600:hover,
.group:hover .group-hover:bg-gray-600 | background-color: var(--nu-gray-600) | #5d6471 |
.bg-gray-700,
.hover:bg-gray-700:hover,
.group:hover .group-hover:bg-gray-700 | background-color: var(--nu-gray-700) | #4d535f |
.bg-gray-800,
.hover:bg-gray-800:hover,
.group:hover .group-hover:bg-gray-800 | background-color: var(--nu-gray-800) | #3c414c |
.bg-gray-900,
.hover:bg-gray-900:hover,
.group:hover .group-hover:bg-gray-900 | background-color: var(--nu-gray-900) | #2d3139 |
.bg-gray-950,
.hover:bg-gray-950:hover,
.group:hover .group-hover:bg-gray-950 | background-color: var(--nu-gray-950) | #20232a |
.bg-red-50,
.hover:bg-red-50:hover,
.group:hover .group-hover:bg-red-50 | background-color: var(--nu-red-50) | #ffefed |
.bg-red-100,
.hover:bg-red-100:hover,
.group:hover .group-hover:bg-red-100 | background-color: var(--nu-red-100) | #ffe2df |
.bg-red-200,
.hover:bg-red-200:hover,
.group:hover .group-hover:bg-red-200 | background-color: var(--nu-red-200) | #ffc8c3 |
.bg-red-300,
.hover:bg-red-300:hover,
.group:hover .group-hover:bg-red-300 | background-color: var(--nu-red-300) | #ffa69e |
.bg-red-400,
.hover:bg-red-400:hover,
.group:hover .group-hover:bg-red-400 | background-color: var(--nu-red-400) | #ff766f |
.bg-red-500,
.hover:bg-red-500:hover,
.group:hover .group-hover:bg-red-500 | background-color: var(--nu-red-500) | #ef4444 |
.bg-red-600,
.hover:bg-red-600:hover,
.group:hover .group-hover:bg-red-600 | background-color: var(--nu-red-600) | #d72f33 |
.bg-red-700,
.hover:bg-red-700:hover,
.group:hover .group-hover:bg-red-700 | background-color: var(--nu-red-700) | #b81822 |
.bg-red-800,
.hover:bg-red-800:hover,
.group:hover .group-hover:bg-red-800 | background-color: var(--nu-red-800) | #930013 |
.bg-red-900,
.hover:bg-red-900:hover,
.group:hover .group-hover:bg-red-900 | background-color: var(--nu-red-900) | #6e000c |
.bg-red-950,
.hover:bg-red-950:hover,
.group:hover .group-hover:bg-red-950 | background-color: var(--nu-red-950) | #4f0006 |
.bg-blue-50,
.hover:bg-blue-50:hover,
.group:hover .group-hover:bg-blue-50 | background-color: var(--nu-blue-50) | #ecf3ff |
.bg-blue-100,
.hover:bg-blue-100:hover,
.group:hover .group-hover:bg-blue-100 | background-color: var(--nu-blue-100) | #ddeaff |
.bg-blue-200,
.hover:bg-blue-200:hover,
.group:hover .group-hover:bg-blue-200 | background-color: var(--nu-blue-200) | #bfd8ff |
.bg-blue-300,
.hover:bg-blue-300:hover,
.group:hover .group-hover:bg-blue-300 | background-color: var(--nu-blue-300) | #9ac0ff |
.bg-blue-400,
.hover:bg-blue-400:hover,
.group:hover .group-hover:bg-blue-400 | background-color: var(--nu-blue-400) | #6ba3ff |
.bg-blue-500,
.hover:bg-blue-500:hover,
.group:hover .group-hover:bg-blue-500 | background-color: var(--nu-blue-500) | #3b82f6 |
.bg-blue-600,
.hover:bg-blue-600:hover,
.group:hover .group-hover:bg-blue-600 | background-color: var(--nu-blue-600) | #2a70df |
.bg-blue-700,
.hover:bg-blue-700:hover,
.group:hover .group-hover:bg-blue-700 | background-color: var(--nu-blue-700) | #1a5ac1 |
.bg-blue-800,
.hover:bg-blue-800:hover,
.group:hover .group-hover:bg-blue-800 | background-color: var(--nu-blue-800) | #0b449c |
.bg-blue-900,
.hover:bg-blue-900:hover,
.group:hover .group-hover:bg-blue-900 | background-color: var(--nu-blue-900) | #023179 |
.bg-blue-950,
.hover:bg-blue-950:hover,
.group:hover .group-hover:bg-blue-950 | background-color: var(--nu-blue-950) | #012158 |
.bg-green-50,
.hover:bg-green-50:hover,
.group:hover .group-hover:bg-green-50 | background-color: var(--nu-green-50) | #e4fde7 |
.bg-green-100,
.hover:bg-green-100:hover,
.group:hover .group-hover:bg-green-100 | background-color: var(--nu-green-100) | #ccfcd4 |
.bg-green-200,
.hover:bg-green-200:hover,
.group:hover .group-hover:bg-green-200 | background-color: var(--nu-green-200) | #a6f7b6 |
.bg-green-300,
.hover:bg-green-300:hover,
.group:hover .group-hover:bg-green-300 | background-color: var(--nu-green-300) | #7ceb96 |
.bg-green-400,
.hover:bg-green-400:hover,
.group:hover .group-hover:bg-green-400 | background-color: var(--nu-green-400) | #50da78 |
.bg-green-500,
.hover:bg-green-500:hover,
.group:hover .group-hover:bg-green-500 | background-color: var(--nu-green-500) | #22c55e |
.bg-green-600,
.hover:bg-green-600:hover,
.group:hover .group-hover:bg-green-600 | background-color: var(--nu-green-600) | #00ac4d |
.bg-green-700,
.hover:bg-green-700:hover,
.group:hover .group-hover:bg-green-700 | background-color: var(--nu-green-700) | #008d3d |
.bg-green-800,
.hover:bg-green-800:hover,
.group:hover .group-hover:bg-green-800 | background-color: var(--nu-green-800) | #006b2d |
.bg-green-900,
.hover:bg-green-900:hover,
.group:hover .group-hover:bg-green-900 | background-color: var(--nu-green-900) | #004d1e |
.bg-green-950,
.hover:bg-green-950:hover,
.group:hover .group-hover:bg-green-950 | background-color: var(--nu-green-950) | #003412 |
.bg-yellow-50,
.hover:bg-yellow-50:hover,
.group:hover .group-hover:bg-yellow-50 | background-color: var(--nu-yellow-50) | #fff5e1 |
.bg-yellow-100,
.hover:bg-yellow-100:hover,
.group:hover .group-hover:bg-yellow-100 | background-color: var(--nu-yellow-100) | #fff0cf |
.bg-yellow-200,
.hover:bg-yellow-200:hover,
.group:hover .group-hover:bg-yellow-200 | background-color: var(--nu-yellow-200) | #ffe4aa |
.bg-yellow-300,
.hover:bg-yellow-300:hover,
.group:hover .group-hover:bg-yellow-300 | background-color: var(--nu-yellow-300) | #ffd576 |
.bg-yellow-400,
.hover:bg-yellow-400:hover,
.group:hover .group-hover:bg-yellow-400 | background-color: var(--nu-yellow-400) | #f8c43f |
.bg-yellow-500,
.hover:bg-yellow-500:hover,
.group:hover .group-hover:bg-yellow-500 | background-color: var(--nu-yellow-500) | #eab308 |
.bg-yellow-600,
.hover:bg-yellow-600:hover,
.group:hover .group-hover:bg-yellow-600 | background-color: var(--nu-yellow-600) | #ca9a00 |
.bg-yellow-700,
.hover:bg-yellow-700:hover,
.group:hover .group-hover:bg-yellow-700 | background-color: var(--nu-yellow-700) | #a57d00 |
.bg-yellow-800,
.hover:bg-yellow-800:hover,
.group:hover .group-hover:bg-yellow-800 | background-color: var(--nu-yellow-800) | #7c5d00 |
.bg-yellow-900,
.hover:bg-yellow-900:hover,
.group:hover .group-hover:bg-yellow-900 | background-color: var(--nu-yellow-900) | #584100 |
.bg-yellow-950,
.hover:bg-yellow-950:hover,
.group:hover .group-hover:bg-yellow-950 | background-color: var(--nu-yellow-950) | #3a2a00 |
.bg-purple-50,
.hover:bg-purple-50:hover,
.group:hover .group-hover:bg-purple-50 | background-color: var(--nu-purple-50) | #f6f0ff |
.bg-purple-100,
.hover:bg-purple-100:hover,
.group:hover .group-hover:bg-purple-100 | background-color: var(--nu-purple-100) | #efe4ff |
.bg-purple-200,
.hover:bg-purple-200:hover,
.group:hover .group-hover:bg-purple-200 | background-color: var(--nu-purple-200) | #e1cbff |
.bg-purple-300,
.hover:bg-purple-300:hover,
.group:hover .group-hover:bg-purple-300 | background-color: var(--nu-purple-300) | #d0acff |
.bg-purple-400,
.hover:bg-purple-400:hover,
.group:hover .group-hover:bg-purple-400 | background-color: var(--nu-purple-400) | #bd83ff |
.bg-purple-500,
.hover:bg-purple-500:hover,
.group:hover .group-hover:bg-purple-500 | background-color: var(--nu-purple-500) | #a855f7 |
.bg-purple-600,
.hover:bg-purple-600:hover,
.group:hover .group-hover:bg-purple-600 | background-color: var(--nu-purple-600) | #9542e0 |
.bg-purple-700,
.hover:bg-purple-700:hover,
.group:hover .group-hover:bg-purple-700 | background-color: var(--nu-purple-700) | #7e2ec1 |
.bg-purple-800,
.hover:bg-purple-800:hover,
.group:hover .group-hover:bg-purple-800 | background-color: var(--nu-purple-800) | #631b9c |
.bg-purple-900,
.hover:bg-purple-900:hover,
.group:hover .group-hover:bg-purple-900 | background-color: var(--nu-purple-900) | #4b0d79 |
.bg-purple-950,
.hover:bg-purple-950:hover,
.group:hover .group-hover:bg-purple-950 | background-color: var(--nu-purple-950) | #350658 |
.bg-pink-50,
.hover:bg-pink-50:hover,
.group:hover .group-hover:bg-pink-50 | background-color: var(--nu-pink-50) | #ffeef4 |
.bg-pink-100,
.hover:bg-pink-100:hover,
.group:hover .group-hover:bg-pink-100 | background-color: var(--nu-pink-100) | #ffe2ec |
.bg-pink-200,
.hover:bg-pink-200:hover,
.group:hover .group-hover:bg-pink-200 | background-color: var(--nu-pink-200) | #ffc8dc |
.bg-pink-300,
.hover:bg-pink-300:hover,
.group:hover .group-hover:bg-pink-300 | background-color: var(--nu-pink-300) | #ffa5c9 |
.bg-pink-400,
.hover:bg-pink-400:hover,
.group:hover .group-hover:bg-pink-400 | background-color: var(--nu-pink-400) | #ff74b2 |
.bg-pink-500,
.hover:bg-pink-500:hover,
.group:hover .group-hover:bg-pink-500 | background-color: var(--nu-pink-500) | #ec4899 |
.bg-pink-600,
.hover:bg-pink-600:hover,
.group:hover .group-hover:bg-pink-600 | background-color: var(--nu-pink-600) | #d43386 |
.bg-pink-700,
.hover:bg-pink-700:hover,
.group:hover .group-hover:bg-pink-700 | background-color: var(--nu-pink-700) | #b41c6e |
.bg-pink-800,
.hover:bg-pink-800:hover,
.group:hover .group-hover:bg-pink-800 | background-color: var(--nu-pink-800) | #900455 |
.bg-pink-900,
.hover:bg-pink-900:hover,
.group:hover .group-hover:bg-pink-900 | background-color: var(--nu-pink-900) | #6b003e |
.bg-pink-950,
.hover:bg-pink-950:hover,
.group:hover .group-hover:bg-pink-950 | background-color: var(--nu-pink-950) | #4c002b |
Text: theme words, roles, hues, basic (22 rules)
| Selector | Declarations | Default value |
|---|---|---|
.text-brand,
.hover:text-brand:hover,
.group:hover .group-hover:text-brand | color: var(--nu-text-brand) | var(--nu-brand-700) |
.text-success,
.hover:text-success:hover,
.group:hover .group-hover:text-success | color: var(--nu-text-success) | var(--nu-success-800) |
.text-danger,
.hover:text-danger:hover,
.group:hover .group-hover:text-danger | color: var(--nu-text-danger) | var(--nu-danger-700) |
.text-warning,
.hover:text-warning:hover,
.group:hover .group-hover:text-warning | color: var(--nu-text-warning) | var(--nu-warning-800) |
.text-info,
.hover:text-info:hover,
.group:hover .group-hover:text-info | color: var(--nu-text-info) | var(--nu-info-800) |
.text-gray,
.hover:text-gray:hover,
.group:hover .group-hover:text-gray | color: var(--nu-text-gray) | var(--nu-gray-700) |
.text-red,
.hover:text-red:hover,
.group:hover .group-hover:text-red | color: var(--nu-text-red) | var(--nu-red-700) |
.text-blue,
.hover:text-blue:hover,
.group:hover .group-hover:text-blue | color: var(--nu-text-blue) | var(--nu-blue-700) |
.text-green,
.hover:text-green:hover,
.group:hover .group-hover:text-green | color: var(--nu-text-green) | var(--nu-green-800) |
.text-yellow,
.hover:text-yellow:hover,
.group:hover .group-hover:text-yellow | color: var(--nu-text-yellow) | var(--nu-yellow-800) |
.text-purple,
.hover:text-purple:hover,
.group:hover .group-hover:text-purple | color: var(--nu-text-purple) | var(--nu-purple-700) |
.text-pink,
.hover:text-pink:hover,
.group:hover .group-hover:text-pink | color: var(--nu-text-pink) | var(--nu-pink-700) |
.text-error,
.hover:text-error:hover,
.group:hover .group-hover:text-error | color: var(--nu-text-error) | var(--nu-text-danger) |
.text-black,
.hover:text-black:hover,
.group:hover .group-hover:text-black | color: var(--nu-black) | #000 |
.text-white,
.hover:text-white:hover,
.group:hover .group-hover:text-white | color: var(--nu-white) | #fff |
.text-transparent,
.hover:text-transparent:hover,
.group:hover .group-hover:text-transparent | color: var(--nu-transparent) | transparent |
.text-regular,
.hover:text-regular:hover,
.group:hover .group-hover:text-regular | color: var(--nu-text-regular) | #1a1a1a |
.text-muted,
.hover:text-muted:hover,
.group:hover .group-hover:text-muted | color: var(--nu-text-muted) | #666 |
.text-subtle,
.hover:text-subtle:hover,
.group:hover .group-hover:text-subtle | color: var(--nu-text-subtle) | #949494 |
.text-inverted,
.hover:text-inverted:hover,
.group:hover .group-hover:text-inverted | color: var(--nu-text-inverted) | #f1f1f1 |
.text-link,
.hover:text-link:hover,
.group:hover .group-hover:text-link | color: var(--nu-text-link) | var(--nu-brand-700) |
.text-link-hover,
.hover:text-link-hover:hover,
.group:hover .group-hover:text-link-hover | color: var(--nu-text-link-hover) | var(--nu-brand-800) |
Text on role fills (6 rules)
| Selector | Declarations | Default value |
|---|---|---|
.text-on-brand | color: var(--nu-text-on-brand) | #f1f1f1 |
.text-on-success | color: var(--nu-text-on-success) | #f1f1f1 |
.text-on-danger | color: var(--nu-text-on-danger) | #f1f1f1 |
.text-on-warning | color: var(--nu-text-on-warning) | #1a1a1a |
.text-on-info | color: var(--nu-text-on-info) | #f1f1f1 |
.text-on-error | color: var(--nu-text-on-error) | var(--nu-text-on-danger) |
Text shades (132 rules)
| Selector | Declarations | Default value |
|---|---|---|
.text-brand-50,
.hover:text-brand-50:hover,
.group:hover .group-hover:text-brand-50 | color: var(--nu-brand-50) | #ebf3ff |
.text-brand-100,
.hover:text-brand-100:hover,
.group:hover .group-hover:text-brand-100 | color: var(--nu-brand-100) | #dbeaff |
.text-brand-200,
.hover:text-brand-200:hover,
.group:hover .group-hover:text-brand-200 | color: var(--nu-brand-200) | #bad7ff |
.text-brand-300,
.hover:text-brand-300:hover,
.group:hover .group-hover:text-brand-300 | color: var(--nu-brand-300) | #91beff |
.text-brand-400,
.hover:text-brand-400:hover,
.group:hover .group-hover:text-brand-400 | color: var(--nu-brand-400) | #5ca0ff |
.text-brand-500,
.hover:text-brand-500:hover,
.group:hover .group-hover:text-brand-500 | color: var(--nu-brand-500) | #007bff |
.text-brand-600,
.hover:text-brand-600:hover,
.group:hover .group-hover:text-brand-600 | color: var(--nu-brand-600) | #006be0 |
.text-brand-700,
.hover:text-brand-700:hover,
.group:hover .group-hover:text-brand-700 | color: var(--nu-brand-700) | #0058bb |
.text-brand-800,
.hover:text-brand-800:hover,
.group:hover .group-hover:text-brand-800 | color: var(--nu-brand-800) | #004494 |
.text-brand-900,
.hover:text-brand-900:hover,
.group:hover .group-hover:text-brand-900 | color: var(--nu-brand-900) | #003270 |
.text-brand-950,
.hover:text-brand-950:hover,
.group:hover .group-hover:text-brand-950 | color: var(--nu-brand-950) | #002352 |
.text-success-50,
.hover:text-success-50:hover,
.group:hover .group-hover:text-success-50 | color: var(--nu-success-50) | #e5fae6 |
.text-success-100,
.hover:text-success-100:hover,
.group:hover .group-hover:text-success-100 | color: var(--nu-success-100) | #cef7d1 |
.text-success-200,
.hover:text-success-200:hover,
.group:hover .group-hover:text-success-200 | color: var(--nu-success-200) | #a8ecae |
.text-success-300,
.hover:text-success-300:hover,
.group:hover .group-hover:text-success-300 | color: var(--nu-success-300) | #7fdb89 |
.text-success-400,
.hover:text-success-400:hover,
.group:hover .group-hover:text-success-400 | color: var(--nu-success-400) | #54c365 |
.text-success-500,
.hover:text-success-500:hover,
.group:hover .group-hover:text-success-500 | color: var(--nu-success-500) | #28a745 |
.text-success-600,
.hover:text-success-600:hover,
.group:hover .group-hover:text-success-600 | color: var(--nu-success-600) | #059333 |
.text-success-700,
.hover:text-success-700:hover,
.group:hover .group-hover:text-success-700 | color: var(--nu-success-700) | #007a28 |
.text-success-800,
.hover:text-success-800:hover,
.group:hover .group-hover:text-success-800 | color: var(--nu-success-800) | #005e1d |
.text-success-900,
.hover:text-success-900:hover,
.group:hover .group-hover:text-success-900 | color: var(--nu-success-900) | #004513 |
.text-success-950,
.hover:text-success-950:hover,
.group:hover .group-hover:text-success-950 | color: var(--nu-success-950) | #00300b |
.text-danger-50,
.hover:text-danger-50:hover,
.group:hover .group-hover:text-danger-50 | color: var(--nu-danger-50) | #ffeeed |
.text-danger-100,
.hover:text-danger-100:hover,
.group:hover .group-hover:text-danger-100 | color: var(--nu-danger-100) | #ffdfde |
.text-danger-200,
.hover:text-danger-200:hover,
.group:hover .group-hover:text-danger-200 | color: var(--nu-danger-200) | #ffc1bf |
.text-danger-300,
.hover:text-danger-300:hover,
.group:hover .group-hover:text-danger-300 | color: var(--nu-danger-300) | #ff9997 |
.text-danger-400,
.hover:text-danger-400:hover,
.group:hover .group-hover:text-danger-400 | color: var(--nu-danger-400) | #fd6066 |
.text-danger-500,
.hover:text-danger-500:hover,
.group:hover .group-hover:text-danger-500 | color: var(--nu-danger-500) | #dc3545 |
.text-danger-600,
.hover:text-danger-600:hover,
.group:hover .group-hover:text-danger-600 | color: var(--nu-danger-600) | #c72037 |
.text-danger-700,
.hover:text-danger-700:hover,
.group:hover .group-hover:text-danger-700 | color: var(--nu-danger-700) | #ab0728 |
.text-danger-800,
.hover:text-danger-800:hover,
.group:hover .group-hover:text-danger-800 | color: var(--nu-danger-800) | #88001c |
.text-danger-900,
.hover:text-danger-900:hover,
.group:hover .group-hover:text-danger-900 | color: var(--nu-danger-900) | #670013 |
.text-danger-950,
.hover:text-danger-950:hover,
.group:hover .group-hover:text-danger-950 | color: var(--nu-danger-950) | #4c000b |
.text-warning-50,
.hover:text-warning-50:hover,
.group:hover .group-hover:text-warning-50 | color: var(--nu-warning-50) | #fff6e5 |
.text-warning-100,
.hover:text-warning-100:hover,
.group:hover .group-hover:text-warning-100 | color: var(--nu-warning-100) | #fff2d8 |
.text-warning-200,
.hover:text-warning-200:hover,
.group:hover .group-hover:text-warning-200 | color: var(--nu-warning-200) | #ffeabe |
.text-warning-300,
.hover:text-warning-300:hover,
.group:hover .group-hover:text-warning-300 | color: var(--nu-warning-300) | #ffdf9c |
.text-warning-400,
.hover:text-warning-400:hover,
.group:hover .group-hover:text-warning-400 | color: var(--nu-warning-400) | #ffd16c |
.text-warning-500,
.hover:text-warning-500:hover,
.group:hover .group-hover:text-warning-500 | color: var(--nu-warning-500) | #ffc107 |
.text-warning-600,
.hover:text-warning-600:hover,
.group:hover .group-hover:text-warning-600 | color: var(--nu-warning-600) | #dca600 |
.text-warning-700,
.hover:text-warning-700:hover,
.group:hover .group-hover:text-warning-700 | color: var(--nu-warning-700) | #b28600 |
.text-warning-800,
.hover:text-warning-800:hover,
.group:hover .group-hover:text-warning-800 | color: var(--nu-warning-800) | #866300 |
.text-warning-900,
.hover:text-warning-900:hover,
.group:hover .group-hover:text-warning-900 | color: var(--nu-warning-900) | #5e4500 |
.text-warning-950,
.hover:text-warning-950:hover,
.group:hover .group-hover:text-warning-950 | color: var(--nu-warning-950) | #3d2b00 |
.text-info-50,
.hover:text-info-50:hover,
.group:hover .group-hover:text-info-50 | color: var(--nu-info-50) | #e4f8fc |
.text-info-100,
.hover:text-info-100:hover,
.group:hover .group-hover:text-info-100 | color: var(--nu-info-100) | #ccf3fb |
.text-info-200,
.hover:text-info-200:hover,
.group:hover .group-hover:text-info-200 | color: var(--nu-info-200) | #a4e6f4 |
.text-info-300,
.hover:text-info-300:hover,
.group:hover .group-hover:text-info-300 | color: var(--nu-info-300) | #79d4e6 |
.text-info-400,
.hover:text-info-400:hover,
.group:hover .group-hover:text-info-400 | color: var(--nu-info-400) | #4cbdd2 |
.text-info-500,
.hover:text-info-500:hover,
.group:hover .group-hover:text-info-500 | color: var(--nu-info-500) | #17a2b8 |
.text-info-600,
.hover:text-info-600:hover,
.group:hover .group-hover:text-info-600 | color: var(--nu-info-600) | #008da1 |
.text-info-700,
.hover:text-info-700:hover,
.group:hover .group-hover:text-info-700 | color: var(--nu-info-700) | #007485 |
.text-info-800,
.hover:text-info-800:hover,
.group:hover .group-hover:text-info-800 | color: var(--nu-info-800) | #005a67 |
.text-info-900,
.hover:text-info-900:hover,
.group:hover .group-hover:text-info-900 | color: var(--nu-info-900) | #00414c |
.text-info-950,
.hover:text-info-950:hover,
.group:hover .group-hover:text-info-950 | color: var(--nu-info-950) | #002d35 |
.text-gray-50,
.hover:text-gray-50:hover,
.group:hover .group-hover:text-gray-50 | color: var(--nu-gray-50) | #f0f1f5 |
.text-gray-100,
.hover:text-gray-100:hover,
.group:hover .group-hover:text-gray-100 | color: var(--nu-gray-100) | #e3e6ec |
.text-gray-200,
.hover:text-gray-200:hover,
.group:hover .group-hover:text-gray-200 | color: var(--nu-gray-200) | #cacfd9 |
.text-gray-300,
.hover:text-gray-300:hover,
.group:hover .group-hover:text-gray-300 | color: var(--nu-gray-300) | #adb4c0 |
.text-gray-400,
.hover:text-gray-400:hover,
.group:hover .group-hover:text-gray-400 | color: var(--nu-gray-400) | #8d94a1 |
.text-gray-500,
.hover:text-gray-500:hover,
.group:hover .group-hover:text-gray-500 | color: var(--nu-gray-500) | #6b7280 |
.text-gray-600,
.hover:text-gray-600:hover,
.group:hover .group-hover:text-gray-600 | color: var(--nu-gray-600) | #5d6471 |
.text-gray-700,
.hover:text-gray-700:hover,
.group:hover .group-hover:text-gray-700 | color: var(--nu-gray-700) | #4d535f |
.text-gray-800,
.hover:text-gray-800:hover,
.group:hover .group-hover:text-gray-800 | color: var(--nu-gray-800) | #3c414c |
.text-gray-900,
.hover:text-gray-900:hover,
.group:hover .group-hover:text-gray-900 | color: var(--nu-gray-900) | #2d3139 |
.text-gray-950,
.hover:text-gray-950:hover,
.group:hover .group-hover:text-gray-950 | color: var(--nu-gray-950) | #20232a |
.text-red-50,
.hover:text-red-50:hover,
.group:hover .group-hover:text-red-50 | color: var(--nu-red-50) | #ffefed |
.text-red-100,
.hover:text-red-100:hover,
.group:hover .group-hover:text-red-100 | color: var(--nu-red-100) | #ffe2df |
.text-red-200,
.hover:text-red-200:hover,
.group:hover .group-hover:text-red-200 | color: var(--nu-red-200) | #ffc8c3 |
.text-red-300,
.hover:text-red-300:hover,
.group:hover .group-hover:text-red-300 | color: var(--nu-red-300) | #ffa69e |
.text-red-400,
.hover:text-red-400:hover,
.group:hover .group-hover:text-red-400 | color: var(--nu-red-400) | #ff766f |
.text-red-500,
.hover:text-red-500:hover,
.group:hover .group-hover:text-red-500 | color: var(--nu-red-500) | #ef4444 |
.text-red-600,
.hover:text-red-600:hover,
.group:hover .group-hover:text-red-600 | color: var(--nu-red-600) | #d72f33 |
.text-red-700,
.hover:text-red-700:hover,
.group:hover .group-hover:text-red-700 | color: var(--nu-red-700) | #b81822 |
.text-red-800,
.hover:text-red-800:hover,
.group:hover .group-hover:text-red-800 | color: var(--nu-red-800) | #930013 |
.text-red-900,
.hover:text-red-900:hover,
.group:hover .group-hover:text-red-900 | color: var(--nu-red-900) | #6e000c |
.text-red-950,
.hover:text-red-950:hover,
.group:hover .group-hover:text-red-950 | color: var(--nu-red-950) | #4f0006 |
.text-blue-50,
.hover:text-blue-50:hover,
.group:hover .group-hover:text-blue-50 | color: var(--nu-blue-50) | #ecf3ff |
.text-blue-100,
.hover:text-blue-100:hover,
.group:hover .group-hover:text-blue-100 | color: var(--nu-blue-100) | #ddeaff |
.text-blue-200,
.hover:text-blue-200:hover,
.group:hover .group-hover:text-blue-200 | color: var(--nu-blue-200) | #bfd8ff |
.text-blue-300,
.hover:text-blue-300:hover,
.group:hover .group-hover:text-blue-300 | color: var(--nu-blue-300) | #9ac0ff |
.text-blue-400,
.hover:text-blue-400:hover,
.group:hover .group-hover:text-blue-400 | color: var(--nu-blue-400) | #6ba3ff |
.text-blue-500,
.hover:text-blue-500:hover,
.group:hover .group-hover:text-blue-500 | color: var(--nu-blue-500) | #3b82f6 |
.text-blue-600,
.hover:text-blue-600:hover,
.group:hover .group-hover:text-blue-600 | color: var(--nu-blue-600) | #2a70df |
.text-blue-700,
.hover:text-blue-700:hover,
.group:hover .group-hover:text-blue-700 | color: var(--nu-blue-700) | #1a5ac1 |
.text-blue-800,
.hover:text-blue-800:hover,
.group:hover .group-hover:text-blue-800 | color: var(--nu-blue-800) | #0b449c |
.text-blue-900,
.hover:text-blue-900:hover,
.group:hover .group-hover:text-blue-900 | color: var(--nu-blue-900) | #023179 |
.text-blue-950,
.hover:text-blue-950:hover,
.group:hover .group-hover:text-blue-950 | color: var(--nu-blue-950) | #012158 |
.text-green-50,
.hover:text-green-50:hover,
.group:hover .group-hover:text-green-50 | color: var(--nu-green-50) | #e4fde7 |
.text-green-100,
.hover:text-green-100:hover,
.group:hover .group-hover:text-green-100 | color: var(--nu-green-100) | #ccfcd4 |
.text-green-200,
.hover:text-green-200:hover,
.group:hover .group-hover:text-green-200 | color: var(--nu-green-200) | #a6f7b6 |
.text-green-300,
.hover:text-green-300:hover,
.group:hover .group-hover:text-green-300 | color: var(--nu-green-300) | #7ceb96 |
.text-green-400,
.hover:text-green-400:hover,
.group:hover .group-hover:text-green-400 | color: var(--nu-green-400) | #50da78 |
.text-green-500,
.hover:text-green-500:hover,
.group:hover .group-hover:text-green-500 | color: var(--nu-green-500) | #22c55e |
.text-green-600,
.hover:text-green-600:hover,
.group:hover .group-hover:text-green-600 | color: var(--nu-green-600) | #00ac4d |
.text-green-700,
.hover:text-green-700:hover,
.group:hover .group-hover:text-green-700 | color: var(--nu-green-700) | #008d3d |
.text-green-800,
.hover:text-green-800:hover,
.group:hover .group-hover:text-green-800 | color: var(--nu-green-800) | #006b2d |
.text-green-900,
.hover:text-green-900:hover,
.group:hover .group-hover:text-green-900 | color: var(--nu-green-900) | #004d1e |
.text-green-950,
.hover:text-green-950:hover,
.group:hover .group-hover:text-green-950 | color: var(--nu-green-950) | #003412 |
.text-yellow-50,
.hover:text-yellow-50:hover,
.group:hover .group-hover:text-yellow-50 | color: var(--nu-yellow-50) | #fff5e1 |
.text-yellow-100,
.hover:text-yellow-100:hover,
.group:hover .group-hover:text-yellow-100 | color: var(--nu-yellow-100) | #fff0cf |
.text-yellow-200,
.hover:text-yellow-200:hover,
.group:hover .group-hover:text-yellow-200 | color: var(--nu-yellow-200) | #ffe4aa |
.text-yellow-300,
.hover:text-yellow-300:hover,
.group:hover .group-hover:text-yellow-300 | color: var(--nu-yellow-300) | #ffd576 |
.text-yellow-400,
.hover:text-yellow-400:hover,
.group:hover .group-hover:text-yellow-400 | color: var(--nu-yellow-400) | #f8c43f |
.text-yellow-500,
.hover:text-yellow-500:hover,
.group:hover .group-hover:text-yellow-500 | color: var(--nu-yellow-500) | #eab308 |
.text-yellow-600,
.hover:text-yellow-600:hover,
.group:hover .group-hover:text-yellow-600 | color: var(--nu-yellow-600) | #ca9a00 |
.text-yellow-700,
.hover:text-yellow-700:hover,
.group:hover .group-hover:text-yellow-700 | color: var(--nu-yellow-700) | #a57d00 |
.text-yellow-800,
.hover:text-yellow-800:hover,
.group:hover .group-hover:text-yellow-800 | color: var(--nu-yellow-800) | #7c5d00 |
.text-yellow-900,
.hover:text-yellow-900:hover,
.group:hover .group-hover:text-yellow-900 | color: var(--nu-yellow-900) | #584100 |
.text-yellow-950,
.hover:text-yellow-950:hover,
.group:hover .group-hover:text-yellow-950 | color: var(--nu-yellow-950) | #3a2a00 |
.text-purple-50,
.hover:text-purple-50:hover,
.group:hover .group-hover:text-purple-50 | color: var(--nu-purple-50) | #f6f0ff |
.text-purple-100,
.hover:text-purple-100:hover,
.group:hover .group-hover:text-purple-100 | color: var(--nu-purple-100) | #efe4ff |
.text-purple-200,
.hover:text-purple-200:hover,
.group:hover .group-hover:text-purple-200 | color: var(--nu-purple-200) | #e1cbff |
.text-purple-300,
.hover:text-purple-300:hover,
.group:hover .group-hover:text-purple-300 | color: var(--nu-purple-300) | #d0acff |
.text-purple-400,
.hover:text-purple-400:hover,
.group:hover .group-hover:text-purple-400 | color: var(--nu-purple-400) | #bd83ff |
.text-purple-500,
.hover:text-purple-500:hover,
.group:hover .group-hover:text-purple-500 | color: var(--nu-purple-500) | #a855f7 |
.text-purple-600,
.hover:text-purple-600:hover,
.group:hover .group-hover:text-purple-600 | color: var(--nu-purple-600) | #9542e0 |
.text-purple-700,
.hover:text-purple-700:hover,
.group:hover .group-hover:text-purple-700 | color: var(--nu-purple-700) | #7e2ec1 |
.text-purple-800,
.hover:text-purple-800:hover,
.group:hover .group-hover:text-purple-800 | color: var(--nu-purple-800) | #631b9c |
.text-purple-900,
.hover:text-purple-900:hover,
.group:hover .group-hover:text-purple-900 | color: var(--nu-purple-900) | #4b0d79 |
.text-purple-950,
.hover:text-purple-950:hover,
.group:hover .group-hover:text-purple-950 | color: var(--nu-purple-950) | #350658 |
.text-pink-50,
.hover:text-pink-50:hover,
.group:hover .group-hover:text-pink-50 | color: var(--nu-pink-50) | #ffeef4 |
.text-pink-100,
.hover:text-pink-100:hover,
.group:hover .group-hover:text-pink-100 | color: var(--nu-pink-100) | #ffe2ec |
.text-pink-200,
.hover:text-pink-200:hover,
.group:hover .group-hover:text-pink-200 | color: var(--nu-pink-200) | #ffc8dc |
.text-pink-300,
.hover:text-pink-300:hover,
.group:hover .group-hover:text-pink-300 | color: var(--nu-pink-300) | #ffa5c9 |
.text-pink-400,
.hover:text-pink-400:hover,
.group:hover .group-hover:text-pink-400 | color: var(--nu-pink-400) | #ff74b2 |
.text-pink-500,
.hover:text-pink-500:hover,
.group:hover .group-hover:text-pink-500 | color: var(--nu-pink-500) | #ec4899 |
.text-pink-600,
.hover:text-pink-600:hover,
.group:hover .group-hover:text-pink-600 | color: var(--nu-pink-600) | #d43386 |
.text-pink-700,
.hover:text-pink-700:hover,
.group:hover .group-hover:text-pink-700 | color: var(--nu-pink-700) | #b41c6e |
.text-pink-800,
.hover:text-pink-800:hover,
.group:hover .group-hover:text-pink-800 | color: var(--nu-pink-800) | #900455 |
.text-pink-900,
.hover:text-pink-900:hover,
.group:hover .group-hover:text-pink-900 | color: var(--nu-pink-900) | #6b003e |
.text-pink-950,
.hover:text-pink-950:hover,
.group:hover .group-hover:text-pink-950 | color: var(--nu-pink-950) | #4c002b |
Border: theme words, roles, hues, basic (20 rules)
| Selector | Declarations | Default value |
|---|---|---|
.border-brand,
.hover:border-brand:hover,
.group:hover .group-hover:border-brand | border-color: var(--nu-brand) | var(--nu-brand-700) |
.border-success,
.hover:border-success:hover,
.group:hover .group-hover:border-success | border-color: var(--nu-success) | var(--nu-success-700) |
.border-danger,
.hover:border-danger:hover,
.group:hover .group-hover:border-danger | border-color: var(--nu-danger) | var(--nu-danger-700) |
.border-warning,
.hover:border-warning:hover,
.group:hover .group-hover:border-warning | border-color: var(--nu-warning) | var(--nu-warning-500) |
.border-info,
.hover:border-info:hover,
.group:hover .group-hover:border-info | border-color: var(--nu-info) | var(--nu-info-700) |
.border-gray,
.hover:border-gray:hover,
.group:hover .group-hover:border-gray | border-color: var(--nu-gray-500) | #6b7280 |
.border-red,
.hover:border-red:hover,
.group:hover .group-hover:border-red | border-color: var(--nu-red-500) | #ef4444 |
.border-blue,
.hover:border-blue:hover,
.group:hover .group-hover:border-blue | border-color: var(--nu-blue-500) | #3b82f6 |
.border-green,
.hover:border-green:hover,
.group:hover .group-hover:border-green | border-color: var(--nu-green-500) | #22c55e |
.border-yellow,
.hover:border-yellow:hover,
.group:hover .group-hover:border-yellow | border-color: var(--nu-yellow-500) | #eab308 |
.border-purple,
.hover:border-purple:hover,
.group:hover .group-hover:border-purple | border-color: var(--nu-purple-500) | #a855f7 |
.border-pink,
.hover:border-pink:hover,
.group:hover .group-hover:border-pink | border-color: var(--nu-pink-500) | #ec4899 |
.border-error,
.hover:border-error:hover,
.group:hover .group-hover:border-error | border-color: var(--nu-error) | var(--nu-danger) |
.border-black,
.hover:border-black:hover,
.group:hover .group-hover:border-black | border-color: var(--nu-black) | #000 |
.border-white,
.hover:border-white:hover,
.group:hover .group-hover:border-white | border-color: var(--nu-white) | #fff |
.border-transparent,
.hover:border-transparent:hover,
.group:hover .group-hover:border-transparent | border-color: var(--nu-transparent) | transparent |
.border-regular,
.hover:border-regular:hover,
.group:hover .group-hover:border-regular | border-color: var(--nu-border-regular) | #d3d5d9 |
.border-strong,
.hover:border-strong:hover,
.group:hover .group-hover:border-strong | border-color: var(--nu-border-strong) | var(--nu-gray-400) |
.border-control,
.hover:border-control:hover,
.group:hover .group-hover:border-control | border-color: var(--nu-border-control) | var(--nu-gray-500) |
.border-control-hover,
.hover:border-control-hover:hover,
.group:hover .group-hover:border-control-hover | border-color: var(--nu-border-control-hover) | var(--nu-gray-600) |
Border shades (132 rules)
| Selector | Declarations | Default value |
|---|---|---|
.border-brand-50,
.hover:border-brand-50:hover,
.group:hover .group-hover:border-brand-50 | border-color: var(--nu-brand-50) | #ebf3ff |
.border-brand-100,
.hover:border-brand-100:hover,
.group:hover .group-hover:border-brand-100 | border-color: var(--nu-brand-100) | #dbeaff |
.border-brand-200,
.hover:border-brand-200:hover,
.group:hover .group-hover:border-brand-200 | border-color: var(--nu-brand-200) | #bad7ff |
.border-brand-300,
.hover:border-brand-300:hover,
.group:hover .group-hover:border-brand-300 | border-color: var(--nu-brand-300) | #91beff |
.border-brand-400,
.hover:border-brand-400:hover,
.group:hover .group-hover:border-brand-400 | border-color: var(--nu-brand-400) | #5ca0ff |
.border-brand-500,
.hover:border-brand-500:hover,
.group:hover .group-hover:border-brand-500 | border-color: var(--nu-brand-500) | #007bff |
.border-brand-600,
.hover:border-brand-600:hover,
.group:hover .group-hover:border-brand-600 | border-color: var(--nu-brand-600) | #006be0 |
.border-brand-700,
.hover:border-brand-700:hover,
.group:hover .group-hover:border-brand-700 | border-color: var(--nu-brand-700) | #0058bb |
.border-brand-800,
.hover:border-brand-800:hover,
.group:hover .group-hover:border-brand-800 | border-color: var(--nu-brand-800) | #004494 |
.border-brand-900,
.hover:border-brand-900:hover,
.group:hover .group-hover:border-brand-900 | border-color: var(--nu-brand-900) | #003270 |
.border-brand-950,
.hover:border-brand-950:hover,
.group:hover .group-hover:border-brand-950 | border-color: var(--nu-brand-950) | #002352 |
.border-success-50,
.hover:border-success-50:hover,
.group:hover .group-hover:border-success-50 | border-color: var(--nu-success-50) | #e5fae6 |
.border-success-100,
.hover:border-success-100:hover,
.group:hover .group-hover:border-success-100 | border-color: var(--nu-success-100) | #cef7d1 |
.border-success-200,
.hover:border-success-200:hover,
.group:hover .group-hover:border-success-200 | border-color: var(--nu-success-200) | #a8ecae |
.border-success-300,
.hover:border-success-300:hover,
.group:hover .group-hover:border-success-300 | border-color: var(--nu-success-300) | #7fdb89 |
.border-success-400,
.hover:border-success-400:hover,
.group:hover .group-hover:border-success-400 | border-color: var(--nu-success-400) | #54c365 |
.border-success-500,
.hover:border-success-500:hover,
.group:hover .group-hover:border-success-500 | border-color: var(--nu-success-500) | #28a745 |
.border-success-600,
.hover:border-success-600:hover,
.group:hover .group-hover:border-success-600 | border-color: var(--nu-success-600) | #059333 |
.border-success-700,
.hover:border-success-700:hover,
.group:hover .group-hover:border-success-700 | border-color: var(--nu-success-700) | #007a28 |
.border-success-800,
.hover:border-success-800:hover,
.group:hover .group-hover:border-success-800 | border-color: var(--nu-success-800) | #005e1d |
.border-success-900,
.hover:border-success-900:hover,
.group:hover .group-hover:border-success-900 | border-color: var(--nu-success-900) | #004513 |
.border-success-950,
.hover:border-success-950:hover,
.group:hover .group-hover:border-success-950 | border-color: var(--nu-success-950) | #00300b |
.border-danger-50,
.hover:border-danger-50:hover,
.group:hover .group-hover:border-danger-50 | border-color: var(--nu-danger-50) | #ffeeed |
.border-danger-100,
.hover:border-danger-100:hover,
.group:hover .group-hover:border-danger-100 | border-color: var(--nu-danger-100) | #ffdfde |
.border-danger-200,
.hover:border-danger-200:hover,
.group:hover .group-hover:border-danger-200 | border-color: var(--nu-danger-200) | #ffc1bf |
.border-danger-300,
.hover:border-danger-300:hover,
.group:hover .group-hover:border-danger-300 | border-color: var(--nu-danger-300) | #ff9997 |
.border-danger-400,
.hover:border-danger-400:hover,
.group:hover .group-hover:border-danger-400 | border-color: var(--nu-danger-400) | #fd6066 |
.border-danger-500,
.hover:border-danger-500:hover,
.group:hover .group-hover:border-danger-500 | border-color: var(--nu-danger-500) | #dc3545 |
.border-danger-600,
.hover:border-danger-600:hover,
.group:hover .group-hover:border-danger-600 | border-color: var(--nu-danger-600) | #c72037 |
.border-danger-700,
.hover:border-danger-700:hover,
.group:hover .group-hover:border-danger-700 | border-color: var(--nu-danger-700) | #ab0728 |
.border-danger-800,
.hover:border-danger-800:hover,
.group:hover .group-hover:border-danger-800 | border-color: var(--nu-danger-800) | #88001c |
.border-danger-900,
.hover:border-danger-900:hover,
.group:hover .group-hover:border-danger-900 | border-color: var(--nu-danger-900) | #670013 |
.border-danger-950,
.hover:border-danger-950:hover,
.group:hover .group-hover:border-danger-950 | border-color: var(--nu-danger-950) | #4c000b |
.border-warning-50,
.hover:border-warning-50:hover,
.group:hover .group-hover:border-warning-50 | border-color: var(--nu-warning-50) | #fff6e5 |
.border-warning-100,
.hover:border-warning-100:hover,
.group:hover .group-hover:border-warning-100 | border-color: var(--nu-warning-100) | #fff2d8 |
.border-warning-200,
.hover:border-warning-200:hover,
.group:hover .group-hover:border-warning-200 | border-color: var(--nu-warning-200) | #ffeabe |
.border-warning-300,
.hover:border-warning-300:hover,
.group:hover .group-hover:border-warning-300 | border-color: var(--nu-warning-300) | #ffdf9c |
.border-warning-400,
.hover:border-warning-400:hover,
.group:hover .group-hover:border-warning-400 | border-color: var(--nu-warning-400) | #ffd16c |
.border-warning-500,
.hover:border-warning-500:hover,
.group:hover .group-hover:border-warning-500 | border-color: var(--nu-warning-500) | #ffc107 |
.border-warning-600,
.hover:border-warning-600:hover,
.group:hover .group-hover:border-warning-600 | border-color: var(--nu-warning-600) | #dca600 |
.border-warning-700,
.hover:border-warning-700:hover,
.group:hover .group-hover:border-warning-700 | border-color: var(--nu-warning-700) | #b28600 |
.border-warning-800,
.hover:border-warning-800:hover,
.group:hover .group-hover:border-warning-800 | border-color: var(--nu-warning-800) | #866300 |
.border-warning-900,
.hover:border-warning-900:hover,
.group:hover .group-hover:border-warning-900 | border-color: var(--nu-warning-900) | #5e4500 |
.border-warning-950,
.hover:border-warning-950:hover,
.group:hover .group-hover:border-warning-950 | border-color: var(--nu-warning-950) | #3d2b00 |
.border-info-50,
.hover:border-info-50:hover,
.group:hover .group-hover:border-info-50 | border-color: var(--nu-info-50) | #e4f8fc |
.border-info-100,
.hover:border-info-100:hover,
.group:hover .group-hover:border-info-100 | border-color: var(--nu-info-100) | #ccf3fb |
.border-info-200,
.hover:border-info-200:hover,
.group:hover .group-hover:border-info-200 | border-color: var(--nu-info-200) | #a4e6f4 |
.border-info-300,
.hover:border-info-300:hover,
.group:hover .group-hover:border-info-300 | border-color: var(--nu-info-300) | #79d4e6 |
.border-info-400,
.hover:border-info-400:hover,
.group:hover .group-hover:border-info-400 | border-color: var(--nu-info-400) | #4cbdd2 |
.border-info-500,
.hover:border-info-500:hover,
.group:hover .group-hover:border-info-500 | border-color: var(--nu-info-500) | #17a2b8 |
.border-info-600,
.hover:border-info-600:hover,
.group:hover .group-hover:border-info-600 | border-color: var(--nu-info-600) | #008da1 |
.border-info-700,
.hover:border-info-700:hover,
.group:hover .group-hover:border-info-700 | border-color: var(--nu-info-700) | #007485 |
.border-info-800,
.hover:border-info-800:hover,
.group:hover .group-hover:border-info-800 | border-color: var(--nu-info-800) | #005a67 |
.border-info-900,
.hover:border-info-900:hover,
.group:hover .group-hover:border-info-900 | border-color: var(--nu-info-900) | #00414c |
.border-info-950,
.hover:border-info-950:hover,
.group:hover .group-hover:border-info-950 | border-color: var(--nu-info-950) | #002d35 |
.border-gray-50,
.hover:border-gray-50:hover,
.group:hover .group-hover:border-gray-50 | border-color: var(--nu-gray-50) | #f0f1f5 |
.border-gray-100,
.hover:border-gray-100:hover,
.group:hover .group-hover:border-gray-100 | border-color: var(--nu-gray-100) | #e3e6ec |
.border-gray-200,
.hover:border-gray-200:hover,
.group:hover .group-hover:border-gray-200 | border-color: var(--nu-gray-200) | #cacfd9 |
.border-gray-300,
.hover:border-gray-300:hover,
.group:hover .group-hover:border-gray-300 | border-color: var(--nu-gray-300) | #adb4c0 |
.border-gray-400,
.hover:border-gray-400:hover,
.group:hover .group-hover:border-gray-400 | border-color: var(--nu-gray-400) | #8d94a1 |
.border-gray-500,
.hover:border-gray-500:hover,
.group:hover .group-hover:border-gray-500 | border-color: var(--nu-gray-500) | #6b7280 |
.border-gray-600,
.hover:border-gray-600:hover,
.group:hover .group-hover:border-gray-600 | border-color: var(--nu-gray-600) | #5d6471 |
.border-gray-700,
.hover:border-gray-700:hover,
.group:hover .group-hover:border-gray-700 | border-color: var(--nu-gray-700) | #4d535f |
.border-gray-800,
.hover:border-gray-800:hover,
.group:hover .group-hover:border-gray-800 | border-color: var(--nu-gray-800) | #3c414c |
.border-gray-900,
.hover:border-gray-900:hover,
.group:hover .group-hover:border-gray-900 | border-color: var(--nu-gray-900) | #2d3139 |
.border-gray-950,
.hover:border-gray-950:hover,
.group:hover .group-hover:border-gray-950 | border-color: var(--nu-gray-950) | #20232a |
.border-red-50,
.hover:border-red-50:hover,
.group:hover .group-hover:border-red-50 | border-color: var(--nu-red-50) | #ffefed |
.border-red-100,
.hover:border-red-100:hover,
.group:hover .group-hover:border-red-100 | border-color: var(--nu-red-100) | #ffe2df |
.border-red-200,
.hover:border-red-200:hover,
.group:hover .group-hover:border-red-200 | border-color: var(--nu-red-200) | #ffc8c3 |
.border-red-300,
.hover:border-red-300:hover,
.group:hover .group-hover:border-red-300 | border-color: var(--nu-red-300) | #ffa69e |
.border-red-400,
.hover:border-red-400:hover,
.group:hover .group-hover:border-red-400 | border-color: var(--nu-red-400) | #ff766f |
.border-red-500,
.hover:border-red-500:hover,
.group:hover .group-hover:border-red-500 | border-color: var(--nu-red-500) | #ef4444 |
.border-red-600,
.hover:border-red-600:hover,
.group:hover .group-hover:border-red-600 | border-color: var(--nu-red-600) | #d72f33 |
.border-red-700,
.hover:border-red-700:hover,
.group:hover .group-hover:border-red-700 | border-color: var(--nu-red-700) | #b81822 |
.border-red-800,
.hover:border-red-800:hover,
.group:hover .group-hover:border-red-800 | border-color: var(--nu-red-800) | #930013 |
.border-red-900,
.hover:border-red-900:hover,
.group:hover .group-hover:border-red-900 | border-color: var(--nu-red-900) | #6e000c |
.border-red-950,
.hover:border-red-950:hover,
.group:hover .group-hover:border-red-950 | border-color: var(--nu-red-950) | #4f0006 |
.border-blue-50,
.hover:border-blue-50:hover,
.group:hover .group-hover:border-blue-50 | border-color: var(--nu-blue-50) | #ecf3ff |
.border-blue-100,
.hover:border-blue-100:hover,
.group:hover .group-hover:border-blue-100 | border-color: var(--nu-blue-100) | #ddeaff |
.border-blue-200,
.hover:border-blue-200:hover,
.group:hover .group-hover:border-blue-200 | border-color: var(--nu-blue-200) | #bfd8ff |
.border-blue-300,
.hover:border-blue-300:hover,
.group:hover .group-hover:border-blue-300 | border-color: var(--nu-blue-300) | #9ac0ff |
.border-blue-400,
.hover:border-blue-400:hover,
.group:hover .group-hover:border-blue-400 | border-color: var(--nu-blue-400) | #6ba3ff |
.border-blue-500,
.hover:border-blue-500:hover,
.group:hover .group-hover:border-blue-500 | border-color: var(--nu-blue-500) | #3b82f6 |
.border-blue-600,
.hover:border-blue-600:hover,
.group:hover .group-hover:border-blue-600 | border-color: var(--nu-blue-600) | #2a70df |
.border-blue-700,
.hover:border-blue-700:hover,
.group:hover .group-hover:border-blue-700 | border-color: var(--nu-blue-700) | #1a5ac1 |
.border-blue-800,
.hover:border-blue-800:hover,
.group:hover .group-hover:border-blue-800 | border-color: var(--nu-blue-800) | #0b449c |
.border-blue-900,
.hover:border-blue-900:hover,
.group:hover .group-hover:border-blue-900 | border-color: var(--nu-blue-900) | #023179 |
.border-blue-950,
.hover:border-blue-950:hover,
.group:hover .group-hover:border-blue-950 | border-color: var(--nu-blue-950) | #012158 |
.border-green-50,
.hover:border-green-50:hover,
.group:hover .group-hover:border-green-50 | border-color: var(--nu-green-50) | #e4fde7 |
.border-green-100,
.hover:border-green-100:hover,
.group:hover .group-hover:border-green-100 | border-color: var(--nu-green-100) | #ccfcd4 |
.border-green-200,
.hover:border-green-200:hover,
.group:hover .group-hover:border-green-200 | border-color: var(--nu-green-200) | #a6f7b6 |
.border-green-300,
.hover:border-green-300:hover,
.group:hover .group-hover:border-green-300 | border-color: var(--nu-green-300) | #7ceb96 |
.border-green-400,
.hover:border-green-400:hover,
.group:hover .group-hover:border-green-400 | border-color: var(--nu-green-400) | #50da78 |
.border-green-500,
.hover:border-green-500:hover,
.group:hover .group-hover:border-green-500 | border-color: var(--nu-green-500) | #22c55e |
.border-green-600,
.hover:border-green-600:hover,
.group:hover .group-hover:border-green-600 | border-color: var(--nu-green-600) | #00ac4d |
.border-green-700,
.hover:border-green-700:hover,
.group:hover .group-hover:border-green-700 | border-color: var(--nu-green-700) | #008d3d |
.border-green-800,
.hover:border-green-800:hover,
.group:hover .group-hover:border-green-800 | border-color: var(--nu-green-800) | #006b2d |
.border-green-900,
.hover:border-green-900:hover,
.group:hover .group-hover:border-green-900 | border-color: var(--nu-green-900) | #004d1e |
.border-green-950,
.hover:border-green-950:hover,
.group:hover .group-hover:border-green-950 | border-color: var(--nu-green-950) | #003412 |
.border-yellow-50,
.hover:border-yellow-50:hover,
.group:hover .group-hover:border-yellow-50 | border-color: var(--nu-yellow-50) | #fff5e1 |
.border-yellow-100,
.hover:border-yellow-100:hover,
.group:hover .group-hover:border-yellow-100 | border-color: var(--nu-yellow-100) | #fff0cf |
.border-yellow-200,
.hover:border-yellow-200:hover,
.group:hover .group-hover:border-yellow-200 | border-color: var(--nu-yellow-200) | #ffe4aa |
.border-yellow-300,
.hover:border-yellow-300:hover,
.group:hover .group-hover:border-yellow-300 | border-color: var(--nu-yellow-300) | #ffd576 |
.border-yellow-400,
.hover:border-yellow-400:hover,
.group:hover .group-hover:border-yellow-400 | border-color: var(--nu-yellow-400) | #f8c43f |
.border-yellow-500,
.hover:border-yellow-500:hover,
.group:hover .group-hover:border-yellow-500 | border-color: var(--nu-yellow-500) | #eab308 |
.border-yellow-600,
.hover:border-yellow-600:hover,
.group:hover .group-hover:border-yellow-600 | border-color: var(--nu-yellow-600) | #ca9a00 |
.border-yellow-700,
.hover:border-yellow-700:hover,
.group:hover .group-hover:border-yellow-700 | border-color: var(--nu-yellow-700) | #a57d00 |
.border-yellow-800,
.hover:border-yellow-800:hover,
.group:hover .group-hover:border-yellow-800 | border-color: var(--nu-yellow-800) | #7c5d00 |
.border-yellow-900,
.hover:border-yellow-900:hover,
.group:hover .group-hover:border-yellow-900 | border-color: var(--nu-yellow-900) | #584100 |
.border-yellow-950,
.hover:border-yellow-950:hover,
.group:hover .group-hover:border-yellow-950 | border-color: var(--nu-yellow-950) | #3a2a00 |
.border-purple-50,
.hover:border-purple-50:hover,
.group:hover .group-hover:border-purple-50 | border-color: var(--nu-purple-50) | #f6f0ff |
.border-purple-100,
.hover:border-purple-100:hover,
.group:hover .group-hover:border-purple-100 | border-color: var(--nu-purple-100) | #efe4ff |
.border-purple-200,
.hover:border-purple-200:hover,
.group:hover .group-hover:border-purple-200 | border-color: var(--nu-purple-200) | #e1cbff |
.border-purple-300,
.hover:border-purple-300:hover,
.group:hover .group-hover:border-purple-300 | border-color: var(--nu-purple-300) | #d0acff |
.border-purple-400,
.hover:border-purple-400:hover,
.group:hover .group-hover:border-purple-400 | border-color: var(--nu-purple-400) | #bd83ff |
.border-purple-500,
.hover:border-purple-500:hover,
.group:hover .group-hover:border-purple-500 | border-color: var(--nu-purple-500) | #a855f7 |
.border-purple-600,
.hover:border-purple-600:hover,
.group:hover .group-hover:border-purple-600 | border-color: var(--nu-purple-600) | #9542e0 |
.border-purple-700,
.hover:border-purple-700:hover,
.group:hover .group-hover:border-purple-700 | border-color: var(--nu-purple-700) | #7e2ec1 |
.border-purple-800,
.hover:border-purple-800:hover,
.group:hover .group-hover:border-purple-800 | border-color: var(--nu-purple-800) | #631b9c |
.border-purple-900,
.hover:border-purple-900:hover,
.group:hover .group-hover:border-purple-900 | border-color: var(--nu-purple-900) | #4b0d79 |
.border-purple-950,
.hover:border-purple-950:hover,
.group:hover .group-hover:border-purple-950 | border-color: var(--nu-purple-950) | #350658 |
.border-pink-50,
.hover:border-pink-50:hover,
.group:hover .group-hover:border-pink-50 | border-color: var(--nu-pink-50) | #ffeef4 |
.border-pink-100,
.hover:border-pink-100:hover,
.group:hover .group-hover:border-pink-100 | border-color: var(--nu-pink-100) | #ffe2ec |
.border-pink-200,
.hover:border-pink-200:hover,
.group:hover .group-hover:border-pink-200 | border-color: var(--nu-pink-200) | #ffc8dc |
.border-pink-300,
.hover:border-pink-300:hover,
.group:hover .group-hover:border-pink-300 | border-color: var(--nu-pink-300) | #ffa5c9 |
.border-pink-400,
.hover:border-pink-400:hover,
.group:hover .group-hover:border-pink-400 | border-color: var(--nu-pink-400) | #ff74b2 |
.border-pink-500,
.hover:border-pink-500:hover,
.group:hover .group-hover:border-pink-500 | border-color: var(--nu-pink-500) | #ec4899 |
.border-pink-600,
.hover:border-pink-600:hover,
.group:hover .group-hover:border-pink-600 | border-color: var(--nu-pink-600) | #d43386 |
.border-pink-700,
.hover:border-pink-700:hover,
.group:hover .group-hover:border-pink-700 | border-color: var(--nu-pink-700) | #b41c6e |
.border-pink-800,
.hover:border-pink-800:hover,
.group:hover .group-hover:border-pink-800 | border-color: var(--nu-pink-800) | #900455 |
.border-pink-900,
.hover:border-pink-900:hover,
.group:hover .group-hover:border-pink-900 | border-color: var(--nu-pink-900) | #6b003e |
.border-pink-950,
.hover:border-pink-950:hover,
.group:hover .group-hover:border-pink-950 | border-color: var(--nu-pink-950) | #4c002b |
Accessibility and RTL
Section titled “Accessibility and RTL”- Contrast. Use
text-on-{role}on role fills and the text theme words on surfaces; they are chosen for contrast. Body text needs 4.5:1 and large text 3:1 (WCAG 1.4.3); check palette combinations yourself. - Control edges. Form controls use
border-control, which is darker thanborder-regular, for 3:1 non-text contrast (WCAG 1.4.11). - Colour is not the only signal. Pair a status colour with text or an icon, such as “Error:” before a message in
text-danger(WCAG 1.4.1). - Dark mode. Hard-coded colours (
bg(#fff),bg-white, palette shades for text) do not flip. Use theme words and roles for interface colour. - RTL. Colours do not depend on direction.