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
diff --git a/docs/.vuepress/components/colors/blues.vue b/docs/.vuepress/components/colors/blues.vue
index 54fd8b9..4280099 100644
--- a/docs/.vuepress/components/colors/blues.vue
+++ b/docs/.vuepress/components/colors/blues.vue
@@ -26,10 +26,6 @@
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 555399c..c252303 100644
--- a/docs/.vuepress/components/colors/grays.vue
+++ b/docs/.vuepress/components/colors/grays.vue
@@ -27,16 +27,16 @@
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 @@
},
{
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 fbb55f7..7a4badb 100644
--- a/docs/.vuepress/components/colors/greens.vue
+++ b/docs/.vuepress/components/colors/greens.vue
@@ -26,10 +26,6 @@
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 4f78f12..5292158 100644
--- a/docs/.vuepress/components/colors/reds.vue
+++ b/docs/.vuepress/components/colors/reds.vue
@@ -26,10 +26,6 @@
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 6a9d551..02f9828 100644
--- a/docs/.vuepress/components/colors/theme.vue
+++ b/docs/.vuepress/components/colors/theme.vue
@@ -33,12 +33,12 @@
{
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 7db04a1..fe5fbca 100644
--- a/docs/.vuepress/components/colors/yellows.vue
+++ b/docs/.vuepress/components/colors/yellows.vue
@@ -26,10 +26,6 @@
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 a37baca..5557ec2 100644
--- a/docs/themes/readme.md
+++ b/docs/themes/readme.md
@@ -48,6 +48,7 @@
└─ _toasts.scss
└─ helpers
├─ _colors.scss
+ ├─ _functions.scss
├─ _index.scss
├─ _motion.scss
└─ _variables.scss
@@ -66,16 +67,9 @@
$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 @@
$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 @@
- [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 @@
```
##### Example
-```scss
+```scss{6,9}
.link-skip-nav {
position: absolute;
top: -60px;