From 01da81870818c364a67d9ba97ca84aec9afbcc4d Mon Sep 17 00:00:00 2001 From: Yoshie Muranaka Date: Wed, 8 Jul 2020 15:46:43 -0700 Subject: Update use of Sass variables for better theming Use Bootstrap color functions for theme-colors and grays instead of directly referencing Sass variable to allow more flexible theming. Signed-off-by: Yoshie Muranaka Change-Id: Id08b77ff6df3bdf99400dcdfe964853706f1070f --- src/assets/styles/bmc/custom/_alert.scss | 14 +++++++------- src/assets/styles/bmc/custom/_badge.scss | 2 +- src/assets/styles/bmc/custom/_base.scss | 2 +- src/assets/styles/bmc/custom/_buttons.scss | 10 +++++----- src/assets/styles/bmc/custom/_calendar.scss | 2 +- src/assets/styles/bmc/custom/_forms.scss | 16 ++++++++-------- src/assets/styles/bmc/custom/_modal.scss | 2 +- src/assets/styles/bmc/custom/_pagination.scss | 4 ++-- src/assets/styles/bmc/custom/_tables.scss | 14 +++++++------- src/assets/styles/bmc/custom/_toasts.scss | 12 ++++++------ src/assets/styles/bmc/helpers/_variables.scss | 4 +--- src/components/AppHeader/AppHeader.vue | 12 ++++++------ src/components/AppNavigation/AppNavigation.vue | 16 ++++++++-------- src/components/Global/PageSection.vue | 2 +- src/components/Global/Search.vue | 2 +- src/components/Global/TableToolbar.vue | 2 +- src/layouts/LoginLayout.vue | 6 +++++- src/views/Overview/OverviewQuickLinks.vue | 2 +- 18 files changed, 63 insertions(+), 61 deletions(-) diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss index 0b7b518a..1d28f2ae 100644 --- a/src/assets/styles/bmc/custom/_alert.scss +++ b/src/assets/styles/bmc/custom/_alert.scss @@ -2,7 +2,7 @@ display: flex; padding: $spacer; border-width: 0 0 0 3px; - color: $gray-800; + color: gray("800"); margin-bottom: $spacer; &.small { @@ -45,20 +45,20 @@ } &.alert-info { - border-left-color: $info; + border-left-color: theme-color("info"); background-color: $info-light; - fill: $info; + fill: theme-color("info"); } &.alert-danger { - border-left-color: $danger; + border-left-color: theme-color("danger"); background-color: $danger-light; - fill: $danger; + fill: theme-color("danger"); } &.alert-warning { - border-left-color: $warning; + border-left-color: theme-color("warning"); background-color: $warning-light; - fill: $warning; + fill: theme-color("warning"); } } \ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_badge.scss b/src/assets/styles/bmc/custom/_badge.scss index 7acd73a0..87b96e61 100644 --- a/src/assets/styles/bmc/custom/_badge.scss +++ b/src/assets/styles/bmc/custom/_badge.scss @@ -17,5 +17,5 @@ .badge-primary { background-color: $info-light; - color: $info; + color: theme-color("info"); } \ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss index 39a4aaa7..5a6a11ba 100644 --- a/src/assets/styles/bmc/custom/_base.scss +++ b/src/assets/styles/bmc/custom/_base.scss @@ -1,7 +1,7 @@ dt, legend, label { - color: $gray-800; + color: gray("800"); font-size: 14px; font-weight: 400; } diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss index b9b8073b..3f111302 100644 --- a/src/assets/styles/bmc/custom/_buttons.scss +++ b/src/assets/styles/bmc/custom/_buttons.scss @@ -21,23 +21,23 @@ } .btn-link { - fill: $primary; + fill: theme-color("primary"); text-decoration: none !important; &:focus { box-shadow: $btn-focus-box-shadow; } &:hover { - fill: darken($primary, 15%); + fill: darken(theme-color("primary"), 15%); } } .btn:disabled { - color: $gray-600; + color: gray("600"); fill: currentColor; &:not(.btn-link) { - border-color: $gray-400; - background-color: $gray-400; + border-color: gray("400"); + background-color: gray("400"); } } \ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_calendar.scss b/src/assets/styles/bmc/custom/_calendar.scss index bf7572e2..641e4ed1 100644 --- a/src/assets/styles/bmc/custom/_calendar.scss +++ b/src/assets/styles/bmc/custom/_calendar.scss @@ -2,7 +2,7 @@ .btn { &:hover { background: none; - color: $dark; + color: theme-color("dark"); } } } \ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss index 8d3ed9e4..1195f6cb 100644 --- a/src/assets/styles/bmc/custom/_forms.scss +++ b/src/assets/styles/bmc/custom/_forms.scss @@ -1,11 +1,11 @@ .form-text { margin-top: -$spacer / 4; margin-bottom: $spacer / 2; - color: $gray-800; + color: gray("800"); } .col-form-label { - color: $gray-800; + color: gray("800"); font-size: 14px; } @@ -17,12 +17,12 @@ .custom-control-label, .form-control { //important needed to override validation colors on radio labels - color: $dark !important; + color: theme-color("dark") !important; font-size: 16px; - border-color: $gray-400 !important; + border-color: gray("400") !important; &.is-invalid, &:invalid { - border-bottom: 2px solid $danger !important; + border-bottom: 2px solid theme-color("danger") !important; } } @@ -31,7 +31,7 @@ & + .custom-control-label { // Disabled label for checkbox, radio, // switch bootstrap form components - color: $gray-700!important; + color: gray("700")!important; } } } @@ -46,11 +46,11 @@ white-space: nowrap; margin-right: -$spacer; &.btn-link-primary { - color: $primary; + color: theme-color("primary"); fill: currentColor; } } .form-background { - background-color: $container-bgd; + background-color: gray("200"); } \ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_modal.scss b/src/assets/styles/bmc/custom/_modal.scss index 5d3b6014..a34a11bf 100644 --- a/src/assets/styles/bmc/custom/_modal.scss +++ b/src/assets/styles/bmc/custom/_modal.scss @@ -1,7 +1,7 @@ .modal-header { .close { font-weight: normal; - color: $dark; + color: theme-color("dark"); opacity: 1; } } \ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_pagination.scss b/src/assets/styles/bmc/custom/_pagination.scss index 4fed21ba..0c2ac85c 100644 --- a/src/assets/styles/bmc/custom/_pagination.scss +++ b/src/assets/styles/bmc/custom/_pagination.scss @@ -12,9 +12,9 @@ .b-pagination { .page-item.active button { - color: $dark; + color: theme-color("dark"); background-color: $white; border-color: $border-color; - box-shadow: inset 0px -3px $primary; + box-shadow: inset 0px -3px theme-color("primary"); } } \ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss index b20feb0d..52bdcff2 100644 --- a/src/assets/styles/bmc/custom/_tables.scss +++ b/src/assets/styles/bmc/custom/_tables.scss @@ -3,20 +3,20 @@ z-index: $zindex-dropdown; td { - border-top: 1px solid $gray-300; - border-bottom: 1px solid $gray-300; + border-top: 1px solid gray("300"); + border-bottom: 1px solid gray("300"); &:first-of-type { - border-left: 1px solid $gray-300; + border-left: 1px solid gray("300"); } &:last-of-type { - border-right: 1px solid $gray-300; + border-right: 1px solid gray("300"); } } // thead-light added for specificiy .thead-light th { border: none; - color: $dark; + color: theme-color("dark"); } .status-icon svg { @@ -34,7 +34,7 @@ } .b-table-details { - background-color: $light; + background-color: theme-color("light"); td { padding-left: calc(50px + (#{$table-cell-padding} * 2)); } @@ -57,7 +57,7 @@ width: 50px; } svg { - fill: $dark; + fill: theme-color("dark"); } } } \ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_toasts.scss b/src/assets/styles/bmc/custom/_toasts.scss index 9295b17e..c3e91b8a 100644 --- a/src/assets/styles/bmc/custom/_toasts.scss +++ b/src/assets/styles/bmc/custom/_toasts.scss @@ -14,31 +14,31 @@ .toast-header { background-color: inherit!important; //override specificity border: none; - color: $dark!important; //override specificity + color: theme-color("dark")!important; //override specificity padding-bottom: 0; } .toast-body { - color: $dark; + color: theme-color("dark"); padding-top: 0; } .b-toast-success .toast { - border-left-color: $success!important; + border-left-color: theme-color("success")!important; background-color: $success-light; } .b-toast-info .toast { - border-left-color: $info!important; + border-left-color: theme-color("info")!important; background-color: $info-light; } .b-toast-danger .toast { - border-left-color: $danger!important; + border-left-color: theme-color("danger")!important; background-color: $danger-light; } .b-toast-warning .toast { - border-left-color: $warning!important; + border-left-color: theme-color("warning")!important; background-color: $warning-light; } \ No newline at end of file diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss index cbee2dfe..ea300ec7 100644 --- a/src/assets/styles/bmc/helpers/_variables.scss +++ b/src/assets/styles/bmc/helpers/_variables.scss @@ -8,6 +8,4 @@ $transition-collapse: height $duration--slow-01 $standard-easing--expres // OpenBMC Custom Variables $responsive-layout-bp: lg; $header-height: 56px; -$navigation-width: 300px; -$container-bgd: $gray-200; -$primary-nav-hover: $gray-300; \ No newline at end of file +$navigation-width: 300px; \ No newline at end of file diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index a69d6d9f..7f18e1d2 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -179,7 +179,7 @@ export default { } .nav-item { - fill: $light; + fill: theme-color('light'); } .navbar { @@ -194,7 +194,7 @@ export default { .helper-menu { @include media-breakpoint-down(sm) { - background-color: $gray-800; + background-color: gray('800'); width: 100%; justify-content: flex-end; @@ -217,7 +217,7 @@ export default { } .nav-trigger { - fill: $light; + fill: theme-color('light'); width: $header-height; height: $header-height; transition: none; @@ -227,12 +227,12 @@ export default { } &:hover { - fill: $light; - background-color: $dark; + fill: theme-color('light'); + background-color: theme-color('dark'); } &.open { - background-color: $gray-800; + background-color: gray('800'); } @include media-breakpoint-up($responsive-layout-bp) { diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index 175b0aa0..37f0f717 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -212,16 +212,16 @@ svg { font-weight: $headings-font-weight; padding-left: $spacer; // defining consistent padding for links and buttons padding-right: $spacer; - color: $secondary; + color: theme-color('secondary'); &:hover { - background-color: $primary-nav-hover; - color: $dark; + background-color: gray('300'); + color: theme-color('dark'); } &:focus { box-shadow: $btn-focus-box-shadow; - color: $dark; + color: theme-color('dark'); } } @@ -229,8 +229,8 @@ svg { .nav-link--current:hover, .nav-link--current:focus { font-weight: $headings-font-weight; - background-color: $secondary; - color: $light; + background-color: theme-color('secondary'); + color: theme-color('light'); cursor: default; &::before { @@ -240,7 +240,7 @@ svg { bottom: 0; left: 0; width: 4px; - background-color: $primary; + background-color: theme-color('primary'); } } @@ -252,7 +252,7 @@ svg { left: 0; z-index: $zindex-fixed; overflow-y: auto; - background-color: $container-bgd; + background-color: gray('200'); transform: translateX(-$navigation-width); transition: transform $exit-easing--productive $duration--moderate-02; @include media-breakpoint-down(md) { diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue index 58119986..6f44a3a3 100644 --- a/src/components/Global/PageSection.vue +++ b/src/components/Global/PageSection.vue @@ -31,7 +31,7 @@ h2 { content: ''; display: block; width: 100px; - border: 1px solid $gray-300; + border: 1px solid gray('300'); margin-top: 10px; } } diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue index b4be4637..c385740b 100644 --- a/src/components/Global/Search.vue +++ b/src/components/Global/Search.vue @@ -59,6 +59,6 @@ export default { left: 10px; top: 12px; z-index: 4; - stroke: $gray-400; + stroke: gray('400'); } diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue index 05b96699..2fbbd6cd 100644 --- a/src/components/Global/TableToolbar.vue +++ b/src/components/Global/TableToolbar.vue @@ -79,7 +79,7 @@ $toolbar-height: 46px; .toolbar-content { height: $toolbar-height; - background-color: $primary; + background-color: theme-color('primary'); color: $white; position: absolute; left: 0; diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue index bb89f25e..8dd741c3 100644 --- a/src/layouts/LoginLayout.vue +++ b/src/layouts/LoginLayout.vue @@ -32,7 +32,11 @@ export default { .login-container { @include media-breakpoint-up(md) { - background: linear-gradient(to right, $light 50%, $container-bgd 50%); + background: linear-gradient( + to right, + theme-color('light') 50%, + gray('200') 50% + ); } } diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue index 5dd71ee2..d3a19403 100644 --- a/src/views/Overview/OverviewQuickLinks.vue +++ b/src/views/Overview/OverviewQuickLinks.vue @@ -106,7 +106,7 @@ dl { } .quicklinks { - background: $container-bgd; + background: gray('200'); display: grid; grid-gap: 1rem; padding: 1rem; -- cgit v1.2.3