Skip to content
No background activity
Aggarly OS
  • Getting Started
    • Introduction
  • Foundations
    • Colors
    • Spacing
    • Radius
    • Typography
    • Shadows
    • Z-Index
    • Gradients
    • Tokens
    • RTL & Direction
    • Theming
  • Layout
    • Containers
    • Grid System
    • Layout Utilities
  • Components
    • Alerts
    • Avatars
    • Buttons
    • Button Group
    • Badges
    • Inputs
    • Select
    • Checkbox
    • Counters-timers
    • Radio
    • Switch
    • Stepper
    • Select-pro
    • Cards
    • Modals
    • Stacked dialogs
    • Dropdown
    • Popover
    • Tooltip
    • Accordion
    • Breadcrumb
    • Tabs
    • Navbar
    • List Group
    • Toasts
    • Skeleton
    • Pagination
    • Progress
    • Table
    • Icons
    • Form
    • Ribbons
    • Spinner
    • Offcanvas
    • Feedback
    • Grid
    • Data UI
  • Data UI
    • Overview
  • Platform
    • Reference DataCore
  • Widgets
    • KPI
    • Analytics
    • Behavior
  • Brand
    • Logo
    • Brand Usage
Foundations/Colors

Colors

This page renders live computed CSS variables from the active theme. Any change in source-tokens.ts is reflected here automatically after rebuilding tokens.

Theme Preview

Light
Primary
$color-primary → --ds-color-primary
var(--ds-color-primary)
Primary Hover
$color-primary-hover → --ds-color-primary-hover
var(--ds-color-primary-hover)
Secondary
$color-secondary → --ds-color-secondary
var(--ds-color-secondary)
Secondary Hover
$color-secondary-hover → --ds-color-secondary-hover
var(--ds-color-secondary-hover)
Accent Green
$color-accent-green → --ds-color-accent-green
var(--ds-color-accent-green)
Accent Green Hover
$color-accent-green-hover → --ds-color-accent-green-hover
var(--ds-color-accent-green-hover)
Accent Orange
$color-accent-orange → --ds-color-accent-orange
var(--ds-color-accent-orange)
Accent Orange Hover
$color-accent-orange-hover → --ds-color-accent-orange-hover
var(--ds-color-accent-orange-hover)
Success
$color-success → --ds-color-success
var(--ds-color-success)
Success Hover
$color-success-hover → --ds-color-success-hover
var(--ds-color-success-hover)
Warning
$color-warning → --ds-color-warning
var(--ds-color-warning)
Warning Hover
$color-warning-hover → --ds-color-warning-hover
var(--ds-color-warning-hover)
Danger
$color-danger → --ds-color-danger
var(--ds-color-danger)
Danger Hover
$color-danger-hover → --ds-color-danger-hover
var(--ds-color-danger-hover)
Info
$color-info → --ds-color-info
var(--ds-color-info)
Info Hover
$color-info-hover → --ds-color-info-hover
var(--ds-color-info-hover)
Neutral
$color-neutral → --ds-color-neutral
var(--ds-color-neutral)
Neutral Hover
$color-neutral-hover → --ds-color-neutral-hover
var(--ds-color-neutral-hover)
Dark
Primary
$color-primary → --ds-color-primary
var(--ds-color-primary)
Primary Hover
$color-primary-hover → --ds-color-primary-hover
var(--ds-color-primary-hover)
Secondary
$color-secondary → --ds-color-secondary
var(--ds-color-secondary)
Secondary Hover
$color-secondary-hover → --ds-color-secondary-hover
var(--ds-color-secondary-hover)
Accent Green
$color-accent-green → --ds-color-accent-green
var(--ds-color-accent-green)
Accent Green Hover
$color-accent-green-hover → --ds-color-accent-green-hover
var(--ds-color-accent-green-hover)
Accent Orange
$color-accent-orange → --ds-color-accent-orange
var(--ds-color-accent-orange)
Accent Orange Hover
$color-accent-orange-hover → --ds-color-accent-orange-hover
var(--ds-color-accent-orange-hover)
Success
$color-success → --ds-color-success
var(--ds-color-success)
Success Hover
$color-success-hover → --ds-color-success-hover
var(--ds-color-success-hover)
Warning
$color-warning → --ds-color-warning
var(--ds-color-warning)
Warning Hover
$color-warning-hover → --ds-color-warning-hover
var(--ds-color-warning-hover)
Danger
$color-danger → --ds-color-danger
var(--ds-color-danger)
Danger Hover
$color-danger-hover → --ds-color-danger-hover
var(--ds-color-danger-hover)
Info
$color-info → --ds-color-info
var(--ds-color-info)
Info Hover
$color-info-hover → --ds-color-info-hover
var(--ds-color-info-hover)
Neutral
$color-neutral → --ds-color-neutral
var(--ds-color-neutral)
Neutral Hover
$color-neutral-hover → --ds-color-neutral-hover
var(--ds-color-neutral-hover)

Brand

