defaults.scss

// -----------------------------
// Default Config
// -----------------------------

// Colors
$steller-colors: () !default;

// Typography
$steller-font-families: () !default;

$steller-font-sizes: (
  'xs': 0.75rem,
  'sm': 0.875rem,
  'md': 1rem,
  'lg': 1.5rem,
  'xl': 1.875rem,
  '2xl': 2.25rem,
  '3xl': 3rem,
  '4xl': 3.75rem,
) !default;

$steller-font-weights:(
  'bold': 700,
  'medium': 500,
  'regular': 400,
  'light': 300,
  'thin': 100,
) !default;

$steller-leadings: (
  'sm': 1.25rem,
  'md': 1.5rem,
  'lg': 1.75rem,
  'xl': 2rem,
) !default;

$steller-letter-spacings: (
  'tight': -0.05rem,
  'normal': 0,
  'wide': 0.05rem,
) !default;

// Breakpoints
$steller-breakpoints: (
  'sm': 320px,
  'md': 600px,
  'lg': 1024px,
) !default;

// Container
$steller-container-width: 1140px !default;

$steller-container-paddings: (
  'sm': (padding: 8px),
  'md': (padding: 12px),
  'lg': (padding: 16px),
) !default;

// Grid
$steller-grid-columns: 12 !default;

$steller-column-gutters: (
  'sm': 16px,
  'md': 16px,
  'lg': 24px,
) !default;

$steller-row-gutters: (
  'sm': 8px,
  'md': 8px,
  'lg': 16px,
) !default;

// Spacing
$steller-spacings: (
  'xs': 4px,
  'sm': 8px,
  'md': 16px,
  'lg': 24px,
  'xl': 32px,
  '2xl': 48px,
  '3xl': 64px,
) !default;

// Borders
$steller-border-radiuses: (
  'sm': 5px,
  'md': 10px,
  'lg': 15px,
  'xl': 20px,
) !default;

$steller-border-widths: (
  'xs': 1px,
  'sm': 2px,
  'md': 4px,
  'lg': 6px,
  'xl': 8px,
) !default;

// Motion
$steller-transition-properties: (
  all,
  width,
  height,
  transform,
  opacity,
  border,
  background,
  background-color,
  box-shadow,
  margin,
  padding,
  visibility,
) !default;

$steller-durations: (
  'extra-slow': 500ms,
  'slow': 400ms,
  'normal': 300ms,
  'fast': 200ms,
  'extra-fast': 100ms,
) !default;

// Effects
$steller-box-shadows: (
  'sm': (0 7px 15px 0 rgba(0, 0, 0, 0.11), 0 1px 8px 0 rgba(0, 0, 0, 0.06)),
  'md': (0 10px 20px 0 rgba(0, 0, 0, 0.22), 0 3px 12px 0 rgba(0, 0, 0, 0.07)),
  'lg': (0 15px 30px 0 rgba(0, 0, 0, 0.33), 0 5px 15px 0 rgba(0, 0, 0, 0.1)),
) !default;

// Gradients
$steller-gradients: () !default;

// Modules
$steller-modules: () !default;