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 invert framework paint for 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 10:30
Desk S2
Available
TRMNL Logo Bookable desks 
<!-- Guttered container: gray frame, gaps between rows, fills height -->
<div class="flex flex--col w--full h--full gap--small grow bg--gray-70 p--2 rounded">
  <!-- Active row: inverse, inset with pl--2 -->
  <div class="item inverse item--emphasis-3 py--2 pl--2 w--full stretch rounded--xsmall">
    <div class="meta"></div>
    <div class="content w--full">
      <div class="flex flex--row flex--center-y gap--xlarge w--full">
        <div class="no-shrink font--bold w--32">Desk M1</div>
        <div class="font--bold w--24 text--center">Occupied</div>
        <div class="grow font--regular">Booked with TRMNL &middot; 7:00 - 15:00</div>
      </div>
    </div>
  </div>

  <!-- Inactive sibling -->
  <div class="item bg--white py--2 pl--2 w--full stretch rounded--xsmall">
    <div class="meta"></div>
    <div class="content w--full">
      <div class="flex flex--row flex--center-y gap--xlarge w--full">
        <div class="no-shrink font--bold w--32">Desk M3</div>
        <div class="font--regular w--24 text--center">Available</div>
        <div class="grow font--regular"></div>
      </div>
    </div>
  </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="resource-card bg--white w--full flex flex--col flex--left rounded--xsmall gap py--2 px--3">
    <div class="text--large font--bold w--full">Auxiliary meeting room</div>
    <div class="grow flex flex--col flex--left w--full">
      <div class="text--xxlarge font--bold grow flex flex--col flex--center">Available</div>
      <div class="text--base font--regular">&nbsp;</div>
    </div>
  </div>

  <div class="resource-card inverse w--full flex flex--col flex--left rounded--xsmall gap py--2 px--3">
    <div class="text--large font--bold w--full">Board room</div>
    <div class="grow flex flex--col flex--left w--full">
      <div class="text--xxlarge font--bold grow flex flex--col flex--center">Marketing Sync</div>
      <div class="text--base font--regular">11:00 - 12:30</div>
    </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 inverse rounded">
    <div class="text--large">11:00 - 12:30</div>
    <div class="divider"></div>
    <div class="text--mega font--bold">Marketing Sync</div>
    <div class="divider"></div>
    <div class="text--large">[email protected] &amp; 1 more</div>
  </div>
</div>
#

Paint and Cascade Behavior

Inverse remaps framework background, text, border, and stroke paint for the element and its subtree, including the --framework-* surface tokens. A utility class set directly on the element — for example bg--white — still overrides the inverse default. See Screen for the screen-wide screen--dark-mode modifier.

Unlike the invert image filter, inverse remaps framework tokens instead of flipping pixels. Inverse applies the opposite of the screen's current scheme: on a light screen the subtree paints dark, and inside a screen--dark-mode screen the subtree flips back to light. dark: utilities still key off screen--dark-mode and do not activate from inverse alone.