AtlasStyle
A singleton of design tokens: colours by role, spacing, radii, fonts, durations and density, so no app hard-codes a number.
Since 1.4.0
AtlasStyle is a singleton holding the design tokens of Atlas apps in one place. A control or an app reads AtlasStyle.radius instead of a bare 6, so the look can change in one file and every app follows. Everything is read-only except density.
Colours follow the system colour scheme, light or dark, with the neutrals tinted slightly toward Atlas violet (not under high contrast). Light and Dark are tuned separately. The accent is the user's Plasma accent when they chose one.
Example
Rectangle {
color: AtlasStyle.surface
radius: AtlasStyle.radius
border.color: AtlasStyle.separator
Behavior on color { ColorAnimation { duration: AtlasStyle.durationShort } }
}Properties
| Name | Type | Default | Description |
|---|---|---|---|
accent |
color (read-only) |
— | Atlas violet (#6858E2 Light, #8A7AF4 Dark); the user's Plasma accent wins. For selection, indicators and checked states. |
accentStrong |
color (read-only) |
— | The prominent (primary) button fill: #5B4BD6 in Light (6:1 with white), #A396F7 in Dark. The user's Plasma accent wins when they picked one. |
accentStrongText |
color (read-only) |
— | Text on accentStrong (4.5:1 or more); the Plasma highlighted-text colour with a user accent. |
accentText |
color (read-only) |
— | Text readable on accent. |
base |
color (read-only) |
— | The window background (tonal step 0), tinted slightly toward violet (not under high contrast). |
chromeBackground |
color (read-only) |
— | Header bars, sidebars and floating toolbars: lightly blurred (94%), solid without blur. |
codeSurface |
color (read-only) |
— | A code view's own background. |
compact |
bool (read-only) |
— | true when density is Compact. |
control |
color (read-only) |
— | The fill of fields and default buttons (step 3). |
controlBorder |
color (read-only) |
— | Control edges, stronger than separator. |
controlHeight |
real (read-only) |
— | The height of a button, field or combo box: 28 px, or 24 px when compact. A control grows when its text needs more. |
density |
int (AtlasStyle.Density) |
AtlasStyle.Normal |
AtlasStyle.Normal or AtlasStyle.Compact, set by the app. The only writable property. |
duration |
int (read-only) |
— | The everyday animation duration: 150 ms, or 0 under reduced motion. |
durationLong |
int (read-only) |
— | The long animation duration: 250 ms, or 0 under reduced motion. |
durationShort |
int (read-only) |
— | The short animation duration: 100 ms, or 0 under reduced motion. |
error |
color (read-only) |
— | The colour scheme's negative text colour. |
errorFill |
color (read-only) |
— | The faint fill of an invalid field. |
floatingBackground |
color (read-only) |
— | Menus, popovers, notifications and the launcher: surfaceRaised at 85% over the blur, solid without it. |
focus |
color (read-only) |
— | The keyboard focus ring: magenta-violet (#A62A8C Light, #E28BE0 Dark); the user's Plasma accent wins. |
fontFamily |
string (read-only) |
— | The application font's family: IBM Plex Sans when installed, else the system font. |
fontSizeBody |
real (read-only) |
— | The body size in points: the application font's size. |
fontSizeCaption |
real (read-only) |
— | Footers and hints: 0.92 of body. |
fontSizeCode |
real (read-only) |
— | Code: the body size (in monoFamily). |
fontSizeHeading |
real (read-only) |
— | Dialog titles: 1.15 of body. |
fontSizeTitle |
real (read-only) |
— | Page titles: 1.6 of body. |
fontSizeWindowTitle |
real (read-only) |
— | A header bar's title: the body size. |
fontWeightWindowTitle |
int (read-only) |
— | The weight of a window title: Font.DemiBold. |
highContrast |
bool (read-only) |
— | Passes Appearance.highContrast through. |
hover |
color (read-only) |
— | A grey overlay for hover, never the accent, so hover never looks like selection. |
monoFamily |
string (read-only) |
— | The fixed-width family: JetBrains Mono when installed, else the system fixed font. Set font.family: AtlasStyle.monoFamily on code. |
pressed |
color (read-only) |
— | A grey overlay for a pressed control. |
radius |
real (read-only) |
— | 6: menus, cards, popovers, tooltips and code views. |
radiusLarge |
real (read-only) |
— | 8: dialogs, the command palette, drop zones and the segmented control's track. |
radiusPill |
real (read-only) |
— | 1000: fully round shapes at any height: switch tracks, the radio button, progress and usage bars, toasts, and a chip that is checked or not checkable. |
radiusSmall |
real (read-only) |
— | 4: controls (buttons, fields, combo boxes, menu items, sidebar and list selections). |
reducedMotion |
bool (read-only) |
— | Follows Appearance.reducedMotion (Plasma's animation speed set to instant, or ATLAS_REDUCED_MOTION=1). An animation with no duration, such as a spinner, checks this. |
rowHeight |
real (read-only) |
— | The height of a list or SectionRow row: 2.5 grid units, or 75% of that when compact. |
sakura |
color (read-only) |
— | The second end of the signature gradient, which runs from accent to sakura. Only for the edge glow, an active progress shimmer and "update ready": never on buttons, selection or text. |
selection |
color (read-only) |
— | A selected row or item: a quiet accent tint. |
selectionInactive |
color (read-only) |
— | A selected row or item when the view has no focus. |
separator |
color (read-only) |
— | Decorative hairlines and card borders (light). |
spacing |
real (read-only) |
— | 8: the middle step of the spacing scale. |
spacingLarge |
real (read-only) |
— | 12. |
spacingSmall |
real (read-only) |
— | 4. |
spacingXLarge |
real (read-only) |
— | 16. |
spacingXSmall |
real (read-only) |
— | 2. |
spacingXXLarge |
real (read-only) |
— | 24. |
success |
color (read-only) |
— | The colour scheme's positive text colour. |
surface |
color (read-only) |
— | A card over the page (a Section's card, step 1). |
surfaceAlt |
color (read-only) |
— | The alternate row colour of the colour scheme. |
surfaceRaised |
color (read-only) |
— | Menus, popovers, dialogs and tooltips (step 2). |
text |
color (read-only) |
— | Body text. |
textDisabled |
color (read-only) |
— | Disabled text, still readable: 55% of text. |
textMuted |
color (read-only) |
— | Secondary information ("Step 2 of 2"), captions and units: 65% of text. |
textScale |
real (read-only) |
— | Passes Appearance.textScale through. |
warning |
color (read-only) |
— | The colour scheme's neutral text colour. |
Spacing steps are 2, 4, 8, 12, 16 and 24 pixels.
Enums
Density
| Value | Description |
|---|---|
AtlasStyle.Normal |
The default density (0). Rows are 2.5 grid units and controls 28 px high. |
AtlasStyle.Compact |
Denser rows (75% of normal) and 24 px controls (1). |
Motion and springs
The durations are quick and subtle, and all 0 when reducedMotion is true. A running animation or Behavior reads one of them. Spatial movement (a panel opening, a row expanding, a selection indicator sliding) uses AtlasSpringAnimation: standard by default, and expressive: true only for signature moments. Colour and opacity never spring: they fade with the durations.
Note
The sakura colour is only for the edge glow, an active progress shimmer and "update ready". Never use it on buttons, selection or text.