Inverse

The Inverse utility applies the framework inverse color scheme to one element and its descendants. Use it for greater visual control, or to distinguish an active element and communicate a state transition without changing its siblings.

#

Usage

Add inverse to a container to apply the opposite of the screen's color scheme to that container and its descendants. Use it as a visual treatment, or apply it semantically to identify the active item, selected row, or current state. 

<div class="item inverse">
  <div class="content">
    <span class="title">Active item</span>
  </div>
</div>
#

Active Collection Rows

Invert individual rows to make active resources scannable inside a longer collection. The row background, text, item metadata, and other framework paint change together.

Desk M1
Occupied
Booked with TRMNL · 7:00 - 15:00
Desk M2
Occupied
[email protected] · Booked for the day
Desk M3
Available
Desk M4
Available
Desk S1
Available
Until 8:30
Desk S2
Available
TRMNL Logo Bookable desks 
<!-- Active row -->
<div class="item inverse item--emphasis-3 rounded--xsmall">
  <div class="meta"></div>
  <div class="content">
    <span class="title title--small">Desk M1</span>
    <span class="description">Occupied</span>
  </div>
</div>

<!-- Inactive sibling -->
<div class="item bg--white rounded--xsmall">
  <div class="meta"></div>
  <div class="content">
    <span class="title title--small">Desk M3</span>
    <span class="description">Available</span>
  </div>
</div>
#

Active Collection Cards

Use inverse cards when several resources share the same grid and only some need attention. The stronger surface separates occupied rooms from available rooms without changing the grid structure.

Auxiliary meeting room
Available
 
Board room
Marketing Sync
11:00 - 12:30
Huddle Space Alpha
Occupied
11:15 - 11:45
Huddle Space Beta
Available
 
TRMNL Logo Meeting rooms 
<div class="grid grid--cols-2 gap--small">
  <div class="bg--white rounded--xsmall p--3">
    <div class="title">Available</div>
  </div>

  <div class="inverse rounded--xsmall p--3">
    <div class="title">Marketing Sync</div>
    <div class="description">11:00 - 12:30</div>
  </div>
</div>
#

State Transitions

Apply inverse to a larger status surface when a state transition should change the whole composition. For example, an occupied meeting room can invert its schedule, dividers, and attendee details as one semantic state.

11:00 - 12:30
Marketing Sync
[email protected] & 5 more
TRMNL Logo Board room 20 seats 
<div class="view view--full">
  <div class="layout layout--col gap--large p--16 inverse rounded">
    <div class="flex flex--col flex--center gap--large h--full">
      <div class="text--large font--regular">11:00 - 12:30</div>
      <div class="divider w--full"></div>
      <div class="text--mega font--bold text--center">Marketing Sync</div>
      <div class="divider w--full"></div>
      <div class="text--large font--regular">[email protected] &amp; 5 more</div>
    </div>
  </div>
</div>
#

Paint and Cascade Behavior

Inverse flips framework background, text, border, stroke, semantic, icon, chart, and component-slot paint for the element subtree. It applies dark paint on a light screen and light paint on a dark-mode screen without changing siblings.

A slot value declared directly on the element overrides the inverse default, and a theme can define its own inverse treatment with .screen--theme-<id> .inverse. See Theme Slots and Themes .

Unlike the invert image filter, inverse changes semantic framework paint instead of flipping pixels. dark: utilities still require screen--dark-mode; inverse changes paint, not variant activation.