Sundarcss Variables

Overview

Our library Sundarcss uses SASS variables to maintain consistency across the codebase and make customization easier. These variables control everything from colors and spacing to grid settings and many more .

These variables are defined at the top of the SASS file and can be customized.

Grid Variables

These Variables Control the grid system.

$grid-columns: 12;
$grid-gap: 1rem;
$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px
);

$grid-columns: Number of columns in the grid system (default: 12)
$grid-gap: Spacing between grid columns (default: 1rem)
$breakpoints: Breakpoint define the neames of their pixel values

Color Variables

These define the color-

$colors: (
  'primary': #007bff,
  'secondary': #6c757d,
  'success': #28a745,
  'danger': #dc3545,
  'warning': #ffc107,
  'info': #17a2b8,
  'light': #f8f9fa,
  'dark': #343a40
);

The $colors This contains key-value pairs of color names and their hex values. These colors are used throughout the library for text, backgrounds, and other UI elements (easy to use and simple naming convention).

Spacing Variables

control spacing throughout the UI.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3
);

$spacer: Base spacing unit (default: 1rem)
$spacers: Spacing scale values used for margin, padding, and gap utilities

Typography Variables

Variables that control font family, sizes, and other typography settings.

$font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$font-sizes: (
  'xs': 0.75rem,
  'sm': 0.875rem,
  'base': 1rem,
  'lg': 1.125rem,
  'xl': 1.25rem,
  '2xl': 1.5rem,
  '3xl': 1.875rem,
  '4xl': 2.25rem
);

$font-family-base: Default font stack
$font-sizes: Map of font size names to their rem values

Animation Variables

Variables that control transitions and animations.

$transition-speed: 0.3s;

$transition-speed: Default transition duration (default: 0.3s)

Customizing Variables

To customize the library, you can override these variables before importing the library.

 
$grid-columns: 24;  
$spacer: 0.8rem; 
$colors: (
  'primary': #6200ee,  
  'secondary': #03dac6,
  'success': #28a745,
  'danger': #dc3545,
  'warning': #ffc107,
  'info': #17a2b8,
  'light': #f8f9fa,
  'dark': #121212
);

By overriding variables before importing the library, you can customize the entire UI to match your brand or design system.