Utilities

Visual utilities

Background, radius, shadow and accessibility helpers.

Background, radius and shadow classes are generated from the tokens; the hand-written helpers in visual.css follow.

Example

ct-bg-cardct-shadow-sheet

28 classes from platforms/web/utilities/generated.css.

Class	Declarations
`.ct-bg-paper`	`background-color:var(--paper)`
`.ct-bg-card`	`background-color:var(--card)`
`.ct-bg-card2`	`background-color:var(--card-2)`
`.ct-bg-line`	`background-color:var(--line)`
`.ct-bg-inactive`	`background-color:var(--inactive)`
`.ct-bg-ink`	`background-color:var(--ink)`
`.ct-bg-muted`	`background-color:var(--muted)`
`.ct-bg-accent`	`background-color:var(--accent)`
`.ct-bg-accent-ink`	`background-color:var(--accent-ink)`
`.ct-bg-accent-tint`	`background-color:var(--accent-tint)`
`.ct-bg-good`	`background-color:var(--good)`
`.ct-bg-warn`	`background-color:var(--warn)`
`.ct-bg-alert`	`background-color:var(--alert)`
`.ct-bg-favorite`	`background-color:var(--favorite)`
`.ct-bg-scrim`	`background-color:var(--scrim)`
`.ct-bg-live-bg`	`background-color:var(--live-bg)`
`.ct-bg-live-ink`	`background-color:var(--live-ink)`
`.ct-radius-control`	`border-radius:var(--r-control)`
`.ct-radius-card`	`border-radius:var(--r-card)`
`.ct-radius-dialog`	`border-radius:var(--r-modal)`
`.ct-radius-sheet`	`border-radius:var(--r-sheet)`
`.ct-radius-line-bar`	`border-radius:var(--radius-line-bar)`
`.ct-radius-chip`	`border-radius:var(--radius-chip)`
`.ct-radius-segment`	`border-radius:var(--radius-segment)`
`.ct-radius-pill`	`border-radius:var(--radius-pill)`
`.ct-shadow-sheet`	`box-shadow:var(--shadow-sheet)`
`.ct-shadow-floating`	`box-shadow:var(--shadow-fab)`
`.ct-shadow-control`	`box-shadow:var(--shadow-control)`

6 classes from platforms/web/utilities/visual.css.

Class	Declarations
`.ct-visually-hidden`	`position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0`
`.ct-truncate`	`overflow:hidden;text-overflow:ellipsis;white-space:nowrap`
`.ct-tabular`	`font-variant-numeric:tabular-nums`
`.ct-hairline`	`border:1px solid var(--line)`
`.ct-hairline-b`	`border-bottom:1px solid var(--line)`
`.ct-round`	`border-radius:50%`