# Configuration

Bruut works out of the box with smart defaults, but you can customize it for each project.

# Available settings

All the settings can be added to the with () Sass map. For example, if you'd like to change the height property in $input and the colors property in $color, add it like this:

// all.scss
@use "~bruut-design-system" as bruut with (
	$input: (
		height: 3em
	), 
	$color: (
		colors: (
			'alpha' : #ffa822,
			'bravo' : #ff6150,
			'charlie' : #1ac0c6,
			'delta' : #7AC93C,
			'echo' : #134e6f,
			'foxtrot' : #dee0e6
		)
	)
);

# $animation

# $breakpoints

The $breakpoints variable doesn't have keys, but accepts a Sass Map with breakpoint key/value pairs

# $color (text-color, background-color, border-color)

The system needs the following base colors to be defined: [alpha (primary), bravo (secondary), charlie, delta, echo, foxtrot (greyish)]. The states property takes a Sass map with 4 state colors: [success, info, warning, error].

# $dimensions (width/height, spacing, radius, rhythm)

# $flex

# $grid

# $input

# $ratio

# $shadow

The $shadow variable doesn't have keys, but accepts a Sass Map with shadow key/value pairs

# $text (sizes, weights)

# $viewport-sizer