diff --git a/docs/source/backgrounds.md b/docs/source/backgrounds.md
index 0315080cb..6fcd8518a 100644
--- a/docs/source/backgrounds.md
+++ b/docs/source/backgrounds.md
@@ -5,105 +5,179 @@ title: "Backgrounds"
# Backgrounds
-
-
- |
- .bg-light |
-
-
- |
- .bg-light-soft |
-
-
- |
- .bg-light-softer |
-
-
- |
- .bg-dark |
-
-
- |
- .bg-dark-soft |
-
-
- |
- .bg-dark-softer |
-
-
- |
- .bg-red |
-
-
- |
- .bg-red-light |
-
-
- |
- .bg-orange |
-
-
- |
- .bg-orange-light |
-
-
- |
- .bg-yellow |
-
-
- |
- .bg-yellow-light |
-
-
- |
- .bg-green |
-
-
- |
- .bg-green-light |
-
-
- |
- .bg-teal |
-
-
- |
- .bg-teal-light |
-
-
- |
- .bg-blue |
-
-
- |
- .bg-blue-light |
-
-
- |
- .bg-indigo |
-
-
- |
- .bg-indigo-light |
-
-
- |
- .bg-purple |
-
-
- |
- .bg-purple-light |
-
-
- |
- .bg-pink |
-
-
- |
- .bg-pink-light |
-
-
-
+
+
+Colors
+
+
+
+
+ .bg-light
+
+
+ .bg-light-soft
+
+
+ .bg-light-softer
+
+
+ .bg-light-softest
+
+
+
+
+ .bg-dark
+
+
+ .bg-dark-soft
+
+
+ .bg-dark-softer
+
+
+ .bg-dark-softest
+
+
+
+
+
+ .bg-red-dark
+
+
+ .bg-red
+
+
+ .bg-red-light
+
+
+ .bg-red-lightest
+
+
+
+
+ .bg-orange-dark
+
+
+ .bg-orange
+
+
+ .bg-orange-light
+
+
+ .bg-orange-lightest
+
+
+
+
+ .bg-yellow-dark
+
+
+ .bg-yellow
+
+
+ .bg-yellow-light
+
+
+ .bg-yellow-lightest
+
+
+
+
+
+ .bg-green-dark
+
+
+ .bg-green
+
+
+ .bg-green-light
+
+
+ .bg-green-lightest
+
+
+
+
+ .bg-teal-dark
+
+
+ .bg-teal
+
+
+ .bg-teal-light
+
+
+ .bg-teal-lightest
+
+
+
+
+ .bg-blue-dark
+
+
+ .bg-blue
+
+
+ .bg-blue-light
+
+
+ .bg-blue-lightest
+
+
+
+
+
+ .bg-indigo-dark
+
+
+ .bg-indigo
+
+
+ .bg-indigo-light
+
+
+ .bg-indigo-lightest
+
+
+
+
+ .bg-purple-dark
+
+
+ .bg-purple
+
+
+ .bg-purple-light
+
+
+ .bg-purple-lightest
+
+
+
+
+ .bg-pink-dark
+
+
+ .bg-pink
+
+
+ .bg-pink-light
+
+
+ .bg-pink-lightest
+
+
+
Responsive
The background utitlies can also be used with responsive prefixes:
@@ -156,42 +230,125 @@ div {
```
-## Custom backgrounds
+Customizing
-How to generate custom background utilities:
+To customize the available background colors, start by creating a copy of the default `@bg-colors` variable in your own Less file:
```less
-.define-text-color('primary';
- default #3498db,
- 'light' #a0cfee,
- 'dark' #2980b9
-;);
+@bg-colors:
+ 'light' @color-white,
+ 'light-soft' @color-grey-200,
+ 'light-softer' @color-grey-300,
+
+ 'dark' @color-grey-900,
+ 'dark-soft' @color-grey-800,
+ 'dark-softer' @color-grey-700,
+
+ 'red-dark' @color-red-dark,
+ 'red' @color-red,
+ 'red-light' @color-red-light,
+ 'red-lightest' @color-red-lightest,
+
+ 'orange-dark' @color-orange-dark,
+ 'orange' @color-orange,
+ 'orange-light' @color-orange-light,
+ 'orange-lightest' @color-orange-lightest,
+
+ 'yellow-dark' @color-yellow-dark,
+ 'yellow' @color-yellow,
+ 'yellow-light' @color-yellow-light,
+ 'yellow-lightest' @color-yellow-lightest,
+
+ 'green-dark' @color-green-dark,
+ 'green' @color-green,
+ 'green-light' @color-green-light,
+ 'green-lightest' @color-green-lightest,
+
+ 'teal-dark' @color-teal-dark,
+ 'teal' @color-teal,
+ 'teal-light' @color-teal-light,
+ 'teal-lightest' @color-teal-lightest,
+
+ 'blue-dark' @color-blue-dark,
+ 'blue' @color-blue,
+ 'blue-light' @color-blue-light,
+ 'blue-lightest' @color-blue-lightest,
+
+ 'indigo-dark' @color-indigo-dark,
+ 'indigo' @color-indigo,
+ 'indigo-light' @color-indigo-light,
+ 'indigo-lightest' @color-indigo-lightest,
+
+ 'purple-dark' @color-purple-dark,
+ 'purple' @color-purple,
+ 'purple-light' @color-purple-light,
+ 'purple-lightest' @color-purple-lightest,
+
+ 'pink-dark' @color-pink-dark,
+ 'pink' @color-pink,
+ 'pink-light' @color-pink-light,
+ 'pink-lightest' @color-pink-lightest,
+;
```
-How to use custom background utilities:
+If you don't need certain background colors, remove them or comment them out to prevent those utilities from being generated:
+
+```less
+@bg-colors:
+ // ...
+
+ // 'yellow-dark' @color-yellow-dark,
+ // 'yellow' @color-yellow,
+ // 'yellow-light' @color-yellow-light,
+ // 'yellow-lightest' @color-yellow-lightest,
+
+ 'green-dark' @color-green-dark,
+ 'green' @color-green,
+ 'green-light' @color-green-light,
+ 'green-lightest' @color-green-lightest,
+
+ // 'teal-dark' @color-teal-dark,
+ // 'teal' @color-teal,
+ // 'teal-light' @color-teal-light,
+ // 'teal-lightest' @color-teal-lightest,
+
+ 'blue-dark' @color-blue-dark,
+ 'blue' @color-blue,
+ 'blue-light' @color-blue-light,
+ 'blue-lightest' @color-blue-lightest,
+
+ 'indigo-dark' @color-indigo-dark,
+ 'indigo' @color-indigo,
+ 'indigo-light' @color-indigo-light,
+ 'indigo-lightest' @color-indigo-lightest,
+
+ // 'purple-dark' @color-purple-dark,
+ // 'purple' @color-purple,
+ // 'purple-light' @color-purple-light,
+ // 'purple-lightest' @color-purple-lightest,
+
+ // 'pink-dark' @color-pink-dark,
+ // 'pink' @color-pink,
+ // 'pink-light' @color-pink-light,
+ // 'pink-lightest' @color-pink-lightest,
+;
+```
+
+If you'd like to add new background colors, add them to the end of the `@bg-colors` variable like so:
+
+```less
+@bg-colors:
+ // ...
+
+ 'brand-primary' #cf4646,
+ 'brand-secondary' #f6c92e,
+;
+```
+
+New background color utilities (including responsive versions) will be generated for those colors and can be used in your markup like any other background color utility:
```html
-
-
-
-
-
-
-
-
-```
-
-```less
-// Using custom utilities in Less:
-
-div {
- .bg-primary;
- .bg-primary-light;
- .bg-primary-dark;
-
- // Responsive example
- .screen(lg, {
- .bg-primary;
- });
-}
+
+
+
```
diff --git a/src/colors.less b/src/colors.less
index 57cd048d2..3deaa2a06 100644
--- a/src/colors.less
+++ b/src/colors.less
@@ -1,15 +1,13 @@
-@color-white: #ffffff;
-@color-grey-50: #fafafa;
-@color-grey-100: #f5f5f5;
-@color-grey-200: #eeeeee;
-@color-grey-300: #e0e0e0;
-@color-grey-400: #bdbdbd;
-@color-grey-500: #9e9e9e;
-@color-grey-600: #757575;
-@color-grey-700: #616161;
-@color-grey-800: #424242;
-@color-grey-900: #212121;
@color-black: #000000;
+@color-grey-900: #212b35;
+@color-grey-800: #404e5c;
+@color-grey-700: #647382;
+@color-grey-600: #919eab;
+@color-grey-500: #c5ced6;
+@color-grey-400: #dfe3e8;
+@color-grey-300: #f0f2f5;
+@color-grey-200: #f7f9fa;
+@color-white: #ffffff;
@color-red-dark: #d43633;
@color-red: #f25451;
@@ -19,12 +17,12 @@
@color-orange-dark: #f29500;
@color-orange: #ffb82b;
@color-orange-light: #ffd685;
-@color-orange-lightest: #fff8eb;
+@color-orange-lightest: #fff8eb;
@color-yellow-dark: #ffc400;
@color-yellow: #ffe14a;
@color-yellow-light: #ffea83;
-@color-yellow-lightest: #fffbe5;
+@color-yellow-lightest: #fffbe5;
@color-green-dark: #34ae4c;
@color-green: #57d06f;
diff --git a/src/utilities/backgrounds.less b/src/utilities/backgrounds.less
index 3b07d978d..e61fa026f 100644
--- a/src/utilities/backgrounds.less
+++ b/src/utilities/backgrounds.less
@@ -1,11 +1,13 @@
@bg-colors:
'light' @color-white,
- 'light-soft' @color-grey-100,
- 'light-softer' @color-grey-200,
+ 'light-soft' @color-grey-200,
+ 'light-softer' @color-grey-300,
+ 'light-softest' @color-grey-400,
- 'dark' @color-grey-800,
- 'dark-soft' @color-grey-700,
- 'dark-softer' @color-grey-600,
+ 'dark' @color-grey-900,
+ 'dark-soft' @color-grey-800,
+ 'dark-softer' @color-grey-700,
+ 'dark-softest' @color-grey-600,
'red-dark' @color-red-dark,
'red' @color-red,
diff --git a/src/utilities/borders.less b/src/utilities/borders.less
index d8e961d10..b0e5e4aa0 100644
--- a/src/utilities/borders.less
+++ b/src/utilities/borders.less
@@ -9,12 +9,12 @@
// Colors
@border-dark: @color-grey-600;
-@border-dark-soft: @color-grey-400;
-@border-dark-softer: @color-grey-300;
+@border-dark-soft: @color-grey-500;
+@border-dark-softer: @color-grey-400;
@border-light: @color-white;
-@border-light-soft: @color-grey-100;
-@border-light-softer: @color-grey-200;
+@border-light-soft: @color-grey-200;
+@border-light-softer: @color-grey-300;
@border-dark-overlay: hsla(0, 0%, 0%, 20%);
@border-dark-overlay-soft: hsla(0, 0%, 0%, 10%);
diff --git a/src/utilities/text.less b/src/utilities/text.less
index 347c560b9..22a44434f 100644
--- a/src/utilities/text.less
+++ b/src/utilities/text.less
@@ -53,10 +53,10 @@
@text-light-softer: fade(@color-white, 45%);
@text-light-softest: fade(@color-white, 35%);
-@text-dark: @color-grey-800;
-@text-dark-soft: @color-grey-600;
-@text-dark-softer: @color-grey-500;
-@text-dark-softest: @color-grey-400;
+@text-dark: @color-grey-900;
+@text-dark-soft: @color-grey-700;
+@text-dark-softer: @color-grey-600;
+@text-dark-softest: @color-grey-500;
@text-colors:
'light' @text-light,