Ring Offset
Utilities for controlling the offset width and colors of an element's ring.
❗ Keep in mind
To establish rings, it's essential to commence class declarations with ring.
To apply ring offset widths or colors, use the following classes to define the desired offset width or color. The ring offset will be applied around the element based on the specified offset width and color.
Setting Ring Offset Width on Elements
| Class Name | CSS Equivalent |
|---|---|
| ring | --c-ring-width: 2px; --c-ring-offset-width: 3px; --c-ring-shadow: 0 0 0 calc(var(--c-ring-offset-width) + var(--c-ring-width)) rgba(var(--c-ring-color), 1); --c-ring-offset-shadow: 0 0 0 var(--c-ring-offset-width) rgba(var(--c-ring-offset-color), 1); box-shadow: var(--c-ring-offset-shadow), var(--c-ring-shadow), var(--cds-sys-elevation-box-shadow, 0 0 0 0 #000); |
| ring-offset-0 | --c-ring-offset-width: 0px; |
| ring-offset-1 | --c-ring-offset-width: 1px; |
| ring-offset-2 | --c-ring-offset-width: 2px; |
| ring-offset-4 | --c-ring-offset-width: 4px; |
| ring-offset-8 | --c-ring-offset-width: 8px; |
Use the ring-offset-{width} utilities to set the ring offset width for an element. The default is ring-offset-2. Mostly you'll apply only the ring class.
Setting Ring Offset Color on Elements
| Class Name | CSS Equivalent |
|---|---|
| ring-offset-primary | --cds-sys-color-ring-offset-color: var(--cds-sys-color-primary); |
| ring-offset-primary-container | --cds-sys-color-ring-offset-color: var(--cds-sys-color-primary-container); |
| ring-offset-primary-fixed | --cds-sys-color-ring-offset-color: var(--cds-sys-color-primary-fixed); |
| ring-offset-primary-fixed-dim | --cds-sys-color-ring-offset-color: var(--cds-sys-color-primary-fixed-dim); |
| ring-offset-inverse-primary | --cds-sys-color-ring-offset-color: var(--cds-sys-color-inverse-primary); |
| ring-offset-secondary | --cds-sys-color-ring-offset-color: var(--cds-sys-color-secondary); |
| ring-offset-secondary-container | --cds-sys-color-ring-offset-color: var(--cds-sys-color-secondary-container); |
| ring-offset-secondary-fixed | --cds-sys-color-ring-offset-color: var(--cds-sys-color-secondary-fixed); |
| ring-offset-secondary-fixed-dim | --cds-sys-color-ring-offset-color: var(--cds-sys-color-secondary-fixed-dim); |
| ring-offset-error | --cds-sys-color-ring-offset-color: var(--cds-sys-color-error); |
| ring-offset-error-container | --cds-sys-color-ring-offset-color: var(--cds-sys-color-error-container); |
| ring-offset-warn | --cds-sys-color-ring-offset-color: var(--cds-sys-color-warn); |
| ring-offset-warn-container | --cds-sys-color-ring-offset-color: var(--cds-sys-color-warn-container); |
| ring-offset-success | --cds-sys-color-ring-offset-color: var(--cds-sys-color-success); |
| ring-offset-success-container | --cds-sys-color-ring-offset-color: var(--cds-sys-color-success-container); |
| ring-offset-excellent | --cds-sys-color-ring-offset-color: var(--cds-sys-color-excellent); |
| ring-offset-excellent-container | --cds-sys-color-ring-offset-color: var(--cds-sys-color-excellent-container); |
| ring-offset-surface | --cds-sys-color-ring-offset-color: var(--cds-sys-color-surface); |
| ring-offset-surface-variant | --cds-sys-color-ring-offset-color: var(--cds-sys-color-surface-variant); |
| ring-offset-surface-container-highest | --cds-sys-color-ring-offset-color: var(--cds-sys-color-surface-container-highest); |
| ring-offset-surface-container-high | --cds-sys-color-ring-offset-color: var(--cds-sys-color-surface-container-high); |
| ring-offset-surface-container | --cds-sys-color-ring-offset-color: var(--cds-sys-color-surface-container); |
| ring-offset-surface-container-low | --cds-sys-color-ring-offset-color: var(--cds-sys-color-surface-container-low); |
| ring-offset-surface-container-lowest | --cds-sys-color-ring-offset-color: var(--cds-sys-color-surface-container-lowest); |
| ring-offset-inverse-surface | --cds-sys-color-ring-offset-color: var(--cds-sys-color-inverse-surface); |
| ring-offset-background | --cds-sys-color-ring-offset-color: var(--cds-sys-color-background); |
| ring-offset-surface-bright | --cds-sys-color-ring-offset-color: var(--cds-sys-color-surface-bright); |
| ring-offset-surface-dim | --cds-sys-color-ring-offset-color: var(--cds-sys-color-surface-dim); |
| ring-offset-scrim | --cds-sys-color-ring-offset-color: var(--cds-sys-color-scrim); |
Use the ring-offset-{color} utilities to set the ring offset color for an element. The default is ring-offset-surface. Mostly you'll apply only the ring class.