diff options
| -rw-r--r-- | docs/.vuepress/components/colors/blues.vue | 4 | ||||
| -rw-r--r-- | docs/.vuepress/components/colors/grays.vue | 8 | ||||
| -rw-r--r-- | docs/.vuepress/components/colors/greens.vue | 4 | ||||
| -rw-r--r-- | docs/.vuepress/components/colors/reds.vue | 4 | ||||
| -rw-r--r-- | docs/.vuepress/components/colors/theme.vue | 4 | ||||
| -rw-r--r-- | docs/.vuepress/components/colors/yellows.vue | 4 | ||||
| -rw-r--r-- | docs/themes/readme.md | 56 |
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; |