Primary
$color-primary → --ds-color-primary
var(--ds-color-primary)
Primary Hover
$color-primary-hover → --ds-color-primary-hover
var(--ds-color-primary-hover)
Secondary
$color-secondary → --ds-color-secondary
var(--ds-color-secondary)
Secondary Hover
$color-secondary-hover → --ds-color-secondary-hover
var(--ds-color-secondary-hover)

Accents

Accent Green
$color-accent-green → --ds-color-accent-green
var(--ds-color-accent-green)
Accent Green Hover
$color-accent-green-hover → --ds-color-accent-green-hover
var(--ds-color-accent-green-hover)
Accent Orange
$color-accent-orange → --ds-color-accent-orange
var(--ds-color-accent-orange)
Accent Orange Hover
$color-accent-orange-hover → --ds-color-accent-orange-hover
var(--ds-color-accent-orange-hover)

Semantic

Success
$color-success → --ds-color-success
var(--ds-color-success)
Success Hover
$color-success-hover → --ds-color-success-hover
var(--ds-color-success-hover)
Warning
$color-warning → --ds-color-warning
var(--ds-color-warning)
Warning Hover
$color-warning-hover → --ds-color-warning-hover
var(--ds-color-warning-hover)
Danger
$color-danger → --ds-color-danger
var(--ds-color-danger)
Danger Hover
$color-danger-hover → --ds-color-danger-hover
var(--ds-color-danger-hover)
Info
$color-info → --ds-color-info
var(--ds-color-info)
Info Hover
$color-info-hover → --ds-color-info-hover
var(--ds-color-info-hover)
Neutral
$color-neutral → --ds-color-neutral
var(--ds-color-neutral)
Neutral Hover
$color-neutral-hover → --ds-color-neutral-hover
var(--ds-color-neutral-hover)

Text

Text colours meet WCAG 2.2 AA (4.5:1) on every surface in both themes. Colour text and meaningful icons with a *-text token, never the raw tone: the tone is for fills, borders, dots and tints. On a solid tone fill use on-*. Borders, dividers and tracks use $color-line, which is not a text colour.

Text Main
$color-text-main → --ds-color-text-main
var(--ds-color-text-main)
Text Muted
$color-text-muted → --ds-color-text-muted
var(--ds-color-text-muted)
Text Soft
$color-text-soft → --ds-color-text-soft
var(--ds-color-text-soft)

Tone text

Primary Text
$color-primary-text → --ds-color-primary-text
var(--ds-color-primary-text)
Secondary Text
$color-secondary-text → --ds-color-secondary-text
var(--ds-color-secondary-text)
Success Text
$color-success-text → --ds-color-success-text
var(--ds-color-success-text)
Warning Text
$color-warning-text → --ds-color-warning-text
var(--ds-color-warning-text)
Danger Text
$color-danger-text → --ds-color-danger-text
var(--ds-color-danger-text)
Info Text
$color-info-text → --ds-color-info-text
var(--ds-color-info-text)
Accent Green Text
$color-accent-green-text → --ds-color-accent-green-text
var(--ds-color-accent-green-text)
Accent Orange Text
$color-accent-orange-text → --ds-color-accent-orange-text
var(--ds-color-accent-orange-text)
Neutral Text
$color-neutral-text → --ds-color-neutral-text
var(--ds-color-neutral-text)

On solid fills

On Primary
$color-on-primary → --ds-color-on-primary
var(--ds-color-on-primary)
On Secondary
$color-on-secondary → --ds-color-on-secondary
var(--ds-color-on-secondary)
On Success
$color-on-success → --ds-color-on-success
var(--ds-color-on-success)
On Warning
$color-on-warning → --ds-color-on-warning
var(--ds-color-on-warning)
On Danger
$color-on-danger → --ds-color-on-danger
var(--ds-color-on-danger)
On Info
$color-on-info → --ds-color-on-info
var(--ds-color-on-info)
On Accent Green
$color-on-accent-green → --ds-color-on-accent-green
var(--ds-color-on-accent-green)
On Accent Orange
$color-on-accent-orange → --ds-color-on-accent-orange
var(--ds-color-on-accent-orange)
On Neutral
$color-on-neutral → --ds-color-on-neutral
var(--ds-color-on-neutral)

Surfaces

Page Background
$color-bg-page → --ds-color-bg-page
var(--ds-color-bg-page)
Surface
$color-bg-surface → --ds-color-bg-surface
var(--ds-color-bg-surface)
Panel
$color-bg-panel → --ds-color-bg-panel
var(--ds-color-bg-panel)
Glass
$color-bg-glass → --ds-color-bg-glass
var(--ds-color-bg-glass)
Scrim
$color-scrim → --ds-color-scrim
var(--ds-color-scrim)

Borders

Border Soft
$color-border-soft → --ds-color-border-soft
var(--ds-color-border-soft)
Line
$color-line → --ds-color-line
var(--ds-color-line)

Interaction

Focus Ring
$color-focus-ring → --ds-color-focus-ring
var(--ds-color-focus-ring)

Usage

Use tokens in SCSS
@use "@/design-system/scss/tokens" as tokens;

.example {
  color: tokens.$color-text-main;
  background: tokens.$color-bg-surface;
  border: 1px solid tokens.$color-border-soft;
}