Update colors in documentation

- Remove all color-100 tokens since we are using bootstrap's built-in
functions for color lightening
- Update changed hex values

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I08894fdb64021e38ea8b5c0f47e127d72f3d3ecd

7 files changed, 46 insertions, 38 deletions

diff --git a/docs/.vuepress/components/colors/blues.vue b/docs/.vuepress/components/colors/blues.vue
index 54fd8b93d..428009970 100644
--- a/docs/.vuepress/components/colors/blues.vue
+++ b/docs/.vuepress/components/colors/blues.vue
@@ -26,10 +26,6 @@ export default {
     return {
       colors: [
         {
-          variable: 'blue-100',
-          hex: '#eff2fb',
-        },
-        {
           variable: 'blue-500',
           hex: '#2d60e5'
         }
diff --git a/docs/.vuepress/components/colors/grays.vue b/docs/.vuepress/components/colors/grays.vue
index 555399c61..c25230390 100644
--- a/docs/.vuepress/components/colors/grays.vue
+++ b/docs/.vuepress/components/colors/grays.vue
@@ -27,16 +27,16 @@ export default {
       colors: [
         {
           variable: 'gray-100',
-          hex: '#fafafa',
+          hex: '#f4f4f4',
           border: true
         },
         {
           variable: 'gray-200',
-          hex: '#f4f4f4'
+          hex: '#e6e6e6'
         },
         {
           variable: 'gray-300',
-          hex: '#dcdee0'
+          hex: '#d8d8d8'
         },
         {
           variable: 'gray-400',
@@ -56,7 +56,7 @@ export default {
         },
         {
           variable: 'gray-800',
-          hex: '#333333'
+          hex: '#3f3f3f'
         },
         {
           variable: 'gray-900',
diff --git a/docs/.vuepress/components/colors/greens.vue b/docs/.vuepress/components/colors/greens.vue
index fbb55f7ae..7a4badb7e 100644
--- a/docs/.vuepress/components/colors/greens.vue
+++ b/docs/.vuepress/components/colors/greens.vue
@@ -26,10 +26,6 @@ export default {
     return {
       colors: [
         {
-          variable: 'green-100',
-          hex: '#ecfdf1',
-        },
-        {
           variable: 'green-500',
           hex: '#0a7d06'
         }
diff --git a/docs/.vuepress/components/colors/reds.vue b/docs/.vuepress/components/colors/reds.vue
index 4f78f1287..529215841 100644
--- a/docs/.vuepress/components/colors/reds.vue
+++ b/docs/.vuepress/components/colors/reds.vue
@@ -26,10 +26,6 @@ export default {
     return {
       colors: [
         {
-          variable: 'red-100',
-          hex: '#feeeed',
-        },
-        {
           variable: 'red-500',
           hex: '#da1416'
         }
diff --git a/docs/.vuepress/components/colors/theme.vue b/docs/.vuepress/components/colors/theme.vue
index 6a9d551fa..02f9828b6 100644
--- a/docs/.vuepress/components/colors/theme.vue
+++ b/docs/.vuepress/components/colors/theme.vue
@@ -33,12 +33,12 @@ export default {
         {
           name: "secondary",
           variable: "gray-800",
-          hex: "#333333"
+          hex: "#3f3f3f"
         },
         {
           name: 'light',
           variable: 'gray-100',
-          hex: '#fafafa',
+          hex: '#f4f4f4',
           border: true
         },
         {
diff --git a/docs/.vuepress/components/colors/yellows.vue b/docs/.vuepress/components/colors/yellows.vue
index 7db04a1f0..fe5fbca06 100644
--- a/docs/.vuepress/components/colors/yellows.vue
+++ b/docs/.vuepress/components/colors/yellows.vue
@@ -26,10 +26,6 @@ export default {
     return {
       colors: [
         {
-          variable: 'yellow-100',
-          hex: '#fff8e4',
-        },
-        {
           variable: 'yellow-500',
           hex: '#efc100'
         }
diff --git a/docs/themes/readme.md b/docs/themes/readme.md
index a37baca91..5557ec2a0 100644
--- a/docs/themes/readme.md
+++ b/docs/themes/readme.md
@@ -48,6 +48,7 @@ This folder contains Sass helpers and default styles for customizing the OpenBMC
                └─ _toasts.scss
             └─  helpers
                ├─ _colors.scss
+               ├─ _functions.scss
                ├─ _index.scss
                ├─ _motion.scss
                └─ _variables.scss
@@ -66,16 +67,9 @@ The colors.scss file sets all the SASS variables and color maps for the OpenBMC
 $black: #000;
 $white: #fff;
 
-$blue-100: #eff2fb;
 $blue-500: #2d60e5;
-
-$green-100: #ecfdf1;
 $green-500: #0a7d06;
-
-$red-100: #feeeed;
 $red-500: #da1416;
-
-$yellow-100: #fff8e4;
 $yellow-500: #efc100;
 
 $gray-100: #f4f4f4;
@@ -120,14 +114,6 @@ $primary: $blue;
 $secondary: $gray-800;
 $success: $green;
 $warning: $yellow;
-
-// Sass Color Variable Accents
-// Used for component styles and are
-// not available as variants
-$danger-light: $red-100;
-$info-light: $blue-100;
-$warning-light: $yellow-100;
-$success-light: $green-100;
 ```
 
 ##### Custom Theme Colors Map
@@ -149,6 +135,44 @@ $theme-colors: (
 - [Learn more about Bootstrap variables](https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables)
 - [View the color palette and hex values in the color guidelines](/guide/guidelines/colors)
 
+#### _functions.scss
+Two functions provide a customized way to set color highlights. The `theme-color-light` and `theme-color-dark` are custom functions used to create colors for the `alert`, `badge`, `card`, and `toast` components. They have also set color highlights for some pseudo-elements like `: hover`.
+
+##### Functions
+```scss
+// This function is usually used to get a lighter
+// theme variant color to use as a background color
+@function theme-color-light($variant) {
+  @return theme-color-level($variant, -11.3);
+}
+
+@function theme-color-dark($variant) {
+  @return theme-color-level($variant, 2);
+}
+```
+
+##### Examples
+```scss{8-10,16}
+.b-table-sort-icon-left {
+    background-position: left calc(1.5rem / 2) center !important;
+    padding-left: calc(1.2rem + 0.65em) !important;
+    &:focus {
+      outline: none;
+      box-shadow: inset 0 0 0 2px theme-color('primary') !important;
+    }
+    &:hover {
+      background-color: theme-color-dark('light');
+    }
+  }
+}
+
+&.alert-info {
+border-left-color: theme-color("info");
+background-color: theme-color-light("info");
+fill: theme-color("info");
+}
+```
+
 #### _motion.scss
 This bezier curves and durations in this file determine the motion styles throughout the application. These guidelines from the Cabon Design System avoid easing curves that are unnatural, distracting, or purely decorative.
 
@@ -170,7 +194,7 @@ $exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
 ```
 
 ##### Example
-```scss
+```scss{6,9}
 .link-skip-nav {
   position: absolute;
   top: -60px;