Skip to content
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
    • 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 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)

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)

Borders

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

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;
}