4.0 KiB
| title | parent | nav_order |
|---|---|---|
| Global variables | Colors | 2 |
Global variables are defined at the Scene root level. You can preview all of the them in the Sampler app.
AtlantaFX is based on GitHub Primer color system. You can check GitHub Primer interface guidelines for more detailed instructions. There'are functional color variables and color scale variables.
Functional colors
Foreground colors.
| Color | Usage |
|---|---|
-color-fg-default |
Primary color for text and icons. It should be used for body content, titles and labels. |
-color-fg-muted |
For content that is secondary or that provides additional context but is not critical to understanding the flow of an interface. |
-color-fg-subtle |
For placeholders or decorative foregrounds. |
-color-fg-emphasis |
The text color designed to combine with *-emphasis backgrounds for optimal contrast. |
Background colors.
| Color | Usage |
|---|---|
-color-bg-default |
Primary background color. |
-color-bg-overlay |
Background color for popup controls such as popovers and tooltips. |
-color-bg-subtle |
Provides visual rest and contrast against the default background. |
-color-bg-inset |
For a focal point, such as in conversations or activity feeds. |
Border colors.
| Color | Usage |
|---|---|
-color-border-default |
Default color to create bounds around content. |
-color-border-muted |
For dividers to emphasize the separation between items, columns or sections. |
-color-border-subtle |
Faint border color. |
-color-shadow-default |
Color for creating shadow effects around controls. |
The below colors are all accent colors. Use them according to their role. The variable names are self-explaining.
Neutral colors. Use to highlight content without any added meaning.
-color-neutral-emphasis-plus-color-neutral-emphasis-color-neutral-muted-color-neutral-subtle
Accent (or primary) color. Use to draw attention to the particular area or component.
-color-accent-fg-color-accent-emphasis-color-accent-muted-color-accent-subtle
Success colors. Use to express the completion or positive outcome of a task.
-color-success-fg-color-success-emphasis-color-success-muted-color-success-subtle
Attention colors. Use to warn of pending tasks or highlight active content.
-color-warning-fg-color-warning-emphasis-color-warning-muted-color-warning-subtle
Danger colors. Use to inform of error or another negative message.
-color-danger-fg-color-danger-emphasis-color-danger-muted-color-danger-subtle
Note that a functional color values is not always picked from the corresponding color palette. It can have its own unique value, e.g. to add opacity.
Scale variables
Generally, scale variables only supposed to be used by theme devs as replacement of dynamic brightness calculation functions. Avoid referencing them directly when building UI that needs to adapt to different color themes. Instead, use the functional variables listed above. All legitimate functional color combinations are guaranteed to look good in all color themes, because they need to maintain a certain amount of contrast. If you're using scale variable as a part of that combination it may break in another theme. In rare cases, you may need to use scale variables to define custom functional variables in your application.
Each color scale consists of 10 shades from 0 to 9.
-color-dark-color-light-color-base-[0-9]-color-accent-[0-9]-color-success-[0-9]-color-warning-[0-9]-color-danger-[0-9]