Global tokens

Base tokens define the foundational design decisions of the system, such as colors, typography, dimension, and shadows. These tokens serve as the core building blocks, ensuring consistency and scalability across all components and themes. By abstracting raw values into reusable tokens, the system maintains flexibility while allowing for seamless updates and adaptations.

Dimension

Define consistent spacing, sizing, and layout measurements across the design system, ensuring proportional and scalable designs.

$cdsbt-dimension-0: 0;
$cdsbt-dimension-1: 0.0625rem;
$cdsbt-dimension-2: 0.125rem;
$cdsbt-dimension-4: 0.25rem;
$cdsbt-dimension-8: 0.5rem;
$cdsbt-dimension-12: 0.75rem;
$cdsbt-dimension-16: 1rem;
$cdsbt-dimension-20: 1.25rem;
$cdsbt-dimension-24: 1.5rem;
$cdsbt-dimension-32: 2rem;
$cdsbt-dimension-40: 2.5rem;
$cdsbt-dimension-48: 3rem;
$cdsbt-dimension-56: 3.5rem;
$cdsbt-dimension-64: 4rem;
$cdsbt-dimension-72: 4.5rem;
$cdsbt-dimension-80: 5rem;
$cdsbt-dimension-88: 5.5rem;
$cdsbt-dimension-96: 6rem;
$cdsbt-dimension-104: 6.5rem;
$cdsbt-dimension-112: 7rem;
$cdsbt-dimension-120: 7.5rem;
$cdsbt-dimension-128: 8rem;
$cdsbt-dimension-160: 10rem;
$cdsbt-dimension-240: 15rem;
$cdsbt-dimension-320: 20rem;
$cdsbt-dimension-480: 30rem;
$cdsbt-dimension-560: 35rem;
$cdsbt-dimension-640: 40rem;
$cdsbt-dimension-720: 45rem;
$cdsbt-dimension-1024: 64rem;
$cdsbt-dimension-1440: 90rem;
$cdsbt-dimension-999: 999rem;

Shadow

Specify elevation and depth through shadow styles, adding visual hierarchy and realism to components.

$cdsbt-shadow-1: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
$cdsbt-shadow-2: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);
$cdsbt-shadow-4: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
$cdsbt-shadow-8: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1);
$cdsbt-shadow-16: 0 1rem 1rem rgba(0, 0, 0, 0.1);

Z-index

Manage stacking order for layered UI elements, maintaining clarity and predictable behavior in complex layouts.

$cdsbt-zindex-0: 0;
$cdsbt-zindex-100: 100;
$cdsbt-zindex-200: 200;
$cdsbt-zindex-300: 300;
$cdsbt-zindex-400: 400;
$cdsbt-zindex-500: 500;
$cdsbt-zindex-600: 600;

Speed

Control animation and transition durations, ensuring smooth, consistent motion across interactions.

$cdsbt-speed-1: 0.1s;
$cdsbt-speed-2: 0.2s;
$cdsbt-speed-4: 0.4s;
$cdsbt-speed-8: 0.8s;