Colors
Many of Space's various components and utilities are built through a series of colors defined in a SASS map. This map can be looped over in SASS to quickly generate a series of rulesets.
Variable defaults
Every SASS variable in Space includes the !default
flag allowing you to override the variable's default value in your own SASS without modifying Space's source code. Copy and paste variables as needed, modify their values, and remove the !default
flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Space.
Variable overrides within the same SASS file can come before or after the default variables. However, when overriding across SASS files, your overrides must come before you import Space's SASS files.
Modify map
To modify an existing color in our $theme-colors
map, add the following to your custom SASS file:
$theme-colors: (
"primary": #377dff,
"danger": #de4437
);
Add to map
To add a new color to $theme-colors
, add the new key and value:
$theme-colors: (
"custom-color": #900
);
Required keys
Space assumes the presence of some specific keys within SASS maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific SASS map's key is being used.
For example, we use the primary
, success
, and danger
keys from $theme-colors
for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause SASS compilation issues. In these instances, you'll need to modify the SASS code that makes use of those values.
Functions
Space utilizes several SASS functions, but only a subset are applicable to general theming. We've included two functions for getting values from the color maps:
@function color($hs-key: "primary") {
@return map-get($theme-colors, $hs-key);
}
@function theme-color($hs-key: "accent") {
@return map-get($theme-colors, $hs-key);
}
These allow you to pick one color from a SASS map.
.custom-element {
background-color: theme-color("dark");
}
We also have another function for getting a particular level of color from the $theme-colors
map. Negative level values will lighten the color, while higher levels will darken.
Color contrast
One additional function we include in Space is the color contrast function, color-yiq
. It utilizes the YIQ color space to automatically return a light (#fff
) or dark (#111
) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes.
For example, to generate color swatches from our $theme-colors
map:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
It can also be used for one-off contrast needs:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
You can also specify a base color with our color map functions:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
Colors
Space inherits the Bootstrap's $theme-colors
colors map and modifies them with our alternatively picked colors. Space also includes several other colors which are located and can be modified in _variables.scss
.
All colors
All colors available in Space, are available as SASS variables in our _variables.scss
file.
Here's how you can use these in your SASS:
Here's how you can use these in your SASS:
.alpha {
color: $primary;
}
// From the SASS map with Bootstrap `color()` function {
.beta {
color: color("purple");
}
Color utility classes are also available for setting color
and background-color
.
Theme colors
We use a subset of all colors (Bootstrap's method) to create a smaller color palette for generating color schemes, also available as SASS variables scss/_variables.scss
file.
Add, remove, or modify values within the map to update how they're used in many other components.
Gray and light blue colors
An expansive set of gray and light blue variables and a SASS map in _variables.scss
for consistent shades of gray and light blue across your project.
Add, remove, or modify values within the map to update how they're used in many other components.
Components
Many of Space's components and utilities are built with @each
loops that iterate over a SASS map. This is especially helpful for generating variants of a component by our $theme-colors
and creating responsive variants for each breakpoint. As you customize these SASS maps and recompile, you'll automatically see your changes reflected in these loops.
Modifiers
Many of Space's components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., .btn-text
) while style variations are confined to modifier classes (e.g., .btn-text-primary
). These modifier classes are built from the $theme-colors
map to make customizing the number and name of our modifier classes.
Here's an example of how we loop over the $theme-colors
map to generate modifiers to the .btn-text
component.
// Generate alert modifier classes
@each $color, $value in $theme-colors {
.btn-text-#{$color} {
@include badge($value, $value);
}
}