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 54fd8b93..42800997 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 555399c6..c2523039 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 fbb55f7a..7a4badb7 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 4f78f128..52921584 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 6a9d551f..02f9828b 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 7db04a1f..fe5fbca0 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 a37baca9..5557ec2a 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;